/* ==========================================================================
   Curso Online TDABC + CostCtrl + IA · dev build
   Design language: Instrument (costandprofitability.com)
   Motif: ticket and journey. Warm paper, warm near-black ink,
   burnt orange #A8481A as the single accent.
   No network requests. Fonts are named first, then system fallbacks.

   THE ACCENT RULE, applied throughout this file.
   --ember marks exactly three things and nothing else:
     1. where you are now (the current stop, the current page)
     2. the single primary action in the view
     3. the one emphasised element inside a diagram
   Everything else that used to be ember, module numbers, tier bullets, FAQ
   markers, live-stop dates, question indices, is now ink, muted or rule.
   If you add ember to something, find the ember you are removing.

   THE LOGO RULE, per BRAND-USAGE.md sections 4 and 5.
   The rule is one sentence: the mark never sits against an accent element.
   #A8481A is the interface, and the marks carry oranges of their own
   (#ED6E00 in the CPa dots, a crimson-to-#F08100 gradient in the CostCtrl
   icon) which are close in hue and far off in saturation, so touching they
   read as a printing error. Every mark therefore keeps a measured guard
   distance from anything ember, and no link, button or current-page
   underline is allowed inside it.

   What is NOT the rule, and used to be treated as though it were: a cordon
   against neutral things. The masthead mark used to be given its own height
   of padding above and below, against a paper background and a hairline
   rule, neither of which is ember. That padding was protecting the mark from
   nothing, and it cost a 133px bar that could not be pinned.

   The reason it was ever believed: the previous build used the ORANGE
   wordmark on light paper, which measures 2.93:1 against --paper. Below
   about 40px that is a smudge, and the fix looked like size and space. The
   correct light-theme asset is dark slate #3B4441 with two small orange
   dots, and it measures 9.26:1, over three times the contrast. It reads at
   36px, the bar is 59px, and the masthead is sticky again.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   The eight diagram variables required by AUTHORING-CONTRACT.md section 6 are
   --ink --muted --rule --ember --ember-soft --card --stamp --stamp-soft
   plus the three type stacks --serif --sans --mono.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Diagram contract, light */
  --ink:         #1F1A16;
  --muted:       #6B6157;
  --rule:        #E0D6C8;
  --ember:       #A8481A;
  --ember-soft:  #F6E4D9;
  --card:        #FFFCF7;
  --stamp:       #5C5147;
  --stamp-soft:  #EDE5D8;

  /* Type */
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:  "IBM Plex Mono", "Cascadia Mono", Consolas, "SF Mono", "Roboto Mono", ui-monospace, "Courier New", monospace;

  /* Ground and surfaces beyond the diagram contract */
  --paper:       #FAF5EC;
  --paper-deep:  #F2EADC;
  --ink-invert:  #FAF5EC;
  --shadow:      0 1px 2px rgba(31, 26, 22, .05), 0 8px 24px -16px rgba(31, 26, 22, .28);
  --focus:       var(--ember);

  /* Rhythm */
  --measure: 34rem;
  --shell: 70rem;
  --gap: 1.25rem;
  --radius: 6px;

  /* THE MARK, AND ITS GUARD.

     --logo-h is the rendered height of the Cost and Profitability mark. It
     is a four-line stacked wordmark in a 327 x 240 box, so at 36px it is
     49px wide and the cap line of "Cost" is 6.3px. That reads, because the
     light-theme asset is dark slate #3B4441 at 9.26:1 against --paper, not
     the orange one at 2.93:1 that the previous 44px floor was measured on.

     The guard distance from anything ember, per BRAND-USAGE section 4, is
     the mark's own height, so it is written as var(--logo-h) at the point of
     use rather than aliased. An alias would not work: a custom property
     whose value contains var() is substituted where it is DECLARED, so a
     --logo-clear declared on :root stays 36px even on the footer mark that
     redeclares --logo-h to 56. Read on the element, --logo-h always follows.

     The guard is deliberately NOT the masthead's padding. A hairline rule
     and a paper background are not accent elements and need no cordon.

     --masthead-pad is ordinary breathing room, and --masthead-h is what the
     sticky bar actually occupies, used by the journey rail and by every
     scroll-margin on the page so nothing lands underneath it. Both live on
     :root, which is the scope they describe. */
  --logo-h: 36px;
  --masthead-pad: .7rem;
  --masthead-h: calc(var(--logo-h) + (var(--masthead-pad) * 2) + 1px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink:        #F1EAE0;
    --muted:      #A2968A;
    --rule:       #382F28;
    --ember:      #DE7B41;
    --ember-soft: #3B2418;
    --card:       #1C1815;
    --stamp:      #C9BDAD;
    --stamp-soft: #2A2420;
    --paper:      #131110;
    --paper-deep: #0D0C0B;
    --ink-invert: #131110;
    --shadow:     0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -16px rgba(0, 0, 0, .9);
  }
}

