/* ZEKASTRA Forensic diagrams: lawful-handling flow, raw-to-summary report cross-section, two-layer case timeline.
   Colours come from the site.css tokens, so the contrast checked there carries over; there are no inline styles. */
.fx-flow,.fx-tl,.fx-ba{
 --dg-ok:#4fd1a5;--dg-warn:#f2c46b;--dg-bad:#ff8a8a;
 --dg-mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
 --dg-surface:color-mix(in srgb,var(--panel) 70%,var(--bg));
 --dg-line:color-mix(in srgb,var(--hairline) 85%,transparent)
}
:root[data-theme=light] .fx-flow,:root[data-theme=light] .fx-tl,:root[data-theme=light] .fx-ba{--dg-ok:#0b7a55;--dg-warn:#8a5a00;--dg-bad:#b42318}

/* Lawful-handling flow */
.fx-flow{margin:0 0 40px;padding:24px;border:1px solid var(--dg-line);border-radius:14px;background:var(--dg-surface)}
.fx-flow-head h2,.fx-flow-head h3{margin:0 0 8px;font-size:clamp(1.3rem,2.2vw,1.7rem)}
.fx-flow-head p{max-width:72ch;margin:0 0 22px;color:var(--muted);font-size:.95rem}
.fx-flow-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.fx-flow-stage{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0}
.fx-flow-n{margin:0;color:var(--forensic);font-family:var(--dg-mono);font-size:.78rem;font-weight:700;letter-spacing:.1em}
.fx-flow-name{margin:0;font-size:1.05rem;line-height:1.25;letter-spacing:-.01em}
.fx-flow-box{padding:14px 14px 10px;border:1px solid var(--dg-line);border-left-width:3px;border-radius:10px;font-size:.88rem;line-height:1.55}
.fx-flow-box p{margin:0 0 8px}
.fx-flow-ok{border-color:color-mix(in srgb,var(--dg-ok) 38%,var(--dg-line));background:color-mix(in srgb,var(--dg-ok) 7%,transparent)}
.fx-flow-bad{border-color:color-mix(in srgb,var(--dg-bad) 38%,var(--dg-line));background:color-mix(in srgb,var(--dg-bad) 7%,transparent)}
.fx-flow-tag{font-family:var(--dg-mono);font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.fx-flow-ok .fx-flow-tag{color:var(--dg-ok)}
.fx-flow-bad .fx-flow-tag{color:var(--dg-bad)}
.fx-flow-title{color:var(--ink);font-weight:700}
.fx-flow-effect{color:var(--muted);font-size:.84rem}
.fx-flow-effect span{font-weight:700}
.fx-flow-refs-label{margin:4px 0 0;color:var(--muted);font-family:var(--dg-mono);font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.fx-flow-refs{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.fx-flow-refs a{display:inline-block;padding:3px 9px;border:1px solid var(--dg-line);border-radius:999px;color:var(--ink);font-size:.78rem;line-height:1.4;text-decoration:none}
.fx-flow-refs a:hover{border-color:var(--forensic);color:var(--forensic)}
.fx-flow-note{margin:20px 0 0;color:var(--muted);font-size:.84rem}
@media (min-width:1081px){.fx-flow-stage:not(:last-child)::after{content:"→";position:absolute;top:0;right:-16px;color:var(--muted);font-size:1rem;line-height:1}}
@media (max-width:1080px){.fx-flow-stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.fx-flow{padding:18px 16px}.fx-flow-stages{grid-template-columns:minmax(0,1fr)}}

/* Raw-to-summary cross-section */
.fx-ba-question{padding:12px 14px;border-left:3px solid var(--forensic);background:color-mix(in srgb,var(--forensic) 8%,transparent);font-size:.92rem}
.fx-ba{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:18px 0 12px}
.fx-ba-pane{margin:0;min-width:0;padding:16px;border:1px solid var(--dg-line);border-radius:12px;background:var(--dg-surface)}
.fx-ba-pane figcaption{margin:0 0 12px;color:var(--muted);font-size:.84rem}
.fx-ba-tag{display:block;margin-bottom:4px;color:var(--ink);font-family:var(--dg-mono);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.fx-ba-before .fx-ba-tag{color:var(--dg-warn)}
.fx-ba-after .fx-ba-tag{color:var(--dg-ok)}
.fx-ba-raw{margin:0 0 12px;padding:12px;overflow-x:auto;border:1px solid var(--dg-line);border-radius:8px;background:color-mix(in srgb,var(--bg) 70%,#000);color:var(--ink);font-family:var(--dg-mono);font-size:.74rem;line-height:1.6;white-space:pre}
:root[data-theme=light] .fx-ba-raw{background:#f1f3f9}
.fx-ba-problems{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:.84rem}
.fx-ba-problems li{position:relative;padding-left:20px;color:var(--muted)}
.fx-ba-problems li::before{content:"×";position:absolute;left:2px;top:0;color:var(--dg-bad);font-weight:700}
.fx-ba-arrow{color:var(--muted);font-size:1.4rem;line-height:1;text-align:center;transform:rotate(90deg)}
.fx-ba-block h3 .fx-part-n{margin-right:8px;color:var(--forensic);font-family:var(--dg-mono);font-size:.78rem;letter-spacing:.08em}
.fx-ba-block{margin:0 0 14px}
.fx-ba-block h3{margin:0 0 6px;font-size:1rem}
.fx-ba-block p{margin:0 0 8px;font-size:.9rem;line-height:1.6}
.fx-ba-answers{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.fx-ba-answers li{padding:10px 12px;border:1px solid var(--dg-line);border-radius:8px}
.fx-ba-q{color:var(--muted);font-size:.82rem}
.fx-ba-note{color:var(--muted);font-size:.86rem}

/* Two-layer case timeline (built by case.js after the order is solved) */
.fx-tl{margin:18px 0;padding:16px;border:1px solid var(--dg-line);border-radius:12px;background:var(--dg-surface)}
.fx-tl figcaption{display:grid;gap:4px;margin-bottom:10px;font-size:.9rem}
.fx-tl figcaption span{color:var(--muted)}
.fx-tl svg{display:block;width:100%;max-width:440px;height:auto;margin:0 auto}
.fx-tl .tl-col{fill:var(--muted);font:700 10.5px var(--dg-mono);letter-spacing:.06em;text-transform:uppercase}
.fx-tl .tl-axis{stroke:var(--line);stroke-width:2;stroke-linecap:round}
.fx-tl .tl-link{fill:none;stroke-width:2.2}
.fx-tl .tl-same{stroke:var(--forensic)}
.fx-tl .tl-moved{stroke:var(--dg-warn);stroke-dasharray:5 3}
.fx-tl .tl-dot{fill:var(--panel);stroke:var(--forensic);stroke-width:2.2}
.fx-tl .tl-id{fill:var(--ink);font:700 12px var(--dg-mono)}
.fx-tl .tl-time{fill:var(--ink);font:600 12.5px var(--dg-mono)}
.fx-tl .tl-sub{fill:var(--muted);font:10.5px var(--dg-mono)}
.fx-tl-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0 12px;color:var(--muted);font-size:.8rem}
.fx-tl-key-same::before,.fx-tl-key-moved::before{content:"";display:inline-block;width:22px;margin-right:8px;vertical-align:middle;border-top:2px solid var(--forensic)}
.fx-tl-key-moved::before{border-top:2px dashed var(--dg-warn)}
.fx-tl-list{display:grid;gap:6px;margin:0;padding-left:22px;font-size:.84rem;line-height:1.5;overflow-wrap:anywhere}