/* =====================================================================================
   WaxScan design tokens — "Studio Paper". Every colour, size, space, radius, shadow and
   timing used by the app lives here; component rules below only reference these.
   Light paper is the default; the camera screen re-declares the colour tokens as a dark
   scope (see "Dark scope" below) because it always sits over a live camera feed.
   ===================================================================================== */

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-latin.woff2") format("woff2");
  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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}

:root {
  /* ---- Color: paper (light) ---- */
  --paper-top: #f6f3ea;
  --paper-mid: #eceee9;
  --paper-low: #e2e8ea;
  --paper: linear-gradient(170deg, var(--paper-top) 0%, var(--paper-mid) 40%, var(--paper-low) 100%);
  --card: #ffffff;                            /* section cards, dialogs */
  --card-2: #f1efe9;                          /* raised fills inside cards: pills, chips, inputs */
  --ink: #121212;                             /* primary buttons, play buttons, the now-playing bar */
  --placeholder: #e7e3da;                     /* missing cover art */
  --black: #000000;                           /* video frames */
  --white: #ffffff;

  /* ---- Color: lines ---- */
  --line: rgba(18, 18, 18, 0.08);

  /* ---- Color: text (all ≥4.5:1 on paper, card and card-2) ---- */
  --text: #121212;
  --text-soft: #2c2b29;                       /* long-form copy (About this record) */
  --muted: #615f5a;                           /* metadata, captions, mono labels */

  /* ---- Color: buttons ---- */
  --btn-bg: var(--ink);                       /* primary pill */
  --btn-ink: #ffffff;                         /* text on the primary pill */

  /* ---- Color: brand & state ---- */
  --accent: #e8452c;                          /* red: progress, played ticks, hold ring — graphics only (3.9:1) */
  --accent-text: #b8341c;                     /* red as text (≥4.8:1) */
  --tick: #84827d;                            /* unplayed ticks, switch off: graphics, ≥3:1 on every paper surface */
  --good: #1a6e37;
  --warn: #8a5a00;
  --bad: #b4401f;
  --youtube: #b8341c;                         /* YouTube source tag */

  /* ---- Color: scanner (camera screen, always dark) ---- */
  --glass: rgba(28, 26, 24, 0.62);
  --scrim-dialog: rgba(18, 18, 18, 0.45);
  --scrim-guide: rgba(0, 0, 0, 0.28);
  --scanner-glow: #1d1915;
  --scanner-edge: #070606;
  --guide-ring: rgba(255, 255, 255, 0.75);
  --guide-spindle: rgba(255, 255, 255, 0.85);
  --spinner-track: rgba(18, 18, 18, 0.15);
  --spinner-head: var(--ink);

  /* ---- Type ---- */
  --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Roboto Mono", monospace;
  --fs-11: 11px;
  --fs-11-5: 11.5px;
  --fs-12: 12px;
  --fs-12-5: 12.5px;
  --fs-13: 13px;
  --fs-13-5: 13.5px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-30: 30px;
  --fs-44: 44px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --lh-tight: 1.02;
  --lh-snug: 1.15;
  --lh-base: 1.4;
  --lh-relaxed: 1.55;
  --ls-display: -0.045em;                     /* big headlines */
  --ls-heading: -0.02em;
  --ls-mono: 0.01em;

  /* ---- Space ---- */
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-60: 60px;

  /* ---- Radius ---- */
  --radius: 20px;                             /* cards */
  --radius-2: 2px;
  --radius-6: 6px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ---- Borders & strokes ---- */
  --border-hairline: 1px;
  --border-select: 2px;                       /* chosen price card */
  --border-spinner: 2.5px;
  --stroke-icon: 2;
  --stroke-icon-bold: 2.4;
  --stroke-tick: 2;                           /* dial ticks, in dial units (viewBox 200) */

  /* ---- Sizes ---- */
  --size-icon: 22px;
  --size-icon-sm: 14px;
  --size-dot: 8px;
  --size-spindle: 10px;
  --size-spinner: 18px;
  --size-eq: 18px;
  --size-eq-bar: 3px;
  --size-bar: 3px;
  --size-play: 34px;
  --size-banner-icon: 40px;
  --size-control: 44px;
  --size-control-sm: 38px;
  --size-icon-sm-2: 18px;
  --size-icon-md: 20px;
  --size-close: 38px;                         /* sheet close button */
  --size-switch-w: 50px;
  --size-switch-h: 30px;
  --size-knob: 24px;
  --size-thumb: 52px;
  --size-control-lg: 56px;
  --size-cover: 112px;
  --size-pos: 24px;
  --size-ticks: 64px;                         /* tick strip height */
  --size-video: 200px;                        /* the YouTube player: YouTube's minimum size */
  --nowplaying-height: 64px;

  /* ---- Layout ---- */
  --content-max: 640px;
  --nowplaying-max: 616px;
  --chrome-max: 520px;
  --dialog-max: 420px;
  --guide-size: min(70vw, 40vh, 320px);     /* the scan circle inside the camera window */
  --guide-top: 54%;
  --panel-height: 104px;                      /* paper control panel under the camera: the instruction */
  --tabbar-height: 76px;                      /* Scan · My collection */
  --message-height: 64px;
  --radius-cam: 30px;
  --sheet-bottom-clearance: 110px;
  --banner-top: 66px;
  --dialog-top: 70px;

  /* ---- Effects ---- */
  --shadow-cover: 0 14px 30px rgba(40, 30, 30, 0.18);
  --shadow-card: 0 1px 0 rgba(18, 18, 18, 0.04);
  --shadow-float: 0 12px 30px rgba(18, 18, 18, 0.28);
  --shadow-pill: 0 6px 20px rgba(40, 50, 60, 0.08);
  --shadow-scrim: 0 0 0 100vmax var(--scrim-guide);
  --blur-6: 6px;
  --blur-10: 10px;
  --blur-14: 14px;
  --opacity-disabled: 0.4;
  --press-scale: 0.96;

  /* ---- Motion ---- */
  --dur-quick: 0.2s;
  --dur-ring: 0.22s;
  --dur-sheet: 0.28s;
  --dur-spinner: 0.8s;
  --dur-eq: 0.9s;
  --dur-scan: 1.4s;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --sheet-rise: 40px;

  /* ---- Layers ---- */
  --z-banner: 5;
  --z-sheet: 10;
  --z-nowplaying: 11;
  --z-tabview: 3;                             /* the collection, over the scanner */
  --z-tabbar: 4;
  --z-welcome: 20;

  /* ---- Device ---- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

/* Dark scope: the camera window. Same token names, dark values. */
.cam {
  --card: #1a1816;
  --card-2: #2a2725;
  --line: rgba(255, 255, 255, 0.12);
  --text: #f4efe9;
  --text-soft: #e9e3dc;
  --muted: #b5aea6;
  --btn-bg: #ffffff;
  --btn-ink: #121212;
  --spinner-track: rgba(255, 255, 255, 0.25);
  --spinner-head: #ffffff;
  /* Text and state colours lightened for dark grounds (all ≥5.8:1 on the dark card and card-2). */
  --accent-text: #ff7a5c;
  --youtube: #ff7a5c;
  --good: #5fd38a;
  --warn: #f0b54a;
  --bad: #ff8a6e;
  color: var(--text);
  color-scheme: dark;
}
/* The now-playing bar is an ink pill over paper. */
#nowplaying { --text: #ffffff; --muted: #b9b6b0; color: var(--text); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Paper, not dark: iOS home-screen apps can show the root background in a strip at the bottom. */
html, body { margin: 0; height: 100%; background: var(--paper-low); color: var(--text); overscroll-behavior: none; }
body { font: var(--fw-regular) var(--fs-16) / var(--lh-base) var(--font-sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { width: var(--size-icon); height: var(--size-icon); fill: none; stroke: currentColor; stroke-width: var(--stroke-icon); stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: var(--border-select) solid var(--text); outline-offset: 2px; }

/* ---------- Utilities ---------- */

.mono { font-family: var(--font-mono); letter-spacing: var(--ls-mono); }
.flush { margin: 0; }
.center { text-align: center; }
.accent-text { color: var(--accent-text); }
.warn-text { color: var(--warn); }
.loading { display: flex; gap: var(--space-10); align-items: center; }
.card-action { margin: var(--space-12) 0 0; }
.caption-note { font-size: var(--fs-12); margin: var(--space-8) 0 0; font-family: var(--font-mono); }
.caption-note.loose { margin-top: var(--space-10); }
.sub-note { margin: var(--space-4) 0 0; }
.lead-in { margin: 0 0 var(--space-10); }
.status-line { margin: var(--space-8) 0 0; }
/* Fine print: page disclaimers and credits, the same everywhere (welcome note, Settings credits). */
.fine-print { margin: var(--space-18) 0 0; text-align: center; font: var(--fw-regular) var(--fs-11) / var(--lh-base) var(--font-sans); color: var(--muted); text-wrap: balance; }

svg.stroke, .track .icon svg.stroke, #nowplaying button svg.stroke { fill: none; stroke: currentColor; stroke-width: var(--stroke-icon); }
svg.stroke-bold, #nowplaying button svg.stroke-bold { fill: none; stroke: currentColor; stroke-width: var(--stroke-icon-bold); }

/* ---------- Scanner: camera window (dark) over a paper control panel ---------- */

#scanner { position: fixed; inset: 0; overflow: hidden; background: var(--paper); }
.cam { position: absolute; top: var(--space-8); left: var(--space-8); right: var(--space-8); bottom: calc(var(--panel-height) + var(--tabbar-height) + var(--safe-bottom)); border-radius: var(--radius-cam); overflow: hidden; background: radial-gradient(circle at 50% 40%, var(--scanner-glow), var(--scanner-edge) 70%); cursor: pointer; }
.cam:focus-visible { outline-offset: -4px; outline-color: var(--white); }
#video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#fallback { position: absolute; left: 0; right: 0; bottom: calc(var(--size-control-sm) + var(--space-28)); text-align: center; color: var(--muted); padding: 0 var(--space-24); }
.fallback-title { font-weight: var(--fw-bold); color: var(--text); margin: 0 0 var(--space-4); }
#fallback p { margin: 0; font-size: var(--fs-14); }

#guide { position: absolute; left: 50%; top: var(--guide-top); width: var(--guide-size); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; border-radius: var(--radius-round); box-shadow: var(--shadow-scrim); }
/* Camera off: a smaller dial, higher up, so the explanation fits beneath it. */
.cam:has(#fallback:not([hidden])) #guide { top: 40%; width: min(56vw, 30vh, 260px); }
#guide .dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#guide .dial line { stroke: var(--guide-ring); stroke-width: var(--stroke-tick); stroke-linecap: round; }
#guide .dial line.on { stroke: var(--accent); }
#scanner.busy #guide .dial { animation: spin var(--dur-scan) linear infinite; }
#scanner.busy #guide .dial line.sweep { stroke: var(--accent); }
#guide .spindle { position: absolute; left: 50%; top: 50%; width: var(--size-spindle); height: var(--size-spindle); border-radius: var(--radius-round); background: var(--guide-spindle); transform: translate(-50%, -50%); }
@keyframes spin { to { transform: rotate(360deg); } }

.readout { position: absolute; top: calc(var(--safe-top) + var(--space-10)); left: var(--space-16); right: var(--space-10); display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); font: var(--fw-regular) var(--fs-12-5) var(--font-mono); color: var(--white); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); pointer-events: none; }
.readout button { pointer-events: auto; }
.round { width: var(--size-control); height: var(--size-control); border-radius: var(--radius-round); border: 0; display: grid; place-items: center; background: var(--glass); color: var(--white); backdrop-filter: blur(var(--blur-14)); -webkit-backdrop-filter: blur(var(--blur-14)); cursor: pointer; }
.round.small { width: var(--size-control-sm); height: var(--size-control-sm); }
.round.small svg { width: var(--size-icon-sm-2); height: var(--size-icon-sm-2); }

.panel { position: absolute; left: 0; right: 0; bottom: calc(var(--tabbar-height) + var(--safe-bottom)); height: var(--panel-height); padding: var(--space-18) var(--space-24) 0; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: var(--chrome-max); margin: 0 auto; }
#message { min-height: var(--message-height); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
#message b { font-size: var(--fs-24); font-weight: var(--fw-black); letter-spacing: var(--ls-display); line-height: var(--lh-snug); display: flex; align-items: center; gap: var(--space-10); }
#message span.sub { color: var(--muted); font-size: var(--fs-14); line-height: var(--lh-snug); }
#message .tag { font: var(--fw-regular) var(--fs-12) var(--font-mono); color: var(--accent-text); }
#message.error b { font-size: var(--fs-18); letter-spacing: var(--ls-heading); }
#message .x { border: 0; background: none; color: var(--muted); font-size: var(--fs-13); text-decoration: underline; padding: var(--space-4); }
.spinner { width: var(--size-spinner); height: var(--size-spinner); border-radius: var(--radius-round); border: var(--border-spinner) solid var(--spinner-track); border-top-color: var(--spinner-head); animation: spin var(--dur-spinner) linear infinite; flex: none; }
/* Search and Photo, in the bottom corners of the camera window. */
.cam-tools { position: absolute; left: var(--space-12); right: var(--space-12); bottom: var(--space-12); display: flex; justify-content: space-between; pointer-events: none; }
.cam-tools button { pointer-events: auto; }
#scanner.busy .cam-tools, #scanner.busy ~ .tabbar { opacity: var(--opacity-disabled); pointer-events: none; }

/* Tab bar: Scan · My collection. The selected tab is the white pill; the other is plain text. */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar); height: calc(var(--tabbar-height) + var(--safe-bottom)); padding: 0 var(--space-24) var(--safe-bottom); display: flex; align-items: center; justify-content: center; gap: var(--space-12); background: var(--paper-low); }
.tab { display: flex; align-items: center; gap: var(--space-8); border: 0; border-radius: var(--radius-pill); background: transparent; padding: var(--space-14) var(--space-24); font: var(--fw-bold) var(--fs-16) var(--font-sans); color: var(--muted); transition: background var(--dur-quick), color var(--dur-quick); }
.tab svg { width: var(--size-icon-md); height: var(--size-icon-md); }
.tab[aria-selected="true"] { background: var(--card); color: var(--text); box-shadow: var(--shadow-pill); }
.sheet.tabview { z-index: var(--z-tabview); animation: none; }

