/* ============================================================
   VU Integration Knowledge Platform — Design System
   Palette: technical paper + deep navy + signal blue, carried
   forward from the audit workbook's established visual language.
   Type: IBM Plex Sans (display/body) + IBM Plex Mono (identifiers),
   chosen because every object in this system IS a technical
   identifier — the mono treatment is functional, not decorative.
   ============================================================ */

/* Self-hosted fonts — no external CDN dependency, works fully offline */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibm-plex-mono-latin-700-normal.woff2') format('woff2')}

:root{
  --bg:#F5F6FA;
  --bg-elevated:#FFFFFF;
  --ink:#10182B;
  --ink-soft:#4B5568;
  --ink-faint:#8792A3;
  --navy:#1F3864;
  --navy-deep:#0E1A30;
  --navy-mid:#16294B;
  --signal:#2E6FF2;
  --signal-soft:#E8EFFE;
  --line:#DFE3EC;
  --line-soft:#EDEFF4;
  --chip-bg:#EEF1F7;

  --status-active-bg:#E6F4EC; --status-active-fg:#166B42; --status-active-dot:#1E9B5C;
  --status-review-bg:#FDF3E1; --status-review-fg:#8A5A0B; --status-review-dot:#D69A21;
  --status-deprecated-bg:#FBE9E7; --status-deprecated-fg:#A23225; --status-deprecated-dot:#D64530;
  --status-conflict-bg:#FBE9E7; --status-conflict-fg:#A23225; --status-conflict-dot:#D64530;
  --status-historical-bg:#EEF1F7; --status-historical-fg:#4B5568; --status-historical-dot:#8792A3;

  --radius-sm:6px; --radius-md:10px; --radius-lg:16px;
  --shadow-card:0 1px 2px rgba(16,24,43,.04), 0 1px 12px rgba(16,24,43,.04);
  --shadow-pop:0 8px 30px rgba(16,24,43,.14);

  --sidebar-w:266px;
  --font-display:'IBM Plex Sans',-apple-system,Segoe UI,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-display); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--signal); text-decoration:none}
a:hover{text-decoration:underline}
code, .mono, .id{font-family:var(--font-mono)}

/* ---------- Layout shell ---------- */
.shell{display:flex; min-height:100vh}
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:linear-gradient(180deg,var(--navy-deep),var(--navy-mid) 85%);
  color:#EAF0FF; position:fixed; top:0; left:0; bottom:0; overflow-y:auto;
  padding:22px 0 30px;
}
.sidebar .brand{
  padding:0 22px 18px; border-bottom:1px solid rgba(255,255,255,.09); margin-bottom:14px;
}
.sidebar .brand .mark{
  display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:14.5px; color:#fff;
}
.sidebar .brand .mark .dot{width:9px;height:9px;border-radius:2px;background:var(--signal);
  box-shadow:0 0 0 3px rgba(46,111,242,.25); transform:rotate(45deg);}
