/* PtX tracker — design tokens (dataviz reference palette; status = validated ordinal blue ramp) */
:root { color-scheme: light;
  --surface-0:#f4f4f2; --surface-1:#fcfcfb; --surface-2:#ffffff; --line:#e3e2de; --text-primary:#0b0b0b; --text-secondary:#52514e; --text-muted:#7a7975;
  --accent:#2a78d6; --st-concept:#86b6ef; --st-feas:#5598e7; --st-fid:#256abf; --st-oper:#104281; --st-hold:#d03b3b; --st-unknown:#9b9a95;
  --good:#0ca30c; --warning:#fab219; --critical:#d03b3b; --bar:#2a78d6; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { color-scheme: dark;
  --surface-0:#121211; --surface-1:#1a1a19; --surface-2:#232321; --line:#383835; --text-primary:#ffffff; --text-secondary:#c3c2b7; --text-muted:#8f8e86;
  --accent:#3987e5; --st-concept:#1c5cab; --st-feas:#3987e5; --st-fid:#6da7ec; --st-oper:#9ec5f4; --st-hold:#e66767; --st-unknown:#6f6e68; --bar:#3987e5; } }
:root[data-theme="dark"] { color-scheme: dark;
  --surface-0:#121211; --surface-1:#1a1a19; --surface-2:#232321; --line:#383835; --text-primary:#ffffff; --text-secondary:#c3c2b7; --text-muted:#8f8e86;
  --accent:#3987e5; --st-concept:#1c5cab; --st-feas:#3987e5; --st-fid:#6da7ec; --st-oper:#9ec5f4; --st-hold:#e66767; --st-unknown:#6f6e68; --bar:#3987e5; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--surface-0); color:var(--text-primary); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
header.top { display:flex; align-items:center; gap:18px; padding:8px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
header.top .brand { font-weight:700; } header.top nav a { color:var(--text-secondary); margin-right:14px; } header.top nav a.on { color:var(--text-primary); font-weight:600; }
header.top .right { margin-left:auto; color:var(--text-muted); display:flex; gap:12px; align-items:center; }
button, .btn { font:inherit; border:1px solid var(--line); background:var(--surface-1); color:var(--text-primary); border-radius:6px; padding:5px 10px; cursor:pointer; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
input, select { font:inherit; color:var(--text-primary); background:var(--surface-1); border:1px solid var(--line); border-radius:6px; padding:4px 6px; }
.wrap { max-width:1180px; margin:0 auto; padding:18px 16px 60px; }
.card { background:var(--surface-1); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:14px; }
.muted { color:var(--text-muted); } .small { font-size:12px; }
table.t { border-collapse:collapse; width:100%; } table.t th, table.t td { text-align:left; padding:5px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
table.t th { color:var(--text-secondary); font-weight:600; font-size:12px; }
.pill { display:inline-block; padding:1px 7px; border-radius:10px; font-size:12px; border:1px solid var(--line); color:var(--text-secondary); margin:1px 2px; white-space:nowrap; }
.pill.flag::before { content:"⚑ "; color:var(--warning); }
.rank { display:inline-block; min-width:18px; text-align:center; font-weight:700; font-size:11px; border-radius:4px; padding:0 4px; border:1px solid var(--line); color:var(--text-secondary); }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:-1px; }
/* map layout */
.app { display:grid; grid-template-columns: 270px 1fr 300px; height: calc(100vh - 45px); }
.filters { overflow:auto; padding:10px 12px; border-right:1px solid var(--line); background:var(--surface-1); }
.filters h4 { margin:12px 0 4px; font-size:12px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.03em; }
.filters label { display:block; font-size:13px; } .filters .row { display:flex; gap:6px; } .filters .row input { width:100%; }
.main { position:relative; min-width:0; } #map, #table { position:absolute; inset:0; } #table { top:46px; } #table { overflow:auto; background:var(--surface-1); }
.side { overflow:auto; padding:12px; border-left:1px solid var(--line); background:var(--surface-1); }
.kpis { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .kpi { background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:8px; }
.kpi b { display:block; font-size:18px; white-space:nowrap; } .kpi span { color:var(--text-secondary); font-size:12px; }
.viewtoggle { position:absolute; top:10px; left:10px; z-index:5; display:flex; gap:0; } .viewtoggle a { background:var(--surface-2); border:1px solid var(--line); padding:4px 12px; color:var(--text-secondary); }
.viewtoggle a.on { background:var(--accent); color:#fff; border-color:var(--accent); } .viewtoggle a:first-child{border-radius:6px 0 0 6px} .viewtoggle a:last-child{border-radius:0 6px 6px 0}
.legend { position:absolute; bottom:24px; left:10px; z-index:5; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:12px; }
.offmap { position:absolute; top:10px; right:10px; max-width:60%; z-index:5; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:4px 10px; font-size:12px; }
.chart { margin-top:12px; } .chart h5 { margin:0 0 4px; font-size:12px; color:var(--text-secondary); }
.chart svg text { fill:var(--text-secondary); font-size:11px; } .chart svg .val { fill:var(--text-primary); }
#tip { position:fixed; pointer-events:none; z-index:50; background:var(--surface-2); color:var(--text-primary); border:1px solid var(--line); border-radius:6px; padding:5px 8px; font-size:12px; box-shadow:0 2px 8px rgba(0,0,0,.15); display:none; }
.popcard h3 { margin:0 0 4px; font-size:15px; } .popcard .k { color:var(--text-secondary); }
.tabulator { background:var(--surface-1) !important; border:none !important; font-size:13px; }
.tabulator .tabulator-header, .tabulator .tabulator-header .tabulator-col { background:var(--surface-2) !important; color:var(--text-secondary) !important; border-color:var(--line) !important; }
.tabulator-row { background:var(--surface-1) !important; color:var(--text-primary) !important; border-color:var(--line) !important; }
.tabulator-row.tabulator-row-even { background:var(--surface-0) !important; } .tabulator-row:hover { background:var(--surface-2) !important; cursor:pointer; }
.tabulator .tabulator-footer { background:var(--surface-2) !important; color:var(--text-secondary) !important; border-color:var(--line) !important; }
/* project page */
.desc { font-size:15px; line-height:1.6; } sup a { font-size:11px; }
.facts td:first-child { width:190px; color:var(--text-secondary); } details summary { cursor:pointer; color:var(--text-secondary); }
.timeline li { margin-bottom:4px; }
.drawer-btn { display:none; }
@media (max-width: 900px) {
  header.top { flex-wrap:wrap; gap:8px; padding:6px 10px; } header.top nav a { margin-right:8px; font-size:13px; } header.top .right span { display:none; }
  .offmap { top:46px; left:10px; right:auto; max-width:none; } .legend { bottom:30px; font-size:11px; padding:4px 8px; }
  .drawer-btn { position:absolute; top:10px; left:140px; z-index:6; }
  .app { grid-template-columns: 1fr; grid-template-rows: auto 60vh auto; height:auto; }
  .filters { display:none; border-right:none; } .filters.open { display:block; } .drawer-btn { display:inline-block; }
  .main { height:60vh; } .side { border-left:none; }
}