/* Manual override wins in both directions. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink:        #F1EAE0;
  --muted:      #A2968A;
  --rule:       #382F28;
  --ember:      #DE7B41;
  --ember-soft: #3B2418;
  --card:       #1C1815;
  --stamp:      #C9BDAD;
  --stamp-soft: #2A2420;
  --paper:      #131110;
  --paper-deep: #0D0C0B;
  --ink-invert: #131110;
  --shadow:     0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -16px rgba(0, 0, 0, .9);
}

:root[data-theme="light"] {
  color-scheme: light;
  --ink:        #1F1A16;
  --muted:      #6B6157;
  --rule:       #E0D6C8;
  --ember:      #A8481A;
  --ember-soft: #F6E4D9;
  --card:       #FFFCF7;
  --stamp:      #5C5147;
  --stamp-soft: #EDE5D8;
  --paper:      #FAF5EC;
  --paper-deep: #F2EADC;
  --ink-invert: #FAF5EC;
  --shadow:     0 1px 2px rgba(31, 26, 22, .05), 0 8px 24px -16px rgba(31, 26, 22, .28);
}

/* --------------------------------------------------------------------------
   2. RESET AND BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* The masthead is pinned, so anything scrolled to has to stop below it.
   Covers every in-page anchor, the skip link's target, and the two places
   JavaScript moves focus: the stamp result and the tour's exit. */
[id], [tabindex="-1"] { scroll-margin-top: calc(var(--masthead-h) + 1rem); }

body {
  margin: 0;
  /* No horizontal body scroll at any width. Wide things scroll in their own box. */
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 48em) { body { font-size: 17.5px; } }

img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(1.85rem, 1.35rem + 2.2vw, 2.9rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ember); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 600; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}

/* Visible keyboard focus, everywhere. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Older engines without :focus-visible still get a ring. */
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--ember-soft); color: var(--ink); }

/* Figures align: tabular numerals wherever numbers stack. */
.num, .mins, time, td, th, .price, .ticket__code, .q-index {
  font-variant-numeric: tabular-nums;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: .75rem; top: -4rem;
  z-index: 50;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--ember);
  padding: .6rem 1rem; border-radius: var(--radius);
  font-size: .9rem;
  transition: top .15s ease;
}
.skip-link:focus { top: .75rem; }

/* --------------------------------------------------------------------------
   3. SHELL
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1rem, .4rem + 2.4vw, 2.5rem);
}

/* Sticky, at 59px.

   The previous pass unpinned it, on the reasoning that a legible mark plus
   its own height of clear space above and below makes a 133px bar, and 133px
   on a phone is a third of the reading area. The measurement was right and
   the premise was wrong twice over.

   One: the mark it was measured on was the orange wordmark, at 2.93:1
   against --paper. The correct light-theme asset is dark slate with two
   small orange dots, at 9.26:1, and it holds at 36px where the orange one
   needed 44px.

   Two: the clear space that made the bar tall was vertical, and the only
   things above and below the mark are the dev banner (no accent, by design)
   and a hairline rule. The guard in BRAND-USAGE is a guard against the
   accent, not against paper. It stays, horizontally, where the nav is.

   36px mark + 11.2px above and below + a 1px rule = 59px, 7% of a 390 x 844
   phone. The journey rail on a session is still sticky, below it. */
.masthead {
  position: sticky;
  top: 0;
  /* Above the page, below the skip link (50), the tour (40+) and the
     glossary panel (30), all of which must be able to cover it. */
  z-index: 20;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.masthead__in {
  display: flex; align-items: center;
  /* No column gap. The separation between the mark and the nav is the
     brandmark's own guard, and a gap on top of it is 16px of nothing that
     costs the nav a row at 390. Row gap only, for the wrap case. */
  gap: .5rem 0;
  min-height: calc(var(--logo-h) + (var(--masthead-pad) * 2));
  padding-block: var(--masthead-pad);
  /* A safety valve, not a layout. The nav is kept on the mark's own row at
     every width the build is checked at, because a pinned bar that grows to
     two rows while you read is worse than a tight one. */
  flex-wrap: wrap;
}

/* --- dual-finish marks, one switch --------------------------------------
   BRAND-USAGE section 2: the course has two themes, so both transparent
   finishes have to be present and the theme picks one. One finish does not
   cover both grounds.

   This is the only place that swap is written. The masthead mark, the footer
   mark, the powered-by lockup and the inlined CostCtrl mark all go through
   it, so a mark added later cannot get a different rule by accident. Nothing
   here recolours anything: both finishes are the artwork as supplied. */

.on-light { display: block; }
.on-dark  { display: none; }

:root[data-theme="dark"] .on-light { display: none; }
:root[data-theme="dark"] .on-dark  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .on-light { display: none; }
  :root:not([data-theme="light"]) .on-dark  { display: block; }
}

/* --- the brandmark ------------------------------------------------------
   Cost and Profitability, individual, per BRAND-USAGE section 1. The course
   is a Cost and Profitability product and it is sold as software-agnostic,
   so the header carries the CPa mark alone and never the lockup. The link is
   labelled, so both images are decorative and carry an empty alt. */

.brandmark {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  /* Not var(--ember). Links are ember by default in this stylesheet, and a
     link wrapping the mark would put the accent on the mark's own element. */
  color: var(--ink);
  /* The guard. Nothing ember may come within this distance, and in the
     masthead this is the gap the nav is held off by. */
  margin-inline-end: var(--logo-h);
  border-radius: 3px;
}
.brandmark img {
  height: var(--logo-h);
  width: auto;
  max-width: none;
}

.brandmark__sub {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: .85rem;
  margin-left: .85rem;
  border-left: 1px solid var(--rule);
  white-space: nowrap;
}
@media (max-width: 30em) { .brandmark__sub { display: none; } }

.masthead nav {
  margin-left: auto;
  display: flex; align-items: center; gap: .35rem;
  flex-wrap: wrap;
}

