/* ---------- writing-mood: /writing chrome only, not the exam surface ---------- Loaded after style.css AND hub-dash.css (see index.html ) — hub-dash.css already gives #taskChooser's reused .hub-card/.dash-* markup the sticker treatment, this file adds only what's specific to /writing: the header, the band-summary card, the stepper, and the chart-banner label. Deliberately does NOT touch: #essay-body, .essay-legend, .highlight-btn.*, #spellingPanel/#mechanicsPanel, aside.sidebar-col and every #panel* inside it, .correction-input, .chart-banner-body, #chartField/#chartPreviewWrap/ #chartPreview/#chartClearBtn, the banners, .loading-overlay, #feedbackWidget. That is the surface the student reads and writes in for the whole session — it stays light and exam-plain, no ink-shadow cards, no dark fills, no grid texture. See the plan doc for the full "must stay as-is" list. */ /* Wordmark: heavier Archivo weight, matching how .about-nav-logo commits to the display face rather than a lighter system weight. */ .logo-text p:first-child { font-weight: var(--weight-black); } /* A soft inset highlight along the top edge of the dark header bar, echoing the inset highlight/shadow layering .about-nav and .login-mode header.top use on their frosted pill — restrained here since this header is a solid opaque bar, not a floating glass pill. */ /* The inset white highlight that used to sit here is gone: it existed to lift the top edge of a NAVY bar, and the bar is white now (style.css). On white it was invisible at best. */ /* The band-summary card: a light card floating on the dark header bar is the one spot on this page that can literally reuse the login/hub sticker card language without touching the light working surface below it. */ /* The band-summary card floats on the dark header bar. It used to carry the full sticker treatment; on a card the student stares at for the whole lesson the offset slab was the loudest thing on screen and it was decoration. A light card on a dark bar already separates itself — it needs a rule, not a shadow. */ .summary-card { border: var(--border-hair) solid var(--line-crisp); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } /* Stepper: the active step's label picks up the heavier display weight; the connecting rule becomes a dashed line, a restrained nod to the "technical blueprint" register instead of a plain solid tick mark. */ .step-label.on { font-weight: var(--weight-black); } .step-rule { background: none; border-top: 1px dashed var(--slate-300); height: 0; } /* Chart-banner label only (the ) — mono, uppercase, tracked. .chart-banner-body (the topic text + image the student cross-references while revising) is untouched. */ .chart-banner-head { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--text-micro); background: var(--slate-50); }