/* ==========================================================================
   Typing course
   ========================================================================== */

.type-tabs { display: flex; gap: .3rem; flex-wrap: wrap; }

/* ---------------- course map ---------------- */

.unit {
  border: 1.5px solid var(--border-soft); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden;
}
.unit-head {
  display: flex; align-items: center; gap: .8rem; padding: .9rem 1.2rem;
  background: var(--surface-2); border-bottom: 1.5px solid var(--border-soft);
}
.unit-icon {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border-radius: 12px; background: var(--turquoise-soft); font-size: 22px;
}
.unit-title { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
.unit-blurb { font-size: .86rem; color: var(--ink-2); }
.unit-prog { margin-left: auto; text-align: right; min-width: 96px; }

.lesson-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: .6rem; padding: 1rem;
}
.lesson {
  display: flex; flex-direction: column; gap: .2rem; text-align: left;
  padding: .65rem .8rem; min-height: 74px; cursor: pointer;
  border-radius: var(--r); border: 2px solid var(--border);
  background: var(--surface); color: var(--ink); font: inherit;
  transition: transform .14s cubic-bezier(.2,.9,.3,1.4), border-color .14s, box-shadow .14s;
}
.lesson:hover { transform: translateY(-3px); border-color: var(--turquoise); box-shadow: var(--shadow-2); }
.lesson-name { font-family: var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1.2; }
.lesson-keys {
  font-family: var(--font-mono); font-size: .74rem; color: var(--ink-3);
  letter-spacing: .12em; text-transform: uppercase;
}
.lesson-stars { color: var(--gold); font-size: .95rem; letter-spacing: .05em; margin-top: auto; }
.lesson-stars .off { color: var(--border); }
.lesson.done { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.lesson.gold { background: var(--gold-soft); border-color: var(--gold); }
.lesson-best { font-size: .72rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------------- the drill itself ---------------- */

.drill-wrap { display: grid; gap: 1rem; }

.drill-hud {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
}
.drill-stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 82px; padding: .45rem .8rem; border-radius: var(--r);
  background: var(--surface-2); border: 1.5px solid var(--border-soft);
}
.drill-stat b { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.drill-stat small { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); font-weight: 700; }

.text-view {
  font-family: var(--font-mono); font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  line-height: 2.05; letter-spacing: .01em;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); padding: 1.2rem 1.4rem;
  max-height: 44vh; overflow-y: auto; position: relative;
  box-shadow: var(--shadow-1); scroll-behavior: smooth;
  cursor: text; user-select: none;
}
.text-view:focus-within { border-color: var(--turquoise); box-shadow: 0 0 0 3px var(--turquoise-soft); }
.tw { display: inline-block; white-space: nowrap; }
.tc { color: var(--ink-3); position: relative; border-radius: 3px; transition: color .06s; }
/* the space ends an inline-block word, where trailing whitespace is trimmed —
   `pre` keeps it, so words do not run together */
.tc-space { white-space: pre; }
.tc.ok { color: var(--ink); }
.tc.fixed { color: var(--warn); }
.tc.bad { color: var(--bad); background: var(--bad-soft); }
.tc.tc-space.bad { background: var(--bad); }
.tc.cursor::before {
  content: ''; position: absolute; left: -2px; top: -.14em; bottom: -.14em; width: 3px;
  background: var(--turquoise); border-radius: 2px;
  animation: caret 1.05s steps(1) infinite;
}
@keyframes caret { 50% { opacity: .15; } }

.hidden-input {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; left: -9999px;
}

.drill-focus-note {
  display: grid; place-items: center; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(2px); border-radius: var(--r-lg);
  font-family: var(--font-display); font-weight: 700; color: var(--ink-2);
  cursor: pointer; z-index: 2;
}

/* ---------------- on-screen keyboard ---------------- */