.navlink {
  font-size: .86rem;
  color: var(--muted);
  text-decoration: none;
  padding: .4rem .55rem;
  border-radius: 4px;
  white-space: nowrap;
}
.navlink:hover { color: var(--ink); background: var(--paper-deep); }
/* Accent 1 of 3: where you are now. Far from the mark by construction,
   because the nav is pushed to the far end of the bar and the mark holds a
   36px guard on top of that. */
.navlink[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ember); }

/* Keep the nav on the mark's own row on a phone. A pinned bar that wraps to
   two rows doubles in height while you are reading, which is the one thing a
   sticky masthead must not do. The bar is 55px here.

   The budget at 390 is 358px of content: 49px of mark, 36px of guard, and
   244px of nav, which leaves 29px spare. The guard is not negotiable, so
   what gives is the nav's own padding. */
@media (max-width: 47.99em) {
  :root { --masthead-pad: .55rem; }
  .navlink { font-size: .76rem; padding: .32rem .26rem; }
  .theme-toggle { font-size: .7rem; padding: .24rem .5rem; }
  .masthead nav { gap: .1rem; }
}

.theme-toggle {
  font: inherit;
  font-size: .8rem;
  font-family: var(--mono);
  letter-spacing: .02em;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .3rem .7rem;
  cursor: pointer;
  white-space: nowrap;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ember); }

main { display: block; }

.site-foot {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding: 2rem 0 3rem;
  color: var(--muted);
  font-size: .85rem;
}
.site-foot p { margin-bottom: .6em; }

/* --------------------------------------------------------------------------
   4. SMALL PARTS
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .7rem;
}

.lede {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + .55vw, 1.35rem);
  line-height: 1.45;
  color: var(--ink);
}

.chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .16rem .55rem;
  color: var(--muted);
  white-space: nowrap;
  vertical-align: middle;
}
/* Accent 1 of 3: where you are now. */
.chip--ember { border-color: var(--ember); color: var(--ember); }

/* Dev-build markers. Dashed and neutral: they say "provisional", not
   "important". There are ten of them across the three pages, and in ember
   they were ten alarms competing with the one thing on a page that is
   genuinely current. Neutral is not a workaround, it is the accent rule.

   There was a loud twin of this, .chip--flag, and a .placeholder box to go
   with it: ember, dashed, for a value that did not exist yet. Both are gone.
   The last value they were holding open was the WhatsApp number, which is
   now supplied, and an ember rule with no subject left is exactly the kind
   of accent this stylesheet spends its comments arguing against. */
.chip--dev {
  border-style: dashed;
  border-color: var(--stamp);
  color: var(--stamp);
  background: var(--stamp-soft);
}

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-size: .92rem; font-weight: 500;
  border: 1px solid var(--ember);
  background: var(--ember);
  color: var(--ink-invert);
  padding: .62rem 1.15rem;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.btn:hover { background: transparent; color: var(--ember); }
.btn[disabled], .btn[aria-disabled="true"] {
  border-color: var(--rule);
  background: transparent;
  color: var(--muted);
  cursor: not-allowed;
}
.btn[disabled]:hover, .btn[aria-disabled="true"]:hover { background: transparent; color: var(--muted); }

.btn--quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn--quiet:hover { border-color: var(--ember); color: var(--ember); background: transparent; }

.btn--small { font-size: .82rem; padding: .42rem .8rem; }

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.1rem, .8rem + 1vw, 1.75rem);
}

/* A note is important, not urgent. It used to be ember-on-ember-soft, which
   meant four accents down a page and none of them meaning anything. */
.note {
  border-left: 2px solid var(--stamp);
  background: var(--paper-deep);
  padding: .9rem 1.1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .93rem;
}
.note p:last-child { margin-bottom: 0; }
.note__lead {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: .35rem;
}

