/* KURAL · the parts every screen stands on (Lane L0): the desk, the press, the permanent caution line, the wordmark.
 * The screens (L3 onwards) add their own parts in their own files; these never change per screen. */

/* ── THE DESK ── the grid and the soft lift live on their own layer, behind everything. A filter or transform on any
 * wrapper that holds a pinned control makes that wrapper the containing block of position:fixed and the sign bar stops
 * being pinned, differently per browser, with no error (Law 10). So they are here, on a sibling of the app, and nowhere
 * else. */
.k-backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--texture);filter:saturate(var(--cast))}

/* ── THE PRESS ── the product's one physical response, carried from DOM's approved design (30 Jul 2026).
 * Tier 1 (the mic, the confirm bar, the sign bar): a hard ledge, never blurred; down faster than up; up overshoots.
 * Tier 2 (secondary keys): the same, smaller. Tier 3 (inline and text controls): no ledge, no travel.
 * press.js adds .is-down while the key is held. Reduced motion: the travel stays, the tween goes. */
.k-key{display:inline-block;min-height:var(--tap);margin:0;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:transparent;text-align:center;
  transition:transform var(--press-up) var(--e-up),box-shadow var(--press-up) var(--e-up),opacity var(--press-up)}
.k-key.is-down{transition-duration:var(--press-down);transition-timing-function:var(--e-down)}
.k-key.k-block{display:block;width:100%}

.k-key.k-t1{padding:var(--s-4) var(--s-5);border-radius:var(--r-3);font-family:var(--font-display);font-weight:600;font-size:var(--t-7);line-height:1.2;letter-spacing:var(--track-display);box-shadow:var(--press-rest)}
.k-key.k-t1.is-down{transform:translateY(.25rem);box-shadow:var(--press-active)}
.k-key.k-t2{padding:var(--s-2) var(--s-4);border-radius:var(--r-2);font-family:var(--font-mono);font-weight:600;font-size:var(--t-4);letter-spacing:var(--track-band);box-shadow:0 .1875rem 0 rgba(0,0,0,.45)}
.k-key.k-t2.is-down{transform:translateY(.125rem);box-shadow:0 .0625rem 0 rgba(0,0,0,.45)}
.k-key.k-t3{padding:var(--s-2) var(--s-4);border-radius:var(--r-2);font-family:var(--font-mono);font-weight:500;font-size:var(--t-2);letter-spacing:var(--track-caps);box-shadow:none}
.k-key.k-t3.is-down{opacity:.7}

/* Two objects, not two colours: confirm is outlined, sign is filled. Quiet is everything else. */
.k-key.k-filled{background:var(--act);color:var(--act-ink);border:2px solid transparent}
.k-key.k-outlined{background:var(--ground);color:var(--act);border:2px solid var(--act)}
.k-key.k-quiet{background:transparent;color:var(--ink);border:1px solid var(--edge-strong)}
.k-key.k-t3.k-quiet{color:var(--ink-2)}

/* Disabled keeps its ledge, lighter. Prefer an inert bar that names its reason over a disabled key. */
.k-key:disabled,.k-key[aria-disabled="true"]{opacity:.38;cursor:default}
.k-key.k-t1:disabled,.k-key.k-t1[aria-disabled="true"]{box-shadow:var(--press-rest-disabled)}
.k-key:disabled.is-down,.k-key[aria-disabled="true"].is-down{transform:none}

/* On the off-white paper a black ledge reads as a rendering bug: a darkened tint of the key's own colour. */
.k-key.k-t1.k-on-paper{box-shadow:var(--press-rest-paper)}
.k-key.k-t1.k-on-paper.is-down{box-shadow:var(--press-active-paper)}

@media (prefers-reduced-motion:reduce){.k-key{transition:none}}

.k-key:focus-visible{outline:2px solid var(--act);outline-offset:3px}

/* ── THE CAUTION LINE ── permanent (Law 8). No close control, no ×, no "got it", no checkbox, no countdown. Required text,
 * so it meets the AA floor like every other line. Two fixed places: above the confirm bar, inside the sign bar's block. */
.k-caution{margin:0;padding-top:var(--s-3);border-top:1px solid var(--edge);font-family:var(--font-ui);font-weight:500;font-size:var(--t-2);line-height:1.5;color:var(--ink-2)}

/* ── THE WORDMARK ── two rules, solid over dotted, unequal (what the doctor said, what Kural worked out), then KURAL in one
 * ink, letterspaced. The single-line form (.k-wordmark-line) is the word alone. Never a pen, trace, stethoscope, bubble,
 * microphone, waveform, document, signature or face. */
.k-wordmark{display:inline-grid;gap:.3em;justify-items:start;color:inherit}
.k-wordmark::before,.k-wordmark::after{content:"";display:block;height:0}
.k-wordmark::before{width:3.6em;border-top:max(1.5px,.083em) solid currentColor}
.k-wordmark::after{width:2.232em;border-top:max(1.5px,.083em) dotted currentColor;grid-row:2}
.k-wordmark .k-wordmark-word,.k-wordmark-line{grid-row:3;margin-top:.1em;font-family:var(--font-display);font-weight:700;line-height:1;letter-spacing:.14em;text-transform:uppercase}