.primary { border: 0; border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-ink); font-weight: var(--fw-bold); padding: var(--space-16) var(--space-20); width: 100%; font-size: var(--fs-16); }
.primary:active { transform: scale(var(--press-scale)); }
.primary:disabled { opacity: var(--opacity-disabled); }

/* ---------- Welcome (first launch) ---------- */

#welcome { position: fixed; inset: 0; z-index: var(--z-welcome); background: var(--paper); display: flex; flex-direction: column; padding: calc(var(--safe-top) + var(--space-20)) var(--space-24) calc(var(--safe-bottom) + var(--space-20)); overflow-y: auto; }
#welcome > * { width: 100%; max-width: var(--chrome-max); margin-left: auto; margin-right: auto; }
.welcome-brand { margin: 0; font-size: var(--fs-20); font-weight: var(--fw-black); letter-spacing: var(--ls-display); }
.welcome-main { margin-top: auto; padding-top: var(--space-36); }
#welcome h1 { margin: 0; font-size: var(--fs-44); line-height: var(--lh-tight); font-weight: var(--fw-black); letter-spacing: var(--ls-display); text-wrap: balance; }
.welcome-lede { margin: var(--space-14) 0 0; font-size: var(--fs-17); line-height: var(--lh-base); color: var(--text-soft); text-wrap: pretty; }
.welcome-list { list-style: none; margin: var(--space-60) 0 0; padding: 0; display: grid; gap: var(--space-14); }
.welcome-list li { display: flex; gap: var(--space-14); align-items: center; }
.welcome-list b { display: block; font-weight: var(--fw-bold); }
.welcome-list small { display: block; color: var(--muted); font-size: var(--fs-14); line-height: var(--lh-snug); margin-top: var(--space-2); }
.welcome-icon { flex: none; width: var(--size-control); height: var(--size-control); border-radius: var(--radius-14); display: grid; place-items: center; background: var(--card); box-shadow: var(--shadow-pill); }
.welcome-icon svg { width: var(--size-icon-md); height: var(--size-icon-md); }
.welcome-icon svg.fill { fill: currentColor; stroke: none; }
.welcome-actions { margin-top: auto; padding-top: var(--space-32); display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.welcome-actions .pill.ghost { color: var(--text); text-decoration: underline; }
.welcome-actions .fine-print { margin-top: var(--space-6); }

/* ---------- Sheets (paper) ---------- */

.sheet { position: fixed; inset: 0; z-index: var(--z-sheet); background: var(--paper); display: flex; flex-direction: column; animation: up var(--dur-sheet) var(--ease-out); }
@keyframes up { from { transform: translateY(var(--sheet-rise)); opacity: 0; } }
.sheet-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); padding: calc(var(--safe-top) + var(--space-10)) var(--space-20) var(--space-10); }
.sheet-bar h2 { margin: 0; font-size: var(--fs-28); font-weight: var(--fw-black); letter-spacing: var(--ls-display); }
.sheet-bar .eyebrow { font: var(--fw-regular) var(--fs-12) var(--font-mono); color: var(--muted); }
.sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--space-4) var(--space-20) calc(var(--safe-bottom) + var(--sheet-bottom-clearance)); width: 100%; max-width: var(--content-max); margin: 0 auto; }
.pill { border: 0; border-radius: var(--radius-pill); padding: var(--space-10) var(--space-16); font-weight: var(--fw-bold); background: var(--card); color: var(--text); box-shadow: var(--shadow-pill); }
.pill.back { display: inline-flex; align-items: center; gap: var(--space-4); padding-left: var(--space-12); }
.pill.back svg { width: var(--size-icon-sm-2); height: var(--size-icon-sm-2); }
.pill.ghost { background: transparent; box-shadow: none; color: var(--muted); }
.card .pill { background: var(--ink); color: var(--white); box-shadow: none; }

