@import url("../tokens/fonts.css");

/* ==========================================================================
   Keycap — Pop meets a colourful custom mechanical keyboard.
   Every colour, radius, spacing and shadow comes from tokens.css.
   Motion lives here. Transform and opacity only; no blur, no gradients
   (the board's cutting-mat grid / brushed lines are hard-stop line patterns, never soft).
   ========================================================================== */

:root {
  /* easings */
  --kc-spring: cubic-bezier(.34, 1.56, .64, 1);     /* release, lift: ~10% overshoot */
  --kc-bottom-out: cubic-bezier(.3, 1.7, .6, 1);    /* press: fast drop, tiny rebound off the bottom */
  --kc-pop: cubic-bezier(.34, 1.45, .64, 1);        /* entrances (Pop's ease) */
  --kc-snap: cubic-bezier(.2, .9, .3, 1);           /* fades, exits, ripples */
  /* durations */
  --kc-t-press: 110ms;
  --kc-t-hover: 180ms;
  --kc-t-release: 260ms;
  --kc-t-pop: 340ms;
  --kc-t-ripple: 380ms;
  color-scheme: light;
}
[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  /* the board, light: a self-healing cutting mat. Edge ticks (short every 12px, long every 60px)
     on the top and left, a 60px major grid (every 5 cells) and a 12px fine grid. Hard-stop
     lines only: static, scrolls with the page, no blur, no soft gradient. */
  background-color: var(--mat);
  background-image:
    repeating-linear-gradient(90deg, var(--mat-rule) 0 2px, transparent 2px 60px),
    repeating-linear-gradient(90deg, var(--mat-rule) 0 1.5px, transparent 1.5px 12px),
    repeating-linear-gradient(180deg, var(--mat-rule) 0 2px, transparent 2px 60px),
    repeating-linear-gradient(180deg, var(--mat-rule) 0 1.5px, transparent 1.5px 12px),
    linear-gradient(var(--mat-rule) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--mat-rule) 1.5px, transparent 1.5px),
    linear-gradient(var(--mat-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-line) 1px, transparent 1px);
  background-size: 100% 16px, 100% 8px, 16px 100%, 8px 100%, 60px 60px, 60px 60px, 12px 12px, 12px 12px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* the board, dark: an anodised aluminium case with fine horizontal brushing.
   Three hairline streak periods (3, 11, 17px) beat against each other so it reads as brushed, not striped. */
[data-theme="dark"] body, body[data-theme="dark"] {
  background-image:
    repeating-linear-gradient(180deg, var(--mat-rule) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(180deg, transparent 0 6px, var(--mat-rule) 6px 7px, transparent 7px 17px),
    repeating-linear-gradient(180deg, var(--mat-line) 0 1px, transparent 1px 3px);
  background-size: auto;
  background-position: 0 0;
  background-repeat: repeat;
}

/* ---------- type ---------- */
.kc-display { font-family: var(--font-display); font-size: 56px; line-height: 58px; font-weight: 800; letter-spacing: -.045em; margin: 0; }
.kc-title { font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 800; letter-spacing: -.035em; margin: 0; }
.kc-heading { font-family: var(--font-display); font-size: 19px; line-height: 26px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.kc-body { font-size: 15px; line-height: 24px; margin: 0; }
.kc-small { font-size: 13px; line-height: 20px; margin: 0; color: var(--text-soft); }
.kc-label { font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: -.005em; }
.kc-legend { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .04em; }
.kc-soft { color: var(--text-soft); }
.kc-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; }

/* the Pop label: black pill, lemon uppercase mono */
.kc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px; border-radius: var(--radius-full); background: var(--ink); color: var(--lemon); font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

/* ---------- preview / layout helpers ---------- */
.kc-stage { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4) var(--space-4); padding: var(--space-6); }
.kc-overline { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.kc-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.kc-col { display: flex; flex-direction: column; gap: var(--space-3); }
.kc-icon { display: block; width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   THE KEY — one primitive for every pressable thing.
   Layers: ::before is the skirt (wider, darker same hue, ink outline, hard
   shadow); .kc-key__face is the top face (narrower, lighter, ink outline),
   standing on the skirt with --kc-band of skirt showing below it. Press drops
   the face by --kc-travel into the skirt, so the visible band shrinks.
   ::after is the invisible hover guard (5px right + bottom, z-index -1).
   ========================================================================== */
.kc-key {
  --kc-face: var(--cap);
  --kc-on: var(--ink);
  --kc-skirt: color-mix(in oklab, var(--kc-face) 70%, var(--shade));
  --kc-line: 3px;
  --kc-inset: 6px;
  --kc-shoulder: 9px;
  --kc-band: 9px;
  --kc-travel: 4px;
  --kc-r: var(--radius-md);
  --kc-h: 38px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 var(--kc-band);
  border: 0;
  border-radius: var(--kc-r);
  background: none;
  color: var(--kc-on);
  font: inherit;
  text-decoration: none;
  vertical-align: top;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--kc-t-hover) var(--kc-spring);
}
.kc-key::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0; right: 0; top: var(--kc-shoulder); bottom: 0;
  background: var(--kc-skirt);
  border: var(--kc-line) solid var(--ink);
  border-radius: var(--kc-r);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--kc-t-hover) var(--kc-spring), background-color var(--kc-t-hover) var(--kc-snap);
}
.kc-key::after { content: ""; position: absolute; inset: 0 -5px -5px 0; z-index: -2; border-radius: inherit; }
.kc-key__face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-sizing: border-box;
  min-height: var(--kc-h);
  margin: 0 var(--kc-inset);
  padding: 0 var(--space-4);
  background: var(--kc-face);
  border: var(--kc-line) solid var(--ink);
  border-radius: calc(var(--kc-r) - 2px);
  overflow: hidden;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: transform var(--kc-t-release) var(--kc-spring), background-color var(--kc-t-hover) var(--kc-snap);
}
.kc-key__face > * { position: relative; }

