/* ==========================================================================
   WORDCRAFT — daily English mastery section (/wordcraft/)
   Loaded only on wordcraft pages (see base.njk). Every colour is derived from
   tokens.css. The section's instrument is the editor's blue pencil (brand
   blue) with a highlighter wash (accent light) for the live mark.
   ========================================================================== */
:root {
  --wc-paper:       var(--color-bg);
  --wc-sheet:       var(--color-surface);
  --wc-sheet-2:     var(--color-surface-alt);
  --wc-ink:         var(--color-text-primary);
  --wc-ink-2:       var(--color-text-secondary);
  --wc-ink-3:       var(--color-text-muted);
  --wc-rule:        var(--color-border);
  --wc-rule-2:      var(--color-border-light);
  --wc-pencil:      var(--color-brand-light);
  --wc-pencil-ink:  var(--color-brand);
  --wc-pencil-wash: color-mix(in srgb, var(--color-brand-light) 10%, var(--color-surface));
  --wc-mark:        var(--color-accent);
  --wc-mark-wash:   var(--color-accent-light);
  --wc-ok:          var(--color-green);
  --wc-ok-wash:     color-mix(in srgb, var(--color-green) 12%, var(--color-surface));
  --wc-bad:         var(--color-red);
  --wc-bad-wash:    color-mix(in srgb, var(--color-red) 10%, var(--color-surface));
}

/* ---------- shared blocks ---------- */
.wc-charter { border: 1px solid var(--wc-rule); border-left: 4px solid var(--wc-pencil); background: var(--wc-sheet); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-6); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.wc-charter--wide { margin: var(--space-10) 0; }
.wc-charter__rule { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--wc-pencil); margin: 0 0 var(--space-1); }
.wc-charter p { margin: var(--space-1) 0; }
.wc-lede { color: var(--wc-ink-2); max-width: 44rem; }
.wc-note { font-size: var(--text-sm); color: var(--wc-ink-3); }
.wc-pdfbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; background: var(--wc-mark-wash); border: 1px solid var(--wc-rule); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; font-size: var(--text-sm); }

/* ---------- archive: today's pack ---------- */
.wc-today { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); background: var(--wc-sheet); border: 1px solid var(--wc-rule); border-radius: var(--radius-lg); padding: var(--space-8); margin: var(--space-8) 0; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.wc-today::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(var(--wc-pencil), var(--wc-mark)); }
.wc-today__title { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); line-height: var(--leading-tight); letter-spacing: -.02em; margin: 0 0 var(--space-2); }
.wc-today__title a { color: inherit; text-decoration: none; }
.wc-today__sub { margin: 0 0 var(--space-4); color: var(--wc-ink-2); }
.wc-facts { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--wc-ink-2); }
.wc-facts li { display: flex; align-items: baseline; }
.wc-facts li + li::before { content: "\00b7"; margin-right: var(--space-3); color: var(--wc-rule); font-weight: var(--font-bold); }
.wc-facts b { font-family: var(--font-mono); font-size: var(--text-lg); color: var(--wc-ink); font-weight: var(--font-medium); margin-right: .25rem; font-variant-numeric: tabular-nums; }
.wc-today__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.wc-btn-ghost { display: inline-flex; align-items: center; gap: .5rem; background: transparent; border: 1.5px solid var(--wc-pencil); color: var(--wc-pencil-ink); font-weight: var(--font-semibold); }
.wc-btn-ghost:hover { background: var(--wc-pencil-wash); border-color: var(--wc-pencil-ink); }
.wc-btn-ico { flex-shrink: 0; }
.wc-btn-meta { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-medium); background: var(--wc-pencil-wash); color: var(--wc-pencil-ink); padding: .12rem .5rem; border-radius: var(--radius-sm); white-space: nowrap; }
.wc-btn-ghost:hover .wc-btn-meta { background: var(--wc-sheet); }
.wc-today__streak { margin: var(--space-4) 0 0; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--wc-ok); }
.wc-today__inside { border-left: 1px solid var(--wc-rule); padding-left: var(--space-8); }
.wc-inside { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--wc-rule-2); border: 1px solid var(--wc-rule-2); border-radius: var(--radius-md); overflow: hidden; }
.wc-inside li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline; background: var(--wc-sheet); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); transition: background var(--transition-fast, .15s); }
.wc-inside li:hover { background: var(--wc-pencil-wash); }
.wc-inside__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--wc-mark); font-weight: var(--font-bold); font-variant-numeric: tabular-nums; }
.wc-inside__type { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--wc-ink-3); white-space: nowrap; justify-self: end; }
.wc-inside__head { color: var(--wc-ink); font-weight: var(--font-semibold); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-inside__head:hover { color: var(--wc-pencil-ink); text-decoration: underline; }
.wc-inside__gl .wc-inside__head { font-weight: var(--font-normal); color: var(--wc-ink-2); }
@media (max-width: 860px) { .wc-today { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-5); } .wc-today__inside { border-left: 0; padding-left: 0; border-top: 1px solid var(--wc-rule); padding-top: var(--space-5); } .wc-today__actions .btn { width: 100%; text-align: center; } }
@media (max-width: 420px) { .wc-inside__type { display: none; } .wc-inside__head { white-space: normal; } }

