/* ==========================================================================
   Enterprise Architecture Package — design system
   One token set drives app + docs. Light / dark / print. WCAG 2.2 AA targets:
   text contrast >= 4.5:1, graphical objects >= 3:1, visible focus, no
   color-only meaning (shapes, badges, line patterns pair with every hue).
   ========================================================================== */

:root {
  --font: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;

  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --text: #0f1c2e;
  --muted: #43536b;
  --border: #dbe2ec;
  --border-strong: #b8c4d4;
  --accent: #1d4ed8;
  --accent-contrast: #ffffff;
  --focus: #1d4ed8;
  --danger: #a12622;
  --warn: #8a5a00;
  --ok: #1d6b50;

  /* layer band tints + strokes (each also has a distinct band label + order) */
  --lay-business-bg:#eef1fd;    --lay-business-fg:#3a49a8;
  --lay-experience-bg:#e4f3f8;  --lay-experience-fg:#0b6c85;
  --lay-application-bg:#eaf6ea; --lay-application-fg:#28703a;
  --lay-integration-bg:#fdf1df; --lay-integration-fg:#96500a;
  --lay-data-bg:#f2edfb;        --lay-data-fg:#5f3daa;
  --lay-ai-bg:#fcecf4;          --lay-ai-fg:#9a1d64;
  --lay-platform-bg:#e8f0f8;    --lay-platform-fg:#235583;
  --lay-security-bg:#fdecec;    --lay-security-fg:#962420;
  --lay-operations-bg:#ecf5f0;  --lay-operations-fg:#1b6349;
  --lay-governance-bg:#f5f1e7;  --lay-governance-fg:#6f5719;

  /* edge classes (paired with dash patterns + markers, never color alone) */
  --edge-sync:#435062; --edge-async:#96500a; --edge-data:#5f3daa;
  --edge-control:#718092; --edge-identity:#6d28d9; --edge-faint:#7c8896;

  --node-bg:#ffffff; --node-text:#19212e;
  --shadow: 0 1px 3px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.06);
  --radius: 8px;
  --header-h: 56px;
}

html[data-theme="dark"] {
  --bg:#0b1120; --surface:#101a30; --surface-2:#16223c; --text:#e6ecf5; --muted:#a7b4c9;
  --border:#223252; --border-strong:#35496f; --accent:#7aa9f7; --accent-contrast:#0b1120; --focus:#a5c4fa;
  --danger:#f1a09d; --warn:#e5b567; --ok:#7fd0b2;
  --lay-business-bg:#1c2340; --lay-business-fg:#a9b6f5;
  --lay-experience-bg:#122c36; --lay-experience-fg:#7cc9de;
  --lay-application-bg:#15291a; --lay-application-fg:#8fd3a0;
  --lay-integration-bg:#33260f; --lay-integration-fg:#eab876;
  --lay-data-bg:#251d3d;        --lay-data-fg:#c4aef0;
  --lay-ai-bg:#331526;          --lay-ai-fg:#ee9ecb;
  --lay-platform-bg:#14263a;    --lay-platform-fg:#8fc1ea;
  --lay-security-bg:#331617;    --lay-security-fg:#f1a09d;
  --lay-operations-bg:#12281f;  --lay-operations-fg:#8fd6b8;
  --lay-governance-bg:#2b2410;  --lay-governance-fg:#dec27a;
  --edge-sync:#aeb9cc; --edge-async:#e0a25c; --edge-data:#bfa5ef;
  --edge-control:#77839b; --edge-identity:#b795f3; --edge-faint:#5c6a80;
  --node-bg:#101a30; --node-text:#e6ecf5;
  --shadow: 0 1px 3px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bg:#0b1120; --surface:#101a30; --surface-2:#16223c; --text:#e6ecf5; --muted:#a7b4c9;
    --border:#223252; --border-strong:#35496f; --accent:#7aa9f7; --accent-contrast:#0b1120; --focus:#a5c4fa;
    --danger:#f1a09d; --warn:#e5b567; --ok:#7fd0b2;
    --lay-business-bg:#1c2340; --lay-business-fg:#a9b6f5;
    --lay-experience-bg:#122c36; --lay-experience-fg:#7cc9de;
    --lay-application-bg:#15291a; --lay-application-fg:#8fd3a0;
    --lay-integration-bg:#33260f; --lay-integration-fg:#eab876;
    --lay-data-bg:#251d3d;        --lay-data-fg:#c4aef0;
    --lay-ai-bg:#331526;          --lay-ai-fg:#ee9ecb;
    --lay-platform-bg:#14263a;    --lay-platform-fg:#8fc1ea;
    --lay-security-bg:#331617;    --lay-security-fg:#f1a09d;
    --lay-operations-bg:#12281f;  --lay-operations-fg:#8fd6b8;
    --lay-governance-bg:#2b2410;  --lay-governance-fg:#dec27a;
    --edge-sync:#aeb9cc; --edge-async:#e0a25c; --edge-data:#bfa5ef;
    --edge-control:#77839b; --edge-identity:#b795f3; --edge-faint:#5c6a80;
    --node-bg:#101a30; --node-text:#e6ecf5;
    --shadow: 0 1px 3px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin:0; padding:0; height:100%; }
