/* =====================================================================
   Yuki website / base. Lattice tokens (same as the PC app's style.css),
   fonts, resets and the few parts every page shares.
   Round 2 (18 Oct): readability tokens (--t-line / --t-read / --t-cap, .lbl 12.5 px, darker --ink-3 at about
   6:1 on bone), motion tokens for the shared fx layer (css/fx.css + js/fx.js), and .key as a hardware press.
   Readability floor: nothing a person must read is under 13 px on desktop (tags in .lbl are 12.5 px caps);
   sentences never use .lbl, they use --t-cap (13.5 px) or larger. Chrome inside app mocks may go to 11 px.
   Port: this file becomes app/globals.css in the Next.js build.
   ===================================================================== */
:root {
  /* colour: one product with the app.
     The blacks (19 Oct): every black and dark grey on the site comes from the tokens below, a ladder from darkest
     to lightest, so a black palette (css/blacks.css, ?black=NAME) re-colours the whole site by overriding them.
     The values are "umber", the default since 19 Oct (the user wanted "rich black, not bland and dull black",
     saw five, tried obsidian, then said "lets keep it as umber"): a warm black, dark-roast coffee or lacquered
     walnut at night, in step with the warm text greys and the bone sections; its lacquer (lit grounds, sheens,
     deep warm shadows) is in css/blacks.css.
     The old flat grey-black is the "flat" palette there.
     CSS, inline SVG (style="fill: var(--x)") and the canvases (read at load through YAccent.tok) all use them. Dark
     literals left on purpose: alpha masks (#000 / #0000), the accent's dark tints, JS fallbacks, the favicon file.
       --k-well     the deepest wells, below the page: the console's LCD, the Acts desk's far corner, the knob's edge
       --bg         the page; dark panels that sit flush (.console, .tree, .pcwin), the canvases' ground, the Y tile
       --bg-rgb     the page as "r, g, b", for see-through bars, cards and fades over it: rgba(var(--bg-rgb), a)
       --raise      panels on the page (.mobj, .fakewin, .voice, the Spotify window, keys, inputs)
       --raise-2    product-shot grounds (.pstage), hover on --raise, the footer word
       --raise-3    tiles on a raised surface (chat bubbles, desk icons, the key cap, the wordmark's unlit dots)
       --hair       hairlines; the ticket stub and the taskbar's icon tiles sit at this step too
       --dot        off dots (LEDs, the dashboard field, the waveform), small tiles and bars at that step
       --hair-2     borders of panels and keys, dotted rules, the sign-in field's dots
       --edge       borders of floating panels (run card, ask bar, thread); the hero field's resting dots
       --edge-2     hover borders, lit rows, the second dot step of every field
       --mark       crop marks, dashed mock-only buttons
       --shade-rgb  shadows: rgba(var(--shade-rgb), a)
       --ink, --ink-rgb  black ink on bone sections and bone-faced drawings, and shadows cast onto bone: near --bg,
                    another role (a palette may keep ink neutral while the page goes deep) */
  --k-well: #040302;
  --bg: #090705;
  --bg-rgb: 9, 7, 5;
  --raise: #120F0C;
  --raise-2: #1A1613;
  --raise-3: #1F1B18;
  --dot: #292521;
  --lit: #F2EFE9;
  --text: #F2EFE9;
  --text-2: #B4B0A8;
  --text-3: #8A8780;
  --hair: #211D1A;
  --hair-2: #2F2A26;
  --edge: #38332E;
  --edge-2: #3E3934;
  --mark: #4C4742;
  --shade-rgb: 2, 1, 0;
  --live: #FF6A1A;          /* the only colour, and only for live things: ember orange, the user's pick (19 Oct; js/accent.js may change it) */
  --live-rgb: 255, 106, 26;
  --live-ink: #1F0D03;
  --live-dim: rgba(var(--live-rgb), .12);
  /* bone sections (for rhythm) */
  --bone: #F2EFE9;
  --bone-2: #E7E3DB;
  --ink: #090705;
  --ink-rgb: 9, 7, 5;
  --ink-2: #4A4741;
  --ink-3: #5C5851;         /* about 6.1:1 on --bone (was #75716A, 4.2:1); tags only */
  --bone-hair: #D6D1C7;
  /* radii, space */
  --r-1: 4px; --r-2: 8px; --r-3: 14px; --r-4: 20px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  /* type */
  --f-display: 'Doto', 'JetBrains Mono', monospace;
  --f-ui: 'Instrument Sans', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --t-line: clamp(16px, 1.15vw, 18px);   /* the one line under a module heading */
  --t-read: 15px;                        /* card text, callouts, readout sentences */
  --t-cap: 13.5px;                       /* captions, sources, sub lines: sentence case, never caps */
  --t-lbl: 12.5px;                       /* .lbl mono caps tags (Module 0N, fig. N, kind tags) */
  /* motion */
  --d-fast: 140ms; --d-med: 260ms; --d-slow: 520ms;
  --d-hover: 180ms; --d-press: 70ms; --d-release: 240ms;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  /* the lit border (fx "lit"): white on dark; .bone / [data-tone="bone"] switch it to ink */
  --lit-c: var(--lit);
  --lit-halo: rgba(242, 239, 233, .10);
  --crop-c: var(--mark);
  --crop-on: var(--text-2);
  /* layout */
  --gut: clamp(16px, 4vw, 56px);
  --maxw: 1600px;
}

