/* Agent Workforce program shell - shared vocabulary for the round.
   Rides on /mockups-dashboard-v2/_shell.css for page chrome and accents;
   everything here is library/home specific. NOT production CSS. */

/* ---- the state chip: the load-bearing element of this whole round ----
   Two audiences read the same card. A student may only ever see "open"
   or "coming soon"; staff need the real authoring state. One element,
   two vocabularies, swapped on <html data-view>. */
.st { display: inline-flex; align-items: center; gap: 6px; flex: none;
      font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
      letter-spacing: 1.1px; text-transform: uppercase; border: var(--fm-border-w) solid var(--fm-border-c);
      border-radius: 3px; padding: 2px 7px; background: var(--surface); color: var(--ink); }
.st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: var(--fm-border-w-sm) solid var(--fm-border-c); background: var(--surface); }
.st .staff { display: none; }
html[data-view="staff"] .st .student { display: none; }
html[data-view="staff"] .st .staff { display: inline; }

.st.ready::before       { background: var(--neon); }
.st.draft::before       { background: var(--blue); }
.st.held::before        { background: var(--ink-3); }
.st.blocked::before     { background: var(--coral); }
.st.not-started::before { background: var(--surface); }
html[data-view="student"] .st.ready, html[data-view="student"] .st.draft { border-color: var(--fm-border-c); }
html[data-view="student"] .st.held, html[data-view="student"] .st.blocked, html[data-view="student"] .st.not-started { color: var(--ink-3); border-style: dashed; }
html[data-view="student"] .st.held::before, html[data-view="student"] .st.blocked::before, html[data-view="student"] .st.not-started::before { background: var(--surface); border-color: var(--ink-3); }

/* ---- card row: the atom every direction shares ---- */
.crd { display: grid; grid-template-columns: 54px minmax(0,1fr) auto auto; align-items: center;
       gap: 13px; padding: 10px 14px; border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 3px;
       background: var(--surface); box-shadow: var(--fm-shadow-sm); text-decoration: none;
       color: inherit; position: relative; top: 0; left: 0;
       transition: top .12s var(--ease), left .12s var(--ease), box-shadow .12s var(--ease); }
.crd:hover { top: -2px; left: -2px; box-shadow: var(--fm-hover-card, 5px 5px 0 var(--ink)); }
.crd .n { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .6px; color: var(--ink-2); }
.crd .t { font-size: 14px; font-weight: 600; line-height: 1.3; min-width: 0; }
.crd .tm { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .5px; color: var(--ink-2); white-space: nowrap; }
.crd.soon { border-style: dashed; box-shadow: none; background: var(--paper-2, var(--cream-2)); }
.crd.soon .t { color: var(--ink-2); }
.crd.bonus .n::after { content: ' B'; color: var(--blue); }
@media (max-width: 640px) { .crd { grid-template-columns: 46px minmax(0,1fr); } .crd .tm { display: none; } }

/* ---- week header ---- */
.wkh { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 13px 16px;
       border: var(--fm-border-w) solid var(--on-accent); border-radius: 4px 4px 0 0; background: var(--acc, var(--cream-2)); }
.wkh .no { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -1px; line-height: 1; color: var(--on-accent); }
.wkh .ti { min-width: 0; }
.wkh .ti b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.4px; line-height: 1.15; color: var(--on-accent); }
.wkh .ti i { display: block; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--on-accent); opacity: .78; margin-top: 2px; }
.wkh .mt { margin-left: auto; display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--on-accent); }
.wkh .pill { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 3px; background: var(--surface); color: var(--ink); padding: 2px 8px; }

/* Locked weeks: pacing, never a wall. The shape and the date always show. */
.wk-locked .wkh { filter: saturate(.35); }
.lockline { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border: 2px dashed var(--ink-3);
            border-top: none; background: var(--cream); font-family: var(--font-mono); font-size: 11px;
            font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-2); }
.lockline svg { width: 13px; height: 13px; fill: currentColor; flex: none; }
.lockline .go { margin-left: auto; color: var(--ink); }

/* ---- progress meter reused across directions ---- */
.meter { display: flex; gap: 2px; height: 8px; }
.meter i { flex: 1; border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 2px; background: var(--surface); }
.meter i.on { background: var(--neon); }
.meter i.soon { background: var(--cream-2); border-style: dashed; }

.modline { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.6px;
           text-transform: uppercase; color: var(--ink-2); margin: 16px 0 8px; display: flex; align-items: center; gap: 10px; }
.modline::after { content: ''; flex: 1; height: 1px; background: var(--ink); opacity: .14; }

.note { font-size: 13.5px; color: var(--ink-2); margin-top: 14px; max-width: 820px; }
.note b { color: var(--ink); }

/* ---- week 0's accent -------------------------------------------------
   It used to be a-ink (--acc: var(--ink)). That token FLIPS with the
   theme: near-black on Field Manual, near-white on Terminal. Pinned text
   cannot be correct in both, so week 0 came out black-on-black in one
   and white-on-white in the other. A literal slate never flips, so light
   text on it is always right. Caught by the screenshot pass, not by eye. */
/* ---- position, reserved --------------------------------------------
   Lime IS the position marker - Wade's call, and he is right that it is
   the loudest thing in the palette so it should mark where you are. The
   real bug was week 1's banner also being lime, so the marker vanished on
   the one week a student is most likely to be sitting in. No week accent
   wears lime any more: slate, violet, blue, orange, coral. Lime is
   reserved for position and for a completed tick. */
:root { --marker: var(--neon); }

/* ---- a-ink, kept for any direction that still uses it -----------------
   --ink FLIPS with the theme, so anything painted --on-accent on top of it
   goes black-on-black in one theme. --on-ink is the pinned light value.
   No week uses a-ink any more (week 0 is a-slate) but the dashboard set
   does, and this sheet is shared. */
.a-ink .wkh .no, .a-ink .wkh .ti b, .a-ink .wkh .ti i, .a-ink .wkh .mt,
.a-ink .wtop, .a-ink .wtop b, .a-ink .wtop i, .a-ink .wtop .wn,
.a-ink .bhead, .a-ink .bhead b, .a-ink .bhead i, .a-ink .bhead .bc,
.a-ink .syh, .a-ink .syh b, .a-ink .syh i, .a-ink .syh .sn,
.a-ink .gw, .a-ink .shead, .a-ink .shead b, .a-ink .shead i, .a-ink .shead .sn { color: var(--on-ink); }
.a-ink .wkh .pill { color: var(--ink); }

.a-slate { --acc: #3F4A52; }
.a-violet { --acc: #6D28D9; }
.a-slate .wt-mark, .a-slate .wt-kick, .a-slate .wt-row .oglyph,
.a-violet .wt-mark, .a-violet .wt-kick, .a-violet .wt-row .oglyph,
.a-slate .wkh .no, .a-slate .wkh .ti b, .a-slate .wkh .ti i, .a-slate .wkh .mt,
.a-violet .wkh .no, .a-violet .wkh .ti b, .a-violet .wkh .ti i, .a-violet .wkh .mt,
.a-slate .wtop, .a-slate .wtop b, .a-slate .wtop i, .a-slate .wtop .wn,
.a-violet .wtop, .a-violet .wtop b, .a-violet .wtop i, .a-violet .wtop .wn,
.a-slate .bhead, .a-slate .bhead b, .a-slate .bhead i, .a-slate .bhead .bc,
.a-violet .bhead, .a-violet .bhead b, .a-violet .bhead i, .a-violet .bhead .bc,
.a-slate .syh, .a-slate .syh b, .a-slate .syh i, .a-slate .syh .sn,
.a-violet .syh, .a-violet .syh b, .a-violet .syh i, .a-violet .syh .sn,
.a-slate .shead, .a-slate .shead b, .a-slate .shead i, .a-slate .shead .sn,
.a-violet .shead, .a-violet .shead b, .a-violet .shead i, .a-violet .shead .sn,
.a-slate .gw, .a-slate .cc-cov, .a-slate .cc-cov .cc-n { color: #F4F1EA; }
.a-violet .gw, .a-violet .cc-cov, .a-violet .cc-cov .cc-n { color: #F4F1EA; }
.a-slate .wkh .pill, .a-slate .shead .pill { color: #111111; }
.a-violet .wkh .pill, .a-violet .shead .pill { color: #111111; }
.a-slate .wt-cov::before { border-color: rgba(244,241,234,.26); }
.a-violet .wt-cov::before { border-color: rgba(244,241,234,.26); }

/* ================== the reading card =====================================
   Set 2 of the design hub settled what a card READS like: direction A's
   Field Manual base, B's disclosure blocks, C's diagram-led visuals. Those
   three pages were standalone HTML on their own token file (_fm-tokens.css
   + _merged.css). This is that system ported onto the LMS tokens:

     --paper -> --cream        --lime    -> --neon
     --paper-2 -> --cream-2    --on-lime -> --on-accent
     --ink-border -> --cream-border      --fm-shadow-* written out

   Two deliberate changes on the way in, both to keep the card inside the
   house vocabulary rather than beside it:

     - the feature elevation is 6px, not the mockup's 9px. 3px is what a
       repeated block wears here (.les, .crd) and 6px is what a feature
       wears (.onramp, .wkbar, .wf-empty). A third value would only ever
       read as a mistake.
     - the "Without it" consequence used a #FF3300 label. Coral text at
       11px on cream is about 2.3:1, so the colour moved to a left rule and
       the label went back to --ink, where it is actually readable.

   Namespaced rc- throughout. Three stylesheets load on a portal page and
   the mockups' names (.sec .rail .card .chip .layout) are far too plain to
   turn loose in that company. */

/* Three columns at desk width: contents left, the article in the middle, the
   identity panel right. Wade 09-02: the two-column version capped itself at
   1180px, so on a 1920 screen the article hugged the LMS rail and a third of
   the page sat empty to the right of the panel. The cap is gone; the article
   keeps a reading measure of its own (820px, about 90 characters at this size)
   and the two side columns take the slack instead of the prose.

   Areas rather than raw columns, because the medium layout is not a subset of
   the wide one: it puts the contents UNDER the panel in the right column, the
   way it read before, with the article spanning both rows. */
.rc-layout { display: grid; gap: 34px 40px;
             grid-template-columns: minmax(0,1fr) minmax(300px, 360px); }
/* 720px is about 90 characters at this size. The Set 2 mockup Wade approved
   ran 844px, roughly 103, so this is a touch tighter than the thing being
   ported, not a departure from it. Counted with _gen/measure.mjs, not judged
   by eye - and not judged from font-size either, which was reading 103 where
   the browser lays out 97. */
.rc-main   { min-width: 0; max-width: 720px; }
.rc-aside  { min-width: 0; display: flex; flex-direction: column; }
.rc-side   { min-width: 0; }
/* The contents column takes the leftover height of a stretched .rc-aside,
   which is what gives the sticky box inside it something to travel down. */
.rc-toccol { min-width: 0; flex: 1 1 auto; }

/* Three columns once there is genuinely room for three: contents left, the
   article in the middle, the identity panel right. Wade 09-02: the two-column
   version capped itself at 1180px, so on a 1920 screen the article hugged the
   LMS rail and a third of the page sat empty past the panel.

   1660 is measured, not picked. The LMS rail takes 248px, so three columns at
   1512 leave the article 488px (61 characters) and at 1440 only 418px (52) --
   narrower than the two-column layout gives at the same width, which would
   make the wide layout the worse one. It earns its place from 1660 up.

   The extra width goes to the two SIDE columns, not into longer lines: the
   article is capped at 780px either way. Using the real estate should not mean
   a 100-character measure. */
@media (min-width: 1660px) {
  .rc-layout { grid-template-columns: minmax(210px, 290px) minmax(0, 720px) minmax(310px, 420px);
               grid-template-areas: "toc main side";
               justify-content: space-between; }
  /* the wrapper stops existing, so its two children become grid items and can
     be placed on either side of the article */
  .rc-aside  { display: contents; }
  .rc-toccol { grid-area: toc; }
  .rc-main   { grid-area: main; max-width: none; }
  .rc-side   { grid-area: side; }
}

/* Below 1180 two columns starve the article: at 1100 the 300px minimum on the
   panel leaves it 400px, about 43 characters, narrower than a phone. One column
   from there, with the article centred on its own measure rather than run to
   the full width of a tablet. */
@media (max-width: 1179px) {
  .rc-layout { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .rc-main { margin: 0 auto; }
}

/* ---- the meta strip: what the marquee cannot say ----
   The portal shell already prints crumb + h1 + sub on every page, so the
   card does not re-title itself. This carries the things only a card has:
   where it sits in the week, and what it costs you to read. */
.rc-plate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
            border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--cream);
            box-shadow: var(--fm-shadow-sm); padding: 13px 16px; margin-bottom: 30px; }
.rc-plate .rc-no { font-family: var(--font-mono); font-size: 12px; font-weight: 700;
                   letter-spacing: 1.1px; border: var(--fm-border-w) solid var(--on-accent); border-radius: 3px;
                   background: var(--acc, var(--cream-2)); color: var(--on-accent); padding: 3px 9px; }
.a-violet .rc-plate .rc-no, .a-slate .rc-plate .rc-no { color: #F4F1EA; }
.rc-plate .rc-pos { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px;
                    font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-2); }
.rc-chip { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.1px;
           text-transform: uppercase; border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 3px;
           background: var(--surface); color: var(--ink); padding: 3px 8px; }
.rc-chip.on { background: var(--neon); color: var(--on-accent); }

/* ---- section ---- */
.rc-sec { margin: 0 0 40px; scroll-margin-top: 26px; }
.rc-sec > h2 { font-family: var(--font-display); font-weight: 700; font-size: 27px;
               letter-spacing: -.7px; line-height: 1.18; margin: 0 0 13px; color: var(--ink); }
.rc-sec p { font-size: 16.5px; line-height: 1.62; color: var(--ink-2); margin: 0 0 15px; }
.rc-sec p:last-child { margin-bottom: 0; }
.rc-sec p strong, .rc-sec p b { color: var(--ink); font-weight: 600; }
.rc-main { min-width: 0; }
.rc-sec p.rc-kick { color: var(--ink); font-weight: 600; }
.rc-alt { font-size: 14px; color: var(--ink-3); margin-top: 12px; line-height: 1.55; }
/* clear the block's own hard shadow, or the line reads as part of the diagram */
.rc-ladder + .rc-alt, .rc-shapes + .rc-alt, .rc-std + .rc-alt,
.rc-sym + .rc-alt, .rc-symwrap + .rc-alt { margin-top: 22px; }
.rc-alt strong { color: var(--ink-2); }

/* ---- what you will walk out with ---- */
.rc-walk { border-left: 4px solid var(--ink); background: var(--cream-2);
           border-radius: 0 4px 4px 0; padding: 16px 20px; }
.rc-walk .rc-k { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
                 letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.rc-walk p { font-size: 16px; margin-bottom: 10px; }

/* ---- disclosure: depth is opt-in, direction B's whole argument ---- */
.rc-disc { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--cream-2);
           box-shadow: var(--fm-shadow-sm); margin: 18px 0 0; }
.rc-disc + .rc-disc { margin-top: 14px; }
.rc-disc summary { cursor: pointer; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
                   letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink);
                   padding: 12px 16px; list-style: none; display: flex; justify-content: space-between; gap: 14px; }
.rc-disc summary::-webkit-details-marker { display: none; }
.rc-disc summary::after { content: "+"; font-family: var(--font-mono); font-size: 15px; line-height: 1; }
/* A literal en dash, not a unicode escape: this CSS lives inside a Python
   triple-quoted string, so the backslash is read as OCTAL on the way in and
   the sheet shipped U+0081 followed by a 3. It rendered as a tofu box. */
.rc-disc[open] summary::after { content: "–"; }
.rc-disc .rc-body { padding: 14px 16px 16px; border-top: var(--fm-border-w) solid var(--fm-border-c); background: var(--surface); }
.rc-disc .rc-body p { font-size: 15.5px; margin-bottom: 12px; }

/* ---- the ladder (card 1.1) ----
   Lime marks the rungs where the name changes from what you do to who you
   are. That is position, which is what lime is for. */
.rc-ladder { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface);
             box-shadow: var(--fm-shadow); overflow: hidden; margin-top: 18px; }
.rc-rung { display: grid; grid-template-columns: 52px minmax(0,1fr) minmax(0,1fr);
           border-bottom: var(--fm-border-w) solid var(--fm-border-c); }
.rc-rung:last-child { border-bottom: 0; }
.rc-rung .n { background: var(--cream-2); border-right: var(--fm-border-w) solid var(--fm-border-c); font-family: var(--font-mono);
              font-size: 18px; font-weight: 700; color: var(--ink);
              display: flex; align-items: center; justify-content: center; }
.rc-rung .w { padding: 13px 16px; border-right: var(--fm-border-w) solid var(--fm-border-c); font-size: 15px; color: var(--ink-2); }
.rc-rung .who { padding: 13px 16px; font-family: var(--font-display); font-size: 15px;
                font-weight: 600; color: var(--ink); }
.rc-rung.hi .n, .rc-rung.hi .who { background: var(--neon); color: var(--on-accent); }
@media (max-width: 640px) { .rc-rung { grid-template-columns: 44px minmax(0,1fr); }
  .rc-rung .w { border-right: 0; }
  .rc-rung .who { grid-column: 1 / -1; border-top: 1px solid var(--cream-border); } }

/* ---- inspection block (card 1.2) ---- */
.rc-std { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface);
          box-shadow: var(--fm-shadow-sm); margin: 0 0 14px; overflow: hidden; }
.rc-std .h { display: grid; grid-template-columns: 40px minmax(0,1fr); }
.rc-std .num { background: var(--ink); color: var(--cream); font-family: var(--font-mono);
               font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.rc-std .txt { font-family: var(--font-display); font-size: 16.5px; font-weight: 600;
               color: var(--ink); padding: 13px 16px; }
.rc-std .w { border-top: var(--fm-border-w) solid var(--fm-border-c); border-left: 4px solid var(--coral);
             background: var(--cream-2); padding: 11px 16px 12px 52px; font-size: 14.5px; color: var(--ink-2); }
.rc-std .w b { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
               letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink); margin-bottom: 3px; }

/* ---- legend grid (card 1.3) ---- */
.rc-shapes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 18px; }
@media (max-width: 1000px) { .rc-shapes { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .rc-shapes { grid-template-columns: 1fr; } }
.rc-shape { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface);
            box-shadow: var(--fm-shadow-sm); padding: 15px 16px; }
.rc-shape .q { display: inline-block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
               letter-spacing: 1.1px; background: var(--neon); color: var(--on-accent);
               padding: 3px 7px; border-radius: 2px; margin-bottom: 9px; }
.rc-shape .w { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); }
.rc-shape .d { font-size: 14px; color: var(--ink-2); margin: 3px 0 9px; }
.rc-shape .s { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); line-height: 1.5;
               border-top: 1px solid var(--cream-border); padding-top: 8px; }
