/* ===== fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Jersey+15&family=VT323&display=swap');

/* ===== color tokens ===== */
:root {
  --ink-1000: #06080a; --ink-900: #0b0e12; --ink-850: #0f1318; --ink-800: #14181f;
  --ink-750: #191e26; --ink-700: #1f2530; --ink-650: #262d39; --ink-600: #2e3744;
  --ink-500: #3a4453; --ink-400: #4d5867; --ink-300: #6c7787; --ink-200: #94a0b0;
  --ink-100: #c2cad6; --ink-050: #e7ebf1; --ink-000: #f6f8fb;
  --parchment-300: #b7ad94; --parchment-200: #d3c9b0; --parchment-100: #e8e0cb;
  --azure-700: #244a8a; --azure-600: #2f5da8; --azure-500: #3b72c9; --azure-400: #5a90e0; --azure-300: #84b1f0;
  --moss-700: #2c5a28; --moss-600: #3a7233; --moss-500: #4a8c3f; --moss-400: #62a854; --moss-300: #8ac77d;
  --blood-700: #8a2c22; --blood-600: #a8392b; --blood-500: #c2493a; --blood-400: #d96354; --blood-300: #ef8a7d;
  --gold-700: #946f1f; --gold-600: #b58a2c; --gold-500: #cfa33a; --gold-400: #e0b94e; --gold-300: #efd180;
  --royal-700: #4a2f78; --royal-600: #5f3f97; --royal-500: #7a52b8; --royal-400: #9a78cf; --royal-300: #bda3e2;
  --faction-azure: #2f4a7a; --faction-crimson: #7a2f2f; --faction-forest: #3a5a2f; --faction-violet: #45305f;
  --faction-iron: #434a55; --faction-gold: #a7842c; --faction-teal: #2f6066; --faction-umber: #54402a;
  --faction-cream: #cabf9f; --faction-onyx: #1c2026;

  --bg-app: var(--ink-900); --bg-well: var(--ink-850); --surface: var(--ink-800);
  --surface-alt: var(--ink-750); --surface-raised: var(--ink-700); --surface-hover: var(--ink-650);
  --overlay-scrim: rgba(4, 6, 9, 0.72);
  --border-subtle: var(--ink-600); --border-default: var(--ink-500); --border-strong: var(--ink-400); --border-focus: var(--azure-400);
  --text-primary: var(--ink-050); --text-secondary: var(--ink-200); --text-muted: var(--ink-300);
  --text-disabled: var(--ink-400); --text-inverse: var(--ink-1000);

  --info: var(--azure-500); --info-strong: var(--azure-600); --info-text: var(--azure-300); --on-info: #f3f7ff;
  --success: var(--moss-500); --success-strong: var(--moss-600); --success-text: var(--moss-300); --on-success: #f1fbef;
  --danger: var(--blood-500); --danger-strong: var(--blood-600); --danger-text: var(--blood-300); --on-danger: #fff3f1;
  --warning: var(--gold-500); --warning-strong: var(--gold-600); --warning-text: var(--gold-300); --on-warning: #1a1304;
  --special: var(--royal-500); --special-strong: var(--royal-600); --special-text: var(--royal-300); --on-special: #f7f2ff;
  --link: var(--azure-400); --link-hover: var(--azure-300);
}

/* ===== typography tokens ===== */
:root {
  --font-display: 'Jersey 15', 'Segoe UI', system-ui, sans-serif;
  --font-ui: 'Jersey 15', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'VT323', 'Courier New', monospace;
  --weight-regular: 400; --weight-medium: 400; --weight-semibold: 400; --weight-bold: 400;
  --text-2xs: 13px; --text-xs: 15px; --text-sm: 17px; --text-md: 19px; --text-lg: 24px;
  --text-xl: 30px; --text-2xl: 40px; --text-3xl: 52px; --text-4xl: 68px;
  --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.45; --leading-relaxed: 1.6;
  --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-caps: 0.14em;
}

