/* Security overview (/security), on top of pages.css. The figures follow the Leadway Connect whitepaper
   (docs/whitepaper/web/style.css): each holds a 2D diagram (inline SVG) and, when WebGL works, a 3D model
   (js/security.js). html[data-figs="3d"|"2d"] picks one; without script and in print the diagram shows.
   Leadway's stage palette is mapped onto the Oikos tokens here; js/security.js reads the --st-* values. */
:root{
  /* the stage: the page's own tint, sky at the top left through --bg to a hint of lilac (as the home hero and .places cards) */
  --st-bg: radial-gradient(90% 120% at 0% 0%, oklch(0.95 0.035 235), transparent 65%), radial-gradient(90% 120% at 100% 100%, oklch(0.95 0.03 300), transparent 65%), var(--bg);
  --st-veil: oklch(0.997 0.002 265 / 85%);
  --st-ink: var(--ink); --st-muted: var(--muted); --st-hair: var(--line); --st-line: oklch(0.78 0.03 250);
  /* Leadway's colour roles on Oikos colours */
  --st-glow: var(--mark); --st-brand: var(--primary); --st-deep: var(--deep); --st-paper: var(--card);
  --st-box: oklch(0.985 0.006 235); --st-box2: var(--sky);
  --st-metal: oklch(0.86 0.03 250); --st-safe: oklch(0.84 0.06 var(--ph)); --st-safe-door: oklch(0.74 0.1 var(--ph)); --st-dead: oklch(0.74 0.01 250);
  --st-glass: var(--sky); --st-cloud: var(--sky); --st-person: var(--lilac);
  --st-ok: oklch(0.62 0.12 165); --st-no: var(--rose-i);
  --st-you: var(--lilac); --st-other: oklch(0.82 0.08 165); --st-third: oklch(0.85 0.08 55);
  --st-warn: var(--butter-w); --st-sky: oklch(0.99 0.01 235); --st-ground: oklch(0.8 0.05 250);
}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* hero: headline and key facts on the left, the document's way on the right (as Leadway's hero) */
.sec header.shero{max-width:none; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:48px; align-items:center}
.sec header.shero h1{font-size:clamp(40px,4.4vw,62px)}
.proof{list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:22px 32px}   /* the home page's numbers (.tnums): serif, primary */
.proof li{display:grid; gap:6px; align-content:start}
.proof b{font-family:var(--serif); font-weight:400; font-size:clamp(34px,3.4vw,46px); line-height:1; letter-spacing:-0.01em; color:var(--primary); font-variant-numeric:tabular-nums}
.proof b .ph{padding:0 6px; border-radius:6px; font:inherit; color:inherit}   /* same type as the other facts; yellow only behind it */
.proof span{font-size:14px; line-height:1.4; color:var(--muted)}
.hero-fig{margin:0}
:root[data-figs="3d"] .fig.hero-fig.live{aspect-ratio:16 / 9.5}
@media (max-width:860px){ .sec header.shero{grid-template-columns:minmax(0,1fr); gap:28px} }

.fig{position:relative; width:100%; margin:4px 0 22px; border-radius:14px; overflow:hidden; background:var(--st-bg); box-shadow:inset 0 0 0 1px var(--line); color:var(--st-ink)}
.fig > .fb{display:block; width:100%; height:auto; padding:56px 16px 16px}
.fig > .fb-n{display:none}
/* a diagram with the AI legend: the legend sits on the switcher's line, the diagram starts below it */
.fig > .fb.lg{padding-top:12px}
/* the caption is the figure's name for screen readers; the page text around it says the rest */
.fig > figcaption{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* 3D parts stay hidden unless the 3D view is on */
.fig > canvas, .fig > .stage-labels, .fig > .stage-steps, .fig > .stage-ctl{display:none}
:root[data-figs="3d"] .fig.live{aspect-ratio:16 / 10; min-height:320px}
:root[data-figs="3d"] .fig.live > .fb{display:none}
:root[data-figs="3d"] .fig.live > canvas{display:block; position:absolute; inset:0; width:100%; height:100%}
:root[data-figs="3d"] .fig.live > .stage-labels{display:block}
:root[data-figs="3d"] .fig.live > .stage-steps{display:flex}
:root[data-figs="3d"] .fig.live > .stage-ctl{display:flex}
/* while the 3D view shows, the narration carries the caption; it stays for screen readers */
:root[data-figs="3d"] .fig.live > figcaption{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; padding:0}

/* 3D / 2D: one pill with two segments, top right of each figure */
.figview{position:absolute; top:12px; right:12px; z-index:3; display:inline-flex; gap:2px; padding:2px; border-radius:999px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line)}
.figview button{appearance:none; -webkit-appearance:none; border:0; margin:0; font:inherit; font-size:13px; font-weight:500; line-height:1; color:var(--muted); background:transparent; padding:7px 12px; border-radius:999px; cursor:pointer; transition:background-color .15s ease, color .15s ease}
.figview button:hover{background:var(--bg); color:var(--ink)}
.figview button[aria-pressed="true"]{background:var(--primary); color:oklch(0.99 0 0)}
.figview button:focus{outline:none}
.figview button:focus-visible{outline:2px solid var(--mark); outline-offset:2px}

