/* 20hours (the Piano App). Tokens follow docs/ui-direction.md (Vanguard internal defaults, ui-ux-principles section 16); light only.
   Three layers: primitives (raw values, named by what they are), semantic roles (what a component uses), and the old names, kept as aliases until Stage 2 moves every rule onto the roles. */
:root {
  /* 1. Primitives. Nothing outside this block writes a colour. */
  --white:#FFFFFF; --ink:#1D1D1B; /* the engraving of the score */
  --slate-50:#F8FAFC; --slate-100:#F1F5F9; --slate-200:#E2E8F0; --slate-300:#CBD5E1; --slate-500:#64748B; --slate-600:#475569; --slate-900:#0F172A;
  --navy-50:#EBF3FA; --navy-200:#9DC8E4; --navy-400:#3D93C4; --navy-700:#004674; --navy-800:#003A60; --navy-rgb:0,70,116;
  --green-50:#F0FDF4; --green-200:#BBF7D0; --green-600:#16A34A; --green-700:#15803D;
  --amber-50:#FFFBEB; --amber-200:#FDE68A; --amber-800:#92400E;
  --red-50:#FFF5F5; --red-200:#FECACA; --red-600:#DC2626; --red-700:#B91C1C; --red-800:#991B1B;
  --blue-50:#EFF6FF; --blue-200:#BFDBFE; --blue-700:#1D4ED8;
  --key-edge:#666666; --key-black:#222222; --key-down:var(--navy-400); --key-want-black:#335F80; /* the on-screen keyboard */

  /* 2. Roles: what a rule uses. */
  --color-bg-canvas:var(--white); --color-bg-chrome:var(--slate-100); --color-bg-subtle:var(--slate-50); --color-bg-selected:var(--navy-50);
  --color-text:var(--slate-900); --color-text-muted:var(--slate-600); --color-text-inverse:var(--white);
  --color-border:var(--slate-200); --color-border-control:var(--slate-300); --color-border-input:var(--slate-500); /* an input's edge must be seen: 4.8 to 1 on white, where the button edge is decoration */
  --color-action:var(--navy-700); --color-action-hover:var(--navy-800); --color-action-soft:var(--navy-200); --color-selection:var(--navy-400);
  --color-danger:var(--red-600); --color-danger-hover:var(--red-700);
  --color-ok:var(--green-600); --color-ok-text:var(--green-700); --color-bad-text:var(--red-800);
  --color-note-correct:var(--color-ok); --color-score-ink:var(--ink);
  --state-new-bg:var(--slate-50); --state-new-border:var(--slate-200); --state-new-text:var(--slate-600);
  --state-learning-bg:var(--blue-50); --state-learning-border:var(--blue-200); --state-learning-text:var(--blue-700);
  --state-provisional-bg:var(--amber-50); --state-provisional-border:var(--amber-200); --state-provisional-text:var(--amber-800);
  --state-learned-bg:var(--green-50); --state-learned-border:var(--green-200); --state-learned-text:var(--green-700);
  --state-flagged-bg:var(--red-50); --state-flagged-border:var(--red-200); --state-flagged-text:var(--red-800);
  --state-due-text:var(--navy-700); --state-due-badge-text:var(--white);
  --on-action-wash:rgba(255,255,255,0.16); /* a hover on the navy session bar */

  /* shape and depth */
  --radius-control:3px; --radius-panel:5px; --radius-overlay:6px; --radius-pill:100px;
  --shadow-panel:0 1px 3px rgba(0,0,0,0.04); --shadow-overlay:0 4px 12px rgba(0,0,0,0.12); --shadow-tag:0 1px 3px rgba(0,0,0,0.3);

  /* layers (the same order the numbers had) */
  --z-key-white:1; --z-key-black:2; --z-key-want:4; --z-key-tag:6; --z-raised:1; --z-sticky:10; --z-sticky-song:18; --z-footer:15; --z-session:19; --z-topbar:20; --z-menu:30; --z-settings:45; --z-skip:50;

  /* size */
  --bar-h:3.5rem; --footer-h:9rem; /* the on-screen keyboard and its margin */ --page-max:90rem; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-6:1.5rem; --space-8:2rem;

  /* 3. The old names: aliases until Stage 2. */
  --canvas:var(--color-bg-canvas); --chrome:var(--color-bg-chrome); --border:var(--color-border); --border-strong:var(--color-border-control);
  --text:var(--color-text); --text-2:var(--color-text-muted);
  --navy:var(--color-action); --navy-hover:var(--color-action-hover); --navy-tint:var(--color-bg-selected);
  --error:var(--color-danger); --error-text:var(--color-bad-text); --error-hover:var(--color-danger-hover);
  --success:var(--color-ok); --success-text:var(--color-ok-text); --success-bg:var(--state-learned-bg); --success-border:var(--state-learned-border);
  --warn-bg:var(--state-provisional-bg); --warn-border:var(--state-provisional-border); --warn-text:var(--state-provisional-text);
  --error-bg:var(--state-flagged-bg); --error-border:var(--state-flagged-border);
  --new-bg:var(--state-new-bg); --new-border:var(--state-new-border); --new-text:var(--state-new-text);
  --learning-bg:var(--state-learning-bg); --learning-border:var(--state-learning-border); --learning-text:var(--state-learning-text);
  --shadow:var(--shadow-panel);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; } /* the button and layout rules below would otherwise override the hidden attribute */
