/* Fieldwork — programmes. Generated by si65_fieldwork.py; do not hand-edit.
   Tokens only: every colour is a var() the site defines, so dark mode needs no
   second rule set. Layout: a hero that splits left copy from a right-hand card
   on both pages, then a single content column — the outline sidebar was
   removed in favour of week jump-links in the rail, because a 248px column of
   eighteen module titles duplicated the page it sat beside.

   CHEVRONS USE THE CHILD COMBINATOR ON PURPOSE. `.fw-mod[open] .chev` rotated
   every chevron INSIDE an open module, including the lesson folds nested in
   it, so a closed lesson showed an up-arrow. Each rule below turns exactly the
   arrow belonging to that element's own summary. */

/* ── the hero: copy left, card right, card centred on the copy ───────── */
.fw-hero{display:grid;grid-template-columns:1fr;gap:22px;
  padding:34px 0 4px;margin:0 0 26px}
@media(min-width:960px){
  .fw-hero{grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);gap:38px;
    align-items:center;padding-top:46px}
}
.fw-hero .kick{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);margin:0 0 8px}
.fw-hero h1{font-family:var(--display);font-weight:400;
  font-size:clamp(30px,4.6vw,46px);line-height:1.08;margin:0 0 .4em;
  color:var(--ink);letter-spacing:-.015em}
.fw-hero h1 em{font-style:italic;color:var(--accent)}
.fw-hero .hcopy p{color:var(--text-soft);font-size:16.5px;line-height:1.65;
  margin:0 0 12px;max-width:60ch}
.fw-facts{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0}
.fw-facts span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-soft);border:1px solid var(--line);
  border-radius:99px;padding:5px 11px}

/* ── the hero card ──────────────────────────────────────────────────── */
.fw-hcard{border:1px solid var(--jade-line);background:var(--jade-soft);
  border-radius:18px;padding:24px 24px 22px}
.fw-hcard .kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.fw-hcard h2{font-family:var(--display);font-weight:400;font-size:21px;
  line-height:1.25;margin:0 0 10px;color:var(--ink)}
.fw-hcard h2 em{font-style:italic;color:var(--accent)}
.fw-hcard p{color:var(--text-soft);font-size:14.5px;line-height:1.62;margin:0 0 10px}
.fw-hcard .fw-out{margin:0}
.fw-hcard .fw-store-extra{border-top:1px solid var(--jade-line);
  margin:12px 0 0;padding:11px 0 0;font-size:13.5px;color:var(--accent)}
.fw-out{margin:0;padding:0;list-style:none}
.fw-out li{position:relative;padding-left:20px;color:var(--text-soft);
  font-size:14.5px;line-height:1.58;margin:8px 0}
.fw-out li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;
  height:7px;border-radius:99px;background:var(--accent)}

/* ── buttons ────────────────────────────────────────────────────────── */
.fw-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:38px;padding:9px 17px;border-radius:99px;background:var(--accent);
  color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--accent);cursor:pointer;
  text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.fw-btn:hover{background:var(--accent-2);border-color:var(--accent-2)}
.fw-btn.ghost{background:transparent;color:var(--accent)}
.fw-btn.ghost:hover{background:var(--jade-soft);color:var(--accent)}
html.dark .fw-btn{color:#0a1612}
html.dark .fw-btn.ghost{color:var(--accent)}

/* ── the progress rail ──────────────────────────────────────────────── */
.fw-rail{position:sticky;top:calc(var(--topbar-h) + 6px);z-index:20;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:14px;padding:13px 16px;
  background:var(--surface);box-shadow:var(--shadow-card);margin:0 0 16px}
.fw-rail .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute)}
.fw-bar{flex:1 1 130px;min-width:90px;height:7px;border-radius:99px;
  background:var(--surface-3);overflow:hidden}
.fw-bar i{display:block;height:100%;width:0;border-radius:99px;
  background:var(--accent);transition:width .45s cubic-bezier(.16,.7,.3,1)}
.fw-rail .cnt{font-family:var(--mono);font-size:11px;color:var(--text-soft)}
.fw-rail .cnt a{color:var(--accent);text-decoration:underline}
.fw-rail .pct{font-family:var(--mono);font-size:12.5px;color:var(--accent);
  font-weight:600}