.rc-shape .s code { font-family: var(--font-mono); font-size: 11px; background: var(--cream-2);
                    border-radius: 2px; padding: 1px 4px; }

/* ---- specified placeholder: says what is missing, not just that it is ---- */
.rc-ph { border: 2px dashed var(--ink); border-radius: 4px; padding: 20px; text-align: center;
         background: repeating-linear-gradient(45deg, var(--cream-2), var(--cream-2) 10px,
                                               var(--cream) 10px, var(--cream) 20px); }
.rc-ph .t { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
            letter-spacing: 1.2px; text-transform: uppercase; background: var(--ink); color: var(--cream);
            padding: 4px 10px; border-radius: 2px; margin-bottom: 10px; }
.rc-ph .d { font-size: 14.5px; color: var(--ink-2); max-width: 560px; margin: 0 auto; line-height: 1.55; }

/* ---- symptom table ---- */
.rc-symwrap { overflow-x: auto; }
.rc-sym { width: 100%; border-collapse: separate; border-spacing: 0; border: var(--fm-border-w) solid var(--fm-border-c);
          border-radius: 4px; box-shadow: var(--fm-shadow-sm); background: var(--surface); overflow: hidden; }
.rc-sym th { background: var(--ink); color: var(--cream); font-family: var(--font-mono); font-size: 10px;
             font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; text-align: left; padding: 10px 14px; }
.rc-sym td { border-top: 1px solid var(--cream-border); padding: 13px 14px; font-size: 14.5px;
             color: var(--ink-2); vertical-align: top; }
.rc-sym td:first-child { color: var(--ink); font-weight: 500; }
.rc-sym td:last-child { background: var(--cream); }

/* ---- stick it ---- */
.rc-stick { background: var(--neon); border: var(--fm-border-w) solid var(--on-accent); border-radius: 4px;
            box-shadow: var(--fm-shadow); padding: 24px 28px; margin: 0 0 8px; }
.rc-stick .rc-k { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.3px;
                  text-transform: uppercase; color: var(--on-accent); opacity: .72; margin-bottom: 10px; }
.rc-stick blockquote { margin: 0 0 12px; font-family: var(--font-display); font-size: 24px; line-height: 1.3;
                       font-weight: 700; letter-spacing: -.5px; color: var(--on-accent); }
.rc-stick p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--on-accent); opacity: .82; }

/* ---- prev / next ----
   A neighbour that is not written is not a link. Same reasoning as the
   coming-soon lesson card: it is the same object, not ready yet, so it
   keeps the shape and loses the affordance. */
.rc-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 34px; }
@media (max-width: 640px) { .rc-nav { grid-template-columns: 1fr; } }
.rc-nav > * { display: block; border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface);
              box-shadow: var(--fm-shadow-sm); padding: 14px 17px; text-decoration: none; color: inherit;
              position: relative; top: 0; left: 0;
              transition: top .12s var(--ease), left .12s var(--ease), box-shadow .12s var(--ease); }
.rc-nav a:hover { top: -2px; left: -2px; box-shadow: var(--fm-hover-card, 5px 5px 0 var(--ink)); }
.rc-nav .k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
             text-transform: uppercase; color: var(--ink-3); }
.rc-nav .t { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 4px; }
/* kicker over title, always: pages that wrote them as spans had the two run together on one line
   inside a box sized for two (Wade 09-19, LMS-wide) */
.rc-nav .k, .rc-nav .t { display: block; }
.rc-nav > *:last-child { text-align: right; }
.rc-nav .soon { background: var(--cream-2); box-shadow: none; }
.rc-nav .soon .t { color: var(--ink-2); }
/* A fainter graph-paper grid under Workforce lesson, module and card pages.
   Wade 09-27: off first (Essentials' 09-22 rule, 12f71855), then "missing
   the grid, make it more subtle": the same lines at a bit over half their
   strength, both themes, so loose body text sits on near-plain paper.
   Keyed on .rc-layout so the program home, roster and boards keep the
   standard grid. */
body[data-program="workforce"]:has(.rc-layout) { --grid-whisper: rgba(17,17,17,0.012); }
html[data-design="terminal"] body[data-program="workforce"]:has(.rc-layout) { --grid-whisper: rgba(245,245,245,0.02); }
/* ---- sticky prev / next (Wade 09-27, idea from Hunter's PR #543 focus pager)
   Pinned to the bottom of the viewport while you read, resting where it always
   did at the end. The band behind the cards runs the full width of the page
   content, under the contents column and the side panel too, and is lifted off
   the page (paper-2, heavy rule, upward shadow) so it reads as a bar, not more
   page. It passes under the LMS rail (z 80) instead of over it. Workforce only:
   Lab, Camp and Essentials share this sheet.

   Two placements: the classic two-card nav still sits at the end of .rc-main
   on the pages the walk does not cover (the Argument cards); the pager
   (.rc-pager, written by _gen/wf_chrome.py) is the last child of .rc-layout,
   so its cards span every column, not just the article. */
[data-program="workforce"] .rc-main > .rc-nav,
[data-program="workforce"] .rc-layout > .rc-nav {
  position: sticky; bottom: 0; z-index: 5; margin-top: 10px;
  padding: 9px 0 11px; }
[data-program="workforce"] .rc-main > .rc-nav::before,
[data-program="workforce"] .rc-layout > .rc-nav::before {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -100vmax; right: -100vmax;
  background: var(--cream-2); border-top: var(--fm-border-w) solid var(--fm-border-c);
  pointer-events: none; }   /* no glow: Wade 09-27, "a little harsh" */
[data-program="workforce"] .rc-layout > .rc-nav { grid-column: 1 / -1; margin-top: 0; z-index: 20; isolation: isolate; transform: translateZ(0); }
/* The footer sits inside .rc-layout, just before the pager (wf_chrome.foot_in), so the
   pager's sticky range runs to the bottom of the page: it no longer lets go and rides
   up over the footer at the end (Wade 09-28, "it should be sticky throughout"). */
[data-program="workforce"] .rc-layout > .mk-foot { grid-column: 1 / -1; }
/* and main.mk's 90px of bottom padding (the shell's room under the footer) was the
   last strip the pager could not pin into; the footer is above the pager now */
[data-program="workforce"] main.mk:has(.rc-layout > .rc-pager) { padding-bottom: 0; }
/* z 20 and its own layer (still under the LMS rail at 70/80): Chrome on Windows draws
   its thin hover scrollbars on their own layer, and one showed through the bar as an
   olive pill in dark mode (Wade 09-27). Nothing behind the bar paints over it now. */
/* The band is 100vmax wide each way; main.mk runs from the rail's edge to the
   window's, so clip it there or the page scrolls sideways. clip, not hidden:
   hidden would make main a scroll container and the pager would stop sticking. */