/* ---------- tones: face colour + legend colour; the skirt is derived ---------- */
.kc-tone-cap { --kc-face: var(--cap); --kc-on: var(--ink); }
.kc-tone-coral { --kc-face: var(--coral); --kc-on: var(--ink); }
.kc-tone-mint { --kc-face: var(--mint); --kc-on: var(--ink); }
.kc-tone-lavender { --kc-face: var(--lavender); --kc-on: var(--ink); }
.kc-tone-lemon { --kc-face: var(--lemon); --kc-on: var(--ink); }
.kc-tone-navy { --kc-face: var(--navy); --kc-on: var(--cap); }

/* hover: the cap lifts 2px and its shadow grows (Pop) */
@media (hover: hover) and (pointer: fine) {
  .kc-key:where(:not(:disabled, .is-latched, .is-static)):hover { transform: translate(-1px, -2px); }
  .kc-key:where(:not(:disabled, .is-latched, .is-static)):hover::before { box-shadow: var(--shadow-md); }
}
/* press: travel + bottom-out. .is-down is the same press driven by JS (keyboard, held keys) */
.kc-key:where(:not(:disabled, .is-static)):active, .kc-key.is-down { transform: none; }
.kc-key:where(:not(:disabled, .is-static)):active .kc-key__face,
.kc-key.is-down .kc-key__face,
.kc-key.is-latched .kc-key__face {
  transform: translateY(var(--kc-travel));
  transition: transform var(--kc-t-press) var(--kc-bottom-out), background-color var(--kc-t-hover) var(--kc-snap);
}
.kc-key:where(:not(:disabled, .is-static)):active::before,
.kc-key.is-down::before,
.kc-key.is-latched::before { box-shadow: var(--shadow-press); transition-duration: var(--kc-t-press); }

/* focus: the backlight — a ring of light and a glow through the skirt */
.kc-key:focus { outline: none; }
.kc-key:focus-visible, .kc-key:has(> input:focus-visible) { outline: 3px solid var(--backlight); outline-offset: 3px; }
.kc-key:focus-visible::before, .kc-key:has(> input:focus-visible)::before { background: color-mix(in oklab, var(--backlight) 62%, var(--kc-skirt)); }

/* the click ring */
.kc-ripple { position: absolute; z-index: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; pointer-events: none; animation: kc-ripple var(--kc-t-ripple) var(--kc-snap); }
@keyframes kc-ripple { from { opacity: .6; transform: scale(.25); } to { opacity: 0; transform: scale(2.6); } }

/* sizes */
.kc-key--sm { --kc-line: 2.5px; --kc-inset: 5px; --kc-shoulder: 7px; --kc-band: 7px; --kc-travel: 3px; --kc-h: 30px; }
.kc-key--sm .kc-key__face { padding: 0 var(--space-3); font-size: 13px; }
.kc-key--sm .kc-icon { width: 16px; height: 16px; }
.kc-key--lg { --kc-inset: 7px; --kc-shoulder: 11px; --kc-band: 11px; --kc-travel: 5px; --kc-h: 48px; }
.kc-key--lg .kc-key__face { padding: 0 22px; font-size: 16px; }
.kc-key--lg .kc-icon { width: 20px; height: 20px; }
.kc-key--block { display: flex; width: 100%; }

/* variants */
.kc-key--primary { --kc-face: var(--lemon); --kc-on: var(--ink); }
.kc-key--danger { --kc-face: var(--coral); --kc-on: var(--ink); }
.kc-key--ghost { --kc-face: transparent; --kc-on: var(--text); }
.kc-key--ghost::before { opacity: 0; }
.kc-key--ghost .kc-key__face { border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .kc-key--ghost:where(:not(:disabled)):hover { transform: none; }
  .kc-key--ghost:where(:not(:disabled)):hover .kc-key__face { background: var(--plate-sunk); border-color: color-mix(in oklab, var(--ink) 25%, transparent); }
}
.kc-key--ghost:where(:not(:disabled)):active .kc-key__face, .kc-key--ghost.is-down .kc-key__face { transform: translateY(2px); background: var(--plate-sunk); }