body { font-family:var(--font); background:var(--bg); color:var(--text); font-size:14.5px; line-height:1.5; }
code { font-family:var(--mono); font-size:.9em; background:var(--surface-2); padding:.1em .35em; border-radius:4px; }
a { color:var(--accent); }
button { font-family:inherit; font-size:inherit; color:inherit; }

.visually-hidden { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:-999px; top:0; background:var(--accent); color:var(--accent-contrast); padding:.5rem 1rem; z-index:100; border-radius:0 0 6px 0; }
.skip-link:focus { left:0; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:3px; }

/* ------------------------------------------------------------- header --- */
.app-header { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:.75rem;
  height:var(--header-h); padding:0 .85rem; background:var(--surface); border-bottom:1px solid var(--border); }
.brand { display:flex; flex-direction:column; min-width:0; }
.brand-title { font-weight:650; font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-sub { font-size:.7rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.icon-btn { background:none; border:1px solid transparent; border-radius:6px; padding:.35rem .55rem; cursor:pointer; font-size:1rem; line-height:1; }
.icon-btn:hover { background:var(--surface-2); border-color:var(--border); }
.header-actions { display:flex; gap:.15rem; }

.search-wrap { position:relative; flex:1; max-width:520px; margin-left:auto; }
#search { width:100%; padding:.45rem .7rem; border:1px solid var(--border-strong); border-radius:8px; background:var(--bg); color:var(--text); }
#search-results { position:absolute; top:calc(100% + 4px); left:0; right:0; max-height:420px; overflow:auto; margin:0; padding:.25rem;
  list-style:none; background:var(--surface); border:1px solid var(--border-strong); border-radius:8px; box-shadow:var(--shadow); z-index:60; }
#search-results li { padding:.4rem .6rem; border-radius:6px; cursor:pointer; display:flex; gap:.5rem; align-items:baseline; }
#search-results li.active, #search-results li:hover { background:var(--surface-2); }
#search-results .kind { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); flex:0 0 5.5em; }
#search-results .hint { color:var(--muted); font-size:.78rem; margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:45%; }

/* --------------------------------------------------------------- layout -- */
.app-body { display:flex; min-height:calc(100vh - var(--header-h)); }
#sidenav { width:232px; flex:0 0 auto; background:var(--surface); border-right:1px solid var(--border);
  padding:.75rem .6rem 2rem; position:sticky; top:var(--header-h); height:calc(100vh - var(--header-h)); overflow:auto; }
#sidenav.collapsed { display:none; }
.nav-group-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:.9rem .4rem .3rem; }
#nav-views, .nav-docs { list-style:none; margin:0; padding:0; }
#nav-views a, .nav-docs a { display:block; padding:.34rem .55rem; border-radius:6px; text-decoration:none; color:var(--text); font-size:.85rem; }
#nav-views a:hover, .nav-docs a:hover { background:var(--surface-2); }
#nav-views a[aria-current="page"] { background:var(--accent); color:var(--accent-contrast); font-weight:600; }
#nav-views .nav-num { display:inline-block; width:1.5em; color:inherit; opacity:.55; font-variant-numeric:tabular-nums; }
.nav-foot { font-size:.7rem; color:var(--muted); margin:1.2rem .4rem 0; }