/* Wide content scrolls inside its own container, never the body. */
.scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  margin: 1.4rem 0;
}
.scroller table { margin: 0; border: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
th, td {
  text-align: left;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
thead th {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

pre {
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.55;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  margin: 0;
  tab-size: 2;
}
code { font-family: var(--mono); font-size: .9em; }
p code, li code {
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: .05em .32em;
}

/* --------------------------------------------------------------------------
   5. THE TICKET
   -------------------------------------------------------------------------- */

.ticket {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin: 1.75rem 0 2.5rem;
}

@media (min-width: 46em) {
  .ticket { grid-template-columns: minmax(0, 1fr) 15.5rem; }
}

.ticket__body { padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); min-width: 0; }

.ticket__stub {
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  border-top: 1px dashed var(--rule);
  background: linear-gradient(180deg, var(--paper-deep), var(--card));
  min-width: 0;
}
@media (min-width: 46em) {
  .ticket__stub {
    border-top: 0;
    border-left: 1px dashed var(--rule);
    background: linear-gradient(90deg, var(--paper-deep), var(--card));
  }
}

.ticket__title { margin: 0 0 .35rem; }

.ticket__meta {
  display: grid;
  gap: .75rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}
.ticket__meta dt {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .18rem;
}
.ticket__meta dd {
  margin: 0;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}

.ticket__code {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--muted);
}

.ticket__count {
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  display: block;
  margin: .3rem 0 .1rem;
}
.ticket__count .of { color: var(--muted); font-size: 1.4rem; }

.ticket__rail {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 1rem 0 .4rem;
}
.ticket__pip {
  width: 13px; height: 13px;
  border-radius: 3px;
  border: 1px solid var(--rule);
  background: transparent;
}
.ticket__pip[data-state="stamped"] { background: var(--stamp); border-color: var(--stamp); }
.ticket__pip[data-state="current"] { background: var(--ember-soft); border-color: var(--ember); }

/* --------------------------------------------------------------------------
   6. THE ITINERARY
   -------------------------------------------------------------------------- */

.itinerary { margin-top: 2rem; }

.module {
  margin: 0 0 2.25rem;
  padding: 0;
  border: 0;
}

.module__head {
  display: flex;
  align-items: baseline;
  gap: .6rem 1rem;
  flex-wrap: wrap;
  padding: 0 0 .55rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
  width: 100%;
}
.module__num {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
  /* Was ember. Ten module numbers down a page in the accent colour is not
     emphasis, it is wallpaper. */
}
.module__title {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  font-weight: 600;
  margin: 0;
  letter-spacing: -.01em;
  flex: 1 1 14rem;
  min-width: 0;
}
.module__mins {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stops { list-style: none; margin: 0; padding: 0; }

.stop {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  gap: 0 .85rem;
  align-items: start;
  padding: .95rem 0;
  border-bottom: 1px solid var(--rule);
}
.stop:last-child { border-bottom: 0; }

/* The rail: a continuous journey line behind the markers. */
.stop::before {
  content: "";
  position: absolute;
  left: 1.19rem;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--rule);
}
.stop:first-child::before { top: 1.35rem; }
.stop:last-child::before { bottom: calc(100% - 1.35rem); }

.stop__mark {
  position: relative;
  z-index: 1;
  grid-column: 1;
  width: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  padding-top: .1rem;
}

.mark {
  width: 1.55rem; height: 1.55rem;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.stop__body { grid-column: 2; min-width: 0; }

.stop__title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 .12rem;
  letter-spacing: -.005em;
  color: var(--ink);
}
.stop__title a { color: inherit; text-decoration: none; }
.stop__title a:hover { color: var(--ember); text-decoration: underline; }

.stop__note {
  margin: .15rem 0 0;
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.45;
}

.stop__aside {
  grid-column: 3;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .35rem;
  padding-top: .1rem;
}

.stop__mins {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- states ------------------------------------------------------------- */

.stop[data-state="stamped"] .mark {
  border-color: var(--stamp);
  background: var(--stamp-soft);
  color: var(--stamp);
}
.stop[data-state="stamped"] .stamp-mark {
  transform: rotate(-11deg);
  display: block;
}

/* Accent 1 of 3, and on the itinerary it is the only one. The row is tinted
   so the current stop reads as a place rather than a coloured word. */
.stop[data-state="current"] {
  background: var(--paper-deep);
  border-radius: var(--radius);
  border-bottom-color: transparent;
}
.stop[data-state="current"] .mark {
  border-color: var(--ember);
  border-width: 2px;
  background: var(--ember-soft);
  color: var(--ember);
}
.stop[data-state="current"] .stop__title { color: var(--ink); }

.stop[data-state="locked"] .mark { border-style: dashed; }
.stop[data-state="locked"] .stop__title { color: var(--muted); }
.stop[data-state="locked"] .stop__note { opacity: .85; }

.stamp-mark { display: none; }

/* --- the live stops ------------------------------------------------------
   A dated stop on the road is not where you are, so it is not ember. It is
   the stamp family: the same warm grey that marks a session already done,
   which is the right register for a fixed point in the calendar. */

.stop--live {
  background: var(--stamp-soft);
  border-radius: var(--radius);
  border-bottom: 0;
  margin: .5rem 0;
  padding: 1rem .9rem 1rem 0;
}
.stop--live::before { background: transparent; }
.stop--live .mark {
  border-color: var(--stamp);
  border-style: dashed;
  background: var(--paper);
  color: var(--stamp);
}
.stop--live .stop__title { color: var(--ink); }
.stop--live .stop__date {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: block;
}
.stop--live .stop__time {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  display: block;
}

@media (max-width: 34em) {
  .stop { grid-template-columns: 2.1rem minmax(0, 1fr); }
  .stop__mark { width: 2.1rem; }
  .stop::before { left: 1.04rem; }
  .stop__aside {
    grid-column: 2;
    align-items: flex-start;
    text-align: left;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .3rem .7rem;
    margin-top: .45rem;
  }
}

/* --------------------------------------------------------------------------
   7. SESSION READING VIEW
   -------------------------------------------------------------------------- */

.reading { max-width: var(--measure); }
.reading--wide { max-width: 44rem; }

.session-head {
  border-bottom: 1px solid var(--rule);
  padding: 2.25rem 0 1.6rem;
  margin-bottom: 2.25rem;
}

.session-facts {
  display: grid;
  gap: .8rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin: 1.4rem 0 0;
  font-size: .88rem;
}
.session-facts dt {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .12rem;
}
.session-facts dd { margin: 0; }

.block {
  padding: 2.5rem 0;
  border-top: 1px solid var(--rule);
}
.block:first-of-type { border-top: 0; padding-top: 0; }

/* The four block labels are the spine of a session, not four alarms. Ink,
   with a hairline that runs out to the edge of the measure so the eye reads
   them as dividers. */
.block__label {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1.35rem;
}
.block__label::after {
  content: "";
  order: 9;
  flex: 1 1 2rem;
  height: 1px;
  background: var(--rule);
}
.block__label .mins {
  color: var(--muted);
  letter-spacing: .08em;
  order: 3;
}

.pullquote {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.85rem);
  line-height: 1.28;
  letter-spacing: -.015em;
  margin: 0 0 1.4rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--ember);
  color: var(--ink);
  text-wrap: balance;
}