/* ---------- archive: blocks ---------- */
.wc-block { margin: var(--space-12) 0; }
.wc-block__head { max-width: 46rem; margin-bottom: var(--space-5); }
.wc-block__head h2 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); letter-spacing: -.01em; }
.wc-block__head p { margin: 0; color: var(--wc-ink-2); }
.wc-block__head--row { max-width: none; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.wc-block__head--row p { font-size: var(--text-sm); color: var(--wc-ink-3); }

/* timeline: segments sized by minutes */
/* The 45-minute session: a bar whose segment widths are the minutes, over
   seven EQUAL cards. The old design sized the cards themselves by minutes,
   which crushed the 2-minute "Log" card into an unreadable sliver. */
.wc-session__bar { display: grid; grid-template-columns: 4fr 5fr 13fr 8fr 7fr 6fr 2fr; gap: 2px; }
.wc-session__bar span { min-width: 0; height: 1.5rem; display: grid; place-items: center; background: var(--wc-pencil); border-radius: var(--radius-sm); }
.wc-session__bar span.is-lab { background: var(--wc-mark); }
.wc-session__bar i { font-style: normal; font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--color-text-inverse); opacity: .92; }
.wc-session__scale { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--wc-ink-3); }
.wc-session__scale span:nth-child(2) { color: var(--wc-ink-3); opacity: .8; }
.wc-session__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.wc-session__grid > div { background: var(--wc-sheet); border: 1px solid var(--wc-rule); border-radius: var(--radius-sm); padding: var(--space-3); min-width: 0; display: grid; gap: .3rem; align-content: start; transition: border-color var(--transition-fast, .15s), box-shadow var(--transition-fast, .15s); }
.wc-session__grid > div:hover { border-color: var(--wc-pencil); box-shadow: var(--shadow-sm); }
.wc-session__grid > div.is-lab { background: var(--wc-mark-wash); border-color: color-mix(in srgb, var(--wc-mark) 35%, var(--wc-rule)); }
.wc-session__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.wc-session__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--wc-ink-3); }
.wc-session__min { font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--wc-pencil-ink); background: var(--wc-pencil-wash); padding: .1rem .4rem; border-radius: var(--radius-sm); white-space: nowrap; }
.wc-session__grid > div.is-lab .wc-session__min { color: var(--wc-ink); background: color-mix(in srgb, var(--wc-mark) 18%, var(--wc-sheet)); }
.wc-session__grid b { font-size: var(--text-sm); }
.wc-session__grid small { font-size: var(--text-xs); color: var(--wc-ink-3); line-height: 1.35; }
@media (max-width: 1100px) { .wc-session__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .wc-session__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wc-session__bar span { height: 1.1rem; } }
@media (max-width: 480px) { .wc-session__bar i { display: none; } .wc-session__bar span { height: .7rem; } .wc-session__scale span:nth-child(2) { display: none; } }
@media (max-width: 420px) { .wc-session__grid { grid-template-columns: 1fr; } }

/* seven types */
.wc-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--space-3); }
.wc-type { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-3); background: var(--wc-sheet); border: 1px solid var(--wc-rule); border-radius: var(--radius-md); padding: var(--space-4); }
.wc-type__n { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--wc-pencil); font-weight: var(--font-medium); padding-top: .15rem; }
.wc-type h3 { font-size: var(--text-base); margin: 0 0 var(--space-1); }
.wc-type p { margin: 0; font-size: var(--text-sm); color: var(--wc-ink-2); line-height: var(--leading-normal); }
.wc-type__today { display: inline-block; margin-top: var(--space-2); font-size: var(--text-xs); font-family: var(--font-mono); background: var(--wc-mark-wash); color: var(--wc-ink); padding: .2rem .55rem; border-radius: var(--radius-sm); text-decoration: none; }
.wc-type__today:hover { background: var(--wc-pencil-wash); color: var(--wc-pencil-ink); }

/* skills strip */
.wc-skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-3); }
.wc-skill { background: var(--wc-sheet); border: 1px solid var(--wc-rule); border-radius: var(--radius-md); padding: var(--space-4); }
.wc-skill b { display: block; font-size: var(--text-base); margin-bottom: var(--space-1); }
.wc-skill span { font-size: var(--text-sm); color: var(--wc-ink-2); line-height: var(--leading-normal); }
.wc-skill i { display: block; font-style: normal; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--wc-pencil); margin-bottom: var(--space-2); }