main { flex:1; min-width:0; padding:1rem 1.1rem 2rem; }
.view-header h1 { margin:.1rem 0 .2rem; font-size:1.35rem; }
.view-purpose { margin:.1rem 0 .5rem; color:var(--muted); max-width:70rem; }
.breadcrumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:.35rem; margin:0; padding:0; font-size:.75rem; color:var(--muted); }
.breadcrumbs li + li::before { content:"›"; margin-right:.35rem; }
.breadcrumbs a { color:var(--muted); }
.view-about { margin:.2rem 0 .6rem; font-size:.85rem; }
.view-about summary { cursor:pointer; color:var(--accent); }
.view-about .about-cols { display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding:.6rem .2rem; }
.view-about ul { margin:.3rem 0; padding-left:1.2rem; }
.view-about .about-note { background:var(--surface-2); border-left:3px solid var(--accent); padding:.5rem .7rem; border-radius:0 6px 6px 0; }

/* -------------------------------------------------------------- toolbar -- */
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; padding:.45rem 0; position:relative; }
.toolbar-spacer { flex:1; }
.seg { display:inline-flex; border:1px solid var(--border-strong); border-radius:8px; overflow:hidden; }
.seg-btn { border:0; background:var(--surface); padding:.34rem .7rem; cursor:pointer; border-right:1px solid var(--border); }
.seg-btn:last-child { border-right:0; }
.seg-btn.active { background:var(--accent); color:var(--accent-contrast); font-weight:600; }
.toolbar > button, .dropdown > button { background:var(--surface); border:1px solid var(--border-strong); border-radius:8px; padding:.34rem .7rem; cursor:pointer; }
.toolbar > button[aria-expanded="true"] { background:var(--surface-2); }
.badge { background:var(--accent); color:var(--accent-contrast); border-radius:10px; font-size:.7rem; padding:0 .45em; margin-left:.3em; }
.dropdown { position:relative; }
.dropdown ul { position:absolute; top:calc(100% + 4px); left:0; z-index:50; min-width:270px; margin:0; padding:.3rem;
  list-style:none; background:var(--surface); border:1px solid var(--border-strong); border-radius:8px; box-shadow:var(--shadow); }
.dropdown li button { display:block; width:100%; text-align:left; background:none; border:0; padding:.4rem .6rem; border-radius:6px; cursor:pointer; }
.dropdown li button:hover { background:var(--surface-2); }
.dropdown li .path-desc { display:block; font-size:.72rem; color:var(--muted); }

.filters-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.7rem .8rem; margin:.2rem 0 .6rem; }
.filters-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); gap:.6rem .8rem; }
.filters-grid label { display:block; font-size:.72rem; color:var(--muted); margin-bottom:.15rem; }
.filters-grid select { width:100%; padding:.3rem .4rem; border:1px solid var(--border-strong); border-radius:6px; background:var(--bg); color:var(--text); }
.link-btn { background:none; border:0; color:var(--accent); cursor:pointer; padding:.3rem 0; text-decoration:underline; }

/* --------------------------------------------------------------- canvas -- */
.canvas-wrap { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  height:calc(100vh - 285px); min-height:430px; overflow:hidden; }
.canvas-wrap:fullscreen { height:100vh; border-radius:0; }
#graph { width:100%; height:100%; display:block; cursor:grab; touch-action:none; }
#graph.panning { cursor:grabbing; }
.empty-msg { position:absolute; inset:40% 0 auto; text-align:center; color:var(--muted); }