.wordcount {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--muted);
  margin: -.4rem 0 1.6rem;
}

.reading h3 { margin-top: 2.2rem; }
.reading h3:first-child { margin-top: 0; }

.figure { margin: 2rem 0; }
.figure figcaption {
  font-size: .82rem;
  color: var(--muted);
  margin-top: .6rem;
  font-family: var(--sans);
}

.prompt-block { margin: 1.5rem 0; }
.prompt-block__bar {
  display: flex; align-items: center; gap: .6rem;
  flex-wrap: wrap;
  border: 1px solid var(--rule);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--paper-deep);
  padding: .45rem .7rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.prompt-block__bar .btn { margin-left: auto; }
.prompt-block pre { border-radius: 0 0 var(--radius) var(--radius); }

/* --------------------------------------------------------------------------
   8. THE STAMP (quiz)
   -------------------------------------------------------------------------- */

.stampbox {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.1rem, .85rem + 1vw, 1.8rem);
}

.stampbox__rule {
  font-size: .9rem;
  color: var(--muted);
  margin: 0 0 1.5rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}

.q { border: 0; margin: 0 0 1.75rem; padding: 0; min-width: 0; }
.q:last-of-type { margin-bottom: 1.25rem; }

.q legend {
  padding: 0;
  margin: 0 0 .8rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.005em;
  display: flex;
  gap: .55rem;
}
.q-index {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--muted);
  padding-top: .18rem;
  flex: none;
}

.opt {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  padding: .6rem .75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: .5rem;
  cursor: pointer;
  font-size: .95rem;
  line-height: 1.45;
  background: var(--paper);
  transition: border-color .14s ease, background .14s ease;
}
.opt:hover { border-color: var(--ember); }
.opt input { margin: .32rem 0 0; flex: none; accent-color: var(--ember); }
.opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.q[data-answered] .opt { cursor: default; }
.q[data-answered] .opt:hover { border-color: var(--rule); }
.q[data-answered] .opt[data-correct="true"] {
  border-color: var(--stamp);
  background: var(--stamp-soft);
}
.q[data-answered] .opt[data-picked="true"][data-correct="false"] {
  border-color: var(--ember);
  background: var(--ember-soft);
}
.q[data-answered] .opt[data-correct="true"]::after {
  content: "correct";
  margin-left: auto;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--stamp);
  padding-top: .2rem;
  flex: none;
}

.rationale {
  display: none;
  margin: .7rem 0 0;
  padding: .75rem .95rem;
  border-left: 2px solid var(--muted);
  background: var(--paper-deep);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .88rem;
  color: var(--ink);
}
.q[data-answered] .rationale { display: block; }
.q[data-answered="wrong"] .rationale { border-left-color: var(--ember); }

.stamp-result {
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 1.1rem 1.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.stamp-result__seal { flex: none; width: 5rem; }
.stamp-result__seal svg { transform: rotate(-9deg); }

.stamp-result__text { flex: 1 1 14rem; min-width: 0; }
.stamp-result__text p { margin: 0 0 .35rem; font-size: .93rem; }
.stamp-result__head {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 .3rem;
}
.stamp-result__actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }

.score {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   9. ENROL PAGE
   -------------------------------------------------------------------------- */

.hero {
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0 clamp(2rem, 1.5rem + 2vw, 3rem);
  border-bottom: 1px solid var(--rule);
}
.hero__grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 56em) {
  .hero__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}