[data-program="workforce"] main.mk { overflow-x: clip; }
/* A phone cannot give two stacked cards 170px of its screen: keep them side
   by side and let the title clip instead. */
@media (max-width: 640px) {
  [data-program="workforce"] .rc-main > .rc-nav { grid-template-columns: 1fr 1fr; gap: 10px; }
  [data-program="workforce"] .rc-main > .rc-nav > * { padding: 10px 12px; min-width: 0; }
  [data-program="workforce"] .rc-main > .rc-nav > *:last-child { text-align: right; }
  [data-program="workforce"] .rc-main > .rc-nav .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* The pager: where you were, where you are, where you go next, each named by
   module and lesson. The middle card is lime because lime is position in this
   system (the contents column uses it the same way). It is position, not
   progress: nothing here says a lesson is done. A step into a new module says
   so on the Next card and on the middle card's last line.
   Compact (Wade 09-27, "a little smaller"): one line of kicker, one line of
   title, clipped; the middle card puts its title and dots on one line. */
.rc-pager { grid-template-columns: minmax(0,1fr) minmax(220px, 300px) minmax(0,1fr); gap: 14px; align-items: stretch; }
.rc-pager > * { min-width: 0; padding: 7px 13px 8px; }
.rc-pager .k { font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-pager .t { font-size: 14px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-pager > .next { text-align: right; }
.rc-pager .here { background: var(--neon); border-color: var(--on-accent); color: var(--on-accent); text-align: center; }
.rc-nav.rc-pager .here .k { color: var(--on-accent); }
/* .rc-nav.rc-pager, not .rc-pager: essentials.css (later) sets .ess-lesson .rc-nav .t to
   var(--ink), which is near-white in dark mode, on lime (Wade 09-27 screenshot). */
.rc-nav.rc-pager .here .t { color: var(--on-accent); display: inline; }
.rc-pager .dots { display: inline-flex; justify-content: center; align-items: center; gap: 4px; margin: 0 0 0 9px; vertical-align: 1px; }
.rc-pager .dots i { width: 8px; height: 8px; border: var(--fm-border-w-sm, 1.5px) solid var(--on-accent); border-radius: 2px; }
.rc-pager .dots i.on { background: var(--on-accent); }
.rc-pager .dots b { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1px;
                    text-transform: uppercase; margin-left: 6px; }
.rc-pager .cross .k { color: var(--ink); }
.rc-pager .cross .k b { background: var(--neon); color: var(--on-accent); border: var(--fm-border-w-sm, 1.5px) solid var(--on-accent);
                        border-radius: 3px; padding: 1px 6px; margin-left: 6px; font-weight: 700; }
@media (max-width: 1179px) { .rc-pager { grid-template-columns: minmax(0,1fr) minmax(190px, 240px) minmax(0,1fr); gap: 12px; } }
/* Phone: the middle card becomes a slim line across the top, Previous and
   Next sit under it by their short names. */
/* .rc-nav.rc-pager, not .rc-pager: essentials.css loads after this sheet and
   stacks every .rc-nav into one column under 560px. */
@media (max-width: 640px) {
  .rc-nav.rc-pager { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rc-pager .here { grid-column: 1 / -1; order: -1; padding: 5px 12px; display: flex; justify-content: center; align-items: center; gap: 10px; }
  .rc-pager .here .k, .rc-pager .dots b { display: none; }
  .rc-pager .here .t { margin: 0; font-size: 14px; white-space: nowrap; }
  .rc-pager .dots { margin: 0; }
  .rc-pager > a { padding: 7px 12px; }
  .rc-pager > a .t { display: none; }
  .rc-pager .cross .k b { display: none; }
}

/* The week bar (Wade 09-27, on every Week 0 and Week 1 page): one count per week,
   deck style, and one continuous bar that keeps the module themes visible.
   A square per stop, grouped by module with a gap between groups, so the
   modules read as chunks. Filled is
   "before you in the walk", the tall ink square is where you are: position,
   not progress. The theme names ride on the centre card's kicker and on
   hover. (.rc-weekbar, not .wkbar: that name is the week boards' already.) */
/* centred (Wade 09-27): the theme over the count and its bar */
.rc-pager.rc-weekbar .here { text-align: center; }
/* The module's theme is a name, not a label (Wade 09-27: the mono caps
   read wrong here). Set the way the program home sets module names: Space
   Grotesk, sentence case, a step under "4 of 16" so the count still leads.
   Previous / Next keep their mono labels. */
.rc-nav.rc-pager.rc-weekbar .here .k { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: -.1px;
  text-transform: none; color: var(--on-accent); opacity: .78; }
.rc-pager.rc-weekbar .here .row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 3px; }
.rc-pager.rc-weekbar .here .wk { flex: 0 1 200px; }
.rc-nav.rc-pager.rc-weekbar .here .t { display: block; flex: none; font-size: 14px; margin: 0; }
.rc-pager .wk { flex: 1; min-width: 0; display: flex; gap: 6px; align-items: center; }
.rc-pager .wk .g { display: flex; gap: 2px; align-items: center; min-width: 0; }
.rc-pager .wk i { flex: 1; min-width: 4px; height: 8px; box-sizing: border-box; border: 1.5px solid var(--gc); border-radius: 2px; }
/* Filled means done, not passed (Wade 09-27): the squares read the saved
   done records (WF_UI_JS), in the done colour. */
.rc-pager .wk i.done { background: var(--wf-done-strong); border-color: var(--wf-done-strong); }
.rc-pager .wk i.on { height: 13px; background: var(--on-accent); border-color: var(--on-accent); }
/* black, no colour (Wade 09-27: the violet steps did not earn their place;
   the gaps between groups carry the modules) */
.rc-pager .wk .g { --gc: var(--on-accent); }
@media (max-width: 640px) { .rc-pager.rc-weekbar .here .k { display: none; } .rc-pager.rc-weekbar .here .row { margin: 0; flex: 1; } }

/* ---- done is purple, quietly (Wade 09-27) ----
   One colour means done: Week 1's violet, fixed rather than the page accent,
   because the Module 0 pages still wear Week 0's teal. First pass filled
   done rows solid purple; Wade: "too harsh, especially in dark mode", and it
   competed with the purple Core Curriculum header. So done now wears the
   same treatment as Up next, in violet instead of lime: a tint across the
   row, and on a finished module a tint plus a 5px bar down its panel's
   edge. Text keeps its normal colours, so everything stays legible. The
   rotated DONE stamp is gone (Hunter: "too much going on"); the check box
   fills violet. The lesson pages' week bar uses the strong violet for its
   done squares (the lime card is the same in both themes). */
/* light tint stepped up from #EFE8FC to #E2D3FA (Wade 09-27: "a little too subtle"), about as
   much colour as Up next's #EEF6CC carries */
[data-program="workforce"] { --wf-done: #6D28D9; --wf-done-strong: #6D28D9; --wf-on-done: #F4F1EA; --wf-done-tint: #E2D3FA; }
html[data-design="terminal"] [data-program="workforce"],
html[data-design="terminal"][data-program="workforce"] { --wf-done: #A57BF5; --wf-on-done: #0f0f0f; --wf-done-tint: #1d1433; }
/* Wade 10-06: done follows the week's own colour on its lesson pages too, as the board already does
   for Week 2 (gen_workforce7.py): Week 2 cyan, Week 3 orange (the a-camp accent). The page's week is
   on <body data-wf-week> (wf_chrome.week_mark). Both colours are light, so a done square keeps an
   ink border on the lime week bar. */
[data-program="workforce"][data-wf-week="2"] { --wf-done: var(--blue); --wf-done-strong: var(--blue); --wf-on-done: #111111;
  --wf-done-tint: color-mix(in srgb, var(--blue) 22%, #FFFFFF); }
[data-program="workforce"][data-wf-week="3"] { --wf-done: #e07a2f; --wf-done-strong: #e07a2f; --wf-on-done: #111111;
  --wf-done-tint: color-mix(in srgb, #e07a2f 22%, #FFFFFF); }
html[data-design="terminal"] [data-program="workforce"][data-wf-week="2"] { --wf-done: var(--blue); --wf-on-done: #0f0f0f;
  --wf-done-tint: color-mix(in srgb, var(--blue) 14%, #0f0f0f); }
html[data-design="terminal"] [data-program="workforce"][data-wf-week="3"] { --wf-done: #e07a2f; --wf-on-done: #0f0f0f;
  --wf-done-tint: color-mix(in srgb, #e07a2f 14%, #0f0f0f); }
[data-wf-week="2"] .rc-pager .wk i.done, [data-wf-week="3"] .rc-pager .wk i.done { border-color: var(--on-accent); }
[data-program="workforce"] .track .lrow.done { background: var(--wf-done-tint); }
[data-program="workforce"] .track .lrow.done:hover { background: color-mix(in srgb, var(--wf-done) 20%, var(--wf-done-tint)); }
[data-program="workforce"] .track .lrow.done .lrow-stamp { display: none; }
[data-program="workforce"] .track .lrow.done .pu-box { background: var(--wf-done); border-color: var(--wf-done); color: var(--wf-on-done); }
[data-program="workforce"] .track .lrow.done .lrow-n { background: transparent; border-color: var(--wf-done); color: var(--wf-done); }
[data-program="workforce"] .track .lrow.done .lrow-t { color: var(--ink); }
[data-program="workforce"] .track:has(.lrow.done):not(:has(.lrow:not(.done))) .track-mod { background: var(--wf-done-tint); box-shadow: inset 5px 0 0 var(--wf-done); }
[data-program="workforce"] .wb-progress .pu-bar span { background: var(--wf-done); }
/* The icon rows (Orientation's map, the module intros' page) keep their
   filled violet disc and light icon when done, in both themes. Their old
   done colours were written for a lime row, which left the map black on the
   tint in light mode and near-invisible in dark (Wade 09-27). The html/body
   prefix outranks the terminal-mode glyph rules. */
html[data-program="workforce"] body[data-program="workforce"] .track .lrow.done .lrow-n.glyph { background: var(--wf-done); border-color: var(--wf-done); color: var(--wf-on-done); }
html[data-program="workforce"] body[data-program="workforce"] .track .lrow.done .lrow-n.glyph .ic,
html[data-program="workforce"] body[data-program="workforce"] .track .lrow.done .lrow-n.glyph svg { color: var(--wf-on-done); stroke: var(--wf-on-done); }
/* "Read first" said what the order already says (Wade 09-27) */
[data-program="workforce"] .track .lrow-first { display: none; }

/* ---- boxed lists, made prominent (Week 0 cards 0.1 and 0.2) ----
   Wade 09-27: card 0.1's "three things before the setup lesson" read like
   fine print; then "do the same on the others in that format". The .ess-ready
   lists, restyled only (no copy change): one panel with the heavy border and
   hard shadow, a stamp on its top border (the Prompt / Picture stamps'
   twin) naming what the list is, and each item a numbered card with its
   name as the title. Colour says what kind of list it is, in the callout
   family's terms: check (lime) for things to have or confirm, note (blue)
   for information. */
:is(#wf-card-0-1, #wf-card-0-2) .ess-ready { --r-tint: var(--neon-tint); --r-acc: var(--neon); --r-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='.75' y='.75' width='20.5' height='20.5' rx='2' fill='%23C8FF00' stroke='%23111' stroke-width='1.5'/%3E%3Cpath d='m5.5 7.5 1.5 1.5 2.5-2.5M5.5 13.5l1.5 1.5 2.5-2.5M12 8h5M12 14h5' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  position: relative; counter-reset: need; margin: 30px 0 18px; padding: 26px 18px 18px; gap: 12px;
  border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--r-tint); box-shadow: var(--fm-shadow); }
:is(#w-s3, #w-s5) .ess-ready { --r-tint: var(--blue-tint); --r-acc: var(--blue); --r-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='.75' y='.75' width='20.5' height='20.5' rx='2' fill='%2300D4FF' stroke='%23111' stroke-width='1.5'/%3E%3Ccircle cx='11' cy='6.6' r='1.3' fill='%23111'/%3E%3Cpath d='M11 10v6.5M9 16.5h4' fill='none' stroke='%23111' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E"); }
:is(#wf-card-0-1, #wf-card-0-2) .ess-ready::before {
  content: 'Before the setup lesson'; position: absolute; top: -15px; left: 16px; height: 30px; box-sizing: border-box;
  display: inline-flex; align-items: center; padding: 0 11px 0 34px;
  background: var(--surface) no-repeat 4px center / 22px 22px; background-image: var(--r-icon);
  border: 1.5px solid var(--ink); border-radius: 3px; box-shadow: var(--fm-shadow-xs);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); }
#w-s3 .ess-ready::before { content: 'Carries forward'; }
#w-s5 .ess-ready::before { content: 'How the course runs'; }
#w-s6 .ess-ready::before { content: 'Check yourself'; }
:is(#wf-card-0-1, #wf-card-0-2) .ess-ready li { counter-increment: need; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 14px; padding: 14px 16px 15px;
  border: var(--fm-border-w) solid var(--fm-border-c); box-shadow: var(--fm-shadow-sm); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
:is(#wf-card-0-1, #wf-card-0-2) .ess-ready li::before { content: counter(need); grid-row: 1 / span 2; align-self: start; width: 34px; height: 34px; box-sizing: border-box;
  display: grid; place-items: center; background: var(--r-acc); color: var(--on-accent); border: var(--fm-border-w) solid var(--on-accent); border-radius: 3px;
  font-family: var(--font-mono); font-size: 16px; font-weight: 700; }
:is(#wf-card-0-1, #wf-card-0-2) .ess-ready li b { grid-column: 2; padding: 0; white-space: normal; font-family: var(--font-display); font-size: 17px; font-weight: 700;
  letter-spacing: -.2px; text-transform: none; color: var(--ink); line-height: 1.3; }
:is(#wf-card-0-1, #wf-card-0-2) .ess-ready li span { grid-column: 2; }
@media (max-width: 640px) { :is(#wf-card-0-1, #wf-card-0-2) .ess-ready { padding: 24px 12px 14px; } :is(#wf-card-0-1, #wf-card-0-2) .ess-ready li { grid-template-columns: 30px minmax(0,1fr); gap: 4px 11px; padding: 12px; } :is(#wf-card-0-1, #wf-card-0-2) .ess-ready li::before { width: 30px; height: 30px; font-size: 14px; } }

/* ---- on this card ----
   Derived from the sections, so it cannot drift, and the active entry
   follows the scroll instead of being typed in. Lime is position here too. */

.rc-out { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface);
          box-shadow: var(--fm-shadow-sm); padding: 12px 15px; margin-bottom: 18px; }
.rc-out .m { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
             text-transform: uppercase; color: var(--ink-3); }
.rc-out .b { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink);
             margin-top: 4px; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.rc-out .b i { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.rc-toch { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.4px;
           text-transform: uppercase; color: var(--ink-2); margin-bottom: 9px; }
.rc-toc { list-style: none; margin: 0; padding: 0; }
.rc-toc a { display: block; font-size: 13.5px; line-height: 1.35; padding: 7px 0 7px 14px;
            border-left: 2px solid var(--cream-border); color: var(--ink-3); text-decoration: none; }
.rc-toc a:hover { color: var(--ink-2); border-left-color: var(--ink-3); }
.rc-toc a.on { color: var(--ink); font-weight: 600; border-left: 3px solid var(--marker); padding-left: 13px; }

/* ---- the identity panel ----
   Lifted from the LMS's own card pages (agent-native-os/portal/cards/
   cards.css): cover, badges, meta block, one-click start, in that order,
   with the same measurements. Loading cards.css itself was not an option -
   it is 1299 lines that reset body and kill the graph-paper ground - so the
   four blocks came across on their own, rc- namespaced like the rest.

   ONE deliberate difference from cards.css: the tape. Production draws it
   84x27 at left/right 22px, -26deg/24deg, and rotates the host cover a
   further -0.6deg. The canonical scotch-tape component (design-elite
   components/scotch-tape/spec.md) specifies 78x26 at 26px, -27deg/25deg,
   host at 0deg, and Terminal dropping the strips entirely. This uses the
   canonical values, which is the rule already settled for this round. The
   live card pages still carry the other geometry; aligning those is a
   separate call because it touches every card in the library. */

.rc-cover { position: relative; overflow: visible; height: 188px; border-radius: 4px;
            display: flex; align-items: center; justify-content: center;
            border: var(--fm-border-w) solid var(--on-accent); box-shadow: var(--fm-shadow);
            background: var(--acc, var(--cream-2)); margin-bottom: 20px; }
.rc-cover .ic { position: relative; z-index: 1; width: 74px; height: 74px; color: var(--on-accent); }
.a-violet .rc-cover .ic, .a-slate .rc-cover .ic { color: #F4F1EA; }
/* scotch-tape, canonical: the strips carry all the rotation, the card stays
   at 0deg, and the translucent fill is what makes it read as tape rather
   than a sticker. Decorative only, so pointer-events off and no semantics. */
.rc-cover::before, .rc-cover::after {
  content: ''; position: absolute; top: -11px; width: 78px; height: 26px; z-index: 5;
  background: var(--tape, rgba(255, 247, 185, 0.82));
  background-image: linear-gradient(90deg, rgba(255,255,255,0.35),
                                    rgba(255,255,255,0) 45%, rgba(255,255,255,0.28));
  border: 1px solid var(--tape-border, rgba(0, 0, 0, 0.13));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10); pointer-events: none; }
.rc-cover::before { left: 26px;  transform: rotate(-27deg); }
.rc-cover::after  { right: 26px; transform: rotate(25deg); }

.rc-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.rc-badge { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
            text-transform: uppercase; padding: 3px 9px; border: var(--fm-border-w-sm) solid var(--fm-border-c);
            border-radius: 3px; background: var(--cream); color: var(--ink-2); }
.rc-badge.on { background: var(--neon); color: var(--on-accent); }

.rc-meta { background: var(--surface); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px;
           box-shadow: var(--fm-shadow); padding: 16px 20px; }
.rc-meta .r { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
              padding: 9px 0; border-bottom: 1px solid var(--cream-border); }
.rc-meta .r:first-child { padding-top: 0; }
.rc-meta .r:last-child { border-bottom: none; padding-bottom: 0; }
.rc-meta .l { flex: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px;
              text-transform: uppercase; color: var(--ink-3); }
.rc-meta .v { font-size: 13.5px; font-weight: 500; color: var(--ink); text-align: right; }
.rc-meta .v code { font-family: var(--font-mono); font-size: 11.5px; background: var(--cream-2);
                   border: 1px solid var(--cream-border); border-radius: 3px; padding: 2px 6px; color: var(--ink); }

/* ---- one-click start ----
   Same contract as the live card pages: the prompt rides on data-prompt,
   the idle label on data-label, and the button restores itself after the
   copied state. A button, not a link, so nothing here is a dead href. */
.rc-starter { background: var(--cream); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px;
              box-shadow: var(--fm-shadow); padding: 17px 20px 19px; margin-top: 20px; }
.rc-starter .rc-k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 2px;
                    text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.rc-starter h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px;
                 letter-spacing: -.2px; color: var(--ink); margin: 0 0 6px; }
.rc-starter p { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 0 0 14px; }
.rc-btn { display: block; width: 100%; font-family: var(--font-body); font-weight: 700; font-size: 13.5px;
          text-align: center; background: var(--neon); color: var(--on-accent); padding: 11px 16px;
          border: var(--fm-border-w) solid var(--on-accent); border-radius: 4px; cursor: pointer;
          box-shadow: var(--fm-shadow-sm); position: relative; top: 0; left: 0;
          transition: top .15s var(--ease), left .15s var(--ease), box-shadow .15s var(--ease); }
.rc-btn:hover  { top: -2px; left: -2px; box-shadow: var(--fm-hover-btn, 6px 6px 0 var(--ink)); }
.rc-btn:active { top: 2px; left: 2px; box-shadow: var(--fm-shadow-active, 1px 1px 0 var(--ink)); }
.rc-btn.copied { background: var(--blue); color: var(--on-accent); }
.rc-alts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rc-btn.alt { background: var(--surface); color: var(--ink); }
.rc-btn.alt:hover { background: var(--cream); }
.rc-btn.alt.copied { background: var(--blue); color: var(--on-accent); }

/* The identity panel scrolls away with the article; only the outline and the
   contents stay pinned. That needs the contents column to be as tall as the
   article, which is why .rc-layout never sets align-items: start. */
.rc-tocbox { position: sticky; top: 22px; }
@media (max-width: 1179px) { .rc-tocbox { position: static; } }

html[data-design="terminal"] .rc-cover::before,
html[data-design="terminal"] .rc-cover::after { display: none; }
html[data-design="terminal"] .rc-cover,
html[data-design="terminal"] .rc-meta,
html[data-design="terminal"] .rc-starter { box-shadow: none; border-width: 1px;
                                           border-color: var(--cream-border);  }
html[data-design="terminal"] .rc-btn { border-color: #111111; box-shadow: none; }
html[data-design="terminal"] .rc-btn.alt { border-color: var(--cream-border); }
html[data-design="terminal"] .rc-btn:hover { top: 0; left: 0; box-shadow: 0 0 18px var(--neon-glow); }

/* ---- back bar ----
   Ported from the live card pages (portal/cards/cards.css .card-backbar /
   .back-btn), same geometry and the same lime-on-hover, because a reading
   card should get out of the way exactly like every other card in the LMS.
   It sits ABOVE the marquee, which is why portal_page grew a `top` slot: the
   shell prints crumb and h1 first, and a back link underneath the title is a
   back link you have already scrolled past. */
.rc-backbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.rc-back { display: inline-flex; align-items: center; gap: 8px; flex: none;
           font-family: var(--font-mono); font-size: 11px; font-weight: 700;
           letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink);
           text-decoration: none; background: var(--surface);
           border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; padding: 8px 14px;
           box-shadow: var(--fm-shadow-sm); position: relative; top: 0; left: 0;
           transition: top .12s var(--ease), left .12s var(--ease), box-shadow .12s var(--ease),
                       background .12s var(--ease), color .12s var(--ease); }
.rc-back:hover { top: -2px; left: -2px; box-shadow: var(--fm-hover-btn, 6px 6px 0 var(--ink));
                 background: var(--neon); color: var(--on-accent); }
.rc-back:active { top: 1px; left: 1px; box-shadow: var(--fm-shadow-active, 1px 1px 0 var(--ink)); }
.rc-back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4;
               stroke-linecap: round; stroke-linejoin: round; }
html[data-design="terminal"] .rc-back { box-shadow: none; border-width: 1px;
                                        border-color: var(--cream-border);  }
html[data-design="terminal"] .rc-back:hover { top: 0; left: 0; border-color: #111111;
                                              box-shadow: 0 0 16px var(--neon-glow); }

/* ---- diagrams ----
   Drawn as inline SVG by wf_plays.py, in tokens so both themes work. The card
   they were built for (2.4, the five plays) names them as its largest missing
   asset; its accessibility note requires every one to have a written text
   equivalent, which is what .rc-alt carries underneath each figure. The SVG
   itself is aria-hidden, so a screen reader gets the sentence and not a pile
   of unlabelled rectangles. */
.rc-dia { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface);
          box-shadow: var(--fm-shadow-sm); padding: 16px 18px; margin-top: 14px;
          overflow-x: auto; }
.rc-dia svg { display: block; height: auto; min-width: 460px; }
.rc-diacap { font-family: var(--font-mono); font-size: 10px; font-weight: 700;
             letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3);
             margin-top: 9px; }

/* A play: the heading, the prose, then the shape. Numbered off the list so a
   play cannot be renumbered in one place and not the other. */
.rc-plays { counter-reset: play; }
.rc-play { margin-top: 26px; }
.rc-play > h3 { display: flex; align-items: baseline; gap: 11px; font-family: var(--font-display);
                font-weight: 700; font-size: 19px; letter-spacing: -.4px; color: var(--ink);
                margin: 0 0 8px; }
.rc-play > h3::before { counter-increment: play; content: counter(play);
                        font-family: var(--font-mono); font-size: 12px; font-weight: 700;
                        letter-spacing: 0; color: var(--on-accent); background: var(--acc, var(--blue));
                        border: var(--fm-border-w) solid var(--on-accent); border-radius: 3px;
                        padding: 2px 8px; flex: none; align-self: center; }
.a-slate .rc-play > h3::before, .a-violet .rc-play > h3::before { color: #F4F1EA; }

html[data-design="terminal"] .rc-dia { box-shadow: none; border-width: 1px;
                                       border-color: var(--cream-border);  }

/* ---- embedded media ----
   The same shape the live camp cards use: a 16:9 box with the player filling
   it, youtube-nocookie, lazy. Only ever rendered when there is a real id to
   put in it - an empty player is worse than the honest placeholder, which is
   what .rc-ph is for. */
.rc-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: 14px;
            border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; box-shadow: var(--fm-shadow-sm);
            overflow: hidden; background: var(--cream-2); }
.rc-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
html[data-design="terminal"] .rc-embed { box-shadow: none; border-width: 1px;
                                         border-color: var(--cream-border);  }

/* ---- a paste-able prompt ----
   The card is written as prompts the student hands to their own agent, so a
   prompt is an object on the page with a copy button, not a code block they
   have to select by hand. */
.rc-prompt { position: relative; border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px;
             background: var(--cream-2); box-shadow: var(--fm-shadow-sm);
             padding: 14px 16px 14px; margin-top: 14px; }
.rc-prompt p { font-family: var(--font-mono); font-size: 13px; line-height: 1.62;
               color: var(--ink); margin: 0; padding-right: 92px; }
.rc-prompt .rc-copy { position: absolute; top: 11px; right: 12px;
                      font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
                      letter-spacing: 1.2px; text-transform: uppercase;
                      background: var(--surface); color: var(--ink);
                      border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 3px;
                      padding: 5px 10px; cursor: pointer; }
.rc-prompt .rc-copy:hover { background: var(--neon); color: var(--on-accent); }
.rc-prompt .rc-copy.copied { background: var(--blue); color: var(--on-accent); }
html[data-design="terminal"] .rc-prompt { box-shadow: none; border-width: 1px;
                                          border-color: var(--cream-border);  }
@media (max-width: 620px) { .rc-prompt p { padding-right: 0; padding-top: 26px; } }
/* The prompt wears a stamp on its top border, the callout family's .co-stamp
   (note=blue, check=neon, warn=coral), in neon because a prompt is the thing
   you act on (Wade 09-27: "a little prompt tag, make it green, not a full-line
   thing"). Drawn by CSS so every generated prompt gets it with no markup
   change. The icon is the callout kit's "you type this" chevron. */
[data-program="workforce"] .rc-prompt { margin-top: 28px; padding-top: 24px; }
[data-program="workforce"] .rc-prompt::before {
  content: 'Prompt'; position: absolute; top: -15px; left: 16px; height: 30px; box-sizing: border-box;
  display: inline-flex; align-items: center; padding: 0 11px 0 34px;
  background: var(--surface) no-repeat 4px center / 22px 22px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='.75' y='.75' width='20.5' height='20.5' rx='2' fill='%23C8FF00' stroke='%23111' stroke-width='1.5'/%3E%3Cpath d='m6.5 7 4 4-4 4M12 15h4.5' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border: 1.5px solid var(--ink); border-radius: 3px; box-shadow: var(--fm-shadow-xs);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ink); }

/* ---- a picture, folded ----
   The drawings run 1,400 to 1,800px tall and were most of a lesson's length
   (Wade 09-27: pages too long). Each one folds into the Essentials dropdown
   (.ess-disc): what it shows in one plain sentence, open to see it. Expand
   still opens the spotlight once it is open. */
/* Made harder to skip (Wade 09-27, "I don't want those to be ignored"):
   a "Picture" stamp on the top border, the Prompt stamp's twin in the note
   blue; a thumbnail of the real drawing, painted by _wf.js from the srcdoc
   already on the page (a drawn-frame glyph until it paints, or with no JS);
   and the +/- square says Show / Hide. */
.ess-disc.wf-picfold { position: relative; margin: 34px 0 22px; }   /* .ess-disc (essentials.css, loaded later) zeroes the top */
.wf-picfold::before {
  content: 'Picture'; position: absolute; z-index: 1; top: -15px; left: 16px; height: 30px; box-sizing: border-box;
  display: inline-flex; align-items: center; padding: 0 11px 0 34px;
  background: var(--surface) no-repeat 4px center / 22px 22px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='.75' y='.75' width='20.5' height='20.5' rx='2' fill='%2300D4FF' stroke='%23111' stroke-width='1.5'/%3E%3Crect x='5' y='6' width='12' height='10' rx='1' fill='none' stroke='%23111' stroke-width='1.8'/%3E%3Cpath d='m5.5 15 4-4 3 3 1.5-1.5 2.5 2.5' fill='none' stroke='%23111' stroke-width='1.8' stroke-linejoin='round'/%3E%3Ccircle cx='13.6' cy='9' r='1.3' fill='%23111'/%3E%3C/svg%3E");
  border: 1.5px solid var(--ink); border-radius: 3px; box-shadow: var(--fm-shadow-xs);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ink); }
.wf-picfold summary { padding: 22px 16px 16px; gap: 14px 18px; flex-wrap: nowrap; }
.wf-picfold summary .t b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 700;
                           letter-spacing: -.3px; color: var(--ink); margin-bottom: 3px; }
.wf-picfold summary .t { font-size: 15.5px; line-height: 1.5; }
.wf-thumb { position: relative; flex: none; width: 176px; height: 124px; overflow: hidden;
            border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 3px; box-shadow: var(--fm-shadow-xs);
            background: var(--cream) no-repeat center / 64px 48px
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cg fill='none' stroke='%23111' stroke-width='2'%3E%3Crect x='2' y='2' width='20' height='12' rx='1'/%3E%3Crect x='42' y='2' width='20' height='12' rx='1'/%3E%3Crect x='22' y='34' width='20' height='12' rx='1'/%3E%3Cpath d='M22 8h20M12 14v10h40V14M32 24v10'/%3E%3C/g%3E%3C/svg%3E");
            transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
.wf-thumb iframe { position: absolute; top: 0; left: 0; width: 720px; border: 0; transform-origin: 0 0;
                   pointer-events: none; background: var(--surface); }
/* A step's screenshot, folded small inside the step (Wade 09-27: the
   Orientation's call-in box and Lesson 4). A compact Picture fold: a
   "Screenshot" stamp, a small thumbnail and the caption; open, the shot at
   a moderate width instead of the whole column. */
.ess-disc.wf-picfold.wf-shotfold { margin: 24px 0 14px; box-shadow: var(--fm-shadow-xs); }
.wf-shotfold::before { content: 'Screenshot'; }
.wf-shotfold summary { padding: 20px 12px 11px; gap: 10px 14px; min-height: 0; }
.wf-shotfold .wf-thumb { width: 112px; height: 64px; }
.wf-shotfold summary .t { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.wf-shotfold > .body { padding: 10px 12px 12px; }
/* open: the whole width of the fold, with Expand for full screen (the
   page's spotlight); the caption moves under the shot as the .ess-fig .cap */
.wf-shotfold .wf-shotfig { border: 0; box-shadow: none; padding: 0; margin: 0; background: transparent; }
.wf-shotfold .wf-shotfig .shot { margin: 0; }
.wf-shotfold .wf-shotfig .cap2 { display: none; }
/* Expanded, a screenshot fits the window whole (it ran 939px tall in a
   900px window and cut off the arrow it points with) */
[data-program="workforce"] .wf-spot-body img { display: block; width: auto; max-width: 100%; max-height: calc(100vh - 150px); margin: 0 auto; object-fit: contain; }
@media (max-width: 640px) { .wf-shotfold .wf-thumb { width: 100%; height: 110px; } }
/* image and in-page figures (the Orientation's), painted by WF_UI_JS */
.wf-thumb .wf-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.wf-thumb .wf-thumb-dom { position: absolute; top: 0; left: 0; width: 720px; transform-origin: 0 0; pointer-events: none; background: var(--surface); }
/* Painted, the drawn-frame glyph goes: centred behind a wide, short drawing it peeked out above and
   below it as stray brackets (Wade 10-12, the Week 4 welcome's six-step row). */
.wf-thumb:has(> iframe, > .wf-thumb-img, > .wf-thumb-dom) { background: var(--surface); }
.wf-picfold summary:hover .wf-thumb { transform: translate(-2px, -2px); box-shadow: var(--fm-shadow-sm); }
.wf-picfold summary .pm { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 8px; flex: none; }
.wf-picfold summary .pm::after { content: 'Show'; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
                                  letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink); }
.wf-picfold[open] summary .pm::after { content: 'Hide'; }
.wf-picfold > .body > .ess-fig { border: 0; box-shadow: none; padding: 0; margin: 0; }
/* phone: the thumbnail takes the full width on top, the sentence under it */
@media (max-width: 640px) {
  .wf-picfold summary { flex-wrap: wrap; }
  .wf-thumb { width: 100%; height: 140px; }
  .wf-picfold summary .t { flex: 1 1 0; }
}

/* ---- header facts, top right (Wade 09-27, MOCKUP on Lesson 2) ----
   One facts panel in the empty top-right corner beside the headline, from
   the Back button's line down, condensed so it is never taller than the
   headline block (Wade 09-27: "get that first box higher, take up that real
   estate"). It absorbs the lime stamp, the chip row, the side panel's meta
   table and the contents column's module box, which all said the same
   thing. It also holds the app switch: Claude Code or Codex, the Essentials
   choice (aibl-harness), remembered, never locked.
   .wf-top uses the lesson grid's own columns so the panel's edges line up
   with the rail under it. */
.wf-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); column-gap: 40px; align-items: start; }
.wf-top > .wf-facts { margin: 0; }
@media (max-width: 1179px) { .wf-top { grid-template-columns: minmax(0, 1fr); } .wf-top > .wf-facts { margin: 18px 0 0; } }
.wf-facts { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface);
            box-shadow: var(--fm-shadow-sm); padding: 11px 14px 12px; }
.wf-facts .pos { display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.1px;
                 text-transform: uppercase; background: var(--neon); color: var(--on-accent);
                 border: var(--fm-border-w-sm) solid var(--on-accent); border-radius: 3px; padding: 2px 7px; margin-bottom: 7px; }
.wf-facts .fl { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.wf-facts .fl b { color: var(--ink); font-weight: 600; }
.wf-facts .r { font-size: 13px; }
.wf-app { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin-top: 9px; }
.wf-app .l { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.3px;
             text-transform: uppercase; color: var(--ink-3); }
.wf-app .seg { display: grid; grid-template-columns: 1fr 1fr; border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; overflow: hidden; }
.wf-app .seg button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 8px;
                      font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
                      background: var(--cream-2); color: var(--ink-2); border: 0; cursor: pointer; }
.wf-app .seg button + button { border-left: var(--fm-border-w) solid var(--fm-border-c); }
.wf-app .seg button img { width: 16px; height: 16px; }
.wf-app .seg button[aria-pressed="true"] { background: var(--neon); color: var(--on-accent); }
.wf-app .seg button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -4px; }
.wf-app .hint { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }

/* ---- start with your agent ----
   Where the side panel's meta table was: three copy-only prompts (Wade 09-27:
   the text is never shown). Quiet on purpose, "too noisy" with subcopy: a
   label, an ink icon, a Copy tag. What to do next appears only after a copy,
   in the status line. The prompts follow the app switch and name the section
   the contents column marks as current. */
.wf-kick { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface);
           box-shadow: var(--fm-shadow-sm); padding: 12px 12px 6px; margin-bottom: 22px; }
.wf-kick .kk { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
               color: var(--ink); margin: 0 2px 9px; }
.wf-kbtn { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left;
           background: transparent; border: 0; border-top: 1px solid var(--cream-border); border-radius: 0;
           padding: 9px 4px; margin: 0; cursor: pointer; color: var(--ink); font: inherit; }
.wf-kbtn:first-of-type { border-top: 0; }
.wf-kbtn:hover .t { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--neon); text-underline-offset: 4px; }
.wf-kbtn:hover .cp { background: var(--neon); color: var(--on-accent); border-color: var(--on-accent); }
.wf-kbtn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 0; }
.wf-kbtn .ic svg { display: block; width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wf-kbtn .t { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.25; }
.wf-kbtn .cp { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
               border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 3px; padding: 3px 7px; background: var(--surface); }
.wf-kbtn.copied .cp { background: var(--blue); color: var(--on-accent); border-color: var(--on-accent); }
.wf-kick .st { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); margin: 2px 4px 6px; }
.wf-kick .st:empty { display: none; }

/* A line that differs by app, swapped quietly by the switch at the top: no
   tabs, no label (Wade 09-27: the "Forks by app" row was noise; the switch
   already says which app). Claude Code shows until the switch says Codex. */
html[data-harness="codex"] .wf-if[data-app="claude"],
html:not([data-harness="codex"]) .wf-if[data-app="codex"] { display: none; }
/* Right column, top to bottom: facts, then the card and the contents, which
   stay with you while you read.
   Two columns (lesson pages are html.wide, which essentials.css holds at two
   columns at every width, so there is no three-column case here):
   .wf-rail (card + contents) sticks as one under the facts.
   One column: facts, then the card, above the article; contents after it. */
.wf-rail { min-width: 0; }
@media (min-width: 1180px) {
  .wf-rail { position: sticky; top: 22px; }
  .wf-rail .rc-tocbox { position: static; }
}
@media (max-width: 1179px) {
  .rc-layout:has(.wf-rail) > .rc-aside, .wf-rail { display: contents; }
  .rc-layout .wf-facts { order: -2; margin: 0; }
  .rc-layout .wf-kick { order: -1; margin: 0; }
}

/* ---- terminal ----
   Field Manual is hard shadows; Terminal is a hairline and a glow. The
   sheet-wide fix for this is still open (see the handoff), but a component
   landing today should not be adding to that pile. */
html[data-design="terminal"] .rc-plate,
html[data-design="terminal"] .rc-disc,
html[data-design="terminal"] .rc-ladder,
html[data-design="terminal"] .rc-std,
html[data-design="terminal"] .rc-shape,
html[data-design="terminal"] .rc-sym,
html[data-design="terminal"] .rc-stick,
html[data-design="terminal"] .rc-out,
html[data-design="terminal"] .rc-nav > * { box-shadow: none; border-width: 1px;
                                           border-color: var(--cream-border);  }
html[data-design="terminal"] .rc-stick { border-color: var(--neon); }
html[data-design="terminal"] .rc-nav a:hover { top: 0; left: 0;
                                               box-shadow: 0 0 0 1px var(--neon), 0 0 18px var(--neon-glow); }
html[data-design="terminal"] .rc-rung, html[data-design="terminal"] .rc-rung .n,
html[data-design="terminal"] .rc-rung .w, html[data-design="terminal"] .rc-std .h,
html[data-design="terminal"] .rc-std .w, html[data-design="terminal"] .rc-disc .rc-body {
  border-color: var(--cream-border); border-width: 1px; }
html[data-design="terminal"] .rc-std .w { border-left-width: 4px; border-left-color: var(--coral); }
html[data-design="terminal"] .rc-ph { border-width: 1px;  }

  /* ---- the GitHub "Finish setup" card, copied from the dashboard (portal/index.html) so
     the focal mount on the program home renders styled instead of as bare text. ---- */
  [data-gh-connect="focal"] .ghc { height: 100%; margin: 0; box-sizing: border-box; }

  /* --- the "Finish setup" card that fills the focal slot (lib/github-connect.js
     focalMarkup). The 09-11 hybrid's chrome: tinted card, mono head row with the
     GitHub chip and a "needed to start" pill, three-row ladder, neon button.
     Copy re-fit 09-17 to the identity flow on main (return trip lands on Account;
     unlinked / on-file / support-review states; two-step access release). --- */
  .ghc { position: relative; display: flex; flex-direction: column; background: var(--neon-tint); border: var(--fm-border-w-lg) solid var(--fm-border-c); border-radius: 4px; box-shadow: var(--fm-shadow-lg); color: var(--ink); }
  .ghc-head { display: flex; align-items: center; gap: 12px; border-bottom: var(--fm-border-w) solid var(--fm-border-c); padding: 14px 20px; }
  .ghc-chip { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; }
  .ghc-chip svg { width: 15px; height: 15px; display: block; }
  .ghc-tag { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
  .ghc-need { display: inline-flex; align-items: center; gap: 6px; border: var(--fm-border-w) solid var(--on-accent); padding: 3px 9px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; background: var(--coral); color: #111111; }
  .ghc-need::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #111111; }
  .ghc-ref { margin-left: auto; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); text-align: right; }
  .ghc-body { padding: 20px 20px 22px; flex: 1; display: flex; flex-direction: column; }
  .ghc-body h3 { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -.6px; line-height: 1.14; margin: 0 0 10px; }
  .ghc-lead { font-size: 17px; line-height: 1.55; max-width: 60ch; margin: 0; }
  .ghc-rows { list-style: none; margin: 14px 0 0; padding: 0; }
  .ghc-rows li { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 12px 0; border-top: 1px dashed var(--ink-3); }
  .ghc-rows li:first-child { border-top: 0; padding-top: 0; }
  .ghc-k { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding-top: 3px; }
  .ghc-v { font-size: 17px; line-height: 1.55; max-width: 60ch; margin: 0; }
  .ghc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: auto; padding-top: 22px; }
  .ghc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 28px; font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; background: var(--neon); color: var(--on-accent); border: var(--fm-border-w) solid var(--on-accent); border-radius: 4px; box-shadow: var(--fm-flat, 4px 4px 0 var(--ink)); cursor: pointer; }
  .ghc-btn:hover { transform: translate(1px, 1px); box-shadow: var(--fm-hover-btn, 2px 2px 0 var(--ink)); }
  .ghc-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
  .ghc-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
  .ghc-link { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
  .ghc-link:hover { color: var(--ink); }
  .ghc-status { margin: 14px 0 0; padding: 10px 12px; border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 3px; background: var(--surface); font-size: 15px; line-height: 1.45; }
  @media (prefers-reduced-motion: no-preference) { .ghc-btn { transition: transform .13s var(--ease), box-shadow .13s var(--ease); } }
  @media (max-width: 640px) { .ghc-rows li { grid-template-columns: 1fr; gap: 4px; } .ghc-actions .ghc-btn { width: 100%; } .ghc-body h3 { font-size: 22px; } }
  html[data-design="terminal"] .ghc { border: 1.5px solid var(--cream-border);  box-shadow: none; }
  html[data-design="terminal"] .ghc-head { border-bottom: 1.5px solid var(--cream-border); }
  html[data-design="terminal"] .ghc-chip, html[data-design="terminal"] .ghc-status { border: 1.5px solid var(--cream-border); }
  html[data-design="terminal"] .ghc-need { border-color: var(--cream-border); background: var(--coral-dim); color: var(--coral); }
  html[data-design="terminal"] .ghc-need::before { background: var(--coral); }
  html[data-design="terminal"] .ghc-btn { border-color: transparent; box-shadow: none; }
  html[data-design="terminal"] .ghc-btn:hover { transform: translate(-2px, -2px); box-shadow: 0 0 22px var(--neon-glow); }


  /* ---- the week board: one surface per week ------------------------------
     Head band: the week beside its stamp card. Tracks: a module on the left,
     its lessons as rows on the right. The rows are the punch list. -------- */
  .wb { background: var(--surface); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; box-shadow: var(--fm-shadow); overflow: hidden; }
  .wb-head { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 28px; align-items: start; padding: 22px 24px 20px; border-bottom: var(--fm-border-w) solid var(--fm-border-c); background: var(--cream); }
  .wb-title { display: flex; align-items: center; gap: 14px; }
  .wb-n { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -1px; padding: 2px 12px; border-radius: 4px; background: var(--acc, var(--ink)); color: var(--on-ink); }
  .a-teal { --acc: var(--teal); }
  .a-blue .wb-n, .a-orange .wb-n, .a-coral .wb-n, .a-neon .wb-n, .a-teal .wb-n, .a-camp .wb-n { color: var(--ink); }
  .wb-t { display: flex; flex-direction: column; gap: 2px; }
  .wb-t b { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
  .wb-t i { font-family: var(--font-mono); font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-2); }
  .wb-lede { margin: 14px 0 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; max-width: 62ch; }
  .wb-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
  .wb-meta .pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 5px 9px; border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 3px; background: var(--surface); color: var(--ink); }
  .wb-meta .pill.needs { border-color: var(--coral); color: var(--coral); background: var(--coral-tint); }
  .wb-meta .pill.lk svg { width: 11px; height: 11px; fill: currentColor; }
  /* progress: the punch-list hooks the page JS drives (.pu-h em, .pu-bar span, .pu-f, .pu-all) */
  .wb-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; margin: 18px 0 0; padding: 12px 14px; border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); }
  .wb-progress .pu-h { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-2); }
  .wb-progress .pu-h em { font-style: normal; color: var(--ink); }
  .wb-progress .pu-f { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); grid-column: 1; }
  .wb-progress .pu-bar { flex: 1; height: 12px; border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 3px; overflow: hidden; background: var(--cream); }
  .wb-progress .pu-bar span { display: block; height: 100%; background: var(--neon); transition: width .3s var(--ease); }
  .wb-progress .pu-all { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; padding: 8px 12px; border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--fm-shadow-xs); }
  .wb-progress .pu-all:hover { transform: translate(-1px, -1px); box-shadow: var(--fm-hover-card, 3px 3px 0 var(--ink)); }
  .wb-card .tapewrap { margin: 0; }
  .wb-card .tcard { padding: 12px 12px 10px; }
  /* tracks */
  .wb-tracks { display: block; }
  .track { display: grid; grid-template-columns: 300px minmax(0, 1fr); border-bottom: var(--fm-border-w) solid var(--fm-border-c); }
  .track:last-child { border-bottom: 0; }
  .track-mod { padding: 18px 20px 20px 24px; border-right: var(--fm-border-w) solid var(--fm-border-c); background: var(--cream); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
  .track-mod .mod-n { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 4px; padding: 3px 7px; background: var(--surface); color: var(--ink); }
  .track-mod .mod-n.on { background: var(--acc, var(--ink)); color: var(--on-ink); border-color: var(--on-accent); }
  .a-blue .mod-n.on, .a-coral .mod-n.on, .a-neon .mod-n.on, .a-teal .mod-n.on, .a-camp .mod-n.on { color: var(--ink); }
  .track-mod b { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
  .track-mod .mod-d { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
  .track-mod .mod-open { margin-top: auto; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 8px 12px; border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); box-shadow: var(--fm-shadow-xs); }
  .track-mod .mod-open:hover { transform: translate(-1px, -1px); box-shadow: var(--fm-hover-card, 3px 3px 0 var(--ink)); }
  .track-mod .mod-open.soon { border-style: dashed; box-shadow: none; color: var(--ink-3); }
  .track.start .track-mod { background: color-mix(in srgb, var(--acc, var(--ink)) 16%, var(--surface)); }
  .track.start .lrow.read { background: var(--surface); }
  .track-lessons { display: grid; grid-auto-rows: minmax(0, 1fr); align-content: stretch; }
  /* rows */
  .lrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; align-content: center; gap: 0 12px; padding: 12px 18px 12px 14px; border-bottom: 1.5px solid var(--cream-border); position: relative; background: var(--surface); }
  .lrow:last-child { border-bottom: 0; }
  .lrow.read { grid-template-columns: 30px minmax(0, 1fr) auto; text-decoration: none; color: inherit; }
  .lrow-tick { display: grid; place-items: center; cursor: pointer; }
  .lrow-tick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .lrow-tick .pu-box { width: 24px; height: 24px; border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 3px; background: var(--surface); display: grid; place-items: center; }
  .lrow-tick .pu-box svg { width: 14px; height: 14px; opacity: 0; }
  .lrow.done .pu-box { background: var(--neon); }
  .lrow.done .pu-box svg { opacity: 1; }
  .lrow-body { display: flex; align-items: center; gap: 14px; min-width: 0; text-decoration: none; color: inherit; }
  .lrow-n { flex: none; width: 30px; height: 30px; border-radius: 50%; border: var(--fm-border-w-sm) solid var(--fm-border-c); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; background: var(--cream); }
  .lrow.read .lrow-n { border: 0; background: transparent; width: 26px; }
  .lrow.read .lrow-n svg { width: 20px; height: 20px; }
  .lrow-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .lrow-t { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; line-height: 1.25; }
  .lrow-d { color: var(--ink-2); font-size: 13px; line-height: 1.4; }
  .lrow-go { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 11px 18px; border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); white-space: nowrap; box-shadow: var(--fm-shadow-xs); }
  .lrow-go:hover { transform: translate(-1px, -1px); box-shadow: var(--fm-hover-card, 3px 3px 0 var(--ink)); }
  .lrow:hover { background: var(--cream); }
  /* where you are */
  .lrow.cur { background: var(--neon-tint); }
  .track:has(.lrow.cur) .track-mod { background: var(--neon-tint); box-shadow: inset 5px 0 0 var(--neon); }
  .lrow.cur::before { content: 'Up next'; position: absolute; left: -2px; top: -1px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; background: var(--neon); color: var(--ink); padding: 2px 7px; border: var(--fm-border-w-sm) solid var(--on-accent); border-radius: 0 0 4px 0; }
  .lrow.cur { padding-top: 18px; }
  .lrow.done .lrow-t { color: var(--ink-2); }
  /* the mini stamp: same family as the weekly stamp, in the week's colour, lands when the row is done */
  .lrow-stamp { display: none; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: var(--acc, #B3261E); padding: 4px 9px; border: 2px solid var(--acc, #B3261E); border-radius: 3px;
    box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3.5px var(--acc, #B3261E); transform: rotate(-8deg); opacity: .92; white-space: nowrap; }
  .lrow.done .lrow-stamp { display: inline-block; }
  .lrow.done .lrow-n { background: var(--neon); }
  .lrow.soon .lrow-go { color: var(--ink-3); border-style: dashed; box-shadow: none; }
  @media (max-width: 1100px) { .wb-head { grid-template-columns: 1fr; } .track { grid-template-columns: 1fr; } .track-mod { border-right: 0; border-bottom: var(--fm-border-w-sm) solid var(--fm-border-c); } }
  .wk-top .wp-head { margin: 0; }
  .wk-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
  .wk-meta .pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10.5px;
    font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 5px 9px; border: var(--fm-border-w-sm) solid var(--fm-border-c);
    border-radius: 999px; background: var(--surface); color: var(--ink); }
  .wk-lede { margin: 12px 0 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; max-width: 560px; }
  .wk-card .tapewrap { margin: 0; }
  .wk-card .tcard { padding: 12px 12px 10px; }
  .cardframe.file canvas { background: transparent; border: 0; box-shadow: none; }
  .cardframe.file { transform: none !important; }
  .gh-row { margin: 22px 0 6px; }
  .gh-row .ghc { max-width: 100%; }
  .gh-row .ghc-rows { columns: 2; column-gap: 32px; }
  .gh-row .ghc-rows li { break-inside: avoid; }
  @media (max-width: 900px) { .gh-row .ghc-rows { columns: 1; } }
  @media (max-width: 900px) { .wk-top { grid-template-columns: 1fr; } }

/* ---- empty spine surface ---- */
.wf-empty { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface);
            box-shadow: var(--fm-shadow); padding: 60px 34px 64px; text-align: center;
            max-width: 720px; margin: 8px auto 0; }
.wf-empty svg { width: 54px; height: 54px; margin: 0 auto 18px; display: block; fill: none;
                stroke: var(--ink-3); stroke-width: 1.7; stroke-linecap: round; }
.wf-empty h2 { font-family: var(--font-display); font-weight: 700; font-size: 22px;
               letter-spacing: -.5px; margin-bottom: 9px; }
.wf-empty p { font-size: 15px; color: var(--ink-2); max-width: 460px; margin: 0 auto 22px; line-height: 1.6; }
.wf-empty-go { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 1.3px;
               text-transform: uppercase; color: var(--ink); text-decoration: underline;
               text-underline-offset: 4px; }
html[data-design="terminal"] .wf-empty { border-width: 1px; border-color: var(--cream-border);
                                         box-shadow: none;  }


/* ================= HERO, camp's layout =================================
 Shared, because HERO is shared markup: gen_workforce7 puts it on the
 program home and gen_lessons puts it on every week page. It lived in
 the home page's inline <style> until 09-02, which meant the week page
 carried the markup with none of the layout. */
/* 566px = camp's 520px canvas + the taped card's 44px of padding, so the
   share card renders at the size camp's week card does (Wade 09-02:
   "pretty much the same size as the thing inside of the summer camp").
   Measured, not guessed: camp 520x275, this was 384x204. */
.spot { display: grid; grid-template-columns: minmax(0,1fr) minmax(0, 566px); gap: 34px; align-items: end;
        padding: 8px 0 44px; }
@media (max-width: 1280px) { .spot { grid-template-columns: 1fr; gap: 34px; } }
.spot-eye { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 12px;
            letter-spacing: 3px; text-transform: uppercase; color: var(--ink-2); margin-bottom: 18px; }
.spot-eye::before { content: ''; width: 40px; height: 2px; background: var(--neon); flex: none; }
.spot h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 3.9vw, 50px);
           line-height: 1.24; letter-spacing: -2px; max-width: 900px; margin-bottom: 22px; }
