/* Shared styles for DSA Fundamentals: drawn diagrams (inline SVG) and code walkthroughs.
   Colors come from the page's CSS variables so diagrams follow the light/dark theme. */
:root{ --dg-line:#4ADE80; --dg-hot:#F0B429; --dg-new:#38BDF8; --dg-dead:#F2545B; }
:root[data-theme="light"]{ --dg-line:#15803D; --dg-hot:#B45309; --dg-new:#0369A1; --dg-dead:#DC2626; }

/* ---------- figures ---------- */
.fig{ margin:6px 0 22px; padding:20px 14px 12px; background:var(--panel); border:1px solid var(--panel-border); border-radius:10px; overflow-x:auto; }
.fig svg{ display:block; margin:0 auto; max-width:100%; height:auto; }
@media (max-width:600px){ .fig{ padding:16px 10px 10px; } .fig svg{ min-width:440px; } }
.fig figcaption{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim); text-align:center; margin-top:10px; line-height:1.5; }
.fig .row-label{ font-family:var(--font-mono); font-size:11px; color:var(--text-dim); margin:14px 0 4px 4px; }
.fig .row-label:first-child{ margin-top:0; }

.dg .box{ fill:var(--bg); stroke:var(--dg-line); stroke-width:1.6; }
.dg .box.hot{ stroke:var(--dg-hot); stroke-width:2.2; }
.dg .box.new{ stroke:var(--dg-new); stroke-width:2.2; }
.dg .box.dead{ stroke:var(--dg-dead); stroke-dasharray:5 4; opacity:.55; }
.dg .box.dim{ opacity:.35; }
.dg .fillhot{ fill:var(--dg-hot); opacity:.14; }
.dg .div{ stroke:var(--panel-border); stroke-width:1.2; }
.dg .val{ fill:var(--text); font:600 14px var(--font-mono); text-anchor:middle; dominant-baseline:central; }
.dg .small{ fill:var(--text-muted); font:500 11px var(--font-mono); text-anchor:middle; dominant-baseline:central; }
.dg .lbl{ fill:var(--text-muted); font:600 11px var(--font-mono); text-anchor:middle; }
.dg .lbl.hot{ fill:var(--dg-hot); }
.dg .lbl.new{ fill:var(--dg-new); }
.dg .lbl.dead{ fill:var(--dg-dead); }
.dg .start{ text-anchor:start; }
.dg .dot{ fill:var(--dg-line); }
.dg .ln{ stroke:var(--text-muted); stroke-width:1.6; fill:none; }
.dg .ln.hot{ stroke:var(--dg-hot); stroke-width:2; }
.dg .ln.new{ stroke:var(--dg-new); stroke-width:2; }
.dg .ln.dead{ stroke:var(--dg-dead); stroke-dasharray:5 4; }
.dg .ah{ fill:var(--text-muted); }
.dg .ah.hot{ fill:var(--dg-hot); }
.dg .ah.new{ fill:var(--dg-new); }
.dg .ah.dead{ fill:var(--dg-dead); }
.dg .none{ fill:var(--text-dim); font:600 12px var(--font-mono); dominant-baseline:central; }

/* ---------- legend ---------- */
.legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; font-family:var(--font-mono); font-size:11px; color:var(--text-dim); margin-top:10px; }
.legend i{ display:inline-block; width:14px; height:10px; border-radius:2px; border:2px solid; vertical-align:-1px; margin-right:6px; }
.legend .k-line{ border-color:var(--dg-line); }
.legend .k-hot{ border-color:var(--dg-hot); }
.legend .k-new{ border-color:var(--dg-new); }
.legend .k-dead{ border-color:var(--dg-dead); border-style:dashed; }

/* ---------- code walkthrough ---------- */
.walk{ margin:0 0 22px; }
.walk pre{ margin-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; }
.walk-steps{ list-style:none; margin:0; padding:14px 18px 6px; background:var(--bg); border:1px solid var(--panel-border); border-top:none; border-radius:0 0 8px 8px; counter-reset:step; }
.walk-steps li{ position:relative; padding-left:34px; margin-bottom:12px; font-size:14.5px; color:var(--text-muted); counter-increment:step; }
.walk-steps li::before{ content:counter(step); position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%; background:var(--panel); border:1px solid var(--dg-line); color:var(--dg-line); font:600 11px/22px var(--font-mono); text-align:center; }
.walk-steps li code{ font-size:12.5px; }
.walk-title{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim); margin:0 0 6px 2px; letter-spacing:.04em; text-transform:uppercase; }

