/* Primer: narrated story cards that swipe like a deck and flip for depth.
   Load after tokens.css and components.css. Every class here starts with "primer-", so nothing
   collides with a kit class (the kit's .card, .toast, .logo, .tag are different things).
   Ported from the learnbanking → Hay primer → Digital Twin engine; values are tokens only.

   Tones (data-tone on .primer-card): paper (default), orange (cover and big moments), dark
   (contrast and endings), plan (diagrams, with a drafting grid). Each tone sets the local
   --p-* values below; every piece reads those, so it works on every tone. */

body.primer{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;}
body.primer[data-tone=orange]{background:var(--orange);}
body.primer[data-tone=dark]{background:var(--ink);}
/* Resets sit inside :where() so they never outrank a primer- class. */
:where(.primer) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
:where(.primer) a{color:inherit;-webkit-tap-highlight-color:transparent;}

/* ---------- labels ---------- */
.primer-eyebrow,.primer-tag{font-family:var(--font-mono);font-size:var(--size-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;line-height:1.4;}

/* ---------- track and card tones ---------- */
.primer-track{height:100%;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;outline:none;}
.primer-track::-webkit-scrollbar{display:none;}
.primer-card{
  --p-bg:var(--paper);--p-fg:var(--ink);--p-soft:var(--ink-2);
  --p-mute:color-mix(in srgb,var(--ink) 72%,transparent);
  --p-rule:color-mix(in srgb,var(--ink) 18%,transparent);
  --p-rule-strong:color-mix(in srgb,var(--ink) 45%,transparent);
  --p-accent:var(--orange);--p-hl:color-mix(in srgb,var(--orange) 26%,transparent);
  --p-logo-letters:var(--ink);--p-logo-bar:var(--orange);
  flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;position:relative;clip-path:inset(0);
  padding:calc(var(--primer-head) + env(safe-area-inset-top)) 0 calc(var(--primer-foot) + env(safe-area-inset-bottom));
  background:var(--p-bg);color:var(--p-fg);
}
.primer-card[data-far]{content-visibility:hidden;}
.primer-card[data-tone=orange]{
  --p-bg:var(--orange);--p-soft:var(--ink);--p-mute:var(--ink); /* no faded text on orange: it drops below 4.5:1 */
  --p-rule:color-mix(in srgb,var(--ink) 28%,transparent);--p-rule-strong:color-mix(in srgb,var(--ink) 60%,transparent);
  --p-accent:var(--paper);--p-hl:color-mix(in srgb,var(--paper) 55%,transparent);--p-logo-bar:var(--ink);
}
.primer-card[data-tone=dark]{
  --p-bg:var(--ink);--p-fg:var(--paper);
  --p-soft:color-mix(in srgb,var(--paper) 82%,transparent);--p-mute:color-mix(in srgb,var(--paper) 66%,transparent);
  --p-rule:color-mix(in srgb,var(--paper) 16%,transparent);--p-rule-strong:color-mix(in srgb,var(--paper) 42%,transparent);
  --p-hl:color-mix(in srgb,var(--orange) 45%,transparent);--p-logo-letters:var(--paper);
}
/* Keyboard focus stays an orange outline, except on orange, where it turns ink so it can be seen. */
.primer-card[data-tone=orange] :focus-visible{outline-color:var(--ink);}

/* ---------- top bar (fixed; every card carries its own copy in its own tone) ---------- */
.primer-topbar{position:fixed;top:0;left:0;right:0;z-index:2;height:calc(var(--primer-head) + env(safe-area-inset-top));display:flex;align-items:center;gap:var(--space-3);padding:env(safe-area-inset-top) var(--primer-gutter) 0;background:var(--p-bg);border-bottom:var(--line-1) solid var(--p-rule);}
.primer-brand{display:block;line-height:0;}
.primer-logo{height:var(--d-26);width:auto;display:block;}
.primer-logo path{fill:var(--p-logo-letters);}
.primer-logo .logo-accent{fill:var(--p-logo-bar);}
.primer-brand-sep{width:var(--line-1);height:var(--d-24);background:var(--p-rule-strong);}
.primer-brand-label{font-family:var(--font-mono);font-size:var(--size-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--p-mute);white-space:nowrap;}
.primer-actions{margin-left:auto;display:flex;gap:var(--space-2);}
.primer-btn{font-family:var(--font-mono);font-size:var(--size-xs);letter-spacing:0.08em;text-transform:uppercase;padding:var(--space-2) var(--space-3);min-height:var(--d-36);border:var(--line-1) solid var(--p-rule-strong);color:var(--p-fg);display:inline-flex;align-items:center;gap:var(--space-2);transition:background var(--duration),color var(--duration),border-color var(--duration);}
.primer-btn:hover,.primer-btn[aria-pressed=true]{background:var(--p-fg);color:var(--p-bg);border-color:var(--p-fg);}

/* ---------- faces: front and back of one card ---------- */
.primer-inner{flex:1;min-height:0;position:relative;transform-style:preserve-3d;transform:perspective(var(--primer-perspective)) rotateY(0deg);transition:transform var(--duration-turn) var(--ease);}
.primer-card[data-flipped] .primer-inner{transform:perspective(var(--primer-perspective)) rotateY(180deg);}
.primer-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--p-bg);padding:var(--primer-pad-y) var(--primer-gutter);display:flex;flex-direction:column;cursor:pointer;overflow:hidden;}
.primer-face[data-face=back]{transform:rotateY(180deg);}
/* iOS Safari can ignore backface-visibility, so the hidden face is also switched off mid-turn. */
.primer-face[data-face=front],.primer-card[data-flipped] .primer-face[data-face=back]{visibility:visible;transition:visibility 0s 0.15s;}
.primer-face[data-face=back],.primer-card[data-flipped] .primer-face[data-face=front]{visibility:hidden;transition:visibility 0s 0.15s;}