.spot h1 em { font-style: normal; background: var(--neon); color: var(--on-accent); padding: 1px 10px 3px;
              border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.spot-sub { font-size: clamp(15px, 1.2vw, 17px); color: var(--ink-2); max-width: 660px; line-height: 1.6; margin-bottom: 28px; }
.spot-sub strong { color: var(--ink); font-weight: 600; }
.spot-act { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-a, .btn-b { font-family: var(--font-body); font-size: 14.5px; font-weight: 700; text-decoration: none;
                 border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; padding: 12px 18px; color: var(--ink);
                 box-shadow: var(--fm-flat, 4px 4px 0 var(--ink)); position: relative; top: 0; left: 0;
                 transition: top .14s var(--ease), left .14s var(--ease), box-shadow .14s var(--ease); }
.btn-a { background: var(--neon); color: var(--on-accent); }
.btn-b { background: var(--surface); }
.btn-a:hover, .btn-b:hover { top: -2px; left: -2px; box-shadow: var(--fm-hover-btn, 6px 6px 0 var(--ink)); }
html[data-design="terminal"] .btn-a { border-color: #111111; }
.spot-tags { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 26px; }
.spot-tag { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase;
            color: var(--ink-2); border: 1px solid var(--ink); background: var(--cream); padding: 5px 11px; }


/* ================= THE SHARE CARD =====================================
   Canonical scotch-tape (design-elite components/scotch-tape/spec.md):
   78x26 strips at top -11px, left/right 26px, -27deg and 25deg, sheen
   gradient, 1px ink edge, one soft 1px drop. THE HOST STAYS AT 0deg -- the
   spec rules against a resting rotation on a text-bearing card -- and
   Terminal drops the strips entirely. */
.tcard { position: relative; overflow: visible; background: var(--surface); border: var(--fm-border-w) solid var(--fm-border-c);
         border-radius: 4px; box-shadow: var(--fm-shadow-lg); padding: 20px 22px 18px; }
.scotch-tape::before, .scotch-tape::after {
  content: ''; display: block; position: absolute; top: -11px; width: 78px; height: 26px; z-index: 5;
  background: rgba(255, 247, 185, 0.80);
  background-image: linear-gradient(90deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 45%, rgba(255,255,255,0.28));
  border: 1px solid rgba(0,0,0,0.13);
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
  pointer-events: none; }
.scotch-tape::before { left: 26px; transform: rotate(-27deg); }
.scotch-tape::after  { right: 26px; transform: rotate(25deg); }
html[data-design="terminal"] .scotch-tape::before,
html[data-design="terminal"] .scotch-tape::after { display: none; }

.tc2-head { margin-bottom: 12px; }
.tc2-eye { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.8px;
           text-transform: uppercase; color: var(--ink-2); }

/* The frame tilts and the tag rides it. Both live OUTSIDE the canvas, so
   neither can be baked into the downloaded image. */
.cardframe { position: relative; transform-origin: 50% 50%; transition: transform .38s var(--ease); }
.cardframe canvas { width: 100%; height: auto; display: block; background: #F4F1EA;
                    border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; }
.cf-tag { position: absolute; bottom: 9px; right: 11px; z-index: 3; transform: rotate(-4deg);
          font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
          text-transform: uppercase; background: var(--neon); color: #111111; border: 2.5px solid #111111;
          border-radius: 4px; padding: 7px 12px 8px; box-shadow: 4px 4px 0 rgba(17,17,17,.9); white-space: nowrap; }
.cf-tag[hidden] { display: none; }

.cbar { display: flex; align-items: center; gap: 10px; margin-top: 12px; position: relative; }
.cbar-lab { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px;
            text-transform: uppercase; color: var(--ink-2); }
.tools { margin-left: auto; display: flex; gap: 6px; flex: none; }
.sharebtn2 { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px;
             font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; background: var(--neon);
             color: #111111; border: 2px solid #111111; border-radius: 4px; padding: 7px 12px; cursor: pointer;
             box-shadow: var(--fm-shadow-xs); position: relative; top: 0; left: 0;
             transition: top .12s var(--ease), left .12s var(--ease), box-shadow .12s var(--ease); }
.sharebtn2 svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2;
                 stroke-linecap: round; stroke-linejoin: round; }
.sharebtn2:hover:not(:disabled) { top: -1px; left: -1px; box-shadow: var(--fm-hover-btn, 4px 4px 0 var(--ink)); }
.sharebtn2:disabled { background: transparent; color: var(--ink-2); border-color: var(--cream-border);
                      box-shadow: none; cursor: default; opacity: .6; }
.tool { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer;
        background: transparent; border: 1.5px solid var(--cream-border); border-radius: 4px; color: var(--ink-2);
        padding: 0; }
.tool svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
            stroke-linejoin: round; }
.tool:hover:not(:disabled) { border-color: #111111; background: var(--neon); color: #111111; }
.tool.is-ok { background: var(--neon); border-color: #111111; color: #111111; }
.tool:disabled { opacity: .38; cursor: default; }

.pop { position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 30; background: var(--surface);
       border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; box-shadow: var(--fm-flat, 4px 4px 0 var(--ink)); padding: 6px;
       min-width: 240px; }
.pop button { display: flex; width: 100%; align-items: center; gap: 9px; font-family: var(--font-mono);
              font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink);
              background: none; border: none; border-radius: 3px; padding: 9px 10px; cursor: pointer;
              text-align: left; }
.pop button:hover, .pop button:focus-visible { background: var(--neon); color: #111111; }
.pop button svg { width: 14px; height: 14px; fill: currentColor; stroke: none; flex: none; }
.pop-note { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .8px;
            text-transform: uppercase; color: var(--ink-2); padding: 7px 10px 5px;
            border-top: 1px dashed var(--ink-3); margin-top: 4px; }
.toast { position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 30; background: var(--ink);
         color: var(--cream); font-family: var(--font-mono); font-size: 11px; letter-spacing: .6px;
         border-radius: 4px; padding: 9px 12px; max-width: 300px; }

/* field-manual.css only styles its own class names, so anything invented
   here keeps the FM hard shadow in Terminal unless it is turned off by hand.
   Done locally; the global fix is a separate job (HANDOFF 7). */
html[data-design="terminal"] .tcard { box-shadow: none; border-width: 1px; border-color: var(--cream-border); }
html[data-design="terminal"] .cardframe canvas { border-width: 1px; border-color: var(--cream-border);  }
html[data-design="terminal"] .sharebtn2 { box-shadow: none; border-color: #111111; }
html[data-design="terminal"] .sharebtn2:hover:not(:disabled) { top: 0; left: 0; box-shadow: 0 0 0 1px var(--neon); }
html[data-design="terminal"] .sharebtn2:disabled { border-color: #2a2a2a; background: transparent; }
html[data-design="terminal"] .tool { border-color: #2a2a2a; }
html[data-design="terminal"] .pop { border-width: 1px; border-color: #2a2a2a; background: #161616;
                                    box-shadow: 0 10px 30px rgba(0,0,0,.55); }
html[data-design="terminal"] .toast { background: #161616; color: #f0f0f0; border: 1px solid #2a2a2a; }

/* Workforce lesson pages carry Sara's .ess-scope kit, which re-pins --fm-border-w / --fm-shadow(-sm) to the
   light values and so cancels the terminal flip inside every lesson. The pages are generated from her vendored
   source (_gen/src/sara-latest), so the flip goes back on here, where regeneration cannot undo it. */
html[data-design="terminal"] .ess-scope { --fm-border-w: 1.5px; --fm-shadow-sm: none; --fm-shadow: none; }

/* "Done" stamps take the week's accent as ink; saturated accents (violet, red) sink into the terminal background,
   so in dark the stamp mixes its accent toward the text colour. */
html[data-design="terminal"] .lrow-stamp {
  color: color-mix(in srgb, var(--acc, #B3261E) 55%, var(--ink));
  border-color: color-mix(in srgb, var(--acc, #B3261E) 55%, var(--ink));
  box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3.5px color-mix(in srgb, var(--acc, #B3261E) 55%, var(--ink));
}
/* terminal overrides: workforce-pages (fm-overrides.mjs, regenerate, do not hand-edit) */
/* 23 pages, 2902 inline rules read, 204 overrides. Source: each page's own <style>. */
html[data-design="terminal"][data-program="workforce"] .jump { border-top-color: var(--fm-border-c); border-top-width: var(--fm-border-w); border-bottom-color: var(--fm-border-c); border-bottom-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .jsel { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .jp { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .jp:hover { box-shadow: var(--fm-hover-card); }
html[data-design="terminal"][data-program="workforce"] .jp.active { box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .wtile { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .wtile:hover { box-shadow: var(--fm-hover-card); }
html[data-design="terminal"][data-program="workforce"] .wt-cov { border-bottom-color: var(--fm-border-c); border-bottom-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .wt-rib { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .wtile.is-now::before { border-color: var(--on-accent); border-width: var(--fm-border-w); color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .wp-head { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .wp-m .pill { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .les { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .les:hover { box-shadow: var(--fm-hover-card); }
html[data-design="terminal"][data-program="workforce"] .les-cov { border-bottom-color: var(--fm-border-c); border-bottom-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .les-tick { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .les-k { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .kind-head { border-bottom-color: var(--fm-border-c); border-bottom-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .kind-head .kind-tag { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .opt-rows { border-bottom-color: var(--fm-border-c); border-bottom-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .kind-chip { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .lrow-first { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .les.is-cur::before { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .pu-f { border-top-color: var(--fm-border-c); border-top-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .pu-bar { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .ro-stats .pill { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .ro-switch { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .ro-switch .sw + .sw { border-left-color: var(--fm-border-c); border-left-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .skcard { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .skcard:hover { box-shadow: var(--fm-hover-card); }
html[data-design="terminal"][data-program="workforce"] .skcard .used i { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .seat-dot { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .wk-chip { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .you { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .cos { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .faculty { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .cos:hover { box-shadow: var(--fm-hover-card); }
html[data-design="terminal"][data-program="workforce"] .cos-ic { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .fac { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .dept { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .dept-head { border-bottom-color: var(--fm-border-c); border-bottom-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .tcard-b { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .tcard-b:hover { box-shadow: var(--fm-hover-card); }
html[data-design="terminal"][data-program="workforce"] .tb-band { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .tb-plate { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .tb-ic { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .tb-plate .wk-chip { box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .tb-stats { border-top-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .filt { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .filt-search { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .fc { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .drawer { border-left-color: var(--fm-border-c); border-left-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .dr-plate { border-bottom-color: var(--fm-border-c); border-bottom-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .dr-ring { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .dr-plate .wk-chip { box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .dr-x { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .dr-facts span { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .dr-back { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .dr-tabs { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .dr-tabs .dt + .dt { border-left-color: var(--fm-border-c); border-left-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .dr-layer { border-bottom-color: var(--fm-border-c); border-bottom-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .dr-copy { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .dr-link { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .dr-skfilt input { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .dr-skillgrid.many { border-bottom-color: var(--fm-border-c); border-bottom-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .dr-sklink { border-bottom-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .dr-filebar { border-top-color: var(--fm-border-c); border-top-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .sk-card { border-color: var(--fm-border-c); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .sk-card:hover { box-shadow: var(--fm-hover-card); }
html[data-design="terminal"][data-program="workforce"] .dr-foot { border-top-color: var(--fm-border-c); border-top-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .dr-open { border-color: var(--on-accent); border-width: var(--fm-border-w); box-shadow: none; color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .wf-kinds .kind-plate { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .ess-ready li { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .wf-blk { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .wf-blk .wk { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .wf-blk.fin { box-shadow: none; color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .wf-tree ul { border-left-color: var(--fm-border-c); border-left-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .wf-tree li::before { border-top-color: var(--fm-border-c); border-top-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .wf-tree .n { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .wf-tree .n.repo { box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .wf-key em { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .ess-reps li { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .wf-tag::before { border-color: var(--on-accent); border-width: var(--fm-border-w); color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .wf-expand { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .wf-saved { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .jf-gaps { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .pq { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .pq-col { border-right-color: var(--fm-border-c); border-right-width: var(--fm-border-w); border-bottom-color: var(--fm-border-c); border-bottom-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] body:not(.review) .sd-box { box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .one-line { border-left-color: var(--fm-border-c); border-left-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .fold { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .brk td { border-top-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .brk th { border-top-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .pc { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .pull { border-color: var(--on-accent); border-width: var(--fm-border-w); box-shadow: none; color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .shot { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .shot .cap2 { border-top-color: var(--fm-border-c); border-top-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .prof-box { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .grp { border-top-color: var(--fm-border-c); border-top-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .ob-badge { border-color: var(--on-accent); border-width: var(--fm-border-w); box-shadow: none; color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .ob-box { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .ob-g5 { border-top-color: var(--fm-border-c); border-top-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .ob-d { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .ob-yours li.star::before { border-color: var(--fm-border-c); border-width: var(--fm-border-w); background: #2a2300; }
html[data-design="terminal"][data-program="workforce"] .ob-legend span.b::before { border-color: var(--fm-border-c); border-width: var(--fm-border-w); background: #2a2300; }
html[data-design="terminal"][data-program="workforce"] .wkbar { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .wb-m .pill { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .punch { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .pu-h { border-bottom-color: var(--fm-border-c); border-bottom-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .pu-all { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .pu-box { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .lrow { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .lr-ic { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .lr-k { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .jf-box { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"][data-program="workforce"] .jf-you { box-shadow: none; color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .jf-gaps code { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .mod-prompt pre { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .mod-les { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"][data-program="workforce"] .mod-les .k i { border-color: var(--fm-border-c); }
html[data-design="terminal"][data-program="workforce"] .les.is-done .les-tick { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .lrow.done .lrow-n.glyph { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .pu-bar span { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .ro-stats .pill.on { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .ro-switch .sw.is-on { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .dr-copy.copied { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .wf-kinds .k1 .kind-plate { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .wf-kinds .hi { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .dod.is-done .dod-btn { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .wf-tree .n.new { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .wf-key em.new { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .wf-tree .new { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .ess-scope .rc-main p > a[href]:not(.btn):not(.next):hover { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .wf-spot-x:not(:hover):not(:focus-visible) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .wf-expand:hover { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .wf-expand:focus-visible { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .l6-lead mark { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .l6-def mark { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .l6-carry .when { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .l6-map .close .t { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .l6-bw .in { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .l6-move .k { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .l6-ok .yes .k { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .l6-ck li.hit .dot { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .l6-ck li.hit .ex { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .pu-row.done .pu-box { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .rc-starter .rc-btn.copied { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .wt-cov:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) *) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .wt-cov:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .wp-head:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) *) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .wp-head:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .les-cov:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) *) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .les-cov:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .kind-head:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) *) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .kind-head:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .lrow-n.glyph:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) *) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .lrow-n.glyph:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .kind-note em:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) *) { color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .kind-note em:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) { color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .tb-band:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) *) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .tb-band:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .tb-plate:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) *) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .tb-plate:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .fc[data-filter="dept"].is-on:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) *) { color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .fc[data-filter="dept"].is-on:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) { color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .dr-plate:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) *) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .dr-plate:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .wkbar:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) *) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .wkbar:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .lr-ic:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) *) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .lr-ic:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-faq) { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .kind-head.req .kind-tag { color: var(--cream); }
html[data-design="terminal"][data-program="workforce"] .fc.is-on { color: var(--cream); }
html[data-design="terminal"][data-program="workforce"] .wt-dur { background: var(--cream-2); color: var(--ink); }
html[data-design="terminal"][data-program="workforce"] .wf-spot-body { background: var(--surface); }
html[data-design="terminal"][data-program="workforce"] .wf-team { background: var(--cream-2); color: var(--ink); }
html[data-design="terminal"][data-program="workforce"] .wf-vis { background: var(--surface); }
html[data-design="terminal"][data-program="workforce"] .tc { background: var(--cream-2); }
html[data-design="terminal"][data-program="workforce"] .sd-box { background: var(--cream-2); color: var(--ink); }
html[data-design="terminal"][data-program="workforce"] .ob-yours { background: #2a2300; }
html[data-design="terminal"][data-program="workforce"] .l6-carry div { background: var(--surface); }
html[data-design="terminal"][data-program="workforce"] .l6-ok>div { background: var(--surface); }
html[data-design="terminal"][data-program="workforce"] .l6-never { background: var(--surface); }
html[data-design="terminal"][data-program="workforce"] .l6-chips span { background: var(--surface); }
html[data-design="terminal"][data-program="workforce"] .l6-map { background: var(--surface); }
html[data-design="terminal"][data-program="workforce"] .l6-map .skim .t { background: var(--cream-2); }
html[data-design="terminal"][data-program="workforce"] .l6-map .leg { background: var(--cream-2); }
html[data-design="terminal"][data-program="workforce"] .l6-never .nv span { background: var(--cream-2); }
html[data-design="terminal"][data-program="workforce"] .l6-move { background: var(--surface); }
html[data-design="terminal"][data-program="workforce"] .l6-wo { background: var(--surface); }
html[data-design="terminal"][data-program="workforce"] .l6-ok div { background: var(--surface); }
html[data-design="terminal"][data-program="workforce"] .l6-ck .dot { background: var(--cream-2); }
html[data-design="terminal"][data-program="workforce"] .l6-ck .card { background: var(--surface); }
html[data-design="terminal"][data-program="workforce"] .l6-ck .src { background: var(--cream-2); }
html[data-design="terminal"][data-program="workforce"] .l6-ck .ex { background: var(--cream-2); }
html[data-design="terminal"][data-program="workforce"] .sdt { background: #2a2300; }
html[data-design="terminal"][data-program="workforce"] .wf-team p { color: var(--ink); }
html[data-design="terminal"][data-program="workforce"] .jp.active i { color: var(--on-accent-2); }
html[data-design="terminal"][data-program="workforce"] .lrow.done .lrow-n.glyph .ic { color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .ro-switch .sw.is-on + .sw { border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .ro-switch .sw.is-on em { color: var(--on-accent-3); }
html[data-design="terminal"][data-program="workforce"] .wf-blk.fin .wk { border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] .wf-blk.fin .has { color: var(--on-accent-2); }
html[data-design="terminal"][data-program="workforce"] .wf-tree .n.new span { color: var(--on-accent-2); }
/* end terminal overrides: workforce-pages */
/* Hand fixes, terminal only (09-25). Class names are shared across Workforce pages, so these are scoped by hand
   rather than generated. The Roster's Director card (.you) is lime; in the lessons .you is a tinted card. */
html[data-design="terminal"][data-program="workforce"] body[data-nav="workforce-roster"] .you { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] body[data-nav="workforce-roster"] .you b,
html[data-design="terminal"][data-program="workforce"] body[data-nav="workforce-roster"] .you li { color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] body[data-nav="workforce-roster"] .you .you-eye,
html[data-design="terminal"][data-program="workforce"] body[data-nav="workforce-roster"] .you p { color: var(--on-accent-2); }
/* Sara's deep-dive boxes hard-code #111 text and pin an ink border: theme ink and the hairline in dark. */
html[data-design="terminal"][data-program="workforce"] .sd-box { color: var(--ink); }
html[data-design="terminal"][data-program="workforce"] body:not(.review) .sd-box { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
/* Chief of Staff lesson: the lime OK chips (the coral .no chips already carry #111 text). Roster drawer plates:
   accent plates pin dark text; the cream skill-drawer plate gets the theme ink back. */
html[data-design="terminal"][data-program="workforce"] .l6-ok .k { color: var(--on-accent); }
html[data-design="terminal"][data-program="workforce"] body[data-nav="workforce-roster"] .drawer.sk .dr-plate { color: var(--ink); }
html[data-design="terminal"][data-program="workforce"] body[data-nav="workforce-roster"] .dr-plate .dr-x,
html[data-design="terminal"][data-program="workforce"] body[data-nav="workforce-roster"] .dr-plate .dr-back { color: var(--ink); }
html[data-design="terminal"][data-program="workforce"] body[data-nav="workforce-roster"] .you .you-foot { color: var(--on-accent-2); }
html[data-design="terminal"][data-program="workforce"] body[data-nav="workforce-roster"] .dr-back { color: var(--ink); }
/* Session plates with no week accent fall back to cream-2, which goes dark in dark: a light grey keeps the
   plate's dark number readable. */
html[data-design="terminal"] .rc-plate .rc-no { background: var(--acc, var(--ink-2)); }
/* Lesson 6 "One honest line": a black callout with a lime hard shadow in light. On the terminal black the fill
   disappears and only the lime slab shows, so dark gets a panel with a hairline and a lime rule down the left. */
html[data-design="terminal"][data-program="workforce"] .l6-honest { background: var(--surface); border: 1.5px solid var(--fm-border-c); border-left: 4px solid var(--neon); box-shadow: none; }
/* Roster Director card: the list bullets are ink dots, which go light in dark; on the lime card they stay dark. */
html[data-design="terminal"][data-program="workforce"] body[data-nav="workforce-roster"] .you-list li::before { background: var(--on-accent); }
/* Lesson 1 team labels are a dark red (#C62828) that sinks into the terminal black: lighten toward the text colour. */
html[data-design="terminal"][data-program="workforce"] .wf-team-k { color: color-mix(in srgb, #C62828 55%, var(--ink)); }


/* rule 8 pins: fm-sweep.mjs */
/* Text, border and icon stroke on an accent fill stay dark in the terminal theme (decision 6). */
html[data-design="terminal"] .st.ready::before,
html[data-design="terminal"] .st.draft::before,
html[data-design="terminal"] .st.blocked::before,
html[data-design="terminal"] .meter i.on,
html[data-design="terminal"] .rc-stick,
html[data-design="terminal"] .wb-progress .pu-bar span,
html[data-design="terminal"] .lrow.done .pu-box,
html[data-design="terminal"] .lrow.cur::before,
html[data-design="terminal"] .lrow.done .lrow-n,
html[data-design="terminal"] .spot-eye::before { color: var(--on-accent); border-color: var(--on-accent); }
/* Light-accent wrappers, ink-filled chips and hard-coded light fills (fm-terminal-fixes.mjs). */
html[data-design="terminal"] .wkh:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime) *) { color: var(--on-accent); }
html[data-design="terminal"] .wkh:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime) { color: var(--on-accent); }
html[data-design="terminal"] .rc-cover:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime) *) { color: var(--on-accent); }
html[data-design="terminal"] .rc-cover:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime) { color: var(--on-accent); }
html[data-design="terminal"] .rc-play > h3:not(:is(.a-violet, .a-slate, .a-ink) *):not(:is(.a-violet, .a-slate, .a-ink))::before { color: var(--on-accent); }
html[data-design="terminal"] .rc-play > h3:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime) *)::before { color: var(--on-accent); }
html[data-design="terminal"] .wb-n:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime) *) { color: var(--on-accent); }
html[data-design="terminal"] .wb-n:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime) { color: var(--on-accent); }
html[data-design="terminal"] .track-mod .mod-n.on:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime) *) { color: var(--on-accent); }
html[data-design="terminal"] .track-mod .mod-n.on:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime) { color: var(--on-accent); }
html[data-design="terminal"] .cardframe canvas { background: var(--cream-2); }
/* end rule 8 pins */