/* The Studio portal. Brand tokens from BRAND.md, 22 August 2026.
   Poppins 600 / DM Sans 400.

   FOUR COLOURS ONLY, set by Lisa 11 September 2026: black, orange, grey,
   white. No teal. Status is therefore carried by WEIGHT, not by hue:
   black is what is due, orange is what is with Lisa, outlined black is
   answered, flat grey is missed, hairline grey is ahead. */

:root{
  --ink:#1D1E20; --deep:#0D141A; --black:#000000;
  --coral:#E56A54; --tint:#FEE1D8; --grey:#F1F1F1;
  --line:#E3E3E3; --muted:#6B6E72;
  /* ONE TYPE SCALE. Lisa, 12 September 2026: "make sure the text sizing is
     consistent on each page", then "make sure all the text sizes are
     consistent." The first pass tokenised BODY text and left headings and
     uppercase labels on raw pixels, so 27 hardcoded sizes survived it: three
     different h1 sizes, 18px and 19px card headings side by side, and SEVEN
     sizes doing the job of an uppercase micro-label (13, 13, 13, 12, 11, 11,
     10). Everything now comes from here. 🛑 NOTHING outside :root sets a
     pixel size, and nothing in the HTML sets a size at all. */
  --fs-h1:30px;    /* the page title, one per page */
  --fs-title:23px; /* the module title on a lesson. The only step between h1 and h3 */
  --fs-xl:19px;    /* openers: every card, tile and prose h3, the lede, the pull quote */
  --fs-lg:17px;    /* long-form reading: lesson and Start here prose */
  --fs:16px;       /* component body: cards, notes, alerts, checklists, form fields */
  --fs-sm:15px;    /* secondary: tiles, row subtitles, tables, footer, buttons, links */
  --fs-xs:13px;    /* uppercase labels: eyebrow, section head, pill, form label */
  --fs-2xs:11px;   /* the smallest uppercase label: tags, table heads, done flags */
  --head:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#FFFFFF;color:var(--ink);font:400 var(--fs-lg)/1.6 var(--body);-webkit-font-smoothing:antialiased}
.wrap{max-width:820px;margin:0 auto;padding:32px 20px 80px}
.wrap.wide{max-width:1040px}
h1,h2,h3{font-family:var(--head);font-weight:600;line-height:1.25;margin:0}
a{color:inherit}
p{margin:0 0 10px}
[hidden]{display:none !important}

.eyebrow{font:500 var(--fs-xs)/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
header{border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:30px}
header .topline{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
h1{font-size:var(--fs-h1);margin:10px 0 0}
.who{font-size:var(--fs-sm);color:var(--muted)}
.who a{color:var(--coral)}

.pills{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* Transparent border on the base so filled and outlined pills sit at the
   same height and share a baseline. */
.pill{display:inline-block;font:500 var(--fs-xs)/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:9px 14px;border-radius:2px;border:1px solid transparent}
.pill.dark{background:var(--black);color:#fff}
.pill.soft{background:var(--tint);color:var(--deep)}
.pill.line{background:#fff;color:var(--muted);border-color:var(--line)}
.pill.mark{background:#fff;color:var(--ink);border-color:var(--black)}

section{margin:0 0 38px}
h2{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{display:block;text-decoration:none;border:1px solid var(--line);border-radius:3px;padding:20px;background:#fff;transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--coral);transform:translateY(-2px)}
.tile h3{font-size:var(--fs-xl);margin-bottom:5px}
.tile p{font-size:var(--fs-sm);color:var(--muted);margin:0}
.tile .arrow{color:var(--coral);font-size:var(--fs-sm);margin-top:10px;display:block}

.card{border:1px solid var(--line);border-radius:3px;padding:22px;margin-bottom:12px;background:#fff}
.card.accent{border-left:3px solid var(--coral)}
.card.due{background:var(--tint);border-color:var(--tint)}
.card.done{border-left:3px solid var(--ink)}
.card h3{font-size:var(--fs-xl);margin-bottom:6px}
.card p{margin:0 0 6px;color:var(--muted);font-size:var(--fs)}
.card p.strong{color:var(--ink);font-size:var(--fs)}
.card .meta{font-size:var(--fs-xs);color:var(--muted)}

/* The Join box on Tools & Support, added 13 September 2026. Lisa: "maybe an
   orange box". These two links are the only reason most people open this page
   in a hurry, so they get the one coloured block on it and nothing else
   competes. Coral tint rather than coral, because a solid coral panel with
   links in it is unreadable.
   🛑 The row dividers and the link underline both switch here: var(--line) is
   invisible on tint, and a.small underlines in var(--tint), which on a tint
   background disappears entirely. */
.joinbox{background:var(--tint);border-radius:3px;padding:20px 22px}
.joinbox .rows{border-top:none}
.joinbox .row{border-bottom:1px solid rgba(0,0,0,.10)}
.joinbox .row:last-child{border-bottom:none}
.joinbox .row .what span{color:var(--deep)}
.joinbox a.small{border-bottom-color:var(--coral)}
.joinbox .meta{color:var(--deep);margin:12px 0 0}

.feedback{background:var(--grey);border-radius:3px;padding:18px;margin-top:14px;white-space:pre-wrap;font-size:var(--fs);color:var(--ink)}
.feedback h4{font-family:var(--head);font-weight:600;font-size:var(--fs-sm);margin:0 0 8px}

.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
.btn{display:inline-block;background:var(--black);color:#fff;text-decoration:none;font:500 var(--fs-sm)/1 var(--body);padding:13px 20px;border-radius:2px;border:1px solid var(--black);cursor:pointer}
.btn:hover{background:var(--coral);border-color:var(--coral)}
.btn[disabled]{opacity:.45;cursor:default;background:var(--black);border-color:var(--black)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
a.small{font:500 var(--fs-sm)/1 var(--body);color:var(--coral);text-decoration:none;border-bottom:1px solid var(--tint);white-space:nowrap;cursor:pointer}
a.small:hover{border-bottom-color:var(--coral)}

label{display:block;font:500 var(--fs-xs)/1 var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 7px}
input[type=email],input[type=text],input[type=number],textarea,select{
  width:100%;font:400 var(--fs)/1.5 var(--body);color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:2px;padding:12px 13px;margin-bottom:14px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--coral)}
textarea{min-height:150px;resize:vertical}
input[type=file]{font:400 var(--fs-sm)/1.4 var(--body);margin-bottom:14px}

.rows{border-top:1px solid var(--line)}
.row{display:flex;gap:18px;align-items:baseline;padding:15px 2px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.row .when{font-family:var(--head);font-weight:600;font-size:var(--fs-sm);min-width:190px}
.row .what{flex:1 1 220px;min-width:0}
.row .what span{display:block;color:var(--muted);font-size:var(--fs-sm)}
.row .go{white-space:nowrap}

.note{background:var(--grey);border-radius:3px;padding:16px 18px;font-size:var(--fs);color:var(--deep);margin:0}
.note strong{font-weight:500}
.alert{border-left:3px solid var(--coral);background:var(--tint);border-radius:3px;padding:14px 16px;font-size:var(--fs);margin:0 0 16px}
.alert.ok{border-left-color:var(--ink);background:var(--grey)}

.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:3px}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:var(--fs-sm)}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:500 var(--fs-2xs)/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:#FAFAFA;white-space:nowrap}
tr:last-child td{border-bottom:none}
tr.now td{background:var(--tint)}
tr.past td{color:var(--muted)}
tr.skip td{color:var(--muted);font-style:italic;background:#FAFAFA}
td.wk{font-family:var(--head);font-weight:600;white-space:nowrap;width:56px}
td.tp{white-space:nowrap;width:1%}
td.dt{white-space:nowrap}

/* ⭐ THE TWELVE-WEEKS TABLE, 23 September 2026. Lisa: "this does not look good,
   make the core smaller so everything fits in or make the overall area wider,
   it is very condensed into the middle of the screen right now."

   🛑 THE ACTUAL CAUSE WAS NOT THE WIDTH. `a.small` carries white-space:nowrap,
      so a Core title like "The premium offer. You start from the price" could
      not break, forced the table past the 820px page, and pushed Pre-read off
      the edge while Systems wrapped one word per line.

   Three fixes, and all three are needed. The page is .wrap.wide. The Core link
   may wrap INSIDE this table only, so nowrap still holds everywhere else. And
   the columns are bounded, so Systems gets real room rather than whatever is
   left after an unbreakable string. */
table.weeks{min-width:0}
table.weeks td a.small{white-space:normal;line-height:1.35}
table.weeks th:nth-child(1),table.weeks td:nth-child(1){width:48px}
/* Column 2 is td.tp above, from the parallel session on 23 September:
   width:1% with nowrap shrinks it to its content, which is better than a
   fixed width because "P \00b7 Premium offer" is wider than "S \00b7 Situation". */
table.weeks th:nth-child(3),table.weeks td:nth-child(3){width:34%}
table.weeks th:nth-child(4){width:26%}
table.weeks td:nth-child(4){width:26%;color:#6B6E72}
table.weeks th:nth-child(5),table.weeks td:nth-child(5){width:112px;white-space:nowrap}

@media (max-width:860px){
  /* ⚠️ Below this the table SCROLLS rather than crushing, which is what
     .scroll is for, so the floor has to be generous rather than tight.
     At 680px Systems was starved to about 177px, wrapped to five lines
     off-screen, and drove every row to twice the height it needed. */
  table.weeks{min-width:820px}
}
.flag{display:block;font-size:var(--fs-xs);color:var(--coral)}

/* Five states, four colours, separated by fill weight. Loudest first. */
.tag{font:500 var(--fs-2xs)/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:2px;white-space:nowrap;display:inline-block;border:1px solid transparent}
.tag.open{background:var(--black);color:#fff}                 /* due this week */
.tag.waiting{background:var(--coral);color:#fff}              /* with Lisa */
.tag.done{background:#fff;color:var(--ink);border-color:var(--black)}   /* answered */
.tag.closed{background:var(--grey);color:var(--muted)}        /* missed */
.tag.ahead{background:#fff;color:var(--muted);border-color:var(--line)} /* ahead */

/* Admin only. Thirteen blocks, one per module, filled by how much of that
   module's checklist is ticked. Lisa, 12 September 2026, wanted both views:
   this is the one that reads across the whole room at a glance. */
.bar{display:flex;gap:2px;margin-top:7px}
.bar span{width:11px;height:11px;border:1px solid var(--line);border-radius:1px;background:#fff;display:block}
.bar span.part{background:var(--tint);border-color:var(--tint)}
.bar span.full{background:var(--ink);border-color:var(--ink)}

/* The per-person module list, opened by clicking a name in Clients. */
tr.detail[hidden]{display:none}
tr.detail td{background:#FAFAFA;padding:18px 14px}
tr.detail .rows{border-top:none}
tr.detail .row{padding:10px 2px}
tr.detail .row:last-child{border-bottom:none}
td.who a{color:var(--coral);text-decoration:none;border-bottom:1px solid var(--tint);cursor:pointer}
td.who a:hover{border-bottom-color:var(--coral)}

footer{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--muted)}
footer a{color:var(--coral)}

.centre{max-width:440px;margin:12vh auto 0;padding:0 20px}
.centre h1{font-size:var(--fs-h1);margin-bottom:10px}
.centre p{color:var(--muted);font-size:var(--fs)}
.centre .btn{width:100%;text-align:center}

.spin{color:var(--muted);font-size:var(--fs-sm);padding:20px 0}

@media (max-width:640px){
  /* ⭐ MOBILE MOVES THE SCALE, NOT THE RULES. Three separate overrides used to
     shrink h1, prose and the lede by hand, which is how they drifted apart.
     Redefine the tokens once and every rule follows. */
  :root{ --fs-h1:25px; --fs-title:21px; --fs-xl:17px; --fs-lg:16px; }
  .tiles{grid-template-columns:1fr}
  .row .when{min-width:100%}
  .wrap{padding:24px 16px 64px}
}

/* ---------------------- checklist and progress ---------------------- */
/* Four colours only, so "done" is carried by weight: a filled black box
   and quieter text, never a second hue. */

.meter{height:6px;background:var(--grey);border-radius:999px;overflow:hidden}
.meter span{display:block;height:100%;width:0;background:var(--black);
  border-radius:999px;transition:width .18s ease}

ul.check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
ul.check li{border-top:1px solid var(--line)}
ul.check li:first-child{border-top:none}
ul.check label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  padding:13px 2px;margin:0;font:400 var(--fs)/1.5 var(--body);color:var(--ink);
  letter-spacing:normal;text-transform:none}
ul.check input{appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:20px;height:20px;margin:1px 0 0;border:1px solid var(--ink);border-radius:2px;
  background:#fff;cursor:pointer;position:relative}
ul.check input:checked{background:var(--black);border-color:var(--black)}
ul.check input:checked::after{content:"";position:absolute;left:6px;top:2px;
  width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
ul.check input:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
ul.check input:disabled{opacity:.5;cursor:wait}
ul.check li.on span{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}

/* the small per-week bar in the calendar */
.mini{display:block;height:4px;background:var(--grey);border-radius:999px;
  overflow:hidden;min-width:54px;margin-top:5px}
.mini span{display:block;height:100%;background:var(--black);border-radius:999px}

@media (prefers-reduced-motion:reduce){.meter span{transition:none}}

/* ------------------------------ the lesson -------------------------- */

/* ⚠️ TYPE STANDARDISED 13 September 2026, Lisa: "standardise the text size
   across the module, one header size and one regular text size."
   A module was running FOUR sizes of reading text: prose and list items at
   --fs-lg, the lede and the pull quote at --fs-xl, and the compare rows at
   --fs. Every one was defensible on its own and together they read as drift.
   NOW, inside .lesson:
     HEADER        --fs-xl, and only .prose h3 uses it.
     REGULAR TEXT  --fs-lg. Paragraphs, list items, the lede, the pull quote
                   and the compare rows, all the same.
   🛑 Emphasis is carried by weight, colour and the coral rule, never by size.
      The lede and the pull are still obvious and neither is bigger.
   ⭐ TWO THINGS ARE DELIBERATELY LEFT OUT of the standardisation:
      .kick h3, the module's own title, which is the page title rather than a
      header inside the text, and .prompt, which is a block to be copied out
      rather than read, set to --fs-sm on 12 September after it was found
      rendering at the wrong size. Say so before changing either. */

.lesson{border:1px solid var(--line);border-radius:3px;padding:30px 32px;background:#fff}
.lesson .kick{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.lesson .kick h3{font-size:var(--fs-title)}
.lesson .kick .mins{font:500 var(--fs-xs)/1 var(--body);color:var(--muted);white-space:nowrap}

/* Reading measure, not full width. Long lines are why people stop reading. */
.lesson .prose{max-width:62ch}
.lesson .prose p{margin:0 0 16px;font-size:var(--fs-lg);line-height:1.65;color:var(--ink)}
.lesson .prose p.lede{font-size:var(--fs-lg);line-height:1.55}
.lesson .prose h3{font-family:var(--head);font-weight:600;font-size:var(--fs-xl);
  margin:34px 0 12px;text-wrap:balance}
.lesson .prose h3:first-child{margin-top:0}
/* ol added 13 September 2026 with module 0's four home-page destinations.
   It is the first numbered list in a module and without this it would not
   have matched the ul spacing. li is already shared by both. */
.lesson .prose ul,
.lesson .prose ol{margin:0 0 16px;padding-left:22px}
.lesson .prose li{margin-bottom:8px;font-size:var(--fs-lg);line-height:1.6}
/* Links inside a module. a.small is not right here: it is nowrap, which
   overflows on a phone as soon as the link is more than two words. */
.lesson .prose a{color:var(--coral);text-decoration:none;border-bottom:1px solid var(--tint)}
.lesson .prose a:hover{border-bottom-color:var(--coral)}
.lesson .prose em{font-style:italic}
.lesson .prose strong{font-weight:500}

/* The one line worth stopping on. One device, used sparingly. */
.lesson .prose p.pull{border-left:3px solid var(--coral);padding:2px 0 2px 18px;
  margin:22px 0;font-size:var(--fs-lg);line-height:1.55}

/* Wrong beside right. The label carries the weight, not a colour. */
.lesson .compare{margin:0 0 18px;border-top:1px solid var(--line)}
.lesson .compare p{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
  margin:0;padding:13px 2px;border-bottom:1px solid var(--line);font-size:var(--fs-lg)}
.lesson .compare span{flex:0 0 auto;font:500 var(--fs-2xs)/1 var(--body);letter-spacing:.09em;
  text-transform:uppercase;padding:5px 7px;border-radius:2px;min-width:88px}
.lesson .compare span.x{background:var(--grey);color:var(--muted)}
.lesson .compare span.y{background:var(--black);color:#fff}

/* A prompt the reader copies out. Module 0's Claude setup is the first, and it
   has to survive being selected with a mouse, so it keeps its line breaks and
   does not get the prose measure. */
/* 🛑 `.lesson .prose p` outranks `.lesson .prompt`, so the prompt was declaring
   --fs-sm and RENDERING at --fs-lg. Caught 12 September 2026 by reading the
   computed size in a browser rather than the stylesheet. Match the selector
   shape, or the declaration is decoration. */
.lesson .prose p.prompt,
.lesson .prompt{background:var(--grey);border-left:3px solid var(--ink);border-radius:0 3px 3px 0;
  padding:16px 18px;margin:0 0 18px;white-space:pre-wrap;font:400 var(--fs-sm)/1.65 var(--body);
  color:var(--ink);max-width:none}

.lesson .foot{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.lesson .foot .meta{font-size:var(--fs-sm);color:var(--muted);margin:0}

@media (max-width:640px){
  .lesson{padding:22px 18px}
  .lesson .compare span{min-width:0}
}

/* ================= the home page, rebuilt 12 September 2026 =============
   Lisa: "right now i think the home page is doing way too much... if they
   see 0 of 83 tasks they are going to be like ahhhhh."
   So: one door in, one week showing, four doors out. No total counter. */

.hero{display:flex;justify-content:space-between;align-items:center;gap:20px;
  text-decoration:none;background:var(--ink);color:#fff;border-radius:3px;
  padding:30px 26px;flex-wrap:wrap;border:1px solid var(--ink)}
.hero:hover{background:var(--coral);border-color:var(--coral)}
.hero h2{color:#fff;margin:0 0 6px;border:0;padding:0}
.hero p{margin:0;color:rgba(255,255,255,.78);font-size:var(--fs-sm);max-width:46ch}
.hero .arrow{color:#fff;font-family:var(--head);font-weight:600;font-size:var(--fs-sm);white-space:nowrap}

.tiles.four{grid-template-columns:repeat(4,1fr)}
/* Added 14 September 2026 for the hub, which shows only what a person owns, so
   the tile count is 1, 2 or more rather than always the four doors app.html
   has. .tiles is a fixed 3 columns, so two tiles left an empty third column and
   a wide dead strip on the right. One tile is capped instead of stretched:
   a single card the full width of the page reads as a banner, not a choice. */
.tiles.one{grid-template-columns:minmax(0,420px)}
.tiles.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){
  .tiles.one,.tiles.two,.tiles.four{grid-template-columns:1fr}
}

/* This week's deliverables, READ ONLY. Lisa, 12 September 2026: "we should not
   display the tick boxes on the home page if they are not able to check the
   boxes, it is confusing." She is right, and it was a real defect: the boxes
   were drawn with a pseudo-element, so they looked like controls and did
   nothing. No boxes here. The ticking happens on the week page, one place. */
/* Renamed off .lede, which already means the --fs-xl opener inside .lesson. */
p.subhead{font-family:var(--head);font-weight:600;font-size:var(--fs-sm);margin:22px 0 10px}
/* The Tools page tick row, added 13 September 2026. Two options side by side
   inside a card, reusing the checklist's own custom checkbox so a tick means
   the same thing everywhere in the portal.
   🛑 The strike-through is turned off here. On a checklist it means done and
   gone; on a tool it would read as "I have this" being crossed out. */
ul.check.toolcheck{flex-direction:row;gap:22px;flex-wrap:wrap;margin-top:14px;
  padding-top:10px;border-top:1px solid var(--line)}
ul.check.toolcheck li{border-top:none}
ul.check.toolcheck label{padding:4px 0}
ul.check.toolcheck li.on span{color:var(--ink);text-decoration:none;font-weight:500}

ul.check.flat{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
ul.check.flat li{padding:11px 2px 11px 44px;border-bottom:1px solid var(--line);
  font-size:var(--fs);position:relative}
ul.check.flat li.on{color:var(--muted)}
ul.check.flat li.on span{text-decoration:line-through}
ul.check.flat li.on:before{content:"Done";position:absolute;left:2px;top:13px;
  font:500 var(--fs-2xs)/1 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

@media (max-width:860px){ .tiles.four{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .tiles.four{grid-template-columns:1fr} .hero{padding:24px 20px} }


/* ── The NPA logo, added 13 September 2026 on Lisa's instruction. ───────────
   The portal had no images at all before this, not even a favicon, so a seat
   holder signing in saw a page with no mark on it anywhere. The file is the
   same npa-logo.png the website uses, copied in rather than hot-linked from
   nextpositionadvisory.com, so the portal does not go blank if the other site
   moves its assets folder.
   Height is set and width is auto, so the intrinsic 150x60 can change without
   this needing to. */
.brand{display:block;height:30px;width:auto;margin:0 0 14px}
.centre .brand{margin:0 auto 20px}
@media (max-width:600px){ .brand{height:26px;margin-bottom:12px} }


/* ══════════════════════════════════════════════════════════════════════════
   THE COURSE LESSON BODY. Added 14 September 2026, and it is a BUG FIX
   rather than a new design.

   🛑 WHAT WENT WRONG. The lesson bodies were written as `src/body-*.html`
      and `drafts/course/build.sh` glued `src/_style.html` onto the END of
      each one at build time. I loaded the SOURCE bodies into Postgres, so
      every lesson arrived with its markup intact and not one CSS rule
      behind it. `grep -c "<style" src/body-*.html` returns 0 on all 95.
      Lisa: "the formatting is increibly hard to read".

   ⭐ IT LIVES HERE ONCE, NOT 46 TIMES IN THE DATABASE. Gluing the style
      block back onto each body would put 5KB of identical CSS in every
      row, and changing a margin would then mean regenerating and
      reloading the whole course.

   ⭐ SIZES COME FROM THE TOKENS, per the one-type-scale rule at the top of
      this file. The imported sheet carried its own scale (17, 17.5, 15.5,
      14.5, 12, 11.5) and every one of those is now a token.

   ⭐ SPACING IS OPENED UP beyond the original, which is the second half of
      what she asked for: line height 1.65 to 1.78, paragraphs 18 to 24,
      the boxed treatments 18/20 to 22/24, and a real gap above every
      section heading. The boxes themselves are unchanged in kind, because
      they already existed and were simply not loading.
   ══════════════════════════════════════════════════════════════════════ */

.npa-lesson{max-width:100%;margin:0;padding:4px 0 12px;
  font-family:var(--body);color:var(--ink);
  font-size:var(--fs-lg);line-height:1.78;text-align:left}
.npa-lesson,.npa-lesson *{box-sizing:border-box;text-align:left}
.npa-lesson p{margin:0 0 24px}
.npa-lesson strong{color:var(--ink);font-weight:700}
.npa-lesson em{font-style:italic}

/* ⭐ THE LESSON TITLE BLOCK IS A GREY BOX. Lisa, 15 September 2026: "put the
   title at the top, the Hour 0 and what you need, in a grey box and apply
   that across all lessons."

   ⭐ It completes the set, and the set is now readable without a caption.
   GREY is structure: the hour blocks on the contents page, and the title
   block on a lesson. ORANGE is a marker: a section title inside a lesson,
   and the whole Reference shelf. Two colours, two jobs.

   ⭐ The 2px rule under it goes. The box already separates the header from
   the body, and a heavy rule under a filled box is belt and braces. */
.npa-head{background:var(--grey);border-radius:3px;padding:22px 24px;margin-bottom:38px}
.npa-eyebrow{font:700 var(--fs-xs)/1 var(--body);letter-spacing:.15em;text-transform:uppercase;
  color:var(--coral);margin:0 0 12px !important}
.npa-h1{font-family:var(--head);font-weight:600;font-size:var(--fs-h1);
  line-height:1.15;letter-spacing:-.01em;margin:0;color:var(--ink)}
.npa-meta{font:500 var(--fs-sm)/1.5 var(--body);color:var(--muted);margin:10px 0 0 !important}
/* The first section title follows a filled box now, so it needs less air
   above it than it does mid-lesson. */
.npa-head + .npa-h2{margin-top:32px}
@media (max-width:640px){ .npa-head{padding:18px 18px} }

.npa-intro{margin-bottom:8px}
/* ⭐ EVERY SECTION TITLE SITS IN AN ORANGE BOX. Lisa, 15 September 2026:
   "for each title section of each sub lesson lets put it inside an orange box
   to break the flow a bit."

   ⭐ The hairline it replaces was doing the same job and doing it quietly. A
   lesson is a run of prose with tables and boxed callouts in it, and a 1px
   grey rule was losing against them. This wins, which is the point.
   ⭐ The top margin stays large: the box marks the break, the space is what
   makes it a break. */
.npa-h2{font-family:var(--head);font-weight:600;font-size:var(--fs-title);
  line-height:1.25;margin:52px 0 24px;color:var(--ink);
  background:var(--tint);border-left:3px solid var(--coral);border-radius:2px;
  padding:16px 20px}
/* The first one on a page does not need to push away from a border that is
   not there. */
.npa-head + .npa-h2, .npa-intro + .npa-h2{margin-top:34px}
.npa-h3{font-family:var(--head);font-weight:600;font-size:var(--fs-xl);line-height:1.3;
  margin:42px 0 16px;color:var(--ink)}

/* ── The boxed treatments. These are what "things in boxes that are
      important" already meant in the house style, and they were the most
      visible casualty of the missing stylesheet: every one of them was
      rendering as an ordinary paragraph. ── */

.npa-do{border-left:4px solid var(--coral);padding:4px 0 4px 22px;margin:0 0 28px;
  font-size:var(--fs-lg)}
.npa-do::before{content:"DO THIS";display:block;font:700 var(--fs-2xs)/1 var(--body);
  letter-spacing:.14em;color:var(--coral);margin-bottom:9px}

.npa-note{border-left:3px solid var(--coral);background:var(--tint);
  padding:22px 24px;margin:0 0 28px}
.npa-note p:last-child{margin-bottom:0 !important}

.npa-star{background:var(--grey);border-top:3px solid var(--coral);
  padding:24px;margin:0 0 28px}
.npa-star p:last-child{margin-bottom:0 !important}

/* 🛑 THE BLACK SLAB IS GONE. Lisa, 15 September 2026, twice: remove the black
   box here, and then "again remove the black background its very dominating."
   She is right and it was used about forty-five times across the course, so
   two or three of them could land on one screen.

   ⭐ A warning does not need to be the loudest thing on the page to be read.
   It keeps a heavy ink border, which is still the strongest treatment in the
   set, and gives back the contrast. One rule, all 47 lessons. */
.npa-stop{background:#FFFFFF;border:2px solid var(--ink);color:var(--ink);
  padding:22px 24px;margin:0 0 28px}
.npa-stop strong,.npa-stop em{color:var(--ink)}
.npa-stop .npa-lab{color:var(--coral)}
.npa-stop p:last-child{margin-bottom:0 !important}

.npa-lab{font:700 var(--fs-2xs)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  color:#F2A492;margin:0 0 10px !important}
.npa-star .npa-lab,.npa-next .npa-lab{color:var(--coral)}

.npa-fine{font-size:var(--fs-sm);color:var(--muted)}

.npa-lesson a{color:var(--coral);text-decoration:underline;text-underline-offset:3px}
.npa-lesson a:hover{color:#cf5943}

/* A picture inside a lesson. The image is version-named in the filename, never
   query-stringed: the Hostinger CDN ignores the query string in its cache key. */
.npa-fig{margin:0 0 28px}
.npa-fig img{display:block;width:100%;max-width:560px;height:auto;margin:0 auto;
  border:1px solid var(--line);border-radius:3px}
.npa-fig figcaption{margin:12px auto 0;max-width:560px;font-size:var(--fs-sm);
  color:var(--muted);line-height:1.6}

.npa-scroll{overflow-x:auto;margin:0 0 28px;-webkit-overflow-scrolling:touch}
.npa-table{border-collapse:collapse;width:100%;min-width:460px;font-size:var(--fs-sm)}
.npa-table th{font:700 var(--fs-2xs)/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border-bottom:2px solid var(--ink);padding:0 18px 11px 0}
.npa-table td{vertical-align:top;padding:16px 18px 16px 0;border-bottom:1px solid var(--line);
  line-height:1.6}
.npa-table td:last-child,.npa-table th:last-child{padding-right:0}

.npa-check{list-style:none;margin:0 0 28px;padding:0}
.npa-check li{margin:0 0 14px;border:none;padding:0}
.npa-check label{display:flex;align-items:flex-start;gap:14px;cursor:pointer;
  font-size:var(--fs);line-height:1.6}
.npa-check input{margin:6px 0 0;width:17px;height:17px;flex:0 0 17px;accent-color:var(--coral)}

.npa-list{margin:0 0 28px;padding:0;list-style:none}
.npa-list li{position:relative;padding-left:26px;margin:0 0 14px;line-height:1.7}
.npa-list li::before{content:"";position:absolute;left:0;top:.75em;width:12px;height:2px;
  background:var(--coral)}

.npa-prompt{margin:0 0 28px;padding:22px 26px;background:#FFFFFF;border:2px solid var(--ink);
  font-family:var(--body);font-size:var(--fs);line-height:1.7;color:var(--ink)}
.npa-prompt::before{content:"PASTE THIS";display:block;font:700 var(--fs-2xs)/1 var(--body);
  letter-spacing:.14em;color:var(--coral);margin-bottom:12px}

.npa-next{border-top:2px solid var(--ink);margin-top:52px;padding-top:26px}

/* The accordion already existed in the house style, which is why the
   contents page now uses the same one. Nothing here is invented. */
.npa-acc{border:1px solid var(--line);margin:0 0 14px;background:#FFFFFF}
.npa-acc summary{cursor:pointer;padding:17px 46px 17px 20px;font-weight:700;
  font-size:var(--fs);line-height:1.45;list-style:none;position:relative}
.npa-acc summary::-webkit-details-marker{display:none}
.npa-acc summary::after{content:"+";position:absolute;right:20px;top:13px;font-size:23px;
  line-height:1;color:var(--coral);font-weight:400}
.npa-acc[open]>summary{border-bottom:1px solid var(--line)}
.npa-acc[open]>summary::after{content:"\2212"}
.npa-acc-body{padding:22px 20px 2px}
.npa-acc-body p:last-child{margin-bottom:16px}

.npa-pre{margin:0 0 24px;padding:22px 24px;background:#FFFFFF;border:2px solid var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Courier New',monospace;
  font-size:var(--fs-xs);line-height:1.75;color:var(--ink);white-space:pre-wrap;
  word-wrap:break-word;overflow-x:auto}
.npa-pre::before{content:"COPY THIS PROMPT";display:block;font:700 var(--fs-2xs)/1 var(--body);
  letter-spacing:.14em;color:var(--coral);margin-bottom:12px}

@media (max-width:640px){
  .npa-lesson{line-height:1.72}
  .npa-note,.npa-star,.npa-stop,.npa-prompt,.npa-pre{padding:18px 18px}
  .npa-acc-body{padding:18px 16px 2px}
  .npa-h2{margin-top:44px}
}

/* ── The contents accordion, one per hour. ─────────────────────────────────
   Lisa, 14 September 2026: "maybe hid all the lessons and then they expand
   by the hour as they get to them." A <details> per hour, and the one
   holding the next unread lesson is the one that opens itself. */
.hourAcc{margin-bottom:14px}
.hourAcc summary .hd{display:flex;gap:14px;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap}
.hourAcc summary .hd .cnt{font:500 var(--fs-xs)/1 var(--body);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.hourAcc summary.here .hd .cnt{color:var(--coral)}
.hourAcc .npa-acc-body{padding:0 20px 2px}
.hourAcc .rows{border-top:none}
.hourAcc .row:last-child{border-bottom:none}
/* The left column held "12 min" until Lisa removed it on 14 September 2026:
   "People will do it at different rates honestly." So the column now holds
   a Done flag or nothing at all, and it is sized for the word rather than
   for a duration. The div is not rendered when it would be empty, so an
   unread row starts at the title. */
.hourAcc .row .when{min-width:0;flex:0 0 auto;font:500 var(--fs-2xs)/1 var(--body);
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.hourAcc .row{gap:14px;padding:14px 2px}

/* ── COPY BUTTONS ON EVERY PROMPT. Added 14 September 2026. ────────────────
   Lisa: "we said we wanted to make it more interactive with Claude actually
   helping them build by providing the right prompts for them to load."

   ⭐ THE PORTAL CAN DO THE THING systeme.io COULD NOT. A prompt in a lesson
      was something to select by hand and hope you got the whole of it. The
      block already says PASTE THIS; now there is a button that puts it on
      the clipboard.

   ⭐ IT IS ADDED BY SCRIPT, NOT WRITTEN INTO 46 BODIES, so every prompt in
      the course gets one and a new lesson gets one for free. */
.npa-prompt, .npa-pre{position:relative}
.copyBtn{position:absolute;top:12px;right:12px;background:var(--black);color:#fff;border:1px solid var(--black);
  font:500 var(--fs-2xs)/1 var(--body);letter-spacing:.09em;text-transform:uppercase;
  padding:8px 12px;border-radius:2px;cursor:pointer}
.copyBtn:hover{background:var(--coral);border-color:var(--coral)}
.copyBtn.ok{background:#fff;color:var(--ink)}
/* The ::before label and the button share the top line, so the label needs to
   stop short of it rather than run underneath. */
.npa-prompt::before, .npa-pre::before{padding-right:90px}
@media (max-width:480px){
  .copyBtn{position:static;display:block;margin:0 0 14px}
  .npa-prompt::before, .npa-pre::before{padding-right:0}
}

/* ── The prompts page. One row per prompt, in course order. ────────────── */
.pRow{border:1px solid var(--line);margin:0 0 14px;background:#fff;padding:20px}
.pRow .top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  flex-wrap:wrap;margin-bottom:12px}
.pRow .top .lab{font:500 var(--fs-xs)/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.pRow .top .lab a{color:var(--coral);text-decoration:none}
.pRow .npa-prompt{margin:0}

/* ── 🛑 ONE BLOCK STYLE WAS DOING FOUR JOBS, AND A COPY BUTTON MADE IT WORSE.
      Found by Lisa, 15 September 2026, on step 0.1: "why are we telling them
      to write an agent already in the first lesson they have nothing set up
      yet???"

      ⭐ WE ARE NOT. The prose above it says *later in this course you will
      build roles*. **The LABEL said PASTE THIS**, and yesterday's copy button
      put a button next to it. An illustration of what she will say in Hour 4
      was dressed as a step to do in Hour 0.

      ⭐ IT IS ALSO THE ANSWER TO HER OTHER QUESTION THE SAME DAY: "the prompts
      look pretty basic, do they really do enough context setting?" The
      prompts page listed all 34 blocks as prompts. About half are not:
      they are lines for the handbook and worked examples, and stripped of
      their lesson those read as one-line prompts with no context. The thin
      thing was the label, not the prompt.

   ⭐ THREE LABELS, AND THE COPY BUTTON FOLLOWS THE LABEL. Something you are
      not meant to do yet does not get a button. ── */
.npa-prompt::before{content:"PASTE THIS INTO CLAUDE CODE"}
.npa-prompt.is-file::before{content:"WRITE THIS DOWN"}
.npa-prompt.is-eg::before{content:"AN EXAMPLE. NOT A STEP"}
.npa-prompt.is-eg{border:2px dashed var(--line);background:var(--grey)}
.npa-prompt.is-eg::before{color:var(--muted)}

.npa-btn{display:inline-block;background:var(--coral);color:#FFFFFF;text-decoration:none;font-weight:700;font-size:var(--fs);padding:13px 24px;border-radius:2px}
.npa-lesson a.npa-btn{color:#FFFFFF;text-decoration:none}

/* ── GREY ON THE HOUR HEADINGS. Lisa, 15 September 2026: "make the Hour
      heading blocks have a grey background."

   ⭐ It also does a job beyond looking better. Reference is now a flat list
      of plain rows, so the hours needed to read as a different KIND of thing
      rather than as the same list with a +. Grey blocks against white rows
      says it without a word of explanation.

   ⭐ The open one goes white, because an hour you are inside is no longer a
      lid: the body below it is white, and a grey header on a white body
      would cut the two apart. ── */
.hourAcc summary{background:var(--grey)}
.hourAcc summary:hover{background:#E8E8E8}
/* 🛑 THE OPEN ONE STAYS GREY TOO. It went white on the reasoning that a grey
   header on a white body cuts the two apart; Lisa looked at it and wanted the
   grey. She is right on the plainer ground: the block is what marks an hour,
   and an hour does not stop being one because it is open. */
.hourAcc[open]>summary{background:var(--grey)}

/* ── THE REFERENCE BOX. Lisa, 15 September 2026: "put the whole reference
      section into an orange box to differentiate that it is not part of the
      course."

   ⭐ Tint rather than solid coral, because solid coral behind a table of
      text fails on contrast and shouts louder than the hours it is meant to
      sit beside. The coral edge is what carries the colour.
   ⭐ The row rules are darkened to a tint of the same coral: #E3E3E3
      hairlines disappear on #FEE1D8. ── */
.refBox{background:var(--tint);border-left:3px solid var(--coral);
  border-radius:3px;padding:24px 26px 8px;margin-bottom:26px}
.refBox h2{margin-top:0}
.refBox .rows{border-top:1px solid #F0BCAC}
.refBox .row{border-bottom-color:#F0BCAC}
.refBox .row:last-child{border-bottom:none}
@media (max-width:600px){ .refBox{padding:20px 18px 6px} }

/* ── CLICKABLE ROW TITLES. Lisa, 15 September 2026: "can you make the titles
      of each sub section clickable."

   ⭐ It has to LOOK clickable or it is worse than before, because the Read it
      link it replaces was at least obviously a link. So: the title carries
      the weight it had, and a coral underline appears under it on hover, with
      the whole row tinting so the target is the line rather than the words.
   ⭐ The Done flag moves to the right, where the link used to be. It was on
      the left and the link was on the right, which put two pieces of state
      at opposite ends of one row. ── */
.rowTitle{display:inline-block;font:600 var(--fs)/1.4 var(--head);color:var(--ink);
  text-decoration:none;border-bottom:2px solid transparent;padding-bottom:1px}
.row:hover .rowTitle{border-bottom-color:var(--coral)}
.rowTitle:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.row:hover{background:rgba(0,0,0,.02)}
.refBox .row:hover{background:rgba(255,255,255,.45)}
.row.isRead .rowTitle{color:var(--muted)}
.doneFlag{font:500 var(--fs-2xs)/1 var(--body);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted)}

/* ==================================================================
   THE WEEK PAGE, REBUILT 23 SEPTEMBER 2026 TO LISA'S REVIEW OF WEEK 1
   ================================================================== */

/* "What we cover this week", as two lines rather than a card repeating
   the h1. Her words on the card that used to be here: "we've got the
   title. We don't need to redo the title and what we cover." */
ul.cover{list-style:none;margin:0 0 14px;padding:0;
  display:flex;flex-direction:column;gap:2px}
ul.cover li{position:relative;padding:3px 2px 3px 20px;
  font:400 var(--fs-lg)/1.5 var(--body);color:var(--ink)}
ul.cover li:before{content:"";position:absolute;left:2px;top:14px;
  width:6px;height:6px;border-radius:999px;background:var(--black)}

/* ⭐ THE PRE-READ, STACKED. Shut by default: an open set is the wall the
   stacking exists to remove. */
details.sec{border-top:1px solid var(--line);margin:0}
details.sec:first-of-type{border-top:none}
details.sec > summary{display:flex;gap:10px;align-items:baseline;
  list-style:none;cursor:pointer;padding:15px 26px 15px 0;position:relative;
  font:600 var(--fs-lg)/1.4 var(--head);color:var(--ink)}
details.sec > summary::-webkit-details-marker{display:none}
/* The chevron is drawn rather than a character, so it turns rather than
   swapping glyph and shifting the line. */
details.sec > summary:after{content:"";position:absolute;right:4px;top:22px;
  width:7px;height:7px;border:solid var(--muted);border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);transition:transform .15s ease}
details.sec[open] > summary:after{transform:rotate(-135deg);top:25px}
details.sec > summary:hover{color:var(--coral)}
details.sec > summary:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
details.sec > summary .sumtext{flex:1 1 auto}
details.sec > *:not(summary){margin-left:0}
details.sec > *:last-child{margin-bottom:18px}

/* ⭐ Task N, stamped onto the section that teaches task N. The SAME number
   the checklist shows, which is the whole point of it. */
.tasktag{flex:0 0 auto;display:inline-block;background:var(--black);color:#fff;
  border-radius:999px;padding:3px 9px;font:500 12px/1.2 var(--body);
  letter-spacing:.02em;white-space:nowrap;transform:translateY(-1px)}

/* The matching number on the checklist. */
ul.check .num{flex:0 0 auto;width:22px;text-align:right;color:var(--muted);
  font:500 var(--fs)/1.5 var(--body);font-variant-numeric:tabular-nums}
/* 🛑 Never strike through the number or the how-to link when a step is
   ticked. Only the instruction itself is done.
   ⚠️ `text-decoration:none` on the link is NOT enough and it looked fixed
   until it was rendered: line-through is painted by the ANCESTOR span, and a
   descendant cannot remove it. `display:inline-block` takes the link out of
   that ancestor's decoration box, which is the only thing that works. */
ul.check li.on .num{text-decoration:none;color:var(--muted)}
/* 🛑 A SUBMISSION IS SOMEBODY ELSE'S TEXT, SO IT MUST NEVER SET THE PAGE
   WIDTH. Found 23 September 2026 from a screenshot: a note typed as one
   unbroken run of characters pushed the page out to about 2000px and every
   section with it. It only takes one person pasting a URL with no spaces.
   ⚠️ Applied to the whole record block rather than to the note alone,
   because the file name and the feedback are the same kind of text. */
.subrec, .subrec *{overflow-wrap:anywhere; word-break:break-word; min-width:0}
.subrec pre, .subrec code{white-space:pre-wrap}

/* ⭐ When a step is due, on the step. Two real moments, not one.
   🛑 CALLED `steptag`, NEVER `due`. It was `.due` for one deploy and it
   collided with `.card.due`, the Due this week box, which has both classes:
   the box inherited `border-radius:999px` and went from a square card to a
   lozenge. Lisa screenshotted it. A new class name is checked against the
   whole stylesheet before it ships. */
.steptag{display:inline-block;margin-left:10px;padding:2px 8px;border-radius:999px;
  font:500 11px/1.5 var(--body);letter-spacing:.02em;white-space:nowrap;
  text-decoration:none;vertical-align:1px}
li.grouphead{border-top:none;padding:18px 2px 6px;
  font:600 12px/1.4 var(--body);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted)}
ul.check li.grouphead:first-child{padding-top:0}
.steptag.sun{background:var(--sand,#F6EFE9);color:var(--ink);border:1px solid var(--line)}
ul.check li.on .steptag{opacity:.45}

ul.check label a.small{display:inline-block;margin-left:10px;white-space:nowrap;
  text-decoration:none}
ul.check label a.small:hover{text-decoration:underline}

/* ⭐ The join link, sitting in the pills row beside the week number.
   A pill rather than a button, because it is a pointer to somewhere else and
   a full button next to the week number would compete with the page's own
   actions. */
.pill.link{text-decoration:none;border:1px solid var(--line);color:var(--coral);
  background:#fff;transition:border-color .15s ease}
.pill.link:hover{border-color:var(--coral)}
.pill.link:focus-visible{outline:2px solid var(--coral);outline-offset:2px}

/* The session and clinic dates, directly under the pills. */
.whenline{margin:10px 0 0}

@media (prefers-reduced-motion:reduce){details.sec > summary:after{transition:none}
  .pill.link{transition:none}}

/* ⭐ BUILD BY SCENARIO IS A DIFFERENT COLOUR. Lisa, 16 October 2026: "make this
   section a different colour". It is pick-one, not homework, so it should not
   read as Hour 7. Tint heading, coral rule down the left. */
.scenAcc{border-left:3px solid var(--coral)}
.scenAcc summary{background:var(--tint)}
.routeHd{font:700 var(--fs-xs)/1 var(--body);letter-spacing:.12em;text-transform:uppercase;
  color:var(--coral);margin:26px 0 12px}

/* ── ROUNDED, ALIGNED TO THE WEBSITE (Lisa, 21 Oct 2026: "round the boxes
      aligned to my website"). The site's --radius is 14px and its buttons
      are pills (drafts/website-build/public/assets/css/site.css). Kept as
      one override block so it is easy to read and easy to undo. ── */
.tile,.card,.joinbox,.feedback,.note,.alert,.scroll,.lesson,.npa-head,.npa-fig img,
.refBox,.npa-prompt,.npa-pre,.npa-acc,.npa-h2{border-radius:14px}
.npa-acc{overflow:hidden}
.lesson .prompt{border-radius:0 14px 14px 0}
input[type=email],input[type=text],input[type=number],textarea,select{border-radius:10px}
.btn,.npa-btn,.copyBtn,.pill{border-radius:999px}

/* ⭐ THE MINDSET MOMENT CARD on the week page. Added by Jeeves, 27 October
   2026. The accent card, an eyebrow, the question always visible, and the
   reading in the same shut <details> the pre-read uses. Tokens only. */
.card.mindset{margin-bottom:28px}
.card.mindset .mindeye{color:var(--coral);margin-bottom:10px}
.card.mindset .mindq{margin:6px 0 4px;color:var(--ink);font-size:var(--fs-lg);line-height:1.55}
.card.mindset .mindqlabel{display:block;font:500 var(--fs-2xs)/1 var(--body);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.card.mindset details.mindread{border-top:1px solid var(--line);margin-top:14px}
.card.mindset details.mindread > summary{font-size:var(--fs)}
.card.mindset .prose p{margin:0 0 14px;font-size:var(--fs-lg);line-height:1.65;color:var(--ink)}
.card.mindset .prose{max-width:62ch}
/* ══════════════════════════════════════════════════════════════════════════
   THE VAULT LOOK ACROSS THE STUDIO. Added by Jeeves, 27 October 2026. Lisa:
   "reformat the studio into the same vault format please". The rules are the
   vault's BOLD block (drafts/vault/vault.css) and match body.wsis in
   lockin.html and body.ynm in course-nextmove.html, so the three read as one
   product: Poppins 800 uppercase heads, coral pill buttons, 2px ink cards
   with a 16px radius, grey drop-downs with a coral + and −.
   Scoped to body.vlook, so a page opts in by its body class. Brand coral,
   ink, tint and grey only. No new colours.
   ══════════════════════════════════════════════════════════════════════ */
body.vlook h1{font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.95}
body.vlook h2{font:800 var(--fs-xl)/1.15 var(--head);text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);margin-bottom:14px}
body.vlook .hero h2{color:#fff}
body.vlook header{border-bottom:2px solid var(--ink)}
body.vlook .btn{background:var(--coral);border:2px solid var(--coral);color:#fff;font:800 var(--fs-sm)/1.2 var(--head);text-transform:uppercase;letter-spacing:.02em;border-radius:999px;padding:14px 24px;max-width:100%;white-space:normal}
body.vlook .btn:hover{background:var(--ink);border-color:var(--ink)}
body.vlook .btn.ghost{background:#fff;color:var(--ink);border:2px solid var(--ink)}
body.vlook .btn.ghost:hover{background:var(--ink);color:#fff}
body.vlook .btn[disabled]{opacity:.5;background:var(--coral);border-color:var(--coral)}
body.vlook .card,body.vlook .tile,body.vlook .lesson,body.vlook .pRow{border:2px solid var(--ink);border-radius:16px}
body.vlook .card.due{background:var(--tint);border-color:var(--ink)}
body.vlook .card.accent{border-left-width:2px}
body.vlook .card strong{color:var(--coral)}
body.vlook .card h3{font-weight:800}
body.vlook .tile h3{font:800 var(--fs-xl)/1.2 var(--head);text-transform:uppercase;letter-spacing:-.01em}
body.vlook .tile:hover{border-color:var(--coral);transform:none}
body.vlook .tile .arrow{font:800 var(--fs-xs)/1 var(--head);text-transform:uppercase;letter-spacing:.08em}
body.vlook .hero{background:var(--coral);border:2px solid var(--coral);border-radius:16px}
body.vlook .hero:hover{background:var(--ink);border-color:var(--ink)}
body.vlook .pill{font:800 var(--fs-xs)/1 var(--head);letter-spacing:.08em;border-radius:999px;padding:9px 14px}
body.vlook .pill.dark{background:var(--coral);color:#fff}
body.vlook .pill.line{border:2px solid var(--ink);color:var(--ink);padding:7px 12px}
body.vlook .tag{font:800 var(--fs-2xs)/1 var(--head);border-radius:999px;padding:5px 9px}
body.vlook .meter span,body.vlook .mini span{background:var(--coral)}
body.vlook input[type=email],body.vlook input[type=text],body.vlook input[type=number],body.vlook textarea,body.vlook select{border-radius:8px}
body.vlook footer{border-top:2px solid var(--ink)}
/* Long content folds into grey panels with a coral + that turns to −, the
   vault's drop-down. The pre-read sections (details.sec) and every course
   accordion (.npa-acc). */
body.vlook details.sec{background:var(--grey);border:0;border-radius:12px;padding:0 16px;margin:0 0 10px}
body.vlook details.sec:first-of-type{border-top:0}
body.vlook details.sec > summary{padding:14px 40px 14px 0;font:600 var(--fs)/1.4 var(--head)}
body.vlook details.sec > summary:after{content:"+";border:0;transform:none;top:50%;margin-top:-13px;right:0;width:26px;height:26px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font:800 18px/1 var(--head)}
body.vlook details.sec[open] > summary:after{content:"\2212";transform:none;top:50%;margin-top:-13px}
body.vlook details.sec[open]{padding-bottom:4px}
body.vlook details.sec > *:last-child{margin-bottom:14px}
body.vlook .npa-acc,body.vlook .hourAcc{border:2px solid var(--ink);border-radius:16px;overflow:hidden}
body.vlook .npa-acc summary::after{content:"+";top:50%;margin-top:-13px;right:14px;width:26px;height:26px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font:800 18px/1 var(--head)}
body.vlook .npa-acc[open]>summary::after{content:"\2212"}
body.vlook .hourAcc summary .hd > span:first-child{font:800 var(--fs)/1.25 var(--head);text-transform:uppercase;letter-spacing:.01em}
body.vlook .hourAcc summary.here .hd .cnt{color:var(--coral);font-weight:800}
body.vlook .card.mindset details.mindread{border-top:0;margin-top:14px}
body.vlook .tasktag{background:var(--coral)}

/* The Studio nav, one row of pills under the header. Scrolls sideways on a
   phone rather than wrapping into three lines. */
.snav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:-14px 0 24px;padding:2px 0 4px}
.snav::-webkit-scrollbar{display:none}
.snav a{flex:0 0 auto;text-decoration:none;font:800 var(--fs-xs)/1 var(--head);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:9px 14px;white-space:nowrap}
.snav a:hover{border-color:var(--coral);color:var(--coral)}
.snav a.on{background:var(--ink);color:#fff}

/* Where you are: the twelve weeks as a coral strip, as in lockin.html. */
.stages{background:var(--coral);color:#fff;border-radius:16px;padding:16px 18px;margin:0 0 14px}
.stages .lbl{font:800 var(--fs-xs)/1 var(--head);letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px}
.stages ol{list-style:none;margin:0;padding:0 0 2px;display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.stages ol::-webkit-scrollbar{display:none}
.stages li{flex:0 0 auto}
.stages a{display:block;font:800 var(--fs-xs)/1 var(--head);letter-spacing:.06em;text-transform:uppercase;color:#fff;text-decoration:none;border:2px solid rgba(255,255,255,.55);border-radius:999px;padding:8px 12px}
.stages a.on{background:#fff;color:var(--coral);border-color:#fff}
.stages a.done{opacity:.65}
@media(min-width:860px){.stages ol{flex-wrap:wrap;overflow:visible}}

/* One step at a time, as in lockin.html: a progress bar, a step label, the
   screen, and Back and Next at the foot. */
.stepCard{padding:20px 18px 18px}
.wzBar{height:6px;background:var(--grey);border-radius:999px;overflow:hidden;margin:0 0 14px}
.wzBar span{display:block;height:100%;background:var(--coral);border-radius:999px;transition:width .25s}
.stepCard .wzStep{font:800 var(--fs-xs)/1.3 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--coral);margin:0 0 8px}
.stepCard .partTitle{margin:0 0 18px}
.stepCard section{margin:0}
.stepCard section + section{margin-top:26px}
.stepCard .card{border-width:2px}
.stepCard .lesson{border:0;padding:0}
.wzNav{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:22px;padding-top:18px}
.wzNav .btn{margin:0}
.wzNav .wzNext{margin-left:auto}
@media(max-width:520px){.stepCard{padding:16px 14px}.wzNav .btn{padding:13px 18px}}
@media (prefers-reduced-motion:reduce){.wzBar span{transition:none}}

/* A question with its box, as label.fld in lockin.html. */
label.fld{display:block;text-transform:none;letter-spacing:0;font:500 var(--fs)/1.45 var(--body);color:var(--ink);margin:0 0 22px}
label.fld textarea,label.fld input{margin-top:8px;font-weight:400;margin-bottom:0}
label.fld textarea{min-height:110px}
label.fld .hint{display:block;font:400 var(--fs-sm)/1.45 var(--body);color:var(--muted);margin-top:4px}
.saveline{font-size:var(--fs-sm);color:var(--muted);margin:4px 0 0}

/* The business plan page. */
.planSec{margin:0 0 16px}
.planSec .letter{display:inline-block;background:var(--coral);color:#fff;border-radius:999px;padding:5px 11px;font:800 var(--fs-xs)/1 var(--head);letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}
.planSec .qa{border-top:1px solid var(--line);padding:12px 0 4px}
.planSec .qa:first-of-type{border-top:0}
.planSec .q{font:600 var(--fs-sm)/1.4 var(--head);color:var(--ink);margin:0 0 6px}
.planSec .a{background:var(--grey);border-radius:10px;padding:10px 12px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs);color:var(--ink);margin:0 0 6px}
.planSec .a.empty{background:#fff;border:1px dashed var(--line);color:var(--muted)}
.planSec .wk a{font-size:var(--fs-sm);color:var(--coral)}

/* YOUR NEXT MOVE, closer to the Optionality Vault. Lisa, 28 Oct 2026: "the formatting of your
   next move is not all aligned with the optionality vault yet". Same rules as vault.css: drop-downs
   are grey panels with a coral round +/-, checklist text in ink and sentence case (it was picking
   up the uppercase form-label style), a welcome card. Scoped to body.ynm. */
body.ynm .npa-acc,body.ynm .hourAcc,body.ynm .indexAcc{background:var(--grey);border:0;border-radius:12px;overflow:hidden}
body.ynm .scenAcc{box-shadow:inset 4px 0 0 var(--coral)}
body.ynm .npa-acc summary{padding:16px 58px 16px 18px;font:600 var(--fs)/1.35 var(--head);color:var(--ink)}
body.ynm .npa-acc summary::after{content:"+";right:16px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font:800 18px/1 var(--head)}
body.ynm .npa-acc[open]>summary{border-bottom:0}
body.ynm .npa-acc[open]>summary::after{content:"\2212"}
body.ynm .npa-acc .npa-acc{background:#fff}
body.ynm .npa-acc-body .rows .row{background:#fff;border-radius:10px;margin:0 0 8px;padding:12px 14px}
body.ynm .npa-check label,body.ynm .npa-check label span{text-transform:none;letter-spacing:0;color:var(--ink);font:400 var(--fs)/1.6 var(--body)}
body.ynm .npa-check label strong{font-weight:600}
body.ynm .npa-check li{background:var(--grey);border-radius:12px;padding:14px 16px;margin:0 0 10px}
body.ynm .welcome{background:var(--coral);color:#fff;border-radius:16px;padding:22px 20px}
body.ynm .welcome h2{color:#fff;margin:0 0 8px}
body.ynm .welcome p{color:#fff;margin:0 0 8px}
body.ynm .welcome p:last-child{margin:0}

/* 28 Oct 2026: optional note under each checklist item (Your Next Move readiness). */
.npa-check .npa-item-note{display:block;width:100%;margin:10px 0 0 31px;width:calc(100% - 31px);border:1px solid #ddd;border-radius:10px;padding:10px 12px;font:400 15px/1.5 var(--body);background:#fff;resize:vertical}
.npa-check .npa-item-note:focus{outline:2px solid var(--coral);outline-offset:1px}