/* FFT parchment reskin for the three Archify story diagrams (main-storyline, cast-and-factions,
   great-war-meteor), embedded on /storylines. Added 2026-09-17 per Carlos: the maps were a plain
   white-background modern flowchart inside an otherwise FFT-styled site.

   This file only overrides Archify's own "editorial" preset (a built-in warm paper/ink theme,
   switched on via each diagram's root data-preset="editorial") with the site's exact parchment
   palette and pixel font -- Archify's layout/SVG-generation logic, data, toolbar, full-screen view
   and every link are untouched. Load order matters: this file must be linked AFTER the diagram's
   own <style> block so its rules win on equal specificity (see the three diagram HTML files). */

/* Site palette tokens, copied from assets/site-shell.css (--ei-paper / --ei-ink / --ei-deep / --ei-gold)
   so a future change to the site palette can be mirrored here without re-deriving hex values. */
[data-preset="editorial"][data-theme="light"] {
  --bg: #e8e3c9;              /* --ei-paper */
  --grid: #d0ceb2;            /* --ei-paper-dim */
  --panel: #e8e3c9;           /* node/box fill: the same parchment, not white */
  --panel-border: #685f46;    /* dark ink-brown edge, matches character-party.css --border-color */
  --lane-fill: rgba(32, 45, 44, 0.05);
  --lane-stroke: #202d2c;     /* --ei-deep: dark green lane border, under the chapter headers */
  --text: #292e2a;            /* --ei-ink */
  --text-muted: #50594d;      /* --ei-ink-soft */
  --text-dim: #6b6552;
  --text-faint: #8f8b76;
  --mask: #e8e3c9;
  --arrow: #50594d;           /* thin dark connector lines, not the default slate-blue */
  --arrow-emphasis: #8a2f24;  /* warm brick-red, matches the site's .bad/.closed accent */
  --toolbar-bg: #e8e3c9;
  --toolbar-border: #685f46;
  --toolbar-text: #292e2a;
  --toolbar-hover: #d0ceb2;
  --toolbar-menu-bg: #e8e3c9;
  /* Category colours: one warm parchment family instead of cyan/emerald/violet software-diagram
     colours, so the map reads as a world, not a tech-stack chart. Node fills stay light and legible;
     the matching -stroke doubles as that category's direct-svg-child header/subtitle text colour
     (see the svg > text rule below), so each stays readable against the light lane background. */
  --frontend-fill: rgba(107, 85, 38, 0.10);
  --frontend-stroke: #6b5526;
  --backend-fill: rgba(44, 74, 66, 0.10);
  --backend-stroke: #2c4a42;
  --database-fill: rgba(90, 71, 25, 0.10);
  --database-stroke: #5a4719;
  --cloud-fill: rgba(138, 47, 36, 0.08);
  --cloud-stroke: #8a2f24;
  --security-fill: rgba(138, 47, 36, 0.08);
  --security-stroke: #8a2f24;
  --messagebus-fill: rgba(90, 71, 25, 0.10);
  --messagebus-stroke: #5a4719;
  --external-fill: rgba(143, 139, 118, 0.14);
  --external-stroke: #6f6658;
}

/* The site's pixel/mono menu font (same file as every other page), JetBrains Mono kept only as a
   fallback for characters VT323 does not cover. */
@font-face { font-family: EvilIceMenu; src: url('/art/character-fonts/vt323-latin.woff2') format('woff2'); font-display: swap; }
html[data-preset="editorial"] { font-family: EvilIceMenu, 'JetBrains Mono', ui-monospace, monospace; }
html[data-preset="editorial"] svg text { font-family: EvilIceMenu, 'JetBrains Mono', ui-monospace, monospace; }
/* VT323 is a display face: node/edge labels stay a size where it is still easy to read, headings
   and toolbar chrome (already large) get a touch more letter-spacing to match the site's menu type. */
html[data-preset="editorial"] .header h1,
html[data-preset="editorial"] .card h3,
html[data-preset="editorial"] .toolbar,
html[data-preset="editorial"] .toolbar button { letter-spacing: .5px; }

/* Bevelled FFT-frame boxes: a light/dark drop-shadow pair on every node rect, approximating the
   inset bevel every other panel on the site uses (.fft-panel, .ring-selector, the FFT window
   texture), without touching Archify's generated SVG defs. */
html[data-preset="editorial"] svg [data-node-id] rect,
html[data-preset="editorial"] svg [data-graph-role="node-frame"] {
  filter: drop-shadow(1px 1px 0 #fff8e0) drop-shadow(-1px -1px 0 #8a806f);
}

/* Chapter / thread headers: the two rows of text that sit directly on the SVG canvas (the "NN /
   thread name" subtitles and the "Chapter N - ..." titles) are the diagram's own section headers.
   Archify colours them per data category, which read as ordinary chart text on the white theme;
   this pins all of them to the site's dark, near-black green (--ei-deep) and bolds them so they
   read as headers against the parchment lanes, the same way .chapter summary reads on this page. */
html[data-preset="editorial"] svg > text {
  fill: #202d2c !important;
  font-weight: 700;
}

/* Legend key swatches (the small squares in the "Legend" row): dark green, matching .pill.live's
   own background on this page. Their LABEL text stays the normal dark ink (.t-muted, already set
   above) -- it sits on the light parchment beside the swatch, not inside a dark chip, so it must not
   also go light or it disappears against the parchment. */
html[data-preset="editorial"] svg [data-legend-kind] rect {
  fill: #202d2c;
  stroke: #8d9887;
}
/* Any genuine on-node status chip (a small filled tag drawn ON a dark shape) still gets light text. */
html[data-preset="editorial"] svg [data-node-tag] rect {
  fill: #202d2c;
  stroke: #8d9887;
}
html[data-preset="editorial"] svg [data-node-tag] text {
  fill: #f3eed8;
}