.kb {
  display: grid; gap: 5px; width: 100%; max-width: 780px; margin-inline: auto;
  background: var(--surface-2); padding: 10px; border-radius: var(--r-lg);
  border: 1.5px solid var(--border-soft);
}
.kb-row { display: flex; gap: 5px; justify-content: center; }
.kb-k {
  flex: 1 1 0; min-width: 0; height: clamp(30px, 5.2vw, 46px);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(.62rem, 1.5vw, .92rem);
  border-radius: 8px; background: var(--surface); border: 1.5px solid var(--border);
  color: var(--ink-2); transition: all .08s; position: relative;
}
.kb-k.home { border-bottom: 3.5px solid var(--gold); }
.kb-k.next {
  background: var(--turquoise); border-color: var(--turquoise); color: #fff;
  transform: translateY(-3px) scale(1.07); box-shadow: var(--shadow-2); z-index: 2;
}
.kb-k.shift-next { background: var(--gold); border-color: var(--gold-deep); color: #2a1d05; }
.kb-k.down { transform: translateY(2px); background: var(--surface-3); }
.kb-k.miss { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.kb-k[data-w='1_5'] { flex-grow: 1.5; }
.kb-k[data-w='1_75'] { flex-grow: 1.75; }
.kb-k[data-w='2_25'] { flex-grow: 2.25; }
.kb-k[data-w='6_25'] { flex-grow: 6.25; }

/* finger coloring */
.kb-k[data-f='l4'] { --fc: #e05b3c; }
.kb-k[data-f='l3'] { --fc: #d99a2b; }
.kb-k[data-f='l2'] { --fc: #22c55e; }
.kb-k[data-f='l1'] { --fc: #2f4f9e; }
.kb-k[data-f='r1'] { --fc: #a855f7; }
.kb-k[data-f='r2'] { --fc: #14958f; }
.kb-k[data-f='r3'] { --fc: #ec4899; }
.kb-k[data-f='r4'] { --fc: #8b5e3c; }
.kb.fingers .kb-k[data-f] { border-bottom: 3.5px solid var(--fc); }

/* ---------------- hands ---------------- */

.hands { display: flex; gap: 2rem; justify-content: center; }
.hand { display: flex; gap: 3px; align-items: flex-end; }
.hand.right { flex-direction: row-reverse; }
.finger {
  width: 15px; border-radius: 7px 7px 4px 4px;
  background: var(--surface-3); border: 1.5px solid var(--border);
  transition: all .12s;
}
.finger.f1 { height: 46px; } .finger.f2 { height: 56px; }
.finger.f3 { height: 52px; } .finger.f4 { height: 40px; }
.finger.thumb { height: 26px; width: 22px; margin-inline: 4px; }
.finger.on { background: var(--turquoise); border-color: var(--turquoise); transform: translateY(-5px); box-shadow: var(--shadow-2); }
.finger.on-shift { background: var(--gold); border-color: var(--gold-deep); transform: translateY(-5px); }

/* ---------------- heat map ---------------- */

.heat-kb .kb-k { color: var(--ink); font-size: .72rem; }
.heat-legend { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .8rem; }
.heat-swatch { width: 22px; height: 14px; border-radius: 4px; display: inline-block; }

/* ---------------- results & certificate ---------------- */

.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .8rem; }

.wpm-chart { width: 100%; height: 140px; }

.certificate {
  background: var(--surface); border: 3px double var(--gold);
  border-radius: var(--r-lg); padding: 2rem 1.6rem; text-align: center;
  position: relative; overflow: hidden;
}
.certificate::before {
  content: '☥'; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 260px; color: var(--gold); opacity: .05; pointer-events: none;
}
.certificate > * { position: relative; }
.cert-title { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; letter-spacing: .02em; }
.cert-name { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; color: var(--lapis); margin: .4rem 0; }
.cert-line { font-size: 1rem; color: var(--ink-2); }
.cert-wpm { font-family: var(--font-display); font-weight: 800; font-size: 3.4rem; color: var(--gold-deep); line-height: 1; }

@media (max-width: 720px) {
  .hands { display: none; }
  .text-view { font-size: 1.05rem; line-height: 1.95; padding: .9rem; }
}