/* Karaoke / After Dark
   Built from Christian's two systems:
   - chrisdalbano.com Editorial/After Dark, Games world: charcoal + bone, hairlines, square corners,
     one orange accent, masked kinetic words, drawn rules, counters.
   - Forza UI: Barlow Condensed display + mono uppercase labels, glint on the primary action,
     blur-rise cascades, spring reorders.
   Rules carried over: one accent with one job (primary action / current thing), no pills, no
   marquees, no gradient bars, no shadows on cards, content never waits for an animation,
   reduced motion collapses to end states. */

@font-face { font-family: "Inter"; src: url("/karaoke/static/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/karaoke/static/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/karaoke/static/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/karaoke/static/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/karaoke/static/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* Games world (portfolio) */
  --canvas: #111310; --surface: #1e211c; --raised: #2a2e26;
  --ink: #f1eee5; --ink-2: #bdbfb3; --muted: #9da493;
  --rule: #373c32; --rule-strong: #626959;
  --accent: #ff9858; --on-accent: #111310; --accent-tint: color-mix(in srgb, var(--accent) 12%, transparent);
  /* status (Forza) */
  --ok: #a8d6b5; --warn: #e3c38c; --bad: #ff7a90;
  /* lyric colours, overridden per song on the TV */
  --fill: var(--accent); --fill-c: var(--accent); --rest-c: rgba(241, 238, 229, .48); --glow-c: #ff705b;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Barlow Condensed", "Inter", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* motion vocabulary (shared easings) */
  --expo: cubic-bezier(.16, 1, .3, 1);
  --out: cubic-bezier(.22, 1, .36, 1);
  --inout: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.32, .64, 1);
  --fast: .16s; --base: .32s; --slow: .8s;
  --stagger: 22ms;

  --gutter: 16px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------- type ---------- */
.eyebrow { font: 500 11px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.display { font: 700 clamp(44px, 13vw, 76px)/.92 var(--display); letter-spacing: -.01em; text-transform: uppercase; margin: 0; }
.title { font: 600 26px/1.05 var(--display); letter-spacing: .005em; margin: 0; }
.num { font: 600 44px/1 var(--display); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

/* ---------- layout ---------- */
.wrap { max-width: 560px; margin: 0 auto; padding: 20px var(--gutter) 48px; }
.row { display: flex; gap: 12px; align-items: center; }
.grow { flex: 1; min-width: 0; }
.t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
section { padding: 22px 0; }
.rule { position: relative; height: 1px; }
.rule::after { content: ""; position: absolute; inset: 0; background: var(--rule); transform-origin: left; animation: draw 1.2s var(--inout) both; animation-delay: var(--at, .1s); }
@keyframes draw { from { transform: scaleX(0); } }

/* ---------- controls: square, hairline, one accent ---------- */
button, .btn {
  font: 600 15px/1 var(--sans); color: var(--ink); background: transparent; border: 1px solid var(--rule-strong);
  border-radius: 0; min-height: 46px; padding: 12px 18px; cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
  transition: border-color var(--fast) var(--out), background var(--fast) var(--out), transform var(--fast) var(--out);
  -webkit-tap-highlight-color: transparent;
}
button:active { transform: translateY(1px); }
button:hover { border-color: var(--ink-2); }
button:disabled { opacity: .4; }
button.icon { width: 46px; padding: 0; display: inline-grid; place-items: center; }
button.icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: square; }
button.link { border: 0; min-height: 40px; padding: 8px 4px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
button.link:hover { color: var(--accent); }
/* the one primary action: accent fill, Forza glint on hover/press */
.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.primary:hover { background: #ffad7a; border-color: #ffad7a; }
.primary::after { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-110%);
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .38) 50%, transparent 70%); }
.primary:hover::after, .primary.glint::after { animation: glint .7s var(--expo); }
@keyframes glint { to { transform: translateX(110%); } }

input { font: 500 17px/1.3 var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--rule-strong);
  border-radius: 0; padding: 12px 0; width: 100%; transition: border-color var(--fast); }
input:focus { outline: none; border-bottom-color: var(--accent); }
input::placeholder { color: var(--muted); }

/* status marks: a dot + mono label, never a pill */
.mark { display: inline-flex; align-items: center; gap: 8px; font: 500 11px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.mark::before { content: ""; width: 7px; height: 7px; background: var(--rule-strong); }
.mark.on { color: var(--ink); } .mark.on::before { background: var(--ok); animation: live 1.6s ease-in-out infinite; }
@keyframes live { 50% { opacity: .35; } }

/* ---------- index rows (portfolio): hairline-ruled, mono index, accent sweep ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list li { position: relative; display: flex; gap: 12px; align-items: center; min-height: 60px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--expo); }
.list li:hover::after, .list li.flash::after { transform: scaleX(1); }
.list .idx { font: 500 12px var(--mono); color: var(--muted); width: 22px; flex: none; }
.list .name { font-weight: 600; }
.list .sub { font: 500 11px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.list .sub.prep { color: var(--warn); }
.list li.current .idx { color: var(--accent); }

/* ---------- motion vocabulary ---------- */
/* kinetic type: words rise out of their own masks */
.kt .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .1em .14em; margin-block: -.1em -.14em; }
.kt .w > span { display: inline-block; transform-origin: 0 100%; animation: word 1.05s var(--expo) both; animation-delay: calc(var(--at, .1s) + var(--i) * 60ms); }
@keyframes word { from { transform: translateY(112%) rotate(3deg); } }
/* blur-rise cascade for rows entering */
.rise { animation: rise var(--base) var(--expo) both; animation-delay: calc(min(var(--i, 0), 12) * var(--stagger)); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
.pop { animation: pop .45s var(--spring) both; }
@keyframes pop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; }
}