/* process */
.wc-steps-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.wc-steps-flow li { background: var(--wc-sheet); border: 1px solid var(--wc-rule); border-radius: var(--radius-md); padding: var(--space-5); }
.wc-steps-flow__n { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--wc-pencil); color: var(--color-text-inverse); font-family: var(--font-mono); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.wc-steps-flow h3 { font-size: var(--text-base); margin: 0 0 var(--space-2); }
.wc-steps-flow p { margin: 0; font-size: var(--text-sm); color: var(--wc-ink-2); line-height: var(--leading-normal); }
@media (max-width: 760px) { .wc-steps-flow { grid-template-columns: 1fr; } }

/* pack cards */
.wc-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--space-3); }
.wc-pack { display: grid; gap: var(--space-3); background: var(--wc-sheet); border: 1px solid var(--wc-rule); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); text-decoration: none; color: var(--wc-ink); transition: border-color .15s, box-shadow .15s; }
.wc-pack:hover { border-color: var(--wc-pencil); box-shadow: var(--shadow-md); }
.wc-pack__date { font-weight: var(--font-bold); font-size: var(--text-lg); }
.wc-pack__heads { display: flex; flex-wrap: wrap; gap: .3rem; }
.wc-pack__heads span { font-size: var(--text-xs); background: var(--wc-sheet-2); border-radius: var(--radius-sm); padding: .2rem .5rem; color: var(--wc-ink-2); }
.wc-pack__meta { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-xs); color: var(--wc-ink-3); font-family: var(--font-mono); }
.wc-pack__go { color: var(--wc-pencil); font-family: var(--font-sans); font-weight: var(--font-semibold); font-size: var(--text-sm); }

/* faq */
.wc-faq { display: grid; gap: var(--space-2); max-width: 52rem; }
.wc-faq details { background: var(--wc-sheet); border: 1px solid var(--wc-rule); border-radius: var(--radius-md); padding: 0 var(--space-5); }
.wc-faq summary { cursor: pointer; padding: var(--space-4) 0; font-weight: var(--font-semibold); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.wc-faq summary::-webkit-details-marker { display: none; }
.wc-faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--wc-pencil); font-size: var(--text-lg); }
.wc-faq details[open] summary::after { content: "–"; }
.wc-faq details p { margin: 0 0 var(--space-4); color: var(--wc-ink-2); font-size: var(--text-sm); line-height: var(--leading-normal); }

