/* =====================================================================
   Rehearsal Room v2: depth, glow and music. Loaded after site.css.
   ===================================================================== */
:root {
    --staff: rgba(90, 60, 25, .075);
    --glow: rgba(194, 90, 20, .42);
    --glow-soft: rgba(194, 90, 20, .16);
    --card-hi: rgba(255, 255, 255, .65);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --staff: rgba(240, 200, 140, .05);
        --glow: rgba(240, 164, 58, .55);
        --glow-soft: rgba(240, 164, 58, .14);
        --card-hi: rgba(255, 255, 255, .05);
    }
}
:root[data-theme="dark"] {
    --staff: rgba(240, 200, 140, .05);
    --glow: rgba(240, 164, 58, .55);
    --glow-soft: rgba(240, 164, 58, .14);
    --card-hi: rgba(255, 255, 255, .05);
}

/* Smooth colour change when switching theme (only during the switch). */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
    transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease !important;
}

/* Background: stage light plus faint staves, like manuscript paper. */
body {
    background:
        radial-gradient(1100px 520px at 50% -160px, var(--bg-glow), transparent 70%),
        radial-gradient(700px 400px at 100% 110%, var(--glow-soft), transparent 70%),
        repeating-linear-gradient(to bottom,
            transparent 0 64px,
            var(--staff) 64px 65px, transparent 65px 72px,
            var(--staff) 72px 73px, transparent 73px 80px,
            var(--staff) 80px 81px, transparent 81px 88px,
            var(--staff) 88px 89px, transparent 89px 96px,
            var(--staff) 96px 97px, transparent 97px 150px),
        var(--bg);
    background-attachment: fixed;
}

/* Drifting notes. */
.note-field { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.note-field span {
    position: absolute;
    bottom: -60px;
    left: var(--x);
    font-size: var(--s);
    color: var(--accent);
    opacity: var(--o, .09);
    filter: blur(var(--b, 0px));
    text-shadow: 0 0 12px var(--glow);
    animation: drift var(--d) linear infinite;
    animation-delay: var(--delay);
    will-change: transform;
}
.note-field span:nth-child(3n) { color: var(--teal); }
@keyframes drift {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); }
    25% { transform: translate3d(18px, -30vh, 0) rotate(calc(var(--r) * .4)); }
    50% { transform: translate3d(-14px, -60vh, 0) rotate(calc(var(--r) * .7)); }
    100% { transform: translate3d(10px, -125vh, 0) rotate(var(--r)); }
}

/* Top bar: a soft glow travelling along the brass edge, and a lift on the pick logo. */
.topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    right: auto;
    width: 40%;
    background: linear-gradient(90deg, transparent, var(--spark), transparent);
    animation: edge-glow 7s ease-in-out infinite;
    opacity: .8;
    will-change: transform;
}
@keyframes edge-glow { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
/* Slide-ins like the top bar's glow never cause sideways scrolling. */
html { overflow-x: clip; }
/* Wide decorative art (the hero score scrolls past its frame) never widens the page. */
.page { overflow-x: clip; }
.brand svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mark) 45%, transparent)); transition: transform .3s; }
.brand:hover svg { transform: rotate(-12deg) scale(1.08); }

.theme-toggle {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    color: var(--amp-muted);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
}
.theme-toggle:hover:not(:disabled) { color: var(--spark); border-color: color-mix(in srgb, var(--spark) 50%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--spark) 35%, transparent); }
.theme-toggle:active:not(:disabled) { padding: 0; border-bottom-width: 1px; }
.theme-toggle svg { width: 18px; height: 18px; display: none; }
.theme-toggle[data-choice="auto"] .i-auto,
.theme-toggle:not([data-choice]) .i-auto,
.theme-toggle[data-choice="light"] .i-light,
.theme-toggle[data-choice="dark"] .i-dark { display: block; }

/* Page entrance. */
.page > * { animation: rise .55s cubic-bezier(.2, .8, .2, 1) both; }
.page > *:nth-child(2) { animation-delay: .04s; }
.page > *:nth-child(3) { animation-delay: .08s; }
.page > *:nth-child(4) { animation-delay: .12s; }
.page > *:nth-child(5) { animation-delay: .16s; }
.page > *:nth-child(n+6) { animation-delay: .2s; }
@keyframes rise { from { transform: translateY(14px); } }

/* Page titles: the staff gets a little note sitting on it. */
h1::after {
    width: 76px;
    background:
        radial-gradient(ellipse 5px 4px at 62px 9px, var(--accent) 98%, transparent 100%),
        linear-gradient(var(--accent), var(--accent)) 66px 0 / 1.5px 9px no-repeat,
        repeating-linear-gradient(to bottom, var(--accent) 0 1px, transparent 1px 3px);
    filter: drop-shadow(0 0 4px var(--glow-soft));
}

/* Cards: layered depth and a top highlight; clickable ones lift and glow on hover. */
.card, .form-card, .feature {
    background:
        linear-gradient(180deg, var(--card-hi), transparent 120px),
        var(--surface);
    box-shadow:
        0 1px 0 var(--card-hi) inset,
        0 1px 2px rgba(0, 0, 0, .08),
        0 12px 30px -18px rgba(0, 0, 0, .55);
}
.feature, .group-list a, .member-cards li, .tab-list li {
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, border-color .28s, background-color .28s;
}
.feature:hover, .group-list a:hover {
    transform: perspective(900px) rotateX(3deg) translateY(-6px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    box-shadow: 0 0 0 1px var(--glow-soft), 0 24px 44px -18px var(--glow), 0 10px 20px -12px rgba(0, 0, 0, .5);
}
.feature .icon { transition: transform .35s cubic-bezier(.2, .8, .2, 1.4), box-shadow .3s; }
.feature:hover .icon { transform: translateY(-3px) rotate(-6deg) scale(1.08); box-shadow: 0 0 18px var(--glow-soft); }
.member-cards li:hover, .tab-list li:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.monogram { transition: transform .3s, box-shadow .3s; }
.group-list a:hover .monogram { transform: rotate(-6deg) scale(1.06); box-shadow: 0 0 22px var(--glow), inset 0 -3px 0 rgba(0, 0, 0, .18); }
.group-list a:hover .slots i.on { box-shadow: 0 0 8px var(--glow); }

/* Buttons: a warm glow when hovered, a real press when clicked. */
button.primary:hover:not(:disabled), .button.primary:hover { box-shadow: 0 0 0 4px var(--glow-soft), 0 10px 26px -8px var(--glow); }
button.record:hover:not(:disabled) { box-shadow: 0 0 0 4px rgba(255, 80, 80, .15), 0 10px 26px -8px rgba(255, 80, 80, .55); }
button:not(:disabled):hover, .button:hover { transform: translateY(-1px); }
button:active:not(:disabled), .button:active { transform: translateY(1px); }
button.big.primary:not(:disabled), .button.big.primary.breathe { position: relative; }
button.big.primary:not(:disabled)::after, .button.big.primary.breathe::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 6px var(--glow-soft), 0 12px 30px -10px var(--glow);
    opacity: 0;
    pointer-events: none;
    animation: breathe 3.2s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: 1; } }

/* Hero: the stave plays itself. Notes glow and bounce as the playhead passes. */
.hero-art { position: relative; }
.hero-art::before {
    content: "";
    position: absolute;
    inset: 10% 5%;
    background: radial-gradient(closest-side, var(--glow-soft), transparent);
    filter: blur(20px);
    z-index: -1;
}
.stave-art .timesig { font-family: var(--font-display); font-weight: 800; font-size: 40px; fill: currentColor; opacity: .55; }
.stave-art .playhead { filter: drop-shadow(0 0 6px var(--glow)); }
.stave-art .hit { transform-box: fill-box; transform-origin: center; animation: note-hit 6s linear infinite; animation-delay: var(--t); }
@keyframes note-hit {
    0% { transform: translateY(0) scale(1); filter: none; }
    3% { transform: translateY(-6px) scale(1.12); filter: url(#note-glow) brightness(1.25); }
    10% { transform: translateY(0) scale(1); filter: url(#note-glow); }
    22%, 100% { transform: none; filter: none; }
}
.eq { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 44px; margin-top: 6px; }
.eq span {
    width: 8px;
    height: 100%;
    border-radius: 3px 3px 1px 1px;
    background: linear-gradient(to top, var(--accent), color-mix(in srgb, var(--accent) 40%, var(--teal)));
    box-shadow: 0 0 10px var(--glow-soft);
    transform-origin: bottom;
    animation: eq 1.2s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -0.13s);
    opacity: .85;
}
.eq span:nth-child(3n) { animation-duration: .9s; }
.eq span:nth-child(4n) { animation-duration: 1.5s; }
@keyframes eq { 0% { transform: scaleY(.15); } 50% { transform: scaleY(.7); } 100% { transform: scaleY(.35); } }

/* Manifesto: a slowly turning glow around the amp panel. */
.manifesto { position: relative; isolation: isolate; }
.manifesto::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, transparent 20%, var(--spark) 50%, transparent 80%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ring-breathe 6s ease-in-out infinite;
    z-index: -1;
}
@keyframes ring-breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.nots li { transition: transform .25s; }
.nots li:hover { transform: translateX(4px); }

/* Practice feedback gets more stage presence. */
.live { box-shadow: inset 0 1px 0 var(--card-hi), 0 10px 24px -18px rgba(0, 0, 0, .6); }
.live-big span { text-shadow: 0 0 18px var(--glow-soft); }
.score-overlay .mark.perfect { box-shadow: 0 0 10px rgba(31, 157, 85, .55); }
.score-overlay .mark.miss { box-shadow: 0 0 10px rgba(214, 48, 60, .5); }
.result-acc span { text-shadow: 0 0 30px var(--glow); }

/* Respect reduced motion everywhere. */
@media (prefers-reduced-motion: reduce) {
    .note-field span, .topbar::after, .stave-art .hit, .eq span, .manifesto::before, button.big.primary, .page > * { animation: none !important; }
    .feature:hover, .group-list a:hover { transform: none; }
}

/* Instrument picker (profile). */
.instrument-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.instrument-picker .pick { position: relative; cursor: pointer; }
.instrument-picker .pick input { position: absolute; opacity: 0; pointer-events: none; }
.instrument-picker .pick span {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    font-size: 14px;
    font-weight: 600;
    transition: all .2s;
}
.instrument-picker .pick:hover span { border-color: var(--accent); transform: translateY(-1px); }
.instrument-picker .pick input:checked + span {
    color: var(--accent-ink);
    background: linear-gradient(to bottom, var(--accent-strong), var(--accent));
    border-color: var(--accent);
    box-shadow: 0 0 14px var(--glow-soft);
}
.instrument-picker .pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Dashboard. */
.dash-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 10px 0 18px; flex-wrap: wrap; }
.dash-hero h1 { font-size: clamp(30px, 4.5vw, 46px); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
.dash-hero .lede { margin: 0; }
.dash-eq { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.dash-eq span {
    width: 7px;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(to top, var(--accent), var(--teal));
    transform-origin: bottom;
    animation: eq 1.1s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -0.17s);
    opacity: .8;
    box-shadow: 0 0 10px var(--glow-soft);
}
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.card-head h2 { margin-bottom: 10px; }
.nudge { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.nudge-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; color: var(--accent); background: var(--accent-soft); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px) rotate(-8deg); } }
.last-run { display: flex; align-items: center; gap: 16px; margin: 4px 0 16px; }
.ring {
    --p: 0;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side, var(--surface) 78%, transparent 80% 100%),
        conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-3) 0);
    box-shadow: 0 0 22px var(--glow-soft);
    flex: none;
}
.ring span { font-family: var(--font-display); font-weight: 750; font-size: 20px; }
.mini-bands { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mini-bands a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; transition: background-color .2s, transform .2s; }
.mini-bands a:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); transform: translateX(3px); color: var(--text); }
.mini-bands .monogram { width: 38px; height: 38px; font-size: 16px; border-radius: 10px; }
.notes.compact { margin: 0; }
.notes.compact li { padding: 8px 2px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .dash-eq span, .nudge-icon { animation: none; } }

/* ---- Band session room ---- */

