/* tt: reset, design tokens and the page skeleton.
 *
 * The interface is quiet on purpose. Surfaces are flat with a hairline border,
 * controls carry no chrome until you hover them, and the only strong colour on
 * screen is the accent on text you have typed correctly. Depth is reserved for
 * the two things that are physically raised: the keyboard and floating panels.
 */

:root {
  --bg: #26282a;
  --panel: #2e3134;
  --sub: #3b3e42;
  --untyped: #949a9c;
  --dim: color-mix(in srgb, var(--untyped) 58%, var(--text));
  --text: #e2e5e4;
  --accent: #c7fb92;
  --error: #f0a9a9;
  --error-extra: #77494b;
  --caret: var(--accent);

  --font: 'Ubuntu Mono', 'Ubuntu Sans Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, Consolas, monospace;
  --ui-font: Ubuntu, 'Ubuntu Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --size-user: 30px;
  --size: min(var(--size-user), 7.5vw);
  --line: 1.6;
  --row: calc(var(--size) * var(--line) + 2px);
  --kb-height: clamp(150px, 40vh, 340px);

  /* one type scale for the whole interface */
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 21px;
  --track: .12em;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 34px;

  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --gap: 14px;
  --t: 120ms cubic-bezier(.4, 0, .2, 1);

  /* surface tints, derived so every theme gets them for free */
  --hover: color-mix(in srgb, var(--text) 8%, transparent);
  --tint: color-mix(in srgb, var(--accent) 8%, transparent);
  --tint-strong: color-mix(in srgb, var(--accent) 20%, transparent);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .18);
  --shadow-lift: 0 10px 34px rgba(0, 0, 0, .34);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
*::selection { background: var(--accent); color: var(--bg); }

html, body { height: 100%; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui-font);
  font-size: var(--fs-md);
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background var(--t), color var(--t);
}

/* paper grain across the page, behind everything */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 200px 200px;
  opacity: .22;
}

button, input, select, textarea, optgroup {
  font: inherit;
  font-family: var(--ui-font);
  font-size: var(--fs-md);
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}
button { cursor: pointer; }
a { color: var(--accent); text-decoration: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }

#hiddenInput {
  position: fixed; top: 0; left: 0;
  width: 1px; height: 1px; opacity: 0;
  border: 0; padding: 0; margin: 0; resize: none;
  z-index: -1; caret-color: transparent;
}

/* ---- the control surface ----------------------------------------------
   Quiet by default, legible always. No pseudo-element ever covers a label. */
.tab, .icon-btn, .cfg-btn, .text-btn, .segmented button, .lesson-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--dim);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  transition: color var(--t), background var(--t), box-shadow var(--t);
}
.tab:hover, .icon-btn:hover, .cfg-btn:hover,
.text-btn:hover, .segmented button:hover, .lesson-row:hover {
  color: var(--text);
  background: var(--hover);
}
.tab.is-active, .icon-btn.is-on, .cfg-btn.is-on,
.segmented button.is-on, .lesson-row.is-on {
  color: var(--accent);
  background: var(--tint);
}
.tab:focus-visible, .icon-btn:focus-visible, .cfg-btn:focus-visible,
.text-btn:focus-visible, .segmented button:focus-visible, .lesson-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* the one filled control per screen */
.text-btn.primary {
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}
.text-btn.primary:hover { background: var(--accent); color: var(--bg); filter: brightness(1.07); }
.text-btn.danger { color: var(--error); }
.text-btn.danger:hover { color: var(--error); background: color-mix(in srgb, var(--error) 14%, transparent); }

/* ---- surfaces ---------------------------------------------------------- */
.configbar, .res-cell, .unit-card, .res-chartwrap, .theme-item, .heat-key {
  background: var(--panel);
  border: 1px solid var(--sub);
  border-radius: var(--r);
}

/* ---- skeleton ---------------------------------------------------------- */
#app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
  width: 100%;
}

.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  user-select: none;
}

.brand { display: flex; align-items: baseline; gap: 9px; }
.brand-mark {
  font-family: var(--font);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.05em;
  color: var(--accent);
  line-height: 1;
}

.tabs { display: flex; gap: 2px; margin-left: var(--sp-2); }
.tab { padding: 6px 14px; color: var(--text); font-weight: 500; }
.tab:not(.is-active):hover { color: var(--text); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.icon-btn { padding: 0; width: 32px; height: 32px; justify-content: center; color: var(--text); }
.icon-btn svg { display: block; }
.icon-btn.is-disabled { color: var(--dim); opacity: .45; }
.icon-btn.is-disabled:hover { background: transparent; color: var(--dim); }

.warn {
  font-size: var(--fs-xs);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--bg);
  background: var(--error);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.stage {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 clamp(16px, 5vw, 64px);
  overflow: hidden;
}

/* the keyboard sits straight on the page, no tray behind it */
.keyboard-area {
  position: relative;
  z-index: 1;
  background: transparent;
  height: var(--kb-height);
  min-height: 0;
  padding: var(--sp-2) clamp(10px, 3vw, 34px) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  overflow: hidden;
  transition: opacity var(--t);
}
.keyboard-area.is-off { height: 0; padding: 0; opacity: 0; pointer-events: none; overflow: hidden; }

.kb-wrap { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.kb-foot {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  font-size: var(--fs-sm); color: var(--dim); min-height: 18px;
}

.focus-veil {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  backdrop-filter: blur(3px);
  z-index: 40;
  cursor: pointer;
  font-size: var(--fs-lg);
  color: var(--text);
}
@supports not (backdrop-filter: blur(3px)) { .focus-veil { background: var(--bg); opacity: .94; } }

.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .5); }

* { scrollbar-width: thin; scrollbar-color: var(--sub) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--sub); border-radius: 5px; }
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}