/* ==========================================================================
   SightReader theme - black and antique brass

   Tweak the :root block; everything else derives from it.

   Component classes available to any page:
     .control-bar   raised settings banner
     .score-card    cream card the notation sits on
     .transport     centred playback pill
       .tbtn        a transport button (add .is-active when engaged)
     .saved-panel   bordered list container
     .audio-host    visually-hidden host for the abcjs synth controller
   ========================================================================== */

:root {
    /* Shell */
    --ink: #0c0c0e;
    --surface: #15151a;
    --surface-raised: #1c1c22;
    --hairline: #292930;

    /* Antique brass - desaturated, closer to bronze than gold */
    --brass: #ab9160;
    --brass-bright: #ccb68d;
    --brass-dim: #5f5133;
    --brass-glow: rgba(171, 145, 96, 0.11);

    /* Paper - the score sits on this */
    --paper: #f3ecdc;
    --paper-edge: #ddd2ba;
    --paper-ink: #16130d;

    /* Text */
    --text: #e3ded4;
    --text-dim: #8d867b;

    --radius: 10px;
    --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
    --sans: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

html, body {
    background: var(--ink);
    color: var(--text);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}

body {
    background-image: radial-gradient(ellipse at 50% -10%, rgba(171, 145, 96, 0.035), transparent 60%);
    background-attachment: fixed;
    min-height: 100vh;
}

h1, h2, h3 {
    font-family: var(--serif);
    letter-spacing: 0.01em;
    color: var(--text);
}

h1 {
    font-size: 1.9rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

    h1::after {
        content: "";
        display: block;
        width: 3rem;
        height: 1px;
        margin-top: 0.6rem;
        background: linear-gradient(90deg, var(--brass), transparent);
    }

h2 {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-family: var(--sans);
}

h1:focus { outline: none; }

a { color: var(--brass); text-decoration: none; }
a:hover { color: var(--brass-bright); }

::selection { background: var(--brass); color: #17130a; }

/* ==========================================================================
   Shell: top bar, hamburger, slide-out drawer
   ========================================================================== */

.shell { min-height: 100vh; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 56px;
    padding: 0 1.1rem;
    background: rgba(12, 12, 14, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hairline);
}

    .topbar::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: -1px;
        height: 1px;
        background: linear-gradient(90deg, var(--brass-dim), transparent 55%);
    }

.brand {
    font-family: var(--serif);
    font-size: 1.15rem;
    letter-spacing: 0.06em;
    color: var(--text);
}

    .brand span { color: var(--brass); }
    .brand:hover { color: var(--text); }

.hamburger {
    width: 38px;
    height: 38px;
    display: grid;
    place-content: center;
    gap: 5px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}

    .hamburger:hover { border-color: var(--brass-dim); background: var(--brass-glow); }

    .hamburger span {
        display: block;
        width: 20px;
        height: 2px;
        background: var(--brass);
        transition: transform 0.22s ease, opacity 0.18s ease;
    }

    .hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.is-open span:nth-child(2) { opacity: 0; }
    .hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    width: 250px;
    z-index: 25;
    padding: 1.2rem 0.8rem;
    background: var(--surface);
    border-right: 1px solid var(--hairline);
    transform: translateX(-100%);
    transition: transform 0.24s ease;
}

    .drawer--open { transform: translateX(0); }

.scrim {
    position: fixed;
    inset: 56px 0 0 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
}

    .scrim--on { opacity: 1; pointer-events: auto; }

.main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem 5rem;
}

.nav-link {
    display: block;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    color: var(--text-dim);
    border-left: 2px solid transparent;
}

    .nav-link:hover { color: var(--text); background: var(--surface-raised); }

    .nav-link.active {
        color: var(--brass);
        background: var(--brass-glow);
        border-left-color: var(--brass);
    }

/* ==========================================================================
   Control bar - the settings banner above the score
   ========================================================================== */