/* ===== spacing / radii tokens ===== */
:root {
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-pill: 999px;
  --border-hair: 1px; --border-thick: 2px;
  --control-sm: 32px; --control-md: 40px; --control-lg: 48px;
  --container-max: 1280px; --panel-pad: var(--space-5); --gutter: var(--space-4);
  --z-sticky: 100; --z-overlay: 1000;
}

/* ===== effects tokens ===== */
:root {
  --bevel-raised: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.5);
  --bevel-raised-strong: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -2px 0 rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.55);
  --bevel-inset: inset 0 1px 2px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(0,0,0,0.25);
  --bevel-pressed: inset 0 2px 4px rgba(0,0,0,0.55);
  --shadow-panel: 0 2px 10px rgba(0,0,0,0.45);
  --shadow-float: 0 8px 24px rgba(0,0,0,0.55);
  --shadow-modal: 0 20px 60px rgba(0,0,0,0.70);
  --ring-focus: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--azure-400);
  --glow-info: 0 0 0 1px var(--azure-600), 0 0 12px rgba(59,114,201,0.35);
  --glow-danger: 0 0 0 1px var(--blood-600), 0 0 12px rgba(194,73,58,0.35);
  --glow-success: 0 0 0 1px var(--moss-600), 0 0 12px rgba(74,140,63,0.30);
  --glow-warning: 0 0 0 1px var(--gold-600), 0 0 12px rgba(207,163,58,0.30);
  --edge-top-light: inset 0 1px 0 rgba(255,255,255,0.06);
  --ease-out: cubic-bezier(0.2,0.7,0.3,1);
  --dur-fast: 120ms; --dur-base: 180ms;
  --grad-stone: linear-gradient(180deg, #0e1218 0%, #0b0e12 60%, #090b0f 100%);
}

