/* Shared by index.html and methods.html: colour tokens (dark and light), base type, cards, the theme switch,
   the footer and the method-change tick shapes. Each page's own <style> follows this file and builds on it. */
:root{
  color-scheme:dark light;
  --display:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:16px;
}
/* colour tokens: dark is the default and the explicit "Dark" choice; light is the system's light mode
   (when no theme is chosen) and the explicit "Light" choice. The theme switch sets data-theme on <html>. */
:root,:root[data-theme="dark"]{
  --bg:#0a0b0d; --card:#111319; --card-2:#15181f; --line:#21252e; --line-soft:rgba(152,161,177,.14); --line-hi:#3a414e;
  --fg:#e9ecf1; --muted:#98a1b1;
  --accent:#5eead4; --accent-text:#5eead4; --accent-soft:rgba(94,234,212,.10); --band:rgba(94,234,212,.16);
  --grid:rgba(94,234,212,.05);
  --warn:#f2c46d; --warn-soft:rgba(242,196,109,.10);
  --dot-rising:#e8794a; --dot-high:#d9a33f; --dot-falling:#7ea6d8; --dot-flat:#98a1b1;
  --l1:#5a3e2b; --l2:#8a5a33; --l3:#b9763a; --l4:#e09445; --l5:#f6b871;
}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
@media (prefers-color-scheme: light){
  :root:not([data-theme]){ --bg:#f6f7f9; --card:#fdfdfe; --card-2:#fdfdfe; --line:#e2e5ec; --line-soft:rgba(91,100,114,.14); --line-hi:#c3c9d3;
    --fg:#15181d; --muted:#545d6b; /* darker than #5b6472: about 6.4:1 on the card surface */
    --accent:#0d9488; --accent-text:#0f766e; --accent-soft:rgba(13,148,136,.08); --band:rgba(13,148,136,.14);
    --grid:rgba(13,148,136,.06);
    --warn:#7a4f00; --warn-soft:rgba(180,120,0,.08);
    --dot-rising:#c2410c; --dot-high:#a16207; --dot-falling:#3b6fb6; --dot-flat:#6b7280;
    --l1:#fde3c8; --l2:#f8bd85; --l3:#ee9346; --l4:#c96a1f; --l5:#93460f; }
}
:root[data-theme="light"]{ --bg:#f6f7f9; --card:#fdfdfe; --card-2:#fdfdfe; --line:#e2e5ec; --line-soft:rgba(91,100,114,.14); --line-hi:#c3c9d3;
  --fg:#15181d; --muted:#545d6b;
  --accent:#0d9488; --accent-text:#0f766e; --accent-soft:rgba(13,148,136,.08); --band:rgba(13,148,136,.14);
  --grid:rgba(13,148,136,.06);
  --warn:#7a4f00; --warn-soft:rgba(180,120,0,.08);
  --dot-rising:#c2410c; --dot-high:#a16207; --dot-falling:#3b6fb6; --dot-flat:#6b7280;
  --l1:#fde3c8; --l2:#f8bd85; --l3:#ee9346; --l4:#c96a1f; --l5:#93460f; }
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; font-variant-numeric:tabular-nums}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(880px 420px at 50% -10%, var(--accent-soft), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:100% 100%, 32px 32px, 32px 32px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 80%);
          mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 80%)}
a{color:var(--accent-text); text-underline-offset:2px; overflow-wrap:anywhere}
a:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
a:hover{text-decoration-thickness:2px}
.skip{position:absolute; left:-999px; top:8px; background:var(--card); padding:10px 14px; border-radius:8px; z-index:5}
.skip:focus{left:8px}
.ico{width:16px; height:16px; display:inline-block; vertical-align:-0.15em; flex:none}
.ico-20{width:20px; height:20px}
.ico-24{width:24px; height:24px}
.wrap{position:relative; z-index:1; max-width:1040px; margin:0 auto; padding:48px 24px 96px}
h1,h2,h3,h4{font-family:var(--display); letter-spacing:-.01em; margin:0}
h1{font-weight:700; font-size:clamp(1.75rem,4.6vw,2.75rem); line-height:1.1; letter-spacing:-.02em; max-width:24ch; margin:8px 0 12px}
h2{font-weight:600; font-size:1.375rem; line-height:1.2; margin:0 0 16px}
h3.ct,h4{font-weight:600; font-size:1.0625rem; line-height:1.25; display:flex; align-items:center; gap:8px}
h3.ct .ico{color:var(--muted)}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
@media (max-width:760px){ .wrap{padding:32px 16px 72px} }

.label{font-family:var(--mono); font-size:12px; font-weight:500; color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:13px}
.meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; font-family:var(--mono); font-size:13px; color:var(--muted); margin:0 0 24px}
.meta span{display:inline-flex; align-items:center; gap:6px}
.meta-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin:0 0 24px}
.meta-row .meta{margin:0}
section{margin-top:48px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; min-width:0}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
footer{margin-top:64px; padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between}
footer a{display:inline-flex; align-items:center; min-height:44px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* segmented controls (glance order, theme): native radios, each option a 32 px pill with a 44 px hit area */
.seg{display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 8px}
.seg[hidden]{display:none}
.seg-l{font-family:var(--mono); font-size:12px; font-weight:500; color:var(--muted)}
.seg-o{display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:2px}
.seg label{position:relative; display:inline-flex; cursor:pointer}
.seg label::after{content:""; position:absolute; inset:-7px 0}
.seg input{position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none}
.seg input:focus-visible{outline:none}
.seg label > span{display:inline-flex; align-items:center; min-height:30px; padding:0 12px; border:1px solid transparent; border-radius:999px;
  font-size:13px; font-weight:500; color:var(--muted); white-space:nowrap; transition:background-color .12s ease, border-color .12s ease, color .12s ease}
.seg label:hover > span{color:var(--fg); background:var(--line-soft)}
.seg input:checked + span{color:var(--fg); background:var(--accent-soft); border-color:var(--line-hi)}
.seg input:focus-visible + span{outline:2px solid var(--accent); outline-offset:1px}

/* method-change ticks, as on the history strips: dashed for high impact, dotted for medium, a faint solid line for low */
.s-tick{stroke:var(--fg); stroke-opacity:.75; stroke-width:1}
.s-tick.high{stroke-dasharray:3 2}
.s-tick.medium{stroke-dasharray:1 2}
.s-tick.low{stroke:var(--muted); stroke-opacity:.8}
.tk{width:4px; height:14px; flex:none}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important; scroll-behavior:auto !important} }