.hero h1 { margin-bottom: .35em; }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 1.1rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.facts li {
  border-top: 1px solid var(--rule);
  padding-top: .6rem;
}
.facts b {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.facts span {
  font-size: .8rem;
  color: var(--muted);
  display: block;
  margin-top: .15rem;
}

.section { padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section__head { max-width: 40rem; margin-bottom: 2rem; }

.tiers {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 50em) {
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tier {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.4rem;
  min-width: 0;
}
.tier--pick {
  border-color: var(--ember);
  box-shadow: var(--shadow);
}
.tier__flag {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .5rem;
  min-height: 1rem;
}
/* Accent 2 of 3: the single primary action in the view. One tier is the
   recommendation, so one flag is ember. */
.tier--pick .tier__flag { color: var(--ember); }
.tier h3 { margin-bottom: .35rem; }
.tier__price {
  font-family: var(--serif);
  font-size: 2.1rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: .7rem 0 .15rem;
  display: block;
}
.tier__prov {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 1rem;
  border-bottom: 1px dashed var(--rule);
  padding-bottom: .8rem;
}
.tier ul {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  font-size: .9rem;
  flex: 1 1 auto;
}
.tier li {
  padding: .42rem 0 .42rem 1.35rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
  line-height: 1.4;
}
.tier li:last-child { border-bottom: 0; }
/* Included and excluded are told apart by weight, not by the accent. There
   are fifteen of these bullets on the page and they were all ember, which
   left nothing to mark the tier that most people should actually pick. */
.tier li::before {
  content: "";
  position: absolute;
  left: 0; top: .85em;
  width: .55rem; height: 1px;
  background: var(--stamp);
}
.tier li[data-has="no"] { color: var(--muted); }
.tier li[data-has="no"]::before { background: var(--rule); }
.tier .btn { width: 100%; justify-content: center; }

.dates {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 44rem;
}
.dates li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: .3rem 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.dates li:last-child { border-bottom: 0; }
.dates time {
  font-family: var(--mono);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.dates b { font-weight: 600; font-family: var(--serif); font-size: 1.02rem; }
.dates p { margin: .1rem 0 0; font-size: .87rem; color: var(--muted); }
@media (max-width: 30em) {
  .dates li { grid-template-columns: 1fr; }
}

.compact-itinerary { max-width: 46rem; }
.compact-itinerary .module { margin-bottom: 1.75rem; }

.faq { max-width: 44rem; }
.faq details {
  border-bottom: 1px solid var(--rule);
  padding: .95rem 0;
}
.faq summary {
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  list-style: none;
  display: flex;
  gap: .7rem;
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+";
  font-family: var(--mono);
  color: var(--muted);
  flex: none;
  font-size: .95rem;
}
.faq summary:hover { color: var(--ember); }
.faq details[open] summary::before { content: "\2212"; }
.faq details > *:not(summary) { margin-top: .8rem; font-size: .94rem; }

/* The dev banner scrolls away and the masthead pins under it. It carries no
   accent, and the reason is now the accent rule rather than the mark: a
   "dev build" chip is a standing condition, not the current step. It is
   still unmissable: full width, dashed, mono, and it says what it is. */
.dev-banner {
  background: var(--paper-deep);
  border-bottom: 1px dashed var(--rule);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--muted);
  padding: .5rem 0;
}
.dev-banner .shell { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   10. THE JOURNEY RAIL
   A session used to be a page with no idea where it sat in the course. The
   itinerary is supposed to be always visible, and it was visible on exactly
   one of the three pages. This is the ticket stub, carried into the session:
   stamps, the pips, the next stop, the minutes left, one link back.
   -------------------------------------------------------------------------- */

.session-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.session-body { min-width: 0; }

@media (min-width: 64em) {
  .session-layout {
    grid-template-columns: minmax(0, 1fr) 15.5rem;
    gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  }
  .session-layout > .journey { grid-column: 2; grid-row: 1; }
  .session-layout > .session-body { grid-column: 1; grid-row: 1; }
  .journey {
    position: sticky;
    /* Two pinned things, stacked, never overlapping: the masthead owns the
       top of the viewport and the rail starts below it. Derived from
       --masthead-h so the two cannot drift. */
    top: calc(var(--masthead-h) + 1.25rem);
  }
}

.journey {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px double var(--rule);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem 1.25rem;
  min-width: 0;
}
.journey__count {
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: block;
  margin: .1rem 0 0;
}
.journey__count .of { color: var(--muted); font-size: 1.1rem; }
.journey .ticket__rail { margin: .85rem 0 1rem; }
.journey dl {
  margin: 0;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: .7rem;
}
.journey dt {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .1rem;
}
.journey dd { margin: 0; font-size: .92rem; font-variant-numeric: tabular-nums; }
.journey__foot {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px dashed var(--rule);
  font-size: .82rem;
  color: var(--muted);
}
.journey__foot a { display: inline-block; margin-bottom: .35rem; }

/* On a narrow screen the rail is a strip, not a column: three facts across,
   nothing stacked into a tower the reader has to scroll past to start. */
@media (max-width: 63.99em) {
  .journey dl { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .7rem 1.5rem; }
}

/* --------------------------------------------------------------------------
   11. GLOSSARY TOOLTIPS
   Marker is a dotted underline in the text colour. A defined term is part of
   the sentence, not a call to attention, so it never takes the accent.
   Only the first occurrence of each term in a session is marked.
   -------------------------------------------------------------------------- */

.gloss-wrap { position: relative; }

.gloss {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: help;
  text-decoration: underline dotted currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  line-height: inherit;
  /* Keep the marked phrase on one line so the panel has a stable anchor. */
  white-space: nowrap;
}
.gloss:hover { text-decoration-style: solid; }
.gloss[aria-expanded="true"] { background: var(--stamp-soft); }

.gloss-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + .5rem);
  left: 0;
  width: max-content;
  max-width: min(22rem, calc(100vw - 2rem));
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--stamp);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .9rem 1rem 1rem;
  text-align: left;
  font-family: var(--sans);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink);
  white-space: normal;
  cursor: auto;
}
.gloss-panel[hidden] { display: none; }
.gloss-panel__theme {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: .25rem;
}
.gloss-panel__title {
  display: block;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 .45rem;
}
.gloss-panel__def { display: block; margin: 0 0 .7rem; }
.gloss-panel__more {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  display: block;
  padding-top: .6rem;
  border-top: 1px solid var(--rule);
}
.gloss-panel__src {
  display: block;
  margin-top: .45rem;
  font-size: .72rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   12. EXERCISE HELP
   Three layers, and the order is the whole point. Stuck opens a hint. The
   hint says what to check next, never what to answer. The solution lives one
   step further on, inside the hint, so nobody reaches it by accident at the
   first obstacle.
   -------------------------------------------------------------------------- */

.exercise {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  padding: clamp(1.1rem, .85rem + 1vw, 1.6rem);
  margin: 1.75rem 0;
}
.exercise__head {
  display: flex;
  align-items: baseline;
  gap: .6rem 1rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
}
.exercise__kicker {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.exercise__title {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
}
.exercise__takes {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.exercise > .prompt-block:first-of-type { margin-top: 0; }

.helpline {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--rule);
}
.helpline > * { flex: 0 1 auto; min-width: 0; }

.help { min-width: 0; }
.help > summary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  list-style: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: .84rem;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .34rem .85rem .34rem .7rem;
  white-space: nowrap;
  transition: border-color .14s ease, color .14s ease;
}
.help > summary::-webkit-details-marker { display: none; }
.help > summary::before {
  content: "";
  flex: none;
  width: .5rem; height: .5rem;
  border: 1px solid var(--muted);
  border-radius: 50%;
}
.help > summary:hover { border-color: var(--stamp); }
.help[open] > summary { border-color: var(--stamp); background: var(--stamp-soft); }
.help[open] > summary::before { background: var(--stamp); border-color: var(--stamp); }

.help__body {
  margin-top: .9rem;
  border-left: 2px solid var(--stamp);
  background: var(--paper-deep);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .95rem 1.1rem;
  font-size: .92rem;
}
.help__body > :last-child { margin-bottom: 0; }
.help__label {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: .5rem;
}

/* The solution, one step further on. It is nested inside the hint on
   purpose, and it is dashed so it reads as a door you have to open. */
.help--solution { margin-top: 1rem; }
.help--solution > summary {
  border-style: dashed;
  font-size: .82rem;
  color: var(--muted);
}
.help--solution > summary:hover { color: var(--ink); }
.help--solution .help__body {
  border-left-color: var(--rule);
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--rule);
}