.primer-meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);color:var(--p-mute);}
.primer-meta .primer-eyebrow{color:var(--p-fg);min-height:2.8em;}
.primer-meta .primer-tag{white-space:nowrap;}
@media (min-width:51.25em){ .primer-meta .primer-eyebrow{min-height:0;} }

.primer-layout{display:flex;flex-direction:column;flex:1;min-height:0;position:relative;}
.primer-copy{max-width:var(--primer-copy-width);position:relative;z-index:1;}
@media (min-width:51.25em){
  .primer-layout[data-split]{display:grid;grid-template-columns:1fr 1fr;gap:6vw;}
}

/* Front and back share kicker → title → body, so text sits in the same place on every card. */
.primer-kicker{max-width:100%;font-family:var(--font-display);font-weight:var(--weight-heavy);font-size:var(--primer-kicker);line-height:var(--leading-display);letter-spacing:var(--tracking-kicker);white-space:nowrap;margin:var(--primer-gap-kicker) 0 var(--primer-gap-title);}
.primer-kicker small{font-family:var(--font-mono);font-size:var(--size-xs);font-weight:var(--weight-regular);letter-spacing:var(--tracking-caps);margin-left:var(--space-2);vertical-align:0.9em;color:var(--p-mute);}
.primer-face[data-face=back] .primer-kicker{color:var(--p-mute);}
/* Long kickers (14 characters or more, e.g. a place name) are set smaller and may wrap, so they never run off the card. */
.primer-kicker[data-long]{white-space:normal;font-size:calc(var(--primer-kicker) * 0.6);line-height:1;}
.primer-title{font-family:var(--font-display);font-weight:var(--weight-heavy);font-size:var(--primer-title);line-height:0.95;letter-spacing:var(--tracking-title);max-width:var(--primer-title-width);margin:0 0 var(--primer-gap-body);text-wrap:balance;}
.primer-title em{font-style:normal;color:var(--p-accent);}
.primer-story,.primer-detail{font-size:var(--primer-body);line-height:1.55;max-width:var(--primer-measure);color:var(--p-soft);text-wrap:pretty;}

/* Cover: the first card. Small mono kicker, very large title. */
.primer-face[data-cover] .primer-kicker{font-family:var(--font-mono);font-size:var(--size-xs);font-weight:var(--weight-regular);letter-spacing:var(--tracking-caps);text-transform:uppercase;margin:var(--primer-gap-kicker) 0 var(--primer-gap-title);}
.primer-face[data-cover] .primer-kicker small{vertical-align:baseline;font-size:inherit;margin-left:var(--space-2);} /* the cover's kicker is a label: one baseline */
.primer-face[data-cover] .primer-title{font-size:var(--primer-cover);line-height:0.88;letter-spacing:var(--tracking-cover);max-width:none;}
.primer-face[data-cover] .primer-story{font-size:var(--primer-lede);color:var(--p-fg);max-width:var(--d-460);}
.primer-cover-strip{margin-top:auto;padding-top:var(--space-3);border-top:var(--line-1) solid var(--p-rule-strong);display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:var(--size-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;}
/* One hazard stripe per screen, at most. */
.primer-hazard{flex:1;height:var(--d-10);background:var(--primer-hazard);opacity:0.7;}

/* ---------- pictures ---------- */
.primer-photo{min-height:0;flex:1;margin:var(--primer-pad-y) calc(-1 * var(--primer-gutter)) calc(-1 * var(--primer-pad-y));position:relative;overflow:hidden;border-top:var(--line-1) solid var(--p-rule-strong);}
.primer-photo img{width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:grayscale(1) contrast(1.05);display:block;}
.primer-photo::after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,color-mix(in srgb,var(--ink) 90%,transparent));}
.primer-photo figcaption{position:absolute;bottom:var(--space-3);left:var(--primer-gutter);right:var(--primer-gutter);color:var(--paper);z-index:1;font-family:var(--font-mono);font-size:var(--size-xs);letter-spacing:0.06em;text-transform:uppercase;}
/* Product screenshots (BXS, GeoPulse) keep their color: in them, color carries meaning (BXI bubbles, map layers). */
.primer-photo[data-color] img{filter:none;}
.primer-photo[data-contain]{background:var(--paper);cursor:zoom-in;}
.primer-photo[data-contain] img{object-fit:contain;object-position:center;filter:none;mix-blend-mode:multiply;padding:var(--space-2) var(--space-2) var(--d-44);}
.primer-photo[data-contain]::after{display:none;}
.primer-photo[data-contain] figcaption{color:var(--ink);background:var(--paper);left:0;right:0;bottom:0;padding:var(--space-2) var(--primer-gutter);}
@media (min-width:51.25em){ .primer-layout[data-split] .primer-photo{margin:0 calc(-1 * var(--primer-gutter)) calc(-1 * var(--primer-pad-y)) 0;border-top:0;border-left:var(--line-1) solid var(--p-rule-strong);} }
/* On the cover the picture stops above the cover strip instead of running to the card's edge. */
.primer-face[data-cover] .primer-photo{margin-bottom:var(--space-3);}
/* Line drawings: ink strokes, faces filled with the card, one orange accent. */
.primer-hero{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin-top:var(--primer-gap-figure);}
svg.primer-hero{display:block;width:100%;height:auto;max-height:100%;overflow:visible;}
svg.primer-hero *{fill:none;stroke:var(--p-fg);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
svg.primer-hero .s{fill:var(--p-bg);}
svg.primer-hero .hl{fill:var(--p-accent);}
svg.primer-hero .thin{stroke-width:0.9;}
svg.primer-hero .dash{stroke-dasharray:4 4;}

/* ---------- back of the card ---------- */
.primer-takeaway{margin-top:var(--primer-gap-kicker);padding:var(--space-1) 0 var(--space-1) var(--space-4);border-left:var(--d-4) solid var(--p-accent);max-width:var(--d-560);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--primer-takeaway);line-height:var(--leading-tight);letter-spacing:-0.015em;}
.primer-card[data-tone=orange] .primer-takeaway{border-left-color:var(--ink);}
.primer-recap{list-style:none;margin:0;padding:0;max-width:var(--primer-measure);border-top:var(--line-1) solid var(--p-rule-strong);}
.primer-recap li{display:grid;grid-template-columns:var(--d-32) 1fr;gap:var(--space-2);padding:var(--space-2) 0;border-bottom:var(--line-1) solid var(--p-rule);font-size:calc(var(--primer-body) * 0.88);line-height:1.4;color:var(--p-soft);}
.primer-recap b{font-family:var(--font-mono);font-size:var(--size-xs);font-weight:var(--weight-regular);color:var(--p-mute);padding-top:0.2em;}
.primer-recap strong{color:var(--p-fg);font-weight:var(--weight-semi);}
@media (min-width:51.25em){ .primer-recap{column-count:2;column-gap:var(--space-7);max-width:var(--d-1200);} .primer-recap li{break-inside:avoid;} }