/* 2D diagram: the classes of Leadway's figures/*.svg */
.fig svg text{font-family:'Onest',system-ui,sans-serif; font-size:15px; fill:var(--st-ink)}
.fig svg .h{font-size:15.5px}
.fig svg .sm{font-size:13.5px; fill:var(--st-muted)}
.fig svg .you{fill:var(--lilac); stroke:var(--st-glow); stroke-width:1.2}
.fig svg .oth{fill:var(--st-box); stroke:var(--st-line); stroke-width:1; opacity:.7}
.fig svg .h{font-weight:650}
.fig svg .box{fill:var(--st-box); stroke:var(--st-line); stroke-width:1.2}
.fig svg .hl{fill:var(--st-box); stroke:var(--st-glow); stroke-width:2}
.fig svg .ln{fill:none; stroke:var(--st-line); stroke-width:1.5}
.fig svg .br{fill:none; stroke:var(--st-glow); stroke-width:2.2}
.fig svg .dash{stroke-dasharray:5 5}
.fig svg .cn, .fig svg .br, .fig svg .ok, .fig svg .no{stroke-linejoin:miter; stroke-linecap:butt}   /* connectors turn with square corners */
.fig svg .ok{fill:none; stroke:var(--st-ok); stroke-width:2.2}
.fig svg .no{fill:none; stroke:var(--st-no); stroke-width:2.2}
.fig svg .okf{fill:var(--st-ok)} .fig svg .nof{fill:var(--st-no)} .fig svg .brf{fill:var(--st-glow)}
.fig svg .okt{fill:var(--st-ok)} .fig svg .not{fill:var(--st-no)}
.fig svg tspan.ph{fill:var(--butter-i); stroke:var(--butter-w); stroke-width:8px; stroke-linejoin:round; paint-order:stroke}

/* 3D: labels, narration, controls (Leadway's stage) */
.stage-labels{position:absolute; inset:0; pointer-events:none; z-index:1}
.stage-labels > span{position:absolute; left:0; top:0; width:max-content; max-width:calc(100% - 16px); box-sizing:border-box;   /* one line, unless wider than the view: then it wraps */ font:500 11.5px/1 'IBM Plex Mono',monospace; letter-spacing:.02em; color:var(--st-ink);
  background:var(--st-veil); border:1px solid var(--st-hair); padding:5px 8px; border-radius:6px; transition:opacity .3s var(--ease)}
.stage-labels > span.dim{opacity:.68}
.stage-labels > span.ok{color:var(--mint-i); border-color:oklch(0.85 0.06 165)}
.stage-labels > span.no{color:var(--rose-i); border-color:oklch(0.85 0.06 25)}
.stage-labels > span.no s{text-decoration-thickness:1.5px}
.stage-steps{position:absolute; left:12px; right:12px; bottom:12px; z-index:2; gap:10px; align-items:baseline; font-size:13.5px; line-height:1.4; color:var(--st-ink);
  background:var(--st-veil); border:1px solid var(--st-hair); border-radius:10px; padding:10px 12px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.stage-steps .n{flex:none; font:500 12px/1 'IBM Plex Mono',monospace; color:var(--st-glow); font-variant-numeric:tabular-nums}
.stage-steps .txt{flex:1; min-width:0; text-wrap:pretty}
.stage-steps .dots{flex:none; display:flex; gap:0; align-self:center}
.stage-steps .dots button{appearance:none; width:14px; height:22px; padding:0; border:0; background:transparent; cursor:pointer; display:grid; place-items:center; border-radius:6px}
.stage-steps .dots button::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--st-line); transition:background-color .2s, transform .2s var(--ease)}
.stage-steps .dots button[aria-current="step"]::before{background:var(--st-glow); transform:none}
.stage-steps .dots button:focus{outline:none} .stage-steps .dots button:focus-visible{outline:2px solid var(--mark); outline-offset:1px}
.stage-labels .ph, .stage-steps .ph{padding:0 4px}
.stage-ctl{position:absolute; top:12px; right:112px; z-index:2; gap:4px}
.stage-ctl button{appearance:none; font:inherit; font-size:12px; font-weight:600; line-height:1; color:var(--st-ink); background:var(--st-veil); border:1px solid var(--st-hair); border-radius:999px; padding:8px 11px; cursor:pointer}
.stage-ctl button:hover{background:var(--bg)}
.stage-ctl button:focus{outline:none} .stage-ctl button:focus-visible{outline:2px solid var(--mark); outline-offset:2px}