/* ===== base reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; overflow-x: hidden; }
body { overflow-x: hidden; }
body {
  margin: 0;
  background: var(--grad-stone), var(--bg-app);
  color: var(--text-primary);
  font: 400 var(--text-md)/var(--leading-normal) var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 400; color: var(--text-primary); line-height: var(--leading-snug); }
p { margin: 0; }
a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--link-hover); }
::selection { background: var(--azure-600); color: var(--ink-000); }
* { scrollbar-width: thin; scrollbar-color: var(--ink-600) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--ink-850); }
*::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: var(--radius-sm); border: 2px solid var(--ink-850); }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }
img { max-width: 100%; }

/* ===== components (ported from the design system bundle) ===== */
.wn-btn {
  --btn-bg: var(--surface-raised); --btn-bg-hi: color-mix(in oklab, var(--surface-raised) 88%, #fff 12%);
  --btn-edge: var(--border-default); --btn-fg: var(--text-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 400; letter-spacing: var(--tracking-wide);
  color: var(--btn-fg); background: linear-gradient(180deg, var(--btn-bg-hi), var(--btn-bg));
  border: var(--border-hair) solid var(--btn-edge); border-radius: var(--radius-md); box-shadow: var(--bevel-raised);
  cursor: pointer; user-select: none; white-space: nowrap; text-transform: uppercase; text-decoration: none;
  transition: filter var(--dur-fast) var(--ease-out), transform 80ms var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  height: var(--control-md); padding: 0 var(--space-4); font-size: var(--text-md);
}
.wn-btn:hover { filter: brightness(1.12); }
.wn-btn:active { transform: translateY(1px); box-shadow: var(--bevel-pressed); filter: brightness(0.96); }
.wn-btn--sm { height: var(--control-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
.wn-btn--lg { height: var(--control-lg); padding: 0 var(--space-6); font-size: var(--text-lg); }
.wn-btn--primary { --btn-bg: var(--info); --btn-bg-hi: var(--azure-400); --btn-edge: var(--azure-300); --btn-fg: var(--on-info); box-shadow: var(--bevel-raised-strong); }
.wn-btn--success { --btn-bg: var(--success); --btn-bg-hi: var(--moss-400); --btn-edge: var(--moss-300); --btn-fg: var(--on-success); box-shadow: var(--bevel-raised-strong); }
.wn-btn--danger { --btn-bg: var(--danger); --btn-bg-hi: var(--blood-400); --btn-edge: var(--blood-300); --btn-fg: var(--on-danger); }
.wn-btn--warning { --btn-bg: var(--warning); --btn-bg-hi: var(--gold-400); --btn-edge: var(--gold-300); --btn-fg: var(--on-warning); box-shadow: var(--bevel-raised-strong); }
.wn-btn--special { --btn-bg: var(--special); --btn-bg-hi: var(--royal-400); --btn-edge: var(--royal-300); --btn-fg: var(--on-special); box-shadow: var(--bevel-raised-strong); }
.wn-btn--ghost { --btn-bg: transparent; --btn-bg-hi: transparent; --btn-edge: var(--border-default); background: transparent; box-shadow: none; }
.wn-btn--ghost:hover { background: var(--surface-hover); filter: none; }

.wn-panel { position: relative; background: var(--surface); border: var(--border-hair) solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-panel), var(--edge-top-light); }
.wn-panel--sunken { background: var(--bg-well); box-shadow: var(--bevel-inset); }
.wn-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--border-hair) solid var(--border-subtle); }
.wn-panel__title { font-family: var(--font-display); font-size: var(--text-md); letter-spacing: var(--tracking-wide); color: var(--text-secondary); text-transform: uppercase; }
.wn-panel__body { padding: var(--panel-pad); }
.wn-panel--framed::before, .wn-panel--framed::after { content: ""; position: absolute; width: 12px; height: 12px; border: var(--border-thick) solid var(--border-strong); pointer-events: none; }
.wn-panel--framed::before { top: 5px; left: 5px; border-right: 0; border-bottom: 0; }
.wn-panel--framed::after { bottom: 5px; right: 5px; border-left: 0; border-top: 0; }

.wn-badge { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); line-height: 1; padding: 4px var(--space-2); border-radius: var(--radius-sm); border: var(--border-hair) solid var(--bd, var(--border-default)); color: var(--fg, var(--text-secondary)); background: var(--bg, var(--surface-raised)); white-space: nowrap; text-transform: uppercase; }
.wn-badge--neutral { --fg: var(--text-secondary); --bg: var(--surface-raised); --bd: var(--border-default); }
.wn-badge--info { --fg: var(--info-text); --bg: color-mix(in oklab, var(--info) 18%, transparent); --bd: color-mix(in oklab, var(--info) 45%, transparent); }
.wn-badge--success { --fg: var(--success-text); --bg: color-mix(in oklab, var(--success) 18%, transparent); --bd: color-mix(in oklab, var(--success) 45%, transparent); }
.wn-badge--danger { --fg: var(--danger-text); --bg: color-mix(in oklab, var(--danger) 18%, transparent); --bd: color-mix(in oklab, var(--danger) 45%, transparent); }
.wn-badge--warning { --fg: var(--warning-text); --bg: color-mix(in oklab, var(--warning) 18%, transparent); --bd: color-mix(in oklab, var(--warning) 45%, transparent); }
.wn-badge--special { --fg: var(--special-text); --bg: color-mix(in oklab, var(--special) 18%, transparent); --bd: color-mix(in oklab, var(--special) 45%, transparent); }

.wn-alertbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: var(--border-hair) solid var(--bd); border-radius: var(--radius-md); background: var(--bg); color: var(--fg); font-family: var(--font-display); letter-spacing: var(--tracking-wide); }
.wn-alertbar__title { font-weight: 400; text-transform: uppercase; }
.wn-alertbar__sep { color: var(--text-muted); }
.wn-alertbar--info { --bg: color-mix(in oklab, var(--info) 14%, var(--surface)); --bd: color-mix(in oklab, var(--info) 55%, transparent); --fg: var(--info-text); }

.wn-statline { display: flex; align-items: center; gap: var(--space-2); }
.wn-statline__label { font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); color: var(--text-muted); text-transform: uppercase; }
.wn-statline__value { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-lg); line-height: 1; font-variant-numeric: tabular-nums; color: var(--val, var(--text-primary)); }
.wn-statline__value--info { --val: var(--info-text); }
.wn-statline__value--danger { --val: var(--danger-text); }
.wn-statline__value--warning { --val: var(--warning-text); }