/* ---------- practice lab (session) ---------- */
.wc-lab-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-4); }
.wc-lab-tabs button { border: 1px solid var(--wc-rule); background: var(--wc-sheet); border-radius: var(--radius-full); padding: .3rem .8rem; font: inherit; font-size: var(--text-xs); color: var(--wc-ink-2); cursor: pointer; }
.wc-lab-tabs button.active { background: var(--wc-pencil); border-color: var(--wc-pencil); color: var(--color-text-inverse); }
.wc-lab-tabs button.done::before { content: "✓ "; color: var(--wc-ok); }
.wc-lab-tabs button.active.done::before { color: var(--color-text-inverse); }
.wc-input { width: 100%; border: 1px solid var(--wc-rule); border-radius: var(--radius-sm); padding: var(--space-3); font: inherit; font-size: var(--text-lg); color: var(--wc-ink); background: var(--wc-sheet); }
.wc-input:focus-visible { outline: 2px solid var(--wc-pencil); outline-offset: 1px; }
.wc-input.right { border-color: var(--wc-ok); background: var(--wc-ok-wash); }
.wc-input.wrong { border-color: var(--wc-bad); background: var(--wc-bad-wash); }
.wc-speak { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; padding: var(--space-6) var(--space-4); }
.wc-speak .w { font-size: var(--text-4xl); font-weight: var(--font-bold); letter-spacing: -.01em; }
.wc-speak .ph { font-family: var(--font-mono); color: var(--wc-ink-3); }
.wc-speak .heard { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--wc-ink-2); min-height: 1.4em; }
.wc-cloze { font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.wc-cloze .blank { display: inline-block; min-width: 7em; border-bottom: 2px solid var(--wc-pencil); text-align: center; color: var(--wc-pencil); font-family: var(--font-mono); font-size: var(--text-base); }
.wc-lab-note { font-size: var(--text-sm); color: var(--wc-ink-3); margin-top: var(--space-2); }

/* ---------- static pack (read view) ---------- */
.wc-read { max-width: var(--max-width-content); margin: var(--space-6) auto; }
.wc-glossary { display: grid; gap: var(--space-3); }
.wc-gloss { background: var(--wc-sheet); border: 1px solid var(--wc-rule); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.wc-gloss__head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.wc-gloss__word { font-size: var(--text-xl); font-weight: var(--font-bold); }
.wc-gloss__pos { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--wc-ink-3); }
.wc-gloss__phon { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--wc-ink-3); }
.wc-gloss__meaning { margin: var(--space-2) 0; }
.wc-gloss__sentence { margin: var(--space-2) 0; padding: var(--space-2) var(--space-4); border-left: 3px solid var(--wc-mark); background: var(--wc-sheet-2); font-size: var(--text-base); color: var(--wc-ink-2); }
.wc-gloss__sentence mark, .wc-lesson mark { background: linear-gradient(transparent 40%, var(--wc-mark-wash) 40%); color: inherit; padding: 0 .1em; }
.wc-gloss__source { margin: 0; font-size: var(--text-sm); color: var(--wc-ink-3); }
.wc-entry { margin: var(--space-8) 0; padding-top: var(--space-4); border-top: 1px solid var(--wc-rule); }
.wc-entry__type { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--wc-pencil); margin: 0 0 var(--space-2); }
.wc-lesson .headword { font-size: var(--text-3xl); font-weight: var(--font-bold); line-height: var(--leading-tight); margin: 0 0 var(--space-1); letter-spacing: -.01em; }
.wc-lesson .phon { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--wc-ink-3); margin: 0 0 var(--space-4); }
.wc-lesson h3 { font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--wc-ink-3); margin: var(--space-6) 0 var(--space-2); font-weight: var(--font-semibold); }
.wc-lesson p { margin: var(--space-2) 0 var(--space-4); line-height: var(--leading-relaxed); }
.wc-lesson .tablewrap { overflow-x: auto; margin: var(--space-3) 0 var(--space-4); }
.wc-lesson table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.wc-lesson th, .wc-lesson td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--wc-rule); vertical-align: top; }
.wc-lesson th { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--wc-ink-3); font-weight: var(--font-medium); }
.wc-lesson td:first-child { font-weight: var(--font-semibold); white-space: nowrap; }
.wc-lesson tr:last-child td { border-bottom: none; }
.wc-lesson .pairgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--wc-rule); border: 1px solid var(--wc-rule); margin: var(--space-4) 0; font-size: var(--text-sm); }
.wc-lesson .pairgrid > div { background: var(--wc-sheet); padding: var(--space-3) var(--space-4); }
.wc-lesson .pairgrid .w { font-size: var(--text-xl); font-weight: var(--font-bold); }
.wc-lesson .pairgrid .root { font-size: var(--text-xs); color: var(--wc-ink-3); font-style: italic; margin-bottom: var(--space-2); }
@media (max-width: 560px) { .wc-lesson .pairgrid { grid-template-columns: 1fr; } }
.wc-lesson .redline { background: var(--wc-sheet-2); border-left: 3px solid var(--wc-pencil); padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; }
.wc-lesson .redline s { color: var(--wc-pencil); text-decoration-thickness: 1.5px; }
.wc-lesson .redline .tag { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--wc-pencil); display: block; margin-bottom: var(--space-1); }
.wc-sixty { border: 1px dashed var(--wc-rule); background: var(--wc-mark-wash); padding: var(--space-3) var(--space-4); margin-top: var(--space-4); font-size: var(--text-sm); }
.wc-sixty b { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--wc-ink-2); display: block; margin-bottom: var(--space-1); }
.wc-harvest { font-size: var(--text-sm); color: var(--wc-ink-3); border-top: 1px dashed var(--wc-rule); margin-top: var(--space-4); padding-top: var(--space-2); }
.wc-worksheet li { margin-bottom: var(--space-4); }
.wc-worksheet__opts { margin: var(--space-1) 0; }
.wc-worksheet__match { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.wc-worksheet__match ul { margin: 0; }
.wc-worksheet details { font-size: var(--text-sm); }
.wc-worksheet summary { cursor: pointer; color: var(--wc-pencil); font-weight: var(--font-medium); }

/* ---------- session app ---------- */
.wc-app { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: var(--space-6); margin: var(--space-4) 0 var(--space-8); align-items: start; }
.wc-app[hidden] { display: none; }
.wc-rail { position: sticky; top: calc(var(--header-height) + var(--space-3)); background: var(--wc-sheet); border: 1px solid var(--wc-rule); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.wc-brand h2 { font-size: var(--text-2xl); margin: 0; line-height: 1; letter-spacing: -.01em; }
.wc-brand .stroke { display: block; width: 7rem; height: 8px; margin: var(--space-1) 0; }
.wc-brand .sub { margin: 0; font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--wc-ink-3); }
.wc-clock { border: 1px solid var(--wc-rule); border-radius: var(--radius-sm); padding: var(--space-3); background: var(--wc-paper); }
.wc-clock__time { font-family: var(--font-mono); font-size: 2rem; font-weight: var(--font-medium); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.wc-clock__time.over { color: var(--wc-bad); }
.wc-clock__meta { display: flex; justify-content: space-between; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--wc-ink-3); font-family: var(--font-mono); }
.wc-clock__bar { height: 4px; background: var(--wc-rule-2); border-radius: 2px; margin: var(--space-2) 0 var(--space-3); overflow: hidden; }
.wc-clock__bar i { display: block; height: 100%; width: 0; background: var(--wc-pencil); transition: width .5s linear; }
.wc-clock__bar i.over { background: var(--wc-bad); }
.wc-clock__row { display: flex; gap: var(--space-2); align-items: center; }
.wc-clock__total { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--wc-ink-3); margin-left: auto; font-variant-numeric: tabular-nums; }
.wc-stations { display: flex; flex-direction: column; gap: 2px; }
.wc-stations button { display: grid; grid-template-columns: 1.4rem 1fr auto; align-items: center; gap: var(--space-2); text-align: left; background: none; border: 0; border-radius: var(--radius-sm); padding: var(--space-2); color: var(--wc-ink-2); font: inherit; cursor: pointer; }
.wc-stations button:hover { background: var(--wc-sheet-2); }
.wc-stations button.active { background: var(--wc-mark-wash); color: var(--wc-ink); }
.wc-stations button .n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--wc-ink-3); }
.wc-stations button .name { font-weight: var(--font-medium); font-size: var(--text-sm); }
.wc-stations button .min { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--wc-ink-3); }
.wc-stations button.done .n { color: var(--wc-ok); }
.wc-stations button.done .name { text-decoration: line-through; text-decoration-color: var(--wc-pencil); color: var(--wc-ink-3); }
.wc-stations button.active .name { text-decoration: none; color: var(--wc-ink); }
.wc-tabs { display: flex; border: 1px solid var(--wc-rule); border-radius: var(--radius-sm); overflow: hidden; }
.wc-tabs button { flex: 1; background: none; border: 0; padding: var(--space-2) 0; font: inherit; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--wc-ink-2); cursor: pointer; }
.wc-tabs button + button { border-left: 1px solid var(--wc-rule); }
.wc-tabs button.active { background: var(--wc-pencil); color: var(--color-text-inverse); }
.wc-streak { font-size: var(--text-sm); color: var(--wc-ink-3); line-height: 1.4; }
.wc-streak b { color: var(--wc-ink); }
.wc-stage { min-width: 0; }
.wc-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--wc-pencil); margin: 0 0 var(--space-2); }
.wc-title { font-size: var(--text-3xl); line-height: var(--leading-tight); margin: 0 0 var(--space-2); letter-spacing: -.01em; }
.wc-stationhead { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-4); }
.wc-stationhead .lede { margin: 0; color: var(--wc-ink-2); }
.wc-prog { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--wc-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wc-card { background: var(--wc-sheet); border: 1px solid var(--wc-rule); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-sm); }
.wc-card + .wc-card { margin-top: var(--space-4); }
.wc-btn { border: 1px solid var(--wc-rule); background: var(--wc-sheet); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); font: inherit; font-weight: var(--font-medium); font-size: var(--text-sm); color: var(--wc-ink); cursor: pointer; }
.wc-btn:hover { border-color: var(--wc-ink-3); }
.wc-btn--primary { background: var(--wc-pencil); border-color: var(--wc-pencil); color: var(--color-text-inverse); }
.wc-btn--primary:hover { background: var(--wc-pencil-ink); border-color: var(--wc-pencil-ink); }
.wc-btn--quiet { border-color: transparent; background: none; color: var(--wc-ink-2); }
.wc-btn--quiet:hover { background: var(--wc-sheet-2); }
.wc-btn:disabled { opacity: .45; cursor: default; }
.wc-btn.is-playing { border-color: var(--wc-bad); color: var(--wc-bad); }
.wc-btn:focus-visible, .wc-opt:focus-visible, .wc-tok:focus-visible, .wc-face:focus-visible { outline: 2px solid var(--wc-pencil); outline-offset: 2px; }
.wc-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.wc-row--end { justify-content: flex-end; }
.wc-row--between { justify-content: space-between; }
.wc-chip { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; padding: .2rem .5rem; border-radius: var(--radius-sm); background: var(--wc-sheet-2); color: var(--wc-ink-2); }
.wc-chip--ok { background: var(--wc-ok-wash); color: var(--wc-ok); }
.wc-chip--mark { background: var(--wc-mark-wash); color: var(--wc-ink); }
.wc-chip--pencil { background: var(--wc-pencil-wash); color: var(--wc-pencil-ink); }
.wc-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-sm); color: var(--wc-ink-3); }
.wc-count b { color: var(--wc-ink); font-weight: var(--font-medium); }
.wc-footnav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--wc-rule); }
.wc-meter { height: 6px; background: var(--wc-rule-2); border-radius: 3px; overflow: hidden; }
.wc-meter i { display: block; height: 100%; background: var(--wc-pencil); width: 0; transition: width .4s; }

