/* ============================================================
   Typing Trainer — chrome.net.ua/typing
   Reuses the portfolio "Engineering Console" design tokens.
   ============================================================ */

:root {
  --paper:   #ece8df;
  --paper-2: #e4dfd3;
  --ink:     #17150f;
  --ink-2:   #45413a;
  --mute:    #8b867b;
  --rule:    #cfc9bb;
  --rule-2:  #d8d2c5;
  --sig:     #c1440e;
  --sig-deep:#9c350a;
  --good:    #4b7a2f;   /* correct char */
  --bad:     #c1440e;   /* wrong char   */
  --stage-bg:     #ffffff;   /* typing surface — white (light theme) */
  --type-pending: #33302b;   /* text still to type — warm charcoal   */
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html[data-theme="dark"] {
  --paper:   #0c0c0b;
  --paper-2: #151412;
  --ink:     #f1eee6;
  --ink-2:   #c4c0b5;
  --mute:    #797569;
  --rule:    #2a2823;
  --rule-2:  #211f1b;
  --sig:     #e2591d;
  --sig-deep:#c5481a;
  --good:    #8fbf5f;
  --bad:     #e2591d;
  --stage-bg:     var(--paper-2);  /* dark theme keeps the panel look */
  --type-pending: var(--mute);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink-2);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* engineering grid wash */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 100% 100%, 88px 100%;
  opacity: .16;
}
html[data-theme="dark"] body::before { opacity: .30; }
::selection { background: var(--sig); color: #fff7f0; }
b { color: var(--ink); font-weight: 600; }

/* ---------- top bar ---------- */
.topbar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 26px; border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-mark {
  font-family: var(--mono); font-weight: 700; font-size: 1rem; color: #fff7f0;
  background: var(--sig); padding: 3px 8px 4px; letter-spacing: -.02em;
}
.brand-txt { font-family: var(--mono); font-size: .92rem; letter-spacing: .02em; color: var(--ink); }
.top-actions { display: flex; align-items: center; gap: 16px; }
.back-link { font-family: var(--mono); font-size: .78rem; color: var(--mute); text-decoration: none; }
.back-link:hover { color: var(--sig); }
.theme-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--mono); font-size: .74rem; color: var(--ink-2);
  background: transparent; border: 1px solid var(--rule); padding: 5px 10px;
}
.theme-btn:hover { border-color: var(--sig); color: var(--sig); }
.tdot { width: 9px; height: 9px; background: var(--sig); border-radius: 50%; display: inline-block; }

/* ---------- layout ---------- */
.wrap {
  position: relative; z-index: 1;
  max-width: 900px; margin: 0 auto; padding: 40px 26px 70px;
}
.kicker {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 22px;
}
.kicker .sig { color: var(--sig); font-weight: 600; }

/* ---------- controls ---------- */
.controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  padding: 14px 16px; margin-bottom: 22px;
  border: 1px solid var(--rule); background: var(--paper-2);
}
.ctl-group { display: flex; align-items: center; gap: 7px; }
.ctl-lbl { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; color: var(--mute); letter-spacing: .05em; }
.chip {
  font-family: var(--mono); font-size: .8rem; color: var(--ink-2);
  background: var(--paper); border: 1px solid var(--rule); cursor: pointer;
  padding: 5px 11px; transition: border-color .15s, color .15s, background .15s;
}
.chip:hover { border-color: var(--sig); color: var(--sig); }
.chip.is-on { background: var(--sig); border-color: var(--sig); color: #fff7f0; }
.chip.ghost { margin-left: auto; color: var(--mute); }
.chip.solid { background: var(--sig); border-color: var(--sig); color: #fff7f0; padding: 9px 18px; margin-top: 22px; }
.chip.solid:hover { background: var(--sig-deep); color: #fff7f0; }

/* ---------- live readout ---------- */
.readout {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); margin-bottom: 22px;
}
.stat { background: var(--paper-2); padding: 14px 12px; text-align: center; }
.stat-num { display: block; font-family: var(--mono); font-size: 1.9rem; font-weight: 600; color: var(--ink); line-height: 1.05; }
.stat-lbl { display: block; font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); margin-top: 4px; }

/* ---------- typing stage ---------- */
.type-stage {
  position: relative; border: 1px solid var(--rule); background: var(--stage-bg);
  padding: 30px 30px 34px; outline: none; cursor: text;
}
.text {
  font-family: var(--mono); font-size: 1.5rem; line-height: 2.05; letter-spacing: .01em;
  color: var(--type-pending); max-height: 6.3em; overflow: hidden; user-select: none;
  word-break: break-word;
}
.ch { position: relative; transition: color .05s; }
.ch.good { color: var(--good); }
.ch.bad  { color: var(--bad); background: rgba(193, 68, 14, .13); }
.ch.caret::before {
  content: ""; position: absolute; left: -1px; top: .12em; bottom: .12em; width: 2px;
  background: var(--sig); animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.hidden-input {
  position: absolute; opacity: 0; pointer-events: none; left: -9999px; width: 1px; height: 1px;
}
.focus-note {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .8rem; color: var(--mute);
  background: color-mix(in srgb, var(--stage-bg) 72%, transparent);
  pointer-events: none;
}

/* ---------- results ---------- */
.results { border: 1px solid var(--sig); background: var(--paper-2); padding: 28px 26px 30px; }
.res-title { font-family: var(--mono); font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sig); margin-bottom: 20px; }
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.res-cell { background: var(--paper); padding: 18px 14px; text-align: center; }
.res-cell.big { grid-column: span 1; }
.res-num { display: block; font-family: var(--mono); font-size: 1.7rem; font-weight: 600; color: var(--ink); }
.res-cell.big .res-num { font-size: 2.5rem; color: var(--sig); }
.res-lbl { display: block; font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--mute); margin-top: 5px; }

/* ---------- hint ---------- */
.hint { font-family: var(--mono); font-size: .76rem; color: var(--mute); margin-top: 20px; }

/* ---------- responsive ---------- */
@media (max-width: 620px) {
  .wrap { padding: 26px 16px 60px; }
  .readout { grid-template-columns: repeat(2, 1fr); }
  .res-grid { grid-template-columns: repeat(2, 1fr); }
  .text { font-size: 1.25rem; line-height: 1.95; max-height: 5.9em; }
  .stat-num { font-size: 1.6rem; }
  .controls { gap: 8px 14px; }
  .chip.ghost { margin-left: 0; }
}