/* ---------- foot: previous, flip, next, and where you are ---------- */
.primer-foot{position:fixed;left:0;right:0;bottom:0;z-index:2;height:calc(var(--primer-foot) + env(safe-area-inset-bottom));padding:0 var(--primer-gutter) env(safe-area-inset-bottom);background:var(--p-bg);border-top:var(--line-1) solid var(--p-rule);display:flex;flex-direction:column;justify-content:center;gap:var(--space-2);}
.primer-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);}
.primer-nav button{font-family:var(--font-mono);font-size:var(--size-xs);font-weight:var(--weight-semi);letter-spacing:0.08em;text-transform:uppercase;min-height:var(--d-40);}
.primer-nav button:disabled{opacity:0.25;cursor:default;}
.primer-nav .primer-flip{font-weight:var(--weight-regular);color:var(--p-mute);border:var(--line-1) solid var(--p-rule-strong);padding:0 var(--space-3);}
.primer-nav .primer-flip[aria-pressed=true]{background:var(--p-fg);color:var(--p-bg);border-color:var(--p-fg);}
.primer-nav .primer-arrow{color:var(--p-accent);}
.primer-card[data-tone=orange] .primer-nav .primer-arrow{color:inherit;}
.primer-progress{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:var(--size-xs);letter-spacing:0.1em;text-transform:uppercase;color:var(--p-mute);}
.primer-progress>span{white-space:nowrap;}
.primer-rail{height:var(--d-6);flex:1;background:var(--p-rule);position:relative;overflow:hidden;}
.primer-rail span{position:absolute;inset:0 auto 0 0;background:var(--p-accent);}
.primer-card[data-tone=orange] .primer-rail span{background:var(--p-fg);}
.primer-rail i{position:absolute;top:0;bottom:0;width:var(--d-2);margin-left:calc(var(--d-1) * -1);background:var(--p-bg);}

/* ---------- chapter stacks: isometric plates drawn by the engine's art.js ---------- */
.primer-card[data-tone=plan]{--p-hl:color-mix(in srgb,var(--orange) 26%,transparent);}
.primer-stack-figure{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin:var(--primer-gap-figure) calc(-1 * var(--primer-gutter));padding:var(--primer-gap-figure) var(--primer-gutter);border-top:var(--line-1) solid var(--p-rule);border-bottom:var(--line-1) solid var(--p-rule);
  background-image:linear-gradient(color-mix(in srgb,var(--ink) 7%,transparent) var(--line-1),transparent var(--line-1)),linear-gradient(90deg,color-mix(in srgb,var(--ink) 7%,transparent) var(--line-1),transparent var(--line-1));background-size:var(--primer-grid) var(--primer-grid);background-position:center;}
svg.primer-stack{width:100%;height:100%;max-width:var(--d-560);overflow:visible;}
svg.primer-stack *{vector-effect:non-scaling-stroke;}
svg.primer-stack .guide{stroke:var(--p-rule-strong);stroke-width:1;stroke-dasharray:4 4;}
svg.primer-stack .layer{cursor:pointer;transition:transform 450ms var(--ease);}
svg.primer-stack .layer.lifted{transform:translateY(var(--lift));}
svg.primer-stack .top{fill:var(--p-bg);stroke:var(--p-fg);stroke-width:1.2;stroke-linejoin:round;transition:fill var(--duration);}
svg.primer-stack .side{fill:var(--paper-2);stroke:var(--p-fg);stroke-width:1.2;stroke-linejoin:round;}
svg.primer-stack .layer.on .top{fill:var(--p-hl);}
svg.primer-stack .motif *{fill:none;stroke:var(--p-fg);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;}
svg.primer-stack .motif .dash{stroke-dasharray:3 3;}
svg.primer-stack .motif .hl{fill:var(--p-hl);}
svg.primer-stack .layer.on .motif *{stroke-width:1.4;}
svg.primer-stack .leader{fill:none;stroke:var(--p-fg);stroke-width:1;}
svg.primer-stack text{font-family:var(--font-mono);font-size:var(--size-xs);letter-spacing:0.08em;text-transform:uppercase;fill:var(--p-fg);}
svg.primer-stack .num{fill:var(--p-mute);}
svg.primer-stack .layer.on text{fill:var(--p-fg);font-weight:var(--weight-bold);}
svg.primer-stack .layer.on .leader{stroke:var(--orange);stroke-width:3;}
svg.primer-stack .marker path,svg.primer-stack .marker ellipse{fill:var(--p-accent);stroke:var(--ink);stroke-width:1;stroke-linejoin:round;}
.primer-stack-caption{display:flex;align-items:flex-end;gap:var(--space-4);min-height:calc(var(--primer-body) * 5.2);}
.primer-stack-caption>div{flex:1;min-width:0;}
.primer-stack-caption .primer-eyebrow{display:block;color:var(--p-mute);margin-bottom:var(--space-1);}
.primer-stack-caption b{display:block;font-family:var(--font-display);font-weight:var(--weight-heavy);font-size:calc(var(--primer-body) * 1.3);letter-spacing:-0.02em;line-height:1.1;}
.primer-stack-caption p{font-size:var(--primer-body);line-height:1.45;color:var(--p-soft);margin-top:var(--space-1);}
.primer-steps{display:flex;gap:var(--space-2);}
.primer-steps button{width:var(--d-40);height:var(--d-40);border:var(--line-1) solid var(--p-rule-strong);font-family:var(--font-mono);background:var(--p-bg);}
.primer-steps button:hover:not(:disabled){background:var(--p-fg);color:var(--p-bg);}
.primer-steps button:disabled{opacity:0.3;cursor:default;}