.live-dot { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--record); vertical-align: middle; margin-right: 4px; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--record); animation: live-ping 1.6s ease-out infinite; }
@keyframes live-ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3); opacity: 0; } }
.session-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 18px; }
.session-head h1 { margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.session-head h1 .pill { font-size: 13px; }
.eyebrow { margin: 0 0 4px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.eyebrow a { color: var(--accent); text-decoration: none; }
.session-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); gap: 18px; align-items: start; margin-top: 18px; }
@media (max-width: 900px) { .session-layout { grid-template-columns: 1fr; } }
.stage { position: relative; overflow: hidden; }
.stage::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent), var(--teal), transparent); opacity: .8; }
.stage-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.stage-head h2 { margin: 0; }
.stage-head .tab-title { font-family: var(--font-display); font-size: 18px; color: var(--accent); }
.conduct { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); }
.conduct::before { content: "🎼 Conductor"; display: block; width: 100%; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.countdown { font-family: var(--font-display); font-size: 22px; color: var(--accent); text-shadow: 0 0 18px var(--glow, transparent); min-width: 8ch; }
.countdown:not(:empty) { animation: count-pop .5s ease-out; }
@keyframes count-pop { from { transform: scale(1.25); opacity: .4; } }
.people h3 { margin: 18px 0 6px; font-size: 15px; }
.people-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.people-list li { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); transition: transform .2s ease, box-shadow .2s ease; animation: rise .4s ease-out; }
.people-list li:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.people-list .grow { min-width: 0; }
.people-list .pill { font-size: 11px; padding: 1px 8px; }
.readiness { display: flex; gap: 5px; }
.readiness .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.readiness .dot.ok { background: var(--ok); box-shadow: 0 0 8px color-mix(in srgb, var(--ok) 70%, transparent); }
.readiness .dot.fair { background: var(--warn); }
@media (prefers-reduced-motion: reduce) { .live-dot, .countdown:not(:empty), .people-list li, .button.big.primary.breathe { animation: none; } }

