:root{
  --ink:#FFFFFF;        /* panel background */
  --ink-2:#F3F6F4;      /* raised surfaces */
  --ink-3:#D9E0DC;      /* borders */
  --chalk:#17262B;      /* primary text */
  --chalk-dim:#5D6B66;  /* secondary text */
  --sea:#2F7F92;        /* interactive accent */
  --sea-deep:#24677A;
  --paper:#FFFFFF;      /* dialog surface */
  --paper-ink:#17262B;
  --shadow:0 1px 2px rgba(23,38,43,.06);
  --paper-dim:#5D6B66;
  --rule:#D9E0DC;
  --relocation:#D1495B;
  --hierarchical:#E0A030;
  --contagious:#3E8E7E;
  --stimulus:#8E6BBF;
  --hearth:#F2C14E;
  --unlabeled:#8A9590;
  --display:'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif;
  --body:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:var(--body); color:var(--chalk); background:var(--ink);
  display:grid; grid-template-rows:auto 1fr; overflow:hidden;
}
button{font:inherit; cursor:pointer}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--sea); outline-offset:2px;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; gap:18px; padding:10px 18px;
  border-bottom:1px solid var(--ink-3); background:var(--ink);
}
.brand{display:flex; align-items:baseline; gap:10px; min-width:0}
.brand h1{
  font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-0.02em; margin:0; white-space:nowrap;
}
.brand .eyebrow{
  font-family:var(--mono); font-size:11px; color:var(--chalk-dim); letter-spacing:.08em; text-transform:uppercase;
}
.topbar .fields{display:flex; gap:8px; margin-left:auto; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.topbar input{
  background:var(--ink-2); border:1px solid var(--ink-3); color:var(--chalk); border-radius:6px; padding:7px 10px; font-size:13px; width:150px;
}
.topbar input.short{width:80px}
.btn{
  background:var(--ink-2); color:var(--chalk); border:1px solid var(--ink-3); border-radius:6px; padding:7px 12px; font-size:13px; font-weight:500;
  transition:background .15s, border-color .15s;
}
.btn:hover{background:#E6ECE9}
.btn.primary{background:var(--sea); color:#fff; border-color:var(--sea)}
.btn.primary:hover{background:#3A94A8}
.btn.danger{color:#B3303F; border-color:#EBC3C8}
.btn.danger:hover{background:#FBEDEE}
.btn.small{padding:4px 9px; font-size:12px}

/* ---------- layout ---------- */
.workspace{
  display:grid; grid-template-columns:300px 1fr 320px; min-height:0;
}
.panel{
  overflow-y:auto; padding:16px; border-right:1px solid var(--ink-3); background:var(--ink);
}
.panel.right{border-right:0; border-left:1px solid var(--ink-3)}
.panel h2{
  font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-0.01em; margin:0 0 10px;
  display:flex; align-items:center; gap:10px;
}
.step{
  font-family:var(--mono); font-size:11px; color:#fff; background:var(--sea); border-radius:4px; padding:2px 6px; letter-spacing:.04em;
}
.block{padding:14px 0; border-bottom:1px solid var(--ink-3)}
.block:last-child{border-bottom:0}
.block p.help{font-size:12.5px; color:var(--chalk-dim); margin:6px 0 0; line-height:1.45}

label.field{display:block; font-size:12px; color:var(--chalk-dim); margin:8px 0 4px}
.panel select, .panel input[type=text]{
  width:100%; background:var(--ink-2); border:1px solid var(--ink-3); color:var(--chalk);
  border-radius:6px; padding:8px 10px; font-size:13px;
}
.hint-card{
  margin-top:10px; background:var(--ink-2); border:1px solid var(--ink-3); border-radius:var(--radius); padding:10px 12px;
}
.hint-card .lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--chalk-dim)}
.hint-card .txt{font-size:13px; line-height:1.45; margin:4px 0 8px}

.tools{display:grid; gap:8px}
.tool{
  display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:center; text-align:left;
  background:var(--ink-2); border:1px solid var(--ink-3); color:var(--chalk); border-radius:var(--radius); padding:10px;
  transition:border-color .15s, background .15s;
}
.tool:hover{border-color:var(--sea-deep)}
.tool.active{border-color:var(--sea); background:#E3F2F5}
.tool .glyph{width:34px; height:34px; display:grid; place-items:center}
.tool .t{font-weight:600; font-size:13.5px}
.tool .d{font-size:12px; color:var(--chalk-dim); margin-top:2px}

/* field guide */
details.guide summary{cursor:pointer; font-weight:600; font-size:13px; list-style:none; display:flex; align-items:center; gap:8px}
details.guide summary::-webkit-details-marker{display:none}
details.guide summary::before{content:"▸"; color:var(--sea); transition:transform .15s}
details.guide[open] summary::before{transform:rotate(90deg)}
.type-def{display:grid; grid-template-columns:44px 1fr; gap:10px; margin-top:12px; align-items:start}
.type-def .swatch{height:12px; margin-top:6px; border-radius:2px}
.type-def b{display:block; font-size:13px}
.type-def span{font-size:12.5px; color:var(--chalk-dim); line-height:1.45}
.type-def i{display:block; font-style:normal; font-family:var(--mono); font-size:11px; color:var(--chalk-dim); margin-top:3px}

/* ---------- map ---------- */
.mapwrap{position:relative; min-height:0; background:#cfd8d4}
#viewDiv{position:absolute; inset:0}
.mode-hint{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--chalk); border:1px solid var(--ink-3); border-radius:999px;
  padding:8px 16px; font-size:13px; display:flex; gap:12px; align-items:center; z-index:5;
  box-shadow:0 6px 24px rgba(0,0,0,.15); opacity:0; pointer-events:none; transition:opacity .2s;
}
.mode-hint.show{opacity:1; pointer-events:auto}
.mode-hint .k{font-family:var(--mono); font-size:11px; background:var(--ink-2); padding:2px 6px; border-radius:4px; border:1px solid var(--ink-3)}
.legend{
  position:absolute; left:14px; bottom:34px; z-index:5; background:rgba(255,255,255,.94); color:var(--chalk);
  border:1px solid var(--ink-3); border-radius:var(--radius); padding:10px 12px; font-size:12px; min-width:190px; backdrop-filter:blur(6px);
}
.legend .lt{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--chalk-dim); margin-bottom:6px}
.legend .row{display:grid; grid-template-columns:44px 1fr; gap:8px; align-items:center; margin:4px 0}
.legend .line{height:0; border-top:3px solid}
.legend .line.relocation{border-color:var(--relocation); border-top-style:dashed}
.legend .line.hierarchical{border-color:var(--hierarchical); border-top-style:solid}
.legend .line.contagious{border-color:var(--contagious); border-top-style:dotted; border-top-width:4px}
.legend .line.stimulus{border-color:var(--stimulus); border-top-style:double; border-top-width:4px}
.legend .dot{width:12px; height:12px; border-radius:50%; background:var(--hearth); border:2px solid #fff; margin-left:16px; box-shadow:0 0 0 4px rgba(242,193,78,.3)}
.basemap-pick{position:absolute; right:14px; bottom:34px; z-index:5}
.basemap-pick select{
  background:rgba(255,255,255,.94); color:var(--chalk); border:1px solid var(--ink-3); border-radius:6px; padding:6px 8px; font-size:12px;
}
.map-error{
  position:absolute; inset:0; display:none; place-items:center; text-align:center; padding:40px; color:var(--paper-ink); font-size:15px; line-height:1.5;
}

/* ---------- trace log ---------- */
.progress{
  font-family:var(--mono); font-size:11.5px; color:var(--chalk-dim); background:var(--ink-2); border:1px solid var(--ink-3); border-radius:6px; padding:8px 10px; margin-bottom:12px;
  display:flex; gap:12px; flex-wrap:wrap;
}
.progress b{color:var(--chalk); font-weight:500}
.empty{
  border:1px dashed var(--ink-3); border-radius:var(--radius); padding:22px 14px; text-align:center; color:var(--chalk-dim); font-size:13px; line-height:1.5;
}
.card{
  background:var(--ink-2); border:1px solid var(--ink-3); border-left:4px solid var(--unlabeled); border-radius:8px; padding:10px 12px; margin-bottom:10px;
}
.card .top{display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.card .name{font-weight:600; font-size:13.5px}
.card .kind{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--chalk-dim); white-space:nowrap}
.card .tag{
  display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:4px; margin-top:6px; color:#0f1a1d;
}
.card .era{font-size:12px; color:var(--chalk-dim); margin-top:6px}
.card .why{font-size:12.5px; margin-top:6px; line-height:1.4; color:var(--chalk)}
.card .actions{display:flex; gap:6px; margin-top:8px}
.card.needs-label .tag{background:var(--unlabeled); color:#fff}

/* ---------- dialog ---------- */
dialog{
  border:0; border-radius:14px; padding:0; width:min(560px, 94vw); background:var(--paper); color:var(--paper-ink);
  box-shadow:0 30px 80px rgba(0,0,0,.4);
}
dialog::backdrop{background:rgba(10,18,20,.55); backdrop-filter:blur(3px)}
.dlg-head{padding:18px 22px 10px; border-bottom:1px solid var(--rule)}
.dlg-head .eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper-dim)}
.dlg-head h3{font-family:var(--display); font-size:22px; letter-spacing:-0.02em; margin:4px 0 0; font-weight:700}
.dlg-body{padding:16px 22px; display:grid; gap:14px; max-height:65vh; overflow-y:auto}
.dlg-body label.f{display:block; font-size:12.5px; font-weight:600; margin-bottom:5px}
.dlg-body input[type=text], .dlg-body textarea, .dlg-body select{
  width:100%; border:1px solid #C9D2CD; border-radius:8px; padding:9px 11px; font:inherit; font-size:14px; background:#fff; color:var(--paper-ink);
}
.dlg-body textarea{min-height:84px; resize:vertical}
.seg{display:flex; gap:0; border:1px solid #C9D2CD; border-radius:8px; overflow:hidden}
.seg label{flex:1; text-align:center; padding:8px 4px; font-size:13px; cursor:pointer; background:#fff; border-right:1px solid #C9D2CD}
.seg label:last-child{border-right:0}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg input:checked + span{font-weight:600}
.seg label:has(input:checked){background:var(--paper-ink); color:#fff}
.types{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.types label{
  border:2px solid #E2E8E5; border-radius:10px; padding:10px 12px; cursor:pointer; display:block; position:relative; background:#fff;
  transition:border-color .12s, background .12s;
}
.types label:hover{border-color:#B7C4BE}
.types input{position:absolute; opacity:0; pointer-events:none}
.types .n{font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px}
.types .n::before{content:""; width:22px; height:0; border-top:3px solid var(--c)}
.types .s{font-size:12px; color:var(--paper-dim); margin-top:4px; line-height:1.4}
.types label:has(input:checked){border-color:var(--c); background:color-mix(in srgb, var(--c) 10%, #fff)}
.types label.relocation{--c:var(--relocation)} .types label.hierarchical{--c:var(--hierarchical)}
.types label.contagious{--c:var(--contagious)} .types label.stimulus{--c:var(--stimulus)}
.dlg-foot{padding:12px 22px 18px; display:flex; gap:8px; justify-content:flex-end; border-top:1px solid var(--rule)}
.dlg-foot .btn{background:#fff; color:var(--paper-ink); border-color:#C9D2CD}
.dlg-foot .btn:hover{background:#F1F4F2}
.dlg-foot .btn.primary{background:var(--paper-ink); color:#fff; border-color:var(--paper-ink)}
.dlg-foot .btn.primary:hover{background:#264048}
.dlg-foot .btn.danger{margin-right:auto; color:#B3303F; border-color:#EBC3C8}
.dlg-foot .btn.danger:hover{background:#FBEDEE}
.err{font-size:12.5px; color:#B3303F; display:none}
.err.show{display:block}

.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--paper-ink); color:#fff;
  padding:9px 16px; border-radius:999px; font-size:13px; font-weight:500; opacity:0; transition:all .25s; z-index:50; pointer-events:none;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

@media (max-width: 980px){
  body{overflow:auto}
  .workspace{grid-template-columns:1fr; grid-template-rows:60vh auto auto}
  .mapwrap{order:-1; height:60vh}
  .panel{border-right:0; border-top:1px solid var(--ink-3)}
  .panel.right{border-left:0}
  .topbar{flex-wrap:wrap}
  .topbar .fields{margin-left:0}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}