/* Quick check (a quiz on the stack) and trace (an automatic walk through it). */
.primer-figure-actions{position:absolute;bottom:var(--space-2);right:var(--primer-gutter);display:flex;gap:var(--space-2);}
.primer-figure-actions button{display:flex;align-items:center;gap:var(--space-2);min-height:var(--d-34);padding:0 var(--space-3) 0 var(--space-1);background:var(--p-bg);border:var(--line-1) solid var(--orange);color:var(--p-fg);font-family:var(--font-mono);font-size:var(--size-xs);font-weight:var(--weight-semi);letter-spacing:0.08em;text-transform:uppercase;}
.primer-figure-actions button b{display:grid;place-items:center;width:var(--d-24);height:var(--d-24);border-radius:var(--round);background:var(--orange);color:var(--ink);font-family:var(--font-display);font-weight:var(--weight-heavy);}
.primer-figure-actions button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* ---------- numbers and charts on a card (new with the BXS primer) ---------- */
/* One big number with a mono label under it: the headline of a data card. */
.primer-stat{display:flex;flex-direction:column;gap:var(--space-1);}
.primer-stat strong{font-family:var(--font-display);font-weight:var(--weight-heavy);font-size:var(--primer-stat);line-height:var(--leading-display);letter-spacing:var(--tracking-kicker);font-variant-numeric:tabular-nums;}
.primer-stat span{font-family:var(--font-mono);font-size:var(--size-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--p-mute);}
.primer-stats{display:flex;flex-wrap:wrap;gap:var(--space-5) var(--space-7);margin-top:var(--primer-gap-body);}
/* A chart that fills the space under the copy. Lines and marks use the card's ink;
   the one thing the narration points at uses the accent. Every mark also has a label. */
.primer-chart{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;margin-top:var(--primer-gap-figure);}
.primer-chart svg{width:100%;height:100%;max-height:100%;overflow:visible;}
.primer-chart text{font-family:var(--font-mono);font-size:var(--size-xs);letter-spacing:0.06em;fill:var(--p-mute);}
.primer-chart .axis{stroke:var(--p-rule-strong);stroke-width:var(--line-1);}
.primer-chart .grid{stroke:var(--p-rule);stroke-width:var(--line-1);}
.primer-chart .mark{fill:var(--p-fg);}
.primer-chart .mark-open{fill:var(--p-bg);stroke:var(--p-fg);stroke-width:var(--line-2);}
.primer-chart .line{fill:none;stroke:var(--p-fg);stroke-width:var(--line-2);}
.primer-chart .line-quiet{fill:none;stroke:var(--p-rule-strong);stroke-width:var(--line-2);stroke-dasharray:4 4;}
.primer-chart .focus{fill:var(--p-accent);stroke:var(--p-fg);stroke-width:var(--line-1);}
.primer-chart .focus-line{fill:none;stroke:var(--p-accent);stroke-width:var(--line-3);}
.primer-chart .label{fill:var(--p-fg);font-weight:var(--weight-semi);}
.primer-chart .band{fill:var(--p-hl);}
.primer-chart .spread{fill:var(--p-fg);fill-opacity:0.14;stroke:none;} /* where most runs fell (a percentile band) */
.primer-chart .dot-solid{fill:var(--p-fg);stroke:var(--p-bg);stroke-width:var(--line-2);}
/* Dense story charts (circles are .bubble: the kit already has a .dot, the status dot) (many circles that rearrange by step, in the manner of the NYT's 2013 "corporate taxes"
   graphic): hairline circles, dotted row guides, a firm average line, grey notes with thin leaders. */
.primer-chart .bubble{fill:var(--paper-2);stroke:var(--p-fg);stroke-width:0.5;}
.primer-chart .bubble-filled{fill:var(--p-fg);stroke:var(--p-bg);stroke-width:0.5;}

.primer-chart .bubble-active{stroke-width:2;}
/* Six value bands for filled circles (worst → best): red tints, paper at the middle, blue tints.
   Red and blue pass the colour-blind check together; every band also has a key, so colour is never alone. */