.sidebar .brand .snapshot{margin-top:8px; font-size:11.5px; color:#9FB0D9; font-family:var(--font-mono)}
.sidebar nav{padding:6px 12px}
.sidebar .navgroup{margin:14px 0 4px; padding:0 10px; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:#7C8FBE; font-weight:600}
.sidebar a.navlink{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 10px; border-radius:8px; color:#D6E0FA; font-size:13.6px; font-weight:500;
}
.sidebar a.navlink:hover{background:rgba(255,255,255,.07); text-decoration:none}
.sidebar a.navlink.active{background:rgba(46,111,242,.22); color:#fff}
.sidebar a.navlink .count{font-family:var(--font-mono); font-size:11px; color:#93A6D4}
.sidebar a.navlink.active .count{color:#CBDBFF}

.main{margin-left:var(--sidebar-w); flex:1; min-width:0}
.topbar{
  position:sticky; top:0; z-index:20; background:rgba(245,246,250,.86); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); padding:12px 32px; display:flex; align-items:center; gap:16px;
}
.breadcrumbs{font-size:13px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.breadcrumbs a{color:var(--ink-soft)}
.breadcrumbs a:hover{color:var(--signal)}
.breadcrumbs .sep{color:var(--ink-faint)}
.breadcrumbs .current{color:var(--ink); font-weight:600}

.searchbox{position:relative; width:340px; flex:0 0 auto}
.searchbox input{
  width:100%; padding:8px 12px 8px 32px; border-radius:8px; border:1px solid var(--line);
  background:#fff; font-size:13.5px; font-family:var(--font-display); color:var(--ink);
}
.searchbox input:focus{outline:2px solid var(--signal); outline-offset:1px}
.searchbox svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--ink-faint)}
.searchbox kbd{position:absolute; right:9px; top:50%; transform:translateY(-50%); font-family:var(--font-mono);
  font-size:10.5px; color:var(--ink-faint); border:1px solid var(--line); border-radius:4px; padding:1px 5px; background:#FAFBFD}
#search-results{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow-pop); max-height:420px; overflow-y:auto; display:none; z-index:50;
}
#search-results.open{display:block}
#search-results .res-item{display:block; padding:9px 14px; border-bottom:1px solid var(--line-soft)}
#search-results .res-item:last-child{border-bottom:none}
#search-results .res-item:hover{background:var(--signal-soft); text-decoration:none}
#search-results .res-type{font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:600}
#search-results .res-name{font-family:var(--font-mono); font-size:13.5px; color:var(--ink); margin-top:1px}
#search-results .res-empty{padding:16px; text-align:center; color:var(--ink-faint); font-size:13px}

.content{padding:30px 32px 80px; max-width:1180px}

/* ---------- Typography ---------- */
h1.page-title{font-size:26px; font-weight:650; margin:0 0 6px; letter-spacing:-.01em}
h1.page-title .id-inline{font-family:var(--font-mono); font-weight:500; color:var(--ink-soft)}
.page-subtitle{color:var(--ink-soft); font-size:14.5px; margin:0 0 22px; max-width:70ch}
h2.section-title{font-size:15px; font-weight:650; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-soft); margin:34px 0 12px; display:flex; align-items:center; gap:9px}
h2.section-title::after{content:""; flex:1; height:1px; background:var(--line)}
h3.sub-title{font-size:16px; font-weight:650; margin:20px 0 8px}

/* ---------- Badges / status ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:650;
  padding:3px 9px 3px 7px; border-radius:99px; letter-spacing:.02em; white-space:nowrap;
}
.badge .bdot{width:6px;height:6px;border-radius:50%}
.badge.active{background:var(--status-active-bg); color:var(--status-active-fg)}
.badge.active .bdot{background:var(--status-active-dot)}
.badge.needs_review{background:var(--status-review-bg); color:var(--status-review-fg)}
.badge.needs_review .bdot{background:var(--status-review-dot)}
.badge.deprecated{background:var(--status-deprecated-bg); color:var(--status-deprecated-fg)}
.badge.deprecated .bdot{background:var(--status-deprecated-dot)}
.badge.conflict{background:var(--status-conflict-bg); color:var(--status-conflict-fg)}
.badge.conflict .bdot{background:var(--status-conflict-dot)}
.badge.historical{background:var(--status-historical-bg); color:var(--status-historical-fg)}
.badge.historical .bdot{background:var(--status-historical-dot)}
.badge.neutral{background:var(--chip-bg); color:var(--ink-soft)}

.pill{display:inline-block; font-family:var(--font-mono); font-size:12px; background:var(--chip-bg);
  color:var(--navy); padding:2px 8px; border-radius:6px; border:1px solid var(--line)}
a.pill:hover{background:var(--signal-soft); text-decoration:none; border-color:var(--signal)}

/* ---------- Cards / grids ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:8px}
.stat-card{
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px 20px; box-shadow:var(--shadow-card);
}
.stat-card .num{font-size:30px; font-weight:700; font-family:var(--font-mono); letter-spacing:-.02em; color:var(--navy)}
.stat-card .label{font-size:12.5px; color:var(--ink-soft); margin-top:2px}
.stat-card.flag .num{color:var(--status-deprecated-fg)}
.stat-card.warn .num{color:var(--status-review-fg)}

.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px}
.obj-card{
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:15px 17px; box-shadow:var(--shadow-card); display:block; color:var(--ink);
}
.obj-card:hover{border-color:var(--signal); text-decoration:none; box-shadow:0 2px 14px rgba(46,111,242,.12)}
.obj-card .top-row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px}
.obj-card .name{font-family:var(--font-mono); font-size:13.5px; font-weight:600; color:var(--ink); word-break:break-word}
.obj-card .meta{font-size:12px; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:8px}
.obj-card .meta span{display:flex; align-items:center; gap:4px}

/* ---------- Tables ---------- */
table.data-table{width:100%; border-collapse:collapse; font-size:13.5px; background:var(--bg-elevated);
  border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; table-layout:auto}
table.data-table th{
  text-align:left; background:var(--navy); color:#fff; font-weight:600; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.04em; padding:10px 14px;
}
table.data-table td{padding:9px 14px; border-top:1px solid var(--line-soft); vertical-align:top}
table.data-table tr:hover td{background:var(--signal-soft)}
table.data-table td.mono{font-family:var(--font-mono); font-size:12.8px}
.table-wrap{overflow-x:auto; border-radius:var(--radius-md)}

/* ---------- Panels ---------- */
.panel{background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:20px 22px; box-shadow:var(--shadow-card); margin-bottom:16px}
.panel.callout-review{border-left:4px solid var(--status-review-dot)}
.panel.callout-deprecated{border-left:4px solid var(--status-deprecated-dot)}
.panel.callout-conflict{border-left:4px solid var(--status-conflict-dot)}
.panel-title{font-weight:650; font-size:14px; margin-bottom:6px; display:flex; align-items:center; gap:8px}

/* ---------- Tabs ---------- */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:18px}
.tab-btn{
  padding:9px 15px; font-size:13px; font-weight:600; color:var(--ink-soft); background:none; border:none;
  border-bottom:2px solid transparent; cursor:pointer; font-family:var(--font-display);
}
.tab-btn:hover{color:var(--ink)}
.tab-btn.active{color:var(--signal); border-bottom-color:var(--signal)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ---------- Details/expand ---------- */
details.tech-detail{background:var(--chip-bg); border:1px solid var(--line); border-radius:var(--radius-md); margin:10px 0}
details.tech-detail summary{
  cursor:pointer; padding:10px 14px; font-size:12.8px; font-weight:600; color:var(--navy);
  list-style:none; display:flex; align-items:center; gap:7px;
}
details.tech-detail summary::-webkit-details-marker{display:none}
details.tech-detail summary::before{content:"▸"; font-size:11px; transition:transform .15s}
details.tech-detail[open] summary::before{transform:rotate(90deg)}
details.tech-detail .detail-body{padding:0 14px 14px}

/* ---------- Dependency chain (signature element) ---------- */
.chain{display:flex; align-items:stretch; gap:0; margin:18px 0; overflow-x:auto; padding:6px 2px}
.chain-col{display:flex; flex-direction:column; gap:8px; min-width:220px; flex:1}
.chain-col.center{flex:0 0 250px}
.chain-col-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint);
  font-weight:650; margin-bottom:2px; text-align:center}
