/* kktree — themeable design system.
   Components read semantic tokens; a theme = a token pack scoped to
   [data-theme] (+ [data-mode] for dark/light). --gold is the accent token. */

/* ===== THEME: Editorial / "Broadsheet" (default) — dark ===== */
:root, [data-theme="editorial"]{
  --bg:#0b0c0f; --bg-rail:#0d0f13; --scrim:rgba(11,12,15,.82); --surface:#15171d; --surface-2:#1b1e26;
  --line:#252932; --line-2:#333845;
  --ink:#edeef1; --ink-2:#a4a9b5; --ink-3:#6c717b;
  --gold:#e3a857; --gold-2:#f0c07e; --gold-soft:rgba(227,168,87,.12);
  --neg:#e0574e; --neu:#8a8f9a; --pos:#4fae74;
  --int:#e0a14e; --comp:#6f86d6; --coal:#b073d6;
  --shadow:0 10px 40px rgba(0,0,0,.5); --shadow-sm:0 2px 10px rgba(0,0,0,.3);
  --serif:'Fraunces',ui-serif,Georgia,"Times New Roman",serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --r:13px; --r-lg:16px; --blur:0px; --grid:transparent; --ambient:0;
}
/* ===== THEME: Swiss / "Akzident" — dark ===== */
[data-theme="swiss"]{
  --bg:#0a0a0b; --bg-rail:#0e0e10; --scrim:rgba(10,10,11,.86); --surface:#121214; --surface-2:#1a1a1d;
  --line:#262629; --line-2:#34343a; --ink:#f5f5f6; --ink-2:#a0a0a6; --ink-3:#64646b;
  --gold:#e8412e; --gold-2:#ff5a47; --gold-soft:rgba(232,65,46,.14);
  --neg:#ff5a47; --neu:#88888f; --pos:#3bd07e;
  --shadow:none; --shadow-sm:none;
  --serif:'Archivo',sans-serif; --sans:'Archivo',-apple-system,Arial,sans-serif; --mono:'Space Mono',monospace;
  --r:2px; --r-lg:3px; --blur:0px; --grid:transparent; --ambient:0;
}
/* ===== THEME: Luxe Dark Glass / "Lumen" — dark ===== */
[data-theme="luxe"]{
  --bg:#06070e; --bg-rail:#080912; --scrim:rgba(8,9,18,.55); --surface:rgba(255,255,255,.05); --surface-2:rgba(255,255,255,.085);
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --ink:#f5f6fc; --ink-2:#abb1c6; --ink-3:#6f7489;
  --gold:#f0b35e; --gold-2:#ffd089; --gold-soft:rgba(240,179,94,.16);
  --neg:#ff7079; --neu:#8b91a6; --pos:#43d6a0;
  --shadow:0 30px 80px -30px rgba(0,0,0,.8); --shadow-sm:0 12px 36px -18px rgba(0,0,0,.65);
  --serif:'Instrument Serif',ui-serif,Georgia,serif; --sans:'Hanken Grotesk',-apple-system,sans-serif; --mono:'JetBrains Mono',monospace;
  --r:14px; --r-lg:20px; --blur:18px; --grid:transparent; --ambient:1;
}
/* ===== THEME: Data-Dense Ops / "Operator" — dark ===== */
[data-theme="ops"]{
  --bg:#090d0e; --bg-rail:#0c1213; --scrim:rgba(12,18,19,.86); --surface:#10181a; --surface-2:#162122;
  --line:#1d2a2a; --line-2:#293838; --ink:#d9e4e2; --ink-2:#869894; --ink-3:#5b6c69;
  --gold:#2fc6da; --gold-2:#5ad9e9; --gold-soft:rgba(47,198,218,.16);
  --neg:#ff5d5d; --neu:#7e8f8c; --pos:#34d27e;
  --shadow:0 8px 24px -12px rgba(0,0,0,.6); --shadow-sm:none;
  --serif:'IBM Plex Sans',sans-serif; --sans:'IBM Plex Sans',-apple-system,sans-serif; --mono:'IBM Plex Mono',monospace;
  --r:4px; --r-lg:6px; --blur:0px; --grid:rgba(255,255,255,.022); --ambient:0;
}
/* ===== LIGHT MODE token overrides (per theme) ===== */
:root[data-mode="light"], [data-theme="editorial"][data-mode="light"]{
  --bg:#f6f4ef; --bg-rail:#efece4; --scrim:rgba(246,244,239,.82); --surface:#fffdf8; --surface-2:#f2efe7;
  --line:#e6e1d6; --line-2:#d7d1c3; --ink:#1d1b15; --ink-2:#5b574c; --ink-3:#8c8678;
  --gold:#cf9442; --gold-2:#e6b667; --gold-soft:rgba(207,148,66,.16);
  --neg:#c2483f; --neu:#7c786e; --pos:#2f8f5b;
  --shadow:0 18px 44px -24px rgba(70,55,30,.24); --shadow-sm:0 6px 16px -12px rgba(70,55,30,.2);
}
[data-theme="swiss"][data-mode="light"]{
  --bg:#fafafa; --bg-rail:#f3f3f3; --scrim:rgba(250,250,250,.86); --surface:#fff; --surface-2:#f1f1f2;
  --line:#e3e3e5; --line-2:#cfcfd2; --ink:#0a0a0b; --ink-2:#55555c; --ink-3:#8b8b92;
  --gold:#e8412e; --gold-2:#ff5a47; --neg:#e03522; --neu:#74747c; --pos:#11a05e;
}
[data-theme="luxe"][data-mode="light"]{
  --bg:#e9ecf6; --bg-rail:#e3e7f3; --scrim:rgba(233,236,246,.55); --surface:rgba(255,255,255,.6); --surface-2:rgba(255,255,255,.78);
  --line:rgba(34,40,80,.12); --line-2:rgba(34,40,80,.2); --ink:#1a1d2c; --ink-2:#565d79; --ink-3:#8990a9;
  --gold:#c2862a; --gold-2:#daa24a; --gold-soft:rgba(194,134,42,.16);
  --neg:#e0524f; --neu:#7c8298; --pos:#0f9d6b;
  --shadow:0 30px 70px -36px rgba(40,46,96,.4); --shadow-sm:0 12px 32px -20px rgba(40,46,96,.28);
}
[data-theme="ops"][data-mode="light"]{
  --bg:#eef2f1; --bg-rail:#e7ecea; --scrim:rgba(238,242,241,.86); --surface:#fff; --surface-2:#f2f6f5;
  --line:#dce4e2; --line-2:#c6d2cf; --ink:#0b1413; --ink-2:#4a5754; --ink-3:#7b8a87;
  --gold:#0f9d6b; --gold-2:#2bb381; --gold-soft:rgba(15,157,107,.16);
  --neg:#dd3b3b; --neu:#6f7e7b; --pos:#0f9d5e; --grid:rgba(0,30,25,.025);
}
/* ===== Structural fidelity (what tokens can't express) ===== */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--ambient);
  transition:opacity .3s ease;
  background:radial-gradient(58% 48% at 16% -4%,rgba(155,123,240,.85),transparent 60%),
             radial-gradient(54% 46% at 98% 6%,rgba(240,179,94,.85),transparent 58%),
             radial-gradient(60% 60% at 70% 108%,rgba(240,179,94,.4),transparent 60%);}