.card { background: var(--card); border-radius: var(--radius); padding: var(--space-16) var(--space-18); margin-top: var(--space-14); box-shadow: var(--shadow-card); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-10); margin-bottom: var(--space-10); }
.card-head h3 { margin: 0; font: var(--fw-regular) var(--fs-12) var(--font-mono); letter-spacing: var(--ls-mono); color: var(--muted); }
.card-head small { color: var(--muted); font: var(--fw-regular) var(--fs-11-5) var(--font-mono); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-13); }

/* Record header: cover with mono pressing details beside it, then the title full width. */
.hero { display: block; }
.hero-top { display: flex; gap: var(--space-16); align-items: flex-end; }
.cover { width: var(--size-cover); height: var(--size-cover); flex: none; border-radius: var(--radius-14); object-fit: cover; background: radial-gradient(circle, var(--accent) 0 17%, var(--placeholder) 18% 100%); box-shadow: var(--shadow-cover); }
.hero-tags { display: flex; flex-direction: column; gap: var(--space-6); font: var(--fw-regular) var(--fs-12) / var(--lh-snug) var(--font-mono); color: var(--muted); min-width: 0; }
.hero-tags span { overflow-wrap: anywhere; }
.hero h1 { font-size: var(--fs-30); line-height: var(--lh-tight); font-weight: var(--fw-black); letter-spacing: var(--ls-display); margin: var(--space-18) 0 0; text-wrap: balance; }
.hero .artist { margin-top: var(--space-8); font-weight: var(--fw-semibold); font-size: var(--fs-17); color: var(--text); }
.hero .artist span { color: var(--muted); font-weight: var(--fw-medium); }

