/* 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-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);}
/* 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);}

/* ---------- enlarge: tap a chart or picture to see it full screen ---------- */
.primer-chart{position:relative;}
.primer-chart,.primer-photo{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;}
.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);} }