/* trackmatch design tokens — the locked aesthetic.
   black bg · Sometype Mono · all-lowercase · cyan #4fc3f7 accent · boxy borders.
   Match the screenshots in FILES/SCREENSHOTS OF ORIGINAL UI/.
   Tokens + base element styles only; components live in components.css. */

/* one readable monospace face across the WHOLE app (matches the results) — Courier
   Prime, loaded from Google Fonts in base.html. */
:root {
  --bg: #000;
  --fg: #fff;
  --grey-1: #d4d4d4;           /* primary body text on black (nudged brighter with the frost) */
  --grey-2: #aaa;
  --grey-3: #888;              /* muted / placeholder */
  --grey-4: #666;              /* faint captions */
  --accent: #4fc3f7;           /* cyan */
  --link: #1da0c3;             /* discogs/bandcamp blue (results) */
  --line: #7a7a7a;             /* component borders (inputs, buttons, cards) */
  --border: #c7c7c7;           /* brighter borders (track rows, emphasis) */
  --error: #b54a4a;

  /* frosted-surface material — the "sweet spot" chosen from the frost study.
     A smoked-glass tint + subtle blur reads the same everywhere; the blur only
     goes on STATIC, one-per-viewport surfaces (panels, tabs, modals). Scrolling
     surfaces (the sticky topbar, the long results frame) take the tint ALONE — a
     blur over the fixed mp4 repaints every scroll frame and stalls scrolling
     (see the .tm-topbar-sticky note). */
  --frost-bg: rgba(10, 11, 13, 0.42);       /* panel tint (bumped up a notch for more presence) */
  --frost-bg-tab: rgba(12, 13, 15, 0.34);   /* tabs: a lighter tint */
  --frost-bg-modal: rgba(12, 13, 15, 0.66); /* popups: denser, for form legibility */
  --frost-blur: blur(17px) saturate(1.08);
  --frost-border: rgba(255, 255, 255, 0.22);/* brighter panel/tab borders */
  --frost-sep: rgba(255, 255, 255, 0.15);   /* brighter row separators */
  --frost-rim: inset 0 1px 0 rgba(255, 255, 255, 0.09); /* faint glass top edge */

  --radius: 6px;
  --radius-lg: 10px;
  --radius-chip: 2px;          /* sharp corners for the boxy 8-bit controls */

  /* win98-style bevel, adapted to the dark theme: a light top-left highlight +
     a dark bottom-right shadow give controls a chunky, raised/recessed look. */
  --btn-face: #1c1c1c;
  --field-face: #0d0d0d;
  --bevel-light: rgba(255, 255, 255, .16);
  --bevel-dark: rgba(0, 0, 0, .72);
  --bevel-out: inset 1.5px 1.5px 0 var(--bevel-light), inset -1.5px -1.5px 0 var(--bevel-dark);
  --bevel-in:  inset 1.5px 1.5px 0 var(--bevel-dark), inset -1.5px -1.5px 0 var(--bevel-light);
  /* one font for everything — buttons, info, inputs, results (easier to read) */
  --font-mono: 'Courier Prime', ui-monospace, 'Courier New', Courier, monospace;
  --font-ui: var(--font-mono);
  --bg-video-opacity: 0.40;   /* the mp4 background is a key feature; UI sits transparent over it
                                 (nudged brighter to give the frost more to work with, still faded
                                 enough that text/rows stay crisp; half speed via ui.js for a calm drift) */
  --bg-video-opacity-loading: 0.13;  /* loading/record states fade the bg further so the central
                                        orb reads as the one focal point (toggled via body.tm-bg-dim).
                                        UNCHANGED: scan/listen states intentionally darken — kept as-is. */

  /* app-wide text-size preference (settings → text size): every size in the app is
     rem-based, so scaling the root scales everything proportionally — smaller
     captions stay proportionally smaller. Capped at 1.24 (~16px base) so the fixed
     480px shell and boxy controls never break. Set pre-paint in base.html. */
  --tm-font-scale: 1.08;      /* default app text size = "large" (settings → text size) */

  --maxw: 760px;               /* shell content width */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--grey-1);
  font-family: var(--font-ui);   /* one mono face (Courier Prime) app-wide */
  text-transform: lowercase;
  /* tight "terminal" base; × the saved text-size preference (all component sizes
     are rem so they track this one declaration) */
  font-size: calc(13px * var(--tm-font-scale));
  line-height: 1.5;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
}
/* the black fallback lives on <html>; <body> MUST stay transparent or its opaque
   background paints over the fixed z-index:-1 bg video (CSS root paint order). */
html { background: var(--bg); }
body { background: transparent; }

/* shared MP4 background underlay — fixed, full-viewport, behind everything at 15%.
   on every page except the results loading overlay. */
.bgvid {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100svh;
  object-fit: cover;
  z-index: -1 !important;
  pointer-events: none;
  opacity: var(--bg-video-opacity);
  transition: opacity .5s ease;
}
/* loading + live-record surfaces spotlight the central orb: fade the ambient bg
   further while one is on screen (toggled from results.js / listen.js). */
body.tm-bg-dim .bgvid { opacity: var(--bg-video-opacity-loading); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-weight: normal; text-transform: lowercase; margin: 0; font-family: var(--font-ui); }
h1 { font-size: 1.25rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; color: var(--grey-2); }

::placeholder { color: var(--grey-3); font-style: normal; text-transform: lowercase; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the hidden attribute must always win, even over components that set display
   (e.g. the flex loading/error screens) — otherwise hidden panels still show. */
[hidden] { display: none !important; }

/* NOTE: the bg animation is a core design feature, so it is NOT hidden under
   prefers-reduced-motion (that was making it invisible for anyone with macOS
   "Reduce Motion" on). It stays muted + loops quietly behind the transparent UI. */