.track { display: flex; align-items: center; gap: var(--space-14); padding: var(--space-12) 0; border: 0; background: none; width: 100%; text-align: left; border-top: var(--border-hairline) solid var(--line); }
.track:first-of-type { border-top: 0; }
.track .pos { width: var(--size-pos); flex: none; font: var(--fw-medium) var(--fs-13) var(--font-mono); color: var(--text); }
.track.current .pos { color: var(--accent-text); }
.track .name { flex: 1; min-width: 0; }
.track .name span { display: block; font-size: var(--fs-16); font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: var(--lh-snug); }
.track .name .byline { display: block; font-size: var(--fs-12); margin-top: var(--space-2); font-weight: var(--fw-medium); }
.track .dur { font: var(--fw-regular) var(--fs-12-5) var(--font-mono); color: var(--muted); }
.track .icon { width: var(--size-play); height: var(--size-play); border-radius: var(--radius-round); display: grid; place-items: center; background: var(--ink); color: var(--white); flex: none; }
.track .icon svg { width: var(--size-icon-sm); height: var(--size-icon-sm); fill: currentColor; stroke: none; }
.track .icon.neutral { background: var(--card-2); color: var(--text); }
.track[disabled] { cursor: default; }
.track[disabled] .name span { color: var(--muted); }
.track[disabled] .icon { background: var(--card-2); color: var(--muted); }
.bar { display: none; }                     /* replaced by the tick strip */