.fw-rail .save{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mute);border:1px solid var(--line);
  border-radius:99px;padding:5px 10px;text-decoration:none;white-space:nowrap}
.fw-rail .save:hover{border-color:var(--accent);color:var(--accent)}
/* Week jump-links: what the outline sidebar was for, in one line. */
.fw-wknav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.fw-wknav .nl{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-mute);margin-right:2px}
.fw-wknav a{font-family:var(--mono);font-size:11px;color:var(--text-soft);
  border:1px solid var(--line);border-radius:9px;min-width:32px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;transition:.18s}
.fw-wknav a:hover{border-color:var(--accent);color:var(--accent);
  background:var(--jade-soft)}
.fw-wknav a.is-complete{background:var(--accent);border-color:var(--accent);
  color:var(--paper)}
html.dark .fw-wknav a.is-complete{color:#0a1612}

/* ── a week: one foldable object, header tile + body tile ───────────── */
.fw-wk{margin:26px 0 0}
.fw-wk>summary{list-style:none;cursor:pointer;border:1px solid var(--line);
  border-radius:16px;background:var(--surface);padding:17px 20px;
  display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.fw-wk>summary::-webkit-details-marker{display:none}
.fw-wk>summary:hover{border-color:var(--jade-line)}
.fw-wk[open]>summary{border-radius:16px 16px 0 0;border-bottom:0}
.fw-wk[open]>summary .chev{transform:rotate(180deg)}
.fw-wk .wnum{flex:0 0 auto;width:46px;height:46px;border-radius:13px;
  background:var(--accent);color:var(--paper);display:grid;place-items:center;
  font-family:var(--mono);font-size:15px;font-weight:600}
html.dark .fw-wk .wnum{color:#0a1612}
.fw-wk.is-complete .wnum{background:var(--amber)}
.fw-wk .wmain{flex:1 1 240px;min-width:0}
.fw-wk .wk{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);margin:0 0 4px}
.fw-wk h2{font-family:var(--display);font-weight:400;font-size:22px;
  margin:0 0 6px;color:var(--ink);line-height:1.2}
.fw-wk .wtheme{color:var(--text-soft);font-size:14.5px;line-height:1.6;
  margin:0;max-width:68ch}
.fw-wk .wtools{flex:0 0 auto;display:flex;align-items:center;gap:10px;
  margin-left:auto}
.fw-wk .wprog{font-family:var(--mono);font-size:10.5px;color:var(--ink-mute);
  white-space:nowrap}
.fw-weekbody{border:1px solid var(--line);border-radius:0 0 16px 16px;
  background:var(--surface-2);padding:14px;display:flex;flex-direction:column;
  gap:12px}
.wbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;
  margin:0 2px -2px}
.fw-fold{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);border:1px solid var(--jade-line);
  background:transparent;border-radius:99px;padding:7px 12px;min-height:32px;
  cursor:pointer}
.fw-fold:hover{background:var(--jade-soft)}

/* ── a module card ──────────────────────────────────────────────────── */
.fw-mod{border:1px solid var(--line);border-radius:13px;background:var(--surface);
  overflow:hidden;transition:border-color .2s,box-shadow .3s}
.fw-mod[open]{border-color:var(--jade-line);box-shadow:var(--shadow-card)}
.fw-mod.is-complete{background:var(--jade-soft);border-color:var(--jade-line)}
.fw-mod>summary{list-style:none;cursor:pointer;display:flex;gap:13px;
  align-items:center;padding:15px 17px;min-height:56px}
.fw-mod>summary::-webkit-details-marker{display:none}
.fw-mod>summary:hover{background:var(--jade-soft)}
.fw-mod[open]>summary .chev{transform:rotate(180deg)}
.fw-mod .mnum{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;
  color:var(--accent);border:1px solid var(--jade-line);border-radius:99px;
  padding:4px 9px}
.fw-mod summary h3{flex:1;font-family:var(--display);font-weight:400;
  font-size:17.5px;color:var(--ink);margin:0;line-height:1.3;min-width:0}