/* disabled: a blank cap, half pressed, no shadow */
.kc-key:disabled, .kc-key[aria-disabled="true"] { cursor: not-allowed; --kc-face: var(--plate-sunk); --kc-on: var(--text-soft); --kc-skirt: var(--plate-sunk); }
.kc-key:disabled::before, .kc-key[aria-disabled="true"]::before { box-shadow: none; border-color: color-mix(in oklab, var(--ink) 30%, var(--mat)); }
.kc-key:disabled .kc-key__face, .kc-key[aria-disabled="true"] .kc-key__face { border-color: color-mix(in oklab, var(--ink) 30%, var(--mat)); border-style: dashed; transform: translateY(2px); }
.kc-key--ghost:disabled .kc-key__face { border-color: transparent; background: transparent; }

/* loading: three legends blink in turn */
.kc-dots { display: inline-flex; gap: 4px; }
.kc-dots i { width: 6px; height: 6px; border-radius: 2px; background: currentColor; animation: kc-dot 900ms var(--kc-snap) infinite; }
.kc-dots i:nth-child(2) { animation-delay: 150ms; }
.kc-dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes kc-dot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

/* icon keys: square caps */
.kc-key--icon .kc-key__face { width: var(--kc-h); padding: 0; }
.kc-key--icon.kc-key--round { --kc-r: 999px; }

/* hint inside a key (a shortcut) */
.kc-key__hint { display: inline-flex; gap: 3px; margin-left: 2px; margin-right: -4px; }

/* ---------- LED ---------- */
.kc-led { position: relative; display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: color-mix(in oklab, var(--ink) 18%, transparent); border: 2px solid var(--ink); box-sizing: content-box; transition: background-color var(--kc-t-hover) var(--kc-snap); }
.kc-led::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--mint); opacity: 0; }
.kc-led.is-on { background: var(--mint); }
.kc-led.is-on::after { animation: kc-led-on 420ms var(--kc-snap); }
@keyframes kc-led-on { from { opacity: .9; transform: scale(.5); } to { opacity: 0; transform: scale(1.4); } }
.kc-led--coral.is-on { background: var(--coral); }
.kc-led--coral::after { border-color: var(--coral); }
.kc-led--blink.is-on { animation: kc-blink 1.6s steps(1) infinite; }
@keyframes kc-blink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .35; } }

/* ---------- Shortcut: mini keycaps ---------- */
.kc-kbd { display: inline-flex; align-items: flex-start; gap: var(--space-1); vertical-align: middle; }
.kc-cap {
  --kc-face: var(--cap); --kc-skirt: color-mix(in oklab, var(--kc-face) 70%, var(--shade));
  position: relative; display: inline-flex; flex-direction: column; padding: 0 0 4px; box-sizing: border-box;
  color: var(--ink); font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .02em;
}
.kc-cap::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 4px; bottom: 0; background: var(--kc-skirt); border: 2px solid var(--ink); border-radius: 6px; box-shadow: var(--shadow-xs); }
.kc-cap > span { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-width: 12px; height: 16px; margin: 0 3px; padding: 0 3px; background: var(--kc-face); border: 2px solid var(--ink); border-radius: 5px; transition: transform var(--kc-t-release) var(--kc-spring); }
.kc-cap.is-down > span { transform: translateY(3px); transition: transform var(--kc-t-press) var(--kc-bottom-out); }
.kc-kbd--md .kc-cap { font-size: 13px; line-height: 16px; padding-bottom: 5px; }
.kc-kbd--md .kc-cap::before { top: 5px; border-radius: 7px; }
.kc-kbd--md .kc-cap > span { min-width: 16px; height: 22px; padding: 0 5px; border-radius: 6px; }
.kc-kbd--dark .kc-cap { --kc-face: var(--navy); color: var(--cap); }

/* ---------- Key (full-size keycap with legends) ---------- */
.kc-key--board { --kc-h: 46px; --kc-shoulder: 12px; --kc-band: 12px; --kc-travel: 5px; --kc-inset: 7px; --kc-r: 12px; width: calc(var(--kc-u, 1) * 58px); }
.kc-key--board .kc-key__face { padding: 0; font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: .02em; }
.kc-key--board .kc-key__sub { position: absolute; top: 3px; left: 6px; font-size: 10px; line-height: 12px; opacity: .8; }
.kc-key--board .kc-key__face.has-sub { align-items: flex-end; justify-content: flex-start; padding: 0 0 4px 7px; }
.kc-key--board .kc-led { position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border-width: 1.5px; }
.kc-keyrow { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; }

/* ---------- Toggle: a key switch that latches down, LED legend lit when on ---------- */
.kc-toggle { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: 14px; line-height: 18px; font-weight: 700; color: var(--text); }
.kc-toggle .kc-key { --kc-h: 34px; --kc-shoulder: 8px; --kc-band: 9px; }
.kc-toggle .kc-key__face { width: 58px; padding: 0 8px; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.kc-toggle .kc-key__legend { min-width: 22px; text-align: right; }
.kc-key:has(> input:checked) .kc-key__face { transform: translateY(var(--kc-travel)); transition: transform var(--kc-t-press) var(--kc-bottom-out); }
.kc-key:has(> input:checked)::before { box-shadow: var(--shadow-press); }
.kc-key:has(> input:checked) { transform: none !important; }
.kc-toggle.is-disabled { cursor: not-allowed; opacity: .55; }
.kc-toggle__text { display: flex; flex-direction: column; gap: 2px; }
.kc-toggle__hint { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--text-soft); }