/* flashcards */
.wc-intro { background: var(--wc-sheet); border: 1px solid var(--wc-rule); border-left: 4px solid var(--wc-mark); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.wc-intro__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.wc-intro__steps { margin: 0 0 var(--space-3); padding-left: 1.2rem; display: grid; gap: var(--space-1); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--wc-ink-2); }
.wc-intro__steps b { color: var(--wc-ink); }
.wc-intro kbd { font-family: var(--font-mono); font-size: var(--text-xs); border: 1px solid var(--wc-rule); border-bottom-width: 2px; border-radius: 3px; padding: 0 .35em; background: var(--wc-sheet-2); }
.wc-link { background: none; border: 0; padding: 0; font: inherit; color: var(--wc-pencil); text-decoration: underline; cursor: pointer; }
.wc-queue { height: 4px; background: var(--wc-rule-2); border-radius: 2px; overflow: hidden; margin-bottom: var(--space-3); }
.wc-queue i { display: block; height: 100%; width: 0; background: var(--wc-pencil); transition: width .3s; }
.wc-face__top { display: flex; justify-content: space-between; width: 100%; }
.wc-face__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--wc-ink-3); }
.wc-face__ans { width: 100%; border-top: 1px dashed var(--wc-rule); padding-top: var(--space-4); margin-top: var(--space-2); display: grid; gap: var(--space-2); justify-items: center; }
.wc-face.is-open { cursor: default; border-color: var(--wc-pencil); }
.wc-box { align-items: center; }
.wc-box__l { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--wc-ink-3); margin-left: var(--space-2); }
.wc-grade .wc-btn { display: grid; gap: .1rem; line-height: 1.2; padding: var(--space-2) var(--space-5); }
.wc-grade .wc-btn span { font-size: var(--text-xs); font-weight: var(--font-normal); opacity: .8; }
.wc-face { background: var(--wc-sheet); border: 1px solid var(--wc-rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); min-height: 16rem; padding: var(--space-5) var(--space-6) var(--space-6); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: var(--space-3); cursor: pointer; }
.wc-face .q { font-size: var(--text-2xl); font-weight: var(--font-semibold); line-height: var(--leading-snug); text-wrap: balance; }
.wc-face .a { font-size: var(--text-lg); line-height: var(--leading-normal); max-width: 34rem; text-wrap: balance; }
.wc-face .hint { font-size: var(--text-xs); color: var(--wc-ink-3); }
.wc-grade { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-4); }
.wc-grade .wc-btn { min-width: 9rem; }
.wc-box { display: flex; gap: .3rem; justify-content: center; margin-top: var(--space-4); }
.wc-box i { width: 1.6rem; height: 4px; background: var(--wc-rule); border-radius: 2px; }
.wc-box i.on { background: var(--wc-pencil); }