body { margin:0; background:var(--canvas); color:var(--text); font:0.875rem/1.5 Inter, system-ui, sans-serif; font-optical-sizing:auto; }
:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
:focus:not(:focus-visible) { outline:none; }
.skip { position:absolute; left:-999px; top:0; background:var(--navy); color:var(--color-text-inverse); padding:var(--space-2) var(--space-3); z-index:var(--z-skip); }
.skip:focus { left:8px; top:8px; }

/* Controls: one button family. Primary = fill, toggle on = fill, Stop = red, everything else outlined. */
.btn { font:inherit; min-height:2rem; border:1px solid var(--border-strong); border-radius:var(--radius-control); background:var(--canvas); color:var(--text); }
/* One field style for every select, text box and number box: 14px text, 32px tall, an edge you can see. Nothing else restyles a field. */
select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]) { font:inherit; font-size:0.875rem; min-height:2rem; padding:var(--space-1) var(--space-2); color:var(--color-text); background:var(--color-bg-canvas); border:1px solid var(--color-border-input); border-radius:var(--radius-control); }
.btn { padding:var(--space-1) var(--space-3); cursor:pointer; display:inline-flex; align-items:center; gap:var(--space-2); }
.btn:hover:not(:disabled) { background:var(--chrome); }
.btn:disabled { opacity:0.4; cursor:not-allowed; }
.btn.primary, .btn.toggle[aria-pressed="true"], .btn.toggle[aria-expanded="true"] { background:var(--navy); border-color:var(--navy); color:var(--color-text-inverse); }
.btn.primary:hover:not(:disabled), .btn.toggle[aria-pressed="true"]:hover, .btn.toggle[aria-expanded="true"]:hover { background:var(--navy-hover); }
.btn.stop { background:var(--error); border-color:var(--error); color:var(--color-text-inverse); font-weight:600; }
.btn.stop:hover { background:var(--error-hover); }
.btn.icon { min-width:36px; justify-content:center; padding:var(--space-1) 0; font-weight:700; }
.btn .ic { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn.small { min-height:1.75rem; padding:var(--space-1) var(--space-2); font-size:0.8125rem; }
.practising #play-song:not(:disabled) { background:var(--canvas); border-color:var(--border-strong); color:var(--text); } /* while practising, Start in the Learning panel is the one filled button */
input[type="number"] { width:4.5rem; }

/* Pinned bar */
.topbar { position:sticky; top:0; z-index:var(--z-topbar); background:var(--chrome); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; padding:var(--space-2) var(--space-4); min-height:var(--bar-h); }
.topbar h1 { font-size:1.25rem; line-height:1.2; font-weight:600; letter-spacing:-0.02em; margin:0 var(--space-1) 0 0; max-width:14rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.group { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.spacer { flex:1; }
.field { display:flex; align-items:center; gap:var(--space-2); font-size:0.8125rem; color:var(--text-2); }
.field-label { font-size:0.8125rem; color:var(--text-2); }
.hint { font-size:0.75rem; color:var(--text-2); }

/* Tools row: scrolls away */
.toolbar { display:flex; align-items:center; gap:var(--space-2) var(--space-6); flex-wrap:wrap; padding:var(--space-2) 0 var(--space-3); }
#tr-value { min-width:2.2rem; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
#tr-key { font-size:0.8125rem; font-weight:600; color:var(--navy); }
#naming-legend { display:inline-flex; gap:var(--space-1); }
#naming-legend .chip { display:inline-block; min-width:1.5rem; text-align:center; font-size:0.75rem; font-weight:700; padding:var(--space-1) var(--space-1); border-radius:var(--radius-control); color:var(--text); border:1px solid var(--color-score-ink); }
.selection { margin-left:auto; }
#selection-label { font-size:0.875rem; font-weight:600; color:var(--navy); }

main { padding:var(--space-3) var(--space-4) 14rem; }
/* The status line: what just happened, in words, in one place per screen. Every message of that kind is styled here: nothing else restyles one. */
#status, #sp-result, #sp-editor-result, #sp-listen-result, #helper-status, #find-results, .target-error, #signin-error { min-height:1.5em; margin:0 0 var(--space-2); font-size:0.875rem; font-weight:600; }
#status.ok, #sp-result.ok, #sp-editor-result.ok, #sp-listen-result.ok, #helper-status.ok, .sp-total.ok { color:var(--color-ok-text); }
#status.bad, #sp-result.bad, #sp-editor-result.bad, #sp-listen-result.bad, #helper-status.bad, #find-results.bad, .target-error, #signin-error, .sp-total.bad { color:var(--color-bad-text); }
#status:empty, #sp-result:empty, #sp-editor-result:empty, #sp-listen-result:empty, #helper-status:empty, #find-results:empty, .target-error:empty, #signin-error:empty { display:none; } /* no message: no gap */

/* Score and lyrics */
#layout { display:flex; gap:var(--space-4); align-items:flex-start; }
#layout #score { flex:1; min-width:0; }
#score { background:var(--canvas); color:var(--color-score-ink); border:1px solid var(--border); border-radius:var(--radius-panel); box-shadow:var(--shadow); padding:var(--space-2); overflow-x:auto; user-select:none; -webkit-user-select:none; cursor:pointer; }
#lyrics { flex:0 0 22rem; position:sticky; top:calc(var(--topbar-h, 3.5rem) + var(--session-h, 0px) + var(--songbar-h, 0px) + 12px); max-height:calc(100vh - 21rem); overflow:auto; background:var(--canvas); border:1px solid var(--border); border-radius:var(--radius-panel); box-shadow:var(--shadow); padding:var(--space-3) var(--space-4); }
#lyrics h2 { font-size:0.9375rem; font-weight:600; letter-spacing:-0.01em; margin:0 0 var(--space-2); }
.lyrics-source-label, #lyrics-form label, #add-song label { display:flex; flex-direction:column; gap:var(--space-1); font-size:0.75rem; color:var(--text-2); }
.lyrics-source-label { margin-bottom:var(--space-2); }
.lyrics-actions { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-2); }
#lyrics-form { display:flex; flex-direction:column; gap:var(--space-2); align-items:flex-start; }
#lyrics-form input, #add-song input[type="text"] { width:100%; }
#lyrics-meta { font-size:0.75rem; color:var(--text-2); margin:var(--space-2) 0; min-height:1.2em; }
#lyrics-text { white-space:pre-wrap; font:inherit; font-size:1rem; line-height:1.6; margin:0; }
.lyrics-note { font-size:0.75rem; color:var(--text-2); margin:var(--space-3) 0 0; }
.lyric-line { margin:0 0 var(--space-3); padding:var(--space-1) 0; color:var(--text-2); font-size:1rem; line-height:1.5; user-select:none; -webkit-user-select:none; cursor:pointer; }
.lyric-line.current { color:var(--text); }
.lw.sung { background:var(--navy-tint); color:var(--navy); font-weight:700; border-radius:var(--radius-control); box-shadow:0 0 0 2px var(--navy-tint); }
.lyric-line.unavailable { opacity:0.4; }
/* Sign-in: while signed out, only this shows */
body.signed-out > :not(#signin) { display:none !important; } /* the bar, the score, the keyboard: everything but the sign-in box */
#signin { display:flex; justify-content:center; padding:15vh var(--space-4) var(--space-4); }
#signin form { width:100%; max-width:22rem; display:flex; flex-direction:column; gap:var(--space-3); background:var(--canvas); border:1px solid var(--border); border-radius:var(--radius-panel); box-shadow:var(--shadow); padding:20px var(--space-6); }
#signin h2 { font-size:1.25rem; margin:0; letter-spacing:-0.02em; }
#signin p { margin:0; color:var(--text-2); font-size:0.875rem; }
#signin label { display:flex; flex-direction:column; gap:var(--space-1); font-size:0.75rem; color:var(--text-2); }

/* The pill: a short label with an icon and words, so colour is never the only signal. The state badge, the save status and the song tag are the same pill in different colours. */
.pill, .badge, .tag { display:inline-flex; align-items:center; gap:var(--space-1); font-size:0.75rem; font-weight:600; line-height:1.4; padding:var(--space-1) var(--space-2); border-radius:var(--radius-pill); border:1px solid var(--color-border-control); white-space:nowrap; }
.pill svg, .badge svg, .tag svg { width:12px; height:12px; flex:none; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.pill.ok { background:var(--success-bg); border-color:var(--success-border); color:var(--success-text); }
.pill.wait { background:var(--warn-bg); border-color:var(--warn-border); color:var(--warn-text); }
.pill.bad { background:var(--error-bg); border-color:var(--error-border); color:var(--error-text); }

#save-help { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; padding:var(--space-2) var(--space-4); background:var(--state-flagged-bg); border-bottom:1px solid var(--state-flagged-border); color:var(--state-flagged-text); font-size:0.875rem; }
#save-help a { color:inherit; font-weight:600; }

.lyric-verse { display:block; margin:var(--space-4) 0 var(--space-1); padding:0; border:0; background:none; font:inherit; font-size:0.75rem; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:0.04em; cursor:pointer; }
.lyric-verse:first-child { margin-top:0; }
.lyric-verse.active { color:var(--navy); text-decoration:underline; text-underline-offset:3px; }
.lw.selected { text-decoration:underline; text-decoration-color:var(--navy); text-decoration-thickness:2px; text-underline-offset:3px; }

/* Click menu on a note */
#menu { position:absolute; z-index:var(--z-menu); display:flex; flex-direction:column; gap:var(--space-1); padding:var(--space-2); background:var(--canvas); border:1px solid var(--border); border-radius:var(--radius-overlay); box-shadow:var(--shadow-overlay); }
#menu .btn { justify-content:flex-start; }

/* Pages: one centred container, content on the canvas (no card), one page head. Play is the only screen that uses the whole width. */
.page { width:100%; max-width:var(--page-max); margin:0 auto; }
.page.medium { max-width:64rem; } .page.narrow { max-width:56rem; } /* reading and form pages: a narrower column, centred, so the white space is the same on both sides */
.page-back { margin:0 0 var(--space-2); }
.page-head { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2) var(--space-3); margin:0 0 var(--space-3); }
.page-head h2, .page > h2 { font-size:1.25rem; font-weight:600; letter-spacing:-0.02em; margin:0; }
#import-page h3 { font-size:0.9375rem; font-weight:600; margin:20px 0 var(--space-2); }
/* Songs list: the search, sort and jump strip stay in view under the top bar */
.list-controls { position:sticky; top:calc(var(--topbar-h, 3.5rem) + var(--session-h, 0px)); z-index:var(--z-sticky); background:var(--canvas); padding:var(--space-2) 0; border-bottom:1px solid var(--border); }
.filterbar { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.search { flex:1 1 16rem; max-width:28rem; display:flex; align-items:center; gap:var(--space-2); }
.search input { flex:1; min-width:0; }
#song-strip { display:flex; flex-wrap:wrap; gap:var(--space-1); margin-top:var(--space-2); }
#song-strip button { min-width:26px; min-height:26px; padding:0 var(--space-1); border:1px solid transparent; border-radius:var(--radius-control); background:none; font:inherit; font-size:0.75rem; font-weight:600; color:var(--navy); cursor:pointer; }
#song-strip button:hover:not(:disabled) { background:var(--navy-tint); border-color:var(--border); }
#song-strip button:disabled { color:var(--border-strong); cursor:default; }
#song-table { width:100%; border-collapse:collapse; font-size:0.875rem; table-layout:fixed; }
#song-table th:nth-child(1) { width:42%; } #song-table th:nth-child(2) { width:30%; } #song-table th:nth-child(3) { width:5rem; }
#song-table td { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#song-table thead th { text-align:left; font-size:0.75rem; font-weight:600; color:var(--text-2); padding:var(--space-2) var(--space-2) var(--space-2); border-bottom:1px solid var(--border-strong); }
#song-table td { padding:var(--space-2); border-bottom:1px solid var(--border); vertical-align:middle; }
#song-table .num { text-align:right; width:4.5rem; font-variant-numeric:tabular-nums; }
#song-rows tr.group { display:table-row; }
#song-rows tr.group th { display:table-cell; width:auto; text-align:left; font-size:0.8125rem; font-weight:700; color:var(--navy); padding:var(--space-4) var(--space-2) var(--space-1); border-bottom:1px solid var(--border); scroll-margin-top:calc(var(--bar-h) + 6.5rem); }
#song-rows tr.song { position:relative; cursor:pointer; }
#song-rows tr.song:hover { background:var(--navy-tint); }
#song-rows a { color:var(--text); font-weight:600; text-decoration:none; }
#song-rows a::after { content:""; position:absolute; inset:0; } /* the whole row is the link */
#song-rows a:focus-visible { outline:2px solid var(--navy); outline-offset:-2px; }
.tag { color:var(--text-2); background:var(--chrome); margin-right:var(--space-1); }
#song-empty { margin:20px 0 var(--space-1); color:var(--text-2); }
#library-title:focus, #import-title:focus, #song-rows th:focus { outline:none; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* The Songs and Import screens have no song to play: the player controls go */
body.on-menu .song-only { display:none !important; }
body.on-menu footer { display:none; } /* no keyboard where there is no song */
body.on-menu.on-drill footer { display:block; } /* the drill is played on the keyboard */
body.on-menu main { padding-bottom:2rem; } /* the room kept for the keyboard is not needed */
/* Navigation reads as navigation, not as a row of buttons: plain text, the current section in navy with a rule under it. */
.nav-link { font:inherit; font-size:0.875rem; min-height:32px; padding:var(--space-1) var(--space-3); background:transparent; border:0; border-radius:var(--radius-control); color:#334155; cursor:pointer; }
.nav-link:hover { background:var(--color-bg-canvas); }
.nav-link[aria-current="page"] { color:var(--color-action); font-weight:600; box-shadow:inset 0 -2px 0 var(--color-action); border-radius:0; }
.tabs { display:flex; gap:var(--space-1); border-bottom:1px solid var(--color-border); margin:0 0 var(--space-4); }
.tab { font:inherit; font-size:0.875rem; background:none; border:0; padding:var(--space-2) var(--space-4); color:var(--color-text-muted); cursor:pointer; margin-bottom:-1px; border-bottom:2px solid transparent; }
.tab:hover { color:var(--color-text); }
.tab[aria-current="page"], .tab[aria-selected="true"] { color:var(--color-action); font-weight:600; border-bottom-color:var(--color-action); }
#import-queue-box { margin-top:var(--space-4); }
.queue-head { display:flex; align-items:baseline; gap:var(--space-3); }
.queue-head h3 { margin:0; }
#import-queue { list-style:none; padding:0; margin:var(--space-2) 0 0; }
#import-queue li { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; padding:var(--space-2) 0; border-bottom:1px solid var(--border); }
.queue-name { font-weight:600; min-width:12rem; }
.queue-status { flex:1 1 20rem; font-size:0.8125rem; color:var(--text-2); }
.queue-error .queue-status { color:var(--error-text); }
.queue-done .queue-status { color:var(--success-text); }
#import-queue progress { flex:1 1 100%; height:8px; accent-color:var(--navy); }
#add-song { display:flex; flex-direction:column; gap:var(--space-3); align-items:flex-start; }
#add-song input[type="text"] { width:min(24rem,100%); }
.library-note { font-size:0.75rem; color:var(--text-2); margin:var(--space-3) 0; }

/* Keyboard */
footer { position:fixed; left:0; right:0; bottom:0; z-index:var(--z-footer); background:var(--chrome); border-top:1px solid var(--border); padding:2rem var(--space-2) var(--space-2); }
#keys { position:relative; height:96px; width:100%; margin:0 auto; }
.key { position:absolute; top:0; border:1px solid var(--key-edge); border-radius:0 0 3px 3px; cursor:pointer; }
.key.white { background:var(--white); height:96px; z-index:var(--z-key-white); } .key.black { background:var(--key-black); height:60px; z-index:var(--z-key-black); }
.key.white[data-c]::after { content:attr(data-name); position:absolute; bottom:3px; left:0; right:0; text-align:center; font-size:0.625rem; color:var(--text-2); }
.key.down { background:var(--key-down); }
.key.named.white { background:color-mix(in srgb, var(--note) 55%, var(--white)); }
.key.named.black { box-shadow:inset 0 16px 0 var(--note); }
.key.named.white::after { content:attr(data-label); position:absolute; bottom:3px; left:0; right:0; text-align:center; font-size:0.625rem; font-weight:700; color:var(--text); }
.key.named.down { background:var(--key-down); }
/* The key to play next: a thick navy frame, a pulsing glow, and a name tag with an arrow pointing down at it. */
.key.want { z-index:var(--z-key-want); outline:4px solid var(--navy); outline-offset:-4px; box-shadow:0 0 0 2px var(--white), 0 0 14px 5px rgba(var(--navy-rgb),0.6); animation:want-pulse 0.9s ease-in-out infinite alternate; }
.key.want::before { content:attr(data-name) " ▼"; position:absolute; top:-1.7rem; left:50%; transform:translateX(-50%); background:var(--navy); color:var(--color-text-inverse); font-size:0.8125rem; font-weight:700; padding:var(--space-1) var(--space-2); border-radius:var(--radius-control); white-space:nowrap; z-index:var(--z-key-tag); box-shadow:var(--shadow-tag); }
.key.want.black { background:var(--key-want-black); }
@keyframes want-pulse { from { box-shadow:0 0 0 2px var(--white), 0 0 6px 2px rgba(var(--navy-rgb),0.45); } to { box-shadow:0 0 0 2px var(--white), 0 0 16px 7px rgba(var(--navy-rgb),0.8); } }
@media (prefers-reduced-motion: reduce) { .key.want { animation:none; } }
/* A note already found while finding a chord: green frame and a tick on its tag. */
.key.found { outline:3px solid var(--success); outline-offset:-3px; }
.key.found::before { content:"✓ " attr(data-name); position:absolute; top:-1.7rem; left:50%; transform:translateX(-50%); background:var(--success-text); color:var(--color-text-inverse); font-size:0.8125rem; font-weight:700; padding:var(--space-1) var(--space-2); border-radius:var(--radius-control); white-space:nowrap; z-index:var(--z-key-tag); }

/* Narrow windows: the pinned bar becomes one scrolling row and the lyrics go below the score. */
@media (max-width: 900px) {
  .topbar { flex-wrap:nowrap; overflow-x:auto; }
  .topbar > *, .topbar .group { flex:0 0 auto; flex-wrap:nowrap; }
  #layout { flex-direction:column; }
  #layout #score, #lyrics { flex:none; width:100%; }
  #lyrics { position:static; max-height:45vh; }
}
#find-music { display:flex; gap:var(--space-2); align-items:flex-end; flex-wrap:wrap; }
#find-music label { display:flex; flex-direction:column; gap:var(--space-1); font-size:0.75rem; color:var(--text-2); }
#find-music input { width:min(24rem,100%); }
.find-list { margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:var(--space-1); }
.find-list a { color:var(--navy); }

/* The right-hand column holds the Learning and Lyrics panels, one above the other. */
#side { flex:0 0 22rem; position:sticky; top:calc(var(--topbar-h, 3.5rem) + var(--session-h, 0px) + var(--songbar-h, 0px) + 12px); max-height:calc(100vh - var(--topbar-h, 3.5rem) - var(--session-h, 0px) - var(--songbar-h, 0px) - var(--footer-h) - var(--space-6)); overflow:auto; display:flex; flex-direction:column; gap:var(--space-3); }
#lyrics, #learn { flex:none; position:static; max-height:none; overflow:visible; }
#learn { background:var(--canvas); border:1px solid var(--border); border-radius:var(--radius-panel); box-shadow:var(--shadow); padding:var(--space-3) var(--space-4); }
#learn h2 { font-size:0.9375rem; font-weight:600; letter-spacing:-0.01em; margin:0 0 var(--space-2); }
.learn-summary { font-weight:600; margin:0 0 var(--space-2); }
.learn-meter { position:relative; height:8px; background:var(--chrome); border:1px solid var(--border); border-radius:var(--radius-pill); overflow:hidden; }
.learn-meter div { position:absolute; left:0; top:0; height:100%; width:0; background:var(--navy); }
.learn-note { font-size:0.75rem; color:var(--text-2); margin:var(--space-2) 0; }
#learn-list { list-style:none; padding:0; margin:var(--space-2) 0; display:flex; flex-direction:column; }
#learn-list li { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-1) 0; border-bottom:1px solid var(--border); }
.learn-name { flex:1; }
/* Narrow windows: the Practise and Lyrics panels are a drawer over the right of the score, the keyboard left in view, instead of a column below a very long score. */
@media (max-width: 900px) { #side { position:fixed; right:0; top:calc(var(--topbar-h, 3.5rem) + var(--session-h, 0px) + var(--songbar-h, 0px)); bottom:var(--footer-h); width:min(24rem, 100%); max-height:none; padding:var(--space-3); background:var(--color-bg-canvas); border-left:1px solid var(--color-border); box-shadow:var(--shadow-overlay); z-index:var(--z-settings); } }
#learn-bar-prov { background:var(--color-action-soft); }

/* The callout: a note inside a page, white or tinted, with a rule at its left in its tone. Neutral, info (what is happening now), warning, and error. */
.callout, .notice, .learn-run, .learn-hardbit { background:var(--color-bg-canvas); border:1px solid var(--color-border); border-left:3px solid var(--color-border-input); border-radius:var(--radius-panel); padding:var(--space-2) var(--space-3); margin:var(--space-2) 0; font-size:0.8125rem; color:var(--color-text); max-width:44rem; }
.notice { color:var(--color-text-muted); }
.callout.info, .learn-run { border-left-color:var(--color-action); background:var(--color-bg-selected); font-weight:600; }
.callout.warning, .learn-hardbit { border-left-color:var(--state-provisional-text); background:var(--state-provisional-bg); }
.callout.error { border-left-color:var(--state-flagged-text); background:var(--state-flagged-bg); color:var(--state-flagged-text); }

/* Today and the badges (docs/ui-direction.md): a badge is a pill with an icon and words; only Due is filled */
.badge-new { background:var(--new-bg); border-color:var(--new-border); color:var(--new-text); }
.badge-learning { background:var(--learning-bg); border-color:var(--learning-border); color:var(--learning-text); }
.badge-provisional { background:var(--warn-bg); border-color:var(--warn-border); color:var(--warn-text); }
.badge-due { background:var(--navy); border-color:var(--navy); color:var(--state-due-badge-text); }
.badge-learned { background:var(--success-bg); border-color:var(--success-border); color:var(--success-text); }
.badge-flagged { background:var(--error-bg); border-color:var(--error-border); color:var(--error-text); }
.target-change { margin-top:var(--space-3); border-top:1px solid var(--border-strong); padding-top:var(--space-2); }
.target-change summary { cursor:pointer; font-size:0.8125rem; font-weight:600; color:var(--navy); padding:var(--space-1) 0; }
.target-change form { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-3); align-items:flex-end; margin-top:var(--space-2); }
.target-change label { display:flex; flex-direction:column; gap:var(--space-1); font-size:0.8125rem; }
.target-change label:first-child { flex:1 1 100%; min-width:0; }
.target-change select, .target-change input { max-width:100%; }
.target-change .target-song { width:min(26rem, 100%); }
.target-change input { width:5rem; }
.target-change .target-error { flex:1 1 100%; margin:0; }
.session-break { margin:var(--space-2) 0; padding:var(--space-2) var(--space-3); background:var(--chrome); border-radius:var(--radius-control); font-size:0.8125rem; color:var(--text-2); }
.today-list { list-style:none; padding:0; margin:0 0 20px; max-width:56rem; }
.today-list li { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; padding:var(--space-2) 0; border-bottom:1px solid var(--border); }
.today-list .what { flex:1 1 18rem; display:flex; flex-direction:column; gap:var(--space-1); }
.today-list .what strong { font-weight:600; }
.today-list .sub { font-size:0.75rem; color:var(--text-2); }
.page h3 { font-size:0.9375rem; font-weight:600; margin:var(--space-6) 0 var(--space-1); }
.page h4, .page h5 { font-size:0.8125rem; font-weight:600; margin:var(--space-4) 0 var(--space-1); color:var(--color-text-muted); }
#lessons details { margin:var(--space-3) 0; border-top:1px solid var(--border); }
#lessons summary { cursor:pointer; padding:var(--space-3) 0 var(--space-1); font-size:0.9375rem; font-weight:600; }
#lessons summary .hint { font-weight:400; margin-left:var(--space-2); }
#lessons details > .hint { margin:var(--space-1) 0 var(--space-2); }
.empty-line { color:var(--text-2); margin:var(--space-3) 0; }

/* Learning panel (S6) */
.learn-choices { display:flex; gap:var(--space-3); flex-wrap:wrap; margin:var(--space-2) 0; }
.learn-state-line { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin:var(--space-2) 0; font-size:0.8125rem; color:var(--text-2); }
.learn-h { font-size:0.9375rem; font-weight:600; margin:var(--space-4) 0 var(--space-2); }

/* Chords and Drill */
#chords-note { margin:0 0 var(--space-2); }
#chords-body { display:grid; grid-template-columns:repeat(auto-fill, minmax(24rem, 1fr)); gap:0 var(--space-6); align-items:start; }
.chord-group { margin:0 0 var(--space-4); }
.chord-group h3 { display:flex; align-items:center; gap:var(--space-3); }
.chord-list { list-style:none; padding:0; margin:0; max-width:56rem; }
.chord-list li { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; padding:var(--space-2) 0; border-bottom:1px solid var(--border); }
.chord-list .what { flex:1 1 18rem; display:flex; flex-direction:column; gap:var(--space-1); }
.chord-list .what strong { font-weight:600; font-variant-numeric:tabular-nums; }
.chord-list .sub { font-size:0.75rem; color:var(--text-2); }
#drill-title:focus, #chords-title:focus { outline:none; }
#song-page form { display:flex; flex-direction:column; gap:var(--space-3); max-width:34rem; }
#song-page label { display:flex; flex-direction:column; gap:var(--space-1); font-size:0.8125rem; color:var(--text-2); }
.sp-tempo { display:flex; gap:var(--space-4); flex-wrap:wrap; align-items:flex-end; }
.sp-tempo input { width:6rem; }
.sp-flags { display:flex; gap:var(--space-2); flex-wrap:wrap; margin:var(--space-2) 0 0; }
#songpage-title:focus, #sp-editor-title:focus { outline:none; }
#sp-editor { border:1px solid var(--border-strong); border-radius:var(--radius-panel); padding:var(--space-3) var(--space-4); margin:var(--space-3) 0; background:var(--chrome); max-width:60rem; }
.sp-voice { margin:var(--space-3) 0; }
.sp-voice-head { display:flex; gap:var(--space-3); align-items:baseline; flex-wrap:wrap; font-size:0.8125rem; font-weight:600; }
.sp-notes { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-2); }
.sp-note { display:flex; flex-direction:column; gap:var(--space-1); font-size:0.75rem; color:var(--text-2); }
.sp-note select { font-size:0.8125rem; }
.sp-editor-actions { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-3); }
.filterbar .check { display:flex; align-items:center; gap:var(--space-2); font-size:0.8125rem; color:var(--text-2); }
.legend { list-style:none; padding:0; margin:0 0 var(--space-1); display:flex; flex-direction:column; gap:var(--space-1); font-size:0.75rem; color:var(--text-2); }
.legend li { display:flex; align-items:center; gap:var(--space-2); }
.today-list .count { font-size:0.75rem; color:var(--text-2); }
#drill-run:empty, #lesson-run:empty, #warmup-run:empty { display:none; }
.notice ul { margin:0; padding-left:1.1rem; }
#warmup-progress { width:min(24rem, 100%); height:8px; accent-color:var(--navy); }
.check input { width:18px; height:18px; }
.key.want[data-finger]::before { content:attr(data-finger) " \00b7  " attr(data-name) " \25bc"; }
#lesson-title:focus, #lessons-title:focus, #warmup-title:focus { outline:none; }
.play-link { position:relative; z-index:var(--z-raised); margin-left:var(--space-3); }
.learn-needs { margin:var(--space-1) 0; font-size:0.8125rem; color:var(--text-2); }
.learn-needs:empty { display:none; }
.check { display:flex; align-items:center; gap:var(--space-2); min-height:28px; font-size:0.8125rem; color:var(--text-2); }
#session-bar { position:sticky; top:var(--topbar-h, 3.5rem); z-index:var(--z-session); display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; padding:var(--space-2) var(--space-4); background:var(--navy); color:var(--color-text-inverse); font-size:0.875rem; }
@media (min-width:641px) { html { scroll-padding-top:calc(var(--topbar-h, 3.5rem) + var(--session-h, 0px) + var(--songbar-h, 0px) + 1rem); } } /* a focused control scrolls clear of the header and the sticky bar */
@media (max-width:640px) { #session-bar { position:static; } } /* on a phone the header already takes a lot of the screen: the bar scrolls with the page */
#session-bar #session-text { flex:1 1 14rem; display:flex; flex-direction:column; gap:1px; }
#session-bar #session-now { font-weight:600; }
#session-bar #session-next { font-size:0.8125rem; }
#session-bar #session-clock { font-variant-numeric:tabular-nums; font-weight:600; }
#session-bar .btn { background:transparent; color:var(--color-text-inverse); border-color:var(--white); }
#session-bar .btn:hover:not(:disabled) { background:var(--on-action-wash); }
#session-bar .btn.primary { background:var(--white); color:var(--navy); border-color:var(--white); font-weight:600; }
#session-bar .btn.primary:hover:not(:disabled) { background:var(--navy-tint); }
#session-checkin { flex:1 1 100%; display:flex; flex-direction:column; gap:var(--space-2); }
#session-checkin .checkin-row { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
#session-checkin .checkin-row > span { min-width:12rem; font-weight:600; }
@media (max-width:640px) { #session-checkin .checkin-row > span { flex:1 1 100%; min-width:0; } } /* on a phone each question sits above its answers */
#session-bar .btn.toggle[aria-pressed="true"] { background:var(--white); color:var(--navy); border-color:var(--white); font-weight:600; }
#session-bar .btn:focus-visible { outline:2px solid var(--white); outline-offset:2px; }
.warmup-timer { font-size:2rem; font-weight:600; font-variant-numeric:tabular-nums; margin:var(--space-2) 0; }
.warmup-actions { display:flex; gap:var(--space-2); flex-wrap:wrap; }
#warmup-safety { padding-left:1.2rem; }
.lesson-next { margin-bottom:var(--space-2); }

@media (max-width: 900px) {
  body.on-menu .topbar { flex-wrap:wrap; overflow-x:visible; }
  body.on-menu .topbar > * { flex:0 1 auto; }
  body.on-menu .topbar .spacer { flex:1 1 0; }
}

/* Song settings: a panel under the top bar, at the right, opened from the cog. Fixed, so the bar's own scrolling never clips it. */
.popover { position:fixed; right:16px; top:calc(var(--topbar-h, 3.5rem) + 6px); z-index:var(--z-settings); width:min(24rem, calc(100vw - 32px)); max-height:calc(100vh - var(--topbar-h, 3.5rem) - 24px); overflow:auto; padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-4); background:var(--canvas); border:1px solid var(--border); border-radius:var(--radius-overlay); box-shadow:var(--shadow-overlay); }
#account-menu { width:min(18rem, calc(100vw - 32px)); padding:var(--space-2); }
.menu-list { list-style:none; margin:0; padding:0; }
.menu-item { display:block; width:100%; text-align:left; font:inherit; background:none; border:0; border-radius:var(--radius-control); padding:var(--space-2) var(--space-3); color:var(--color-text); cursor:pointer; }
.menu-item:hover { background:var(--color-bg-chrome); }
.settings-title { font-size:0.9375rem; line-height:1.3; font-weight:600; letter-spacing:-0.01em; margin:0; }
.settings-group { display:flex; flex-direction:column; gap:var(--space-3); padding-top:var(--space-3); border-top:1px solid var(--border); }
.settings-group h3 { font-size:0.75rem; line-height:1.4; font-weight:600; letter-spacing:0.04em; margin:0; color:var(--text-2); }
.settings-group .group { flex-wrap:wrap; }

/* Listen and pick (repair by ear): the versions of a bar, each with a Listen and a Use button. */
#sp-listen { border:1px solid var(--border-strong); border-radius:var(--radius-panel); padding:var(--space-3) var(--space-4); margin:var(--space-3) 0; background:var(--chrome); max-width:60rem; }
#sp-listen-title:focus { outline:none; }
.sp-version { display:grid; grid-template-columns:2rem minmax(0,1fr) auto auto; gap:var(--space-2) var(--space-3); align-items:center; padding:var(--space-3) 0; border-top:1px solid var(--border); }
.sp-letter { display:inline-flex; align-items:center; justify-content:center; width:1.75rem; height:1.75rem; border-radius:var(--radius-pill); background:var(--navy-tint); color:var(--navy); font-weight:600; }
.sp-version.playing .sp-letter { background:var(--navy); color:var(--color-text-inverse); }
.sp-version-words { font-size:0.875rem; }
@media (max-width:640px) { .sp-version { grid-template-columns:2rem minmax(0,1fr); } .sp-version .btn { grid-column:2; justify-self:start; } }

/* Today and the pieces it is made of (design round, docs/plan-design-cohesion.md): a panel, a row, a choice of one, and the plan. One filled button a page: the next step. */
.today-grid { display:grid; grid-template-columns:minmax(0, 1fr) 22rem; gap:var(--space-8); align-items:start; }
@media (max-width: 900px) { .today-grid { grid-template-columns:1fr; } }
.panel { background:var(--color-bg-canvas); border:1px solid var(--color-border); border-radius:var(--radius-panel); box-shadow:var(--shadow-panel); padding:var(--space-4); margin:0 0 var(--space-4); }
.panel.emphasis { border-left:3px solid var(--color-action); }
.page .panel > .panel-title { font-size:0.9375rem; font-weight:600; margin:0 0 var(--space-2); }
.overline { margin:0 0 var(--space-1); font-size:0.75rem; font-weight:600; letter-spacing:0.04em; color:var(--color-text-muted); }
.page .next-title { font-size:1.125rem; font-weight:600; letter-spacing:-0.01em; margin:0 0 var(--space-1); }
.next-sub { margin:0 0 var(--space-3); color:var(--color-text-muted); }
.next-actions { display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap; }
.plan-head { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2) var(--space-4); margin:var(--space-6) 0 var(--space-2); }
.page .plan-head h3 { margin:0; }
.plan-other summary { cursor:pointer; font-size:0.8125rem; font-weight:600; color:var(--color-action); }
.plan-other-field { display:flex; gap:var(--space-2); align-items:center; margin-top:var(--space-2); font-size:0.8125rem; }
.plan-other-field input { width:5rem; }
.plan-error { margin:0; }
.plan-error:empty { display:none; }
.plan-block { margin:var(--space-2) 0; }
.plan-block h4 { font-size:0.8125rem; font-weight:600; margin:var(--space-3) 0 var(--space-1); color:var(--color-text-muted); }
details.plan-block summary { cursor:pointer; font-size:0.8125rem; font-weight:600; color:var(--color-text-muted); padding:var(--space-2) 0; }
.segmented { display:inline-flex; border:1px solid var(--color-border-control); border-radius:var(--radius-control); overflow:hidden; }
.seg { font:inherit; font-size:0.8125rem; min-height:30px; padding:var(--space-1) var(--space-3); background:var(--color-bg-canvas); color:var(--color-text-muted); border:0; border-right:1px solid var(--color-border-control); cursor:pointer; }
.seg:last-child { border-right:0; }
.seg:hover { background:var(--color-bg-chrome); }
.seg[aria-pressed="true"] { background:var(--color-bg-selected); color:var(--color-action); font-weight:600; box-shadow:inset 0 -2px 0 var(--color-action); }
.rows { list-style:none; margin:0; padding:0; }
.row { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) 0; border-bottom:1px solid var(--color-border); }
.rows > .row:last-child { border-bottom:0; }
.row .what { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:var(--space-1); }
.row .what strong { font-weight:600; }
.row .sub { font-size:0.75rem; color:var(--color-text-muted); }
.row-actions { display:flex; gap:var(--space-2); flex:none; }
.btn.ghost { background:transparent; border-color:var(--color-border); color:var(--color-text-muted); }
.btn.ghost:hover:not(:disabled) { background:var(--color-bg-chrome); color:var(--color-text); }
.link { font:inherit; background:none; border:0; padding:0; color:var(--color-action); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.rail-links { display:flex; flex-wrap:wrap; gap:var(--space-4); font-size:0.8125rem; margin:var(--space-2) 0; }
.rail-actions { margin:var(--space-3) 0 var(--space-2); }
.target-what { margin:0 0 var(--space-2); }

/* The song bar: the controls of the song in view, under the top bar, which now holds only where you are and who you are. */
.songbar { position:sticky; top:calc(var(--topbar-h, 3.5rem) + var(--session-h, 0px)); z-index:var(--z-sticky-song); display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2) var(--space-3); padding:var(--space-2) var(--space-4); background:var(--color-bg-canvas); border-bottom:1px solid var(--color-border); }
.songbar .group { flex-wrap:nowrap; }

.count { display:inline-block; min-width:1.25rem; padding:0 var(--space-2); margin-left:var(--space-1); border-radius:var(--radius-pill); background:var(--state-provisional-bg); border:1px solid var(--state-provisional-border); color:var(--state-provisional-text); font-size:0.6875rem; font-weight:600; text-align:center; }
#sp-target { margin-top:var(--space-4); }