/* "This part of the product does not exist yet." Neutral, dashed, honest. */
.notbuilt {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  background: var(--paper-deep);
  padding: .95rem 1.1rem;
  margin: 1.75rem 0 0;
}
.notbuilt p {
  margin: 0;
  font-size: .9rem;
  color: var(--muted);
  flex: 1 1 16rem;
  min-width: 0;
}

.help--none {
  margin-top: 1rem;
  font-size: .84rem;
  color: var(--muted);
  border-top: 1px dashed var(--rule);
  padding-top: .8rem;
}

/* Reflection questions the course asks you to keep. */
.keepthese {
  counter-reset: keep;
  list-style: none;
  margin: 0;
  padding: 0;
}
.keepthese li {
  counter-increment: keep;
  position: relative;
  padding: .55rem 0 .55rem 2.1rem;
  border-bottom: 1px solid var(--rule);
}
.keepthese li:last-child { border-bottom: 0; }
.keepthese li::before {
  content: counter(keep);
  position: absolute;
  left: 0; top: .62rem;
  width: 1.35rem; height: 1.35rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   13. THE FIRST-RUN TOUR
   Session 1 only, four steps, dismissible at any point, never shown twice.
   -------------------------------------------------------------------------- */

.tour-veil {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(31, 26, 22, .45);
}
:root[data-theme="dark"] .tour-veil { background: rgba(0, 0, 0, .6); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tour-veil { background: rgba(0, 0, 0, .6); }
}
.tour-veil[hidden] { display: none; }

/* Accent 3 of 3, borrowed for the length of the tour: the one thing being
   pointed at. Nothing else on the page is ember while the tour is open. */
.tour-target {
  position: relative;
  z-index: 41;
  outline: 2px dashed var(--ember);
  outline-offset: 6px;
  border-radius: var(--radius);
  background: var(--paper);
}

.tour-card {
  position: fixed;
  z-index: 42;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1.25rem;
  width: min(30rem, calc(100vw - 2rem));
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.35rem 1.15rem;
}
.tour-card[hidden] { display: none; }
.tour-card__step {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin: 0 0 .4rem;
}
.tour-card__title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 .5rem;
  line-height: 1.25;
}
.tour-card__body { font-size: .93rem; margin: 0 0 1.1rem; }
.tour-card__foot {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  padding-top: .95rem;
  border-top: 1px solid var(--rule);
}
.tour-card__dots { display: flex; gap: 5px; margin-right: auto; }
.tour-card__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid var(--rule);
}
.tour-card__dot[data-on="true"] { background: var(--stamp); border-color: var(--stamp); }

@media (min-width: 64em) {
  .tour-card { left: auto; right: 1.5rem; transform: none; bottom: 1.5rem; }
}

/* --------------------------------------------------------------------------
   14. THE HELP DESK
   On every page. For someone doing this course alone, knowing a person is on
   the other end is half the reason they do not stop at module 5, so it gets
   a card of its own rather than a line in the footer.
   -------------------------------------------------------------------------- */

.helpdesk {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 3.5rem 0 0;
  overflow: hidden;
}
@media (min-width: 52em) {
  .helpdesk { grid-template-columns: minmax(0, 1fr) 21rem; }
}

.helpdesk__say { padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); min-width: 0; }
.helpdesk__title { margin: 0 0 .5rem; }
.helpdesk__say p { font-size: .94rem; }
.helpdesk__say p:last-child { margin-bottom: 0; }