/* phones: a wide canvas on top, the narration under it; the 2D diagram scrolls sideways inside its card */
@media (max-width:560px){
  :root[data-figs="3d"] .fig.live{aspect-ratio:auto; min-height:0; padding-top:calc(100% / 1.3)}
  :root[data-figs="3d"] .fig.live > canvas{bottom:auto}
  :root[data-figs="3d"] .fig.live > .stage-steps{position:relative; left:auto; right:auto; bottom:auto; margin:8px 10px 10px; flex-wrap:wrap}
  /* step number and dots on one line, the sentence the full width under them */
  .stage-steps .n{order:0}
  .stage-steps .dots{order:1; margin-left:auto}
  .stage-steps .txt{order:2; flex-basis:100%}
  .stage-labels > span{font-size:10px; padding:4px 6px}
  .stage-steps{font-size:13px}
}
/* phones and narrow windows: the stacked diagram, at its own size (no sideways scrolling) */
@media (max-width:680px){
  .fig > .fb-w{display:none}
  .fig > .fb-n{display:block; max-width:440px; margin:0 auto; padding:56px 12px 14px}
  .fig > .fb-n.lg{padding-top:12px}
}
@media print{
  .figview{display:none !important}
  .fig{box-shadow:none; border:1px solid #ccc; break-inside:avoid}
  :root[data-figs] .fig.live{aspect-ratio:auto !important; min-height:0 !important; padding-top:0 !important}
  :root[data-figs] .fig > .fb-w{display:block !important; padding-top:20px}
  :root[data-figs] .fig > .fb-n{display:none !important}
  :root[data-figs] .fig > figcaption{position:static !important; width:auto !important; height:auto !important; clip-path:none !important; white-space:normal !important; padding:4px 20px 16px !important}
  .fig > canvas, .fig > .stage-labels, .fig > .stage-steps, .fig > .stage-ctl{display:none !important}
}

/* no snapping on a page this long: it pulled readers back mid-section. The intro is sized so the contents and the first
   section already show at the bottom of the first screen, so it is clear the page goes on. */
.sec header.shero{padding-top:0; padding-bottom:0; row-gap:16px}

/* the intro's figure is the page's main picture: the larger column, out to the page's right edge */
.sec header.shero{grid-template-columns:minmax(0,0.85fr) minmax(0,1.35fr); gap:40px}
@media (max-width:860px){ .sec header.shero{grid-template-columns:minmax(0,1fr)} }

/* the four numbers in one row under the intro, across its full width */
.proof.row{border:0; grid-column:1 / -1; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:12px 0 0}
.proof.row li{gap:10px; padding:22px 24px 20px; border-radius:18px; background:oklch(1 0 0 / 60%); box-shadow:0 1px 2px oklch(0.4 0.05 275 / 6%), inset 0 0 0 1px oklch(0.4 0.05 275 / 7%)}
.proof.row b{font-size:clamp(34px,3vw,44px)}
.proof.row b .ph{margin-left:-6px}   /* the word, not its yellow, lines up with the label */
@media (max-width:860px){ .proof.row{grid-template-columns:1fr 1fr; gap:12px} .proof.row li{padding:18px 18px 16px} }
/* under the date: what Zurich applies to, before the first fact that names it */
.scope{margin:16px 0 0; padding:12px 16px; border-radius:12px; background:var(--card); border:1px solid var(--line); font-size:14.5px; line-height:1.5; color:var(--muted); text-wrap:pretty}
.scope strong{display:block; font-weight:600; color:var(--ink)}