/* ---------- Checkbox + Radio: mini keys ---------- */
.kc-check { display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; color: var(--text); font-size: 15px; line-height: 22px; }
.kc-check .kc-key { --kc-h: 22px; --kc-line: 2.5px; --kc-inset: 3px; --kc-shoulder: 5px; --kc-band: 5px; --kc-travel: 3px; --kc-r: var(--radius-sm); flex: none; margin-top: -2px; }
.kc-check .kc-key__face { width: 22px; padding: 0; }
.kc-check .kc-icon { width: 14px; height: 14px; stroke-width: 3; opacity: 0; transform: scale(.4); transition: opacity 120ms var(--kc-snap), transform var(--kc-t-release) var(--kc-spring); }
.kc-check .kc-key:has(> input:checked) { --kc-face: var(--mint); }
.kc-check .kc-key:has(> input:checked) .kc-icon { opacity: 1; transform: scale(1); }
.kc-check--radio .kc-key { --kc-r: 999px; }
.kc-check--radio .kc-key:has(> input:checked) { --kc-face: var(--lavender); }
.kc-check__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); opacity: 0; transform: scale(.2); transition: opacity 120ms var(--kc-snap), transform var(--kc-t-release) var(--kc-spring); }
.kc-check--radio .kc-key:has(> input:checked) .kc-check__dot { opacity: 1; transform: scale(1); }
.kc-check__text { display: flex; flex-direction: column; }
.kc-check__hint { font-size: 13px; line-height: 18px; color: var(--text-soft); }
.kc-check.is-done .kc-check__label { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--text-soft); }
.kc-check.is-disabled { cursor: not-allowed; opacity: .55; }
.kc-radiogroup { display: flex; flex-direction: column; gap: var(--space-3); border: 0; margin: 0; padding: 0; }
.kc-radiogroup legend { padding: 0; margin-bottom: var(--space-2); }

/* ---------- TextField ---------- */
.kc-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; width: 100%; max-width: 360px; }
.kc-field__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.kc-field__label { font-size: 14px; line-height: 18px; font-weight: 700; color: var(--text); }
.kc-field__box { position: relative; display: flex; align-items: center; gap: var(--space-2); box-sizing: border-box; min-height: 48px; padding: 0 8px 0 14px; background: var(--plate); border: 3px solid var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform var(--kc-t-hover) var(--kc-spring), box-shadow var(--kc-t-hover) var(--kc-spring); }
.kc-field__box > .kc-icon { color: var(--text-soft); }
.kc-field__input { flex: 1; min-width: 0; height: 42px; border: 0; padding: 0; margin: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; outline: none; }
.kc-field__input::placeholder { color: var(--text-soft); opacity: 1; }
textarea.kc-field__input { height: auto; min-height: 84px; padding: 10px 0; resize: vertical; line-height: 22px; }
.kc-field__box:focus-within { transform: translate(-1px, -1px); box-shadow: var(--shadow-md); outline: 3px solid var(--backlight); outline-offset: 3px; }
.kc-field__echo { flex: none; }
.kc-field__echo > span { min-width: 14px; }
.kc-field__hint { font-size: 13px; line-height: 18px; color: var(--text-soft); }
.kc-field__error { display: none; align-self: flex-start; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--coral); color: var(--ink); font-size: 13px; line-height: 18px; font-weight: 700; box-shadow: var(--shadow-xs); }
.kc-field__error .kc-icon { width: 16px; height: 16px; }
.kc-field.is-error .kc-field__error { display: inline-flex; animation: kc-pop-in var(--kc-t-pop) var(--kc-pop) backwards; }
.kc-field.is-error .kc-field__hint { display: none; }
.kc-field.is-error .kc-field__box { box-shadow: 3px 3px 0 var(--coral); border-color: var(--ink); }
.kc-field.is-shaking .kc-field__box { animation: kc-shake 300ms var(--kc-snap); }
@keyframes kc-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
.kc-field.is-disabled { opacity: .55; }
.kc-field.is-disabled .kc-field__box { box-shadow: none; background: var(--plate-sunk); border-style: dashed; }