/* ---- Voice chat ---- */
.talk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.talk-bar .hint { flex: 1 1 140px; margin: 0; }
.mic-button { border-radius: 999px; padding: 8px 16px; font-weight: 600; transition: background .2s ease, box-shadow .2s ease, transform .15s ease; }
.mic-button.live { background: var(--ok); border-color: var(--ok); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent), 0 8px 24px -8px var(--ok); }
.mic-button.muted[aria-pressed="false"] { background: color-mix(in srgb, var(--bad) 14%, var(--surface)); border-color: color-mix(in srgb, var(--bad) 50%, transparent); color: var(--bad); }
.mic-button:active:not(:disabled) { transform: scale(.96); }
.voice-ring { position: relative; display: inline-flex; border-radius: 50%; flex: none; }
.voice-ring::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ok); opacity: 0; transform: scale(.9); transition: opacity .15s ease, transform .15s ease; pointer-events: none; }
.people-list li.speaking .voice-ring::after { opacity: 1; transform: scale(calc(1 + var(--level, 0) * .18)); box-shadow: 0 0 14px color-mix(in srgb, var(--ok) 70%, transparent); }
.people-list li.speaking { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.mic-state { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.mic-state.open { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.mic-state.muted { color: var(--muted); }
.mic-state.none { opacity: .6; }
.mic-state.connecting:not(.none) { border-style: dashed; }
.mic-state.failed:not(.none) { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.peer-volume { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; }
.peer-volume input { width: 110px; accent-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .voice-ring::after { transition: none; } }

/* ---- Rig: monitoring and help ---- */
.monitor-box { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.switch-row { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.switch-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.monitor-box .hint { margin: 6px 0 0; }
.help-box { margin-top: 10px; font-size: 14px; }
.help-box summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; }
.help-box summary::before { content: "♪ "; }
.help-box[open] summary { margin-bottom: 6px; }
.help-box ul { padding-left: 18px; margin: 6px 0; }
.help-box li { margin: 4px 0; }

/* ---- Rig: test input ---- */
.test-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.test-result { margin: 6px 0 10px; font-size: 14px; color: var(--muted); padding-left: 10px; border-left: 3px solid var(--border); }
.test-result.listening { color: var(--accent); border-color: var(--accent); animation: breathe-text 1s ease-in-out infinite; }
.test-result.good { color: var(--ok); border-color: var(--ok); }
.test-result.hot, .test-result.quiet { color: var(--warn); border-color: var(--warn); }
.test-result.clipping, .test-result.silent { color: var(--bad); border-color: var(--bad); }
@keyframes breathe-text { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .test-result.listening { animation: none; } }

/* ---- Tuner ---- */
/* ---- The tuner: a stage tuner pedal on the same dark hardware as the pedalboard ---- */
.tuner { margin-top: 14px; }
.tuner-unit {
    --tn-glass: color-mix(in srgb, var(--accent) 7%, #06080a);
    --tn-near: color-mix(in srgb, var(--ok) 55%, var(--warn));
    position: relative;
    display: grid;
    gap: 14px;
    padding: 16px 18px 18px;
    border-radius: 16px;
    color: #e8ecee;
    border: 1px solid #000;
    border-top: 3px solid var(--accent);
    background:
        radial-gradient(circle at 12px 14px, #d6d9dc 0 2.4px, #6d7276 2.6px 3.4px, transparent 3.6px),
        radial-gradient(circle at calc(100% - 12px) 14px, #d6d9dc 0 2.4px, #6d7276 2.6px 3.4px, transparent 3.6px),
        radial-gradient(circle at 12px calc(100% - 12px), #d6d9dc 0 2.4px, #6d7276 2.6px 3.4px, transparent 3.6px),
        radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #d6d9dc 0 2.4px, #6d7276 2.6px 3.4px, transparent 3.6px),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 4px),
        radial-gradient(120% 140% at 50% 0%, #2a2d31, #111316);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -10px 30px rgba(0, 0, 0, .45), 0 18px 36px -22px rgba(0, 0, 0, .8);
}
.tuner-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; padding: 0 14px; }
.tuner-brand { align-self: center; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #9aa3a8; }
.tuner-brand b { font-family: var(--font-display); font-size: 16px; letter-spacing: .02em; text-transform: none; color: var(--accent); margin-right: 6px; font-style: italic; }
.tuner-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-left: auto; }
.tuner-controls .field { margin: 0; color: #9aa3a8; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.tuner-controls .field .hint { color: #6f787d; text-transform: none; letter-spacing: 0; }
.tuner-controls select, .tuner-controls input { background: #0b0d0f; color: #e8ecee; border-color: #2c3236; font-size: 14px; text-transform: none; letter-spacing: 0; }
.tuner-controls .field.narrow { white-space: nowrap; }
.tuner-controls .field.narrow input { width: 76px; }
.tuner-close { width: 32px; height: 32px; padding: 0; border-radius: 50%; background: #0b0d0f; color: #9aa3a8; border: 1px solid #2c3236; align-self: center; }
.tuner-close:hover:not(:disabled) { color: #fff; border-color: #6f787d; }

/* The screen: dark glass with the LED arc, the note, and the flat/sharp arrows. */
.tuner-screen {
    position: relative;
    display: grid;
    justify-items: center;
    width: min(100%, 560px);
    margin: 0 auto;
    padding: 18px 16px 12px;
    border-radius: 12px;
    background: radial-gradient(90% 120% at 50% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), var(--tn-glass);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .04), 0 1px 0 rgba(255, 255, 255, .06);
}
.tuner-arc { position: relative; width: 300px; height: 150px; max-width: 100%; }
.tuner-arc .seg { position: absolute; left: calc(50% - 5px); bottom: 0; width: 10px; height: 148px; transform-origin: 50% 100%; transform: rotate(var(--deg)); }
.tuner-arc .seg::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 26px; border-radius: 3px;
    background: var(--seg, var(--warn)); opacity: .13; transition: opacity .09s linear;
}
.tuner-arc .seg.c { --seg: var(--ok); }
.tuner-arc .seg.c::before { height: 34px; width: 14px; left: -2px; }
.tuner-arc .seg.n { --seg: var(--tn-near); }
.tuner-arc .seg.w { --seg: var(--warn); }
.tuner-arc .seg.f { --seg: var(--bad); }
.tuner-arc .seg.on::before { opacity: 1; box-shadow: 0 0 12px var(--seg), 0 0 3px var(--seg); }
.tuner-readout { position: absolute; left: 0; right: 0; bottom: 30px; display: grid; justify-items: center; gap: 2px; pointer-events: none; }
.tuner-note { display: flex; align-items: baseline; font-family: var(--font-display); font-weight: 700; font-size: clamp(54px, 9vw, 76px); line-height: .95; color: #59636a; transition: color .15s ease; }
.tuner-note sub { font-size: .36em; margin-left: 2px; color: inherit; opacity: .7; vertical-align: baseline; }
.tuner.hearing .tuner-note { color: var(--warn); text-shadow: 0 0 22px color-mix(in srgb, var(--warn) 45%, transparent); }
.tuner.in-tune .tuner-note { color: var(--ok); text-shadow: 0 0 26px color-mix(in srgb, var(--ok) 65%, transparent); }
.tuner-cents { font-size: 14px; font-weight: 700; color: #c4ccd0; }
.tuner.in-tune .tuner-cents { color: var(--ok); letter-spacing: .08em; text-transform: uppercase; }
.tuner-hz { font-size: 12px; color: #6f787d; min-height: 1.2em; }
.tuner-arrow { position: absolute; bottom: 64px; font-size: 26px; color: var(--warn); opacity: .12; transition: opacity .1s linear; }
.tuner-arrow.flat { left: max(16px, calc(50% - 190px)); }
.tuner-arrow.sharp { right: max(16px, calc(50% - 190px)); }
.tuner.flat .tuner-arrow.flat, .tuner.sharp .tuner-arrow.sharp { opacity: 1; text-shadow: 0 0 14px var(--warn); }
.tuner-scale { display: flex; justify-content: space-between; width: min(100%, 330px); margin-top: 6px; font-family: var(--mono); font-size: 10px; color: #59636a; }
.tuner-scale i { font-style: normal; }

/* Strings, low to high, as tuning pegs: the one you're on lights up, tuned ones go green. */
.tuner-strings { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.tuner-strings .string {
    display: inline-flex; align-items: center; gap: 7px;
    min-width: 58px; justify-content: center;
    padding: 6px 12px 6px 9px; border-radius: 999px;
    font-family: var(--mono); font-size: 14px; font-weight: 700; color: #c4ccd0;
    background: linear-gradient(to bottom, #1d2124, #101315);
    border: 1px solid #2c3236;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 0 #000;
    transition: transform .15s ease, border-color .15s ease, color .15s ease;
}
.tuner-strings .peg { width: 9px; height: 9px; border-radius: 50%; background: #3a4146; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6); }
.tuner-strings .string.active { color: #fff; border-color: var(--accent); transform: translateY(-2px); }
.tuner-strings .string.active .peg { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.tuner-strings .string.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, #2c3236); }
.tuner-strings .string.ok .peg { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.tuner-strings .string.ok::after { content: "✓"; margin-left: -2px; }
@media (max-width: 560px) { .tuner-arc { width: 240px; height: 122px; } .tuner-arc .seg { height: 120px; } .tuner-arrow { bottom: 54px; } }
@media (prefers-reduced-motion: reduce) { .tuner-arc .seg::before, .tuner-arrow, .tuner-strings .string { transition: none; } }

/* ---- Hero: the scrolling score (Pages/Shared/_HeroScore.cshtml) ---- */
.stave-art.score { overflow: visible; }
.stave-art.score .lines .tab-line { stroke-opacity: .2; stroke-dasharray: none; }
.stave-art.score .barline, .stave-art.score .ledger { stroke: currentColor; stroke-opacity: .35; stroke-width: 1.4; }
.stave-art.score .scroll { animation: score-scroll 6s linear infinite; will-change: transform; }
@keyframes score-scroll { to { transform: translateX(-480px); } }
.stave-art.score .playhead { animation: none; stroke-width: 2.5; }
.stave-art.score .playhead-dot { fill: var(--accent); filter: drop-shadow(0 0 6px var(--glow)); animation: beat 0.75s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.6); } }
.stave-art.score .now { color: var(--accent); animation: now-pulse 0.75s ease-out infinite; }
@keyframes now-pulse { 0% { opacity: 1; } 60%, 100% { opacity: .55; } }
.stave-art.score .tab-label { font-family: var(--font-display); font-weight: 800; font-size: 20px; fill: currentColor; opacity: .5; }
.stave-art.score .fret {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
    fill: currentColor;
    stroke: var(--bg);
    stroke-width: 5px;
    paint-order: stroke;
    stroke-linejoin: round;
}
.stave-art.score .fret.low { fill: var(--teal); }
.stave-art.score .fret.hit { animation-name: fret-hit; }
@keyframes fret-hit {
    0% { fill: var(--accent); filter: url(#note-glow); transform: scale(1.35); }
    14% { filter: none; transform: scale(1); }
    100% { transform: none; }
}
.stave-art.score .beam { opacity: .95; }
.stave-art.score .spark {
    font-size: 15px;
    fill: var(--accent);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: spark 6s linear infinite;
    animation-delay: var(--t);
}
@keyframes spark {
    0% { opacity: .95; transform: translate(0, 0) scale(.8) rotate(0deg); }
    9% { opacity: 0; transform: translate(-10px, -34px) scale(1.25) rotate(-18deg); }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .stave-art.score .scroll, .stave-art.score .spark, .stave-art.score .playhead-dot, .stave-art.score .now, .stave-art.score .fret.hit { animation: none !important; }
}

/* ---- Instrument sounds (styles per part) ---- */
.styles-box { margin: 10px 0 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; background: color-mix(in srgb, var(--surface) 80%, transparent); }
.styles-box summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 6px; }
.styles-box summary::after { content: "▾"; margin-left: auto; transition: transform .2s ease; color: var(--muted); }
.styles-box[open] summary::after { transform: rotate(180deg); }
.styles-grid { display: grid; gap: 6px; margin-top: 10px; }

/* ---- Session: takes ---- */
.takes-box { margin: 14px 0 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--record) 5%, var(--surface)); }
.takes-box h3 { margin: 0 0 8px; }
.takes-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; }
.takes-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.pill.rec { position: relative; isolation: isolate; background: color-mix(in srgb, var(--record) 78%, #000); border-color: transparent; color: #fff; font-weight: 800; }
.pill.rec::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; background: color-mix(in srgb, var(--record) 25%, transparent); z-index: -1; animation: rec-pulse 1.2s ease-in-out infinite; }
@keyframes rec-pulse { 0%, 100% { opacity: 0; transform: scale(.9); } 50% { opacity: 1; transform: scale(1); } }

/* ---- Practice: the starter goal ---- */
.starter-goal .goal-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.starter-goal h2 { margin: 0; }
.goal-tabs { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.goal-tabs li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; transition: border-color .2s, transform .2s; }
.goal-tabs li:hover { border-color: var(--accent); transform: translateY(-1px); }
.goal-tabs li.done { border-color: color-mix(in srgb, var(--ok) 55%, var(--border)); }
.goal-tabs .mark { font-size: 20px; }
.goal-tabs .score { font-family: var(--mono); font-weight: 700; }
.goal-tabs small { grid-column: 2 / -1; color: var(--muted); }
.goal-bar { position: relative; height: 10px; border-radius: 999px; background: var(--surface-3); overflow: visible; }
.goal-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--teal)); transition: width .6s ease; }
.goal-bar .goal-target { position: absolute; top: -4px; bottom: -4px; left: 80%; width: 2px; background: var(--text); opacity: .6; }
.file-button.locked { opacity: .55; }

/* ---- Your sound: the pedalboard (spec 7d.2) ---- */
.rig-sound { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 14px; margin-top: 4px; }
.rig-sound-head { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 22px; }
.rig-sound-head h3 { margin: 0 8px 6px 0; }
.rig-sound-head .field { min-width: 220px; }
/* The board: a dark carpeted pedalboard with two rails, pedals in a row joined by patch cables. */
.pedalboard {
    position: relative;
    display: flex;
    flex-wrap: wrap; /* every pedal in reach: rows, never a sideways scroll */
    justify-content: center;
    gap: 22px 20px;
    margin: 14px 0 8px;
    padding: 22px 20px 26px;
    border-radius: 14px;
    background:
        linear-gradient(to bottom, transparent 20px, rgba(255, 255, 255, .06) 20px 23px, transparent 23px calc(100% - 23px), rgba(255, 255, 255, .06) calc(100% - 23px) calc(100% - 20px), transparent calc(100% - 20px)),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px),
        radial-gradient(120% 140% at 50% 0%, #2a2d31, #121417);
    border: 1px solid #000;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .05), inset 0 -10px 30px rgba(0, 0, 0, .5), 0 18px 40px -20px rgba(0, 0, 0, .8);
    scrollbar-width: thin;
}
.pedal {
    --pedal: #555; --pedal-ink: #fff; --pedal-dark: color-mix(in srgb, var(--pedal) 55%, #000);
    position: relative;
    flex: 0 0 144px;
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
    justify-items: center;
    gap: 8px;
    padding: 14px 12px 12px;
    border-radius: 12px 12px 16px 16px;
    color: var(--pedal-ink);
    /* Paint with a satin sheen, and four corner screws. */
    background:
        radial-gradient(circle at 9px 9px, #d6d9dc 0 2.4px, #6d7276 2.6px 3.4px, transparent 3.6px),
        radial-gradient(circle at calc(100% - 9px) 9px, #d6d9dc 0 2.4px, #6d7276 2.6px 3.4px, transparent 3.6px),
        radial-gradient(circle at 9px calc(100% - 9px), #d6d9dc 0 2.4px, #6d7276 2.6px 3.4px, transparent 3.6px),
        radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #d6d9dc 0 2.4px, #6d7276 2.6px 3.4px, transparent 3.6px),
        linear-gradient(160deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, .18) 100%),
        var(--pedal);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 var(--pedal-dark), 0 10px 18px -8px rgba(0, 0, 0, .9), 0 2px 0 #000;
    transition: transform .18s ease, box-shadow .2s ease, filter .2s ease;
    filter: saturate(.75) brightness(.86);
}
.pedal.on { filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 var(--pedal-dark), 0 12px 26px -8px color-mix(in srgb, var(--pedal) 60%, transparent), 0 2px 0 #000; }
.pedal:hover { transform: translateY(-2px); }
/* Patch cables between pedals. */
.pedal + .pedal::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 52px;
    width: 26px;
    height: 10px;
    border-radius: 6px;
    background: linear-gradient(to bottom, #3b3f44, #15171a);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 2px 3px rgba(0, 0, 0, .6);
}
.pedal-comp { --pedal: #2f6fd6; }
.pedal-drive { --pedal: #e2672a; }
.pedal-cab {
    --pedal: #26282b;
    background:
        radial-gradient(circle at 9px 9px, #d6d9dc 0 2.4px, #6d7276 2.6px 3.4px, transparent 3.6px),
        radial-gradient(circle at calc(100% - 9px) 9px, #d6d9dc 0 2.4px, #6d7276 2.6px 3.4px, transparent 3.6px),
        radial-gradient(circle at 9px calc(100% - 9px), #d6d9dc 0 2.4px, #6d7276 2.6px 3.4px, transparent 3.6px),
        radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #d6d9dc 0 2.4px, #6d7276 2.6px 3.4px, transparent 3.6px),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 5px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 5px),
        #26282b;
}
.pedal-eq { --pedal: #c9ccd1; --pedal-ink: #1b1d20; }
.pedal-wah { --pedal: #1f2023; }
.pedal-chorus { --pedal: #20a99c; }
.pedal-delay { --pedal: #3e9b4f; }
.pedal-reverb { --pedal: #7b4fd1; }
.pedal-led { width: 11px; height: 11px; border-radius: 50%; background: #3b1010; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7), 0 0 0 2px rgba(0, 0, 0, .35); transition: background .2s, box-shadow .2s; }
.pedal.on .pedal-led { background: #ff3b3b; box-shadow: 0 0 10px 2px rgba(255, 59, 59, .8), inset 0 -1px 2px rgba(0, 0, 0, .3), 0 0 0 2px rgba(0, 0, 0, .35); }
.pedal select { font-size: 12px; padding: 3px 6px; max-width: 132px; background: rgba(0, 0, 0, .35); color: #fff; border-color: rgba(0, 0, 0, .4); }
.pedal-eq select { background: rgba(255, 255, 255, .55); color: #1b1d20; }
.pedal-knobs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; align-content: start; }
.knob { display: grid; justify-items: center; gap: 2px; width: 40px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: inherit; cursor: ew-resize; }
.dial {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 32%, #4a4e53, #121315 70%);
    box-shadow: 0 3px 5px rgba(0, 0, 0, .7), inset 0 1px 1px rgba(255, 255, 255, .25), 0 0 0 2px rgba(0, 0, 0, .25);
}
.dial::before { /* the pointer, turned by --a */
    content: "";
    position: absolute;
    left: 50%;
    top: 4px;
    width: 3px;
    height: 11px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: #f4f4f4;
    transform-origin: 50% 13px;
    transform: rotate(var(--a, 0deg));
    box-shadow: 0 0 3px rgba(255, 255, 255, .4);
}
.dial input[type=range] { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); margin: 0; opacity: 0; cursor: ew-resize; }
.dial:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.knob-name { margin-top: 2px; font-weight: 700; opacity: .9; }
.knob output { font-family: var(--mono); font-size: 10px; opacity: .8; text-transform: none; letter-spacing: 0; }
.footswitch {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, #ffffff, #c3c8cc 30%, #7d858a 62%, #4b5256);
    border: 3px solid #2a2f31;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .25), 0 4px 0 #15181a, 0 7px 12px -4px rgba(0, 0, 0, .9);
}
.footswitch:hover:not(:disabled) { box-shadow: 0 0 0 4px rgba(0, 0, 0, .25), 0 4px 0 #15181a, 0 7px 12px -4px rgba(0, 0, 0, .9); transform: none; }
.footswitch:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 4px rgba(0, 0, 0, .25), 0 1px 0 #15181a; padding: 0; border-bottom-width: 3px; }
.pedal-name { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 15px; letter-spacing: .02em; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.pedal-eq .pedal-name { text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Session: the take mixer ---- */
.takes-list li.take { display: block; }
.take-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mixer { margin-top: 10px; padding: 10px; border-radius: 10px; display: grid; gap: 6px; background: linear-gradient(to bottom, var(--amp-hi), var(--amp)); color: var(--amp-text); border: 1px solid var(--amp-edge); }
.mix-row { display: grid; grid-template-columns: minmax(110px, 1.2fr) auto minmax(120px, 1fr) minmax(120px, 1fr) auto; align-items: center; gap: 8px 14px; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .04); }
.mix-row[data-id="backing"] { grid-template-columns: minmax(110px, 1.2fr) auto minmax(120px, 1fr); }
.mix-name { display: grid; line-height: 1.2; }
.mix-name small { color: var(--amp-muted); font-size: 12px; }
.mix-buttons { display: flex; gap: 4px; }
.mix-btn { width: 30px; height: 28px; padding: 0; font-weight: 800; font-size: 12px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: var(--amp-text); border: 1px solid rgba(255, 255, 255, .12); box-shadow: none; }
.mix-btn.on { background: var(--record); border-color: var(--record); color: #fff; }
.mix-btn.solo.on { background: var(--brass); border-color: var(--brass); color: #111; }
.mix-fader { display: grid; grid-template-columns: auto 1fr 40px; align-items: center; gap: 6px; font-size: 12px; color: var(--amp-muted); }
.mix-fader input { accent-color: var(--accent); width: 100%; }
.mix-fader output, .mix-nudge output { font-family: var(--mono); font-size: 11px; color: var(--amp-text); text-align: right; }
.mix-nudge { display: flex; align-items: center; gap: 3px; }
.mix-nudge button { padding: 2px 6px; font-size: 11px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: var(--amp-text); border: 1px solid rgba(255, 255, 255, .12); box-shadow: none; }
.mix-nudge output { min-width: 50px; text-align: center; }
@media (max-width: 760px) { .mix-row, .mix-row[data-id="backing"] { grid-template-columns: 1fr auto; } .mix-fader, .mix-nudge { grid-column: 1 / -1; } }

.styles-grid .hint { grid-column: 1 / -1; margin: 2px 0 0; }
.style-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1.2fr); align-items: center; gap: 8px 12px; font-size: 14px; }
.style-head { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
@media (max-width: 560px) { .style-row { grid-template-columns: 1fr 1fr; } .style-row > :first-child { grid-column: 1 / -1; font-weight: 600; } .style-head { display: none; } }
.style-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-row select { width: 100%; }

/* ---- Credits ---- */
.credits { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.credit-list { padding-left: 18px; margin: 0; display: grid; gap: 10px; line-height: 1.5; }

/* ---- Top bar on phones: brand and actions on one row, the main nav as tabs below ---- */
.signout svg { display: none; width: 16px; height: 16px; }
@media (max-width: 640px) {
    .topbar { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "brand user" "nav nav"; gap: 8px 12px; }
    .topbar .brand { grid-area: brand; }
    .topbar .nav-user { grid-area: user; justify-self: end; gap: 6px; }
    .topbar .nav-main { grid-area: nav; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
    .topbar .nav-main:empty { display: none; }
    .topbar .nav-main a { text-align: center; }
    .signout { padding: 6px 8px; }
    .signout svg { display: block; }
    .signout span { display: none; }
}
@media (max-width: 380px) { .brand { font-size: 18px; } }

/* ---- Rig: latency check ---- */
.latency-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.latency-item { display: grid; gap: 2px; padding: 8px 10px 8px 12px; border-radius: var(--radius-sm); border-left: 3px solid var(--border); background: color-mix(in srgb, var(--surface) 85%, transparent); font-size: 14px; }
.latency-item span { color: var(--muted); line-height: 1.45; }
.latency-item.ok { border-color: var(--ok); }
.latency-item.ok b::before { content: "✓ "; color: var(--ok); }
.latency-item.warn { border-color: var(--warn); }
.latency-item.warn b::before { content: "! "; color: var(--warn); }
.latency-item.bad { border-color: var(--bad); }
.latency-item.bad b::before { content: "✕ "; color: var(--bad); }

/* ---- Help ---- */
.help-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
/* Wide pages, readable lines: answers stay full width, but their text wraps at about 85 characters. */
.help-layout details > :not(summary) { max-width: 85ch; }
.help-toc { position: sticky; top: 90px; display: grid; gap: 4px; font-size: 14px; }
.help-toc a { padding: 6px 10px; border-radius: 8px; text-decoration: none; color: var(--muted); }
.help-toc a:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text); }
.faq { display: grid; gap: 12px; }
.faq h2 { margin: 18px 0 4px; scroll-margin-top: 90px; }
.faq details { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; background: var(--surface); transition: box-shadow .2s ease; }
.faq details[open] { box-shadow: var(--shadow); }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; gap: 8px; }
.faq summary::before { content: "♪"; color: var(--accent); }
.faq details p, .faq details li { line-height: 1.6; }
.faq ol, .faq ul { padding-left: 20px; }
@media (max-width: 760px) { .help-layout { grid-template-columns: 1fr; } .help-toc { position: static; grid-auto-flow: column; overflow-x: auto; } }

/* ---- Instant hit feedback (tab/hit-flash.ts) ---- */
.at-cursor-beat.hit { animation: cursor-hit .28s ease-out; }
@keyframes cursor-hit {
    0% { background: var(--accent); box-shadow: 0 0 calc(10px + 18px * var(--hit, .6)) calc(2px + 4px * var(--hit, .6)) var(--accent); filter: brightness(1.6); }
    100% { box-shadow: 0 0 0 0 transparent; filter: none; }
}
.hit-ripple {
    position: absolute;
    width: 4px;
    margin-left: -1px;
    pointer-events: none;
    border-radius: 999px;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 85%, #fff), transparent);
    opacity: calc(.5 + .5 * var(--hit, .6));
    animation: hit-ripple .42s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes hit-ripple {
    0% { scale: 1 1; opacity: calc(.5 + .5 * var(--hit, .6)); }
    100% { scale: calc(6 + 10 * var(--hit, .6)) 1.08; opacity: 0; }
}
.meter-fill.hit { animation: meter-hit .3s ease-out; }
@keyframes meter-hit { 0% { box-shadow: 0 0 calc(8px + 14px * var(--hit, .6)) var(--accent); filter: brightness(1.5); } 100% { box-shadow: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .hit-ripple { display: none; } .at-cursor-beat.hit, .meter-fill.hit { animation-duration: .12s; } }

/* ---- Standing, roles and badges (spec 7b) ---- */
.verified { display: inline-flex; align-items: center; gap: 4px; font-size: .8em; font-weight: 700; color: var(--ok); text-shadow: 0 0 12px color-mix(in srgb, var(--ok) 50%, transparent); white-space: nowrap; }
.pill.apprentice { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 45%, transparent); }
.pill.manager { color: var(--brass); border-color: color-mix(in srgb, var(--brass) 55%, transparent); }
.prewrap { white-space: pre-wrap; }
.stack { display: grid; gap: 10px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.check input { margin-top: 3px; accent-color: var(--accent); }
.bar { display: block; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--teal)); box-shadow: 0 0 10px var(--glow-soft); transition: width .6s ease; }
.bar.big { height: 10px; }

/* Band page */
.hq-card { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.hq-card > div { flex: 1 1 260px; }
.votes .vote { padding: 12px 0; border-bottom: 1px solid var(--border); }
.votes .vote:last-child { border-bottom: 0; }
.votes .reason { font-style: italic; color: var(--muted); }
.vote-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); margin: 6px 0; }
.vote-bar .yes { background: var(--bad); }
.vote-bar .no { background: var(--ok); }
.goals .goal { padding: 10px 0; border-bottom: 1px solid var(--border); }
.goals .goal:last-child { border-bottom: 0; }
.goal-title { margin: 0; display: flex; gap: 8px; align-items: center; }
.goal.unlocked .goal-title b::before { content: "★ "; color: var(--brass); }
.criteria { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.criteria li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 13px; }
.criteria li .bar { grid-column: 1 / -1; }
.criteria li.met span:first-child::before { content: "✓ "; color: var(--ok); }
.manager-seat p { margin: 6px 0; }
details.propose { display: inline-block; position: relative; }
details.propose > summary { list-style: none; cursor: pointer; }
details.propose[open] > form { position: absolute; right: 0; z-index: 5; width: min(320px, 80vw); margin-top: 6px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-pop); display: grid; gap: 8px; }

/* Band HQ */
.hq-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.hq-layout .schedule { grid-row: span 2; }
@media (max-width: 900px) { .hq-layout { grid-template-columns: 1fr; } .hq-layout .schedule { grid-row: auto; } }
.events { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.event { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--surface) 85%, transparent); transition: transform .15s ease, box-shadow .15s ease; }
.event:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.event.kind-gig { border-left-color: var(--brass); }
.event.kind-recording { border-left-color: var(--record); }
.event.kind-meeting { border-left-color: var(--teal); }
.event-date { min-width: 64px; text-align: center; font-family: var(--font-display); font-weight: 700; line-height: 1.1; }
.event-notes { margin: 6px 0; font-size: 14px; color: var(--muted); white-space: pre-wrap; }
.rsvp { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.rsvp form { margin: 0; }
.event-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 10px; }
.event-form .field.wide { flex-basis: 100%; }
.activity-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.activity-list li { display: flex; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.activity-list li:last-child { border-bottom: 0; }
.activity-list .bar { margin: 6px 0 2px; }
.note-form { display: grid; gap: 8px; margin-bottom: 12px; }
.notes-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.notes-list li { padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--brass) 8%, var(--surface)); border: 1px solid var(--border); box-shadow: 2px 3px 0 color-mix(in srgb, var(--text) 6%, transparent); rotate: -.3deg; }
.notes-list li:nth-child(2n) { rotate: .4deg; }
.notes-list li.pinned { border-color: color-mix(in srgb, var(--brass) 55%, transparent); }
.notes-list li p { margin: 0 0 6px; white-space: pre-wrap; }
.note-actions { display: flex; gap: 6px; margin-top: 6px; }
.note-actions form { margin: 0; }

/* Apply, admin, tutors */
.apply-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.app-details { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 10px 0; }
.app-details dt { font-weight: 700; color: var(--muted); }
.app-details dd { margin: 0; white-space: pre-wrap; }
.chip-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 18px; }
.chip-filter .chip { text-decoration: none; }
.tutor-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.tutor-card { display: flex; gap: 14px; align-items: flex-start; color: inherit; text-decoration: none; }
.tutor-card .clip { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 6px 0 0; font-size: 14px; }
.request-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.request-row:last-child { border-bottom: 0; }
.request-row blockquote { margin: 6px 0 8px; }

/* Profile: standing */
.standing { margin-bottom: 18px; position: relative; overflow: hidden; }
.standing::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--brass), var(--teal)); }
.standing-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.standing .rank { margin: 0 0 6px; font-size: clamp(26px, 4vw, 34px); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.standing .badges { display: flex; gap: 6px; flex-wrap: wrap; }
.standing .hours { text-align: right; display: grid; }
.standing .hours b { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--accent); }
.standing .hours span { font-weight: 600; }
.standing .hours small { color: var(--muted); }
.standing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 14px; }
.standing-grid h3 { margin: 0 0 8px; }
.standing .crit { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 13px; margin: 6px 0; }
.standing .crit .bar { grid-column: 1 / -1; }

/* ---- Fan page (spec 7g) ---- */
.fan-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 28px; margin: 4px 0 20px; border-radius: var(--radius); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 28%, var(--surface)), var(--surface) 55%), var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.fan-hero h1 { margin: 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fan-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.fan-hero-bg span { position: absolute; bottom: -30px; left: calc(var(--i) * 11% + 3%); font-size: calc(18px + var(--i) * 3px); color: var(--accent); opacity: .18; animation: drift calc(14s + var(--i) * 2s) linear infinite; animation-delay: calc(var(--i) * -2.3s); }
.monogram.huge { width: 96px; height: 96px; font-size: 44px; border-radius: 24px; box-shadow: 0 12px 40px -12px var(--glow); }
.like-big { border-radius: 999px; padding: 10px 20px; font-weight: 700; }
.like-big.liked { background: color-mix(in srgb, var(--record) 15%, var(--surface)); color: var(--record); border-color: color-mix(in srgb, var(--record) 50%, transparent); }
.fan-post header { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.fan-post .post-actions { display: flex; gap: 8px; margin: 8px 0; }
.like.on { color: var(--record); border-color: color-mix(in srgb, var(--record) 45%, transparent); }
.like.on::first-letter { animation: heart-pop .4s ease-out; }
@keyframes heart-pop { 50% { transform: scale(1.4); } }
.comments { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.comments li { padding: 8px 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--text) 4%, transparent); font-size: 14px; }
.comments li.pending, .testimonials li.pending { opacity: .7; border: 1px dashed var(--border); }
.comment-form { display: flex; gap: 8px; margin-top: 8px; }
.comment-form input { flex: 1; }
.testimonials { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 12px; }
.testimonials blockquote { margin: 0 0 4px; font-family: var(--font-display); font-size: 17px; font-style: italic; }
.testimonials blockquote::before { content: "“"; color: var(--accent); font-size: 1.6em; line-height: 0; vertical-align: -.35em; margin-right: 2px; }
.report-link { font-size: 13px; color: var(--muted); text-decoration: none; margin-left: auto; }
.report-link:hover { color: var(--bad); }
.mod-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); }
.mod-row:last-child { border-bottom: 0; }
.mod-row p { margin: 4px 0 0; }
.own-posts li, .mod-log li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.clip-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }

/* ---- Inbox ---- */
.inbox-layout { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2.2fr); gap: 18px; align-items: start; }
@media (max-width: 820px) { .inbox-layout { grid-template-columns: 1fr; } }
.thread-list ul li a { display: grid; gap: 2px; padding: 10px; border-radius: var(--radius-sm); color: inherit; text-decoration: none; transition: background .15s ease; }
.thread-list ul li a:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.thread-list li.active a { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.thread-list li.unread b::after { content: " •"; color: var(--accent); }
.fraud-banner { padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); font-size: 13px; margin-bottom: 12px; }
.thread { list-style: none; padding: 4px 6px 16px; margin: 0 0 12px; display: grid; gap: 10px; max-height: 60vh; overflow-y: auto; overflow-x: hidden; }
.msg { display: flex; }
.msg.mine { justify-content: flex-end; }
.msg .bubble { position: relative; max-width: min(520px, 85%); padding: 10px 14px; border-radius: 16px; background: color-mix(in srgb, var(--text) 6%, var(--surface)); border: 1px solid var(--border); animation: rise .25s ease-out; }
.msg.mine .bubble { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, transparent); border-bottom-right-radius: 4px; }
.msg.theirs .bubble { border-bottom-left-radius: 4px; }
.msg .bubble p { margin: 0 0 4px; }
.msg .meta { font-size: 12px; color: var(--muted); }
.msg .flags { display: block; margin-top: 6px; font-size: 12px; color: var(--warn); }
.msg.flagged .bubble { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.msg .report-link { position: absolute; top: 6px; right: 8px; }
.reply-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }

/* ---- Reports and moderation ---- */
.reasons { display: grid; gap: 6px; border: 0; padding: 0; }
.report-card { border-left: 4px solid var(--warn); }
.report-card.reason-scam, .report-card.reason-underagesafety, .report-card.reason-hate { border-left-color: var(--bad); }
.act-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 10px; }
.appeal { border-left: 4px solid var(--teal); }
table.audit { width: 100%; border-collapse: collapse; font-size: 14px; }
table.audit th, table.audit td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.audit th { color: var(--muted); font-weight: 600; }
@media (max-width: 700px) { table.audit { display: block; overflow-x: auto; } }

/* ---- The living staff under page titles (site.ts adds the SVG; the old flat lines retire) ---- */
h1::after { display: none !important; }
.h1-staff { display: block; width: 150px; height: 30px; margin: 4px 0 14px; color: var(--accent); overflow: visible; filter: drop-shadow(0 0 6px var(--glow-soft)); }
.h1-staff .lines line, .h1-staff .bar { stroke: currentColor; stroke-width: 1; opacity: .55; }
.h1-staff .bar { stroke-width: 1.4; opacity: .7; }
.h1-staff .n, .h1-staff .beam { fill: currentColor; transform-box: fill-box; transform-origin: center bottom; }
.h1-staff .n4 .open { fill: none; stroke: currentColor; stroke-width: 1.5; }
.h1-staff .n2, .h1-staff .n4 { fill: var(--teal); color: var(--teal); }
.h1-staff .shine { animation: staff-shine 4s ease-in-out infinite; }
@keyframes staff-shine { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(200px); } }
.h1-staff .head { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--glow)); animation: staff-head 4s linear infinite; }
@keyframes staff-head { 0% { transform: translateX(0); opacity: 0; } 5% { opacity: 1; } 80% { opacity: 1; } 90%, 100% { transform: translateX(96px); opacity: 0; } }
.h1-staff .n { animation: staff-note 4s ease-out infinite; }
.h1-staff .n1 { animation-delay: .45s; } .h1-staff .n2 { animation-delay: .9s; } .h1-staff .n3 { animation-delay: 1.75s; } .h1-staff .n4 { animation-delay: 2.7s; }
@keyframes staff-note { 0%, 100% { transform: none; opacity: .85; } 4% { transform: translateY(-3px) scale(1.18); opacity: 1; } 14% { transform: none; opacity: .85; } }
.h1-staff .spark { font-size: 7px; fill: currentColor; opacity: 0; animation: staff-spark 4s ease-out infinite; }
.h1-staff .s1 { animation-delay: .45s; } .h1-staff .s2 { animation-delay: .9s; fill: var(--teal); } .h1-staff .s3 { animation-delay: 1.75s; } .h1-staff .s4 { animation-delay: 2.7s; fill: var(--teal); }
@keyframes staff-spark { 0% { opacity: .9; transform: translate(0, 0); } 18% { opacity: 0; transform: translate(-4px, -12px) rotate(-20deg); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .h1-staff * { animation: none !important; } .h1-staff .spark, .h1-staff .head { display: none; } }

/* ---- Drifting notes: a twinkle on top of the drift, three colours ---- */
.note-field span { animation: drift var(--d) linear infinite, twinkle calc(var(--d) / 6) ease-in-out infinite; animation-delay: var(--delay), var(--delay); }
.note-field { contain: strict; }
.note-field span:nth-child(4n) { color: var(--brass); }
@keyframes twinkle { 0%, 100% { opacity: var(--o, .09); } 50% { opacity: calc(var(--o, .09) * 2.2); } }

/* ---- Home: the community hub (signed out) ---- */
.hero-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.hero-tags span { padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.hero-tags span:nth-child(2) { color: var(--record); background: color-mix(in srgb, var(--record) 12%, transparent); border-color: color-mix(in srgb, var(--record) 30%, transparent); }
.hero-tags span:nth-child(3) { color: var(--teal); background: var(--teal-soft); border-color: color-mix(in srgb, var(--teal) 30%, transparent); }
.hero-tags span:nth-child(5) { color: var(--brass); background: color-mix(in srgb, var(--brass) 14%, transparent); border-color: color-mix(in srgb, var(--brass) 30%, transparent); }
.hero-promises { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 14px; }
.hero-promises li::before { content: "✓ "; color: var(--ok); font-weight: 800; }
.section-title { font-size: clamp(24px, 2.4vw, 32px); margin: 0 0 18px; }
.roles, .steps-section, .ladder-section { margin: 46px 0; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.role {
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 22px;
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    background: linear-gradient(160deg, color-mix(in srgb, var(--c) 12%, var(--surface)), var(--surface) 55%);
    border: 1px solid color-mix(in srgb, var(--c) 28%, var(--border));
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1.2), box-shadow .25s, border-color .25s;
}
.role::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%); pointer-events: none; }
a.role:hover { transform: translateY(-4px); border-color: var(--c); box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--c) 55%, transparent); }
.role h3 { margin: 0; font-family: var(--font-display); font-size: 21px; text-transform: none; letter-spacing: -.01em; color: var(--text); display: flex; align-items: center; gap: 8px; }
.role p { margin: 0; color: var(--muted); font-size: 15px; }
.role-icon { font-size: 30px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
a.role:hover .role-icon { transform: rotate(-8deg) scale(1.06); transition: transform .3s; }
.role-more { color: var(--c); font-weight: 700; font-size: 14px; margin-top: 4px; }
.role.soon { opacity: .85; border-style: dashed; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; counter-reset: step; position: relative; }
.steps li { position: relative; padding: 22px 22px 22px 76px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.steps h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 19px; text-transform: none; letter-spacing: -.01em; color: var(--text); }
.steps p { margin: 0; color: var(--muted); font-size: 15px; }
.step-n { position: absolute; left: 20px; top: 20px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--teal)); box-shadow: 0 0 0 5px var(--accent-soft); }
.ladder-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px 34px; align-items: center; }
.ladder { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; }
.ladder::before { content: ""; position: absolute; left: 6%; right: 6%; top: 21px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--teal), var(--brass)); opacity: .7; }
.ladder li { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; padding-top: 50px; font-size: 13px; color: var(--muted); }
.ladder li::before { content: ""; position: absolute; top: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 4px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.ladder li:nth-child(3)::before { border-color: var(--teal); }
.ladder li:nth-child(4)::before { border-color: var(--brass); }
.ladder b { color: var(--text); font-size: 16px; font-family: var(--font-display); }
.unlocks { grid-column: 1 / -1; list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.unlocks li { padding: 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; font-weight: 600; }
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 30px; margin: 46px 0 10px; padding: 30px 34px; border-radius: var(--radius); color: var(--amp-text); background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 55%), radial-gradient(120% 160% at 100% 100%, color-mix(in srgb, var(--brass) 25%, transparent), transparent 55%), linear-gradient(to bottom, var(--amp-hi), var(--amp)); border: 1px solid var(--amp-edge); box-shadow: var(--shadow-pop); }
.cta-band h2 { margin: 0 0 4px; color: var(--amp-text); font-size: clamp(22px, 2.4vw, 30px); }
.cta-band p { margin: 0; color: var(--amp-muted); }
@media (max-width: 860px) { .ladder-section { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; } .ladder::before { display: none; } }

/* =====================================================================
   Trophies, kind streaks and unlockables (spec 7h.1–7h.2).
   ===================================================================== */
/* ---- Trophy cabinets: medals on glass shelves, bronze to platinum ---- */
:root {
    --medal-bronze: #c47a45;
    --medal-silver: #aeb8c4;
    --medal-gold: #e8b33a;
    --medal-platinum: #8fd8e6;
    --medal-ink: #1b1408;
}
.tier-bronze { --metal: var(--medal-bronze); }
.tier-silver { --metal: var(--medal-silver); }
.tier-gold { --metal: var(--medal-gold); }
.tier-platinum { --metal: var(--medal-platinum); }
.trophy-cabinet { margin-bottom: 18px; }
.trophy-cabinet .page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; }
.trophy-cabinet .page-head h2 { margin: 0; }

/* The summary: a ring of how many, the medal counts, the newest one and the closest ones. */
.cabinet-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px 24px; align-items: center; margin: 14px 0 6px; padding: 16px 18px; border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--brass) 10%, var(--surface-2)), var(--surface-2)); border: 1px solid color-mix(in srgb, var(--brass) 22%, var(--border)); }
.cabinet-ring { position: relative; width: 112px; height: 112px; }
.cabinet-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cabinet-ring circle { fill: none; stroke-width: 10; }
.cabinet-ring .ring-track { stroke: color-mix(in srgb, var(--text) 9%, transparent); }
.cabinet-ring .ring-fill { stroke: var(--medal-gold); stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--medal-gold) 55%, transparent)); }
.cabinet-ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.cabinet-ring b { font-family: "Fraunces", Georgia, serif; font-size: 34px; }
.cabinet-ring small { color: var(--muted); font-size: 13px; margin-top: 4px; }
.cabinet-tally { display: grid; gap: 12px; min-width: 0; }
.tier-counts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tier-counts li { display: flex; align-items: baseline; gap: 5px; font-size: 14px; }
.tier-counts li b { font-size: 18px; }
.tier-counts li b small { font-size: 13px; font-weight: 600; color: var(--muted); }
.tier-counts li span { color: var(--muted); }
.tier-counts li.none { opacity: .55; }
.tier-dot { width: 12px; height: 12px; border-radius: 50%; align-self: center; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff 60%, transparent), transparent 45%), var(--metal); box-shadow: 0 0 0 1px color-mix(in srgb, var(--metal) 70%, #000); }
.cabinet-newest { display: flex; gap: 12px; align-items: center; }
.cabinet-newest .medal-disc { width: 52px; height: 52px; font-size: 24px; margin: 0; }
.cabinet-newest small { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.cabinet-newest b { display: block; font-size: 16px; }
.cabinet-newest time { font-size: 13px; color: var(--muted); }
.cabinet-next h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.cabinet-next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cabinet-next li { display: flex; gap: 10px; align-items: center; }
.cabinet-next .next-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; font-size: 17px; background: color-mix(in srgb, var(--metal) 16%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--metal) 55%, var(--border)); }
.cabinet-next li > div { flex: 1; min-width: 0; display: grid; gap: 3px; }
.cabinet-next b { font-size: 14px; }
.cabinet-next small { font-size: 12px; color: var(--muted); }
.bar { display: block; height: 6px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--text) 10%, transparent); }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--metal, var(--brass)) 65%, var(--surface)), var(--metal, var(--brass))); transform-origin: left; transform: scaleX(var(--f, 0)); }