.fw-mod .mfacts{flex:0 0 auto;display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;color:var(--ink-mute)}
.fw-mod .mprog{border:1px solid var(--line);border-radius:99px;padding:3px 8px}
.fw-mod.is-complete .mprog{border-color:var(--jade-line);color:var(--accent)}
.fw-mod .sum{color:var(--text-soft);font-size:14px;line-height:1.6;
  margin:0 17px 4px;padding:0 0 10px;border-bottom:1px solid var(--line);
  max-width:74ch}
.chev{width:15px;height:15px;flex:0 0 auto;color:var(--ink-mute);
  transition:transform .25s}
@media(max-width:620px){
  .fw-mod .mfacts .hrs{display:none}
  .fw-mod summary h3{font-size:16px}
  .fw-wk .wtheme{display:none}
}

/* ── a step row ─────────────────────────────────────────────────────── */
.fw-steps{list-style:none;margin:0;padding:6px 8px 12px}
.fw-step{display:flex;gap:12px;align-items:flex-start;padding:11px 9px;
  border-radius:10px}
.fw-step+.fw-step{border-top:1px solid var(--line)}
.fw-step .body{flex:1;min-width:0}
.fw-tick{flex:0 0 auto;position:relative;width:30px;height:30px;margin-top:1px;
  border-radius:9px;border:1.5px solid var(--line-strong);background:transparent;
  color:transparent;font-size:15px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:.18s}
.fw-tick::after{content:"";position:absolute;inset:-7px}
.fw-tick:hover:not(:disabled){border-color:var(--accent);background:var(--jade-soft)}
.fw-tick[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);
  color:var(--paper)}
html.dark .fw-tick[aria-pressed="true"]{color:#0a1612}
.fw-tick.auto{border-style:dashed;cursor:default}
.fw-tick:disabled{opacity:.85}
.trow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 4px}
.chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-mute);display:inline-flex;
  align-items:center;gap:5px}
.chip::before{content:"";width:7px;height:7px;border-radius:99px;
  background:currentColor}
.chip-learn{color:var(--accent)}
.chip-play{color:var(--amber)}
.chip-apply{color:var(--ink)}
.chip-check{color:var(--text-soft)}
.chip:not([class*="chip-"])::before{display:none}
.badge{font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber);border:1px solid var(--line);
  border-radius:99px;padding:2px 7px}
.badge.opt{color:var(--ink-mute)}
.fw-step .t{font-size:15px;line-height:1.5;color:var(--ink);margin:0;
  font-weight:500}
.fw-step.is-done .t{color:var(--text-soft)}
.fw-step.flash{animation:fwflash 1.2s ease 1}
@keyframes fwflash{0%{background:var(--jade-soft)}100%{background:transparent}}

/* ── the folds: brief, deep dive, brief-for-apply, prompts ──────────── */
.fw-more{margin:9px 0 0;border:1px solid var(--line);border-radius:11px;
  background:var(--surface-2);overflow:hidden}
.fw-more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:9px;padding:10px 13px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
  min-height:40px}
.fw-more>summary::-webkit-details-marker{display:none}
.fw-more>summary:hover{background:var(--jade-soft)}
.fw-more[open]>summary{border-bottom:1px solid var(--line)}
.fw-more[open]>summary .chev{transform:rotate(180deg)}
.fw-more .min{margin-left:auto;color:var(--ink-mute);letter-spacing:.06em;
  text-align:right}
.fw-more.deep>summary{color:var(--amber)}
.fw-more.deep>summary:hover{background:var(--surface-3)}
/* The brief and Go-deeper panel bodies were capped at 70ch inside a panel that
   spans the full 1232px column, so the prose filled a little over half the box
   and the right-hand side read as broken (owner's manual test, item 1). The cap
   is off so the text fills its box. TRADE-OFF, deliberately recorded: on a wide
   desktop this is a long line. If it reads as too long, the alternative is to
   cap the PANEL rather than the prose — put the max-width back here and add the
   same value to .fw-more, so box and text share one measure. */
.fw-lesson{padding:6px 18px 18px}
.fw-lesson p{font-size:15.5px;line-height:1.72;color:var(--text-soft);
  margin:14px 0}
.fw-lesson h4{font-family:var(--display);font-weight:400;font-size:17px;
  color:var(--ink);margin:20px 0 6px}