/* ===== layout: top nav ===== */
.wn-topbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 20px; background: var(--ink-900); border-bottom: 2px solid var(--border-subtle); box-shadow: var(--shadow-panel); flex-wrap: nowrap; overflow-x: clip; overflow-y: visible; }
.wn-brand { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; color: var(--text-primary); text-decoration: none; }
.wn-brand img { width: 34px; height: 34px; image-rendering: pixelated; display: block; flex: 0 0 auto; }
.wn-brand span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 24px/1.15 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.wn-chip { flex: 0 0 auto; font: 400 15px/1.2 var(--font-mono); color: var(--text-muted); letter-spacing: 0.06em; white-space: nowrap; }
.wn-chip-dot { flex: 0 0 auto; color: var(--ink-500); margin: 0 -8px; }
.wn-nav { margin-left: auto; flex: 0 0 auto; display: flex; gap: 2px; align-items: center; flex-wrap: nowrap; justify-content: flex-end; }
.wn-navlink { flex: 0 0 auto; padding: 6px 9px; font: 400 17px/1.15 var(--font-display); letter-spacing: 0.04em; white-space: nowrap; text-transform: uppercase; color: var(--text-secondary); background: transparent; border: 1px solid transparent; border-radius: 3px; text-decoration: none; }
.wn-navlink:hover { color: var(--text-primary); }
.wn-navlink--active { color: var(--text-primary); background: var(--surface); border-color: var(--border-default); box-shadow: var(--bevel-inset); }
.wn-nav-download { margin-left: 6px; flex: 0 0 auto; }

/* "More" overflow menu: nav items collapse into this as the bar runs out of room
   (see main.js fitBar()) instead of the whole nav vanishing behind a hamburger. */
.wn-more-wrap { position: relative; flex: 0 0 auto; display: none; }
.wn-more-btn { width: 28px; height: 30px; display: flex; align-items: center; justify-content: center; font: 400 15px/1 var(--font-ui); color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border-default); border-radius: 3px; box-shadow: var(--bevel-raised); cursor: pointer; }
.wn-more-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 200; display: none; flex-direction: column; min-width: 190px; padding: 6px; background: var(--surface-raised); border: 2px solid var(--border-default); border-radius: 4px; box-shadow: var(--shadow-float); }
.wn-more-panel--open { display: flex; }
.wn-more-item { text-align: left; padding: 7px 10px; font: 400 15px/1.2 var(--font-mono); color: var(--text-muted); letter-spacing: 0.06em; background: transparent; border: none; border-radius: 3px; text-decoration: none; }
.wn-more-item--page { font: 400 18px/1.2 var(--font-ui); color: var(--text-primary); letter-spacing: normal; cursor: pointer; }
.wn-more-item--page:hover { background: var(--surface-hover); }

/* ===== layout: page shell ===== */
.wn-page { max-width: var(--container-max); margin: 0 auto; padding: 0 24px 80px; }
.wn-docs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; padding-top: 56px; }
.wn-rail { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px; padding: 16px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 4px; box-shadow: var(--shadow-panel); }
.wn-rail-label { font: 400 15px/1.2 var(--font-mono); letter-spacing: 0.12em; color: var(--text-muted); padding-bottom: 8px; }
.wn-raillink { text-align: left; padding: 6px 8px; font: 400 19px/1.2 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); background: transparent; border: 1px solid transparent; border-left: 2px solid transparent; border-radius: 2px; text-decoration: block; display: block; }
.wn-raillink--active { color: var(--text-primary); background: var(--surface-raised); border-color: var(--border-default); border-left-color: var(--info); }
.wn-rail-logos { display: flex; align-items: center; gap: 6px; padding: 6px; }
.wn-rail-logos img { width: 26px; height: 26px; object-fit: contain; }
.wn-doc-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
@media (max-width: 900px) {
  .wn-docs { grid-template-columns: 1fr; }
  .wn-rail { position: static; }
}