/* The case: shelves of medals, each shelf standing on a lit ledge. */
.cabinet-case { display: grid; gap: 6px; margin-top: 10px; }
.shelf { position: relative; padding: 4px 4px 20px; }
.shelf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 8px; border-radius: 3px; background: linear-gradient(to bottom, color-mix(in srgb, var(--brass) 34%, var(--surface-2)), color-mix(in srgb, var(--brass) 12%, var(--surface-2))); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45), inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent); }
.shelf-label { margin: 8px 2px 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); display: flex; gap: 8px; align-items: baseline; }
.shelf-label small { font-size: 12px; letter-spacing: 0; opacity: .8; }
.shelf-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.medal { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 10px 12px; border-radius: var(--radius-sm); background: linear-gradient(to bottom, color-mix(in srgb, var(--metal) 9%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--metal) 28%, var(--border)); overflow: hidden; }
.medal.earned { box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--metal) 80%, transparent); }
.medal.newest { border-color: color-mix(in srgb, var(--metal) 70%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--metal) 45%, transparent), 0 12px 30px -14px color-mix(in srgb, var(--metal) 90%, transparent); }
.medal.newest::before { content: "New"; position: absolute; top: 9px; right: -27px; transform: rotate(40deg); width: 90px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--metal); color: var(--medal-ink); padding: 2px 0; }
/* A shine that sweeps across on hover (a one-off transition, compositor-only). */
.medal.earned::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, color-mix(in srgb, #fff 35%, transparent), transparent); transform: translateX(-120%) skewX(-12deg); transition: transform .9s ease; pointer-events: none; }
.medal.earned:hover::after { transform: translateX(520%) skewX(-12deg); }
.medal-disc { position: relative; width: 66px; height: 66px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; margin-bottom: 4px; font-size: 30px; background: radial-gradient(circle at 34% 28%, color-mix(in srgb, #fff 70%, var(--metal)), var(--metal) 46%, color-mix(in srgb, var(--metal) 62%, #000) 100%); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--metal) 75%, #000), inset 0 0 0 6px color-mix(in srgb, #fff 25%, var(--metal)), 0 6px 14px -6px rgba(0, 0, 0, .55); }
.medal-icon { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.medal.locked { background: var(--surface); border-style: dashed; }
.medal.locked .medal-disc { background: color-mix(in srgb, var(--text) 7%, var(--surface)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--metal) 40%, var(--border)); }
.medal.locked .medal-icon { filter: grayscale(1); opacity: .35; }
.medal-lock { position: absolute; right: -4px; bottom: -2px; font-size: 13px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.medal-name { font-size: 14.5px; line-height: 1.2; }
.medal-tier { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: color-mix(in srgb, var(--metal) 60%, var(--text)); }
.medal.locked .medal-tier { color: var(--muted); }
.medal-date { font-size: 12px; color: var(--muted); }
.medal-how { font-size: 12px; line-height: 1.35; color: var(--muted); }
.medal-progress { width: 100%; display: grid; gap: 3px; margin: 2px 0; }
.medal-progress small { font-size: 12px; color: var(--text); }
.medal-unlock { margin-top: 2px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; color: color-mix(in srgb, var(--metal) 55%, var(--text)); background: color-mix(in srgb, var(--metal) 14%, transparent); }
.medal.locked .medal-unlock { color: var(--muted); background: color-mix(in srgb, var(--text) 6%, transparent); }

/* Member cards: a row of small medals. */
.medal-row { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.medal-mini { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; background: radial-gradient(circle at 34% 28%, color-mix(in srgb, #fff 65%, var(--metal)), var(--metal) 50%, color-mix(in srgb, var(--metal) 60%, #000)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--metal) 70%, #000); }

.band-trophies .shelf-row { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
@media (max-width: 980px) {
    .cabinet-summary { grid-template-columns: auto minmax(0, 1fr); }
    .cabinet-next { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .cabinet-summary { padding: 14px; gap: 14px; }
    .cabinet-ring { width: 88px; height: 88px; }
    .cabinet-ring b { font-size: 26px; }
    .shelf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .medal { padding: 12px 8px 10px; }
    .medal-disc { width: 54px; height: 54px; font-size: 25px; }
}
.streak-line { margin: 6px 0 10px; font-size: 14px; }
.unlock-card { margin-bottom: 18px; }
.unlock-card h3 { margin: 0 0 8px; }
.unlock-list li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 14px; flex-wrap: wrap; }
ul.plain.unlock-list li::before { content: none; }
.unlock-list li.met { color: var(--text); font-weight: 600; }
.unlock-list li:not(.met) { color: var(--muted); }

/* Swatch pickers for pedalboard skins and fan-page themes. */
.skin-picker, .theme-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.skin-swatch, .theme-swatch { position: relative; display: grid; justify-items: center; gap: 4px; padding: 6px; border-radius: var(--radius-sm); border: 2px solid transparent; font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; }
.skin-swatch input, .theme-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.skin-swatch:has(input:checked), .theme-swatch:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.skin-swatch:focus-within, .theme-swatch:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.skin-swatch.locked, .theme-swatch.locked { cursor: not-allowed; opacity: .55; }
.pedalboard.mini { display: block; width: 84px; height: 44px; margin: 0; padding: 0; overflow: hidden; border-radius: 8px; }
.fan-themed.swatch { display: grid; place-items: center; width: 84px; height: 44px; padding: 0; margin: 0; border-radius: 8px; background: var(--bg); border: 1px solid var(--border-strong); }
.fan-themed.swatch i { width: 36px; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--brass)); }
.rig-saved { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; margin-top: 10px; }
.rig-saved .field { min-width: 200px; }
.rig-saved .hint { flex-basis: 100%; margin: 0; }

/* Pedalboard skins: physical finishes, so their colours are local tokens, like the pedals' paint. */
.pedalboard[data-skin="tweed"] {
    --board-a: #c9a86a; --board-b: #8a6a35; --board-line: rgba(70, 45, 15, .35);
    background:
        repeating-linear-gradient(45deg, var(--board-line) 0 2px, transparent 2px 6px),
        repeating-linear-gradient(-45deg, rgba(255, 240, 200, .18) 0 2px, transparent 2px 6px),
        linear-gradient(to bottom, var(--board-a), var(--board-b));
    border-color: #4a3416;
}
.pedalboard[data-skin="road-case"] {
    --board-a: #1b1c1e; --board-edge: #b9bec4;
    background:
        radial-gradient(circle at 14px 14px, var(--board-edge) 0 5px, transparent 6px),
        radial-gradient(circle at calc(100% - 14px) 14px, var(--board-edge) 0 5px, transparent 6px),
        radial-gradient(circle at 14px calc(100% - 14px), var(--board-edge) 0 5px, transparent 6px),
        radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), var(--board-edge) 0 5px, transparent 6px),
        repeating-radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px),
        var(--board-a);
    border: 3px solid #6f747a;
}
.pedalboard[data-skin="black-panel"] {
    background:
        linear-gradient(to bottom, #c0c4c8 0 4px, transparent 4px calc(100% - 4px), #c0c4c8 calc(100% - 4px)),
        linear-gradient(to bottom, #151516, #050505);
    border-color: #8d9195;
}
.pedalboard[data-skin="cream"] {
    background:
        repeating-linear-gradient(90deg, rgba(120, 90, 40, .06) 0 1px, transparent 1px 5px),
        radial-gradient(120% 140% at 50% 0%, #f4e8c8, #d9c79c);
    border-color: #8f7a4c;
}
.pedalboard[data-skin="chrome"] {
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 1px, rgba(0, 0, 0, .05) 1px 3px),
        linear-gradient(160deg, #e9edf0, #9aa3ab 45%, #dfe4e8 60%, #858d95);
    border-color: #5d646b;
}

/* Fan-page themes: the band's pick redefines the colour tokens inside the page. Standard adds nothing. */
.fan-themed:not([data-fan-theme="standard"]):not(.swatch) { color: var(--text); background: var(--bg); padding: clamp(12px, 2vw, 22px); border-radius: var(--radius); }
.fan-themed[data-fan-theme="vinyl"] {
    --bg: #0b0b0c; --bg-glow: rgba(220, 40, 50, .12);
    --surface: #161617; --surface-2: #1f1f21; --surface-3: #2a2a2d;
    --text: #f1eee9; --muted: #a49f97; --border: #2b2b2e; --border-strong: #3d3d42;
    --accent: #e0383e; --accent-strong: #ff5a5f; --accent-ink: #fff4f2; --accent-soft: rgba(224, 56, 62, .15);
    --teal: #e9c46a; --brass: #e9c46a; --glow: rgba(224, 56, 62, .45); --glow-soft: rgba(224, 56, 62, .14);
    --vinyl-groove: #111; --vinyl-groove-2: #191919;
}
.fan-themed[data-fan-theme="vinyl"] .fan-hero { background: repeating-radial-gradient(circle at 100% 50%, var(--vinyl-groove) 0 2px, var(--vinyl-groove-2) 2px 4px), var(--surface); }
.fan-themed[data-fan-theme="poster"] {
    --bg: #efe6d2; --bg-glow: rgba(200, 60, 30, .1);
    --surface: #fbf6ea; --surface-2: #f0e7d3; --surface-3: #e3d7bd;
    --text: #1d1a16; --muted: #5d554a; --border: #d7c9ab; --border-strong: #b9a77f;
    --accent: #c8341c; --accent-strong: #a32613; --accent-ink: #fff8ef; --accent-soft: rgba(200, 52, 28, .12);
    --teal: #1f4e9c; --brass: #e2a21b; --glow: rgba(200, 52, 28, .35); --glow-soft: rgba(200, 52, 28, .12);
}
.fan-themed[data-fan-theme="poster"] h1, .fan-themed[data-fan-theme="poster"] h2 { text-transform: uppercase; letter-spacing: .02em; }
.fan-themed[data-fan-theme="neon"] {
    --bg: #07060f; --bg-glow: rgba(255, 60, 200, .14);
    --surface: #110f1f; --surface-2: #19162b; --surface-3: #231f3a;
    --text: #f3eefe; --muted: #a59cc7; --border: #2a2547; --border-strong: #3c3563;
    --accent: #ff3fd0; --accent-strong: #ff7be0; --accent-ink: #1a0414; --accent-soft: rgba(255, 63, 208, .15);
    --teal: #3ff7ff; --brass: #3ff7ff; --glow: rgba(255, 63, 208, .55); --glow-soft: rgba(63, 247, 255, .14);
}
.fan-themed[data-fan-theme="neon"] h1 { text-shadow: 0 0 18px var(--glow); }
.fan-themed[data-fan-theme="festival"] {
    --bg: #2a1033; --bg-glow: rgba(255, 140, 60, .16);
    --surface: #3a1845; --surface-2: #4a2156; --surface-3: #5a2a66;
    --text: #fff3e6; --muted: #e2bfd0; --border: #5e2d6b; --border-strong: #7a3d88;
    --accent: #ff8a3d; --accent-strong: #ffad6e; --accent-ink: #2a0d05; --accent-soft: rgba(255, 138, 61, .16);
    --teal: #ffd166; --brass: #ffd166; --glow: rgba(255, 138, 61, .5); --glow-soft: rgba(255, 209, 102, .15);
    --festival-top: #3b1240; --festival-bottom: #1c0b24;
}
.fan-themed[data-fan-theme="festival"]:not(.swatch) { background: linear-gradient(to bottom, var(--festival-top), var(--bg) 30%, var(--festival-bottom)); }
.fan-themed[data-fan-theme="gold"] {
    --bg: #0d0b07; --bg-glow: rgba(230, 190, 90, .12);
    --surface: #17140d; --surface-2: #211c12; --surface-3: #2c2517;
    --text: #f6efdc; --muted: #b7a984; --border: #3a3120; --border-strong: #574a2d;
    --accent: #e6be5a; --accent-strong: #f4d68a; --accent-ink: #1a1405; --accent-soft: rgba(230, 190, 90, .15);
    --teal: #e6be5a; --brass: #f4d68a; --glow: rgba(230, 190, 90, .5); --glow-soft: rgba(230, 190, 90, .14);
}

/* ==== v10: the rig comes alive ==== */

/* Status lights on the rig's header: audio, signal, timing, tone. Like the LEDs on an interface. */
.rig-lights { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rig-lights li {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px 3px 7px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--muted);
    background: var(--surface-2); border: 1px solid var(--border);
    transition: color .25s, border-color .25s;
}
.rig-lights i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 45%, transparent); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .4); transition: background .25s, box-shadow .25s; }
.rig-lights [data-state="ok"] { color: var(--text); border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.rig-lights [data-state="ok"] i { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.rig-lights [data-state="warn"] i { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.rig-lights [data-state="wait"] i { background: var(--warn); animation: pulse 1.6s ease-in-out infinite; }
@media (max-width: 640px) { .rig-lights { order: 5; flex-basis: 100%; flex-wrap: wrap; } }

/* The board leans back a little, like it's on the floor in front of you. */
.pedalboard { perspective: 1100px; perspective-origin: 50% -40%; padding-top: 26px; }
.pedal { transform: rotateX(7deg); transform-origin: 50% 100%; transition: transform .25s cubic-bezier(.2, .8, .3, 1.2), box-shadow .25s; }
.pedal:hover { transform: rotateX(3deg) translateY(-4px); }
.pedal.stomp { animation: stomp .26s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes stomp { 0% { transform: rotateX(7deg); } 35% { transform: rotateX(12deg) translateY(3px) scale(.985); } 100% { transform: rotateX(7deg); } }

/* Knurled knob skirts. */
.dial {
    background:
        radial-gradient(circle at 40% 32%, #5a5f65, #1a1b1e 62%, transparent 63%),
        repeating-conic-gradient(from 0deg, #2b2e32 0 6deg, #0d0e10 6deg 12deg);
}

/* New pedals. */
.pedal-trem { --pedal: #d39b22; --pedal-ink: #1d1406; }
.pedal-trem .pedal-name { text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.pedal-double { --pedal: #b8357e; }

/* Rate pedals blink in time when they're on (opacity only, so it stays smooth). */
.pedal.on:is(.pedal-trem, .pedal-chorus, .pedal-wah) .pedal-led { animation: led-rate calc(1s / var(--hz, 2)) ease-in-out infinite; }
@keyframes led-rate { 50% { opacity: .35; } }

/* The amp: black tolex, gold piping, a gold control panel, and a backlit logo whose glow follows the gain. */
.pedal-drive {
    --pedal: #1d1a17; --gold: #d8b25a;
    flex-basis: 188px;
    border-radius: 10px;
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, .08), transparent 40%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(45deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px),
        var(--pedal);
    border: 2px solid #0b0a09;
    outline: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
    outline-offset: -6px;
}
.pedal-drive .pedal-knobs {
    padding: 8px 8px 6px; border-radius: 6px;
    background: linear-gradient(to bottom, #e9cf8a, #b98f3c);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .6);
    color: #2b1d07;
}
.pedal-drive .pedal-name {
    color: #fff3d6;
    text-shadow: 0 0 calc(2px + var(--k-amount, .5) * 14px) rgba(255, 170, 60, calc(.35 + var(--k-amount, .5) * .6)), 0 1px 0 #000;
}
.pedal-drive:not(.on) .pedal-name { text-shadow: 0 1px 0 #000; opacity: .7; }
.pedal-drive select { border-color: color-mix(in srgb, var(--gold) 50%, #000); }

/* The cabinet: grille cloth, its speakers, and a mic you can see move from cap to edge. */
.pedal-cab { grid-template-rows: auto auto auto 1fr auto auto; flex-basis: 170px; }
.cab-grille {
    --cx: 50%; --cy: 50%; --r: 30px;
    position: relative;
    width: 132px; height: 82px;
    border-radius: 6px;
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px),
        #2b2a28;
    border: 3px solid #0e0e0f;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .1);
    overflow: hidden;
}
.cab-grille .spk {
    position: absolute;
    display: none;
    width: calc(var(--r) * 2); height: calc(var(--r) * 2);
    border-radius: 50%;
    background: radial-gradient(circle, #16161a 0 18%, #3a3a40 19% 22%, #101013 23% 70%, #27272b 71% 76%, #0b0b0d 77%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .05);
    opacity: .85;
}
.cab-mic {
    position: absolute;
    left: calc(var(--cx) + var(--k-mic, .35) * var(--r) * .85);
    top: var(--cy);
    width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #9aa0a6, #3c4044 60%, #1b1d1f);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .8), 0 0 calc(var(--k-room, .15) * 22px) calc(var(--k-room, .15) * 8px) rgba(255, 220, 160, .25);
    transition: left .12s ease-out;
}
.pedal-cab[data-type="1x12"] .cab-grille { --r: 32px; }
.pedal-cab[data-type="1x12"] .spk:nth-child(1) { display: block; left: calc(50% - 32px); top: calc(50% - 32px); }
.pedal-cab[data-type="2x12"] .cab-grille { --r: 26px; --cx: 30%; }
.pedal-cab[data-type="2x12"] .spk:nth-child(-n+2) { display: block; top: calc(50% - 26px); }
.pedal-cab[data-type="2x12"] .spk:nth-child(1) { left: calc(30% - 26px); }
.pedal-cab[data-type="2x12"] .spk:nth-child(2) { left: calc(70% - 26px); }
.pedal-cab:is([data-type="4x12"], [data-type="bass-4x10"]) .cab-grille { --r: 17px; --cx: 31%; --cy: 27%; }
.pedal-cab[data-type="bass-4x10"] .cab-grille { --r: 15px; }
.pedal-cab:is([data-type="4x12"], [data-type="bass-4x10"]) .spk { display: block; }
.pedal-cab:is([data-type="4x12"], [data-type="bass-4x10"]) .spk:nth-child(odd) { left: calc(31% - var(--r)); }
.pedal-cab:is([data-type="4x12"], [data-type="bass-4x10"]) .spk:nth-child(even) { left: calc(69% - var(--r)); }
.pedal-cab:is([data-type="4x12"], [data-type="bass-4x10"]) .spk:nth-child(-n+2) { top: calc(27% - var(--r)); }
.pedal-cab:is([data-type="4x12"], [data-type="bass-4x10"]) .spk:nth-child(n+3) { top: calc(73% - var(--r)); }
.pedal-cab[data-type="acoustic"] .cab-grille { --r: 24px; background: radial-gradient(circle, transparent 0 30px, #4a2d16 31px 33px, #a8743e 34px 37px, transparent 38px), linear-gradient(160deg, #e2b779, #b8823f); }
.pedal-cab[data-type="acoustic"] .spk:nth-child(1) { display: block; left: calc(50% - 24px); top: calc(50% - 24px); background: radial-gradient(circle, #120b05 0 62%, #2a1a0c 70%); }
.pedal-cab:not(.on) .cab-grille { filter: saturate(.6) brightness(.8); }

/* Live: while you hear yourself through your tone, the LEDs and cables follow your playing. */
.pedalboard.live .pedal.on .pedal-led { opacity: calc(.55 + var(--sig, 0) * .45); }
.pedalboard.live .pedal + .pedal::before {
    background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 70%, #3b3f44), #15171a);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 calc(var(--sig, 0) * 12px) color-mix(in srgb, var(--accent) 80%, transparent);
}
@media (prefers-reduced-motion: reduce) {
    .pedal, .pedal:hover { transform: none; transition: none; }
    .pedal.stomp, .pedal.on .pedal-led, .rig-lights [data-state="wait"] i { animation: none; }
    .cab-mic { transition: none; }
}

/* ==== v10: depth and motion across the pages ==== */

/* Cards tilt towards the pointer (site.ts sets the transform); quick to follow, slow to settle. */
.tilting { transition: transform .1s linear !important; will-change: transform; }
:is(.role, .dash-grid > .card, .steps-section .steps li, .medal, .world-facts li, [data-tilt]) { transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2, .8, .3, 1), box-shadow .3s, border-color .3s; }
:is(.dash-grid > .card, .steps-section .steps li, .medal).tilting { box-shadow: 0 22px 44px -22px var(--glow), var(--shadow); }
.role.tilting .role-icon { transform: translateZ(28px) rotate(-6deg); transition: transform .3s; }

/* Scroll reveals: opacity and transform only. */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.revealed { opacity: 1; transform: none; transition: opacity .7s ease-out, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--reveal-i, 0) * 70ms); }

/* Your band is in the session room right now. */
.card.live-room {
    display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
    color: var(--text); text-decoration: none;
    border-color: color-mix(in srgb, var(--record) 55%, var(--border));
    background: linear-gradient(100deg, color-mix(in srgb, var(--record) 12%, var(--surface)), var(--surface) 60%);
    box-shadow: 0 16px 36px -22px color-mix(in srgb, var(--record) 70%, transparent), var(--shadow);
}
.card.live-room:hover { color: var(--text); border-color: var(--record); }
.card.live-room .live-dot { width: 14px; height: 14px; flex: none; }
/* "Live now" (a band in its session room): red text and dot on the normal pill. */
.pill.live-now { color: var(--record); border-color: color-mix(in srgb, var(--record) 50%, transparent); display: inline-flex; align-items: center; gap: 2px; font-weight: 800; }
.pill.live-now .live-dot { width: 7px; height: 7px; }

/* The globe: different cities, the same downbeat. */
.world { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 40px; align-items: center; margin: 56px 0; }
.world-globe { position: relative; justify-self: center; width: min(100%, 520px); aspect-ratio: 1; }
.world-globe::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%); filter: blur(10px); }
.world-globe canvas { position: relative; display: block; width: 100%; height: 100%; }
.world-facts { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.world-facts li { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.world-facts b { font-family: var(--font-display); font-size: 30px; line-height: 1.1; color: var(--accent); }
.world-facts span { color: var(--muted); font-size: 14px; }
@media (max-width: 860px) { .world { grid-template-columns: 1fr; } .world-globe { width: min(100%, 380px); } }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
    :is(.role, .dash-grid > .card, .steps-section .steps li, .medal, .world-facts li, [data-tilt]) { transition: none; }
}

/* ---- Forms in a row: fields and buttons share a baseline ---- */
.rig-saved .field, .rig-sound-head .field { margin: 0; }
.rig-saved { align-items: end; }
.rig-saved > button { height: 42px; align-self: end; }

/* ---- Practice: settings beside a big score ---- */
.practice-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.practice-head .hint { margin: 0; }
.flow-steps { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; }
.flow-steps li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--border); }
.flow-steps b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--surface-3); color: var(--text); }
.flow-steps li.now { color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.flow-steps li.now b { background: var(--accent); color: var(--accent-ink); }
.flow-steps li.done b { background: var(--ok); color: #fff; }
.flow-steps li.done b::before { content: "✓"; }
.flow-steps li.done b { font-size: 0; }
.flow-steps li.done b::before { font-size: 13px; }
/* Practice: the tab and the band across the top, the sheet at full width, the last run below. */
.practice-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 18px; }
.side-card { margin: 0; }
.side-card h2 { margin: 0 0 10px; font-size: 20px; }
.side-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.side-title h2 { margin: 0; }
.tab-picker { width: 100%; }
.tab-now { display: grid; gap: 2px; margin: 10px 0 4px; }
.tab-now .tab-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); }
.side-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; align-items: end; }
.side-controls .field { margin: 10px 0 0; }
.side-controls .field select { width: 100%; }
.side-controls .wide { grid-column: 1 / -1; }
.side-controls .field.gain input { width: 100%; }
.mix-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.practice-main { margin: 0; min-width: 0; }
.transport-bar { position: sticky; top: 64px; z-index: 6; margin: -4px -4px 12px; padding: 4px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); }
.transport-bar .transport { margin: 0 0 10px; }
.practice-main .score-wrap { height: calc(100vh - 250px); min-height: 460px; }
.results-card { margin: 0; display: grid; gap: 6px 28px; }
.results-card .results { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 18px; }
.results-card .results > div:last-child { grid-column: 1 / -1; }
.results-card table.history { font-size: 13px; }
.results-history h3 { margin-top: 0; }
@media (min-width: 1100px) {
    .song-pick { grid-template-columns: minmax(280px, 560px) minmax(0, 1fr); align-items: center; gap: 18px; }
    .song-pick .tab-now { margin: 0; }
    /* Last run: the numbers and trouble spots on the left, your recent runs on the right. */
    .results-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .results-card > .side-title { grid-column: 1 / -1; }
    .results-card .results { grid-template-columns: auto minmax(0, 1fr); }
}
@media (max-width: 640px) { .flow-steps li { padding-right: 10px; font-size: 13px; } .side-controls { grid-template-columns: 1fr; } .transport-bar { position: static; } }

/* ---- Band goals (set by the leader) ---- */
.band-goals { margin-bottom: 18px; }
.goal-list { list-style: none; padding: 0; margin: 0 0 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.goal-list li { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.goal-list li.done { border-color: color-mix(in srgb, var(--ok) 50%, var(--border)); background: color-mix(in srgb, var(--ok) 7%, var(--surface-2)); }
.goal-row { display: flex; align-items: center; gap: 10px; }
.goal-row form { margin: 0; }
.goal-icon { font-size: 24px; }
.goal-pct { font-family: var(--mono); font-weight: 700; color: var(--accent); margin-left: auto; }
.goal-list .goal-bar, .goal-mini .goal-bar { margin-top: 8px; height: 8px; }
.goal-list li.done .goal-bar span { background: var(--ok); }
.goal-new summary, .spot-new summary { cursor: pointer; font-weight: 700; color: var(--accent); margin: 6px 0; }
.goal-form, .spot-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 14px; align-items: end; }
.goal-form .field, .spot-form .field { margin: 8px 0; }
.goal-form button, .spot-form button { margin: 8px 0; height: 42px; }
.spot-form .wide { grid-column: 1 / -1; }
.goal-mini { margin: 10px 0; }
.goal-mini p { margin: 0; display: flex; gap: 8px; }
.goal-mini .hint { font-size: 13px; margin-top: 4px; }

/* ---- Crew on the band page ---- */
.crew h3 { margin: 16px 0 8px; font-size: 15px; }
.crew-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.crew-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.crew-list form { margin: 0; }
.crew-msg { margin: 4px 0 0; font-style: italic; color: var(--muted); }

/* ---- The players board ---- */
.players-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.players-side, .players-main { display: grid; gap: 18px; min-width: 0; }
.players-main > .card { margin: 0; }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 0 16px; }
.filters .field { margin: 0; min-width: 180px; }
.filters button { height: 42px; }
.spot-grid, .musician-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.spot-card, .musician-card { display: grid; align-content: start; gap: 6px; padding: 16px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); transition: transform .2s, border-color .2s; }
.spot-card:hover, .musician-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.spot-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.spot-instrument { font-weight: 800; color: var(--accent); }
.spot-card h3, .musician-card h3 { margin: 0; font-family: var(--font-display); font-size: 19px; text-transform: none; letter-spacing: -.01em; color: var(--text); }
.spot-card p, .musician-card p { margin: 0; }
.spot-card details summary, .musician-card details summary { list-style: none; display: inline-block; margin-top: 6px; }
.musician-card header { display: flex; align-items: center; gap: 10px; }
.offer { padding: 10px 0; border-top: 1px solid var(--border); }
.offer:first-of-type { border-top: 0; }
.offer p { margin: 0 0 6px; }
@media (min-width: 1200px) { .players-layout { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); } .players-side { position: sticky; top: 76px; } }

/* ---- Admin panel ---- */
.admin-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.admin-nav a { padding: 7px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; }
.admin-nav a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.admin-nav a[aria-current="page"] { color: var(--accent-ink, #fff); background: var(--accent); }
.admin-attention { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 0 0 18px; }
.attn { display: flex; align-items: baseline; gap: 10px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
.attn b { font-family: var(--display, inherit); font-size: 30px; line-height: 1; }
.attn span { color: var(--muted); font-size: 14px; }
.attn.hot { border-color: color-mix(in srgb, var(--warn) 60%, var(--border)); }
.attn.hot b { color: var(--warn); }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px; align-items: start; margin-bottom: 18px; }
.admin-grid > .card { margin: 0; }
.admin-table td { vertical-align: middle; }
.admin-table .pill { margin: 1px 2px 1px 0; }
.top-gap { margin-top: 14px; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.unlock-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); }
.unlock-list li:first-child { border-top: 0; }
.unlock-list form { margin: 0; }
.switch-row { padding: 8px 0; border-top: 1px solid var(--border); margin: 0; }
.switch-row:first-of-type { border-top: 0; }
.danger-zone { border-color: color-mix(in srgb, var(--record) 35%, var(--border)); }
button.danger { background: color-mix(in srgb, var(--record) 85%, black); border-color: transparent; color: #fff; }
td.row { margin: 0; flex-wrap: nowrap; }
td.row form { margin: 0; }

/* ---- Recordings: band page consent and the fan page's Listen card ---- */
.recording { padding: 10px 0; border-top: 1px solid var(--border); }
.recording:first-of-type { border-top: 0; }
.recording p { margin: 0 0 6px; }
.recording audio, .track-list audio { width: 100%; height: 36px; }
.agree { display: inline-block; margin-right: 8px; color: var(--muted); }
.agree.yes { color: var(--ok); }
.track-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.track-list li { display: grid; gap: 6px; }
.track-title { display: flex; justify-content: space-between; gap: 10px; }

/* ---- The studio (session/studio.ts): a full-screen console over the session room ---- */
dialog.studio { width: min(100vw - 24px, 2200px); max-width: none; height: min(100vh - 24px, 1400px); max-height: none; margin: auto; padding: 0; border: 1px solid var(--amp-edge); border-radius: var(--radius); background: var(--amp); color: var(--amp-text); display: none; }
dialog.studio[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
dialog.studio::backdrop { background: rgba(10, 8, 5, .7); backdrop-filter: blur(3px); }
dialog.studio .hint, dialog.studio small { color: var(--amp-muted); }
dialog.studio button:not(.primary):not(.mix-btn) { background: rgba(255, 255, 255, .07); color: var(--amp-text); border-color: rgba(255, 255, 255, .14); }
dialog.studio select, dialog.studio input:not([type=range]) { background: var(--amp-hi); color: var(--amp-text); border-color: var(--amp-edge); }
.studio-head { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--amp-edge); }
.studio-head > div { flex: 1; min-width: 0; }
.studio-head h2 { margin: 0; color: var(--amp-text); }
.studio-head p { margin: 2px 0 0; }
.studio-unlocks { font-size: 13px; color: var(--brass); white-space: nowrap; }
.studio-transport { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--amp-edge); background: var(--amp-hi); }
.studio-time { font-size: 15px; min-width: 110px; }
.studio-lanes { overflow: auto; padding: 10px 20px; display: grid; gap: 8px; align-content: start; }
.lane { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 12px; align-items: stretch; padding: 8px; border-radius: 8px; background: rgba(255, 255, 255, .035); }
.lane.backing { background: rgba(255, 255, 255, .02); }
.lane-head { display: grid; gap: 6px; align-content: start; }
.lane-name { display: grid; line-height: 1.2; }
.lane-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.lane-ctl .mix-fader { min-width: 130px; flex: 1; }
.field.inline { flex-direction: row; align-items: center; gap: 6px; margin: 0; color: var(--amp-muted); font-size: 12px; }
.field.inline select { padding: 4px 6px; font-size: 13px; }
.lane-wave { position: relative; min-height: 84px; border-radius: 6px; background: rgba(0, 0, 0, .28); cursor: crosshair; overflow: hidden; }
.lane-wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lane-wave .ph { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--spark); box-shadow: 0 0 8px var(--spark); pointer-events: none; }
.studio-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; padding: 12px 20px 18px; border-top: 1px solid var(--amp-edge); background: var(--amp-hi); max-height: 42vh; overflow: auto; }
.studio-panel { padding: 10px 12px; border: 1px solid var(--amp-edge); border-radius: 8px; }
.studio-panel h3 { margin: 0 0 8px; font-size: 15px; color: var(--amp-text); }
.mix-fader.wide { grid-template-columns: 70px 1fr 64px; }
.studio-locked { margin: 0; font-size: 13px; color: var(--amp-muted); line-height: 1.45; }
.studio-locked b { color: var(--amp-text); }
@media (max-width: 900px) { .lane { grid-template-columns: 1fr; } .studio-head { flex-wrap: wrap; } }
.lane-add { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px; border: 1px dashed var(--amp-edge); border-radius: 8px; }
.lane-name .small { justify-self: start; margin-top: 4px; padding: 2px 8px; font-size: 11px; }

/* ---- Pedals, v2: every pedal built the same way, like real stompboxes ----
   LED and picks at the top, knobs in one row, a nameplate, and the footswitch at the bottom,
   so footswitches line up along each row. */
.pedal { display: flex; flex-direction: column; align-items: center; gap: 9px; flex-basis: 152px; padding: 14px 10px 14px; }
.pedal-knobs { flex-wrap: nowrap; gap: 6px; }
.pedal-drive .pedal-knobs { flex-wrap: nowrap; }
.knob { width: 38px; }
.dial { width: 32px; height: 32px; cursor: ns-resize; touch-action: none; }
.dial::before { transform-origin: 50% 12px; height: 10px; }
.dial input[type=range] { pointer-events: none; }
.dial.turning { box-shadow: 0 3px 5px rgba(0, 0, 0, .7), inset 0 1px 1px rgba(255, 255, 255, .25), 0 0 0 2px var(--accent); }
.pedal-plate {
    margin-top: auto;
    display: grid; justify-items: center; gap: 1px;
    width: 100%; padding: 5px 6px 4px;
    border-radius: 7px;
    background: rgba(0, 0, 0, .2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .14);
}
.pedal-plate .pedal-name { font-size: 15px; line-height: 1.1; text-align: center; }
.pedal-plate small { font-size: 8px; letter-spacing: .3em; text-transform: uppercase; opacity: .6; margin-right: -.3em; }
.pedal-eq .pedal-plate, .pedal-trem .pedal-plate { background: rgba(255, 255, 255, .3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4); }
.pedal-drive .pedal-plate { background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); }
.pedal-cab .cab-grille { width: 100%; max-width: 150px; }
/* Switched on, a pedal lights the board around its feet (opacity only, so it stays smooth). */
.pedal::after {
    content: ""; position: absolute; left: 6%; right: 6%; bottom: -16px; height: 26px; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--pedal) 70%, #fff 10%), transparent);
    opacity: 0; transition: opacity .25s ease; pointer-events: none; z-index: -1;
}
.pedal.on::after { opacity: .55; }
.pedal-cab::after, .pedal-wah::after, .pedal-drive::after { background: radial-gradient(closest-side, rgba(255, 190, 120, .7), transparent); }
.pedalboard { isolation: isolate; row-gap: 30px; }
/* The footswitch: a chrome nut around the button. */
.footswitch { margin-top: 2px; outline: 3px solid rgba(255, 255, 255, .08); outline-offset: 3px; }
.footswitch:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .pedal::after { transition: none; } }
.pedal .knob-name { font-size: 9px; letter-spacing: .02em; white-space: nowrap; }
.tuner-top { padding-right: 46px; }
.tuner-close { position: absolute; top: 12px; right: 14px; }
@media (max-width: 560px) { .tuner-controls { margin-left: 0; } .tuner-controls .field:not(.narrow) { flex: 1 1 100%; } }
/* Phones: two pedals a row instead of one long column. */
@media (max-width: 560px) {
    .pedalboard { gap: 26px 10px; padding: 22px 8px 24px; }
    .pedal, .pedal-drive, .pedal-cab { flex-basis: 132px; padding: 12px 6px 12px; }
    .knob { width: 34px; }
    .dial { width: 30px; height: 30px; }
    .pedal-knobs { gap: 3px; }
    .pedal-drive .pedal-knobs { padding: 6px 4px 5px; }
    .pedal + .pedal::before { left: -16px; width: 18px; }
}
.pedal .knob output { white-space: nowrap; }
@media (max-width: 560px) { .pedal .knob output { font-size: 8.5px; } .pedal .knob-name { font-size: 8.5px; } }

/* ---- Practice: the song card. The tab, then its parts as one list, then the song's settings. ---- */
.song-card { margin: 0; }
.song-pick { display: grid; gap: 4px; }
.parts-title { margin: 16px 0 8px; font-size: 15px; }
.parts-title .hint { font-weight: 400; font-size: 13px; }
.parts-list { display: grid; gap: 6px; }
.part-row {
    display: grid;
    grid-template-columns: 70px 44px minmax(150px, 1fr) minmax(90px, 170px) minmax(0, 2.2fr);
    align-items: center;
    gap: 8px 14px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    transition: border-color .15s ease, background-color .15s ease;
}
.part-row.mine { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); }
.part-row.muted:not(.mine) .part-name b { color: var(--muted); }
.part-me { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; }
.part-me input { accent-color: var(--accent); margin: 0; }
.part-row.mine .part-me { color: var(--accent); }
.part-hear { width: 40px; height: 34px; padding: 0; font-size: 16px; justify-content: center; }
.part-hear:not(.on) { opacity: .75; }
.part-hear.on { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.part-name { display: grid; line-height: 1.25; min-width: 0; }
.part-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part-name small { color: var(--muted); font-size: 12px; }
.part-row.mine .part-name small { color: var(--accent); }
.part-vol input { width: 100%; accent-color: var(--accent); }
.part-sound { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; min-width: 0; }
.part-sound select { width: 100%; min-width: 0; font-size: 13px; }
.part-sound .hint { align-self: center; font-size: 13px; }
.parts-hint { margin: 10px 0 0; font-size: 12.5px; }
.song-settings {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.6fr);
    gap: 0 18px;
    align-items: end;
    margin-top: 14px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
}
.song-settings .field { margin: 10px 0 0; }
.song-settings select, .song-settings input[type=range] { width: 100%; }
@media (max-width: 900px) {
    .part-row { grid-template-columns: 64px 42px minmax(0, 1fr); }
    .part-vol, .part-sound { grid-column: 1 / -1; }
    .song-settings { grid-template-columns: 1fr 1fr; }
    .song-settings .speed { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .part-sound { grid-template-columns: 1fr; } }
.session-parts { margin: 12px 0 6px; }
.session-parts .parts-title { margin-top: 4px; }

/* ---- View as (admins): a floating bar that says whose eyes you're looking through ---- */
.viewas-bar { position: fixed; z-index: 60; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; max-width: calc(100vw - 32px); border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid color-mix(in srgb, var(--amp) 55%, var(--border)); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55), 0 0 0 4px color-mix(in srgb, var(--amp) 14%, transparent); backdrop-filter: blur(10px); }
.viewas-eye { font-size: 20px; }
.viewas-who { display: grid; line-height: 1.2; min-width: 0; }
.viewas-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewas-who small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.viewing-as .page { padding-bottom: 96px; }
.viewas-now { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; border-color: color-mix(in srgb, var(--amp) 50%, var(--border)); }
.viewas-now h2 { margin: 0 0 4px; }
.viewas-quick { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; }
.viewas-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.viewas-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); height: 100%; }
.viewas-card .grow { display: grid; gap: 2px; min-width: 0; }
.viewas-role { font-size: 13px; }
.viewas-blurb { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.viewas-card form { align-self: center; }
@media (max-width: 640px) {
    .viewas-bar { left: 16px; right: 16px; transform: none; bottom: 12px; border-radius: var(--radius); gap: 8px; padding: 8px 10px; }
    .viewas-eye { display: none; }
    .viewas-grid { grid-template-columns: 1fr; }
}