.fw-lesson ul,.fw-lesson ol{margin:14px 0;padding:0 0 0 4px;list-style:none}
.fw-lesson ul li{position:relative;padding:9px 12px 9px 26px;margin:6px 0;
  font-size:15px;line-height:1.62;color:var(--text-soft);
  background:var(--jade-soft);border-radius:9px}
.fw-lesson ul li::before{content:"";position:absolute;left:11px;top:1.05em;
  width:6px;height:6px;border-radius:99px;background:var(--accent)}
.fw-lesson ol{counter-reset:fwq}
.fw-lesson ol li{counter-increment:fwq;position:relative;padding:6px 0 6px 30px;
  margin:6px 0;font-size:15px;line-height:1.62;color:var(--text-soft)}
.fw-lesson ol li::before{content:counter(fwq);position:absolute;left:0;top:6px;
  font-family:var(--mono);font-size:11px;color:var(--accent);
  border:1px solid var(--jade-line);border-radius:99px;width:20px;height:20px;
  display:grid;place-items:center}
.fw-lesson .fw-btn{margin:8px 0 0}
.fw-carry{border-left:3px solid var(--amber);background:var(--surface-3);
  border-radius:0 9px 9px 0;padding:12px 15px;margin:18px 0 0}
.fw-carry .lb{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--amber);margin:0 0 5px}
.fw-carry p{margin:0;font-size:14.5px;line-height:1.6}
.tpl{display:inline-block;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);
  border:1px dashed var(--line-strong);border-radius:99px;padding:4px 10px;
  margin:12px 0 0}

/* ── the copy-paste study prompt ────────────────────────────────────── */
.fw-deep{padding:14px 18px 18px}
.fw-deep .dsub{font-size:14px;line-height:1.6;color:var(--text-soft);
  margin:0 0 12px}
.fw-fmt{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.fw-fmt button{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-soft);background:transparent;
  border:1px solid var(--line-strong);border-radius:99px;padding:8px 13px;
  min-height:34px;cursor:pointer;transition:.18s}
.fw-fmt button:hover{border-color:var(--accent);color:var(--accent)}
.fw-fmt button[aria-pressed="true"]{background:var(--accent);color:var(--paper);
  border-color:var(--accent)}
html.dark .fw-fmt button[aria-pressed="true"]{color:#0a1612}
.pbox{display:block;width:100%;box-sizing:border-box;min-height:220px;
  resize:vertical;font-family:var(--mono);font-size:12px;line-height:1.62;
  color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);
  border-radius:11px;padding:14px 15px;white-space:pre-wrap}
.pbox:focus{outline:2px solid var(--accent);outline-offset:1px}
/* The button and its note share one baseline: both are flex children with
   align-items centre, and the note gets the button's line-box height so the
   two read as one control rather than a control with a caption floating. */
.pacts{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:12px 0 0}
.pacts .note{font-family:var(--mono);font-size:10.5px;line-height:38px;
  color:var(--ink-mute);margin:0}

/* ── the certificate teaser ─────────────────────────────────────────── */
.fw-cert{border:1px solid var(--jade-line);border-radius:16px;
  background:var(--jade-soft);padding:24px 26px;margin:30px 0 0;max-width:70ch}
.fw-cert h2{font-family:var(--display);font-weight:400;font-size:23px;
  margin:0 0 8px;color:var(--ink)}
.fw-cert h2 em{font-style:italic;color:var(--accent)}
.fw-cert p{color:var(--text-soft);font-size:15px;line-height:1.65;margin:0 0 14px}

/* ── the drill card ─────────────────────────────────────────────────── */
.fw-drill{margin:9px 0 0;border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:0 11px 11px 0;background:var(--surface-2);padding:13px 15px;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.fw-drill .dmain{flex:1 1 260px;min-width:0}
.fw-drill .dwhy{font-size:14.5px;line-height:1.6;color:var(--text-soft);margin:0}
.fw-drill .dnote{font-size:13px;font-style:italic;color:var(--ink-mute);margin:6px 0 0}
.fw-drill .dhint{width:100%;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-mute);margin:0}
/* AMENDMENT B — a Play tick that was earned in another programme says so.
   Same mono micro-copy scale as .dhint, jade rather than mute, because it is
   a statement about the learner's work rather than a mechanical note. */