.chain-node{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:9px 12px;
  font-family:var(--font-mono); font-size:12px; color:var(--ink); position:relative; text-align:center;
}
.chain-node.self{background:var(--navy); color:#fff; border-color:var(--navy); font-weight:650; font-size:13px; padding:14px 12px}
.chain-node.empty{color:var(--ink-faint); font-style:italic; font-family:var(--font-display); border-style:dashed}
.chain-connector{flex:0 0 34px; display:flex; align-items:center; justify-content:center; position:relative}
.chain-connector::before{content:""; position:absolute; left:0; right:0; top:50%; height:2px;
  background:repeating-linear-gradient(90deg, var(--signal) 0 5px, transparent 5px 9px)}
.chain-connector svg{position:relative; z-index:1; background:var(--bg); color:var(--signal)}

/* ---------- Misc ---------- */
.hr{height:1px; background:var(--line); border:none; margin:24px 0}
.muted{color:var(--ink-soft)}
.small{font-size:12.5px}
.mt0{margin-top:0}
.flex{display:flex; align-items:center; gap:8px}
.flex-between{display:flex; align-items:center; justify-content:space-between}
.tag-row{display:flex; flex-wrap:wrap; gap:6px}
.empty-state{padding:40px 20px; text-align:center; color:var(--ink-faint); font-size:13.5px}
.footer-note{margin-top:50px; padding-top:18px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-faint)}

.filter-row{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap}
.filter-chip{
  padding:6px 12px; border-radius:99px; border:1px solid var(--line); background:#fff; font-size:12.5px;
  font-weight:600; color:var(--ink-soft); cursor:pointer; font-family:var(--font-display);
}
.filter-chip:hover{border-color:var(--signal)}
.filter-chip.active{background:var(--navy); color:#fff; border-color:var(--navy)}

.evidence-strip{font-size:11.5px; color:var(--ink-faint); font-family:var(--font-mono); margin-top:2px; word-break:break-all}

@media (max-width:900px){
  .sidebar{transform:translateX(-100%); transition:transform .2s; z-index:100}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .searchbox{width:180px}
}

.mermaid{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:16px; margin:14px 0}