[data-theme="luxe"][data-mode="light"] body::before{opacity:.5}
/* Luxe: frosted glass on the surfaces */
[data-theme="luxe"] .card,[data-theme="luxe"] .kpi,[data-theme="luxe"] .insight,[data-theme="luxe"] .theme,
[data-theme="luxe"] .answer,[data-theme="luxe"] .chip,[data-theme="luxe"] .tablewrap,[data-theme="luxe"] .explorer{
  backdrop-filter:blur(var(--blur)) saturate(140%);-webkit-backdrop-filter:blur(var(--blur)) saturate(140%);}
/* Ops: faint console grid on the canvas */
body{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:40px 40px;background-attachment:fixed}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
.display{font-family:var(--serif);font-feature-settings:"tnum";letter-spacing:-.01em}
a{color:var(--gold);text-decoration:none}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
.mut{color:var(--ink-2)} .faint{color:var(--ink-3)} .tnum{font-variant-numeric:tabular-nums}

/* layout */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.rail{background:var(--bg-rail);border-right:1px solid var(--line);padding:20px 14px;
  display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:9px;padding:6px 8px 16px}
.brand .mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(145deg,var(--gold),#9c6b27);
  display:grid;place-items:center;color:#1a1206;font-weight:800;font-family:var(--serif)}
.brand .name{font-family:var(--serif);font-size:19px;font-weight:600}
.brand .name b{color:var(--gold)}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--ink-2);
  font-weight:500;font-size:13.5px;transition:.12s}
.nav a:hover{background:var(--surface);color:var(--ink)}
.nav a.on{background:var(--gold-soft);color:var(--gold-2)}
.nav a .ic{width:17px;text-align:center;opacity:.9}
.rail .spacer{flex:1}
.rail .status{font-size:11px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:12px;line-height:1.7}
.rail .status .dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:5px}

.main{min-width:0;display:flex;flex-direction:column}

/* time-scope brush — shared across Overview / Explore / Activity */
.scopebar{position:sticky;top:var(--topbar-h,72px);z-index:15;background:var(--scrim);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding:10px 28px 11px;transition:opacity .2s}
.scopebar.reloading{opacity:.6}
.scopebar .srow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.scopebar .presets{display:inline-flex;gap:4px}
.scopebar .pz{background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-2);border-radius:8px;
  padding:4px 10px;font-size:11.5px;cursor:pointer;font-family:inherit;transition:.12s}
.scopebar .pz:hover{color:var(--ink);border-color:var(--gold)} .scopebar .pz.on{background:var(--gold);color:#231706;font-weight:600;border-color:var(--gold)}
.scopebar .step{background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-2);border-radius:8px;
  padding:4px 9px;font-size:12px;cursor:pointer;font-family:inherit}