/* ===== phones ===== */
@media (max-width: 640px) {
  .wn-page { padding-left: 16px; padding-right: 16px; }
  .wn-docs { gap: 24px; padding-top: 32px; }

  .wn-doc-head { gap: 10px; padding-bottom: 10px; }
  .wn-doc-head img { width: 32px !important; height: 32px !important; }
  .wn-doc-head h2 { font-size: 32px !important; line-height: 1.1 !important; }
  .wn-doc-num { font-size: 20px !important; }
  .wn-doc-tag { margin-left: 0 !important; flex-basis: 100%; }
  .wn-lede { font-size: 18px !important; line-height: 1.5 !important; }
  .wn-sub { font-size: 16px !important; line-height: 1.55 !important; }
  .wn-h3 { font-size: 24px !important; }

  /* any inline "term/value" table grid with a fixed side column stacks
     into one column on phones instead of squeezing text unreadably
     (the hero's own two-column layout is a wrapping flexbox now, not
     a grid, so it doesn't need or use this rule) */
  [style*="grid-template-columns:minmax(0,1fr) 200px"],
  [style*="grid-template-columns:minmax(0,1fr) 140px"],
  [style*="grid-template-columns:240px minmax(0,1fr)"],
  [style*="grid-template-columns:160px 90px minmax(0,1fr)"],
  [style*="grid-template-columns:160px 220px minmax(0,1fr)"],
  .wn-table-head,
  .wn-table-row {
    grid-template-columns: 1fr !important;
  }

  .wn-table-head > span:not(:last-child),
  .wn-table-row > span:not(:last-child) {
    padding-bottom: 2px;
  }

  .wn-hero { padding: 40px 0 32px !important; gap: 28px !important; }
}

.wn-doc-head { display: flex; align-items: baseline; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--border-strong); flex-wrap: wrap; }
.wn-doc-head img { width: 44px; height: 44px; image-rendering: pixelated; align-self: center; }
.wn-doc-head h2 { font: 400 52px/1.05 var(--font-display); letter-spacing: 0.03em; text-transform: uppercase; }
.wn-doc-num { font: 400 30px/1.2 var(--font-mono); color: var(--text-muted); }
.wn-doc-tag { margin-left: auto; font: 400 17px/1.2 var(--font-mono); }
.wn-lede { margin: 0; max-width: 74ch; font: 400 24px/1.5 var(--font-ui); color: var(--text-secondary); text-wrap: pretty; }
.wn-sub { margin: 0; max-width: 74ch; font: 400 19px/1.6 var(--font-ui); color: var(--text-secondary); text-wrap: pretty; }
.wn-sub--warn { color: var(--warning-text); }
.wn-h3 { margin: 0; font: 400 30px/1.2 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; }
.wn-block { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; }
.wn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.wn-grid--sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.wn-well { padding: 16px; background: var(--bg-well); border: 1px solid var(--border-subtle); border-radius: 4px; box-shadow: var(--bevel-inset); }
.wn-well-label { font: 400 15px/1.2 var(--font-mono); letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 8px; }
.wn-card { padding: 14px 16px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 4px; }
.wn-card--shadow { box-shadow: var(--shadow-panel); }
.wn-card-title { font: 400 19px/1.2 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; }
.wn-table { background: var(--bg-well); border: 1px solid var(--border-subtle); border-radius: 4px; box-shadow: var(--bevel-inset); overflow: hidden; }
.wn-table-head { display: grid; gap: 16px; padding: 10px 16px; background: var(--surface-raised); border-bottom: 1px solid var(--border-default); font: 400 15px/1.2 var(--font-mono); letter-spacing: 0.1em; color: var(--text-muted); }
.wn-table-row { display: grid; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); align-items: center; }
.wn-table-row:last-child { border-bottom: 0; }
.wn-mono { font-family: var(--font-mono); color: var(--text-primary); }
.wn-code { margin: 0; padding: 16px; overflow: auto; background: var(--ink-1000); border: 1px solid var(--border-subtle); border-radius: 4px; box-shadow: var(--bevel-inset); font: 400 17px/1.5 var(--font-mono); color: var(--ink-100); }
.wn-pill { padding: 3px 7px; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 2px; font: 400 15px/1.2 var(--font-mono); color: var(--text-secondary); }
.wn-config-tag { padding: 4px 8px; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 2px; }