/* Tick strip: "beat" pattern — every fourth tick taller. Red = played. Tap or drag to jump. */
.ticks-block { margin: calc(var(--space-36) + var(--space-8)) 0 var(--space-6); }
.ticks { position: relative; height: var(--size-ticks); cursor: pointer; touch-action: none; }
.ticks svg { display: block; width: 100%; height: var(--size-ticks); stroke: none; }
.ticks .tk { fill: var(--tick); }
.ticks .tk.on { fill: var(--accent); }
.ticks .head { position: absolute; top: calc(-1 * var(--space-6)); bottom: calc(-1 * var(--space-6)); width: var(--border-select); margin-left: -1px; background: var(--ink); pointer-events: none; }
.ticks .time { position: absolute; top: calc(-1 * var(--space-32)); transform: translateX(-50%); font: var(--fw-regular) var(--fs-12) var(--font-mono); padding: var(--space-6) var(--space-10); border-radius: var(--radius-14); background: var(--card-2); color: var(--text); white-space: nowrap; pointer-events: none; }
.ticks-meta { display: flex; justify-content: space-between; gap: var(--space-10); margin-top: var(--space-10); font: var(--fw-regular) var(--fs-12) var(--font-mono); color: var(--muted); }
.ticks-meta span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Market value as plan-style cards. */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10); }
.plans.grades { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); margin-top: var(--space-10); }
.plan { border-radius: var(--radius-16); padding: var(--space-14); background: var(--card-2); border: var(--border-select) solid transparent; min-width: 0; }
.plan.on { background: var(--card); border-color: var(--ink); }
.plan b { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); font: var(--fw-regular) var(--fs-12) var(--font-mono); color: var(--muted); }
.plan .price { display: block; font: var(--fw-medium) var(--fs-24) / var(--lh-snug) var(--font-mono); letter-spacing: -0.02em; margin-top: var(--space-8); color: var(--text); }
.plan .word { display: block; font-size: var(--fs-24); font-weight: var(--fw-black); letter-spacing: var(--ls-heading); margin-top: var(--space-6); line-height: var(--lh-snug); }
.plan small { display: block; font: var(--fw-regular) var(--fs-11-5) / var(--lh-snug) var(--font-mono); color: var(--muted); margin-top: var(--space-6); }
.plans.grades .price { font-size: var(--fs-17); }
.word.good { color: var(--good); }
.word.warn { color: var(--warn); }
.word.bad { color: var(--bad); }
.badge { font: var(--fw-medium) var(--fs-11) var(--font-mono); padding: var(--space-4) var(--space-6); border-radius: var(--radius-6); background: var(--ink); color: var(--white); }
hr { border: 0; border-top: var(--border-hairline) solid var(--line); margin: var(--space-12) 0; }