/* glossary station */
.wc-gitem { background: var(--wc-sheet); border: 1px solid var(--wc-rule); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.wc-gitem + .wc-gitem { margin-top: var(--space-2); }
.wc-gitem__head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; cursor: pointer; }
.wc-gitem__word { font-size: var(--text-xl); font-weight: var(--font-bold); }
.wc-gitem__state { margin-left: auto; }
.wc-gitem__body { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--wc-rule); }
.wc-gitem__body blockquote { margin: var(--space-2) 0; padding: var(--space-2) var(--space-4); border-left: 3px solid var(--wc-mark); background: var(--wc-sheet-2); color: var(--wc-ink-2); }
.wc-gitem__body blockquote mark { background: linear-gradient(transparent 40%, var(--wc-mark-wash) 40%); color: inherit; }
.wc-gitem__src { font-size: var(--text-sm); color: var(--wc-ink-3); margin: var(--space-2) 0; }

/* lesson stepper */
.wc-steps { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-4); }
.wc-steps button { border: 1px solid var(--wc-rule); background: var(--wc-sheet); border-radius: var(--radius-full); padding: .3rem .8rem; font: inherit; font-size: var(--text-xs); letter-spacing: .04em; color: var(--wc-ink-2); cursor: pointer; }
.wc-steps button.active { background: var(--wc-pencil); border-color: var(--wc-pencil); color: var(--color-text-inverse); }
.wc-steps button.read { border-color: var(--wc-ok); }
.wc-steps button.read::before { content: "✓ "; color: var(--wc-ok); }
.wc-steps button.active.read::before { color: var(--color-text-inverse); }