/* ===== tree (command reference) ===== */
.wn-tree-toggle { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; padding: 12px 16px; font: 400 19px/1.2 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-primary); background: var(--surface-raised); border: 1px solid var(--border-default); border-left: 2px solid var(--border-strong); border-radius: 4px; box-shadow: var(--bevel-raised); cursor: pointer; }
.wn-tree-toggle--open { border-left-color: var(--info); box-shadow: var(--bevel-inset); }
.wn-tree { display: flex; flex-direction: column; background: var(--bg-well); border: 1px solid var(--border-subtle); border-radius: 4px; box-shadow: var(--bevel-inset); overflow: hidden; }
.wn-tree-row { display: flex; align-items: baseline; gap: 8px; border-top: 1px solid var(--border-subtle); cursor: pointer; }
.wn-tree-row:first-child { border-top: 0; }
.wn-tree-row--detail { cursor: default; background: var(--ink-900); }
.wn-tree-mark { width: 14px; flex: 0 0 auto; font: 400 15px/1.4 var(--font-mono); color: var(--text-muted); }
.wn-tree-meta { margin-left: auto; padding-left: 16px; text-align: right; max-width: 55%; font: 400 15px/1.4 var(--font-ui); color: var(--text-muted); text-wrap: pretty; }
.wn-tree-label-0 { font: 400 19px/1.3 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-primary); }
.wn-tree-label-1 { font: 400 15px/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--warning-text); }
.wn-tree-label-2 { font: 400 17px/1.35 var(--font-mono); color: var(--text-primary); }
.wn-tree-label-3 { font: 400 15px/1.4 var(--font-mono); letter-spacing: 0.08em; color: var(--info-text); flex: 0 0 auto; }
.wn-tree-loading { padding: 14px 16px; color: var(--text-muted); font-family: var(--font-mono); }

/* ===== flags & creator ===== */
.wn-flag-viewer { display: flex; flex-direction: column; gap: 20px; padding: 32px 16px 24px; background: var(--bg-well); border: 1px solid var(--border-subtle); border-radius: 4px; box-shadow: var(--bevel-inset); overflow: hidden; }
.wn-flag-strip { display: flex; align-items: center; justify-content: center; gap: 1.4%; width: 100%; }
.wn-flag-strip button { flex: 0 1 auto; padding: 0; background: none; border: 0; cursor: pointer; aspect-ratio: 1 / 2; transition: opacity 200ms var(--ease-out); }
.wn-flag-strip img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.wn-flag-nav { display: flex; align-items: center; justify-content: center; gap: 20px; }
.wn-flag-arrow { width: 40px; height: 40px; font: 400 24px/1 var(--font-mono); color: var(--text-primary); background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 4px; box-shadow: var(--bevel-raised); cursor: pointer; }
.wn-flag-arrow:hover { filter: brightness(1.12); }
.wn-flag-title { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 260px; }
.wn-flag-title span:first-child { font: 400 30px/1.2 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-primary); }
.wn-flag-title span:last-child { font: 400 17px/1.2 var(--font-mono); color: var(--text-muted); }
.wn-flag-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.wn-flag-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 4px; }
.wn-flag-gallery button { padding: 0; background: none; border: 0; cursor: pointer; line-height: 0; }
.wn-flag-gallery img { width: 100%; height: auto; image-rendering: pixelated; display: block; }