/* extra diagram pieces: arrays, trees, graphs */
.dg .val.sm{ font-size:11.5px; }
.dg .wbg{ fill:var(--panel); }
.dg .w{ fill:var(--dg-hot); font:600 11.5px var(--font-mono); text-anchor:middle; dominant-baseline:central; }
.dg .none.hot{ fill:var(--dg-hot); }
.dg .none.new{ fill:var(--dg-new); }
.dg .none.dead{ fill:var(--dg-dead); }
.dg .box.done{ stroke:var(--dg-new); fill:var(--bg); }
.dg .axis{ stroke:var(--panel-border); stroke-width:1.2; }
.dg .curve{ fill:none; stroke-width:2.2; }
.dg .grid{ stroke:var(--panel-border); stroke-width:1; stroke-dasharray:3 4; }
.dg tspan.hl{ fill:var(--dg-hot); }
.dg .bdg{ fill:var(--dg-hot); }
.dg .bdgt{ fill:var(--bg); font:700 10px var(--font-mono); text-anchor:middle; dominant-baseline:central; }
.dg .ln.dash{ stroke-dasharray:4 4; }
/* growth-curve colours (intro page) */
.dg .curve.c1{ stroke:var(--text-dim); } .dg .lbl.kc1{ fill:var(--text-dim); }
.dg .curve.c2{ stroke:var(--dg-line); } .dg .lbl.kc2{ fill:var(--dg-line); }
.dg .curve.c3{ stroke:var(--dg-new); }  .dg .lbl.kc3{ fill:var(--dg-new); }
.dg .curve.c4{ stroke:#A78BFA; }        .dg .lbl.kc4{ fill:#A78BFA; }
.dg .curve.c5{ stroke:var(--dg-hot); }  .dg .lbl.kc5{ fill:var(--dg-hot); }
.dg .curve.c6{ stroke:var(--dg-dead); } .dg .lbl.kc6{ fill:var(--dg-dead); }
:root[data-theme="light"] .dg .curve.c4{ stroke:#7C3AED; }
:root[data-theme="light"] .dg .lbl.kc4{ fill:#7C3AED; }
/* standalone step list (DSA problem pages: Code Explanation) */
.walk-steps.solo{ border-top:1px solid var(--panel-border); border-radius:8px; margin-bottom:22px; }
.walk-lead{ margin-bottom:10px; }
.legend .k-done{ border-color:var(--dg-new); }
.legend .k-dim{ border-color:var(--panel-border); }
/* DSA problem pages: let long example outputs wrap on phones */
.io div{ overflow-wrap:anywhere; }

/* system diagrams (Computer Networks, AI + Backend): sequence lifelines, groups, bands */
.dg .life{ stroke:var(--panel-border); stroke-width:1.4; stroke-dasharray:4 4; }
.dg .box.actor{ fill:var(--panel); stroke:var(--text-dim); }
.dg .band{ fill:var(--dg-line); opacity:.14; }
.dg .band.hot{ fill:var(--dg-hot); } .dg .band.dead{ fill:var(--dg-dead); } .dg .band.new{ fill:var(--dg-new); }
.dg .grp{ fill:none; stroke:var(--panel-border); stroke-width:1.2; stroke-dasharray:6 5; }
.dg .grp.new{ stroke:var(--dg-new); } .dg .grp.hot{ stroke:var(--dg-hot); }
.dg .small.hot{ fill:var(--dg-hot); } .dg .small.new{ fill:var(--dg-new); } .dg .small.dead{ fill:var(--dg-dead); }

/* original text diagram, collapsed under its drawing */
.textver{ margin:-14px 0 22px; }
.textver summary{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim); cursor:pointer; padding:4px 2px; list-style:none; }
.textver summary::-webkit-details-marker{ display:none; }
.textver summary::before{ content:"▸ "; }
.textver[open] summary::before{ content:"▾ "; }
.textver summary:hover{ color:var(--accent); }
.textver pre{ margin:6px 0 0; }
.dg .val.start{ text-anchor:start; }