/* =============================================
   AP CS Principles — Top-Level Site Styles
   Dashboard, Lessons, Projects, Jams, Create PT
   Matches docs/ dark theme.
   ============================================= */

:root {
    --bg: #1a1a1a;
    --surface: #242424;
    --text: #e0e0e0;
    --accent: #6cb2ff;
    --accent-dim: #4a7fce;
    --code-bg: #2d2d2d;
    /* Code BLOCKS sit on the editor's surface, not the page's: VS Code draws
       its editor darker than its chrome, and the syntax colours below are the
       editor's own, so they are calibrated against this and not --code-bg.
       Inline <code> in a sentence keeps --code-bg — it is a word being named,
       not a file being read. */
    --code-editor-bg: #1e1e1e;
    --border: #3a3a3a;
    --warn: #e8b84b;
    --trap: #e05555;
    --muted: #999;
    --blue: #5cafff;
    --purple: #b98eff;
    --orange: #f0a060;
    /* Scaffolding accent — marks the "built with you" end of the ladder,
       so a full walkthrough is visually distinct from a solo build. */
    --guide: #4fc98a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    font-size: 15px;
}

/* ---- Top Navigation Tabs ---- */
.top-nav {
    background: #161616;
    border-bottom: 1px solid var(--border);
    padding: 0;
    display: flex;
    gap: 0;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 10;
}
.top-nav a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.top-nav a:hover { color: var(--text); }
.top-nav a.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ---- Page wrapper ---- */
/* Full-bleed: the page fills the viewport instead of sitting in an 860px
   column with dead space either side. The gutter still scales with the
   window, so text never runs right up against the edge on a wide monitor. */
.page {
    max-width: none;
    margin: 0;
    padding: 2rem clamp(1.5rem, 4vw, 4rem) 6rem;
}