.wn-creator { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.wn-creator-panel { display: flex; flex-direction: column; gap: 16px; padding: 16px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 4px; box-shadow: var(--shadow-panel); }
.wn-creator-controls { flex: 1 1 240px; min-width: 240px; }
.wn-creator-canvas-wrap { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 20px; background: var(--bg-well); border: 1px solid var(--border-subtle); border-radius: 4px; box-shadow: var(--bevel-inset); }
.wn-creator-side { flex: 1 1 250px; min-width: 250px; display: flex; flex-direction: column; gap: 16px; }
#wn-canvas { width: 192px; height: 384px; image-rendering: pixelated; touch-action: none; cursor: crosshair; background: var(--ink-1000); border: 1px solid var(--border-default); }
.wn-chipbar { display: flex; gap: 4px; flex-wrap: wrap; }
.wn-chip-btn { height: 30px; padding: 0 10px; font: 400 17px/1.15 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 2px; cursor: pointer; }
.wn-chip-btn--on { color: var(--on-info); background: var(--info); border-color: var(--azure-300); box-shadow: var(--bevel-inset); }
.wn-swatch-input { display: flex; align-items: center; gap: 8px; }
.wn-swatch { width: 32px; height: 32px; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 2px; box-shadow: var(--bevel-inset); }
.wn-input-sm { height: 32px; padding: 0 8px; font: 400 19px/1.2 var(--font-mono); color: var(--text-primary); background: var(--bg-well); border: 1px solid var(--border-default); border-radius: 2px; box-shadow: var(--bevel-inset); }
.wn-input-full { height: 34px; padding: 0 8px; font: 400 19px/1.2 var(--font-ui); color: var(--text-primary); background: var(--bg-well); border: 1px solid var(--border-default); border-radius: 2px; box-shadow: var(--bevel-inset); width: 100%; }
.wn-gradient-swatch { height: 14px; cursor: crosshair; border-radius: 2px; border: 1px solid var(--border-subtle); }
.wn-charge-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.wn-charge-btn { display: flex; align-items: center; justify-content: center; padding: 4px; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 2px; cursor: pointer; }
.wn-charge-btn--on { background: var(--info); border-color: var(--azure-300); }
.wn-charge-btn img { width: 20px; height: 20px; image-rendering: pixelated; display: block; }
.wn-nation-swatch { width: 26px; height: 26px; border: 1px solid var(--border-default); border-radius: 2px; cursor: pointer; }
.wn-nation-swatch--on { border-color: var(--azure-300); box-shadow: var(--glow-info); }
.wn-premade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 6px; max-height: 200px; overflow: auto; padding: 10px; background: var(--bg-well); border: 1px solid var(--border-subtle); border-radius: 2px; box-shadow: var(--bevel-inset); }
.wn-premade-grid button { padding: 0; background: none; border: 0; cursor: pointer; line-height: 0; }
.wn-premade-grid img { width: 100%; height: auto; image-rendering: pixelated; display: block; }

/* ===== wiki: sidebar tree, search, breadcrumbs, page toc ===== */
.wn-wiki-search { position: relative; margin-bottom: 4px; }
.wn-wiki-search input { width: 100%; height: 36px; padding: 0 12px; font: 400 17px/1.2 var(--font-ui); color: var(--text-primary); background: var(--bg-well); border: 1px solid var(--border-default); border-radius: 4px; box-shadow: var(--bevel-inset); }
.wn-wiki-search input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring-focus); }
.wn-wiki-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 300; max-height: 60vh; overflow-y: auto; display: none; flex-direction: column; background: var(--surface-raised); border: 2px solid var(--border-default); border-radius: 4px; box-shadow: var(--shadow-float); }
.wn-wiki-search-results--open { display: flex; }
.wn-wiki-search-hit { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; text-decoration: none; border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.wn-wiki-search-hit:last-child { border-bottom: 0; }
.wn-wiki-search-hit:hover, .wn-wiki-search-hit--active { background: var(--surface-hover); }
.wn-wiki-search-hit-title { font: 400 19px/1.2 var(--font-display); letter-spacing: 0.04em; color: var(--text-primary); }
.wn-wiki-search-hit-meta { font: 400 15px/1.2 var(--font-mono); color: var(--text-muted); }
.wn-wiki-search-hit-excerpt { font: 400 15px/1.4 var(--font-ui); color: var(--text-secondary); }
.wn-wiki-search-empty { padding: 12px; font: 400 17px/1.3 var(--font-ui); color: var(--text-muted); }

.wn-rail-group { padding: 12px 8px 4px; font: 400 15px/1.2 var(--font-mono); letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; }
.wn-rail-group:first-of-type { padding-top: 4px; }

.wn-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 400 17px/1.3 var(--font-mono); color: var(--text-muted); }
.wn-breadcrumbs a { color: var(--text-muted); }
.wn-breadcrumbs a:hover { color: var(--link-hover); }
.wn-breadcrumbs .wn-crumb-sep { color: var(--ink-500); }
.wn-breadcrumbs .wn-crumb-current { color: var(--text-secondary); }

