/* Systems-work sci-fi layer (owner directive, 2026-10-28).
   Instrument-plate schematics for /work/: dark plate, survey grid, call-signs in
   IBM Plex Mono, component names in Space Grotesk, signal lines that pulse with the flow.
   Colour carries meaning: cyan data, green deterministic, magenta agent, amber gate/human,
   blue record, red rejected. The figures stay dark in both Night and Day. */

:root{--sf-bg:#04060c;--sf-plate:#060a13;--sf-line:#1d3352;--sf-cyan:#4fd8ff;--sf-green:#3dffa2;--sf-mag:#ff5ad1;
  --sf-amber:#ffb02e;--sf-blue:#6f9dff;--sf-red:#ff5a6a;--sf-ink:#e8f2ff;--sf-soft:#9fb3cc;--sf-dim:#5d7391}

/* the plate: beats the edition reader's light-plate rule */
html body figure.sf-fig:not(#sf-a):not(#sf-b){
  margin:2.2rem auto!important;padding:0!important;max-width:1000px;background:var(--sf-bg)!important;
  border:1px solid var(--sf-line)!important;border-radius:6px!important;overflow:hidden;
  box-shadow:0 0 0 1px rgba(79,216,255,.05),0 28px 70px -34px rgba(79,216,255,.45),inset 0 1px 0 rgba(159,216,255,.08)!important;
  break-inside:avoid;column-span:all}
html body figure.sf-fig:not(#sf-a) .sf-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#2a4466 transparent;
  background:transparent!important;border:0!important;padding:0!important;margin:0!important}
html body figure.sf-fig:not(#sf-a) svg.sf-svg{display:block!important;width:100%!important;min-width:780px;max-width:none!important;height:auto!important;
  background:var(--sf-bg)!important;border:0!important;border-radius:0!important;filter:none!important;box-shadow:none!important;margin:0!important}
html body figure.sf-fig:not(#sf-a):not(#sf-b) figcaption,html body figure.sf-fig:not(#sf-a):not(#sf-b) figcaption *{
  font:400 .78rem/1.55 'IBM Plex Mono',ui-monospace,monospace!important;color:var(--sf-soft)!important;text-align:left!important;
  letter-spacing:.01em;hyphens:none!important}
html body figure.sf-fig:not(#sf-a):not(#sf-b) figcaption{margin:0!important;padding:.85rem 1.1rem .95rem!important;
  background:var(--sf-plate)!important;border-top:1px solid #15253c!important;max-width:none!important}
html body figure.sf-fig:not(#sf-a):not(#sf-b) figcaption strong{color:var(--sf-ink)!important;font-weight:500!important}
html body figure.sf-fig:not(#sf-a):not(#sf-b) figcaption .sf-cap-k{color:var(--sf-cyan)!important;letter-spacing:.14em!important;margin-right:.35rem}

/* type inside the plate */
.sf-svg text{font-family:'IBM Plex Mono',ui-monospace,monospace;stroke:none!important}
.sf-svg .sf-title{font:600 15px 'Space Grotesk',system-ui,sans-serif;letter-spacing:-.005em}
.sf-svg .sf-chip{font:500 13.5px 'Space Grotesk',system-ui,sans-serif}
.sf-svg .sf-big{font:600 34px 'Space Grotesk',system-ui,sans-serif;letter-spacing:-.02em}
.sf-svg .sf-tag{font-size:9.5px;font-weight:500;letter-spacing:.14em}
.sf-svg .sf-sub{font-size:10.5px;letter-spacing:.03em}
.sf-svg .sf-head{font-size:11px;font-weight:500;letter-spacing:.2em}
.sf-svg .sf-leg{font-size:9px;letter-spacing:.1em}
.sf-svg .sf-foot{font-size:9px;letter-spacing:.2em}
.sf-svg .sf-elabel{font-size:9.5px;font-weight:500;letter-spacing:.1em}
.sf-svg .sf-colhead{font-size:10px;font-weight:500;letter-spacing:.16em}
.sf-svg .sf-verdict{font-size:12px;font-weight:500;letter-spacing:.2em}
.sf-svg .sf-before{font-size:13px;letter-spacing:.04em}

/* motion: a signal packet travels each wire in the direction of flow */
.sf-svg .sf-pulse{stroke-dasharray:2 26;stroke-dashoffset:0;opacity:.95;animation:sf-run 2.6s linear infinite;filter:drop-shadow(0 0 3px currentColor)}
.sf-svg .sf-node .sf-shape{transition:fill-opacity .2s ease}
.sf-svg .sf-node:hover .sf-shape{fill-opacity:.16}
.sf-svg .sf-barwin{filter:drop-shadow(0 0 6px rgba(61,255,162,.6))}
.sf-svg .sf-core{animation:sf-beat 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes sf-run{to{stroke-dashoffset:-56}}
@keyframes sf-beat{50%{transform:scale(1.8);opacity:.5}}
@media (prefers-reduced-motion:reduce){.sf-svg .sf-pulse{display:none}.sf-svg .sf-core{animation:none}}
@media print{.sf-svg .sf-pulse{display:none}}

/* ---- Systems Work cover: procedural sci-fi art, dark instrument strip (2026-10-28) ---- */
html:root.rr-ed body .rr-ecover-css.sf-cover{background:#04070f var(--art) center 70%/cover no-repeat!important;
  border-radius:4px!important;box-shadow:0 0 0 1px rgba(79,216,255,.35),0 0 28px -6px rgba(79,216,255,.35),0 30px 60px -24px rgba(0,0,0,.9)!important}
html:root.rr-ed body .rr-ecover-css.sf-cover .rr-cv-t{background:linear-gradient(180deg,rgba(4,8,16,.96) 0,rgba(4,8,16,.86) 66%,rgba(4,8,16,0) 100%)!important}
html:root.rr-ed body .rr-ecover-css.sf-cover :is(.rr-cv-t,.rr-cv-t *){color:#e9f6ff!important;-webkit-text-fill-color:#e9f6ff!important}
html:root.rr-ed body .rr-ecover-css.sf-cover .rr-cv-k{font-family:'IBM Plex Mono',ui-monospace,monospace!important;border-bottom-color:rgba(79,216,255,.55)!important}
html:root.rr-ed body .rr-ecover-css.sf-cover .rr-cv-k span{color:#4fd8ff!important;-webkit-text-fill-color:#4fd8ff!important}
html:root.rr-ed body .rr-ecover-css.sf-cover .rr-cv-h{font-family:'Space Grotesk',system-ui,sans-serif!important;font-weight:600!important;letter-spacing:-.015em!important}
html:root.rr-ed body .rr-ecover-css.sf-cover .rr-cv-a{border-top-color:rgba(79,216,255,.55)!important;color:#9fb6c8!important;-webkit-text-fill-color:#9fb6c8!important}

/* ---- case-study at-a-glance grid as a HUD readout ---- */
html:root.rr-ed body .work-summary{border:1px solid rgba(79,216,255,.28)!important;background:#060b16!important;border-radius:2px!important}
/* the panel is dark in Day too, so its text must be light in Day too */
html:root.rr-ed body .work-summary :is(p,li,span,dd,dt,strong,em,a,.mv-lead){color:#d7e6f5!important;-webkit-text-fill-color:#d7e6f5!important}
html:root.rr-ed body .work-summary :is(strong,b,.mv-lead){color:#ffffff!important;-webkit-text-fill-color:#fff!important}
html:root.rr-ed body .work-summary section{border-color:rgba(79,216,255,.22)!important;background:transparent!important}
html:root.rr-ed body .work-summary h2{font:500 .7rem/1.3 'IBM Plex Mono',ui-monospace,monospace!important;letter-spacing:.16em!important;color:#4fd8ff!important;-webkit-text-fill-color:#4fd8ff!important;text-transform:uppercase}
html:root.rr-ed body .work-summary h2::before{content:'▸ ';color:#3dffa2}

/* ---- /work/designs/ architecture figures: same schematic language (CSS skin) ---- */
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b){--sk-bg:#050a14;--sk-ink:#e6f3ff;--sk-mut:#8aa3c0;--sk-line:rgba(79,216,255,.26);
  --sk-c:#4fd8ff;--sk-g:#3dffa2;--sk-m:#ff5ad1;--sk-a:#ffb02e;--sk-b:#6f9dff;--sk-r:#ff5a6a;
  background:#050a14!important;border:1px solid rgba(79,216,255,.35)!important;border-top:2px solid #4fd8ff!important;border-radius:2px!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 40px -18px rgba(79,216,255,.5)!important;padding:0!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b)>svg{background-color:#050a14!important;
  background-image:linear-gradient(rgba(79,216,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(79,216,255,.05) 1px,transparent 1px)!important;
  background-size:24px 24px!important;filter:none!important;border-radius:0!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg text{font-family:'IBM Plex Mono',ui-monospace,monospace!important;fill:var(--sk-ink)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.node-title,.record-title,.science-title){font-family:'Space Grotesk',system-ui,sans-serif!important;fill:var(--sk-ink)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.node-subtitle,.record-rule,.record-owner,.degrade-copy,.pattern-recovery,.runtime-note text,.arch-legend text,.sequence-legend text,.science-status){fill:var(--sk-mut)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg .science-panel{fill:var(--sk-c)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.zone-labels text,.deploy-zone text,.lineage-source-band text,.recovery-columns text){fill:var(--sk-c)!important;letter-spacing:.14em!important;text-transform:uppercase}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.science-top-rule,.science-divider){stroke:var(--sk-line)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg .science-top-rule{stroke:var(--sk-c)!important;stroke-width:2!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.arch-zones,.federated-zones,.spine-zones,.event-lanes,.lifecycle-zones,.deploy-zone,.lineage-source-band) rect{fill:rgba(79,216,255,.025)!important;stroke:var(--sk-line)!important;stroke-dasharray:2 4}
/* nodes: dark glass with a coloured edge; every kind stays legible */
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.arch-node,.lineage-record,.fault-node,.recovery-node,.classifier-node) rect{fill:#0a1424!important;stroke:var(--sk-b)!important;stroke-width:1.2!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.active-node,.deploy-node,.sequence-actor) rect{fill:rgba(61,255,162,.07)!important;stroke:var(--sk-g)!important;stroke-width:1.5!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg .source-node rect{fill:rgba(79,216,255,.08)!important;stroke:var(--sk-c)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.channel-node,.classifier-node) rect{fill:rgba(255,90,209,.08)!important;stroke:var(--sk-m)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.rail-node,.fault-node) rect{fill:rgba(255,176,46,.07)!important;stroke:var(--sk-a)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg .recovery-node rect{fill:rgba(255,90,209,.06)!important;stroke:var(--sk-m)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg .lineage-record rect{fill:rgba(111,157,255,.07)!important;stroke:var(--sk-b)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.optional-node,.optional-record){opacity:.55!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.optional-node,.optional-record) rect{fill:transparent!important;stroke:var(--sk-mut)!important;stroke-dasharray:4 4}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg .record-field{fill:var(--sk-c)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg .degrade-title{fill:var(--sk-a)!important}
/* bands that were solid ink become lit rails */
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.event-spine,.lineage-rail,.recovery-rail) rect{fill:rgba(61,255,162,.08)!important;stroke:var(--sk-g)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.event-spine,.lineage-rail,.recovery-rail) text{fill:var(--sk-ink)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.event-spine,.lineage-rail,.recovery-rail) text:first-of-type{fill:var(--sk-g)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg .gate-frame rect{fill:rgba(255,176,46,.06)!important;stroke:var(--sk-a)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg .alt-frame rect{fill:rgba(255,176,46,.05)!important;stroke:var(--sk-a)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.alt-frame text,.gate-frame text){fill:var(--sk-a)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg .sequence-canvas{fill:transparent!important;stroke:var(--sk-line)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg .lifeline{stroke:rgba(79,216,255,.3)!important}
/* links */
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.flow,.fault-flow,.recovery-flow,.lineage-chain,.seq-message) :is(line,path){stroke:var(--sk-c)!important;stroke-opacity:.85}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.data-flow,.deploy-flow) line{stroke:var(--sk-c)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.event-flow,.lifecycle-flow) line{stroke:var(--sk-g)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.proposal-flow,.seq-message.proposal) :is(line,path){stroke:var(--sk-m)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.evidence-link,.evidence-flow,.lineage-evidence,.seq-message.evidence) :is(line,path){stroke:var(--sk-a)!important;opacity:.9!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg .fault-flow line{stroke:var(--sk-r)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg .recovery-flow line{stroke:var(--sk-m)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg marker path{fill:var(--sk-c)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.edge-label,.seq-message text){fill:var(--sk-mut)!important;stroke:#050a14!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg .arch-legend line{stroke:var(--sk-c)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg .arch-legend line.proposal{stroke:var(--sk-m)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg .arch-legend line.evidence{stroke:var(--sk-a)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) svg .arch-legend rect{fill:rgba(61,255,162,.07)!important;stroke:var(--sk-g)!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) figcaption{background:#050a14!important;border-top:1px solid rgba(79,216,255,.22)!important;color:#9fb6c8!important;
  font:400 .72rem/1.55 'IBM Plex Mono',ui-monospace,monospace!important;text-align:left!important;font-style:normal!important}
html body figure.enterprise-diagram[data-sf-skin]:not(#sf-a):not(#sf-b) figcaption :is(b,strong){color:#4fd8ff!important}

/* ---- phones: the portrait plate (render_m.py) replaces the landscape one ---- */
html body figure.sf-fig:not(#sf-a) .sf-port{display:none}
html body figure.sf-fig:not(#sf-a) svg.sf-svg-m{min-width:0!important;width:100%!important;max-width:560px!important;margin:0 auto!important}
@media (max-width:719.98px){
  html body figure.sf-fig:not(#sf-a) .sf-scroll{display:none!important}
  html body figure.sf-fig:not(#sf-a) .sf-port{display:block!important;background:var(--sf-bg)}
  html body figure.sf-fig:not(#sf-a):not(#sf-b){margin:1.6rem 0!important;max-width:100%!important}
}

/* ---- Mermaid figures on papers and research (scifi_mermaid.py): the same instrument plate ----
   Beats pplx.css night `main :is(figure,.mermaid-frame) svg{background:#f4f4ef;filter:brightness(.92)}`
   and ed-reader `figure:has(svg){background:#f4f2ec!important}`; dark in Day and Night alike. */
html body figure.mermaid-figure[data-sf-skin]:not(#sf-a):not(#sf-b){
  background:#050a14!important;color:#e6f3ff!important;border:1px solid rgba(79,216,255,.32)!important;border-top:2px solid #4fd8ff!important;
  border-radius:3px!important;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 24px 60px -34px rgba(79,216,255,.5)!important;
  padding:0!important;margin:2rem auto!important;overflow:hidden;filter:none!important;
  background-image:linear-gradient(rgba(159,216,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(159,216,255,.045) 1px,transparent 1px)!important;
  background-size:24px 24px!important}
html body figure.mermaid-figure[data-sf-skin]:not(#sf-a):not(#sf-b) :is(.mermaid-heading,.figure-head){display:flex!important;justify-content:space-between;align-items:baseline;gap:1rem;
  margin:0!important;padding:.8rem 1.1rem .7rem!important;border:0!important;border-bottom:1px solid rgba(79,216,255,.2)!important;background:rgba(4,8,16,.75)!important}
html body figure.mermaid-figure[data-sf-skin]:not(#sf-a):not(#sf-b) :is(.mermaid-heading strong,.figure-title){font:500 .74rem/1.35 'IBM Plex Mono',ui-monospace,monospace!important;
  letter-spacing:.16em!important;text-transform:uppercase;color:#4fd8ff!important;-webkit-text-fill-color:#4fd8ff!important}
html body figure.mermaid-figure[data-sf-skin]:not(#sf-a):not(#sf-b) :is(.mermaid-heading strong,.figure-title)::before{content:'▸ ';color:#3dffa2}
html body figure.mermaid-figure[data-sf-skin]:not(#sf-a):not(#sf-b) :is(.mermaid-heading span,.figure-source){font:400 .66rem/1.3 'IBM Plex Mono',ui-monospace,monospace!important;
  letter-spacing:.14em!important;text-transform:uppercase;color:#6f86a3!important;-webkit-text-fill-color:#6f86a3!important;white-space:nowrap}
html body figure.mermaid-figure[data-sf-skin]:not(#sf-a):not(#sf-b) :is(.mermaid-frame,.figure-frame,pre.mermaid){background:transparent!important;border:0!important;box-shadow:none!important;
  margin:0!important;padding:1.1rem .9rem!important;filter:none!important;color:#e6f3ff!important}
html body figure.mermaid-figure[data-sf-skin]:not(#sf-a):not(#sf-b) svg{background:transparent!important;filter:none!important;border:0!important;box-shadow:none!important}
html body figure.mermaid-figure[data-sf-skin]:not(#sf-a):not(#sf-b) svg :is(.nodeLabel,.edgeLabel,.label,text,span,p){color:#e6f3ff!important;fill:#e6f3ff;-webkit-text-fill-color:currentColor}
html body figure.mermaid-figure[data-sf-skin]:not(#sf-a):not(#sf-b) svg .edgeLabel :is(p,span,rect,foreignObject div){background:#050a14!important;color:#ffb02e!important}
html body figure.mermaid-figure[data-sf-skin]:not(#sf-a):not(#sf-b) figcaption,html body figure.mermaid-figure[data-sf-skin]:not(#sf-a):not(#sf-b) figcaption *{
  font:400 .76rem/1.55 'IBM Plex Mono',ui-monospace,monospace!important;color:#9fb3cc!important;-webkit-text-fill-color:#9fb3cc!important;text-align:left!important;hyphens:none!important}
html body figure.mermaid-figure[data-sf-skin]:not(#sf-a):not(#sf-b) figcaption{margin:0!important;padding:.8rem 1.1rem .9rem!important;max-width:none!important;
  background:rgba(4,8,16,.85)!important;border-top:1px solid rgba(79,216,255,.16)!important}
html body figure.mermaid-figure[data-sf-skin]:not(#sf-a):not(#sf-b) figcaption .figure-note{display:block;margin-top:.3rem;color:#6f86a3!important;-webkit-text-fill-color:#6f86a3!important}
html body figure.mermaid-figure[data-sf-skin]:not(#sf-a):not(#sf-b) .mermaid-frame{overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin;scrollbar-color:#2a4466 transparent}
@media (max-width:719.98px){html body figure.mermaid-figure[data-sf-skin]:not(#sf-a):not(#sf-b) :is(.mermaid-heading,.figure-head){flex-wrap:wrap;gap:.2rem .8rem}}
@media (max-width:719.98px){
  html body figure.mermaid-figure[data-sf-skin]:not(#sf-a):not(#sf-b) pre.mermaid{min-width:0!important;width:auto!important;padding:.9rem .5rem!important}
  html body figure.mermaid-figure[data-sf-skin]:not(#sf-a):not(#sf-b) svg{max-width:100%!important;height:auto!important;margin:0 auto!important;display:block}
  html body figure.mermaid-figure[data-sf-skin]:not(#sf-a):not(#sf-b) svg[aria-roledescription="sequence"]{min-width:600px!important;max-width:none!important}
}