/* exercises */
.wc-ex { background: var(--wc-sheet); border: 1px solid var(--wc-rule); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-sm); }
.wc-ex .q { font-size: var(--text-lg); line-height: var(--leading-normal); margin: var(--space-2) 0 var(--space-4); }
.wc-ex .slot { display: inline-block; min-width: 5.5em; border-bottom: 2px solid var(--wc-pencil); text-align: center; color: var(--wc-pencil); font-style: italic; }
.wc-ex .slot.filled { background: var(--wc-mark-wash); border-bottom-color: transparent; color: var(--wc-ink); font-style: normal; padding: 0 .3em; }
.wc-ex .slot.filled.wrong { background: var(--wc-bad-wash); text-decoration: line-through; }
.wc-opts { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.wc-opt { text-align: left; border: 1px solid var(--wc-rule); background: var(--wc-paper); border-radius: var(--radius-sm); padding: var(--space-3); display: grid; grid-template-columns: 1.4rem 1fr; gap: var(--space-2); align-items: baseline; font: inherit; font-size: var(--text-base); color: var(--wc-ink); cursor: pointer; }
.wc-opt .k { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--wc-ink-3); }
.wc-opt:hover:not(:disabled) { border-color: var(--wc-pencil); }
.wc-opt.right { border-color: var(--wc-ok); background: var(--wc-ok-wash); }
.wc-opt.wrong { border-color: var(--wc-bad); background: var(--wc-bad-wash); }
.wc-opt:disabled { cursor: default; }
.wc-why { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--wc-pencil); background: var(--wc-sheet-2); font-size: var(--text-sm); line-height: var(--leading-normal); }
.wc-why.ok { border-left-color: var(--wc-ok); }
.wc-why.bad { border-left-color: var(--wc-bad); }
.wc-why .verdict { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; display: block; margin-bottom: var(--space-1); }
.wc-why.ok .verdict { color: var(--wc-ok); }
.wc-why.bad .verdict { color: var(--wc-bad); }
.wc-tokens { display: flex; flex-wrap: wrap; gap: .3rem .35rem; font-size: var(--text-lg); line-height: var(--leading-normal); margin: var(--space-2) 0 var(--space-4); }
.wc-tok { border: 0; background: none; padding: .05em .25em; border-radius: 3px; border-bottom: 1.5px dotted var(--wc-rule); font: inherit; color: inherit; cursor: pointer; }
.wc-tok:hover:not(:disabled) { background: var(--wc-pencil-wash); }
.wc-tok.right { background: var(--wc-bad-wash); text-decoration: line-through; text-decoration-color: var(--wc-bad); border-bottom-color: transparent; }
.wc-tok.wrong { background: var(--wc-sheet-2); color: var(--wc-ink-3); border-bottom-color: transparent; }
.wc-tok:disabled { cursor: default; }
.wc-fix { font-size: var(--text-base); }
.wc-fix ins { text-decoration: none; background: var(--wc-mark-wash); padding: 0 .2em; }
.wc-match { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); }
.wc-match .col { display: flex; flex-direction: column; gap: var(--space-2); }
.wc-m { border: 1px solid var(--wc-rule); background: var(--wc-paper); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); text-align: left; font: inherit; font-size: var(--text-sm); line-height: var(--leading-snug); min-height: 2.8rem; color: var(--wc-ink); cursor: pointer; }
.wc-m.left { font-weight: var(--font-semibold); font-size: var(--text-base); }
.wc-m.sel { border-color: var(--wc-pencil); background: var(--wc-pencil-wash); }
.wc-m.locked { border-color: var(--wc-ok); background: var(--wc-ok-wash); cursor: default; }
.wc-m.shake { animation: wc-shake .3s; border-color: var(--wc-bad); }
@keyframes wc-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (max-width: 560px) { .wc-match { grid-template-columns: 1fr; } }
.wc-order .pool, .wc-order .seq { display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 3rem; padding: var(--space-2); border: 1px dashed var(--wc-rule); border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
.wc-order .seq { border-style: solid; background: var(--wc-paper); }
.wc-order .it { border: 1px solid var(--wc-rule); background: var(--wc-sheet); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-sm); color: var(--wc-ink); cursor: pointer; }
.wc-order .seq .it::before { content: attr(data-n) ". "; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--wc-pencil); }
.wc-order .it.right { border-color: var(--wc-ok); background: var(--wc-ok-wash); }
.wc-order .it.wrong { border-color: var(--wc-bad); background: var(--wc-bad-wash); }
.wc-order .lab { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--wc-ink-3); margin: var(--space-2) 0 var(--space-1); }
.wc-ta { width: 100%; min-height: 6.5rem; resize: vertical; border: 1px solid var(--wc-rule); border-radius: var(--radius-sm); padding: var(--space-3); font: inherit; font-size: var(--text-base); line-height: 1.7; color: var(--wc-ink); background: var(--wc-sheet) repeating-linear-gradient(transparent 0, transparent calc(1.7rem - 1px), var(--wc-rule-2) calc(1.7rem - 1px), var(--wc-rule-2) 1.7rem); background-attachment: local; background-position: 0 var(--space-3); }
.wc-before { font-size: var(--text-lg); padding: var(--space-3) var(--space-4); background: var(--wc-sheet-2); border-radius: var(--radius-sm); margin: var(--space-2) 0 var(--space-3); }
.wc-before .tg, .wc-model .tg { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--wc-ink-3); display: block; margin-bottom: var(--space-1); }
.wc-model { border-left: 3px solid var(--wc-ok); padding: var(--space-3) var(--space-4); background: var(--wc-ok-wash); margin-top: var(--space-3); font-size: var(--text-base); }
.wc-model .tg { color: var(--wc-ok); }
.wc-flags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.wc-flag { font-family: var(--font-mono); font-size: var(--text-xs); padding: .2rem .5rem; border-radius: 3px; background: var(--wc-bad-wash); color: var(--wc-bad); }
.wc-flag--soft { background: var(--wc-mark-wash); color: var(--wc-ink-2); }
.wc-flag--good { background: var(--wc-ok-wash); color: var(--wc-ok); }
.wc-checklist { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-1); }
.wc-checklist li { display: grid; grid-template-columns: 1.4rem 1fr; gap: var(--space-2); align-items: baseline; font-size: var(--text-sm); }
.wc-checklist li i { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--wc-ink-3); font-style: normal; }
.wc-checklist li.pass i { color: var(--wc-ok); }
.wc-checklist li.fail i { color: var(--wc-bad); }