.wn-audience-row { display: flex; flex-wrap: wrap; gap: 6px; }
.wn-audience { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font: 400 15px/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 999px; }

.wn-toc { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 4px; max-height: calc(100vh - 120px); overflow-y: auto; }
.wn-toc-label { font: 400 15px/1.2 var(--font-mono); letter-spacing: 0.12em; color: var(--text-muted); padding-bottom: 6px; text-transform: uppercase; }
.wn-toc a { display: block; padding: 3px 0; font: 400 16px/1.3 var(--font-ui); color: var(--text-secondary); border-left: 2px solid transparent; padding-left: 8px; }
.wn-toc a:hover { color: var(--text-primary); }
.wn-toc a.wn-toc--sub { padding-left: 18px; font-size: 15px; }

.wn-wiki-3col { display: grid; grid-template-columns: 220px minmax(0,1fr) 200px; gap: 40px; align-items: start; padding-top: 56px; }
.wn-wiki-3col > .wn-doc-main { min-width: 0; }
@media (max-width: 1150px) { .wn-wiki-3col { grid-template-columns: 220px minmax(0,1fr); } .wn-wiki-3col > .wn-toc { display: none; } }
@media (max-width: 900px) { .wn-wiki-3col { grid-template-columns: 1fr; } .wn-wiki-3col > .wn-rail { position: static; } }

.wn-seealso { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--surface); border: 1px solid var(--border-subtle); border-left: 2px solid var(--info); border-radius: 4px; }
.wn-seealso-label { font: 400 15px/1.2 var(--font-mono); letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; }
.wn-seealso-links { display: flex; flex-direction: column; gap: 6px; }
.wn-seealso-links a { font: 400 19px/1.3 var(--font-ui); }
.wn-seealso-links a .wn-seealso-hint { display: block; font: 400 15px/1.4 var(--font-ui); color: var(--text-muted); }

.wn-callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: 4px; border: 1px solid var(--bd); background: var(--bg); }
.wn-callout--note { --bd: color-mix(in oklab, var(--info) 45%, transparent); --bg: color-mix(in oklab, var(--info) 10%, var(--surface)); }
.wn-callout--warn { --bd: color-mix(in oklab, var(--warning) 50%, transparent); --bg: color-mix(in oklab, var(--warning) 10%, var(--surface)); }
.wn-callout-icon { flex: 0 0 auto; font: 400 20px/1 var(--font-mono); }
.wn-callout-body { font: 400 17px/1.5 var(--font-ui); color: var(--text-secondary); }
.wn-callout-body strong { color: var(--text-primary); }

.wn-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.wn-cat-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 4px; box-shadow: var(--shadow-panel); text-decoration: none; }
.wn-cat-card:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.wn-cat-card-title { font: 400 24px/1.2 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-primary); }
.wn-cat-card-desc { font: 400 17px/1.5 var(--font-ui); color: var(--text-secondary); }
.wn-cat-card-count { font: 400 15px/1.2 var(--font-mono); color: var(--text-muted); }

/* ===== footer ===== */
.wn-footer { margin-top: 72px; padding-top: 32px; border-top: 2px solid var(--border-strong); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.wn-footer h4 { font: 400 24px/1.15 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.wn-footer-label { font: 400 15px/1.2 var(--font-mono); letter-spacing: 0.1em; color: var(--text-muted); }
.wn-footer a, .wn-footer span { font: 400 19px/1.3 var(--font-ui); }
.wn-footer p, .wn-footer > div > span.wn-muted { font: 400 17px/1.5 var(--font-ui); color: var(--text-muted); }
.wn-footer-col { display: flex; flex-direction: column; gap: 8px; }