/* ---- Headings ---- */
h1 { font-size: 1.8rem; margin-bottom: 0.5rem; color: #fff; }
h2 { font-size: 1.3rem; margin: 2rem 0 0.75rem; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; color: #ccc; }
h4 { font-size: 1rem; margin: 1rem 0 0.25rem; color: var(--muted); }

p { margin-bottom: 0.75rem; }
a { color: var(--accent); }

/* ---- Code ---- */
code {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 13px;
    background: var(--code-bg);
    padding: 0.15em 0.4em;
    border-radius: 3px;
}
pre {
    background: var(--code-editor-bg);
    padding: 1rem 1.25rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.75rem 0 1.25rem;
    border: 1px solid var(--border);
    font-size: 13px;
    line-height: 1.5;
    position: relative;
}
pre code { background: none; padding: 0; border-radius: 0; }

/* ---- Syntax colour — VS Code Dark+ --------------------------------------
   These eight hexes ARE the theme. Dark+ is what current VS Code ships, and
   this is the whole of it: the ninth colour, #D4D4D4, is plain text and it is
   the page's own colour, so those tokens are emitted with no span at all
   (punctuation is most tokens by count, and wrapping it would double the page
   for no change the eye can see).

   The spans are written at build time by scripts/highlight-code.mjs — Shiki
   runs VS Code's own TextMate grammar over the code, so the tokenizer here is
   the editor's, not an impression of it. That script holds the same nine
   hexes keyed to these names, and verify check 15 fails if the two lists ever
   drift apart, or if a colour reaches a page that neither list can name. A
   grammar update must not be able to recolour the site unnoticed. */
.tk-kw { color: #569CD6; }  /* keyword: public, class, private, static, var */
.tk-ct { color: #C586C0; }  /* control flow: using, if, for, return */
.tk-ty { color: #4EC9B0; }  /* type: MonoBehaviour, Rigidbody2D, UnityEngine */
.tk-fn { color: #DCDCAA; }  /* function: Start, GetComponent, Debug.Log */
.tk-va { color: #9CDCFE; }  /* variable, field, parameter */
.tk-st { color: #CE9178; }  /* string */
.tk-nu { color: #B5CEA8; }  /* number */
.tk-cm { color: #6A9955; }  /* comment */
.tk-lb { color: #C8C8C8; }  /* label: a bare `word:` at the start of a line */
.tk-it { font-style: italic; }  /* a modifier, not a colour — Dark+ uses it */
/* A coloured line must not lose the ladder's own signal: a line the student
   writes is still tinted and numbered in --guide, and .wt-gap keeps its green
   over whatever colour the grammar gave the text around it. */
.wt-line .wt-gap { color: var(--guide); }

/* The language, in the corner, the way the editor labels the file it is showing. */
pre[data-lang]::after {
    content: attr(data-lang);
    position: absolute;
    top: 0.4rem;
    right: 0.7rem;
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #6a6a6a;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ---- Lists ---- */
ul, ol { margin: 0.5rem 0 1rem 1.5rem; }
li { margin-bottom: 0.3rem; }

/* ---- Tables ---- */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0 1.25rem;
}
th, td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}
th { color: var(--accent); font-weight: 600; }


/* =============================================
   LESSON PAGE STYLES
   ============================================= */

/* ---- Lesson Header (prev/next + title) ---- */
.lesson-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}
.lesson-nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    transition: color 0.15s, border-color 0.15s;
}
.lesson-nav a:hover { color: var(--accent); border-color: var(--accent); }
.lesson-nav .lesson-id {
    color: var(--accent);
    font-weight: 700;
    font-size: 14px;
}

/* ---- Activity Block ---- */
.activity {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    margin: 1.25rem 0;
}
.activity-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.activity-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2em 0.6em;
    border-radius: 3px;
    white-space: nowrap;
}
.activity-time {
    font-size: 12px;
    color: var(--muted);
}

/* Day-type accent colors */
.activity.discovery  { border-left-color: var(--accent); }
.activity.discovery .activity-label { background: rgba(108, 178, 255, 0.15); color: var(--accent); }

.activity.basic-app  { border-left-color: var(--blue); }
.activity.basic-app .activity-label { background: rgba(92, 175, 255, 0.15); color: var(--blue); }

.activity.expand-app  { border-left-color: var(--purple); }
.activity.expand-app .activity-label { background: rgba(185, 142, 255, 0.12); color: var(--purple); }

.activity.rpg  { border-left-color: var(--orange); }
.activity.rpg .activity-label { background: rgba(240, 160, 96, 0.12); color: var(--orange); }

.activity.assessment  { border-left-color: var(--trap); }
.activity.assessment .activity-label { background: rgba(224, 85, 85, 0.12); color: var(--trap); }

.activity.hybrid  { border-left-color: var(--warn); }
.activity.hybrid .activity-label { background: rgba(232, 184, 75, 0.12); color: var(--warn); }

.activity h3 { margin: 0 0 0.5rem; color: #fff; font-size: 1rem; }
.activity p, .activity ul, .activity ol { font-size: 14px; }
.activity ul:last-child, .activity ol:last-child, .activity p:last-child { margin-bottom: 0; }

/* ---- Resources Footer ---- */
.resources {
    margin-top: 2.5rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.resources h3 { margin-top: 0; font-size: 0.9rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.resources ul { margin-bottom: 0; }
.resources li { font-size: 14px; }


/* =============================================
   DASHBOARD STYLES
   ============================================= */

/* ---- Unit selector ---- */
.unit-selector {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.unit-selector a {
    display: block;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    transition: border-color 0.15s, color 0.15s;
}
.unit-selector a:hover { color: var(--accent); border-color: var(--accent); }
.unit-selector a.active { color: var(--accent); border-color: var(--accent); background: rgba(108,191,108,0.08); }

/* ---- Lesson list ---- */
.lesson-list {
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.lesson-list li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: transform 0.15s, border-color 0.15s, background-color 0.15s;
}
.lesson-list li:hover {
    transform: translateX(4px);
    border-color: var(--accent);
    background-color: #2a2a2a;
}
.lesson-list .lesson-num {
    font-weight: 700;
    font-size: 13px;
    min-width: 2.5rem;
    color: var(--muted);
}
.lesson-list .lesson-title {
    flex: 1;
    font-size: 15px;
}
.lesson-list .lesson-title a {
    color: var(--text);
    text-decoration: none;
}
.lesson-list .lesson-title a::after {
    content: '';
    position: absolute;
    inset: 0;
}
.lesson-list .lesson-title a:hover {
    color: var(--accent);
}
.lesson-list .badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15em 0.5em;
    border-radius: 3px;
}
.badge.discovery   { background: rgba(108, 178, 255, 0.12); color: var(--accent); }
.badge.basic-app   { background: rgba(92, 175, 255, 0.12); color: var(--blue); }
.badge.expand-app  { background: rgba(185, 142, 255, 0.1); color: var(--purple); }
.badge.rpg         { background: rgba(240, 160, 96, 0.1); color: var(--orange); }
.badge.assessment  { background: rgba(224, 85, 85, 0.1); color: var(--trap); }
.badge.hybrid      { background: rgba(232, 184, 75, 0.1); color: var(--warn); }

.lesson-list .current-marker {
    color: var(--accent);
    font-size: 16px;
    margin-left: 0.5rem;
}

/* ---- Unit preview ---- */
.unit-preview {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.unit-preview h3 { margin-top: 0; font-size: 0.9rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.unit-preview p { font-size: 14px; margin-bottom: 0; }


/* =============================================
   PROJECTS PAGE
   ============================================= */

.project-file {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 0.75rem 0;
}
.project-file h3 { margin: 0 0 0.25rem; }
.project-file .file-meta { font-size: 12px; color: var(--muted); margin-bottom: 0.5rem; }
.project-file .file-meta span { margin-right: 1rem; }


/* ---- Callout boxes (ported from docs/style.css) ---- */
.callout {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin: 1rem 0;
    border-left: 4px solid var(--accent);
    background: rgba(108, 178, 255, 0.08);
}
.callout.info {
    border-left-color: var(--purple);
    background: rgba(185, 142, 255, 0.07);
}
.callout.trap {
    border-left-color: var(--trap);
    background: rgba(224, 85, 85, 0.08);
}
/* ---- Lesson lead paragraph (intro under the h1) ---- */
.lesson-lead {
    font-size: 1.02rem;
    line-height: 1.6;
    color: #cdd7e5;
    background: rgba(108, 178, 255, 0.06);
    border-left: 3px solid var(--accent);
    padding: 0.7rem 1rem;
    border-radius: 0 6px 6px 0;
    margin-bottom: 1.5rem;
}
.callout.warn {
    border-left-color: var(--warn);
    background: rgba(232, 184, 75, 0.08);
}
.callout strong { color: #fff; }

/* ---- Output annotation ---- */
.output {
    color: var(--muted);
    font-style: italic;
    font-size: 13px;
}

/* ---- Interactive Learning Patterns ---- */
.socratic {
    padding: 1.25rem 1.5rem;
    border-radius: 6px;
    margin: 1.25rem 0 2rem;
    border-left: 4px solid #5cafff;
    background: rgba(92, 175, 255, 0.04);
    border: 1px solid rgba(92, 175, 255, 0.15);
    border-left-width: 4px;
}
.socratic h3 {
    color: #5cafff;
    margin-top: 0;
    margin-bottom: 0.75rem;
}
.bug-hunt {
    padding: 1.25rem 1.5rem;
    border-radius: 6px;
    margin: 1.25rem 0 2rem;
    border-left: 4px solid var(--trap);
    background: rgba(224, 85, 85, 0.03);
    border: 1px solid rgba(224, 85, 85, 0.15);
    border-left-width: 4px;
}
.bug-hunt h3 {
    color: var(--trap);
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.checklist {
    padding: 1.25rem 1.5rem;
    border-radius: 6px;
    margin: 1.25rem 0 2rem;
    border-left: 4px solid var(--accent);
    background: rgba(108, 178, 255, 0.06);
    border: 1px solid rgba(108, 178, 255, 0.15);
    border-left-width: 4px;
}
.checklist h3 {
    color: var(--accent);
    margin-top: 0;
    margin-bottom: 0.75rem;
}

/* =============================================
   PROGRESS TRACKER (added with the Astro build)
   Per-student "I finished this lesson" marks,
   stored in localStorage; the dashboard reads
   them and draws phase progress bars.
   ============================================= */
.progress-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.2rem;
    margin-top: 2.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
}
.progress-toggle input {
    accent-color: var(--accent);
    width: 1.05rem;
    height: 1.05rem;
    cursor: pointer;
    margin: 0;
}
.progress-toggle span { font-size: 14px; color: var(--muted); }
.progress-toggle.done { border-color: var(--accent-dim); }
.progress-toggle.done span { color: var(--accent); }
.progress-note {
    font-size: 12px;
    color: var(--muted);
    margin-top: 0.5rem;
}

.phase-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.25rem 0 1rem;
}
.phase-progress .bar {
    flex: 1;
    height: 8px;
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.phase-progress .fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    transition: width 0.3s;
}
.phase-progress .count {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}
.dashboard-total {
    margin: 0.75rem 0 1.5rem;
    padding: 0.9rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
}
.dashboard-total strong { color: var(--accent); }
.progress-reset {
    font-size: 12px;
    color: var(--muted);
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.75rem;
    cursor: pointer;
    text-decoration: underline;
}
.progress-reset:hover { color: var(--trap); }

.lesson-list li.done { opacity: 0.55; }
.lesson-list li.done .lesson-title a { text-decoration: line-through; }
.lesson-list li.done::after {
    content: '\2713';
    color: var(--accent);
    font-weight: 700;
    margin-left: 0.5rem;
}

/* =============================================
   SEARCH PAGE (pagefind UI)
   ============================================= */
.search-box {
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin: 1rem 0 0.5rem;
}
.search-box:focus {
    outline: none;
    border-color: var(--accent);
}
.search-meta { font-size: 12px; color: var(--muted); margin-bottom: 1rem; }
.search-result {
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin: 0.75rem 0;
}
.search-result h3 { margin: 0 0 0.25rem; }
.search-result .url {
    display: block;
    font-size: 12px;
    color: var(--muted);
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    margin-bottom: 0.5rem;
    word-break: break-all;
}
.search-result .excerpt { font-size: 14px; }
.search-result .excerpt mark {
    background: rgba(108, 178, 255, 0.25);
    color: #fff;
    padding: 0 0.1em;
    border-radius: 2px;
}

/* ---- Walkthrough ("build it with me") ----
   The full-scaffold end of the ladder. Every line of code arrives with a
   plain-English account of what it does and why it has to be there. See
   src/lib/walkthrough.ts for the authoring contract. */
.activity.walkthrough {
    border-left-color: var(--guide);
    background: rgba(79, 201, 138, 0.035);
}
.activity.walkthrough .activity-label {
    background: rgba(79, 201, 138, 0.14);
    color: var(--guide);
}

.wt-ask {
    font-size: 15px;
    color: #e8f3ec;
    background: rgba(79, 201, 138, 0.08);
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    margin: 0 0 1rem;
    line-height: 1.5;
}
.wt-ask-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--guide);
    margin-bottom: 0.2rem;
}
.wt-lead { font-size: 14px; line-height: 1.6; }
.wt-file { margin-bottom: 1.25rem; }

/* each increment of the build */
.wt-step {
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
    margin-top: 1.25rem;
}
.wt-step:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.wt-step-title {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: #fff;
}
.wt-num {
    flex: none;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--guide);
    background: rgba(79, 201, 138, 0.13);
    border-radius: 4px;
    padding: 0.15rem 0.45rem;
}

/* line-numbered code. .wt-line is a block so each line starts a new line;
   min-height keeps blank spacer lines from collapsing to zero height.

   The lines are ALSO separated by real newlines in the markup, so that the
   file survives being read as text (copied, extracted, read aloud) and not
   only as rendered pixels. That newline sits between two block spans inside
   the <pre>, which would render as a blank line, so the whitespace is turned
   off on the container — the `pre` that preserves indentation lives on
   .wt-line itself. */
.wt-code { margin: 0.5rem 0 0.75rem; }
.wt-code > code { white-space: normal; }
/* the finished file is one text node with its own newlines, so it needs the
   opposite: here the whitespace IS the formatting. */
.wt-code-full > code { white-space: pre; }
.wt-line {
    display: block;
    position: relative;
    padding-left: 2.6rem;
    min-height: 1.5em;
    white-space: pre;
}
.wt-line::before {
    content: attr(data-n);
    position: absolute;
    left: 0;
    width: 1.9rem;
    text-align: right;
    color: #5f5f5f;
    user-select: none;
    -webkit-user-select: none;
}
.wt-line-why::before { color: var(--guide); }

/* a line the student writes (level 2 and up). The gap is drawn as a rule the
   line sits on, so the file still reads as a complete file with one hole in
   it rather than as missing code. */
.wt-blank { background: rgba(79, 201, 138, 0.07); }
.wt-blank::before { color: var(--guide); font-weight: 700; }
.wt-gap {
    color: var(--guide);
    background: rgba(79, 201, 138, 0.13);
    border-radius: 3px;
    padding: 0 0.3rem;
    font-style: italic;
}

/* how many gaps the build contains, stated up front */
.wt-gapcount {
    font-size: 14px;
    line-height: 1.6;
    color: #c8d2ca;
    border-left: 2px solid var(--guide);
    padding-left: 0.75rem;
    margin: 0 0 1.25rem;
}

/* per-line annotation list */
.wt-annot { list-style: none; margin: 0 0 1rem; padding: 0; }
.wt-annot li {
    display: grid;
    grid-template-columns: 1.9rem 1fr;
    gap: 0.7rem;
    padding: 0.4rem 0;
    border-top: 1px solid rgba(58, 58, 58, 0.5);
    font-size: 14px;
}
.wt-annot li:first-child { border-top: none; }
.wt-ref {
    text-align: right;
    color: var(--guide);
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 12px;
    padding-top: 0.15rem;
}
.wt-what { line-height: 1.55; }

/* a "your turn" annotation spans both columns: the tag and the prompt read as
   one instruction, and the tag must not be mistaken for a line number. */
.wt-annot li.wt-your-turn {
    grid-template-columns: 5.6rem 1fr;
    background: rgba(79, 201, 138, 0.06);
    border-radius: 4px;
    padding: 0.5rem 0.6rem;
    border-top: none;
    margin-top: 0.3rem;
}
.wt-turn-tag {
    grid-column: 1;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--guide);
    font-weight: 700;
    padding-top: 0.2rem;
}
.wt-annot li.wt-your-turn .wt-ref { display: none; }
.wt-hint {
    display: block;
    /* Column 2, not the first free cell. The <li> is a 2-column grid, so a
       direct child with no grid-column is auto-placed into column 1 — the
       1.9rem line-number gutter. Without this the hint renders one word per
       line down a 30px stripe. It is a continuation of .wt-what, so it goes
       under the prose, not under the line number. */
    grid-column: 2;
    margin-top: 0.3rem;
    font-size: 13px;
    line-height: 1.5;
    color: #b7c2ba;
}
.wt-hint::before {
    content: "Reach for: ";
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.wt-why {
    display: block;
    /* Same trap as .wt-hint above: no grid-column means auto-placement drops
       this into column 1, the 1.9rem line-number gutter, and the explanation
       runs one word per line. Column 2 puts it under the sentence it is
       qualifying, where the left rule reads as an indent. */
    grid-column: 2;
    margin-top: 0.3rem;
    padding-left: 0.7rem;
    border-left: 2px solid rgba(79, 201, 138, 0.4);
    color: #b7c2ba;
    font-size: 13px;
    line-height: 1.5;
}

/* where to read about the API this line uses. Sits under the annotation that
   names it, so the pointer arrives exactly where the new API does rather than
   in a table the student has already scrolled past. */
.wt-doc {
    display: block;
    /* Same 2-column grid trap as .wt-hint and .wt-why above: no grid-column
       means auto-placement drops this into column 1, the line-number gutter. */
    grid-column: 2;
    margin-top: 0.3rem;
    font-size: 12.5px;
    color: var(--muted);
}
/* The label reads "Read: " in the markup rather than as generated content, so
   it survives a copy-paste or a text extract of the page. */
.wt-doc a { color: var(--accent); }

/* check-your-work reference at the very end */
.wt-final {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.wt-final h4 { margin: 0 0 0.4rem; color: #fff; font-size: 0.95rem; }
.wt-code-full { max-height: 34rem; overflow-y: auto; }

/* at level 2 and up the finished file is behind a disclosure — the answer is
   never removed (a student who missed class must be able to catch up) but it
   takes a deliberate act to see it. Plain <details>, so no JS is involved and
   it still works inside a set:html body. */
details.wt-final { padding-top: 1rem; }
details.wt-final > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    border: 1px solid rgba(79, 201, 138, 0.3);
    background: rgba(79, 201, 138, 0.06);
}
details.wt-final > summary::-webkit-details-marker { display: none; }
details.wt-final > summary::before {
    content: "\25B8";
    color: var(--guide);
    font-size: 12px;
}
details.wt-final[open] > summary::before { content: "\25BE"; }
details.wt-final > summary:hover { border-color: rgba(79, 201, 138, 0.55); }
.wt-gated-title { color: #fff; font-size: 0.95rem; font-weight: 600; }
.wt-gated-peek { font-size: 12px; color: var(--muted); }

/* wrong-vs-right side by side — for concepts where the whole lesson is
   "this shape breaks, this shape works" (scope & lifetime in 1.3). */
.concept-compare {
    display: grid;
    gap: 1rem;
    margin: 1rem 0;
}
@media (min-width: 700px) { .concept-compare { grid-template-columns: 1fr 1fr; } }
.cc-side {
    border-radius: 6px;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
}
.cc-side.bad { border-color: rgba(224, 85, 85, 0.35); background: rgba(224, 85, 85, 0.05); }
.cc-side.good { border-color: rgba(79, 201, 138, 0.35); background: rgba(79, 201, 138, 0.05); }
.cc-tag {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.45rem;
}
.cc-side.bad .cc-tag { color: var(--trap); }
.cc-side.good .cc-tag { color: var(--guide); }
.cc-side pre { margin: 0 0 0.6rem; font-size: 12.5px; }
.cc-side p { font-size: 13.5px; margin: 0; line-height: 1.55; }

/* ---- Break It Down (the three recurring questions) ----
   One block, identical in every lesson: split the problem, look each part
   up, connect it to something already built. Purple, to read as a thinking
   block rather than as the green "here is the code" of a walkthrough. */
.activity.decompose { border-left-color: var(--purple); }
.activity.decompose .activity-label { background: rgba(185, 142, 255, 0.12); color: var(--purple); }
.dc-level {
    margin-left: auto;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
/* the problem in its whole, unbroken form */
.dc-big {
    font-size: 15px;
    line-height: 1.6;
    color: #e8e0f5;
    border-left: 2px solid var(--purple);
    padding-left: 0.75rem;
    margin-bottom: 1rem;
}
.dc-ask { font-size: 14px; margin-bottom: 0.75rem; }
.dc-parts { list-style: none; margin: 0 0 1rem; padding: 0; counter-reset: dc; }
.dc-part {
    counter-increment: dc;
    position: relative;
    padding: 0.5rem 0 0.5rem 2.1rem;
    border-top: 1px solid rgba(58, 58, 58, 0.5);
    font-size: 14px;
}
.dc-part:first-child { border-top: none; }
.dc-part::before {
    content: counter(dc);
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 1.5rem;
    text-align: right;
    color: var(--purple);
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 12px;
}
.dc-name { display: block; color: #fff; font-weight: 600; }
.dc-does { display: block; color: #c8d2ca; font-size: 13.5px; }
.dc-doc { display: block; font-size: 12.5px; color: var(--muted); margin-top: 0.15rem; }
.dc-doc a { color: var(--purple); }
/* a part the student supplies (level 2) or explains (level 3) */
.dc-gap {
    display: block;
    color: var(--purple);
    background: rgba(185, 142, 255, 0.1);
    border-radius: 3px;
    padding: 0 0.3rem;
    font-style: italic;
}
.dc-part-blank .dc-doc { margin-top: 0.3rem; }
.dc-empty {
    font-size: 14px;
    line-height: 1.6;
    color: #e8e0f5;
    background: rgba(185, 142, 255, 0.07);
    border-radius: 4px;
    padding: 0.6rem 0.8rem;
}
.dc-why, .dc-size { font-size: 13.5px; line-height: 1.6; color: #c8d2ca; }
.dc-size { color: var(--muted); }
/* the lesson's own discussion questions, under the parts list. Set apart from
   the parts above because these are what the student writes, not reads. */
.dc-turns {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.dc-turns h4 {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    color: var(--purple);
}
.dc-turns > p { font-size: 14px; }

/* compact banner for lessons with no walkthrough (solo end of the ladder) */
.ask-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    border-left: 3px solid var(--guide);
    background: rgba(79, 201, 138, 0.06);
    font-size: 14px;
}
.ask-banner-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--guide);
}
.ask-banner-q { color: #e8f3ec; }
.ask-banner-level {
    margin-left: auto;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

/* ---- "How do I…?" question index (docs/ask.html) ----
   The same curriculum indexed by the question a student actually asks. */
.two-questions { margin: 1rem 0 1.5rem; padding-left: 1.2rem; }
.two-questions li { font-size: 14.5px; line-height: 1.65; margin-bottom: 0.75rem; }
.two-questions strong { color: var(--purple); }
.ask-group { margin: 2rem 0; }
.ask-group > h2 {
    font-size: 1.15rem;
    margin: 0 0 0.25rem;
}
.ask-group-blurb {
    font-size: 13.5px;
    color: var(--muted);
    margin: 0 0 0.75rem;
}
.ask-list { list-style: none; margin: 0; padding: 0; }
.ask-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 1rem;
    align-items: baseline;
    padding: 0.7rem 0;
    border-top: 1px solid var(--border);
}
.ask-q { font-size: 15px; color: #fff; line-height: 1.45; }
.ask-q::before { content: "\201C"; color: var(--muted); }
.ask-q::after { content: "\201D"; color: var(--muted); }
.ask-note {
    grid-column: 1 / -1;
    font-size: 13px;
    color: var(--muted);
    margin: 0.15rem 0 0;
    line-height: 1.5;
}
.ask-where { display: flex; align-items: baseline; gap: 0.5rem; white-space: nowrap; }
.ask-lesson {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 12.5px;
}
.ask-badge {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    white-space: nowrap;
}
.ask-badge.l1 { color: var(--guide); background: rgba(79, 201, 138, 0.14); }
.ask-badge.l2 { color: var(--blue); background: rgba(92, 175, 255, 0.14); }
.ask-badge.l3 { color: var(--orange); background: rgba(240, 160, 96, 0.14); }
.ask-badge.l4 { color: var(--purple); background: rgba(185, 142, 255, 0.14); }

/* the ladder itself */
.ladder { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.ladder th, .ladder td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
    vertical-align: top;
}
.ladder th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.ladder td:first-child { white-space: nowrap; }

@media (max-width: 600px) {
    .ask-item { grid-template-columns: 1fr; }
    .ask-where { margin-top: 0.3rem; }
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .page { padding: 1rem 0.75rem 4rem; font-size: 14px; }
    pre { padding: 0.75rem; font-size: 12px; }
    .wt-line { padding-left: 2rem; }
    .wt-line::before { width: 1.5rem; }
    .wt-annot li { grid-template-columns: 1.5rem 1fr; gap: 0.5rem; }
    h1 { font-size: 1.4rem; }
    .top-nav a { padding: 0.6rem 0.75rem; font-size: 13px; }
    .lab-bar-row, .mywork-row { flex-direction: column; align-items: stretch; }
}

/* =============================================
   MCQ practice sets — questions, grading, scorecard
   ============================================= */
.mc-blurb { margin-bottom: 1.25rem; }

.mc-question {
    padding: 1rem 0 1.25rem;
    border-top: 1px solid var(--border);
}
.mc-stem { margin-bottom: 0.6rem; }
.mc-num { color: var(--accent); font-weight: 700; margin-right: 0.25rem; }
.mc-ced {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.4rem;
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.04em;
    color: var(--muted);
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    vertical-align: middle;
}
.mc-code { margin: 0.5rem 0 0.75rem; }

.mc-choices { display: flex; flex-direction: column; gap: 0.35rem; }
.mc-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: border-color 0.12s, background 0.12s;
}
.mc-choice:hover { border-color: var(--accent-dim); background: var(--surface); }
.mc-choice input { margin-top: 0.28rem; flex: none; }
.mc-letter {
    flex: none;
    font-weight: 700;
    color: var(--accent);
    font-size: 13px;
    min-width: 1rem;
}
.mc-choice-text { flex: 1; }

/* After grading */
.mc-choice.is-answer {
    border-color: #4caf7d;
    background: rgba(76, 175, 125, 0.1);
}
.mc-choice.is-picked {
    border-color: var(--trap);
    background: rgba(224, 85, 85, 0.1);
}

.mc-result {
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    background: var(--code-bg);
    border-left: 3px solid var(--accent-dim);
    border-radius: 0 6px 6px 0;
    font-size: 13px;
}
.mc-verdict-row { margin-bottom: 0.35rem; }
.mc-verdict { font-weight: 700; }
.mc-verdict.right { color: #4caf7d; }
.mc-verdict.wrong { color: var(--trap); }
.mc-meta { color: var(--muted); font-size: 11px; }
.mc-explain { color: var(--text); }

.mc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.mc-grade {
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    color: var(--bg);
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    cursor: pointer;
}
.mc-grade:hover:not(:disabled) { background: var(--blue); }
.mc-grade:disabled { opacity: 0.6; cursor: default; }
.mc-progress { font-size: 13px; color: var(--muted); }
.mc-progress.some { color: var(--accent); }

.mc-scorecard {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--accent-dim);
    border-radius: 8px;
}
.mc-scorecard h4 { margin-bottom: 0.5rem; }
.mc-score-line { font-size: 15px; margin-bottom: 0.75rem; }
.mc-table { width: 100%; border-collapse: collapse; margin-bottom: 0.75rem; font-size: 13px; }
.mc-table th, .mc-table td {
    text-align: left;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--border);
}
.mc-table th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.mc-table tr.good td:last-child { color: #4caf7d; font-weight: 600; }
.mc-table tr.mid td:last-child { color: var(--warn); font-weight: 600; }
.mc-table tr.bad td:last-child { color: var(--trap); font-weight: 600; }
.mc-card-note { font-size: 13px; color: var(--muted); margin-bottom: 0.5rem; }
.mc-error { font-size: 13px; color: var(--warn); }
.mc-note { font-size: 12px; color: var(--muted); margin-top: 0.75rem; }

@media (max-width: 600px) {
    .mc-choice { font-size: 13px; }
    .mc-scorecard { padding: 0.75rem; }
}

/* =============================================
   Lab forms — answer boxes + download bar
   ============================================= */
.lab-field {
    display: block;
    margin: 0.5rem 0 1rem;
    font-size: 13px;
}
.lab-field-label {
    display: block;
    color: var(--accent);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
}
.lab-answer {
    display: block;
    width: 100%;
    font: inherit;
    color: var(--text);
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    resize: vertical;
    min-height: 2.4rem;
}
.lab-answer:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.lab-bar {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--accent-dim);
    border-radius: 8px;
}
.lab-bar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
.lab-name {
    font-size: 13px;
    color: var(--muted);
}
.lab-name input {
    margin-left: 0.4rem;
    font: inherit;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
}
.lab-count {
    font-size: 13px;
    color: var(--muted);
}
.lab-count.some { color: var(--accent); }
.lab-download {
    margin-left: auto;
    font: inherit;
    font-weight: 600;
    color: #10231a;
    background: var(--accent);
    border: none;
    border-radius: 6px;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
}
.lab-download:hover { background: #7dd07d; }
.lab-note {
    margin: 0.6rem 0 0;
    font-size: 12px;
    color: var(--muted);
}

/* ---- Lesson footer nav (prev/next at the bottom of every lesson) ---- */
.lesson-foot {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: 2rem;
}
.lesson-foot > a {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    flex: 1;
}
.lesson-foot .dir {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.lesson-foot .where {
    font-size: 14px;
    color: var(--accent);
    font-weight: 600;
}
.lesson-foot > a:hover { border-color: var(--accent); }
.lesson-foot > a:hover .dir { color: var(--accent); }
.lesson-foot .foot-next { text-align: right; }
@media (max-width: 600px) {
    .lesson-foot { flex-direction: column; }
}

/* ---- Dashboard: My work panel ---- */
.mywork {
    margin: 1.25rem 0 2rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.mywork h2 { margin-top: 0; }
.mywork-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.mywork-row input[type="text"] {
    font: inherit;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.4rem 0.55rem;
}
.mywork-import {
    font-size: 13px;
    color: var(--accent);
    cursor: pointer;
}
.mywork-import input { font-size: 12px; }
.mywork-note { margin: 0.6rem 0 0; font-size: 12px; color: var(--muted); }
.mywork-note.error { color: var(--warn); }

/* ---- Accessibility ---- */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--accent);
    color: #10231a;
    padding: 0.5rem 1rem;
    border-radius: 0 0 6px 0;
    z-index: 50;
}
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- Editor panes (the Inspector, the Hierarchy, the Project window) ----
   Drawn by src/lib/panes.ts. The greys below are Unity's own dark skin —
   the whole point of the figure is that a student recognises it as the
   window they are looking at, so the pane is not themed to the site. It
   sits on the page the way a screenshot would.

   The one thing that is NOT Unity's is the marking: .pane-mark tints a row,
   .pane-mark-bar draws the green edge, .pane-badge is the number tying the
   row to the step above it. Unity has no such colours and must not — those
   belong to the lesson. --guide is the same green the ladder uses for "this
   is the part you do", so a marked row reads as instruction, not as UI. */
.pane {
    margin: 1rem 0 1.25rem;
}
.pane-svg {
    display: block;
    max-width: 100%;
    height: auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.pane-bg      { fill: #383838; }
.pane-tab     { fill: #3c3c3c; }
.pane-tab-fill{ fill: #3c3c3c; }
.pane-tab-line{ fill: #2a2a2a; }
.pane-title   { fill: #d6d6d6; font-size: 11.5px; font-weight: 600; }
.pane-subject { fill: #9a9a9a; font-size: 11px; text-anchor: end; }
.pane-head-bar{ fill: #424242; }
.pane-label   { fill: #d6d6d6; font-size: 11px; }
.pane-strong  { font-weight: 600; }
.pane-value   { fill: #d6d6d6; font-size: 11px; font-family: 'SF Mono', 'Fira Code', monospace; white-space: pre; }
.pane-field   { fill: #2c2c2c; stroke: #232323; stroke-width: 1; }
.pane-box     { fill: #2c2c2c; stroke: #565656; stroke-width: 1; }
.pane-check   { fill: none; stroke: #e6e6e6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pane-tick    { fill: #d6d6d6; }
.pane-tick-n  { fill: none; stroke: #383838; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pane-caret   { fill: #9a9a9a; }
/* The axis letter in front of a Constraints tick box — `X` on Freeze Position.
   Dimmer than a label and smaller, the way Unity draws it: it names the box
   beside it rather than being a row of its own. */
.pane-axis    { fill: #9a9a9a; font-size: 10px; }
/* The anchor-preset grid: sixteen cells, one per preset, on a button. The cell
   that is the object's current anchor is drawn light — that is how Unity marks
   it, and without it a figure of this grid cannot say "top-left". */
.pane-anchor    { fill: #5a5a5a; }
.pane-anchor-on { fill: #e6e6e6; }
/* A row Unity has greyed out: a Static body's Gravity Scale, which still shows
   its number and does nothing with it. */
.pane-dim       { opacity: 0.45; }
/* A Hierarchy or Project row's icon. Grey is an ordinary object in the scene;
   the blue is Unity's prefab-instance mark, which 2.4's step 2 tells the
   student to look for — so it is drawn, not described. */
.pane-ico         { fill: #bdbdbd; }
.pane-ico-prefab  { fill: #6ba6d8; }
.pane-btn     { fill: #4a4a4a; stroke: #565656; stroke-width: 1; }
.pane-btn-t   { fill: #dcdcdc; font-size: 11px; text-anchor: middle; }
.pane-mark    { fill: rgba(79, 201, 138, 0.1); }
.pane-mark-bar{ fill: var(--guide); }
.pane-badge   { fill: var(--guide); }
.pane-badge-n { fill: #10231a; font-size: 9.5px; font-weight: 700; text-anchor: middle; }
.pane figcaption {
    margin-top: 0.5rem;
    font-size: 13.5px;
    color: var(--muted);
    max-width: 46rem;
}
.pane figcaption code { font-size: 12.5px; }
.pane figcaption strong { color: var(--text); }

/* ---- Print ---- */
@media print {
    .top-nav, .lesson-nav, .progress-toggle, .progress-note,
    .lab-bar, .lab-field, .dashboard-total, .unit-selector,
    .progress-reset, .mywork, .search-form, .skip-link,
    .lesson-foot {
        display: none !important;
    }
    body { background: #fff; color: #000; }
    .page { max-width: 100%; padding: 0; }
    a { color: #000; text-decoration: none; }
    h1, h2, h3, th, code { color: #000; }
    /* Inline `code` goes black here but keeps the dark chip it has on screen,
       so it printed as black on near-black — the same invisible-on-paper
       failure as the pane rows below, and it was already true of every lesson
       before the panes existed. The chip flips with the text. */
    code { background: #f0f0f0; }
    pre { border: 1px solid #999; background: #f4f4f4; color: #000; }
    /* The editor palette is calibrated for a dark surface and most of it
       disappears on paper, so a printed handout gets the plain text it had
       before there was any colour at all. */
    .tk-kw, .tk-ct, .tk-ty, .tk-fn, .tk-va, .tk-st, .tk-nu, .tk-cm, .tk-lb { color: #000 !important; }
    /* A drawn pane is the same problem in a harder form: it is a dark window,
       and its labels are #d6d6d6 — printed on white they are invisible, so a
       handout would lose every row name. The surface goes, the text stays. */
    .pane-bg { fill: #fff; stroke: #999; }
    .pane-tab, .pane-tab-fill, .pane-head-bar, .pane-field, .pane-box,
    .pane-btn, .pane-mark { fill: #fff; }
    .pane-tab-line, .pane-field, .pane-box, .pane-btn { stroke: #999; }
    .pane-title, .pane-subject, .pane-label, .pane-value, .pane-btn-t,
    .pane-caret, .pane-axis { fill: #000; }
    /* The grid's chosen cell is the bright one on screen, so in print it is the
       dark one: the contrast has to survive, not the colour. */
    .pane-anchor { fill: #ccc; }
    .pane-anchor-on { fill: #333; }
    /* The component tick is the one row shape that is a dark glyph on a light
       square, so it flips rather than just going black: black on black prints
       as a solid block with the check-mark inside it invisible. */
    .pane-tick { fill: #fff; stroke: #999; }
    .pane-tick-n, .pane-check { stroke: #000; }
    .pane-badge { fill: #666; }
    .pane-badge-n { fill: #fff; }
    .pane-ico { fill: #999; }
    .unit-section { display: block !important; }
}