.primer-chart .band-0{fill:color-mix(in srgb,var(--red) 85%,var(--paper));}
.primer-chart .band-1{fill:color-mix(in srgb,var(--red) 55%,var(--paper));}
.primer-chart .band-2{fill:color-mix(in srgb,var(--red) 22%,var(--paper));}
.primer-chart .band-3{fill:color-mix(in srgb,var(--blue) 22%,var(--paper));}
.primer-chart .band-4{fill:color-mix(in srgb,var(--blue) 55%,var(--paper));}
.primer-chart .band-5{fill:color-mix(in srgb,var(--blue) 85%,var(--paper));}
.primer-chart .bubble.bubble-focus{fill:var(--orange);stroke:var(--p-fg);stroke-width:0.5;} /* after the bands, so a focus wins over a band fill */
.primer-chart .bubble-rescued{stroke:var(--orange);stroke-width:2;}
.primer-chart .bubble-hero{stroke:var(--p-fg);stroke-width:3;}
.primer-chart .guide{stroke:var(--p-rule-strong);stroke-width:1;stroke-dasharray:1 1;fill:none;}
.primer-chart .tick-line{stroke:var(--p-fg);stroke-width:1;shape-rendering:crispEdges;}
.primer-chart .average{stroke:var(--p-fg);stroke-width:2;}
.primer-chart .leader{stroke:var(--p-rule-strong);stroke-width:1;fill:none;}
.primer-chart .row-label{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-sm);letter-spacing:0;fill:var(--p-fg);}
.primer-chart .axis-title{font-weight:var(--weight-bold);fill:var(--p-fg);}
.primer-chart .note{fill:var(--p-mute);font-family:var(--font-body);letter-spacing:0;}
/* Labels that sit over circles get a halo in the card's colour, so they stay readable. */
.primer-chart .note,.primer-chart .row-label,.primer-chart .axis-title{paint-order:stroke;stroke:var(--p-bg);stroke-width:3;stroke-linejoin:round;}
/* Dense charts are read from across a room: larger text than ordinary charts. */
.primer-chart svg.dense text{font-size:var(--size-sm);}
.primer-chart svg.dense .row-label{font-size:var(--size-base);}
.primer-chart .note-strong{fill:var(--p-fg);font-weight:var(--weight-bold);}
.primer-chart .tip rect{fill:var(--p-bg);stroke:var(--p-rule-strong);}
.primer-chart .tip line{stroke:var(--p-rule);}
.primer-chart .tip text{fill:var(--p-fg);font-family:var(--font-body);letter-spacing:0;}
/* A row of stops to scrub through (time spans, steps). Square: it changes what the card shows. */
.primer-dial{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--primer-gap-body);}
.primer-dial button{font-family:var(--font-mono);font-size:var(--size-xs);letter-spacing:0.08em;text-transform:uppercase;min-height:var(--d-36);padding:0 var(--space-3);border:var(--line-1) solid var(--p-rule-strong);}
.primer-dial button[aria-pressed=true]{background:var(--p-fg);color:var(--p-bg);border-color:var(--p-fg);box-shadow:inset 0 calc(var(--line-3) * -1) 0 var(--orange);}

/* ---------- narration: listen button, captions, and the self-running loop ---------- */
.primer-listen .primer-i-pause,body[data-narrating] .primer-listen .primer-i-play{display:none;}
body[data-narrating] .primer-listen .primer-i-pause{display:inline;animation:primer-speaking 1.2s ease-in-out infinite;}
body[data-narrating] .primer-listen{background:var(--p-fg);color:var(--p-bg);border-color:var(--p-fg);}
@keyframes primer-speaking{50%{opacity:0.35;}}
/* Captions: what the narrator is saying, over the foot. Always on in a loud room. */
.primer-captions{position:fixed;left:var(--primer-gutter);right:var(--primer-gutter);bottom:calc(var(--primer-foot) + env(safe-area-inset-bottom) + var(--space-3));z-index:3;display:flex;justify-content:center;pointer-events:none;}
.primer-captions p{max-width:var(--primer-copy-width);background:var(--ink);color:var(--paper);font-size:var(--primer-caption);line-height:1.35;padding:var(--space-2) var(--space-4);text-align:center;text-wrap:balance;}
.primer-captions:empty,.primer-captions[hidden]{display:none;}
/* Self-running loop for a booth screen: a thin bar shows time left on this card, and a
   prompt invites people to take over. Any touch or key hands control back. */
.primer-autoplay{position:fixed;left:0;right:0;top:calc(var(--primer-head) + env(safe-area-inset-top));z-index:3;height:var(--d-3);background:transparent;}
.primer-autoplay span{display:block;height:100%;background:var(--orange);width:var(--p-progress,0%);}
.primer-takeover{position:fixed;right:var(--primer-gutter);top:calc(var(--primer-head) + env(safe-area-inset-top) + var(--space-3));z-index:3;background:var(--orange);color:var(--ink);font-family:var(--font-mono);font-size:var(--size-xs);font-weight:var(--weight-semi);letter-spacing:var(--tracking-caps);text-transform:uppercase;padding:var(--space-2) var(--space-3);}

/* ---------- lead form on a card (kit form pieces inside) ---------- */
.primer-lead{align-self:center;width:100%;max-width:var(--d-460);margin-top:var(--primer-gap-figure);}
.primer-card[data-tone=dark] .primer-lead,.primer-card[data-tone=orange] .primer-lead{background:var(--paper);color:var(--ink);padding:var(--space-5);}
/* A field only bots fill in. Kept off screen, not display:none, so bots still see it. */
.primer-honeypot{position:absolute;left:-100vw;width:var(--d-1);height:var(--d-1);opacity:0;}