.helpdesk__clock {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .22rem .7rem;
  margin-bottom: .9rem;
}
.helpdesk__clock b {
  font-family: var(--serif);
  font-size: .95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* The stub, torn off the same ticket. */
.helpdesk__channels {
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  background: linear-gradient(180deg, var(--paper-deep), var(--card));
  border-top: 1px dashed var(--rule);
  min-width: 0;
}
@media (min-width: 52em) {
  .helpdesk__channels {
    border-top: 0;
    border-left: 1px dashed var(--rule);
    background: linear-gradient(90deg, var(--paper-deep), var(--card));
  }
}

.channel { margin: 0 0 1.35rem; }
.channel:last-of-type { margin-bottom: 0; }
.channel__what {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .4rem;
}

/* A settled value: monospace, a solid rule, ink. Both channels now use it,
   because both are real. It had a loud twin, .placeholder, for a value that
   did not exist yet, and the pair was designed so that the eye went straight
   to the missing one. There is no missing one left, so the twin is gone. */
.channel__value {
  display: block;
  font-family: var(--mono);
  font-size: .92rem;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .55rem .7rem;
  word-break: break-word;
  text-decoration-color: var(--rule);
  text-underline-offset: .18em;
}
.channel__value:hover { border-color: var(--ink); text-decoration-color: var(--ink); }

.channel__hint {
  margin: .4rem 0 0;
  font-size: .8rem;
  color: var(--muted);
}
.helpdesk__privacy {
  margin: 1.35rem 0 0;
  padding-top: .9rem;
  border-top: 1px dashed var(--rule);
  font-size: .78rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   15. THE COSTCTRL MARKS
   BRAND-USAGE section 1: CostCtrl appears where CostCtrl is genuinely the
   subject, which is module 8 and the thirty-day access, and nowhere else.
   The course is a Cost and Profitability product, it is positioned as
   agnostic about software, and a lockup in the page header would contradict
   that and narrow the market for no gain. So the header carries the CPa mark
   and this section carries everything else.

   Two pieces, and they do different jobs. The lockup is the branding
   statement for the module. The CostCtrl mark on its own names the software
   inside running prose, and per BRAND-USAGE section 5 it is never the only
   mark on the page: the masthead and the footer are CPa on every page it
   appears on.
   -------------------------------------------------------------------------- */

.poweredby {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin: 0 0 1.1rem;
  padding: .9rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
/* 56px, because this lockup is the stacked CPa mark plus "powered by
   CostCtrl" set horizontally in a 710 x 240 box. At the 30px I first gave it
   the CostCtrl wordmark was 14px wide and unreadable. At 56px the lockup is
   166px across and both halves can be read, which is the entire point of
   putting it here.

   The margin used to be a flat 56px, put there on the same wrong premise as
   the masthead padding: a cordon against the paragraph beside it, which is
   --muted and has never been an accent. It is now the guard token, applied
   only to the accent, and it is expressed in the mark's own terms rather
   than as a second hardcoded 56. The flat version was also a latent overflow
   at narrow widths, because max-width: 100% caps the image and the margin is
   added outside it. */
.poweredby img {
  --logo-h: 56px;
  height: var(--logo-h);
  width: auto;
  max-width: 100%;
  margin-inline-end: var(--logo-h);
}
.poweredby p {
  margin: 0;
  font-size: .84rem;
  color: var(--muted);
  flex: 1 1 14rem;
  min-width: 0;
}

/* The CostCtrl mark, inlined rather than linked. It is 5 KB, it scales
   without loss at any size, and having it in the markup is what lets the
   theme swap it through the same one switch as every other mark. Both
   finishes are the artwork as supplied: no recolouring, no filter, nothing
   inheriting currentColor. The only thing removed on the way in was the
   light variant's opaque white artboard rectangle, which would have printed
   a white block on warm paper.

   It carries its own accent, a crimson-to-orange gradient in the icon, so it
   keeps the same guard from --ember that the CPa mark does. */
.ctrl-mark {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin: .85rem 0 0;
  padding-top: .8rem;
  border-top: 1px dashed var(--rule);
}
.ctrl-mark svg {
  --logo-h: 22px;
  height: var(--logo-h);
  width: auto;
  flex: none;
  margin-inline-end: var(--logo-h);
}
.ctrl-mark span {
  font-size: .8rem;
  color: var(--muted);
  flex: 1 1 12rem;
  min-width: 0;
}

/* Footer brandmark, on a bigger scale. Redeclaring --logo-h here sizes the
   mark and its guard together, so 56px of mark takes 56px of guard without a
   second number to keep in step. */
.site-foot__brand {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.site-foot__brand .brandmark { --logo-h: 56px; }
.site-foot__brand p { margin: 0; flex: 1 1 18rem; min-width: 0; }

/* --------------------------------------------------------------------------
   16. MOTION
   -------------------------------------------------------------------------- */

/* The stamp landing is the one moment in this product that earns motion.
   It happens once, it lasts under half a second, and nothing else on any
   page animates beyond a 140ms colour change. */
@keyframes stamp-land {
  0%   { transform: scale(1.5) rotate(-24deg); opacity: 0; }
  55%  { transform: scale(.94) rotate(-6deg);  opacity: 1; }
  100% { transform: scale(1) rotate(-9deg);    opacity: 1; }
}
.stamp-result__seal svg { transform: rotate(-9deg); }
.stamp-result__seal[data-landed] svg {
  animation: stamp-land .42s cubic-bezier(.2, .9, .3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .stop[data-state="stamped"] .stamp-mark,
  .stamp-result__seal svg,
  .stamp-result__seal[data-landed] svg { transform: none !important; }
}

/* --------------------------------------------------------------------------
   17. PRINT
   -------------------------------------------------------------------------- */

@media print {
  .masthead, .theme-toggle, .dev-banner, .btn, .site-foot,
  .tour-veil, .tour-card, .helpline, .gloss-panel, .journey { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .stop, .module, .exercise, .helpdesk { break-inside: avoid; }
  /* The help desk prints. Somebody will print a session and get stuck away
     from the screen, and the two contact channels are the point of it. */
  .helpdesk { display: block !important; border: 1px solid #999; }
  .gloss { text-decoration: none; }
  .session-layout { display: block; }
}