/* layer bands */
.band { stroke:none; }
.band-label { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.band-toggle { cursor:pointer; }
.band-business  .band { fill:var(--lay-business-bg); }  .band-business  .band-label { fill:var(--lay-business-fg); }
.band-experience .band { fill:var(--lay-experience-bg);} .band-experience .band-label { fill:var(--lay-experience-fg); }
.band-application .band { fill:var(--lay-application-bg);} .band-application .band-label { fill:var(--lay-application-fg); }
.band-integration .band { fill:var(--lay-integration-bg);} .band-integration .band-label { fill:var(--lay-integration-fg); }
.band-data      .band { fill:var(--lay-data-bg); }       .band-data      .band-label { fill:var(--lay-data-fg); }
.band-ai        .band { fill:var(--lay-ai-bg); }         .band-ai        .band-label { fill:var(--lay-ai-fg); }
.band-platform  .band { fill:var(--lay-platform-bg); }   .band-platform  .band-label { fill:var(--lay-platform-fg); }
.band-security  .band { fill:var(--lay-security-bg); }   .band-security  .band-label { fill:var(--lay-security-fg); }
.band-operations .band { fill:var(--lay-operations-bg);} .band-operations .band-label { fill:var(--lay-operations-fg); }
.band-governance .band { fill:var(--lay-governance-bg);} .band-governance .band-label { fill:var(--lay-governance-fg); }

/* nodes */
.node { cursor:pointer; }
.node .shape { fill:var(--node-bg); stroke:var(--border-strong); stroke-width:1.4; }
.node text { fill:var(--node-text); font-size:11px; pointer-events:none; }
.node .type-chip { font-size:8px; font-weight:700; letter-spacing:.03em; }
.node .status-badge { font-size:9px; font-weight:800; }
.node:hover .shape { stroke:var(--accent); stroke-width:2; }
.node:focus-visible { outline:none; }
.node:focus-visible .shape { stroke:var(--focus); stroke-width:3; }
.node.selected .shape { stroke:var(--accent); stroke-width:3; }

/* layer-tinted node accents (left bar drawn by JS uses currentColor) */
.node.lay-business { color:var(--lay-business-fg); } .node.lay-experience { color:var(--lay-experience-fg); }
.node.lay-application { color:var(--lay-application-fg); } .node.lay-integration { color:var(--lay-integration-fg); }
.node.lay-data { color:var(--lay-data-fg); } .node.lay-ai { color:var(--lay-ai-fg); }
.node.lay-platform { color:var(--lay-platform-fg); } .node.lay-security { color:var(--lay-security-fg); }
.node.lay-operations { color:var(--lay-operations-fg); } .node.lay-governance { color:var(--lay-governance-fg); }
.node .accent { fill:currentColor; }
.node .glyph { fill:currentColor; font-weight:700; }

/* lifecycle status — border style + badge (never color alone) */
.node.s-current .shape { stroke-dasharray:none; }
.node.s-transition .shape { stroke-dasharray:7 4; }
.node.s-target .shape { }
.node.s-optional .shape { stroke-dasharray:2 3; }
.node.s-deprecated .shape { stroke-dasharray:none; }
.node.s-deprecated { opacity:.92; }
.node.s-deprecated .shape { fill:url(#hatch); }
.node.s-unresolved .shape { stroke-dasharray:2 3; stroke:var(--danger); }
.badge-transition { fill:var(--warn); } .badge-optional { fill:var(--muted); }
.badge-deprecated { fill:var(--danger); } .badge-target { fill:var(--accent); } .badge-current { fill:var(--muted); }
.badge-unresolved { fill:var(--danger); }
.badge-text { fill:#fff; font-size:8.5px; font-weight:800; }
html[data-theme="dark"] .badge-text { fill:#0b1120; }

/* dimming for focus/blast/compare */
.node.dim { opacity:.18; }
.edge.dim { opacity:.08; }
.node.ghost .shape { opacity:.35; stroke-dasharray:3 4; }
.node.ghost text { opacity:.4; }
.node.hl-up .shape { stroke:var(--edge-data); stroke-width:3; }
.node.hl-down .shape { stroke:var(--edge-async); stroke-width:3; }
.node.hl-blast .shape { stroke:var(--danger); stroke-width:3; }

/* edges */
.edge { fill:none; stroke-width:1.5; }
.edge.cls-sync { stroke:var(--edge-sync); }
.edge.cls-async-event, .edge.cls-async-queue { stroke:var(--edge-async); stroke-dasharray:7 5; }
.edge.cls-dataflow { stroke:var(--edge-data); stroke-dasharray:2 4; stroke-linecap:round; }
.edge.cls-file { stroke:var(--edge-data); stroke-dasharray:2 4 8 4; }
.edge.cls-control { stroke:var(--edge-control); stroke-dasharray:9 4 2 4; stroke-width:1.2; }
.edge.cls-identity { stroke:var(--edge-identity); stroke-width:1.3; }
.edge.cls-deploy { stroke:var(--edge-faint); stroke-width:1.1; }
.edge.cls-structural { stroke:var(--edge-faint); stroke-dasharray:12 6; stroke-width:1.1; }
.edge-hit { fill:none; stroke:transparent; stroke-width:12; cursor:pointer; }
.edge-hit:hover + .edge, .edge.hover { stroke-width:3; }
.edge.hl { stroke-width:3.5; }
.edge-hit:focus-visible { outline:none; }
.edge-hit:focus-visible + .edge { stroke-width:4; stroke:var(--focus); }
marker path { fill:context-stroke; }

/* legend */
.legend { position:absolute; right:.6rem; bottom:.6rem; z-index:10; max-width:295px; max-height:62%; overflow:auto;
  background:color-mix(in srgb, var(--surface) 92%, transparent); border:1px solid var(--border-strong); border-radius:8px;
  padding:.6rem .75rem; font-size:.74rem; box-shadow:var(--shadow); }
.legend h3 { margin:.2rem 0 .3rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.legend ul { list-style:none; margin:0 0 .4rem; padding:0; }
.legend li { display:flex; align-items:center; gap:.45rem; margin:.14rem 0; }
.legend .sw { flex:0 0 34px; height:14px; }
.legend .swatch-line { flex:0 0 34px; }

/* tooltip */
.tooltip { position:absolute; z-index:30; pointer-events:none; max-width:330px; background:var(--surface);
  color:var(--text); border:1px solid var(--border-strong); border-radius:8px; padding:.5rem .65rem; font-size:.78rem; box-shadow:var(--shadow); }
.tooltip .tt-title { font-weight:650; }
.tooltip .tt-meta { color:var(--muted); font-size:.7rem; }

/* ------------------------------------------------------------ inspector -- */
.inspector { width:390px; flex:0 0 auto; background:var(--surface); border-left:1px solid var(--border);
  position:sticky; top:var(--header-h); height:calc(100vh - var(--header-h)); overflow:hidden; display:flex; flex-direction:column; }
.inspector-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.65rem .85rem; border-bottom:1px solid var(--border); }
.inspector-head h2 { margin:0; font-size:1rem; }
.inspector-body { overflow:auto; padding:.75rem .9rem 2rem; }
.inspector-body h3 { font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:1rem 0 .3rem; }
.inspector-body dl { margin:.2rem 0; display:grid; grid-template-columns:9.5em 1fr; gap:.15rem .6rem; font-size:.82rem; }
.inspector-body dt { color:var(--muted); }
.inspector-body dd { margin:0; overflow-wrap:anywhere; }
.chips { display:flex; flex-wrap:wrap; gap:.3rem; margin:.2rem 0; padding:0; list-style:none; }
.chip { background:var(--surface-2); border:1px solid var(--border); border-radius:20px; padding:.1rem .6rem; font-size:.75rem; cursor:pointer; }
.chip:hover { border-color:var(--accent); color:var(--accent); }
.chip.static { cursor:default; }
.chip.static:hover { border-color:var(--border); color:inherit; }
.pill-status { display:inline-block; border-radius:12px; padding:0 .55em; font-size:.72rem; font-weight:650; border:1.5px solid var(--border-strong); }
.pill-status.s-deprecated { border-color:var(--danger); color:var(--danger); }
.pill-status.s-transition { border-color:var(--warn); color:var(--warn); border-style:dashed; }
.pill-status.s-target { border-color:var(--accent); color:var(--accent); }
.pill-status.s-optional { border-style:dotted; color:var(--muted); }
.pill-status.s-current { color:var(--muted); }
.inspector .note { background:var(--surface-2); border-left:3px solid var(--warn); padding:.4rem .6rem; font-size:.76rem; border-radius:0 6px 6px 0; }

/* ---------------------------------------------------------------- table -- */
.table-view { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.4rem .6rem 1rem; overflow:auto; max-height:calc(100vh - 280px); }
.table-view h2 { font-size:1rem; margin:.8rem .3rem .4rem; }
.table-view .table-caption-note { font-size:.78rem; color:var(--muted); margin:0 .3rem .5rem; }
table.data { border-collapse:collapse; width:100%; font-size:.8rem; }
table.data caption { text-align:left; font-weight:650; padding:.4rem .2rem; }
table.data th, table.data td { border:1px solid var(--border); padding:.32rem .5rem; text-align:left; vertical-align:top; }
table.data th { background:var(--surface-2); position:sticky; top:0; }
table.data tbody tr:hover { background:var(--surface-2); }
table.data .row-btn { background:none; border:0; color:var(--accent); cursor:pointer; text-decoration:underline; padding:0; text-align:left; }

/* view extras (roadmap cards, tier tables) */
.view-extras { margin-top:.8rem; display:grid; gap:.8rem; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.8rem 1rem; }
.card h2 { margin:.1rem 0 .4rem; font-size:1.02rem; }
.card h3 { margin:.6rem 0 .25rem; font-size:.9rem; }
.wave-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:.7rem; }
.wave { border:1px solid var(--border); border-radius:8px; padding:.6rem .75rem; border-top:4px solid var(--accent); }
.wave h3 { margin:.1rem 0 .3rem; }
.wave ul { margin:.25rem 0; padding-left:1.1rem; font-size:.8rem; }
.wave .meta { font-size:.72rem; color:var(--muted); }
.init-row { border-bottom:1px solid var(--border); padding:.5rem .1rem; }
.init-row:last-child { border-bottom:0; }
.init-row .init-name { font-weight:650; }
.qw { color:var(--ok); font-size:.72rem; font-weight:700; border:1px solid var(--ok); border-radius:10px; padding:0 .45em; margin-left:.4em; }
.init-row .meta { font-size:.76rem; color:var(--muted); }
details.init-details summary { cursor:pointer; font-size:.78rem; color:var(--accent); }
details.init-details ul { font-size:.78rem; margin:.25rem 0; padding-left:1.2rem; }

/* --------------------------------------------------------------- footer -- */
.app-footer { display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; align-items:center; padding:.5rem .9rem; border-top:1px solid var(--border);
  background:var(--surface); font-size:.7rem; color:var(--muted); }
.health-badge { font-weight:700; }
.health-badge.ok { color:var(--ok); } .health-badge.bad { color:var(--danger); }

/* ---------------------------------------------------------------- modal -- */
.modal-backdrop { position:fixed; inset:0; background:rgba(10,14,22,.55); z-index:80; display:flex; align-items:center; justify-content:center; padding:2rem; }
.modal { background:var(--surface); border-radius:10px; max-width:860px; width:100%; max-height:85vh; display:flex; flex-direction:column; box-shadow:var(--shadow); }
.modal-body { overflow:auto; padding:1rem 1.2rem 1.5rem; font-size:.85rem; }
.modal-body ul { padding-left:1.2rem; }

.noscript-msg { padding:2rem; text-align:center; }

/* ------------------------------------------------------------- doc pages - */
.doc-page { max-width:70rem; margin:0 auto; padding:1.2rem 1.4rem 4rem; }
.doc-page header.doc-head { border-bottom:2px solid var(--accent); margin-bottom:1rem; padding:.6rem 0; }
.doc-page header.doc-head h1 { margin:.2rem 0; font-size:1.5rem; }
.doc-page header.doc-head p { color:var(--muted); margin:.2rem 0; }
.doc-page nav.doc-toc { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:.7rem 1rem; margin:1rem 0; }
.doc-page nav.doc-toc ol { columns:2; margin:.3rem 0; padding-left:1.4rem; }
.doc-page h2 { border-bottom:1px solid var(--border); padding-bottom:.25rem; margin-top:2rem; font-size:1.22rem; }
.doc-page h3 { margin-top:1.3rem; font-size:1.02rem; }
.doc-page h4 { margin:1rem 0 .3rem; font-size:.92rem; }
.doc-page table { border-collapse:collapse; width:100%; font-size:.82rem; margin:.6rem 0 1rem; }
.doc-page th, .doc-page td { border:1px solid var(--border); padding:.35rem .55rem; text-align:left; vertical-align:top; }
.doc-page th { background:var(--surface-2); }
.doc-page .callout { border-left:4px solid var(--accent); background:var(--surface); padding:.6rem .9rem; border-radius:0 8px 8px 0; margin:.8rem 0; }
.doc-page .callout.warn { border-left-color:var(--warn); }
.doc-page .callout.danger { border-left-color:var(--danger); }
.doc-page .proc { border:1px solid var(--border); border-radius:8px; margin:1rem 0; background:var(--surface); }
.doc-page .proc > h4 { background:var(--surface-2); margin:0; padding:.5rem .8rem; border-radius:8px 8px 0 0; }
.doc-page .proc .proc-body { padding:.4rem .9rem .8rem; }
.doc-page .proc dl { display:grid; grid-template-columns:11em 1fr; gap:.2rem .8rem; font-size:.82rem; }
.doc-page .proc dt { color:var(--muted); }
.doc-page .proc dd { margin:0; }
.doc-page .proc ol { margin:.3rem 0; padding-left:1.3rem; }
.doc-page .back-link { display:inline-block; margin:.4rem 0 0; font-size:.85rem; }
.doc-page .tag { display:inline-block; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:0 .5em; font-size:.72rem; margin:0 .15em .15em 0; }

/* ----------------------------------------------------------- responsive -- */
@media (max-width: 1180px) { .inspector { position:fixed; right:0; top:var(--header-h); z-index:45; box-shadow:-6px 0 18px rgba(0,0,0,.18); } }
@media (max-width: 900px) {
  #sidenav { position:fixed; z-index:46; left:0; box-shadow:6px 0 18px rgba(0,0,0,.18); }
  #sidenav.collapsed { display:none; }
  .canvas-wrap { height:52vh; min-height:330px; }
  .inspector { width:min(390px, 92vw); }
  .brand-sub { display:none; }
  .search-wrap { max-width:none; }
  .view-about .about-cols { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  body { font-size:13.5px; }
  .toolbar { gap:.3rem; }
  .canvas-wrap { height:46vh; }
}

/* --------------------------------------------------------------- motion -- */
@media (prefers-reduced-motion: no-preference) {
  .node, .edge { transition:opacity .18s ease; }
  .inspector, #sidenav { transition:transform .18s ease; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* ---------------------------------------------------------------- print -- */
@media print {
  :root { --bg:#fff; --surface:#fff; --surface-2:#f2f2f2; --text:#000; --muted:#333; --border:#999; --border-strong:#666; }
  .app-header, #sidenav, .toolbar, .filters-panel, .inspector, .app-footer, .search-wrap, .header-actions,
  #nav-toggle, .modal-backdrop, .view-about summary, #graph-empty { display:none !important; }
  .app-body { display:block; }
  main { padding:0; }
  .canvas-wrap { height:auto; min-height:0; border:1px solid #999; page-break-inside:avoid; overflow:visible; }
  #graph { height:640px; }
  .legend { position:static; max-width:none; max-height:none; margin-top:.5rem; box-shadow:none; }
  .table-view { display:block !important; max-height:none; border:0; padding:0; margin-top:1rem; }
  .view-extras { display:block; }
  table.data th { position:static; }
  a::after { content:""; }
  .doc-page { max-width:none; }
}

/* arifmughal.com integration */
.site-back { font-size:.78rem; font-weight:600; color:var(--accent); text-decoration:none; white-space:nowrap; padding:6px 8px; border-radius:6px; }
.site-back:hover, .site-back:focus-visible { background: var(--surface-2); }