.fw-drill .dcarry{width:100%;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--jade);margin:0}
.fw-rail .carry{font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--jade)}

/* ── the hub's programme cards ──────────────────────────────────────── */
.fw-card{display:block;border:1px solid var(--line);border-radius:18px;
  padding:24px 26px;background:var(--surface);text-decoration:none;color:inherit;
  margin:0 0 16px;transition:transform .45s cubic-bezier(.16,.7,.3,1),border-color .3s}
.fw-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.fw-card .kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber);margin:0 0 6px}
.fw-card h2{font-family:var(--display);font-weight:400;font-size:26px;
  margin:.2em 0 .25em;color:var(--ink)}
.fw-card h2 em{font-style:italic;color:var(--accent)}
.fw-card p{color:var(--text-soft);font-size:15px;line-height:1.6;margin:0 0 14px}
/* Where you are, before you click in. */
.fw-state{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin:16px 0 0;padding:14px 0 0}
.fw-state .st{font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-mute);border:1px solid var(--line);
  border-radius:99px;padding:5px 11px;white-space:nowrap}
.fw-state.started .st{color:var(--accent);border-color:var(--jade-line);
  background:var(--jade-soft)}
.fw-state.done .st{color:var(--paper);background:var(--amber);
  border-color:var(--amber)}
html.dark .fw-state.done .st{color:#0a1612}
.fw-state .fw-bar{flex:1 1 120px;max-width:260px}
.fw-state .sn{font-family:var(--mono);font-size:10.5px;color:var(--ink-mute)}

@media(max-width:620px){
  .fw-rail{padding:11px 12px;gap:9px}
  .fw-hcard{padding:20px 18px}
  .fw-wk>summary{padding:15px 14px;gap:12px}
  .fw-weekbody{padding:10px}
  .fw-lesson{padding:4px 14px 16px}
  .fw-deep{padding:12px 14px 16px}
  .pbox{font-size:11.5px}
  .pacts .note{line-height:1.5}
}
/* ── THE STICKY RAIL, ACTUALLY STICKING ──────────────────────────────
   `.fw-rail` has been `position:sticky` since it was written, and it did not
   stick: it scrolled away with the page (owner's manual test, item 2).

   The cause is not here. `site.v7.css` sets `body{overflow-x:hidden}`, and per
   the CSS overflow spec, when one axis is `visible` and the other is not, the
   `visible` axis computes to `auto`. That silently makes BODY a scroll
   container, and a sticky descendant then sticks inside body's scrollport
   rather than the viewport — a box that never scrolls, so the element never
   sticks. It is the single most common reason a correct `position:sticky`
   does nothing.

   `overflow-x:clip` clips exactly the same way WITHOUT establishing a scroll
   container, so sticky keeps working. Both are declared: a browser too old for
   `clip` drops that line and keeps `hidden` — no horizontal scrollbar, sticky
   still broken, which is where it already was.

   WHY THE OVERRIDE LIVES IN THE FIELDWORK SHEET. The real home for this is
   site.v7.css, but that has shipped and is frozen: changing it is a filename
   move plus a 115-page repoint. This sheet loads after it, on the 8 fieldwork
   pages, which is exactly where the complaint was. Fold it into the base sheet
   at the next site.css bump and delete this block. */
body{overflow-x:hidden;overflow-x:clip}

@media print{
  .fw-rail,#fw-continue,.fw-fold,.fw-more.deep,.fw-hcard .fw-btn{display:none}
}

/* Session 17 — this sheet carried 8 transitions and no reduced-motion block,
   the only stylesheet on the site without one. Someone who has asked their OS
   to stop animation was still getting every hover lift and accordion slide on
   the longest pages we publish. Matches the pattern in site.css: kill duration
   rather than the property, so layout and focus styles are untouched. */
@media (prefers-reduced-motion:reduce){
 .fw-step,.fw-wk,.fw-mod,.fw-mod>summary,.fw-wk>summary,.fw-cta,.fw-chip,.fw-bar i{
  transition:none!important;animation:none!important;scroll-behavior:auto!important}
}