/* ---------- take-away code: a full-screen QR that opens the primer on a phone ---------- */
.primer-qr{position:fixed;inset:0;z-index:5;display:grid;place-items:center;padding:var(--space-5);background:color-mix(in srgb,var(--ink) 72%,transparent);cursor:pointer;}
.primer-qr[hidden]{display:none;}
.primer-qr-panel{background:var(--paper);color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-6);max-width:var(--d-720);text-align:center;}
.primer-qr-panel .primer-title{margin:0;}
.primer-qr-panel .primer-story{color:var(--ink-2);}
.primer-qr-code{width:min(52vh,72vw,var(--d-460));aspect-ratio:1;}
.primer-qr-code svg{display:block;width:100%;height:100%;}
.primer-qr-code svg rect{fill:var(--paper);}
.primer-qr-code svg path{fill:var(--ink);}
.primer-qr-url{font-family:var(--font-mono);font-size:var(--primer-takeaway);font-weight:var(--weight-semi);letter-spacing:0.02em;border-bottom:var(--line-3) solid var(--orange);}

/* ---------- a card taller than the screen scrolls on its own (forms on phones); swiping between cards still works ---------- */
.primer-face[data-scroll]{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.primer-face[data-scroll] .primer-layout{flex:none;}

/* ---------- exhibit: a product screenshot shown whole and framed, caption below, like a plate in a gallery ---------- */
.primer-photo[data-exhibit]{flex:none;margin:var(--primer-gap-figure) 0 0;border:var(--line-1) solid var(--p-rule-strong);background:var(--paper-2);padding:var(--space-2);display:flex;flex-direction:column;gap:var(--space-2);overflow:visible;cursor:default;max-width:var(--d-720);}
.primer-photo[data-exhibit] img{height:auto;max-height:min(46vh,var(--d-460));object-fit:contain;filter:none;}
.primer-photo[data-exhibit]::after{display:none;}
.primer-photo[data-exhibit] figcaption{position:static;color:var(--ink-2);}
@media (min-width:51.25em){ .primer-layout[data-split] .primer-photo[data-exhibit]{margin:0;border-left:var(--line-1) solid var(--p-rule-strong);align-self:center;} }

/* ---------- enlarge: tap a chart or picture to see it full screen ---------- */
.primer-chart{position:relative;}
.primer-chart,.primer-photo[data-contain]{cursor:zoom-in;}
.primer-zoom{position:absolute;top:0;right:0;font-family:var(--font-mono);font-size:var(--size-xs);letter-spacing:0.08em;text-transform:uppercase;padding:var(--space-1) var(--space-2);border:var(--line-1) solid var(--p-rule-strong);background:var(--p-bg);color:var(--p-fg);}
.primer-zoom:hover{background:var(--p-fg);color:var(--p-bg);}
.primer-dialog.primer-lightbox{width:min(96vw,var(--d-1200));height:min(92dvh,var(--d-720));padding:var(--space-4);position:relative;}
.primer-dialog.primer-lightbox[open]{display:flex;}
.primer-lightbox figure{margin:0;flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:var(--space-2);}
.primer-lightbox-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;}
.primer-lightbox-body img{max-width:100%;max-height:100%;object-fit:contain;}
/* A chart moved into the enlarged view: the drawing takes the space, its dial stays below it, clear of the caption. */
.primer-lightbox-body .primer-chart{display:flex;flex-direction:column;gap:var(--space-2);}
.primer-lightbox-body .primer-chart > svg,.primer-lightbox-body .primer-chart .tm-plot{flex:1 1 auto;min-height:0;height:auto;}
.primer-lightbox-body .primer-chart .primer-dial{flex:none;margin-top:0;}
.primer-lightbox-body .primer-zoom{display:none;}
.primer-lightbox-body .primer-chart{--p-bg:var(--paper);--p-fg:var(--ink);--p-soft:var(--ink-2);--p-mute:color-mix(in srgb,var(--ink) 72%,transparent);--p-rule:color-mix(in srgb,var(--ink) 18%,transparent);--p-rule-strong:color-mix(in srgb,var(--ink) 45%,transparent);--p-accent:var(--orange);--p-hl:color-mix(in srgb,var(--orange) 26%,transparent);width:100%;height:100%;margin:0;cursor:default;}
.primer-lightbox .primer-dialog-close{position:absolute;top:var(--space-2);right:var(--space-2);z-index:1;background:var(--paper);}


/* ---------- dialogs: chapters and sources ---------- */
.primer-dialog{color:var(--ink);background:var(--paper);width:min(var(--primer-dialog-width),calc(100% - var(--space-6)));max-width:none;height:min(var(--primer-dialog-height),92dvh);max-height:92dvh;border:var(--line-1) solid var(--ink);margin:auto;padding:0;overflow:hidden;flex-direction:column;}
.primer-dialog[open]{display:flex;}
.primer-dialog::backdrop{background:color-mix(in srgb,var(--ink) 62%,transparent);}
.primer-dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3);padding:var(--space-5) var(--space-6) var(--space-4);border-bottom:var(--line-1) solid color-mix(in srgb,var(--ink) 45%,transparent);flex-shrink:0;}
.primer-dialog-head .primer-eyebrow{color:color-mix(in srgb,var(--ink) 72%,transparent);display:block;margin-bottom:var(--space-2);}
.primer-dialog-head h2{font-family:var(--font-display);font-weight:var(--weight-heavy);font-size:var(--size-2xl);line-height:1;letter-spacing:-0.02em;}
.primer-dialog-close{width:var(--d-32);height:var(--d-32);border:var(--line-1) solid color-mix(in srgb,var(--ink) 45%,transparent);font-family:var(--font-mono);color:var(--ink-2);flex-shrink:0;}
.primer-dialog-close:hover{border-color:var(--ink);color:var(--ink);}
.primer-dialog-body{flex:1;min-height:0;overflow-y:auto;padding:0 var(--space-6);}
.primer-chapters{display:grid;align-content:start;}
.primer-chapters button{display:grid;grid-template-columns:var(--d-40) 1fr auto;gap:var(--space-3);align-items:baseline;text-align:left;padding:var(--space-3) 0;border-bottom:var(--line-1) solid color-mix(in srgb,var(--ink) 18%,transparent);position:relative;}
.primer-chapters button:hover{background:var(--paper-2);}
.primer-chapters b{font-family:var(--font-mono);font-size:var(--size-xs);font-weight:var(--weight-regular);color:color-mix(in srgb,var(--ink) 72%,transparent);}
.primer-chapters span{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-lg);line-height:1.15;}
.primer-chapters i{font-style:normal;font-family:var(--font-mono);font-size:var(--size-xs);text-transform:uppercase;color:color-mix(in srgb,var(--ink) 72%,transparent);white-space:nowrap;}
/* The chapter you are in carries the kit's chosen bar: orange, at its left edge. */
.primer-chapters button[aria-current]::before{content:'';position:absolute;left:calc(var(--space-6) * -1);top:0;bottom:0;width:var(--d-4);background:var(--orange);}
.primer-sources a{display:block;padding:var(--space-4) 0;border-bottom:var(--line-1) solid color-mix(in srgb,var(--ink) 18%,transparent);color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:var(--line-2);text-underline-offset:var(--d-5);font-family:var(--font-mono);font-size:var(--size-sm);font-weight:var(--weight-semi);text-transform:uppercase;}
.primer-sources a:hover{text-decoration-color:var(--ink);}
.primer-pager{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-6);background:var(--paper-2);border-top:var(--line-1) solid color-mix(in srgb,var(--ink) 45%,transparent);flex-shrink:0;font-family:var(--font-mono);font-size:var(--size-xs);text-transform:uppercase;}
.primer-pager button{min-height:var(--d-40);font-weight:var(--weight-semi);}
.primer-pager button:disabled{opacity:0.3;cursor:default;}