/* ---------- Tabs: the active tab is the Pop label, popped and tilted ---------- */
.kc-tabs { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.kc-tabs__list { display: flex; gap: var(--space-1); flex-wrap: wrap; padding: 6px; align-self: flex-start; max-width: 100%; box-sizing: border-box; background: var(--plate); border: 3px solid var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.kc-tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-full); background: none; color: var(--text-soft); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.kc-tab::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--ink); opacity: 0; transform: scale(.7) rotate(0deg); transition: opacity 120ms var(--kc-snap), transform var(--kc-t-pop) var(--kc-pop); }
.kc-tab > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) { .kc-tab:not([aria-selected="true"]):hover { color: var(--text); background: var(--plate-sunk); } }
.kc-tab[aria-selected="true"] { color: var(--lemon); }
.kc-tab[aria-selected="true"]::before { opacity: 1; transform: scale(1) rotate(-2deg); }
.kc-tab:focus { outline: none; }
.kc-tab:focus-visible { outline: 3px solid var(--backlight); outline-offset: 2px; }
.kc-tab .kc-tab__count { font-family: var(--font-mono); font-size: 11px; font-weight: 500; opacity: .85; }
.kc-tabs__panel { min-width: 0; }
.kc-tabs__panel[hidden] { display: none; }
.kc-tabs__panel.is-in { animation: kc-rise var(--kc-t-pop) var(--kc-pop) backwards; }

/* ---------- SegmentedControl: a tray of keys, one held down ---------- */
.kc-seg { display: inline-flex; gap: 6px; padding: 7px 8px 6px; box-sizing: border-box; max-width: 100%; background: var(--plate-sunk); border: 3px solid var(--ink); border-radius: calc(var(--radius-md) + 4px); }
.kc-seg .kc-key { flex: 1 1 0; min-width: 0; }
.kc-seg .kc-key__face { padding: 0 14px; }
.kc-seg .kc-key.is-latched { --kc-face: var(--lemon); }
.kc-seg--block { display: flex; width: 100%; }

/* ---------- Card ---------- */
.kc-card { --kc-card: var(--plate); --kc-card-text: var(--text); --kc-card-soft: var(--text-soft); position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--kc-card); color: var(--kc-card-text); border: 3px solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); text-decoration: none; min-width: 0; }
.kc-card .kc-soft, .kc-card .kc-small { color: var(--kc-card-soft); }
.kc-card--coral { --kc-card: var(--coral); --kc-card-text: var(--ink); --kc-card-soft: var(--ink); }
.kc-card--mint { --kc-card: var(--mint); --kc-card-text: var(--ink); --kc-card-soft: var(--ink); }
.kc-card--lavender { --kc-card: var(--lavender); --kc-card-text: var(--ink); --kc-card-soft: var(--ink); }
.kc-card--lemon { --kc-card: var(--lemon); --kc-card-text: var(--ink); --kc-card-soft: var(--ink); }
.kc-card--navy { --kc-card: var(--navy); --kc-card-text: var(--cap); --kc-card-soft: var(--cap); }
.kc-card--cap { --kc-card: var(--cap); --kc-card-text: var(--ink); --kc-card-soft: #5c5446; }
.kc-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.kc-card__foot { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: auto; }
.kc-card--flush { padding: 0; overflow: hidden; }
.kc-card--sm { padding: var(--space-4); gap: var(--space-2); border-radius: 16px; }
/* interactive cards: hover lift without jitter, press flat (Pop) */
.kc-card--interactive { cursor: pointer; transition: transform var(--kc-t-hover) var(--kc-snap), box-shadow var(--kc-t-hover) var(--kc-snap); }
.kc-card--interactive::after { content: ""; position: absolute; inset: 0 -5px -5px 0; z-index: -1; border-radius: inherit; }
@media (hover: hover) and (pointer: fine) { .kc-card--interactive:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-xl); } }
.kc-card--interactive:active { transform: translate(3px, 3px); box-shadow: var(--shadow-press); transition-duration: 80ms; }
.kc-card--interactive:focus { outline: none; }
.kc-card--interactive:focus-visible { outline: 3px solid var(--backlight); outline-offset: 4px; }
.kc-card[aria-pressed="true"] { --kc-card: var(--lemon); --kc-card-text: var(--ink); --kc-card-soft: var(--ink); transform: translate(-2px, -2px) rotate(-1.2deg); box-shadow: var(--shadow-xl); }
.kc-card[aria-pressed="true"]:active { transform: translate(1px, 1px) rotate(-1.2deg); }

/* ---------- Badge + Tag ---------- */
.kc-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; box-sizing: border-box; border-radius: var(--radius-full); background: var(--ink); color: var(--lemon); font-family: var(--font-mono); font-size: 11px; line-height: 1; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.kc-badge[class*="kc-tone-"] { background: var(--kc-face); color: var(--kc-on); border: 2px solid var(--ink); box-shadow: var(--shadow-xs); }
.kc-badge .kc-icon { width: 12px; height: 12px; stroke-width: 2.75; }
.kc-badge .kc-led { width: 6px; height: 6px; border-width: 1.5px; border-color: currentColor; }
.kc-badge--count { min-width: 22px; justify-content: center; padding: 0 6px; letter-spacing: 0; }
.kc-badge.is-bump { animation: kc-bump 300ms var(--kc-spring); }
@keyframes kc-bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