.control-bar {
    background: linear-gradient(180deg, var(--surface-raised), var(--surface));
    border: 1px solid var(--hairline);
    border-top: 1px solid var(--brass-dim);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

    .control-bar .form-label {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.11em;
        color: var(--text-dim);
        margin-bottom: 0.3rem;
    }

/* ==========================================================================
   Score card
   abcjs draws its SVG with currentColor, so the ink colour has to be set here
   or the notation inherits the page's off-white body text.
   ========================================================================== */

.score-card {
    background: var(--paper);
    border: 1px solid var(--paper-edge);
    border-radius: var(--radius);
    padding: 1.5rem 1.25rem 0.5rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    min-height: 120px;
    color: var(--paper-ink);
}

    .score-card svg { color: var(--paper-ink); }

    .score-card svg path:not([fill="none"]) { fill: var(--paper-ink); }
    .score-card svg text { fill: var(--paper-ink); }

    .score-card > div:empty::before {
        content: "Choose a key and hit Generate.";
        display: block;
        color: #8b8069;
        font-style: italic;
        text-align: center;
        padding: 2rem 0;
    }

/* ==========================================================================
   Transport - our own buttons; abcjs's control panel is hidden
   ========================================================================== */

.audio-host {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.transport {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    width: max-content;
    margin: 1.1rem auto 2.5rem;
    padding: 0.35rem 0.55rem;
    background: var(--surface-raised);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.tbtn {
    display: grid;
    place-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--brass);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .tbtn svg { width: 17px; height: 17px; fill: currentColor; display: block; }

    .tbtn:hover { background: var(--brass-glow); color: var(--brass-bright); }

    .tbtn.is-active {
        background: var(--brass-glow);
        border-color: var(--brass-dim);
        color: var(--brass-bright);
    }

    .tbtn:disabled { color: #4a463f; cursor: default; background: transparent; }

/* ==========================================================================
   Bootstrap overrides
   ========================================================================== */

.form-control,
.form-select {
    background-color: #101014;
    border: 1px solid var(--hairline);
    color: var(--text);
    border-radius: 8px;
}

    .form-control:focus,
    .form-select:focus {
        background-color: #101014;
        color: var(--text);
        border-color: var(--brass);
        box-shadow: 0 0 0 3px var(--brass-glow);
    }

    .form-control::placeholder { color: #6d675e; }

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ab9160' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-select option { background: #15151a; color: var(--text); }

.form-check-input {
    background-color: #101014;
    border-color: var(--hairline);
}

    .form-check-input:checked {
        background-color: var(--brass);
        border-color: var(--brass);
    }

    .form-check-input:focus {
        border-color: var(--brass);
        box-shadow: 0 0 0 3px var(--brass-glow);
    }

.form-check-label { color: var(--text-dim); }

.btn { border-radius: 8px; font-weight: 500; letter-spacing: 0.02em; }

.btn-primary {
    background: var(--brass);
    border-color: var(--brass);
    color: #17130a;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background: var(--brass-bright);
        border-color: var(--brass-bright);
        color: #17130a;
    }

.btn-success {
    background: transparent;
    border-color: var(--brass-dim);
    color: var(--brass);
}

    .btn-success:hover,
    .btn-success:focus {
        background: var(--brass-glow);
        border-color: var(--brass);
        color: var(--brass-bright);
    }

.btn-outline-primary {
    border-color: var(--hairline);
    color: var(--brass);
}

    .btn-outline-primary:hover {
        background: var(--brass-glow);
        border-color: var(--brass-dim);
        color: var(--brass-bright);
    }

.btn-outline-danger {
    border-color: var(--hairline);
    color: #a86d66;
}

    .btn-outline-danger:hover {
        background: rgba(168, 109, 102, 0.12);
        border-color: #a86d66;
        color: #c48d85;
    }

.btn:focus, .btn:active:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--brass-glow);
}

.saved-panel {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 0.6rem 1rem;
    margin-top: 0.8rem;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    color: var(--text);
    margin-bottom: 0;
}

    .table > :not(caption) > * > * {
        background: transparent;
        color: var(--text);
        border-bottom-color: var(--hairline);
    }

    .table tbody tr:last-child > * { border-bottom: none; }
    .table tbody tr:hover > * { background: rgba(255, 255, 255, 0.025); }

.text-muted { color: var(--text-dim) !important; }

.alert-warning {
    background: rgba(171, 145, 96, 0.09);
    border: 1px solid var(--brass-dim);
    color: var(--brass-bright);
    border-radius: var(--radius);
}

/* Cold-start notice - deliberately calmer than a warning, since nothing is wrong */
.alert-wake {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: rgba(171, 145, 96, 0.06);
    border: 1px solid var(--hairline);
    border-left: 2px solid var(--brass);
    border-radius: var(--radius);
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.5rem;
    color: var(--text-dim);
    font-size: 0.92rem;
}

    .alert-wake strong { color: var(--brass-bright); font-weight: 500; }

.spinner {
    flex: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--hairline);
    border-top-color: var(--brass);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Blazor plumbing
   ========================================================================== */

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #24242c;
        stroke-width: 0.5rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--brass);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-family: var(--serif);
    color: var(--text-dim);
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

#blazor-error-ui {
    color-scheme: dark only;
    background: #2a1f1f;
    color: #e5c9c9;
    border-top: 1px solid #7c3b3b;
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
    .blazor-error-boundary::after { content: "An error has occurred."; }

.validation-message { color: #c48d85; }

@media (max-width: 640px) {
    .main { padding: 1.25rem 1rem 4rem; }
    .control-bar { padding: 0.9rem; }
    .score-card { padding: 1rem 0.6rem 0.3rem; }
}