/* ---------- phones and short screens ---------- */
@media (max-width:51.25em){
  .primer-brand-label,.primer-brand-sep,.primer-listen .primer-listen-label{display:none;}
  .primer-logo{height:var(--d-24);}
  .primer-actions{gap:var(--space-1);}
  .primer-btn{padding:var(--space-1) var(--space-2);letter-spacing:0.04em;}
  .primer-dialog{width:100%;margin:auto 0 0;border-width:var(--line-1) 0 0;}
  .primer-dialog-head{padding:var(--space-4) var(--space-5);}
  .primer-dialog-body{padding:0 var(--space-5);}
  .primer-chapters button{grid-template-columns:var(--d-34) 1fr;}
  .primer-chapters i{display:none;}
  .primer-chapters button[aria-current]::before{left:calc(var(--space-5) * -1);}
}
@media (max-height:35em){ .primer-photo{display:none;} }
@media (max-height:30em){
  .primer-meta,.primer-progress,.primer-cover-strip{display:none;}
  .primer-takeaway{margin-top:0;}
}
@media (prefers-reduced-motion:reduce){
  .primer *,.primer *::before,.primer *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important;}
}

/* ---------- reference page only: show a card's pieces inline, without the fixed chrome ---------- */
.primer-card[data-specimen]{height:auto;flex:none;padding:var(--space-5);clip-path:none;gap:var(--space-3);}
.primer-card[data-specimen] .primer-kicker,.primer-card[data-specimen] .primer-title{margin:0;}
.primer-card[data-specimen] .primer-captions,.primer-card[data-specimen] .primer-foot{position:static;}

/* Phones: the enlarged view fills the screen (after the dialog rules above, so it wins). */
@media (max-width:51.25em){ .primer-dialog.primer-lightbox{width:100vw;height:100dvh;max-height:none;margin:0;border:0;padding:var(--space-4) var(--space-3);} }

/* ---------- spacing fixes from the overlap audit (docs/QA-overlaps.md in BXS - Timemachine) ---------- */
/* Room above every chart for its Enlarge button, so the button never sits on a label. */
.primer-chart{padding-top:var(--d-34);}
.primer-lightbox-body .primer-chart{padding-top:0;}
/* The cover keeps its picture modest and lets the face scroll, so the cover strip is never covered. */
.primer-face[data-cover] .primer-layout{flex:none;}
.primer-face[data-cover] .primer-photo[data-exhibit] img{max-height:min(30vh,var(--d-300));}
/* A stack with Quick check or Follow buttons leaves room under the drawing for them. */
.primer-stack-figure:has(.primer-figure-actions){padding-bottom:var(--d-44);}
/* Toasts (such as "Welcome back") sit above the card's foot, not on its buttons. */
.primer .toasts{bottom:calc(var(--primer-foot) + var(--space-3));}

/* Phones held upright (narrower than 600px): the chart is the hero of a data card. It gets real height (the
   card scrolls if it must), runs closer to the card's edges, and the engine draws each chart's phone layout
   (window.primerNarrow), so its text is full size rather than a shrunken desktop drawing. Big numbers sit
   side by side to leave the chart room. */