.list a { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-14) 0; text-decoration: none; border-top: var(--border-hairline) solid var(--line); font-size: var(--fs-16); font-weight: var(--fw-semibold); }
.list > :first-child { border-top: 0; }
.list .go { margin-left: auto; color: var(--muted); font-family: var(--font-mono); }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.tags span { border: var(--border-hairline) solid var(--line); background: var(--card-2); border-radius: var(--radius-pill); padding: var(--space-5) var(--space-12); font: var(--fw-regular) var(--fs-12) var(--font-mono); }
.secondary { border: 0; border-radius: var(--radius-pill); background: var(--card-2); color: var(--text); padding: var(--space-14); width: 100%; font-weight: var(--fw-bold); }

.rowitem { display: flex; gap: var(--space-12); align-items: center; padding: var(--space-12) 0; border-top: var(--border-hairline) solid var(--line); width: 100%; border-left: 0; border-right: 0; border-bottom: 0; background: none; text-align: left; }
.rowitem:first-child { border-top: 0; }
.rowitem img, .rowitem .ph { width: var(--size-thumb); height: var(--size-thumb); border-radius: var(--radius-10); object-fit: cover; flex: none; background: var(--card-2); }
.rowitem .txt { flex: 1; min-width: 0; }
.rowitem .txt b, .rowitem .txt span, .rowitem .txt small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rowitem .txt b { font-weight: var(--fw-bold); }
.rowitem .txt small { color: var(--muted); font: var(--fw-regular) var(--fs-11-5) var(--font-mono); margin-top: var(--space-2); }
.rowitem .txt small.accent-text { color: var(--accent-text); margin: 0 0 var(--space-2); }
.rowitem .right { text-align: right; font: var(--fw-medium) var(--fs-15) var(--font-mono); }
.rowitem .row-play { width: var(--size-play); height: var(--size-play); border: 0; border-radius: var(--radius-round); display: grid; place-items: center; background: var(--ink); color: var(--white); cursor: pointer; }
.rowitem .row-play[disabled] { background: var(--card-2); color: var(--muted); cursor: default; }
.rowitem .row-play .spinner { --spinner-track: rgba(255, 255, 255, 0.25); --spinner-head: var(--white); width: var(--size-icon-sm); height: var(--size-icon-sm); }
.rowitem .row-play svg { width: var(--size-icon-sm); height: var(--size-icon-sm); fill: currentColor; stroke: none; }
div.rowitem { cursor: pointer; }
.rowitem .right small { display: block; font-size: var(--fs-11); color: var(--muted); font-weight: var(--fw-regular); }
.segment { display: flex; gap: var(--space-4); margin: var(--space-4) var(--space-20) var(--space-8); padding: var(--space-4); border-radius: var(--radius-pill); background: var(--card-2); align-self: flex-start; }
.seg { border: 0; border-radius: var(--radius-pill); background: transparent; padding: var(--space-8) var(--space-16); font: var(--fw-bold) var(--fs-14) var(--font-sans); color: var(--muted); }
.seg[aria-selected="true"] { background: var(--card); color: var(--text); box-shadow: var(--shadow-pill); }
.collect { margin-top: var(--space-16); display: flex; align-items: center; justify-content: center; gap: var(--space-8); }
.collect svg { width: var(--size-icon-sm-2); height: var(--size-icon-sm-2); }
.collect.in { background: var(--card); color: var(--text); box-shadow: var(--shadow-pill); }
.library-empty { text-align: center; padding: var(--space-60) var(--space-12) var(--space-24); }
.library-empty .welcome-icon { margin: 0 auto var(--space-16); }
.library-empty > b { display: block; font-size: var(--fs-20); font-weight: var(--fw-black); letter-spacing: var(--ls-heading); }
.library-empty p { margin: var(--space-8) auto var(--space-20); max-width: 300px; color: var(--muted); line-height: var(--lh-base); }
.library-empty .primary { width: auto; padding-left: var(--space-28); padding-right: var(--space-28); }
.results-count-line { margin: var(--space-4) 0 var(--space-4); font: var(--fw-regular) var(--fs-12) var(--font-mono); color: var(--muted); }
.results-head { margin: var(--space-6) 0 var(--space-8); }
.results-head h2 { margin: 0; font-size: var(--fs-28); font-weight: var(--fw-black); letter-spacing: var(--ls-display); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.results-head p { margin: var(--space-6) 0 0; font: var(--fw-regular) var(--fs-12) var(--font-mono); color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: var(--space-60) var(--space-20); }

#nowplaying { position: fixed; left: var(--space-12); right: var(--space-12); bottom: calc(var(--safe-bottom) + var(--space-12)); height: var(--nowplaying-height); max-width: var(--nowplaying-max); margin: 0 auto; z-index: var(--z-nowplaying); display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-14) var(--space-14) var(--space-18); border-radius: var(--radius-24); background: var(--ink); box-shadow: var(--shadow-float); overflow: hidden; }
#nowplaying { padding-left: var(--space-10); gap: var(--space-4); }
#nowplaying .np-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-10); padding: 0; text-align: left; }
#nowplaying .np-open img { width: var(--size-control-sm); height: var(--size-control-sm); flex: none; border-radius: var(--radius-10); object-fit: cover; }
#nowplaying .np-open .eq { flex: none; width: var(--size-control-sm); justify-content: center; }
#nowplaying button[disabled] { opacity: var(--opacity-disabled); }
#nowplaying .t { flex: 1; min-width: 0; }
#nowplaying .t b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-15); font-weight: var(--fw-bold); }
#nowplaying .t small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font: var(--fw-regular) var(--fs-11-5) var(--font-mono); }
#nowplaying button { border: 0; background: none; padding: var(--space-6); color: var(--text); }
#nowplaying button svg { fill: currentColor; stroke: none; }
#nowplaying .np-close { color: var(--muted); }
#nowplaying .prog { position: absolute; left: 0; bottom: 0; height: var(--size-bar); background: var(--accent); width: 0; }
.eq { display: flex; gap: var(--space-2); align-items: flex-end; height: var(--size-eq); color: var(--accent); }
.eq i { width: var(--size-eq-bar); background: currentColor; border-radius: var(--radius-2); height: 30%; }
.eq.on i { animation: eq var(--dur-eq) ease-in-out infinite; }
.eq.on i:nth-child(2) { animation-delay: calc(var(--dur-eq) / -3); }
.eq.on i:nth-child(3) { animation-delay: calc(var(--dur-eq) / -1.5); }
@keyframes eq { 50% { height: 100%; } }

.field { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); padding: var(--space-14) 0; border-top: var(--border-hairline) solid var(--line); font-weight: var(--fw-semibold); }
.field:first-child { border-top: 0; }
.field small { font-weight: var(--fw-regular); }
select { font: var(--fw-medium) var(--fs-14) var(--font-mono); color: var(--text); background: var(--card-2); border: 0; border-radius: var(--radius-pill); padding: var(--space-8) var(--space-12); }
.switch { appearance: none; -webkit-appearance: none; flex: none; width: var(--size-switch-w); height: var(--size-switch-h); border-radius: var(--radius-pill); background: var(--tick); position: relative; margin: 0; transition: background var(--dur-quick); }
.switch::after { content: ""; position: absolute; top: var(--space-3); left: var(--space-3); width: var(--size-knob); height: var(--size-knob); border-radius: var(--radius-round); background: var(--white); transition: transform var(--dur-quick); }
.switch:checked { background: var(--ink); }
.switch:checked::after { transform: translateX(calc(var(--size-switch-w) - var(--size-knob) - 2 * var(--space-3))); }
.dot { display: inline-block; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-round); margin-right: var(--space-6); background: var(--tick); }
.dot.on { background: var(--good); }
.input-row { display: flex; gap: var(--space-8); }
.input { flex: 1; min-width: 0; font: inherit; padding: var(--space-12); border-radius: var(--radius-12); border: var(--border-hairline) solid var(--line); background: var(--card-2); color: var(--text); }