.kc-tag { --kc-face: var(--cap); position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--kc-face); color: var(--ink); font-size: 13px; line-height: 1; font-weight: 700; box-shadow: var(--shadow-xs); white-space: nowrap; transition: transform var(--kc-t-hover) var(--kc-spring), box-shadow var(--kc-t-hover) var(--kc-spring), background-color var(--kc-t-hover) var(--kc-snap); }
button.kc-tag { font-family: inherit; cursor: pointer; }
.kc-tag::after { content: ""; position: absolute; inset: 0 -5px -5px 0; z-index: -1; }
@media (hover: hover) and (pointer: fine) { button.kc-tag:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); } }
button.kc-tag:active { transform: translate(2px, 2px); box-shadow: none; transition-duration: 80ms; }
.kc-tag[aria-pressed="true"] { --kc-face: var(--lemon); transform: rotate(-2deg); }
.kc-tag:focus { outline: none; }
.kc-tag:focus-visible { outline: 3px solid var(--backlight); outline-offset: 2px; }
.kc-tag__x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: -4px; padding: 0; border: 0; border-radius: 5px; background: none; color: inherit; cursor: pointer; }
.kc-tag__x .kc-icon { width: 13px; height: 13px; stroke-width: 3; }
.kc-tag__x:hover { background: var(--ink); color: var(--cap); }
.kc-tag__x:focus-visible { outline: 2px solid var(--backlight); outline-offset: 1px; }
.kc-tag.is-leaving { opacity: 0; transform: scale(.6) rotate(-6deg); transition: opacity 180ms var(--kc-snap), transform 200ms var(--kc-snap); pointer-events: none; }
[data-theme="dark"] .kc-tag { box-shadow: var(--shadow-xs); }

/* ---------- Avatar ---------- */
.kc-avatar { --kc-face: var(--lavender); position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; box-sizing: border-box; border: 3px solid var(--ink); border-radius: 50%; background: var(--kc-face); color: var(--kc-on, var(--ink)); font-family: var(--font-display); font-size: 15px; font-weight: 800; letter-spacing: -.02em; box-shadow: var(--shadow-xs); transition: transform var(--kc-t-hover) var(--kc-spring); }
.kc-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.kc-avatar--sm { width: 32px; height: 32px; font-size: 12px; border-width: 2.5px; }
.kc-avatar--lg { width: 64px; height: 64px; font-size: 22px; }
.kc-avatar .kc-led { position: absolute; right: -3px; bottom: -3px; width: 8px; height: 8px; }
.kc-avatar--lg .kc-led { width: 11px; height: 11px; right: -1px; bottom: -1px; }
.kc-stack { display: inline-flex; align-items: center; }
.kc-stack > .kc-avatar + .kc-avatar { margin-left: -12px; }
.kc-stack--sm > .kc-avatar + .kc-avatar { margin-left: -9px; }
@media (hover: hover) and (pointer: fine) { .kc-stack > .kc-avatar:hover, .kc-avatar--interactive:hover { transform: translateY(-4px) rotate(-4deg); z-index: 2; } }
.kc-stack__more { --kc-face: var(--cap); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0; }

/* ---------- Tooltip: the Pop label grown up ---------- */
.kc-tip { position: fixed; z-index: 1000; top: 0; left: 0; max-width: 240px; padding: 7px 10px; box-sizing: border-box; border-radius: 10px; background: var(--ink); color: var(--cap); font-size: 13px; line-height: 18px; font-weight: 600; pointer-events: none; display: flex; align-items: center; gap: 8px; transform-origin: 50% 100%; animation: kc-tip-in 220ms var(--kc-pop) backwards; }
[data-theme="dark"] .kc-tip { background: var(--cap); color: var(--ink); }
.kc-tip::after { content: ""; position: absolute; left: var(--kc-arrow, 50%); bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; border-radius: 2px; transform: rotate(45deg); }
.kc-tip.is-below { transform-origin: 50% 0; }
.kc-tip.is-below::after { bottom: auto; top: -5px; }
.kc-tip .kc-kbd { margin-right: -2px; }
.kc-tip--static { position: relative; animation: none; display: inline-flex; }
@keyframes kc-tip-in { from { opacity: 0; transform: translateY(4px) scale(.85); } }

/* ---------- Toast ---------- */
.kc-toaster { position: fixed; z-index: 900; top: var(--space-4); right: var(--space-4); display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.kc-toast { pointer-events: auto; position: relative; display: flex; align-items: flex-start; gap: var(--space-3); box-sizing: border-box; width: 100%; max-width: 380px; padding: 14px 14px 14px 14px; background: var(--plate); color: var(--text); border: 3px solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transition: opacity 200ms var(--kc-snap), transform 220ms var(--kc-snap); }
.kc-toast.is-in { animation: kc-drop-in var(--kc-t-pop) var(--kc-pop) backwards; }
.kc-toast.is-leaving { opacity: 0; transform: translateY(-10px) scale(.96); }
.kc-toast__icon { flex: none; }
.kc-toast__icon .kc-key { --kc-h: 30px; --kc-shoulder: 6px; --kc-band: 6px; --kc-inset: 4px; --kc-line: 2.5px; --kc-r: 10px; }
.kc-toast__icon .kc-key__face { width: 30px; padding: 0; }
.kc-toast__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.kc-toast__title { font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: -.015em; }
.kc-toast__text { font-size: 13px; line-height: 19px; color: var(--text-soft); }
.kc-toast__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); align-items: center; }
.kc-toast__close { flex: none; margin: -2px -2px 0 0; }
@keyframes kc-drop-in { from { opacity: 0; transform: translateY(-18px) scale(.94); } }

