/* ============ TRAD BUDDY — the Classic look ============
   The 2026 redesign (canvas: claude.ai/artifact/3iFn72QvHArBnc7gHq6YsR): ink and bottle green on white,
   Atkinson Hyperlegible to read, the pixel art kept for identity. 2026-10-28: Old Standard — the type of the old
   printed tunebooks, O'Neill's era — names things (tunes, sets, pages); the header and tab bar are a pub front —
   pub green, a brass double rule, the name in gilt; a group's name is painted on its sign in uncial (Uncial Antiqua).
   Everything here is scoped to html[data-look="classic"], so the 8-bit look (style.css) is untouched.
   While it's being built it's opt-in: ?look=classic (and ?look=8bit to go back), remembered per device. */

@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 400; src: url('vendor/atkinson-hyperlegible-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 700; src: url('vendor/atkinson-hyperlegible-700.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Old Standard TT'; font-weight: 600 700; src: url('vendor/old-standard-700.woff2') format('woff2'); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Uncial Antiqua'; font-weight: 400; src: url('vendor/uncial-antiqua.woff2') format('woff2'); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Uncial Antiqua'; font-weight: 400; src: url('vendor/uncial-antiqua-ext.woff2') format('woff2'); font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Old Standard TT'; font-weight: 600 700; src: url('vendor/old-standard-700-ext.woff2') format('woff2'); font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

html[data-look="classic"] {
  /* the palette: white, ink, bottle green and brass. Night re-points these (below), so every rule follows */
  --c-paper: #FFFFFF;  --c-surface: #FFFFFF;  --c-surface2: #F3F5F1;  --c-track: #E7EBE5;
  --c-line: #E2E5DE;   --c-line2: #CDD3CB;
  --c-ink: #1B1F1C;    --c-muted: #57615A;
  --c-accent: #1F5641; --c-accent-dk: #18452F; --c-accent-ink: #1F5641; --c-on-accent: #FFFFFF;
  --c-tint: #EEF4F0;   --c-tint-line: #BFD3C6;  --c-tap: rgba(31, 86, 65, .12);
  --c-brass: #B5832A;  --c-brass-ink: #7A5413;  --c-brass-tint: #F4EADB; --c-brass-line: #E2CFA8;
  --c-red: #B3261E;    --c-red-dk: #8F1E18;     --c-red-line: #E6B8B4;
  --c-mine: #8DB79C;   --c-theirs: #E7D4AE;     --c-avatar: #163A24;
  --c-sheet: #FFFFFF;  --c-sheet-ink: #1B1F1C;  --c-hot: #B3261E;
  --c-shadow: rgba(27, 31, 28, .14);
  --c-toast: #1B1F1C;  --c-toast-ink: #FFFFFF;   /* messages: dark on the light look… */
  /* the pub front: pub green, a brass double rule, gilt lettering, cream for the rest (the same paint as the group signs) */
  --c-front: #173B27;  --c-front-line: #C9973E; --c-gilt: #F2C94C; --c-front-ink: #CFE3D6; --c-front-tint: rgba(242, 201, 76, .16);
  /* the 8-bit tokens, re-pointed: the same names, so every rule in style.css follows along */
  --bg: var(--c-paper);
  --panel: var(--c-surface);
  --panel2: var(--c-surface2);
  --line: var(--c-line);
  --line-bright: var(--c-accent);
  --green: var(--c-accent);       /* bottle green: main actions */
  --bright: var(--c-ink);
  --dim: var(--c-muted);
  --gold: var(--c-brass-ink);     /* brass, dark enough to read as text */
  --gold-dk: var(--c-brass);
  --red: var(--c-red);
  --cream: var(--c-ink);
  --cream-dk: var(--c-muted);
  --font-px: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  --font-serif: 'Old Standard TT', Georgia, 'Times New Roman', serif; /* the names: tunes, sets, pages */
  --font-celtic: 'Uncial Antiqua', 'Old Standard TT', Georgia, serif; /* a group's name, painted on its sign */
  --radius: 14px;
  color-scheme: light;
}
/* Night: the same look for a dim pub — dark paper, soft ink, a lighter green to read on it */
html[data-look="classic"][data-night] {
  --c-paper: #111613;  --c-surface: #19201C;  --c-surface2: #212923;  --c-track: #2C352F;
  --c-line: #2A332D;   --c-line2: #3B463F;
  --c-ink: #E9EDE8;    --c-muted: #A3AEA6;
  --c-accent: #2E7A58; --c-accent-dk: #276A4C; --c-accent-ink: #8FD3AF; --c-on-accent: #FFFFFF;
  --c-tint: #1C3328;   --c-tint-line: #2F5843;  --c-tap: rgba(143, 211, 175, .14);
  --c-brass: #C9973E;  --c-brass-ink: #E4BC6E;  --c-brass-tint: #33291A; --c-brass-line: #5A4724;
  --c-red: #E0675C;    --c-red-dk: #C9554B;     --c-red-line: #6B2F2A;
  --c-mine: #4F7F62;   --c-theirs: #6E5B37;     --c-avatar: #0E2417;
  --c-sheet: #19201C;  --c-sheet-ink: #E9EDE8;  --c-hot: #FF7A6E;
  --c-shadow: rgba(0, 0, 0, .45);
  --c-toast: #E9EDE8;  --c-toast-ink: #111613;   /* …light on Night, so they stand out either way */
  --c-front: #133020;  --c-front-line: #8A6A2C; --c-gilt: #E4BC6E; --c-front-ink: #A9C4B3; --c-front-tint: rgba(228, 188, 110, .14);
  color-scheme: dark;
}

/* ---------- page ---------- */
html[data-look="classic"] body {
  font-size: 18px;
  line-height: 1.5;
  background: var(--bg);
  -webkit-tap-highlight-color: var(--c-tap);
}
html[data-look="classic"] body::after { display: none; }   /* no CRT scanlines */
html[data-look="classic"] :focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
html[data-look="classic"] .body-text { font-size: 18px; line-height: 1.5; }
html[data-look="classic"] .sub { font-size: 15px; font-weight: 700; }

/* words set in the pixel font were sized for it: give them real sizes and weight */
html[data-look="classic"] .panel-label {
  font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; /* plain words, not small capitals */
  color: var(--dim);
}
html[data-look="classic"] .view-title { font-size: 28px; font-weight: 700; color: var(--bright); text-shadow: none; letter-spacing: 0; }
html[data-look="classic"] .view-sub { font-size: 18px; color: var(--dim); }

/* ---------- surfaces: no pixel frames, soft cards ---------- */
html[data-look="classic"] .pix {
  border: 1px solid var(--c-line);
  outline: 0;
  box-shadow: none;
  background: var(--panel);
  border-radius: 8px;
}
html[data-look="classic"] .well,
html[data-look="classic"] .detail,
html[data-look="classic"] .setplayer,
html[data-look="classic"] .syncsheet { background: var(--bg); }

/* ---------- header ---------- */
html[data-look="classic"] .hud {
  background: var(--c-front);
  border-bottom: 5px double var(--c-front-line);
  box-shadow: none;
}
html[data-look="classic"] .logo-shamrock { animation: none; border-radius: 8px; }
html[data-look="classic"] .logo-text {
  font-family: var(--font-serif); font-weight: 700; font-size: 25px; line-height: 1.1;
  color: var(--c-gilt); text-shadow: 0 2px 0 rgba(0, 0, 0, .35); letter-spacing: .01em;
}

/* ---------- tabs ---------- */
/* the tabs are on the pub front too: cream, the picked one in gilt */
html[data-look="classic"] .tab {
  font-size: 15px; font-weight: 700; line-height: 1.2;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--c-front-ink);
}
@media (hover: hover) { html[data-look="classic"] .tab:hover { color: #FFFFFF; background: rgba(255, 255, 255, .08); } }
html[data-look="classic"] .tab.active {
  color: var(--c-gilt); background: var(--c-front-tint); border: 0;
  margin-bottom: 0; padding-bottom: 12px; min-height: 48px;
}
html[data-look="classic"] .tab .count { font-size: 13px; font-weight: 700; border-radius: 9px; padding: 1px 7px; background: rgba(255, 255, 255, .16); color: #FFFFFF; }
html[data-look="classic"] .tab.active .count { background: var(--c-gilt); color: var(--c-front); }
@media (max-width: 600px) {
  html[data-look="classic"] .tabs {
    background: var(--c-front);
    border-top: 5px double var(--c-front-line);
    box-shadow: none;
    gap: 4px;
  }
  html[data-look="classic"] .tab { border: 0; box-shadow: none; background: transparent; min-height: 54px; }
  html[data-look="classic"] .tab .tab-lbl { font-size: 14px; letter-spacing: 0; }
  html[data-look="classic"] .tab.active { background: var(--c-front-tint); color: var(--c-gilt); box-shadow: none; }
  html[data-look="classic"] .tab .tab-ico { filter: none; }
}

/* ---------- buttons ---------- */
html[data-look="classic"] .btn {
  font-size: 17px; font-weight: 700; line-height: 1.25;
  padding: 12px 18px;
  text-transform: none; letter-spacing: 0;
  color: var(--c-accent-ink); background: var(--c-surface);
  border: 1.5px solid var(--c-accent); border-radius: 8px;
  box-shadow: none;
}
@media (hover: hover) { html[data-look="classic"] .btn:hover { background: var(--c-tint); color: var(--c-accent-ink); } }
html[data-look="classic"] .btn:active { transform: translateY(1px); box-shadow: none; }
html[data-look="classic"] .btn-gold { color: var(--c-on-accent); background: var(--c-accent); border-color: var(--c-accent); box-shadow: none; }
@media (hover: hover) { html[data-look="classic"] .btn-gold:hover { background: var(--c-accent-dk); color: var(--c-on-accent); } }
html[data-look="classic"] .btn-red, html[data-look="classic"] .btn-danger { color: var(--c-on-accent); background: var(--c-red); border-color: var(--c-red); box-shadow: none; }
@media (hover: hover) { html[data-look="classic"] .btn-red:hover { background: var(--c-red-dk); } }
html[data-look="classic"] .btn-ghost { background: transparent; border-color: var(--c-line2); color: var(--dim); opacity: 1; }
html[data-look="classic"] .btn-small { font-size: 16px; padding: 10px 14px; border-radius: 8px; }
html[data-look="classic"] .btn-big { font-size: 18px; padding: 16px; border-radius: 8px; }
html[data-look="classic"] .btn-step { font-size: 16px; }
html[data-look="classic"] .card-play { border-radius: 26px; }
html[data-look="classic"] .card-play.playing { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
html[data-look="classic"] .close-btn {
  background: var(--c-surface); color: var(--c-accent-ink); border: 1.5px solid var(--c-line2); border-radius: 26px;
  text-shadow: none; box-shadow: 0 2px 10px rgba(27, 31, 28, .12);
}
@media (hover: hover) { html[data-look="classic"] .close-btn:hover { background: var(--c-tint); color: var(--c-accent-ink); border-color: var(--c-accent); } }

/* ---------- tune cards ---------- */
html[data-look="classic"] .card {
  background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: 8px;
  box-shadow: none;
}
@media (hover: hover) { html[data-look="classic"] .card:hover { border-color: var(--c-line2); background: var(--c-surface); transform: none; box-shadow: 0 2px 10px rgba(27, 31, 28, .06); } }
html[data-look="classic"] .card:active { transform: none; box-shadow: none; }
html[data-look="classic"] .card-name { font-family: var(--font-serif); font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--bright); }
html[data-look="classic"] .card.learned .card-name { color: var(--bright); }

/* tune type and key: quiet tinted pills instead of neon outlines */
html[data-look="classic"] .badge {
  font-size: 15px; font-weight: 700; line-height: 1.2;
  padding: 3px 10px; border: 0; border-radius: 4px;
  background: var(--c-tint); color: var(--c-accent-ink);
}
html[data-look="classic"] .badge-key { background: #F1EEE6; color: #4A4436; }
html[data-look="classic"] .badge-fame { background: transparent; color: var(--dim); font-weight: 400; padding-left: 2px; padding-right: 2px; }

/* each tune type has its own colour — the tags, the type chips and the type word in a row all use it.
   --tc is the colour (dark enough to read on white), --tc-bg its light tint */
html[data-look="classic"] .t-reel       { --tc: #1F4E7A; --tc-bg: #E2ECF6; }
html[data-look="classic"] .t-jig        { --tc: #A12F22; --tc-bg: #F8E4E1; }
html[data-look="classic"] .t-slipjig    { --tc: #6E3A86; --tc-bg: #F1E7F6; }
html[data-look="classic"] .t-hornpipe   { --tc: #8A4A0F; --tc-bg: #F8EADC; }
html[data-look="classic"] .t-polka      { --tc: #A1225E; --tc-bg: #F8E3EE; }
html[data-look="classic"] .t-slide      { --tc: #665A0C; --tc-bg: #F3F0D5; }
html[data-look="classic"] .t-waltz      { --tc: #19695C; --tc-bg: #DFF2EE; }
html[data-look="classic"] .t-march      { --tc: #48525E; --tc-bg: #E8EBEF; }
html[data-look="classic"] .t-barndance  { --tc: #3B6A1F; --tc-bg: #E5F1DC; }
html[data-look="classic"] .t-strathspey { --tc: #4A3F96; --tc-bg: #E9E6F7; }
html[data-look="classic"] .t-mazurka    { --tc: #8A3A4A; --tc-bg: #F5E4E8; }
html[data-look="classic"] .t-threetwo   { --tc: #2F5F7A; --tc-bg: #E0EDF2; }
html[data-look="classic"][data-night] .t-reel       { --tc: #9CC4EC; --tc-bg: #1C2A38; }
html[data-look="classic"][data-night] .t-jig        { --tc: #F0A196; --tc-bg: #3A2220; }
html[data-look="classic"][data-night] .t-slipjig    { --tc: #D2AEE6; --tc-bg: #2F2436; }
html[data-look="classic"][data-night] .t-hornpipe   { --tc: #EDB57A; --tc-bg: #372A1C; }
html[data-look="classic"][data-night] .t-polka      { --tc: #F09CC4; --tc-bg: #3A2130; }
html[data-look="classic"][data-night] .t-slide      { --tc: #DCCB72; --tc-bg: #322F1A; }
html[data-look="classic"][data-night] .t-waltz      { --tc: #85D4C4; --tc-bg: #1A322D; }
html[data-look="classic"][data-night] .t-march      { --tc: #B7C0CA; --tc-bg: #272C31; }
html[data-look="classic"][data-night] .t-barndance  { --tc: #A8D48A; --tc-bg: #24321C; }
html[data-look="classic"][data-night] .t-strathspey { --tc: #B9B0F0; --tc-bg: #27243A; }
html[data-look="classic"][data-night] .t-mazurka    { --tc: #E8A6B4; --tc-bg: #362227; }
html[data-look="classic"][data-night] .t-threetwo   { --tc: #9CCBE2; --tc-bg: #1D2D35; }
html[data-look="classic"] .badge[class*=" t-"] { background: var(--tc-bg); color: var(--tc); }
html[data-look="classic"] .chip.typed { background: var(--tc-bg); color: var(--tc); border-color: transparent; }
html[data-look="classic"] .chip.typed.active { background: var(--tc); color: #FFFFFF; border-color: var(--tc); }
html[data-look="classic"][data-night] .chip.typed.active { color: #111613; }
@media (hover: hover) { html[data-look="classic"] .chip.typed:not(.active):hover { border-color: var(--tc); color: var(--tc); background: var(--tc-bg); } }
html[data-look="classic"] .u-type { color: var(--tc); font-weight: 700; }
html[data-look="classic"] .detail-meta #detail-type[class*=" t-"] { color: var(--tc); font-weight: 700; } /* the tune page: the type word in its colour */

/* ---------- filters, search, fields ---------- */
html[data-look="classic"] .chip {
  font-size: 16px; font-weight: 700;
  background: var(--c-surface); color: var(--bright);
  border: 1.5px solid var(--c-line2); border-radius: 22px; /* filters stay round; everything else is squarer */
}
@media (hover: hover) { html[data-look="classic"] .chip:hover { color: var(--bright); border-color: var(--c-accent); } }
html[data-look="classic"] .chip.active { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
html[data-look="classic"] .chip-new { color: var(--c-brass-ink); border-color: #E2C894; }
html[data-look="classic"] .chip-new.active { background: var(--c-brass); color: var(--c-on-accent); border-color: var(--c-brass); }

html[data-look="classic"] .searchbox {
  background: var(--c-surface); border: 1.5px solid var(--c-line2); border-radius: 8px; box-shadow: none; outline: 0;
}
html[data-look="classic"] .searchbox input { font-size: 18px; color: var(--bright); }
html[data-look="classic"] .gate-input,
html[data-look="classic"] .well-select,
html[data-look="classic"] .pix-select {
  font-family: var(--font-body); font-size: 18px; color: var(--bright);
  background: var(--c-surface); border: 1.5px solid var(--c-line2); border-radius: 8px; box-shadow: none;
}
html[data-look="classic"] .gate-input:focus,
html[data-look="classic"] .well-select:focus { border-color: var(--c-accent); }

/* ---------- empty states, dialogs, toasts ---------- */
html[data-look="classic"] .empty { color: var(--bright); }
html[data-look="classic"] .empty p:not(.body-text) { font-size: 20px; font-weight: 700; line-height: 1.4; }
html[data-look="classic"] .empty-sprite { animation: none; }
html[data-look="classic"] .dialog { background: rgba(27, 31, 28, .45); }
html[data-look="classic"] .dialog-msg { font-size: 19px; line-height: 1.45; color: var(--bright); }
html[data-look="classic"] .toast {
  font-size: 17px; font-weight: 700; line-height: 1.35;
  color: var(--c-toast-ink); background: var(--c-toast);
  border: 0; border-radius: 8px; box-shadow: 0 6px 24px rgba(27, 31, 28, .25);
}
html[data-look="classic"] .toast.toast-green { color: var(--c-on-accent); background: var(--c-accent); }

/* ---------- tune page ---------- */
html[data-look="classic"] .detail-titles h2 { font-family: var(--font-serif); font-weight: 700; font-size: 32px; line-height: 1.1; color: var(--bright); text-shadow: none; }
html[data-look="classic"] .version-label { font-size: 16px; }

html[data-look="classic"] .well-ctl { font-size: 16px; font-weight: 700; letter-spacing: 0; color: var(--dim); }
html[data-look="classic"] .tab .count { font-size: 14px; }

/* ---------- the music: a clean sheet instead of the parchment scroll ---------- */
html[data-look="classic"] .scroll-roll { display: none; }
html[data-look="classic"] .scroll-paper::before { content: none; }
html[data-look="classic"] .scroll-paper,
html[data-look="classic"] .scroll-roll + .scroll-paper {
  background: var(--c-sheet); color: var(--c-sheet-ink); image-rendering: auto;
  border: 1px solid var(--c-line); border-radius: 8px; outline: 0;
  box-shadow: 0 1px 2px rgba(27, 31, 28, .05);
  margin: 0 0 18px; padding: 14px 8px 18px;
}
html[data-look="classic"] .learned-stamp { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--gold); }

/* ---------- the player (Lilt) ---------- */
html[data-look="classic"] .lilt {
  --l-paper-ink: var(--c-sheet-ink);
  --l-hot: var(--c-hot);
  --l-now: rgba(181, 131, 42, .16);
  --l-hover: rgba(31, 86, 65, .10);
  --l-loop: rgba(181, 131, 42, .16);
  --l-loop-ink: var(--c-brass-ink);
}
html[data-look="classic"] .lilt .hint { font-size: 17px; color: var(--dim); }
html[data-look="classic"] .lilt .parse-err { font-size: 19px; color: var(--dim); }

/* the bar pinned to the bottom */
html[data-look="classic"] .lilt .dock {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 8px;
  box-shadow: 0 8px 28px rgba(27, 31, 28, .16);
}
html[data-look="classic"] .lilt .dock:not(.mini) .lt-more {
  background: var(--c-surface); border: 1px solid var(--c-line); border-bottom: 0; border-radius: 12px 12px 0 0;
  font-size: 15px; font-weight: 700; color: var(--green);
}
html[data-look="classic"] .lilt .dock.mini .lt-more { color: var(--green); }
html[data-look="classic"] .lilt .progress { background: var(--c-track); border: 0; border-radius: 4px; }
html[data-look="classic"] .lilt .progress i { background: var(--green); border-radius: 4px; }
html[data-look="classic"] .lilt .progress i::after { background: var(--green); border: 3px solid var(--c-surface); border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
html[data-look="classic"] .lilt .progress.loop i,
html[data-look="classic"] .lilt .progress.loop i::after { background: var(--c-brass); }
html[data-look="classic"] .lilt .tb { font-size: 15px; font-weight: 700; color: var(--dim); border-radius: 8px; }
@media (hover: hover) { html[data-look="classic"] .lilt .tb:hover { color: var(--green); background: var(--c-tint); } }
html[data-look="classic"] .lilt .tb[aria-pressed="true"],
html[data-look="classic"] .lilt .tb.loopon { color: var(--green); background: var(--c-tint); }
html[data-look="classic"] .lilt .play {
  border: 0; border-radius: 50%; background: var(--green); color: var(--c-on-accent);
  box-shadow: 0 4px 14px rgba(31, 86, 65, .32);
}
html[data-look="classic"] .lilt .play:active { transform: scale(.95); box-shadow: 0 2px 6px rgba(31, 86, 65, .3); }
html[data-look="classic"] .lilt .play.beat { animation: lt-beat-c .45s ease-out; }
html[data-look="classic"] .lilt .play.beat.down { animation: lt-beatdown-c .55s ease-out; }
@keyframes lt-beat-c { 0% { box-shadow: 0 4px 14px rgba(31, 86, 65, .32), 0 0 0 0 rgba(31, 86, 65, .35); } 100% { box-shadow: 0 4px 14px rgba(31, 86, 65, .32), 0 0 0 10px rgba(31, 86, 65, 0); } }
@keyframes lt-beatdown-c { 0% { box-shadow: 0 4px 14px rgba(31, 86, 65, .32), 0 0 0 0 rgba(31, 86, 65, .5); } 100% { box-shadow: 0 4px 14px rgba(31, 86, 65, .32), 0 0 0 16px rgba(31, 86, 65, 0); } }
html[data-look="classic"] .lilt .speed { background: var(--c-surface2); border: 1px solid var(--c-line); border-radius: 8px; }
html[data-look="classic"] .lilt .speed .step { color: var(--green); border-radius: 6px; }
@media (hover: hover) { html[data-look="classic"] .lilt .speed .step:hover { background: var(--c-tint); } }
html[data-look="classic"] .lilt .speed .num { font-size: 28px; font-weight: 700; color: var(--bright); }
html[data-look="classic"] .lilt .dock.mini .speed .num { font-size: 24px; }
html[data-look="classic"] .lilt .speed .lbl { font-size: 14px; font-weight: 700; color: var(--dim); }

/* the note name that pops up when you tap a note */
html[data-look="classic"] .lilt .notecard { background: var(--c-surface); border: 1px solid var(--c-line2); border-radius: 6px; box-shadow: 0 4px 16px rgba(27, 31, 28, .18); }
html[data-look="classic"] .lilt .nc-name { font-size: 20px; font-weight: 700; color: var(--green); }

/* the count-in */
html[data-look="classic"] .lilt .lt-count { font-weight: 700; color: var(--green); text-shadow: 0 2px 12px rgba(255, 255, 255, .9); }
html[data-look="classic"] .lilt .lt-count.weak { color: var(--dim); }

/* the banners above the music */
html[data-look="classic"] .lilt .banner { background: var(--c-brass-tint); border: 1px solid var(--c-brass-line); border-radius: 8px; color: var(--bright); font-size: 18px; line-height: 1.3; }
html[data-look="classic"] .lilt .banner b { color: var(--gold); font-weight: 700; }
html[data-look="classic"] .lilt .banner.set { background: var(--c-tint); border-color: var(--c-tint-line); }

/* Options sheet + speed popover */
html[data-look="classic"] .lilt .lt-scrim { background: rgba(27, 31, 28, .4); }
html[data-look="classic"] .lilt .pop {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 8px;
  box-shadow: 0 10px 32px rgba(27, 31, 28, .2);
}
html[data-look="classic"] .lilt .lt-panel {
  background: var(--c-surface); border-top: 0; border-radius: 12px 12px 0 0;
  box-shadow: 0 -10px 32px rgba(27, 31, 28, .18);
}
@media (min-width: 700px) {
  html[data-look="classic"] .lilt .lt-panel { border: 1px solid var(--c-line); border-radius: 8px; box-shadow: 0 12px 40px rgba(27, 31, 28, .22); }
}
html[data-look="classic"] .lilt .grabber { background: var(--c-line2); border-radius: 3px; }
html[data-look="classic"] .lilt .pop h3,
html[data-look="classic"] .lilt .lt-panel h3 { font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--dim); }
html[data-look="classic"] .lilt .panel-head h2 { font-size: 22px; font-weight: 700; line-height: 1.2; }
html[data-look="classic"] .lilt .sec { border-top: 1px solid var(--c-line); }
html[data-look="classic"] .lilt .c { font-size: 17px; line-height: 1.35; }
html[data-look="classic"] .lilt .row .t { font-size: 19px; }
html[data-look="classic"] .lilt .slider-row small { font-size: 16px; }

/* choices: a picked one is outlined green on a pale green, never brown */
html[data-look="classic"] .lilt .opt,
html[data-look="classic"] .lilt .inst button {
  border: 1.5px solid var(--c-line2); border-radius: 8px; background: var(--c-surface);
  color: var(--bright); box-shadow: none;
}
html[data-look="classic"] .lilt .opt { font-size: 18px; }
html[data-look="classic"] .lilt .inst b { font-size: 18px; font-weight: 700; }
html[data-look="classic"] .lilt .inst small { font-size: 14px; }
@media (hover: hover) { html[data-look="classic"] .lilt .opt:hover, html[data-look="classic"] .lilt .inst button:hover { background: var(--c-surface2); } }
html[data-look="classic"] .lilt .opt:active,
html[data-look="classic"] .lilt .inst button:active { transform: scale(.97); }
html[data-look="classic"] .lilt .opt[aria-pressed="true"],
html[data-look="classic"] .lilt .inst button[aria-pressed="true"] {
  background: var(--c-tint); border-color: var(--green); color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green); font-weight: 700;
}
html[data-look="classic"] .lilt .inst button[aria-pressed="true"] small { color: var(--green); opacity: 1; }
html[data-look="classic"] .lilt .seg { background: var(--c-surface2); border: 1px solid var(--c-line); border-radius: 8px; }
html[data-look="classic"] .lilt .seg button { font-size: 17px; font-weight: 700; color: var(--dim); border-radius: 6px; }
html[data-look="classic"] .lilt .seg button[aria-pressed="true"] { background: var(--c-surface); color: var(--green); box-shadow: 0 1px 4px rgba(27, 31, 28, .16); }
html[data-look="classic"] .lilt .switch { background: var(--c-line2); border: 0; border-radius: 16px; }
html[data-look="classic"] .lilt .switch::after { top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--c-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
html[data-look="classic"] .lilt .switch:checked { background: var(--green); }
html[data-look="classic"] .lilt .switch:checked::after { transform: translateX(26px); background: var(--c-surface); }
html[data-look="classic"] .lilt .lt-stepper button { border: 1.5px solid var(--c-line2); border-radius: 8px; background: var(--c-surface); color: var(--green); box-shadow: none; }
html[data-look="classic"] .lilt .lt-stepper output { font-size: 20px; font-weight: 700; color: var(--bright); }

html[data-look="classic"] .lilt .lt-btn,
html[data-look="classic"] .lilt .banner .lt-btn {
  border: 1.5px solid var(--green); border-radius: 8px; background: var(--c-surface);
  color: var(--green); box-shadow: none; font-size: 17px; font-weight: 700;
}
html[data-look="classic"] .lilt .lt-btn.ghost { background: transparent; border-color: transparent; }
html[data-look="classic"] .lilt .lt-btn.small { font-size: 16px; }

/* the set strip above the music */
html[data-look="classic"] .lilt .sc,
html[data-look="classic"] .lilt .sc-reps,
html[data-look="classic"] .lilt .sc-x { border: 1.5px solid var(--c-line); background: var(--c-surface); }
html[data-look="classic"] .lilt .sc { border-radius: 8px; }
html[data-look="classic"] .lilt .sc-wrap > .sc:not(:last-child) { border-radius: 8px 0 0 8px; }
html[data-look="classic"] .lilt .sc-reps,
html[data-look="classic"] .lilt .sc-x { border-left: 0; }
html[data-look="classic"] .lilt .sc-wrap > :last-child:not(.sc) { border-radius: 0 8px 8px 0; }
html[data-look="classic"] .lilt .sc[aria-current="true"],
html[data-look="classic"] .lilt .sc-wrap:has(.sc[aria-current="true"]) .sc-reps,
html[data-look="classic"] .lilt .sc-wrap:has(.sc[aria-current="true"]) .sc-x { border-color: var(--green); }
html[data-look="classic"] .lilt .sc-n { border-radius: 4px; background: var(--c-surface2); font-size: 16px; font-weight: 700; }
html[data-look="classic"] .lilt .sc[aria-current="true"] .sc-n { background: var(--green); color: var(--c-on-accent); }
html[data-look="classic"] .lilt .sc-name { font-family: var(--font-serif); font-weight: 600; font-size: 18px; line-height: 1.15; }
html[data-look="classic"] .lilt .sc-dots .d { border-radius: 50%; background: var(--c-line); }
html[data-look="classic"] .lilt .sc-dots .d.done { background: var(--green); }
html[data-look="classic"] .lilt .sc-dots .d.now { background: var(--c-brass); }
html[data-look="classic"] .lilt .sc-reps { font-size: 17px; font-weight: 700; color: var(--green); }
html[data-look="classic"] .lilt .sc.sc-hidden .sc-name { color: var(--gold); }
html[data-look="classic"] .lilt .conn button { border: 1.5px dashed var(--c-line2); border-radius: 50%; }
html[data-look="classic"] .lilt .conn button.on { border-color: var(--green); color: var(--green); }
@media (hover: hover) { html[data-look="classic"] .lilt .conn button:hover { border-color: var(--green); color: var(--green); } }
html[data-look="classic"] .lilt .add button { border: 1.5px dashed var(--green); border-radius: 8px; color: var(--green); font-size: 17px; font-weight: 700; }
@media (hover: hover) { html[data-look="classic"] .lilt .add button:hover { border-style: solid; color: var(--green); border-color: var(--green); background: var(--c-tint); } }

/* ---------- the last gold fills: green or brass, never brown ---------- */
html[data-look="classic"] .tab.active .count { background: var(--green); }
html[data-look="classic"] .fp-o-mine { background: var(--c-mine); }
html[data-look="classic"] .fp-o-both { background: var(--green); }
html[data-look="classic"] .fp-o-theirs { background: var(--c-theirs); }
html[data-look="classic"] .gp-ks .chip.active { background: var(--green); color: var(--c-on-accent); border-color: var(--green); }

/* ---------- people + sessions ---------- */
html[data-look="classic"] .frow { border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface); }
@media (hover: hover) { html[data-look="classic"] .frow:hover { border-color: var(--c-line2); background: var(--c-surface2); } }
html[data-look="classic"] .frow-line { font-size: 16px; color: var(--dim); }
html[data-look="classic"] .frow-name { font-size: 20px; font-weight: 700; white-space: normal; line-height: 1.2; } /* a long name wraps rather than "Niamh K…" */

html[data-look="classic"] .fp-av .frow-av { border: 0; border-radius: 50%; background: #163A24; }
/* the pub signs keep their paint: gilt letters on a green board */
html[data-look="classic"] .gp-sign {
  background: #173B27; border: 4px solid #A97C2A; border-radius: 4px;
  box-shadow: inset 0 0 0 3px #173B27, inset 0 0 0 5px #E2B44C, 0 4px 14px rgba(27, 31, 28, .2);
}
html[data-look="classic"] .gp-est,
html[data-look="classic"] .gp-signsub { font-size: 13px; font-weight: 700; letter-spacing: .18em; }
html[data-look="classic"] .gp-est { color: #A9D8B8; }
html[data-look="classic"] .gp-signsub { color: #F3EAD3; }
html[data-look="classic"] .gp-sign .gp-name { font-family: var(--font-serif); font-weight: 700; font-size: 25px; line-height: 1.2; letter-spacing: .04em; color: #F2C94C; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
html[data-look="classic"] .frow-pub {
  background: #173B27; border: 3px solid #A97C2A; border-radius: 4px;
  box-shadow: inset 0 0 0 2px #173B27, inset 0 0 0 4px #E2B44C;
}
@media (hover: hover) { html[data-look="classic"] .frow-pub:hover { background: #1C4630; border-color: var(--c-brass); } }
html[data-look="classic"] .frow-pub .frow-name { font-family: var(--font-serif); font-size: 19px; letter-spacing: .04em; color: #F2C94C; }
html[data-look="classic"] .frow-pub .frow-line { color: #CFE3D6; }

/* sliders: a soft track and a round handle */
html[data-look="classic"] input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: var(--c-line); border: 0; border-radius: 4px; }
html[data-look="classic"] input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -10px; background: var(--green); border: 3px solid var(--c-surface); border-radius: 50%; box-shadow: 0 1px 5px rgba(27, 31, 28, .3); }
html[data-look="classic"] input[type="range"]::-moz-range-track { height: 8px; background: var(--c-line); border: 0; border-radius: 4px; }
html[data-look="classic"] input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; background: var(--green); border: 3px solid var(--c-surface); border-radius: 50%; box-shadow: 0 1px 5px rgba(27, 31, 28, .3); }

/* ---------- settings rows, text boxes, dividers ---------- */

html[data-look="classic"] .tf-abc { font-size: 18px; background: var(--c-surface); border: 1.5px solid var(--c-line2); border-radius: 8px; }
html[data-look="classic"] .tf-abc:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31, 86, 65, .15); }
html[data-look="classic"] .data-row,
html[data-look="classic"] .help-foot,
html[data-look="classic"] .bl-row { border-top: 1px solid var(--c-line); }
html[data-look="classic"] .glist[open] summary { border-bottom: 1px solid var(--c-line); }
html[data-look="classic"] .abc-text { border-top: 1px solid var(--c-line); color: var(--bright); }
html[data-look="classic"] .badge-mine { color: #1F5F8B; }

/* ---------- labels that were sized for the pixel font: readable sizes ---------- */
html[data-look="classic"] .avatar-name,
html[data-look="classic"] .fp-stat span,
html[data-look="classic"] .fp-rank,
html[data-look="classic"] .data-summary,
html[data-look="classic"] .gp-more,
html[data-look="classic"] .glist summary,
html[data-look="classic"] .bl-meta,
html[data-look="classic"] .frow-tag,
html[data-look="classic"] .gset-n,
html[data-look="classic"] .bl-n,
html[data-look="classic"] .bl-tag { font-size: 15px; font-weight: 700; line-height: 1.35; }

html[data-look="classic"] .set-card-title { font-size: 17px; font-weight: 700; line-height: 1.3; }
html[data-look="classic"] .levelup-burst { display: none; } /* no sparkles: the words say it */
html[data-look="classic"] .levelup-title { font-size: 26px; font-weight: 700; text-shadow: none; }
html[data-look="classic"] .levelup-rank { font-size: 19px; font-weight: 700; line-height: 1.3; }
html[data-look="classic"] .bl-title { font-size: 20px; font-weight: 700; }

/* ---------- the screens (ui.css): Classic's values — Night follows through the --c-* palette ---------- */
html[data-look="classic"] {
  --u-r: 8px; --u-r-sm: 8px; --u-pill-r: 999px;
  --u-bw: 1px; --u-bw-thin: 1.5px;
  --u-surface: var(--c-surface); --u-surface2: var(--c-surface2); --u-paper: var(--c-paper);
  --u-line: var(--c-line); --u-line2: var(--c-line2);
  --u-ink: var(--c-ink); --u-muted: var(--c-muted);
  --u-accent: var(--c-accent); --u-accent-ink: var(--c-accent-ink); --u-on-accent: var(--c-on-accent);
  --u-tint: var(--c-tint); --u-tint-ink: var(--c-accent-ink);
  --u-brass-tint: var(--c-brass-tint); --u-brass-ink: var(--c-brass-ink);
  --u-avatar: var(--c-avatar);
  --u-shadow: 0 4px 14px rgba(31, 86, 65, .28);
  --u-font-ui: var(--font-body); --u-font-label: var(--font-body); --u-font-name: var(--font-serif);
  --u-fs: 18px; --u-fs-sm: 16px; --u-fs-name: 20px; --u-fs-label: 16px; --u-fs-h1: 30px; --u-fs-h2: 20px; --u-fs-btn: 16px;
  --u-sep: 1px solid var(--c-line);
  --u-track: var(--c-track);
}
html[data-look="classic"] .view-title { font-size: 30px; line-height: 1.15; }
html[data-look="classic"] .u-name { font-weight: 600; }
html[data-look="classic"] .kg-name, html[data-look="classic"] .saved-set-name { font-weight: 700; }
html[data-look="classic"] .u-h2, html[data-look="classic"] .sheet-title, html[data-look="classic"] .ob-h,
html[data-look="classic"] .me-name, html[data-look="classic"] .fp-name, html[data-look="classic"] .empty-title { font-weight: 700; letter-spacing: 0; }
html[data-look="classic"] .sheet-title, html[data-look="classic"] .me-name, html[data-look="classic"] .fp-name { font-size: 28px; }
html[data-look="classic"] .ob-h { font-size: 28px; line-height: 1.2; }
html[data-look="classic"] .ob-hero .ob-h { font-size: 30px; } /* the serif is for tune names */
html[data-look="classic"] .empty-title { font-size: 20px; }
html[data-look="classic"] .u-label { font-weight: 700; letter-spacing: 0; text-transform: none; }
html[data-look="classic"] .lc-line b { color: var(--c-ink); }
html[data-look="classic"] .lc-fill { background: var(--c-brass); }
html[data-look="classic"] .u-seg { background: var(--c-track); border: 0; padding: 4px; }
html[data-look="classic"] .u-seg > button[aria-selected="true"],
html[data-look="classic"] .u-seg > button[aria-checked="true"] { background: var(--c-surface); color: var(--c-ink); box-shadow: 0 1px 3px rgba(27, 31, 28, .14); }
html[data-look="classic"][data-night] .u-seg > button[aria-selected="true"],
html[data-look="classic"][data-night] .u-seg > button[aria-checked="true"] { background: var(--c-surface2); color: var(--c-accent-ink); }
html[data-look="classic"] .u-face { border-color: var(--c-surface); }

html[data-look="classic"] .u-learn { border-radius: 8px; padding: 8px 14px; min-height: 44px; }
html[data-look="classic"] .u-got { border-radius: 8px; padding: 8px 14px; min-height: 44px; }

/* the header: one slim line — the shamrock and name, you on the right */
html[data-look="classic"] .hud { padding: 10px 16px; }
html[data-look="classic"] .hud-top { margin: 0 auto; }
html[data-look="classic"] .logo-shamrock { width: 34px; height: 34px; flex-basis: 34px; }
html[data-look="classic"] .logo-text { font-size: 22px; white-space: nowrap; }
html[data-look="classic"] .hud-me { border: 0; border-radius: 8px; }
html[data-look="classic"] .hud-signin { border-radius: 8px; }
html[data-look="classic"] .tab .tab-ico { width: 24px; height: 24px; }
@media (max-width: 600px) {
  html[data-look="classic"] .tabs { padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); }
  html[data-look="classic"] .tab { gap: 3px; }
  html[data-look="classic"] .tab .tab-lbl { font-size: 14px; }
}
@media (min-width: 1000px) {
  html[data-look="classic"] body:not(.native) .hud { background: var(--c-front); border-right: 5px double var(--c-front-line); padding: 26px 16px 16px; }
  html[data-look="classic"] body:not(.native) .tab { font-size: 18px; color: var(--c-front-ink); }
  html[data-look="classic"] body:not(.native) .tab.active { background: var(--c-front-tint); color: var(--c-gilt); }
  html[data-look="classic"] body:not(.native) .sidecard { background: rgba(255, 255, 255, .07); color: #FFFFFF; border-color: rgba(255, 255, 255, .16); }
  html[data-look="classic"] body:not(.native) .sidecard-tx span { color: var(--c-front-ink); }
  html[data-look="classic"] body:not(.native) .hud-btns { margin-bottom: 22px; } /* Sign in, then a gap before the menu */
  html[data-look="classic"] body:not(.native) .tab .tab-lbl { font-size: 18px; }
}

/* pages that open over everything */
html[data-look="classic"] .onboard { background: var(--c-paper); }
html[data-look="classic"] .ob-inst { border-color: var(--c-line2); }
html[data-look="classic"] .ob-inst[aria-pressed="true"] { border-color: var(--c-accent); background: var(--c-tint); }
html[data-look="classic"] .btn-ghost { border-color: transparent; color: var(--c-accent-ink); }
html[data-look="classic"] .ob-foot .btn-ghost, html[data-look="classic"] .fp-actions .btn { border-radius: 8px; }

/* the tune page's line under the name: plain words, "Jig · A dorian · AAB · 32 bars · 6/8" */
html[data-look="classic"] .detail-meta { gap: 0; flex-wrap: wrap; }
html[data-look="classic"] .detail-meta .badge { background: none; border: 0; padding: 0; min-height: 0; font-size: 18px; font-weight: 400; color: var(--c-muted); }
html[data-look="classic"] .detail-meta .badge ~ .badge::before { content: '·'; margin: 0 8px; }
/* the tune's parts and bars get a line of their own, so a wrap never starts a line with a dot */
html[data-look="classic"] .detail-meta .badge-form { flex-basis: 100%; }
html[data-look="classic"] .detail-meta .badge ~ .badge-form::before { content: none; }
html[data-look="classic"] #detail-fame { display: none; }
html[data-look="classic"] .detail-status .u-pill { min-height: 36px; padding: 2px 14px; }

/* a session's page: overlapped round faces, a soft bar, the list without a box */
html[data-look="classic"] .gp-faces { padding-left: 8px; }
html[data-look="classic"] .gp-faces .frow-av { width: 40px; height: 40px; margin-left: -8px; border: 2px solid var(--c-surface); border-radius: 50%; background: var(--c-avatar); }

html[data-look="classic"] .gp-more { font-size: 15px; font-weight: 700; color: var(--c-muted); }
html[data-look="classic"] .fp-obar { height: 12px; border: 0; border-radius: 6px; overflow: hidden; background: var(--c-track); }
html[data-look="classic"] .gp-bar-rest { background: var(--c-track); }
html[data-look="classic"] .glist { border: 0; background: none; margin-bottom: 14px; }
html[data-look="classic"] .glist summary { padding: 12px 0; font-size: 17px; font-weight: 700; color: var(--c-ink); }
html[data-look="classic"] .glist summary b { font-size: 16px; color: var(--c-muted); }
html[data-look="classic"] .gp-ks .chip { min-width: 52px; }

/* a friend's profile: three numbers to tap, the shared-tunes bar */
html[data-look="classic"] .fp-stat { min-height: 74px; border: 1.5px solid var(--c-line2); border-radius: 8px; background: var(--c-surface); gap: 2px; }
html[data-look="classic"] .fp-stat b { font-size: 26px; font-weight: 700; color: var(--c-ink); }
html[data-look="classic"] .fp-stat[data-ff="both"] b { color: var(--c-accent-ink); }
html[data-look="classic"] .fp-stat span { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--c-muted); }
@media (hover: hover) { html[data-look="classic"] .fp-stat:hover { border-color: var(--c-accent); } }
html[data-look="classic"] .fp-stat.active { border: 2.5px solid var(--c-brass); background: var(--c-brass-tint); }
html[data-look="classic"] .fp-stat.active b, html[data-look="classic"] .fp-stat.active span { color: var(--c-brass-ink); }
html[data-look="classic"] .fp-rank { font-size: 17px; font-weight: 400; color: var(--c-muted); }
html[data-look="classic"] .fp-olabel { font-size: 18px; color: var(--c-ink); }
html[data-look="classic"] .fp-olabel b { font-weight: 700; color: var(--c-ink); }
html[data-look="classic"] .fp-olegend { font-size: 15px; color: var(--c-muted); }
html[data-look="classic"] .fp-olegend span:nth-child(1), html[data-look="classic"] .fp-olegend span:nth-child(3) { color: var(--c-muted); }
html[data-look="classic"] .fp-olegend span:nth-child(2) { color: var(--c-accent-ink); font-weight: 700; }
html[data-look="classic"] .fp-actions .btn:disabled { opacity: 1; color: var(--c-accent-ink); border-color: var(--c-accent); background: var(--c-surface); }

/* Account: your data, tucked in a soft drawer */
html[data-look="classic"] .data-drawer { border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface); margin-top: 16px; }
html[data-look="classic"] .data-summary { padding: 14px 16px; font-size: 17px; font-weight: 700; color: var(--c-ink); }
html[data-look="classic"] .data-drawer .data-row { margin: 0; padding: 4px 16px 16px; border-top: 0; justify-content: flex-start; }
html[data-look="classic"] .trust-status { border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface2); }

/* the set player: three sets to pick from, the surprise set */
html[data-look="classic"] .set-card { border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface); box-shadow: 0 1px 2px rgba(27, 31, 28, .05); padding: 14px 16px; }
@media (hover: hover) { html[data-look="classic"] .set-card:hover { border-color: var(--c-accent); background: var(--c-surface); } }
html[data-look="classic"] .set-card:active { transform: scale(.99); box-shadow: none; }
html[data-look="classic"] .set-card-title { color: var(--c-brass-ink); }
html[data-look="classic"] .set-card-row { font-family: var(--font-serif); font-weight: 600; font-size: 20px; color: var(--c-ink); }
@media (hover: hover) { html[data-look="classic"] .set-card:hover .set-card-row { color: var(--c-ink); } }

html[data-look="classic"] #sp-end { background: transparent; color: var(--c-red); border: 1.5px solid var(--c-red-line); }
@media (hover: hover) { html[data-look="classic"] #sp-end:hover { background: var(--c-surface2); } }
html[data-look="classic"] .setplayer-head .sub { color: var(--c-muted); font-size: 15px; }
html[data-look="classic"] .bl-title { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--c-ink); }
html[data-look="classic"] .bl-clock { font-size: 20px; font-weight: 700; color: var(--c-ink); }
html[data-look="classic"] .bl-list { border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface); overflow: hidden; }
html[data-look="classic"] .bl-row { border-top: 1px solid var(--c-line); }
html[data-look="classic"] .bl-now-row { background: var(--c-brass-tint); }
html[data-look="classic"] .bl-tag { font-size: 13px; font-weight: 700; border-width: 1.5px; border-radius: 4px; }
html[data-look="classic"] .bl-now-row .bl-tname { font-family: var(--font-serif); font-weight: 700; font-size: 28px; color: var(--c-ink); }
html[data-look="classic"] .bl-next-row .bl-tname { font-family: var(--font-serif); font-weight: 600; font-size: 24px; }
html[data-look="classic"] .bl-incipit { background: var(--c-sheet); color: var(--c-sheet-ink); border: 1px solid var(--c-line); border-radius: 6px; }
html[data-look="classic"] .bl-hidden-row .bl-q { color: var(--c-muted); }
html[data-look="classic"] .bl-hup { font-size: 19px; letter-spacing: 0; border-radius: 8px; }
html[data-look="classic"] .bl-done .bl-title { font-size: 26px; }
@media (max-width: 360px) {
  html[data-look="classic"] .hud { padding: 8px 12px; }
  html[data-look="classic"] .logo-text { font-size: 19px; }
  html[data-look="classic"] .logo { gap: 8px; }
  html[data-look="classic"] .hud-signin { padding: 8px 12px; }
  html[data-look="classic"] .hud-me { width: 42px; height: 42px; }
}

/* saved sets: a row each, the name in serif, the tunes in a line, a round play button */
html[data-look="classic"] .saved-set { background: transparent; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; padding: 12px 2px; margin: 0; }
html[data-look="classic"] .saved-set:last-child { border-bottom: 1px solid var(--c-line); }
html[data-look="classic"] .saved-set-name { font-family: var(--font-serif); font-weight: 700; font-size: 20px; color: var(--c-ink); }
html[data-look="classic"] .saved-set-head { margin-bottom: 2px; }
html[data-look="classic"] .saved-set-lineup { font-size: 16px; line-height: 1.45; color: var(--c-muted); margin: 0 0 4px; }
html[data-look="classic"] .saved-set-lineup .tarrow { color: var(--c-line2); }
html[data-look="classic"] .saved-sort-row .chip { border-radius: 22px; }

/* the iPhone app draws edge to edge: the header reaches up under the status bar, the tabs down to the home bar */
html[data-look="classic"] body.native .hud { padding-top: calc(6px + env(safe-area-inset-top, 0px)); }

/* the bottom tabs: the picked one gets a soft background, its label stays on the same line as the rest */
@media (max-width: 600px) {
  html[data-look="classic"] .tab.active { padding: 4px 2px; min-height: 54px; transform: none; }
  /* ▶ on the tune cards (Every tune) on phones too */
  html[data-look="classic"] .card-play { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; padding: 0; align-self: flex-end; }
}
html[data-look="classic"] .top-btn:active { transform: translateX(-50%) translateY(1px); }
html[data-look="classic"] .top-btn { border-radius: 22px; box-shadow: 0 4px 14px rgba(27, 31, 28, .18); }

/* ---------- a code to hold up across the table (Show my code, a session's code) ---------- */
html[data-look="classic"] .share-code {
  font-family: var(--font-body); font-weight: 700; color: var(--c-accent-ink); background: var(--c-surface);
  border: 1px solid var(--c-line2); border-radius: 8px; padding: 10px 14px 8px 24px; letter-spacing: .35em;
}
html[data-look="classic"] .mycode-name { font-family: var(--font-serif); font-size: 30px; font-weight: 700; line-height: 1.25; color: var(--c-ink); margin: 6px 44px 18px; }
html[data-look="classic"] .mycode-qr { border: 1px solid var(--c-line2); border-radius: 8px; padding: 14px; box-shadow: 0 1px 3px var(--c-shadow); }
html[data-look="classic"] .mycode-hint { font-size: 18px; line-height: 1.5; color: var(--c-muted); }

/* ---------- fewer boxes: sections sit on the page, lists are rows split by thin lines (like My Tunes).
   A box is kept only where it marks one thing to tap: the level card, Keep going, a settings group. ---------- */
html[data-look="classic"] #quest-session,
html[data-look="classic"] #random-panel,
html[data-look="classic"] .gp-head { background: transparent; border: 0; border-radius: 0; padding-left: 0; padding-right: 0; }
html[data-look="classic"] #quest-session { padding-top: 0; }
html[data-look="classic"] .q-head { font-family: var(--font-serif); font-size: 25px; font-weight: 700; } /* section headings, set like the page title */
/* pale green = "from your people": the group's section sits on a band, edge to edge on a phone (white = your own tunes) */
html[data-look="classic"] #quest-session { background: var(--c-tint); margin: 28px -14px 6px; padding: 6px 14px 14px; }
html[data-look="classic"] #quest-session .q-headrow { border-top: 0; margin-top: 0; }
html[data-look="classic"] #quest-session .u-row { border-color: var(--c-tint-line); }
html[data-look="classic"] #quest-session .u-row:last-child { border-bottom: 0; }
html[data-look="classic"] #quest-session + #quest-mine-label { border-top: 0; margin-top: 20px; padding-top: 6px; }
@media (min-width: 601px) { html[data-look="classic"] #quest-session { margin-left: 0; margin-right: 0; padding-left: 18px; padding-right: 18px; border-radius: 8px; } }
html[data-look="classic"] #random-panel { padding-top: 0; }
html[data-look="classic"] .gp-head { padding-top: 4px; }
html[data-look="classic"] #browse-list, html[data-look="classic"] #tunepick-list,
html[data-look="classic"] #friends-list, html[data-look="classic"] #invites-list, html[data-look="classic"] #invite-list { gap: 0; }
html[data-look="classic"] .list > .card { background: transparent; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; padding: 14px 2px; }
@media (hover: hover) { html[data-look="classic"] .list > .card:hover { background: var(--c-surface2); border-color: var(--c-line); box-shadow: none; } }
html[data-look="classic"] .frow:not(.frow-pub) { background: transparent; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; margin-bottom: 0; padding: 12px 2px; }
@media (hover: hover) { html[data-look="classic"] .frow:not(.frow-pub):hover { background: var(--c-surface2); border-color: var(--c-line); } }
html[data-look="classic"] .frow-wrap { margin-bottom: 0; border-bottom: 1px solid var(--c-line); }
html[data-look="classic"] .frow-wrap .frow { border-bottom: 0; }
html[data-look="classic"] .u-pill, html[data-look="classic"] .fp-tag.u-tag { border-radius: 4px; } /* tags, not pills */

/* ---------- the tunebook type and the pub front, continued ---------- */
html[data-look="classic"] .view-title { font-family: var(--font-serif); font-weight: 700; } /* page names set like a book's */
html[data-look="classic"] .hud-signin { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .55); }
@media (hover: hover) { html[data-look="classic"] .hud-signin:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; border-color: #FFFFFF; } }
/* the iPhone app: the strip under the clock is pub green on every page, so the clock is always light */
html[data-look="classic"] body.native .detail::before, html[data-look="classic"] body.native .well::before,
html[data-look="classic"] body.native .syncsheet::before, html[data-look="classic"] body.native .tuneform::before,
html[data-look="classic"] body.native .setplayer::before { background: var(--c-front); }
html[data-look="classic"] body.native .onboard::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px);
  background: var(--c-front); z-index: 7; pointer-events: none;
}
/* a group's sign: its name painted in uncial (one weight; no fake bold) */
html[data-look="classic"] .gp-sign .gp-name, html[data-look="classic"] .frow-pub .frow-name,
html[data-look="classic"] .ob-sign-name { font-family: var(--font-celtic); font-weight: 400; letter-spacing: .02em; text-transform: none; }
html[data-look="classic"] .gp-sign .gp-name { font-size: 27px; line-height: 1.25; }
html[data-look="classic"] .frow-pub .frow-name { font-size: 21px; }