/* ═══════════════════════════════════════════════════════════════════════
   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 — do not @import. Wen's network stalls on fonts.googleapis.com,
   so the webfont must never block first paint. Load it like this, and
   keep the fallback stacks below so the page is readable if it never
   arrives:

     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" media="print" onload="this.media='all'"
           href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600&family=DM+Sans:wght@400;500;700&family=DM+Mono&display=swap">

   In a published Claude artifact, external images and scripts are
   blocked but fonts.googleapis.com stylesheets are allowed, so the
   same line works there.
   ═══════════════════════════════════════════════════════════════════ */

: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:"Barlow Condensed","Noto Sans SC","Segoe UI",system-ui,sans-serif;
  --wr-body:"DM Sans","Noto Sans SC","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --wr-mono:"DM Mono","Noto Sans SC",ui-monospace,Menlo,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.65;       --wr-lh-tight:1.25;
  --wr-track:.12em;   /* display type is uppercase and tracked out    */

  --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. Barlow Condensed has no Chinese, so display type falls back
   to Noto Sans SC. Uppercasing and tracking out Latin display type is
   part of the Windrose voice, but both are wrong for Chinese — so
   .wr-kicker and friends are Latin-only, and any element that may hold
   Chinese gets the display family without transform or tracking. ─── */
: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)}

/* display type is the one place Windrose is loud: condensed, uppercase,
   tracked out. Body copy never does this. */
.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)}
.wr-h2{font-size:var(--wr-fs-h2)}
.wr-h3{font-size:var(--wr-fs-h3)}
.wr-kicker{
  font-size:var(--wr-fs-micro); text-transform:uppercase;
  letter-spacing:var(--wr-track); 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:700;
  font-size:var(--wr-fs-micro); text-transform:uppercase;
  letter-spacing:.06em; 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)}
}