/* ---------- Modal ---------- */
.kc-modal { position: fixed; inset: 0; z-index: 800; display: flex; align-items: center; justify-content: center; padding: var(--space-4); box-sizing: border-box; }
.kc-modal[hidden] { display: none; }
.kc-modal__scrim { position: absolute; inset: 0; background: var(--scrim); animation: kc-fade var(--kc-t-hover) var(--kc-snap) backwards; }
.kc-modal__panel { position: relative; box-sizing: border-box; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column; background: var(--plate); color: var(--text); border: 3px solid var(--ink); border-radius: 24px; box-shadow: var(--shadow-xl); animation: kc-pop-in var(--kc-t-pop) var(--kc-pop) backwards; }
.kc-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-6) 0; }
.kc-modal__head .kc-col { gap: var(--space-2); }
.kc-modal__body { padding: var(--space-4) var(--space-6) var(--space-6); font-size: 15px; line-height: 24px; color: var(--text-soft); }
.kc-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4) var(--space-6); border-top: 3px solid var(--ink); background: var(--plate-sunk); border-radius: 0 0 21px 21px; }
.kc-modal__foot .kc-row { gap: var(--space-2); }
.kc-modal__esc { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-soft); }
.kc-modal.is-leaving .kc-modal__panel { opacity: 0; transform: scale(.95) translateY(6px); transition: opacity 160ms var(--kc-snap), transform 160ms var(--kc-snap); }
.kc-modal.is-leaving .kc-modal__scrim { opacity: 0; transition: opacity 160ms var(--kc-snap); }
.kc-modal__close .kc-icon { transition: transform var(--kc-t-release) var(--kc-spring); }
@media (hover: hover) and (pointer: fine) { .kc-modal__close:hover .kc-icon { transform: rotate(90deg); } }
.kc-modal--inline { position: relative; inset: auto; z-index: auto; padding: 0; }
.kc-modal--inline .kc-modal__scrim { display: none; }
@keyframes kc-pop-in { from { opacity: 0; transform: scale(.92) translateY(8px); } }
@keyframes kc-fade { from { opacity: 0; } }
@keyframes kc-rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Progress: a row of keys lighting up one by one ---------- */
.kc-progress { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.kc-progress__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-size: 14px; line-height: 18px; font-weight: 700; }
.kc-progress__value { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-soft); letter-spacing: .02em; }
.kc-progress__keys { display: grid; grid-template-columns: repeat(var(--kc-n, 10), minmax(0, 1fr)); gap: 5px; padding: 6px 7px 5px; background: var(--plate-sunk); border: 3px solid var(--ink); border-radius: var(--radius-md); }
.kc-pk { --kc-face: var(--cap); --kc-skirt: color-mix(in oklab, var(--kc-face) 70%, var(--shade)); position: relative; height: 22px; padding-bottom: 5px; }
.kc-pk::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; bottom: 0; background: var(--kc-skirt); border: 2px solid var(--ink); border-radius: 6px; transition: background-color 160ms var(--kc-snap); }
.kc-pk > i { position: relative; display: block; height: 100%; margin: 0 2px; box-sizing: border-box; background: var(--kc-face); border: 2px solid var(--ink); border-radius: 5px; transition: transform var(--kc-t-release) var(--kc-spring), background-color 160ms var(--kc-snap); }
.kc-pk.is-lit { --kc-face: var(--kc-lit, var(--mint)); }
.kc-pk.is-lit > i { transform: translateY(3px); transition: transform var(--kc-t-press) var(--kc-bottom-out), background-color 120ms var(--kc-snap); }
.kc-pk.is-lit::after { content: ""; position: absolute; z-index: 1; top: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ink); transform: translateY(3px); }
.kc-progress--sm .kc-pk { height: 14px; padding-bottom: 4px; }
.kc-progress--sm .kc-pk::after { display: none; }

