/* ═══════════════════════════════════════════════════════════════════════
   WINDROSE DESIGN LANGUAGE
   The single source of truth for colour, spacing and type across
   windrose.ai pages, internal artifacts and reports.

   Both themes are available everywhere and the viewer chooses; there is
   no per-document decision to make. Light is only the starting point —
   it matches the owner's and service manuals, which is where the token
   set below comes from. Dark is the site's own marketing palette. See
   the THEMING block for how the four states resolve, and pair it with
   the toggle markup + JS in artifact-starter.html.

   `data-wr-surface="dark"` is a different thing: it pins one *region*
   dark in both themes — a map, a 3D scene, a screen inside a document.

   FONTS — system fonts only, Apple style (Wen, 30 Sep 2026): one family
   for headings and body, told apart by size and weight alone; no webfont
   download, no uppercase, no letter-spacing. On Apple devices this is
   SF Pro + PingFang, on Windows Segoe UI + Microsoft YaHei, on Android
   Roboto + Noto Sans CJK.

   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── surface ───────────────────────────────────────────────────── */
  --wr-page:#eef1f5;          /* the ground the cards sit on          */
  --wr-card:#ffffff;          /* any raised panel, table or section   */
  --wr-rail:#f5f7fa;          /* sidebars, toolbars, table zebra      */
  --wr-mast:#1a2332;          /* the dark masthead band               */
  --wr-mast-ink:#f0f4f8;

  /* ── ink ───────────────────────────────────────────────────────── */
  --wr-ink:#222831;
  --wr-ink-muted:#5a6577;
  --wr-ink-faint:#8798a8;     /* third rank: units, keys, timestamps  */
  --wr-accent:#0b5ed7;
  --wr-accent-tint:#e8f0fe;

  /* ── lines ─────────────────────────────────────────────────────── */
  --wr-rule:#dde3ea;          /* every divider and card border        */
  --wr-rule-strong:#d0d7e0;   /* table cell borders                   */
  --wr-rule-soft:#e8ecf1;     /* row separators inside a card         */
  --wr-th:#eef2f7;            /* table header fill                    */

  /* ── semantic signals. Each is a triple: a tint to fill with, a line
        to edge with, and an ink that is legible as text. Never use the
        line colour for type — #e6a817 on white is about 2:1.
        warn / notice / note / ok are exactly the manuals' values, so a
        warning looks the same in a manual and in a report. alert is the
        one addition: the manuals have no "this is wrong" state and
        reports need one. ─────────────────────────────────────────── */
  --wr-warn:#fff3cd;   --wr-warn-line:#e6a817;   --wr-warn-ink:#664d03;
  --wr-notice:#fff3e0; --wr-notice-line:#f57c00; --wr-notice-ink:#7a4100;
  --wr-note:#e3f2fd;   --wr-note-line:#1976d2;   --wr-note-ink:#0d47a1;
  --wr-ok:#e8f5e9;     --wr-ok-line:#43a047;     --wr-ok-ink:#1b5e20;
  --wr-alert:#fdecec;  --wr-alert-line:#c53030;  --wr-alert-ink:#8c1d18;

  /* ── categorical accents, for telling subjects apart rather than
        ranking them. Blue is the default; use these when a document
        runs more than one thread (e.g. the AI data centre sections). */
  --wr-cat-dc:#6b3fc4;     --wr-cat-dc-tint:#f1e9fd;  --wr-cat-dc-ink:#4c2a8f;
  --wr-cat-power:#0e7c86;  --wr-cat-power-tint:#e3f4f6;
  --wr-cat-build:#8a6d2f;  --wr-cat-build-tint:#f5efdf;

  /* ── sequential ramp, for charts and anything thermal ──────────── */
  --wr-cold:#2b6cb0; --wr-cool:#2c8fa8; --wr-warm:#b8860b;
  --wr-hot:#c2610f;  --wr-burn:#b03030;
  /* the brighter originals, for fills and strokes on a dark surface */
  --wr-cold-lit:#4a9eff; --wr-cool-lit:#5fc8e8; --wr-warm-lit:#ffc94a;
  --wr-hot-lit:#ff9a4a;  --wr-burn-lit:#ff5f5f;

  /* ── spacing: one scale, no other values ───────────────────────── */
  --wr-1:2px;  --wr-2:4px;  --wr-3:6px;  --wr-4:8px;  --wr-5:12px;
  --wr-6:16px; --wr-7:24px; --wr-8:32px; --wr-9:48px; --wr-10:64px;

  /* ── radius ────────────────────────────────────────────────────── */
  --wr-r-sm:4px; --wr-r:6px; --wr-r-lg:12px; --wr-r-pill:999px;

  /* ── elevation ─────────────────────────────────────────────────── */
  --wr-shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --wr-shadow:0 2px 8px rgba(0,0,0,.12);

  /* ── type ──────────────────────────────────────────────────────── */
  --wr-display:var(--wr-body);
  --wr-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","PingFang SC","Hiragino Sans","Microsoft YaHei","Segoe UI",Roboto,"Noto Sans SC",Arial,sans-serif;
  --wr-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  --wr-fs-micro:11px; --wr-fs-sm:12px;  --wr-fs-cap:13px;
  --wr-fs-body:15px;  --wr-fs-lead:18px; --wr-fs-h3:22px;
  --wr-fs-h2:28px;    --wr-fs-h1:38px;
  --wr-lh:1.5;       --wr-lh-tight:1.15;
  --wr-track:normal;

  --wr-maxw:1240px;

  /* ── legacy aliases, so existing pages can adopt a token at a time
        without a rename. Prefer the --wr-* names in new work. ────── */
  --main-bg:var(--wr-card);      --text:var(--wr-ink);
  --text-muted:var(--wr-ink-muted); --accent:var(--wr-accent);
  --accent-light:var(--wr-accent-tint);
  --nav-bg:var(--wr-rail);       --nav-border:var(--wr-rule);
  --nav-active:var(--wr-accent); --hdr-bg:var(--wr-mast);
  --hdr-fg:var(--wr-mast-ink);   --table-header:var(--wr-th);
  --table-border:var(--wr-rule-strong);
  --radius:var(--wr-r);          --maxw:var(--wr-maxw);
  --font-sans:var(--wr-body);    --font-display:var(--wr-display);
  --shadow-sm:var(--wr-shadow-sm); --shadow-md:var(--wr-shadow);
}