.scopebar .step:hover{color:var(--ink);border-color:var(--gold)} .scopebar .step:disabled{opacity:.4;cursor:default}
.scopebar .readout{margin-left:auto;font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.scopebar .readout b{color:var(--ink);font-family:var(--serif)}
.scopebar .readout .cnt{color:var(--gold-2)}
.scopebar .schart{margin-top:6px}
.scopebar svg{display:block;width:100%;overflow:visible}
.scopebar .sarea-ctx{fill:var(--ink-2);opacity:.13}                 /* whole timeline, dimmed */
.scopebar .sline{fill:none;stroke:var(--gold-2);stroke-width:1.5px} /* lit window outline */
.scopebar .sbase{stroke:var(--line-2);stroke-width:1}
.scopebar .sgrid{stroke:var(--line);stroke-width:1}
.scopebar .syear{fill:var(--ink-3);font-size:10px;font-family:var(--sans)}
.scopebar .pinline{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 3;opacity:.45}
.scopebar .pin:hover .pinline{opacity:1;stroke:var(--gold)}
.scopebar .pindot{stroke:var(--bg);stroke-width:1.5;transition:filter .12s}
.scopebar .pin:hover .pindot{filter:brightness(1.18)}
.scopebar .pincount{fill:#1a1206;font-size:9px;font-weight:700;font-family:var(--sans)}
.scopebar .saddform{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.scopebar .saddform[hidden]{display:none}   /* beat the .saddform display:flex so the toggle works */
.scopebar .saddform input,.scopebar .saddform select{width:auto;padding:7px 10px;font-size:12.5px}
.scopebar .saddform #evtitle{flex:2;min-width:220px} .scopebar .saddform #evnote{flex:1;min-width:150px}
.scopebar .step.on{background:var(--gold);color:#231706;font-weight:600;border-color:var(--gold)}
.scopebar .selection{fill:var(--gold-soft);stroke:var(--gold);stroke-width:1.5}
.scopebar .brushg .overlay{cursor:crosshair}
.scopebar .handle{fill:var(--gold);rx:2.5}
.topbar{position:sticky;top:0;z-index:20;background:var(--scrim);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding:15px 28px;display:flex;align-items:center;gap:14px}
.topbar h1{font-family:var(--serif);font-size:21px;font-weight:600}
.topbar .sub{color:var(--ink-2);font-size:12.5px}
.topbar .sp{flex:1}
.content{padding:28px 32px 96px;max-width:none;width:100%}   /* full-bleed: match the edge-to-edge brush/topbar */
.section{margin-bottom:34px}
.section>.head{display:flex;align-items:baseline;gap:10px;margin-bottom:15px}
.section>.head h2{font-size:18px} .section>.head .mut{font-size:13px}

/* primitives */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:17px}
.grid{display:grid;gap:14px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;font-size:12px;color:var(--ink-2)}
.chip .dot{width:7px;height:7px;border-radius:50%}
.tag{display:inline-block;font-size:10.5px;padding:2px 8px;border-radius:6px;border:1px solid var(--line-2);white-space:nowrap}
.btn{appearance:none;border:1px solid transparent;border-radius:10px;padding:10px 15px;font-weight:600;
  font-size:13px;font-family:inherit;cursor:pointer;background:linear-gradient(180deg,var(--gold-2),var(--gold));
  color:#231706;transition:.12s}
.btn:hover{filter:brightness(1.06)} .btn:disabled{opacity:.45;cursor:default}
.btn.ghost{background:var(--surface-2);color:var(--ink);border-color:var(--line-2)}
.btn.sm{padding:7px 11px;font-size:12px}
input,select,textarea{background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink);
  border-radius:10px;padding:10px 12px;font-size:13.5px;font-family:inherit;outline:none;width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.seg button{background:none;border:0;color:var(--ink-2);padding:8px 13px;font-size:12.5px;cursor:pointer;font-family:inherit}
.seg button.on{background:var(--gold);color:#231706;font-weight:600}
.spin{width:14px;height:14px;border:2px solid #fff4;border-top-color:var(--gold);border-radius:50%;
  display:inline-block;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

/* KPI strip */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.kpi .n{font-size:clamp(32px,2.7vw,46px);font-weight:600;line-height:1}
.kpi .l{color:var(--ink-3);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;margin-top:9px}

/* insights (cold-start) */
.insights{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.insight{background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:var(--r);padding:15px}
.insight .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-2);margin-bottom:6px}
.insight .t{font-weight:600;margin-bottom:5px}
.insight .d{color:var(--ink-2);font-size:12.7px}
.insight.warn{border-left-color:var(--neu)} .insight.warn .k{color:var(--ink-2)}

/* theme cards */
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.theme{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;cursor:pointer;transition:.12s}
.theme:hover{border-color:var(--line-2);transform:translateY(-1px)}
.theme .bar{height:4px;border-radius:3px;margin-bottom:16px}
.theme .n{font-size:clamp(28px,2.1vw,38px);font-weight:600;line-height:1}
.theme .lab{color:var(--ink-2);font-size:14.5px;margin-top:4px}
.theme .meta{color:var(--ink-3);font-size:11.5px;margin-top:8px}

/* bar lists */
.bars .row{display:flex;align-items:center;gap:11px;margin:9px 0;cursor:pointer}
.bars .row:hover .lab{color:var(--ink)}
.bars .lab{width:165px;font-size:12.7px;color:var(--ink-2);flex:none}
.bars .track{flex:1;height:9px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.bars .fill{height:100%;border-radius:5px}
.bars .val{width:120px;text-align:right;font-size:12px;color:var(--ink-2);flex:none}

/* targets / list */
.list .row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.list .row:last-child{border-bottom:0}

/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px}
.badge.high{background:rgba(79,174,116,.15);color:var(--pos)}
.badge.medium{background:rgba(227,168,87,.15);color:var(--gold-2)}
.badge.low{background:rgba(138,143,154,.15);color:var(--neu)}
.badge.supported{background:rgba(79,174,116,.15);color:var(--pos)}
.badge.unsupported{background:rgba(224,87,78,.15);color:var(--neg)}
.badge.mixed{background:rgba(227,168,87,.15);color:var(--gold-2)}
.badge.insufficient_data{background:rgba(138,143,154,.15);color:var(--neu)}

/* ask */
.askbox{display:flex;gap:10px;align-items:flex-end}
.askbox textarea{resize:none;min-height:48px}
.suggest{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.suggest .q{background:var(--surface-2);border:1px solid var(--line-2);border-radius:999px;padding:7px 13px;
  font-size:12.5px;color:var(--ink-2);cursor:pointer;transition:.12s}
.suggest .q:hover{border-color:var(--gold);color:var(--ink)}
.answer{background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--line);
  border-radius:var(--r);padding:20px;margin-top:16px}
.answer .a{font-size:15px;line-height:1.65}
.answer ul{margin:12px 0 0;padding-left:18px;color:var(--ink-2)} .answer li{margin:4px 0}
.evidence{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}

/* table */
.tablewrap{border:1px solid var(--line);border-radius:var(--r);overflow:auto;max-height:460px}
table{width:100%;border-collapse:collapse;font-size:12.7px}
th,td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--ink-3);font-weight:600;position:sticky;top:0;background:var(--surface);font-size:11px;
  text-transform:uppercase;letter-spacing:.04em}
tbody tr:hover{background:var(--surface-2)} .nowrap{white-space:nowrap}

/* map */
svg{display:block;width:100%} .geo path{stroke:var(--bg);stroke-width:.6px;cursor:pointer;transition:opacity .12s}
.geo path.nodata{fill:#1a1d24}.geo path:hover{opacity:.8}.geo path.sel{stroke:var(--gold);stroke-width:1.8px}
.india path{stroke:var(--bg);stroke-width:.4px;fill:#1a1d24;cursor:pointer}.india path.jh{fill:var(--gold)}
.legend{display:flex;gap:5px;align-items:center;flex-wrap:wrap;color:var(--ink-3);font-size:11px;margin-top:8px}
.legend .sw{width:14px;height:10px;border-radius:2px;display:inline-block}
.dot8{width:8px;height:8px;border-radius:50%;display:inline-block}

.tip{position:fixed;pointer-events:none;background:#06070a;border:1px solid var(--line-2);border-radius:9px;
  padding:9px 11px;font-size:12px;max-width:300px;opacity:0;z-index:90;box-shadow:var(--shadow);transition:opacity .1s}
.tip b{color:#fff}
.toast{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:9px;z-index:80}
.toast .t{background:#0a0b0e;border:1px solid var(--line-2);border-left:3px solid var(--gold);border-radius:10px;
  padding:11px 14px;font-size:12.7px;box-shadow:var(--shadow);max-width:340px;animation:rise .2s}
.toast .t.ok{border-left-color:var(--pos)} .toast .t.err{border-left-color:var(--neg)}
@keyframes rise{from{transform:translateY(8px);opacity:0}}
.empty{padding:64px 24px;text-align:center;color:var(--ink-2)}
.empty .e1{font-family:var(--serif);font-size:22px;color:var(--ink);margin-bottom:8px}
.drop{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:20px;text-align:center;cursor:pointer;transition:.12s}
.drop.hot{border-color:var(--gold);background:var(--gold-soft)}

/* lab explorer — fills the viewport; the third fold (preview/query) flexes.
   NB: container class is .explorer (NOT .lab — that collides with .theme .lab / .bars .lab labels) */
.content:has(.explorer){max-width:none;padding-bottom:18px}     /* explorer goes full width + tight */
.explorer{display:grid;grid-template-columns:248px 1fr;gap:16px;align-items:stretch;
  height:calc(100vh - 100px);overflow:hidden}
.explorer .pillar{height:100%;overflow:auto}
.explorer #labmain{display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden}
.explorer #labmain>.card{flex:none}                             /* schema + query stay compact */
.explorer #dsout{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:14px}
.explorer #dsout>.card{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:0}
.explorer #dsout .tablewrap{flex:1;min-height:0;max-height:none}  /* results fill + scroll internally */
.explorer .layer{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin:13px 0 5px}
.explorer .ds{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;cursor:pointer;color:var(--ink-2);font-size:12.5px;font-family:ui-monospace,Menlo,monospace}
.explorer .ds:hover{background:var(--surface-2)}
.explorer .ds.on{background:var(--gold-soft);color:var(--gold-2)}
.explorer .ds .rows{margin-left:auto;font-size:10px;color:var(--ink-3);font-family:var(--sans)}

@media(max-width:1080px){.app{grid-template-columns:1fr}.rail{display:none}.kpis{grid-template-columns:repeat(3,1fr)}
  .themes{grid-template-columns:1fr}
  .explorer{grid-template-columns:1fr;height:auto;overflow:visible}  /* stack + normal scroll on mobile */
  .explorer .pillar{height:auto;max-height:320px}
  .explorer #labmain{height:auto;overflow:visible}
  .explorer #dsout,.explorer #dsout>.card{display:block}
  .explorer #dsout .tablewrap{max-height:460px}}

/* ===== appearance / theme settings ===== */
.railbtn{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;color:var(--ink-2);
  font-weight:500;font-size:13.5px;background:none;border:0;font-family:inherit;cursor:pointer;width:100%;text-align:left;transition:.12s}
.railbtn:hover{background:var(--surface);color:var(--ink)}
.railbtn .ic{width:17px;text-align:center;opacity:.9}
.scrim-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);z-index:90;opacity:0;
  animation:fadein .18s forwards}
@keyframes fadein{to{opacity:1}}
.settings{position:fixed;top:0;right:0;height:100vh;width:380px;max-width:90vw;background:var(--bg-rail);
  border-left:1px solid var(--line);z-index:91;padding:22px;overflow:auto;box-shadow:var(--shadow);
  transform:translateX(100%);animation:slidein .22s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes slidein{to{transform:translateX(0)}}
.settings h2{font-family:var(--serif);font-size:20px;font-weight:600}
.settings .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.settings .x{background:none;border:0;color:var(--ink-2);font-size:22px;cursor:pointer;line-height:1}
.settings .sub{color:var(--ink-3);font-size:12.5px;margin-bottom:20px}
.settings .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:18px 0 10px;font-weight:600}
.theme-card{display:flex;gap:12px;align-items:center;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;
  font-family:inherit;color:var(--ink);transition:.14s}
.theme-card:hover{border-color:var(--line-2);transform:translateY(-1px)}
.theme-card.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.theme-card .sw{display:flex;gap:4px;flex:none}
.theme-card .sw i{width:16px;height:30px;border-radius:4px;display:block;border:1px solid rgba(255,255,255,.08)}
.theme-card .nm{font-weight:600;font-size:14px} .theme-card .ds{color:var(--ink-3);font-size:11.5px;margin-top:1px}
.theme-card .tick{margin-left:auto;color:var(--gold);font-weight:700;opacity:0} .theme-card.on .tick{opacity:1}
.mode-seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.mode-seg button{background:none;border:0;color:var(--ink-2);padding:9px 18px;font:inherit;font-size:13px;cursor:pointer}
.mode-seg button.on{background:var(--gold);color:#231706;font-weight:600}
.settings .full{color:var(--ink-3);font-size:12px;margin-top:18px}.settings .full a{color:var(--gold)}

/* ===== people directory ===== */
.dir tbody tr{cursor:pointer}
.tablewrap table th.rt,.tablewrap table td.rt{text-align:right;font-variant-numeric:tabular-nums}
.pname{font-weight:500;color:var(--ink)}
.pp{color:var(--gold);font-size:8px;vertical-align:2px;margin-left:6px}
#persondrawer{width:440px;max-width:92vw}
.pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0 8px}
.pstats .n{font-family:var(--serif);font-size:23px;font-weight:600;line-height:1}
.pstats .l{color:var(--ink-3);font-size:10px;text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
.prow{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}

/* ================= Conversations pillar + chat surface (#10/#12) ================= */
.convsec{padding:8px 10px 4px;border-top:1px solid var(--line);margin-top:6px;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.navsep{display:flex;align-items:center;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);padding:6px 8px}
.navsep .newchat{color:var(--gold-2);text-decoration:none;font-weight:600;letter-spacing:0;text-transform:none;font-size:11px}
.threadnav{overflow-y:auto;max-height:40vh;display:flex;flex-direction:column;gap:1px}
.threadnav .thread{display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:var(--r);color:var(--ink-2);text-decoration:none;font-size:12.5px}
.threadnav .thread .tt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.threadnav .thread:hover{background:var(--surface-2)}
.threadnav .thread.on{background:var(--surface-2);color:var(--ink)}
.threadnav .thread .tx{opacity:0;border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.threadnav .thread:hover .tx{opacity:.8}
.thread-empty{color:var(--ink-3);font-size:12px;padding:8px 9px}

.chat{display:flex;flex-direction:column;height:calc(100vh - var(--topbar-h,64px) - 36px);max-width:920px;margin:0 auto}
.chat .msgs{flex:1;overflow-y:auto;padding:8px 4px 16px;display:flex;flex-direction:column;gap:18px}
.bubble{display:flex;flex-direction:column}
.bubble.user .body{align-self:flex-end;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:11px 15px;max-width:80%;white-space:pre-wrap;font-size:14px}
.bubble.assistant{gap:8px}
.bubble.assistant .ticker{color:var(--gold-2);font-size:12px;font-family:var(--mono);min-height:0}
.bubble.assistant .body{font-size:14.5px;line-height:1.62;color:var(--ink)}
.bubble.assistant .body h1,.bubble.assistant .body h2,.bubble.assistant .body h3{font-family:var(--serif);margin:14px 0 6px;line-height:1.25}
.bubble.assistant .body h1{font-size:20px}.bubble.assistant .body h2{font-size:17px}.bubble.assistant .body h3{font-size:15px}
.bubble.assistant .body p{margin:8px 0}
.bubble.assistant .body ul,.bubble.assistant .body ol{margin:8px 0 8px 20px}
.bubble.assistant .body li{margin:3px 0}
.bubble.assistant .body code{font-family:var(--mono);background:var(--surface-2);padding:1px 5px;border-radius:5px;font-size:12.5px}
.bubble.assistant .body pre{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;overflow-x:auto;margin:10px 0}
.bubble.assistant .body pre code{background:none;padding:0}
.bubble.assistant .body table.md{border-collapse:collapse;margin:10px 0;font-size:12.5px;width:100%}
.bubble.assistant .body table.md th,.bubble.assistant .body table.md td{border:1px solid var(--line);padding:5px 9px;text-align:left}
.bubble.assistant .body ul.findings{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.bubble.assistant .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.bubble.assistant .meta .cov{color:var(--ink-3);font-size:11.5px}
.chart-block{margin:14px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px}
.chart-block.large{width:100%}
.chart-block svg{width:100%;height:auto;display:block}
.chart-block .ch-title{font-family:var(--serif);font-size:14.5px;margin-bottom:8px}
.chart-block .ch-src{color:var(--ink-3);font-size:11px;margin-top:6px}
.chart-block .ch-table{border-collapse:collapse;font-size:12px;width:100%}
.chart-block .ch-table th,.chart-block .ch-table td{border:1px solid var(--line);padding:4px 8px;text-align:left}
.sources{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sources-h{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);width:100%}
.cite{font-size:11.5px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:3px 10px;cursor:pointer}
.cite:hover{border-color:var(--gold);color:var(--ink)}
.composer{position:sticky;bottom:0;display:flex;gap:10px;align-items:flex-end;padding:12px 0 6px;background:linear-gradient(transparent,var(--bg) 22%)}
.composer textarea{flex:1;resize:none;min-height:46px;max-height:180px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:13px 15px;color:var(--ink);font:inherit;font-size:14px}
.composer textarea:focus{outline:none;border-color:var(--gold)}
.chat-empty{margin:auto;text-align:center;padding:40px 10px;max-width:620px}
.chat-empty .ce-h{font-family:var(--serif);font-size:26px;margin-bottom:8px}
.chat-empty .ce-s{color:var(--ink-3);font-size:13.5px;margin-bottom:22px}
.chat-empty .suggest{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}

/* ---- auth: login + user menu (#47) ---- */
.login{max-width:320px;margin:8vh auto 0;display:flex;flex-direction:column;gap:11px;text-align:center}
.login .lg-h{font-family:var(--serif);font-size:30px}
.login .lg-s{color:var(--ink-3);font-size:13px;margin-bottom:8px}
.login input{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:11px 13px;color:var(--ink);font:inherit;font-size:14px}
.login input:focus{outline:none;border-color:var(--gold)}
.login .lg-err{color:var(--neg);font-size:12.5px;min-height:16px}
.status .um-name{color:var(--ink);font-weight:600}
.status .um-role{color:var(--gold-2);text-transform:uppercase;font-size:9.5px;letter-spacing:.06em}

/* ---- People table: contain x-overflow + breathing room (user feedback) ---- */
.content{min-width:0}
.dir{overflow:hidden}
.dir .tablewrap{border:0;border-radius:0}
.dir table{min-width:660px}                 /* scrolls inside the card on narrow screens, not the page */
.dir th,.dir td{padding:11px 16px}
.dir td.actives{white-space:nowrap;font-size:12px;line-height:1.45}
@media(max-width:1080px){ .dir th:nth-child(6),.dir td:nth-child(6){display:none} }  /* hide Issues col when tight */

/* ---- Chat v2: thinking-step log, stop button, tokens, composer (Claude-like) ---- */
.bubble.assistant .typing{display:inline-flex;gap:4px;align-items:center;height:18px}
.bubble.assistant .typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:typing 1s infinite}
.bubble.assistant .typing i:nth-child(2){animation-delay:.15s}
.bubble.assistant .typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.steps{margin-bottom:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.steps-h{display:flex;align-items:center;gap:7px;width:100%;text-align:left;background:none;border:0;color:var(--ink-2);font:inherit;font-size:12px;padding:9px 13px;cursor:pointer}
.steps-h:hover{background:var(--surface-2)}
.steps-caret{display:inline-block;color:var(--ink-3);transition:transform .15s}
.steps[data-open="0"] .steps-caret{transform:rotate(-90deg)}
.steps[data-open="0"] .steps-list{display:none}
.steps-list{padding:2px 13px 9px;display:flex;flex-direction:column;gap:4px}
.step{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);font-family:var(--mono)}
.step .s-ic{width:6px;height:6px;border-radius:50%;flex:none;background:var(--ink-3)}
.step.running .s-ic{background:var(--gold);animation:pulse 1s infinite}
.step.ok .s-ic{background:var(--pos)}
.step.err .s-ic{background:var(--neg)}
.step code{color:var(--gold-2);font-size:12px;background:none;padding:0}
.step .s-args{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:360px}
.step .s-state{margin-left:auto;color:var(--ink-3)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.bubble.assistant .meta .tokens{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.composer{position:sticky;bottom:0;display:block;padding:12px 0 8px;background:linear-gradient(transparent,var(--bg) 24%)}
.composer-in{display:flex;gap:8px;align-items:flex-end;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:8px 8px 8px 16px}
.composer-in:focus-within{border-color:var(--gold)}
.composer-in textarea{flex:1;resize:none;min-height:26px;max-height:200px;background:none;border:0;border-radius:0;box-shadow:none;color:var(--ink);font:inherit;font-size:14.5px;line-height:1.5;padding:6px 0}
.composer-in textarea:focus{outline:none;border:0;box-shadow:none}   /* kill the inner control's own focus ring/radius (double-border artifact) */
.sendbtn{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:var(--gold);color:var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;transition:filter .15s,background .15s}
.sendbtn:hover{filter:brightness(1.08)}
.sendbtn.stopping{background:var(--ink-2);color:var(--surface)}
.sendbtn .send-ic{line-height:1;font-size:15px}
.composer-hint{text-align:center;color:var(--ink-3);font-size:11px;margin-top:7px}

/* read-only serving indicator (#51) */
.ro-chip{display:inline-block;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-2);border:1px solid var(--line-2);border-radius:10px;padding:1px 7px;vertical-align:middle}

/* ===== global upload (rail button badge + drawer) ===== */
.upbadge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:10.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono,monospace)}
.upbadge.live{background:var(--gold-soft);color:var(--gold-2)}
.upbadge.ok{background:var(--pos);color:#06210f}
.upbadge.err{background:var(--neg);color:#2a0708}
.uploadpanel{width:440px}
.uplist{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.uprow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--line-2);
  border-radius:10px;background:var(--surface-2);font-size:12.5px}
.upnm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.upst{font-size:11.5px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.upst.q{color:var(--ink-3)} .upst.up{color:var(--gold-2)} .upst.pr{color:var(--ink-2)}
.upst.ok{color:var(--pos)} .upst.er{color:var(--neg);max-width:230px;overflow:hidden;text-overflow:ellipsis}
.upbar{grid-column:1/-1;height:3px;border-radius:3px;background:var(--line-2);overflow:hidden}
.upbar i{display:block;height:100%;background:var(--gold);transition:width .15s}
.upsum{margin-top:14px}
.upbanner{padding:11px 13px;border-radius:10px;font-size:12.5px;border:1px solid var(--line-2)}
.upbanner.live{border-left:3px solid var(--gold);display:flex;align-items:center;gap:8px}
.upbanner.ok{border-left:3px solid var(--pos)} .upbanner.warn{border-left:3px solid var(--gold)}
.upbanner .er{color:var(--neg)}
.upacts{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}

/* -------- war room (#92) -------- */
.wrbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;position:relative;z-index:2}
.wrbar .wrlab{font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.wrselect{background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;color:var(--ink);
  padding:8px 11px;font-size:12.5px;font-family:inherit;max-width:230px}
.wrselect:disabled{opacity:.5}
.wrdigest{margin-bottom:16px;font-size:13px;border-left:3px solid var(--gold)}
.wrgrid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.wrcard{display:flex;flex-direction:column;min-height:150px}
.wrhead{display:flex;align-items:center;gap:8px}
.wrhead h3{font-size:13.5px}
.wrsub{font-size:11.5px;color:var(--ink-3);margin:3px 0 10px}
.wrbody{flex:1;min-width:0}
.wrchip{font-size:10px;padding:2px 7px;border-radius:99px;border:1px solid var(--line-2);color:var(--ink-3);white-space:nowrap}
.wrchip.lock{border-color:var(--gold);color:var(--gold)}
.wrchip.lens{border-color:var(--comp);color:var(--comp)}
.wrstate{padding:14px 4px;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.wrstate.gated{color:var(--gold)}
.wrstate.degraded{color:var(--ink-3)}
.wrstate.err{color:var(--neg)}
.wrdisc{margin-top:10px;font-size:11px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:8px}
.wrlist{display:grid}
.wrrow{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line)}
.wrrow:last-child{border-bottom:0}
.wrrow .l{font-weight:600;font-size:12.5px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.wrrow .v{font-size:12px;color:var(--gold);white-space:nowrap}
.wrrow .s{flex-basis:100%;font-size:11.5px;color:var(--ink-3)}
.wrkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:10px;padding:6px 0}
.wrkpis .n{font-size:19px;font-family:var(--serif)}
.wrkpis .l{font-size:10.5px;color:var(--ink-3);margin-top:2px}

/* -------- ask-the-war-room demo hardening (#93) -------- */
.demo-h{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin-top:18px}
.suggest.demo .q{border-color:var(--gold);color:var(--ink);background:var(--gold-soft)}
.suggest.demo .q:hover{background:var(--gold);color:#231706}
.covbanner{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:0 0 10px;
  padding:8px 12px;border-radius:9px;font-size:12px;border:1px solid var(--line-2);
  border-left-width:3px;background:var(--surface-2)}
.covbanner .cb-conf{font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.05em;white-space:nowrap}
.covbanner .cb-note{color:var(--ink-2)}
.covbanner.high{border-left-color:var(--pos)} .covbanner.high .cb-conf{color:var(--pos)}
.covbanner.medium{border-left-color:var(--gold)} .covbanner.medium .cb-conf{color:var(--gold)}
.covbanner.low{border-left-color:var(--neg)} .covbanner.low .cb-conf{color:var(--neg)}
button.cite{font-family:inherit}
.cite-panel{flex-basis:100%;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:10px;padding:11px 13px;display:grid;gap:6px;justify-items:start}
.cite-panel .cp-q{font-size:12.5px;color:var(--ink)}
.cite-panel .cp-meta{font-size:11.5px;color:var(--ink-2)}
.cite-panel .cp-prov{font-size:10.5px;color:var(--ink-3);font-family:var(--mono)}
.cite-ref{font-family:inherit;font-size:11px;color:var(--gold);background:none;border:0;
  padding:0 1px;cursor:pointer;vertical-align:super}
.cite-ref:hover{text-decoration:underline}

/* -------- war map (#98) -------- */
.wmrow{display:grid;grid-template-columns:1.35fr .65fr;gap:14px;margin-bottom:14px}
@media (max-width:980px){.wmrow{grid-template-columns:1fr}}
.wmmap svg{display:block;width:100%}
.wmmap path:hover{stroke:var(--gold);stroke-width:1.4}
.wmside .wmgrp{padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px;cursor:pointer;display:flex;justify-content:space-between;gap:8px}
.wmside .wmgrp:last-child{border-bottom:0}
.wmside .wmgrp:hover{color:var(--gold)}
.wmunknown{border-left:3px solid var(--neg);font-size:12.5px;margin-bottom:14px}
#wmcrumb a{color:var(--gold);text-decoration:none;margin-left:6px;cursor:pointer}

/* -------- entity dossier (#101) -------- */
.edgrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.edpick{cursor:pointer}
.edpick:hover{border-color:var(--gold)}
.edpick b{font-size:13.5px}

/* -------- show your work (#114): coverage banner + evidence drawer -------- */
.covbar{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);
  border-radius:99px;padding:6px 12px;font-size:11.5px;color:var(--ink-2);cursor:pointer;font-family:inherit}
.covbar:hover{border-color:var(--gold);color:var(--ink)}
.covbar .cbdot{width:6px;height:6px;border-radius:50%;background:var(--pos)}
.whychip{margin-left:8px;background:none;border:1px solid var(--line-2);color:var(--ink-3);
  border-radius:99px;padding:1px 7px;font-size:10px;cursor:pointer;font-family:inherit}
.whychip:hover{border-color:var(--gold);color:var(--gold)}
.evdrawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--surface);
  border-left:1px solid var(--line-2);box-shadow:var(--shadow);transform:translateX(100%);
  transition:transform .18s ease;z-index:60;display:flex;flex-direction:column}
.evdrawer.open{transform:translateX(0)}
.evhead{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.evclose{background:none;border:0;color:var(--ink-2);font-size:20px;cursor:pointer;line-height:1}
.evbody{padding:16px 18px;overflow:auto}
.evscope{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:6px}
.evcov{font-size:12.5px;color:var(--ink-2);line-height:1.5;padding-bottom:12px;border-bottom:1px solid var(--line)}
.evlist{display:grid;gap:10px;margin-top:12px}
.evcite{border-left:2px solid var(--gold);padding-left:10px}
.evcite .q{font-size:13px;color:var(--ink)}
.evcite .m{font-size:11.5px;color:var(--ink-2);margin-top:2px}
.evcite .p{font-size:10.5px;color:var(--ink-3);font-family:var(--mono);margin-top:2px}

/* -------- quality dashboard (#115) -------- */
.qaxis .wrkpis{grid-template-columns:repeat(5,1fr)}
.qaxis .wrkpis .n{font-size:16px}
.qbadge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap}
.qbadge.pass{background:var(--pos);color:#fff}
.qbadge.fail{background:var(--neg);color:#fff}
.qbadge.none{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line-2)}
.qgates{margin-top:10px;font-size:11.5px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:8px}