@media (max-width:37.5em){
  .primer-face .primer-chart{min-height:var(--primer-chart-phone);margin-left:calc(var(--primer-gutter) * -0.5);margin-right:calc(var(--primer-gutter) * -0.5);}
  .primer-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);}
  .primer-stat strong{font-size:var(--primer-stat-phone);}
  .primer-chart text{font-size:var(--size-sm);}
  /* Layer cards: the stack gets real height, and the arrows move up beside the "Layer 1 of 6" line,
     so the layer's words use the full width instead of a squeezed column. */
  .primer-stack-figure{min-height:var(--primer-stack-phone);}
  .primer-stack-caption{display:block;position:relative;min-height:0;}
  .primer-stack-caption .primer-eyebrow{padding-right:calc(var(--d-34) * 2 + var(--space-4));min-height:var(--d-34);display:flex;align-items:center;}
  .primer-steps{position:absolute;top:0;right:0;}
  .primer-steps button{width:var(--d-34);height:var(--d-34);}
}
/* The booking form's foot: the send button, then the quiet extras (QR code, a product link) beside it. */
.primer-lead .form-foot{justify-content:flex-start;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5);}
/* The booking confirmation: the primer's own type, an orange bar for "this is done, here, now", next steps. */
.primer-lead-done{display:flex;flex-direction:column;gap:var(--space-3);border-left:var(--d-4) solid var(--orange);padding:var(--space-4) 0 var(--space-4) var(--space-5);}
.primer-lead-done:focus{outline:none;}
.primer-done-title{font-family:var(--font-display);font-weight:var(--weight-heavy);font-size:calc(var(--primer-title) * 0.85);line-height:var(--leading-display);letter-spacing:var(--tracking-title);margin:0;}
.primer-done-title em{font-style:normal;color:var(--p-accent);}
.primer-done-text{font-size:var(--primer-body);line-height:1.45;color:var(--p-soft);margin:0;}
.primer-done-steps{margin:0;padding:0;list-style:none;counter-reset:step;display:flex;flex-direction:column;gap:var(--space-2);border-top:var(--line-1) solid var(--p-rule);padding-top:var(--space-3);}
.primer-done-steps li{counter-increment:step;display:grid;grid-template-columns:var(--d-34) minmax(0,1fr);align-items:baseline;font-size:var(--primer-body);line-height:1.4;}
.primer-done-steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--font-mono);font-size:var(--size-xs);letter-spacing:var(--tracking-caps);color:var(--p-mute);}
/* Chapters panel foot: share the story (QR code full screen, or the phone's share sheet). */
.primer-dialog-foot{border-top:var(--line-1) solid var(--line);padding:var(--space-4) var(--space-6) var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);}
.primer-share-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;}
@media (max-width:51.25em){ .primer-dialog-foot{padding:var(--space-4) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));} }
/* A cover photograph (not an exhibit) sits centred on the headline block, clear of the meta line. */
@media (min-width:51.25em){ .primer-face[data-cover] .primer-layout[data-split] .primer-photo:not([data-exhibit]){align-self:center;margin-top:0;margin-bottom:0;max-height:min(62vh,var(--d-560));} }

/* ---------- Game cards (TEN): one control, a live readout, a goal, and a verdict ---------- */
.primer-game{display:flex;flex-direction:column;gap:var(--space-3);}
.primer-game svg{width:100%;height:auto;overflow:visible;}
.primer-game-readout{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;}
.primer-game-readout strong{font-family:var(--font-display);font-weight:var(--weight-heavy);font-size:calc(var(--primer-stat) * 0.7);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-kicker);}
.primer-game-readout span{font-family:var(--font-mono);font-size:var(--size-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--p-mute);}
.primer-game-control{display:flex;align-items:center;gap:var(--space-3);}
.primer-game-control label{font-family:var(--font-mono);font-size:var(--size-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--p-mute);white-space:nowrap;}
.primer-game input[type=range]{flex:1;min-width:0;accent-color:var(--orange);height:var(--d-44);cursor:pointer;}
.primer-game-choices{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.primer-game-choices button,.primer-game-go{min-height:var(--d-44);padding:0 var(--space-4);border:var(--line-1) solid var(--p-fg);background:var(--p-bg);color:var(--p-fg);font-family:var(--font-mono);font-size:var(--size-xs);font-weight:var(--weight-semi);letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;}
.primer-game-choices button[aria-pressed=true]{background:var(--p-fg);color:var(--p-bg);box-shadow:inset 0 calc(var(--d-4) * -1) 0 var(--orange);}
.primer-game-go{border-color:var(--orange);box-shadow:inset var(--d-4) 0 0 var(--orange);}
.primer-game-verdict{min-height:calc(var(--size-base) * 2.6);font-size:var(--primer-body);line-height:1.35;color:var(--p-fg);}
.primer-game-verdict[data-tone=win]{border-left:var(--d-4) solid var(--orange);padding-left:var(--space-3);}
.primer-game-verdict[data-tone=miss]{border-left:var(--d-4) solid var(--p-rule-strong);padding-left:var(--space-3);}
.primer-chart .target{stroke:var(--orange);stroke-width:var(--line-2);stroke-dasharray:6 4;}
.primer-chart .zone{fill:var(--p-fg);fill-opacity:0.06;} /* the safe range: a quiet tint, never orange */
.primer-chart .dot-game{fill:var(--orange);stroke:var(--p-fg);stroke-width:var(--line-2);}
.primer-chart .coin{fill:var(--p-fg);}
.primer-chart .coin-lost{fill:none;stroke:var(--p-fg);stroke-width:var(--line-1);stroke-dasharray:2 2;}

/* Games stay inside the margins on a phone (thumbs need the edges clear), and the gaps tighten so the control fits. */
@media (max-width:37.5em){
  .primer-face .primer-chart[data-game]{margin-left:0;margin-right:0;min-height:0;padding-top:var(--space-3);}
  .primer-game{gap:var(--space-2);}
  .primer-game-verdict{font-size:var(--size-base);}
  .primer-game-readout strong{font-size:calc(var(--primer-stat) * 0.55);}
  .primer-game-choices{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);}
  .primer-game-choices button{padding-left:var(--space-2);padding-right:var(--space-2);}
}
.primer-game-control .primer-game-go{flex:none;width:auto;padding-left:var(--space-4);padding-right:var(--space-4);}
/* A quiz inside a game card: each question is its own ruled block. */
.primer-game-q{display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-3);border-top:var(--line-1) solid var(--p-rule);}
.primer-game-q p{margin:0;font-size:var(--primer-body);line-height:1.35;color:var(--p-fg);}