/* ── THEMING ───────────────────────────────────────────────────────
   Light and dark are both available on every page, and the viewer
   chooses. Four states resolve in this order:

     1. no choice anywhere        -> light (the :root block above)
     2. the OS asks for dark      -> dark
     3. the host stamps data-theme -> dark   (Claude artifacts do this)
     4. the page's own toggle sets data-wr-theme -> wins over both

   The page toggle writes data-wr-theme="dark" | "light", or removes it
   for "auto". data-wr-theme="light" suppresses rules 2 and 3, so an
   explicit light choice beats a dark OS and a dark host — which is why
   the :not() guards are on every dark selector and not just one.       */

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-wr-theme="light"]){
  --wr-page:#060f1e;
  --wr-card:#0d1f38;
  --wr-rail:#0a1a30;
  --wr-mast:#060f1e;
  --wr-mast-ink:#f0f4ff;
  --wr-ink:#f0f4ff;
  --wr-ink-muted:#7a9abf;
  --wr-ink-faint:#5d7d9e;
  --wr-accent:#4a9eff;
  --wr-accent-tint:rgba(74,158,255,.14);
  --wr-rule:rgba(74,158,255,.14);
  --wr-rule-strong:rgba(74,158,255,.30);
  --wr-rule-soft:rgba(74,158,255,.08);
  --wr-th:#102847;
  --wr-cold:var(--wr-cold-lit); --wr-cool:var(--wr-cool-lit);
  --wr-warm:var(--wr-warm-lit); --wr-hot:var(--wr-hot-lit);
  --wr-burn:var(--wr-burn-lit);
  --wr-shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --wr-shadow:0 2px 10px rgba(0,0,0,.5);
  /* signals invert: the tint becomes a low-alpha wash and the ink
     becomes the bright end, so they stay legible on #0d1f38 */
  --wr-warn:#3a2e19;   --wr-warn-line:#e0a34a;   --wr-warn-ink:#f3c98a;
  --wr-notice:#3a2a19; --wr-notice-line:#f0a04a; --wr-notice-ink:#f7c68f;
  --wr-note:#12263f;   --wr-note-line:#4a9eff;   --wr-note-ink:#c9dcf5;
  --wr-ok:#143024;     --wr-ok-line:#4ecfa0;     --wr-ok-ink:#8fe3c4;
  --wr-alert:#3a1f22;  --wr-alert-line:#ff8080;  --wr-alert-ink:#ffb3b3;
  --wr-cat-dc:#b794f6; --wr-cat-dc-tint:#291f3d;  --wr-cat-dc-ink:#d7c2fb;
  }
}
:root[data-theme="dark"]:not([data-wr-theme="light"]),
:root[data-wr-theme="dark"]{
  --wr-page:#060f1e;
  --wr-card:#0d1f38;
  --wr-rail:#0a1a30;
  --wr-mast:#060f1e;
  --wr-mast-ink:#f0f4ff;
  --wr-ink:#f0f4ff;
  --wr-ink-muted:#7a9abf;
  --wr-ink-faint:#5d7d9e;
  --wr-accent:#4a9eff;
  --wr-accent-tint:rgba(74,158,255,.14);
  --wr-rule:rgba(74,158,255,.14);
  --wr-rule-strong:rgba(74,158,255,.30);
  --wr-rule-soft:rgba(74,158,255,.08);
  --wr-th:#102847;
  --wr-cold:var(--wr-cold-lit); --wr-cool:var(--wr-cool-lit);
  --wr-warm:var(--wr-warm-lit); --wr-hot:var(--wr-hot-lit);
  --wr-burn:var(--wr-burn-lit);
  --wr-shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --wr-shadow:0 2px 10px rgba(0,0,0,.5);
  /* signals invert: the tint becomes a low-alpha wash and the ink
     becomes the bright end, so they stay legible on #0d1f38 */
  --wr-warn:#3a2e19;   --wr-warn-line:#e0a34a;   --wr-warn-ink:#f3c98a;
  --wr-notice:#3a2a19; --wr-notice-line:#f0a04a; --wr-notice-ink:#f7c68f;
  --wr-note:#12263f;   --wr-note-line:#4a9eff;   --wr-note-ink:#c9dcf5;
  --wr-ok:#143024;     --wr-ok-line:#4ecfa0;     --wr-ok-ink:#8fe3c4;
  --wr-alert:#3a1f22;  --wr-alert-line:#ff8080;  --wr-alert-ink:#ffb3b3;
  --wr-cat-dc:#b794f6; --wr-cat-dc-tint:#291f3d;  --wr-cat-dc-ink:#d7c2fb;
}