dialog { border: 0; border-radius: var(--radius-24); padding: var(--space-20); width: min(92vw, var(--dialog-max)); background: var(--card); color: var(--text); margin-top: calc(var(--safe-top) + var(--dialog-top)); box-shadow: var(--shadow-float); }
dialog::backdrop { background: var(--scrim-dialog); backdrop-filter: blur(var(--blur-6)); -webkit-backdrop-filter: blur(var(--blur-6)); }
dialog label { font: var(--fw-regular) var(--fs-12) var(--font-mono); color: var(--muted); display: block; margin-bottom: var(--space-10); }
dialog input { width: 100%; font: inherit; font-size: var(--fs-18); font-weight: var(--fw-semibold); padding: var(--space-14); border-radius: var(--radius-14); border: var(--border-hairline) solid var(--line); background: var(--card-2); color: var(--text); }
dialog .row { display: flex; gap: var(--space-10); margin-top: var(--space-14); }
dialog .row .primary { flex: 1; }

#install-banner { position: fixed; z-index: var(--z-banner); left: var(--space-12); right: var(--space-12); top: calc(var(--safe-top) + var(--banner-top)); max-width: var(--chrome-max); margin: 0 auto; padding: var(--space-12) var(--space-14); border-radius: var(--radius-16); background: var(--card); color: var(--text); display: flex; gap: var(--space-12); align-items: center; font-size: var(--fs-14); box-shadow: var(--shadow-pill); }
#install-banner img { width: var(--size-banner-icon); height: var(--size-banner-icon); border-radius: var(--radius-10); box-shadow: 0 0 0 var(--border-hairline) var(--line); } /* paper icon on a white card: a hairline edge */
#install-banner div { flex: 1; }
#install-banner button { border: 0; background: none; color: var(--muted); font-size: var(--fs-18); }
#install-banner .primary { width: auto; padding: var(--space-8) var(--space-14); font-size: var(--fs-14); background: var(--btn-bg); color: var(--btn-ink); }

