:root{
  --bg:#f9fafb; --fg:#0f172a;
  --muted:#64748b; --border:#e5e7eb;
  --brand:#0ea5e9; --accent:#10b981;
  --card:#ffffff; --shadow:0 6px 18px rgba(0,0,0,.06);
  --radius:16px; --space:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;display:block}
header.site{position:sticky;top:0;z-index:10;background:var(--card);border-bottom:1px solid var(--border)}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.site-bar{display:flex;align-items:center;gap:16px;padding:12px 0}
.site-bar .logo{width:28px;height:28px}
.site-bar .title{font-weight:700}
.site-bar .version{margin-left:auto;color:var(--muted);font-size:14px}

footer.site{margin-top:40px;border-top:1px solid var(--border);background:var(--card)}
footer.site .foot{padding:18px 0;color:var(--muted);font-size:14px}

/* Split layout for index: sidebar + preview */
.split{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start}
@media (max-width:960px){.split{grid-template-columns:1fr}}
.sidebar{position:relative}
.sidebar .controls{position:static}
.list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.list-item{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px;cursor:pointer;box-shadow:var(--shadow)}
.list-item[aria-selected="true"]{outline:2px solid var(--brand)}
.list-item .name{font-weight:700;font-size:16px}
.list-item .meta{color:var(--muted);font-size:13px;margin-top:4px;display:flex;gap:8px;flex-wrap:wrap}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.chip{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;padding:6px 12px;background:#fff;color:var(--fg);cursor:pointer;font-size:14px}
.chip[aria-pressed="true"]{background:#e6f7ff;border-color:#bae6fd;color:#0b66c3}

.cat{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.cat summary{list-style:none;cursor:pointer;padding:10px 12px;font-weight:600;border-bottom:1px solid var(--border)}
details.cat[open] summary{background:#f5f7fb}
.cat ul{list-style:none;margin:0;padding:10px;display:flex;flex-direction:column;gap:8px}

.preview{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px}
.preview .head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.preview .title{font-weight:800;font-size:20px}
.preview .summary{color:var(--muted);font-size:14px}
.preview .map-wrap{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start}
.preview .legend{max-width:220px;border:1px solid var(--border);border-radius:10px;padding:8px;background:#fff}

/* Interactive legend within preview */
.legend-ui{display:flex;flex-direction:column;gap:8px}
.legend-ui .item{display:flex;align-items:center;gap:10px}
.legend-ui button{width:100%;display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:#fff;color:var(--fg);padding:6px 8px;border-radius:10px;cursor:pointer}
.legend-ui button.active{outline:2px solid var(--brand)}
.legend-ui .swatch{width:20px;height:20px;border-radius:4px;border:1px solid rgba(0,0,0,.1)}
@media (max-width:768px){.preview .map-wrap{grid-template-columns:1fr}.legend-ui{flex-direction:row;flex-wrap:wrap}.legend-ui button{width:auto}}

/* Controls */
.controls{display:flex;flex-wrap:wrap;gap:12px;padding:16px 0}
.controls input[type="search"],.controls select{
  padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;min-width:220px;font-size:14px
}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.card .thumb{aspect-ratio:16/9;background:#eef2f7;overflow:hidden}
.card .body{padding:14px}
.card .name{font-weight:600;margin:0 0 6px}
.card .summary{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{display:inline-flex;align-items:center;gap:6px;background:#eef6ff;color:#0b66c3;border-radius:999px;padding:5px 10px;font-size:13px;border:1px solid #dbeafe;font-weight:600}
.meta{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px;margin-top:8px;flex-wrap:wrap}
.bar{height:8px;background:#eef2f7;border-radius:999px;overflow:hidden}
.bar > span{display:block;height:100%;background:var(--accent)}

/* Detail */
main.detail{display:grid;grid-template-columns:2fr 1fr;gap:20px}
@media (max-width:960px){main.detail{grid-template-columns:1fr}}
.hero{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.hero h1{margin:0 0 6px}
.hero .tagline{color:var(--muted)}
.breadcrumb{color:var(--muted);font-size:13px;margin-bottom:6px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.tag{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;padding:4px 8px;background:#fff;color:var(--fg);font-size:12px}
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:640px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{border:1px dashed var(--border);border-radius:12px;padding:10px}
.kpi .label{color:var(--muted);font-size:12px}
.kpi .value{font-weight:700}
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:2px 8px;font-size:12px;border:1px solid var(--border)}
.pill.positive{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.pill.neutral{background:#f3f4f6;color:#374151;border-color:#e5e7eb}
.pill.negative{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.pill.mixed{background:#fffbeb;color:#92400e;border-color:#fde68a}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer}
.btn:hover{background:#f9fafb}

/* Simple editor */
.editor{border:1px solid var(--border);border-radius:10px;background:#fff}
.editor-toolbar{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding:6px}
.editor-toolbar .ed-btn{border:1px solid var(--border);background:#fff;border-radius:6px;padding:4px 8px;cursor:pointer}
.editor-toolbar .ed-btn:hover{background:#f9fafb}
.editor-area{min-height:180px;padding:10px}
.map-wrap{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start}
.legend{max-width:220px;border:1px solid var(--border);border-radius:10px;padding:8px;background:#fff}

.empty{padding:24px;background:#fff;border:1px dashed var(--border);border-radius:12px;color:var(--muted)}

/* Accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Responsive for interactive legends */
@media (max-width:768px){
  .map-wrap{grid-template-columns:1fr}
  .legend-ui{flex-direction:row;flex-wrap:wrap}
  .legend-ui button{width:auto}
}

/* Mini bar charts for SOCs/dSOC */
.charts{display:grid;grid-template-columns:1fr;gap:12px}
.bar-group{display:flex;align-items:center;gap:10px}
.bar-label{min-width:100px;color:var(--fg);font-size:14px;font-weight:700}
.bar-rail{flex:1;height:18px;background:#f1f5f9;border-radius:999px;position:relative;overflow:hidden;border:1px solid var(--border)}
.bar-fill{height:100%;background:linear-gradient(90deg,#60a5fa,#22c55e);border-radius:999px 0 0 999px}
.bar-annot{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:14px;color:#0f172a;font-weight:600}
.bar-note{font-size:12px;color:var(--muted)}

/* Vertical charts for index preview */
.vcharts{margin-top:12px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.vcharts h3,.vcharts h4{margin:0 0 10px 0;font-size:18px}
.vbars{display:flex;align-items:flex-end;gap:32px;height:200px}
.vbar{display:flex;flex-direction:column;align-items:center;gap:8px}
.vbar-rail{width:44px;height:200px;background:#f1f5f9;border:1px solid var(--border);border-radius:10px;position:relative;overflow:hidden;display:flex;align-items:flex-end}
.vbar-fill{width:100%;background:linear-gradient(180deg,#10b981,#0ea5e9)}
.vbar-caption{font-size:14px;color:var(--fg);font-weight:700}
.varrow{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:14px;color:var(--fg)}
.varrow .line{width:160px;height:2px;background:var(--brand);position:relative}
.varrow .line::after{content:'';position:absolute;right:-4px;top:-4px;border:6px solid transparent;border-left-color:var(--brand)}
.vmarker{position:absolute;left:0;width:100%;border-top:2px dashed #94a3b8}
.vmarker-label{position:absolute;left:50%;transform:translate(-50%,-120%);background:#fff;border:1px solid var(--border);border-radius:6px;padding:3px 8px;font-size:12px;color:#64748b;font-weight:600}
.vbar-value{position:absolute;left:50%;transform:translate(-50%,6px);background:#fff;border:1px solid var(--border);border-radius:6px;padding:3px 8px;font-size:13px;color:#0f172a;font-weight:700}

/* Sticky toolbar at top (search + filters) */
.toolbar{position:sticky;top:64px;z-index:5;background:var(--bg);border-bottom:1px solid var(--border);}
.toolbar .controls{display:flex;flex-wrap:wrap;gap:12px;padding:12px 0}