/* A region that stays dark in BOTH themes — a map, a 3D scene, a screen
   embedded in a document. Scoped, so it never sets the page theme. */
[data-wr-surface="dark"]{
  --wr-page:#060f1e;
  --wr-card:#0d1f38;
  --wr-rail:#0a1a30;
  --wr-mast:#060f1e;
  --wr-mast-ink:#f0f4ff;
  --wr-ink:#f0f4ff;
  --wr-ink-muted:#7a9abf;
  --wr-ink-faint:#5d7d9e;
  --wr-accent:#4a9eff;
  --wr-accent-tint:rgba(74,158,255,.14);
  --wr-rule:rgba(74,158,255,.14);
  --wr-rule-strong:rgba(74,158,255,.30);
  --wr-rule-soft:rgba(74,158,255,.08);
  --wr-th:#102847;
  --wr-cold:var(--wr-cold-lit); --wr-cool:var(--wr-cool-lit);
  --wr-warm:var(--wr-warm-lit); --wr-hot:var(--wr-hot-lit);
  --wr-burn:var(--wr-burn-lit);
  --wr-shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --wr-shadow:0 2px 10px rgba(0,0,0,.5);
  /* signals invert: the tint becomes a low-alpha wash and the ink
     becomes the bright end, so they stay legible on #0d1f38 */
  --wr-warn:#3a2e19;   --wr-warn-line:#e0a34a;   --wr-warn-ink:#f3c98a;
  --wr-notice:#3a2a19; --wr-notice-line:#f0a04a; --wr-notice-ink:#f7c68f;
  --wr-note:#12263f;   --wr-note-line:#4a9eff;   --wr-note-ink:#c9dcf5;
  --wr-ok:#143024;     --wr-ok-line:#4ecfa0;     --wr-ok-ink:#8fe3c4;
  --wr-alert:#3a1f22;  --wr-alert-line:#ff8080;  --wr-alert-ink:#ffb3b3;
  --wr-cat-dc:#b794f6; --wr-cat-dc-tint:#291f3d;  --wr-cat-dc-ink:#d7c2fb;
}