/* log + progress */
.wc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--space-3); margin: var(--space-4) 0 var(--space-5); }
.wc-stat { background: var(--wc-sheet); border: 1px solid var(--wc-rule); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.wc-stat .v { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--font-medium); line-height: 1.1; font-variant-numeric: tabular-nums; }
.wc-stat .l { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--wc-ink-3); margin-top: var(--space-1); }
.wc-mastery { display: grid; gap: var(--space-2); }
.wc-mastery .m { display: grid; grid-template-columns: 1fr 3.5rem; gap: var(--space-3); align-items: center; font-size: var(--text-sm); }
.wc-mastery .pct { font-family: var(--font-mono); font-size: var(--text-sm); text-align: right; font-variant-numeric: tabular-nums; }
.wc-boxes { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); margin-top: var(--space-3); }
.wc-boxes div { border: 1px solid var(--wc-rule); border-radius: var(--radius-sm); padding: var(--space-2); text-align: center; }
.wc-boxes .v { font-family: var(--font-mono); font-size: var(--text-xl); }
.wc-boxes .l { font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--wc-ink-3); }
.wc-hist { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.wc-hist li { display: grid; grid-template-columns: 7rem 1fr auto; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--wc-rule-2); }
.wc-hist .dt { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--wc-ink-2); }

@media (max-width: 900px) {
  .wc-app { grid-template-columns: 1fr; }
  .wc-rail { position: static; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "brand clock" "tabs tabs" "stations stations" "streak streak"; gap: var(--space-3); }
  .wc-brand { grid-area: brand; } .wc-clock { grid-area: clock; } .wc-tabs { grid-area: tabs; } .wc-stations { grid-area: stations; } .wc-streak { grid-area: streak; }
  .wc-stations { flex-direction: row; overflow-x: auto; gap: var(--space-1); padding-bottom: 2px; }
  .wc-stations button { grid-template-columns: auto auto; white-space: nowrap; flex: 0 0 auto; }
  .wc-stations button .n { display: none; }
  .wc-clock__time { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .wc-m.shake { animation: none; } .wc-clock__bar i, .wc-meter i { transition: none; } }

/* register, Hindi gloss, ledger, clinic, CSAT */
.wc-hi { font-size: var(--text-sm); color: var(--wc-ink-2); margin: 0 0 var(--space-2); }
.wc-chip--bad { background: var(--wc-bad-wash); color: var(--wc-bad); }
.wc-gloss__reg { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; padding: .15rem .45rem; border-radius: var(--radius-sm); margin-left: var(--space-2); }
.wc-gloss__reg--gs { background: var(--wc-ok-wash); color: var(--wc-ok); }
.wc-gloss__reg--essay { background: var(--wc-mark-wash); color: var(--wc-ink-2); }
.wc-gloss__reg--avoid { background: var(--wc-bad-wash); color: var(--wc-bad); }
.wc-gloss__hi { font-size: var(--text-sm); color: var(--wc-ink-2); margin: var(--space-1) 0 var(--space-2); }
.wc-ledger__t { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.wc-ledger__t th { text-align: left; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--wc-ink-3); padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--wc-rule); }
.wc-ledger__t td { padding: var(--space-2); border-bottom: 1px solid var(--wc-rule-2); vertical-align: top; }
.wc-ledger__n { font-family: var(--font-mono); color: var(--wc-bad); white-space: nowrap; }
.wc-ledger__cards { margin: 0; padding-left: 1.1rem; font-size: var(--text-sm); display: grid; gap: var(--space-1); }
.wc-nudge { border-left: 4px solid var(--wc-mark); }
.wc-passage { background: var(--wc-sheet-2); border-left: 3px solid var(--wc-pencil); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.wc-passage-fold { margin-bottom: var(--space-3); font-size: var(--text-sm); } .wc-passage-fold summary { cursor: pointer; color: var(--wc-pencil); }
.wc-flag--good { background: var(--wc-ok-wash); color: var(--wc-ok); }
@media print {
  body.wc-printing-ledger > *:not(#wordcraft-app), body.wc-printing-ledger .wc-rail, body.wc-printing-ledger .wc-stage > *:not(#wc-ledger) { display: none !important; }
  body.wc-printing-ledger #wordcraft-app { display: block !important; }
  body.wc-printing-ledger #wc-ledger { box-shadow: none; border: 0; }
  body.wc-printing-ledger #wc-print-ledger { display: none; }
}