@font-face { font-family: 'Doto'; src: url(../fonts/Doto.ttf) format('truetype'); font-weight: 100 900; font-display: block; }
@font-face { font-family: 'Instrument Sans'; src: url(../fonts/InstrumentSans.ttf) format('truetype'); font-weight: 400 700; font-stretch: 75% 100%; font-display: block; }
@font-face { font-family: 'JetBrains Mono'; src: url(../fonts/JetBrainsMono.ttf) format('truetype'); font-weight: 100 800; font-display: block; }

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 15px/1.5 var(--f-ui); -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01', 'tnum'; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img, svg, canvas { display: block; }
:focus-visible { outline: 1.5px solid var(--live); outline-offset: 2px; border-radius: var(--r-1); }
::selection { background: var(--live); color: var(--live-ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.doto { font-family: var(--f-display); font-variation-settings: 'ROND' 100; font-weight: 800; letter-spacing: .02em; }
.mono { font-family: var(--f-mono); }
.t2 { color: var(--text-2); } .t3 { color: var(--text-3); }
.live { color: var(--live); }

/* caps mono label: the catalogue voice. Tags only (Module 0N, fig. N, kind tags, LED names), never sentences */
.lbl { font: 500 var(--t-lbl)/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.lbl b { color: var(--text); font-weight: 500; }
.lbl.live { color: var(--live); }
/* readable text helpers: a caption (sentence case) and a reading line */
.cap { font: 400 var(--t-cap)/1.45 var(--f-ui); color: var(--text-2); }
.cap.mono { font-family: var(--f-mono); font-size: 13px; }
.read { font-size: var(--t-read); line-height: 1.5; color: var(--text-2); }
/* bone surfaces: ink text, ink lit border, darker crop marks. Put data-tone="dark" on a dark panel inside bone */
.bone, [data-tone="bone"] {
  --lit-c: var(--ink); --lit-halo: rgba(var(--ink-rgb), .08); --crop-c: #A39D92; --crop-on: var(--ink-2);
}
.bone .cap, .bone .read, [data-tone="bone"] .cap, [data-tone="bone"] .read { color: var(--ink-2); }
[data-tone="dark"] {
  --lit-c: var(--lit); --lit-halo: rgba(242, 239, 233, .10); --crop-c: var(--mark); --crop-on: var(--text-2);
}
[data-tone="dark"] .cap, [data-tone="dark"] .read { color: var(--text-2); }

/* clearings: a panel the field parts around, crop marks at its corners (from the app) */
.clear {
  position: relative;
  --m: var(--crop-c);
  background:
    linear-gradient(var(--m), var(--m)) 0 0 / 9px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 0 / 1px 9px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 0 / 9px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 0 / 1px 9px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 100% / 9px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 100% / 1px 9px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 100% / 9px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 100% / 1px 9px no-repeat;
}
.dotrule { height: 3px; background: radial-gradient(circle, var(--hair-2) 1px, transparent 1.3px) 0 0 / 6px 3px repeat-x; }

/* keys (buttons) */
.key {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: var(--r-2); border: 1px solid var(--hair-2); background: var(--raise); color: var(--text);
  font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none;
}
/* hardware press (fx "press", default on every .key): hover lifts 1 px (pointer devices only), down sinks 1.5 px
   and shrinks to .985 in --d-press, release springs back. Uses the individual translate / scale properties so
   fx "magnet" (transform) and "tilt" (transform) compose with it. .is-down is set by js/fx.js on Space / Enter
   and on touch pointerdown. Reduced motion: colour only. */
.key, [data-fx~="press"] {
  transition: background var(--d-fast), border-color var(--d-fast), color var(--d-fast),
    translate var(--d-release) var(--ease-spring), scale var(--d-release) var(--ease-spring);
}
.key:hover { background: var(--raise-2); border-color: var(--edge-2); }
html.fx-hover .key:hover, html.fx-hover [data-fx~="press"]:hover { translate: 0 -1px; }
html:root .key:active, html:root .key.is-down, html:root [data-fx~="press"]:active, html:root [data-fx~="press"].is-down {
  translate: 0 1.5px; scale: .985;
  transition-duration: var(--d-fast), var(--d-fast), var(--d-fast), var(--d-press), var(--d-press);
  transition-timing-function: ease, ease, ease, ease-out, ease-out;
}
[data-motion="reduced"] .key, [data-motion="reduced"] [data-fx~="press"] { translate: none !important; scale: none !important; }
[data-motion="reduced"] .key.is-down, [data-motion="reduced"] .key:active { background: var(--raise-2); }
[data-motion="reduced"] .key.pri.is-down, [data-motion="reduced"] .key.pri:active { background: #fff; }
.key.pri { background: var(--lit); color: var(--ink); border-color: var(--lit); font-weight: 600; }
.key.pri:hover { background: #fff; }
.key.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.key.ghost:hover { color: var(--text); background: var(--raise); }
.key.stop { border-color: rgba(var(--live-rgb), .45); color: var(--live); background: var(--live-dim); }
.key.lg { height: 48px; padding: 0 20px; font-size: 15px; border-radius: 10px; }
.key.sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.key.xs { height: 24px; padding: 0 9px; font-size: 12px; border-radius: 6px; }
.key[disabled] { opacity: .45; pointer-events: none; }
.key svg { width: 14px; height: 14px; flex: none; }
.kbd { font: 500 12px/1 var(--f-mono); color: var(--text-3); border: 1px solid var(--hair-2); border-radius: 4px; padding: 3px 5px; }

.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: var(--r-pill);
  border: 1px solid var(--hair-2); color: var(--text-2); font: 500 12.5px/1 var(--f-mono); white-space: nowrap;
}
.chip.live { border-color: rgba(var(--live-rgb), .4); color: var(--live); }
/* no status dots (19 Oct): live is said in words and mint text, never a dot beside them */
@keyframes blink { 50% { opacity: .3; } }

/* inputs */
.field-in {
  width: 100%; height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--hair-2); background: var(--raise);
  color: var(--text); font-size: 15px; transition: border-color var(--d-fast), background var(--d-fast);
}
.field-in::placeholder { color: var(--text-3); }
.field-in:focus { outline: 0; border-color: rgba(var(--live-rgb), .6); background: var(--bg); }
.field-in[aria-invalid="true"] { border-color: #E7B7A0; }

/* dot icons: tiny grids of dots, drawn as SVG */
.dic { width: 14px; height: 14px; fill: currentColor; flex: none; }

/* the Y mark (inline SVG) */
.ymark { width: 28px; height: 28px; flex: none; }

/* ---------- mock-only: the screens pill (removed in the real build) ---------- */
.mockpill { position: fixed; z-index: 90; left: 0; top: 50%; font: 500 11px/1 var(--f-mono); }
.mockpill > button {
  position: absolute; left: 0; top: 0; transform: translateY(-50%); writing-mode: vertical-rl;
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 6px; border-radius: 0 8px 8px 0;
  border: 1px dashed var(--mark); border-left: 0; background: rgba(var(--bg-rgb), .9); color: var(--text-3);
  letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.mockpill > button:hover { color: var(--text); border-color: var(--text-3); }
.mockpill > button i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }
.mockpill .panel {
  position: absolute; left: 34px; top: 0; transform: translateY(-50%); width: 300px; max-height: min(80vh, 640px); overflow: auto; padding: 14px;
  border: 1px solid var(--hair-2); border-radius: 14px; background: rgba(var(--bg-rgb), .97); box-shadow: 0 20px 60px rgba(var(--shade-rgb), .6);
  opacity: 0; translate: -6px 0; pointer-events: none; visibility: hidden;
  transition: opacity var(--d-fast), translate var(--d-fast), visibility 0s linear var(--d-fast); /* closed = out of the tab order */
  scrollbar-width: thin; scrollbar-color: var(--hair-2) transparent;
}
.mockpill.open .panel { opacity: 1; translate: 0 0; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.mockpill .panel h6 { margin: 12px 0 6px; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.mockpill .panel h6:first-child { margin-top: 0; }
.mockpill .panel a { display: flex; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 6px; color: var(--text-2); text-decoration: none; font: 400 13px/1.3 var(--f-ui); }
.mockpill .panel a span { font: 500 11px/1.3 var(--f-mono); color: var(--text-3); }
.mockpill .panel a:hover { background: var(--raise); color: var(--text); }
.mockpill .panel a.here { color: var(--text); background: var(--raise-2); }
.mockpill .panel .all { margin-top: 10px; border-top: 1px solid var(--hair); padding-top: 10px; }

/* ---------- simple doc pages (privacy, terms, status stubs) ---------- */
.doc { max-width: 760px; margin: 0 auto; padding: 120px var(--gut) 120px; }
.doc h1 { font-family: var(--f-display); font-variation-settings: 'ROND' 100; font-weight: 800; font-size: clamp(48px, 9vw, 96px); line-height: .9; margin: 18px 0 28px; letter-spacing: .01em; }
.doc h2 { font-size: 20px; margin: 40px 0 10px; font-weight: 600; }
.doc p, .doc li { color: var(--text-2); font-size: 16px; line-height: 1.6; }
.doc li b, .doc p b { color: var(--text); font-weight: 500; }
.doc .stub { margin-top: 48px; padding: 16px 18px; border: 1px dashed var(--hair-2); border-radius: 12px; font: 500 13px/1.5 var(--f-mono); color: var(--text-3); }

/* reduced motion: static frames, no CSS motion */
[data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after { animation: none !important; transition: none !important; }

@media (max-width: 760px) {
  .lbl { font-size: 12px; }
  .mockpill > button { width: 22px; height: 48px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .mockpill > button i { width: 5px; height: 5px; }
  .mockpill .panel { left: 26px; width: min(300px, calc(100vw - 38px)); }
}
.doc p.lbl { font-size: var(--t-lbl); line-height: 1.3; color: var(--text-3); margin: 0; }

/* ---------- the stub pages' header (privacy, terms, status) ---------- */
.dtop { position: fixed; top: 0; left: 0; right: 0; height: 60px; display: flex; align-items: center; padding: 0 var(--gut); background: rgba(var(--bg-rgb), .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 10; border-bottom: 1px solid var(--hair); }
.dtop a.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; text-decoration: none; }
.dtop .doto { font-size: 24px; font-weight: 900; letter-spacing: .04em; }
.dtop .r { margin-left: auto; display: flex; gap: 4px; }
.dtop .r a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; font-size: 13.5px; color: var(--text-2); text-decoration: none; }
.dtop .r a:hover { color: var(--text); }

/* ---------- touch: every key, link and switch is at least 40 px on a phone or any touch screen ----------
   Only real controls grow (a, button); the keys drawn inside the landing demos are spans and keep their size. */
@media (max-width: 760px), (pointer: coarse) {
  a.key, button.key { min-height: 40px; }
  a.key.sm, button.key.sm, a.key.xs, button.key.xs { height: 40px; min-width: 40px; }
  a.key.xs, button.key.xs { padding: 0 12px; font-size: 12.5px; border-radius: var(--r-2); }
}