/* ── the theme control. Three states, because "auto" is a real answer:
   most viewers never set a theme and want to follow their system. ─── */
.wr-themebar{
  display:inline-flex; border:1px solid var(--wr-rule);
  border-radius:var(--wr-r-pill); overflow:hidden; background:var(--wr-card);
}
.wr-themebar button{
  appearance:none; border:0; background:transparent; color:var(--wr-ink-muted);
  cursor:pointer; font:500 12px/1 var(--wr-body); padding:8px 12px;
  border-right:1px solid var(--wr-rule); min-width:36px;
}
.wr-themebar button:last-child{border-right:0}
.wr-themebar button.on{background:var(--wr-accent); color:#fff}
.wr-themebar button:focus-visible{outline:2px solid var(--wr-accent); outline-offset:-2px}


/* ── CJK: never letter-space or case-transform Chinese/Japanese/Korean. */
:lang(zh),.wr-zh{letter-spacing:normal; text-transform:none}

/* ═══ primitives ═══════════════════════════════════════════════════ */

.wr-page{
  margin:0; background:var(--wr-page); color:var(--wr-ink);
  font-family:var(--wr-body); font-size:var(--wr-fs-body);
  line-height:var(--wr-lh); -webkit-font-smoothing:antialiased;
}
.wr-wrap{max-width:var(--wr-maxw); margin:0 auto; padding:var(--wr-7) var(--wr-6)}

/* headings: same family as body, heavier and tighter — nothing else. */
.wr-h1,.wr-h2,.wr-h3,.wr-kicker{
  font-family:var(--wr-display); font-weight:600;
  line-height:var(--wr-lh-tight); margin:0;
}
.wr-h1{font-size:var(--wr-fs-h1); letter-spacing:-.02em}
.wr-h2{font-size:var(--wr-fs-h2)}
.wr-h3{font-size:var(--wr-fs-h3)}
.wr-kicker{font-size:var(--wr-fs-sm); color:var(--wr-ink-muted)}
.wr-lead{font-size:var(--wr-fs-lead); color:var(--wr-ink-muted)}
.wr-muted{color:var(--wr-ink-muted)}
.wr-mono{font-family:var(--wr-mono); font-variant-numeric:tabular-nums}
.wr-num{font-variant-numeric:tabular-nums}

.wr-card{
  background:var(--wr-card); border:1px solid var(--wr-rule);
  border-radius:var(--wr-r-lg); padding:var(--wr-6);
  margin:var(--wr-5) 0;
}
.wr-rule{border:0; border-top:1px solid var(--wr-rule); margin:var(--wr-7) 0}
.wr-mast{background:var(--wr-mast); color:var(--wr-mast-ink); padding:var(--wr-6) 0}

/* ── the collapsible outline. Every Windrose document opens as a list
      of findings and expands into detail; the collapsed line carries
      the finding, not just a heading. ───────────────────────────── */
.wr-sec{
  background:var(--wr-card); border:1px solid var(--wr-rule);
  border-radius:var(--wr-r-lg); margin:var(--wr-5) 0;
  border-left:3px solid var(--wr-accent);
}
.wr-sec>summary{
  cursor:pointer; list-style:none; padding:var(--wr-5) var(--wr-6);
  display:flex; gap:var(--wr-5); align-items:baseline;
}
.wr-sec>summary::-webkit-details-marker{display:none}
.wr-sec>summary::before{
  content:"▸"; color:var(--wr-accent); font-size:var(--wr-fs-sm);
  transition:transform .15s ease; display:inline-block;
}
.wr-sec[open]>summary::before{transform:rotate(90deg)}
.wr-sec>summary:hover{background:var(--wr-rail)}
.wr-sec>.wr-body{padding:0 var(--wr-6) var(--wr-6); border-top:1px solid var(--wr-rule)}
.wr-sec-t{font-family:var(--wr-display); font-weight:600; font-size:var(--wr-fs-lead)}
.wr-sec-f{color:var(--wr-ink-muted); font-size:var(--wr-fs-cap)}

/* ── tables ───────────────────────────────────────────────────────── */
.wr-table{border-collapse:collapse; width:100%; font-size:var(--wr-fs-cap)}
.wr-table th{
  background:var(--wr-th); text-align:left; font-weight:600;
  font-size:var(--wr-fs-sm); color:var(--wr-ink-muted);
}
.wr-table th,.wr-table td{
  border:1px solid var(--wr-rule-strong); padding:var(--wr-3) var(--wr-4);
}
.wr-table td.wr-n{text-align:right; font-variant-numeric:tabular-nums}

/* ── callouts ─────────────────────────────────────────────────────── */
.wr-callout{
  border-left:3px solid; border-radius:var(--wr-r-sm);
  padding:var(--wr-4) var(--wr-5); margin:var(--wr-5) 0;
  font-size:var(--wr-fs-cap);
}
.wr-warn  {background:var(--wr-warn);   border-color:var(--wr-warn-line);   color:var(--wr-warn-ink)}
.wr-notice{background:var(--wr-notice); border-color:var(--wr-notice-line); color:var(--wr-notice-ink)}
.wr-note  {background:var(--wr-note);   border-color:var(--wr-note-line);   color:var(--wr-note-ink)}
.wr-ok    {background:var(--wr-ok);     border-color:var(--wr-ok-line);     color:var(--wr-ok-ink)}

/* ── chips, pills and buttons ─────────────────────────────────────── */
.wr-chip{
  display:inline-block; padding:var(--wr-1) var(--wr-3);
  border-radius:var(--wr-r-sm); background:var(--wr-accent-tint);
  color:var(--wr-accent); font-size:var(--wr-fs-micro); font-weight:500;
}
.wr-pill{
  display:inline-block; padding:var(--wr-2) var(--wr-5);
  border-radius:var(--wr-r-pill); border:1px solid var(--wr-rule);
  background:var(--wr-card); font-size:var(--wr-fs-sm);
}
.wr-btn{
  font-family:var(--wr-body); font-size:var(--wr-fs-sm); cursor:pointer;
  padding:var(--wr-3) var(--wr-5); border-radius:var(--wr-r);
  border:1px solid var(--wr-rule); background:var(--wr-card); color:var(--wr-ink);
}
.wr-btn[aria-pressed="true"],.wr-btn.is-on{
  background:var(--wr-accent); border-color:var(--wr-accent); color:#fff;
}

/* ── figures. Wide content scrolls inside its own box; the page never
      scrolls sideways. ───────────────────────────────────────────── */
.wr-fig{margin:var(--wr-6) 0}
.wr-fig-scroll{overflow-x:auto}
.wr-cap{font-size:var(--wr-fs-sm); color:var(--wr-ink-muted); margin-top:var(--wr-3)}

@media (max-width:640px){
  :root{--wr-fs-h1:28px; --wr-fs-h2:22px; --wr-fs-h3:18px}
  .wr-wrap{padding:var(--wr-6) var(--wr-5)}
  .wr-card,.wr-sec>summary,.wr-sec>.wr-body{padding-left:var(--wr-5); padding-right:var(--wr-5)}
}