/* ---------- Video dock (YouTube) ---------- */

/* A 200×200 square docked above the now-playing bar, at its right edge. YouTube requires the player to stay visible
   at this size while it plays, so it has no collapse; the bar's stop button closes it. */
#video-dock { position: fixed; z-index: var(--z-nowplaying); right: max(var(--space-12), calc((100vw - var(--nowplaying-max)) / 2)); bottom: calc(var(--safe-bottom) + var(--space-12) + var(--nowplaying-height) + var(--space-10)); width: var(--size-video); }
#video-dock .yt-frame { position: relative; width: var(--size-video); height: var(--size-video); border-radius: var(--radius-16); overflow: hidden; background: var(--black); box-shadow: var(--shadow-float); }
#video-dock .yt-frame > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-hint { position: absolute; right: 0; bottom: calc(100% + var(--space-6)); margin: 0; padding: var(--space-4) var(--space-10); border-radius: var(--radius-pill); background: var(--card); box-shadow: var(--shadow-pill); font: var(--fw-regular) var(--fs-11) var(--font-mono); color: var(--muted); white-space: nowrap; pointer-events: none; }
#video-dock.started .yt-hint { display: none; }
/* Room to scroll the record page clear of the square. */
body.playing-video #sheet-record .sheet-body { padding-bottom: calc(var(--safe-bottom) + var(--sheet-bottom-clearance) + var(--size-video)); }

/* ---------- App-wide player position (body[data-view] is set by syncChrome in app.js) ---------- */

/* On the tabs, the bar sits just above Scan · Library. */
body[data-view="scan"] #nowplaying, body[data-view="library"] #nowplaying { bottom: calc(var(--safe-bottom) + var(--tabbar-height)); }
body[data-view="library"] #video-dock { bottom: calc(var(--safe-bottom) + var(--tabbar-height) + var(--nowplaying-height) + var(--space-10)); }
/* The Library scrolls clear of the bar (and the square). */
body.playing .sheet.tabview .sheet-body { padding-bottom: calc(var(--safe-bottom) + var(--tabbar-height) + var(--nowplaying-height) + var(--space-24)); }
body.playing-video .sheet.tabview .sheet-body { padding-bottom: calc(var(--safe-bottom) + var(--tabbar-height) + var(--nowplaying-height) + var(--size-video) + var(--space-36)); }
/* On Scan, the instruction and the camera window move up to make room for the bar... */
body.playing #scanner .panel { bottom: calc(var(--tabbar-height) + var(--safe-bottom) + var(--nowplaying-height) + var(--space-4)); }
body.playing #scanner .cam { bottom: calc(var(--panel-height) + var(--tabbar-height) + var(--safe-bottom) + var(--nowplaying-height) + var(--space-4)); }
/* ...and the YouTube square sits in the camera window's top-right corner, under the gear. */
body[data-view="scan"] #video-dock { top: calc(var(--safe-top) + var(--space-8) + var(--space-60)); bottom: auto; right: calc(var(--space-8) + var(--space-12)); }
body[data-view="scan"] .yt-hint { bottom: auto; top: calc(100% + var(--space-6)); }

/* ---------- Sources ---------- */

.src, .track .name .src { display: block; margin-top: var(--space-4); font: var(--fw-regular) var(--fs-11-5) / var(--lh-snug) var(--font-mono); letter-spacing: var(--ls-mono); color: var(--muted); }
.src.yt, .track .name .src.yt { color: var(--youtube); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.chips.spaced { margin-top: var(--space-10); }
.chip { border: var(--border-hairline) solid var(--line); background: var(--card-2); color: var(--text); border-radius: var(--radius-pill); padding: var(--space-8) var(--space-14); font-size: var(--fs-14); font-weight: var(--fw-bold); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-6); }
.chip.on { background: var(--ink); color: var(--white); border-color: transparent; }
.chip.small { padding: var(--space-6) var(--space-12); font: var(--fw-regular) var(--fs-12) var(--font-mono); color: var(--muted); background: transparent; }
.embed { margin-top: var(--space-12); border-radius: var(--radius-14); overflow: hidden; background: var(--card-2); }
.embed iframe { display: block; width: 100%; border: 0; }
.subhead { font: var(--fw-regular) var(--fs-12) var(--font-mono); color: var(--muted); margin: var(--space-16) 0 var(--space-8); }

.about { margin: 0 0 var(--space-10); font-size: var(--fs-15); line-height: var(--lh-relaxed); color: var(--text-soft); }
.about:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .sheet, #welcome, .eq.on i, #scanner.busy #guide .dial, .spinner { animation-duration: 0.01ms; animation-iteration-count: 1; }
}