/* ---------- Command palette ---------- */
.kc-palette { box-sizing: border-box; width: 100%; max-width: 560px; display: flex; flex-direction: column; background: var(--plate); color: var(--text); border: 3px solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; }
.kc-palette__search { display: flex; align-items: center; gap: var(--space-3); padding: 12px 14px 12px 18px; border-bottom: 3px solid var(--ink); }
.kc-palette__search .kc-icon { color: var(--text-soft); width: 20px; height: 20px; }
.kc-palette__input { flex: 1; min-width: 0; height: 36px; border: 0; padding: 0; background: transparent; color: var(--text); font: inherit; font-size: 17px; font-weight: 600; outline: none; letter-spacing: -.01em; }
.kc-palette__input::placeholder { color: var(--text-soft); opacity: 1; font-weight: 400; }
.kc-palette__list { list-style: none; margin: 0; padding: 8px 10px 10px; max-height: 340px; overflow: auto; }
.kc-palette__group { padding: 10px 8px 6px; }
.kc-palette__item { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 0 10px; border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer; font-size: 15px; font-weight: 600; transition: transform var(--kc-t-hover) var(--kc-spring), box-shadow var(--kc-t-hover) var(--kc-spring); }
.kc-palette__item .kc-palette__ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border: 2px solid var(--ink); border-radius: 8px; background: var(--kc-face, var(--cap)); color: var(--kc-on, var(--ink)); }
.kc-palette__item .kc-palette__ico .kc-icon { width: 16px; height: 16px; }
.kc-palette__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-palette__item[aria-selected="true"] { background: var(--lemon); color: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-xs); transform: translate(-1px, -1px); }
.kc-palette__item.is-down { transform: translate(1px, 1px); box-shadow: none; transition-duration: 80ms; }
.kc-palette__empty { padding: 28px 12px; text-align: center; color: var(--text-soft); font-size: 14px; }
.kc-palette__foot { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: 10px 16px; border-top: 3px solid var(--ink); background: var(--plate-sunk); font-size: 12px; color: var(--text-soft); }
.kc-palette__foot > span { display: inline-flex; align-items: center; gap: 6px; }
.kc-modal--palette { align-items: flex-start; padding-top: 12vh; }
.kc-modal--palette .kc-palette { animation: kc-pop-in var(--kc-t-pop) var(--kc-pop) backwards; position: relative; }

/* ---------- StatCard ---------- */
.kc-stat { width: 320px; max-width: 100%; }
.kc-stat__num { font-family: var(--font-display); font-size: 48px; line-height: 50px; font-weight: 800; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.kc-stat__row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.kc-bars { display: grid; grid-template-columns: repeat(var(--kc-n, 12), minmax(0, 1fr)); align-items: end; gap: 5px; height: 76px; margin-top: var(--space-2); }
.kc-bar { position: relative; box-sizing: border-box; height: var(--h); min-height: 10px; background: var(--kc-face, var(--lavender)); border: 2px solid var(--ink); border-radius: 5px 5px 3px 3px; box-shadow: inset 0 -5px 0 color-mix(in oklab, var(--kc-face, var(--lavender)) 70%, var(--shade)); transform-origin: 50% 100%; animation: kc-grow 420ms var(--kc-pop) backwards; animation-delay: calc(var(--i) * 35ms); }
.kc-bar.is-now { --kc-face: var(--lemon); }
.kc-bars__axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--kc-card-soft, var(--text-soft)); letter-spacing: .04em; }
@keyframes kc-grow { from { transform: scaleY(.1); opacity: 0; } }

/* ---------- QuickKeys keypad ---------- */
.kc-pad { width: 340px; max-width: 100%; }
.kc-pad__grid { display: grid; grid-template-columns: repeat(var(--kc-cols, 3), minmax(0, 1fr)); gap: 10px 8px; }
.kc-pad .kc-key { --kc-h: 66px; --kc-shoulder: 14px; --kc-band: 12px; --kc-travel: 5px; --kc-inset: 6px; }
.kc-pad .kc-key__face { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 2px; padding: 6px 8px 7px; font-size: 13px; line-height: 16px; white-space: normal; text-align: left; }
.kc-pad .kc-key__num { position: absolute; top: 5px; right: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; opacity: .8; }
.kc-pad .kc-key__face .kc-icon { width: 20px; height: 20px; }
.kc-pad__out { display: flex; align-items: center; gap: var(--space-2); min-height: 24px; font-size: 13px; color: var(--kc-card-soft, var(--text-soft)); }
.kc-pad__out strong { color: var(--kc-card-text, var(--text)); }
.kc-pad__out.is-in { animation: kc-rise 240ms var(--kc-pop) backwards; }

/* ---------- entrances (one-shot, backwards fill only) ---------- */
.kc-enter { animation: kc-pop-in var(--kc-t-pop) var(--kc-pop) backwards; animation-delay: calc(var(--i, 0) * 60ms); }

/* ---------- reduced motion: no movement, every state kept ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .kc-ripple, .kc-led::after { display: none; }
  .kc-key:where(:not(:disabled)):hover, .kc-card--interactive:hover, .kc-avatar:hover { transform: none !important; }
}

/* ---------- small extras ---------- */
.kc-stat__num.is-bump { display: inline-block; animation: kc-bump 300ms var(--kc-spring); }
.kc-key > .kc-badge { pointer-events: none; }
.kc-divider { height: 0; border: 0; border-top: 3px solid var(--ink); margin: 0; }
[data-theme="dark"] .kc-divider { border-top-color: #4b4f5a; }
.kc-card--lemon .kc-bar.is-now { --kc-face: var(--cap); }
[data-theme="dark"] .kc-key:disabled::before, [data-theme="dark"] .kc-key:disabled .kc-key__face,
[data-theme="dark"] .kc-key[aria-disabled="true"]::before, [data-theme="dark"] .kc-key[aria-disabled="true"] .kc-key__face { border-color: color-mix(in oklab, var(--text-soft) 55%, var(--mat)); }