:root{
  --ink:#14212c;
  --ink-2:#41586a;
  --sheet:#e6ecec;
  --paper:#f7f8f5;
  --sea:#c8dde4;
  --rule:#a4b8bf;
  --hair:#cad8dc;
  --mark:#c4162b;
  --index:#1f5f5c;
  --gold:#b8863b;
  --shadow:0 1px 0 rgba(20,33,44,.06), 0 12px 30px -18px rgba(20,33,44,.5);
  --f-display:"Spectral",Georgia,serif;
  --f-ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}

/* The hidden attribute must beat any display rule set below. */
[hidden]{display:none !important}
html,body{min-height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-ui);
  color:var(--ink);
  background:var(--sheet);
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:28px 28px;
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

/* -- masthead --------------------------------- */
.masthead{
  display:flex;align-items:center;gap:14px;
  padding:12px 20px;
  background:var(--ink);color:var(--paper);
  border-bottom:3px double var(--gold);
}
.mast-mark img{height:34px;width:auto;display:block}
.mast-mark img{height:34px;width:auto;display:block}
.mast-mark svg{width:30px;height:30px;color:var(--gold);display:block}
.mast-title h1{
  font-family:var(--f-display);font-weight:600;font-size:23px;
  margin:0;letter-spacing:.06em;
}
.mast-title p{margin:1px 0 0;font-size:11.5px;color:#9fb6bd;letter-spacing:.09em;text-transform:uppercase}
.mast-meta{margin-left:auto;display:flex;gap:8px}
.tag{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;
  border:1px solid #3b5060;padding:4px 8px;color:#9fb6bd;
}

/* -- frame ------------------------------------ */
.frame{
  flex:1;display:grid;
  grid-template-columns:288px minmax(0,1fr) 288px;
  gap:16px;padding:16px;min-height:0;
}
.margin{
  display:flex;flex-direction:column;gap:12px;
  overflow-y:auto;padding-right:2px;
}
.block{
  background:var(--paper);
  border:1px solid var(--rule);
  padding:13px 14px 15px;
  box-shadow:var(--shadow);
}
.block.grow{flex:1;min-height:150px;display:flex;flex-direction:column}

.eyebrow{
  font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--index);margin:0 0 9px;
  padding-bottom:6px;border-bottom:1px solid var(--hair);
  display:flex;align-items:center;justify-content:space-between;
}
.count{font-family:var(--f-mono);color:var(--ink-2);letter-spacing:0}

/* -- inputs ----------------------------------- */
textarea,input[type=text],select{
  width:100%;font-family:var(--f-ui);font-size:13px;color:var(--ink);
  background:#fff;border:1px solid var(--rule);padding:8px 9px;
  border-radius:0;resize:vertical;
}
textarea:focus,input:focus,select:focus,button:focus-visible{
  outline:2px solid var(--index);outline-offset:1px;
}
textarea::placeholder{color:#94a6ae;font-style:italic}

.chips{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 4px}
.chips button{
  font-size:11px;padding:4px 8px;background:transparent;
  border:1px dashed var(--rule);color:var(--ink-2);cursor:pointer;
}
.chips button:hover{border-style:solid;color:var(--ink);background:#fff}

.check{display:flex;align-items:center;gap:7px;font-size:12.5px;margin-top:8px;cursor:pointer;color:var(--ink-2)}
.check input{accent-color:var(--index);width:14px;height:14px}

button{font-family:var(--f-ui);cursor:pointer}
button.primary{
  width:100%;margin-top:11px;padding:9px;
  background:var(--ink);color:var(--paper);border:none;
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
button.primary:hover{background:var(--index)}
button.primary:disabled{background:#8fa2ab;cursor:wait}

.row{display:flex;gap:7px;margin-top:8px}
.row select{flex:1}
.row button{
  flex:1;padding:8px;background:#fff;border:1px solid var(--rule);
  font-size:12px;color:var(--ink);
}
.row button:hover{border-color:var(--ink);background:var(--sheet)}

.segmented{display:flex;border:1px solid var(--rule);background:#fff}
.segmented button{
  flex:1;padding:8px 4px;background:transparent;border:none;
  border-right:1px solid var(--hair);font-size:11.5px;color:var(--ink-2);
  letter-spacing:.04em;
}
.segmented button:last-child{border-right:none}
.segmented button.on{background:var(--ink);color:var(--paper);font-weight:600}
.segmented.small button{padding:6px 4px;font-size:11px}

.zoomrow{display:flex;align-items:center;gap:8px;margin-top:9px}
.zoomrow button{
  width:28px;height:28px;border:1px solid var(--rule);background:#fff;
  font-size:16px;line-height:1;color:var(--ink);
}
.zoomrow input{flex:1;accent-color:var(--index)}
.hint{font-size:11px;color:#8296a0;margin:7px 0 0;font-style:italic}

/* -- the plate -------------------------------- */
.plate-wrap{display:flex;min-width:0;min-height:0}
.plate{
  position:relative;flex:1;background:var(--paper);
  border:1px solid var(--rule);box-shadow:var(--shadow);
  overflow:hidden;
}
#map{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#map.grabbing{cursor:grabbing}
.readout{
  position:absolute;right:9px;bottom:8px;
  font-family:var(--f-mono);font-size:11px;color:var(--ink-2);
  background:rgba(247,248,245,.92);border:1px solid var(--hair);padding:3px 7px;
  pointer-events:none;
}
.plate-loading{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  background:rgba(230,236,236,.82);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--index);
}
.compass{
  width:34px;height:34px;border:1px solid var(--index);border-radius:50%;
  border-top-color:transparent;animation:spin 1.1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* -- legend ----------------------------------- */
.legend{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
.legend li{
  display:grid;grid-template-columns:20px 1fr;gap:8px;
  padding:7px 0;border-bottom:1px dotted var(--hair);cursor:pointer;
}
.legend li:hover{background:#fff}
.legend li.active{background:#fff;box-shadow:inset 3px 0 0 var(--mark)}
.legend .num{
  font-family:var(--f-mono);font-size:10.5px;color:#fff;background:var(--mark);
  width:19px;height:19px;display:grid;place-items:center;
}
.legend .nm{font-size:12.5px;font-weight:600;line-height:1.25}
.legend .cat{font-size:10.5px;color:var(--index);letter-spacing:.06em;text-transform:uppercase}
.legend .co{font-family:var(--f-mono);font-size:10.5px;color:#8296a0}
.legend .nt{font-size:11.5px;color:var(--ink-2);line-height:1.4;margin-top:2px}
.empty{font-size:11.5px;color:#8296a0;font-style:italic;line-height:1.5;margin:4px 0 0}

/* -- colophon --------------------------------- */
.colophon{
  display:flex;justify-content:space-between;gap:14px;
  padding:8px 20px;background:var(--ink);color:#8fa8b1;font-size:11px;
}
.mono{font-family:var(--f-mono)}

/* -- drawer ----------------------------------- */
.drawer{position:fixed;inset:0;background:rgba(20,33,44,.45);display:flex;justify-content:flex-end;z-index:50}
.drawer-panel{width:min(380px,90vw);background:var(--paper);height:100%;padding:18px;overflow-y:auto;border-left:3px double var(--gold)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.drawer-head h3{font-family:var(--f-display);margin:0;font-size:18px}
.drawer-head button{background:none;border:none;font-size:24px;line-height:1;color:var(--ink-2)}
#savedList{list-style:none;margin:0;padding:0}
#savedList li{border-bottom:1px solid var(--hair);padding:10px 0;display:flex;gap:10px;align-items:center}
#savedList .t{flex:1;font-size:13px;font-weight:600}
#savedList .d{font-family:var(--f-mono);font-size:10.5px;color:#8296a0}
#savedList button{border:1px solid var(--rule);background:#fff;padding:5px 9px;font-size:11.5px}


@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---- additions: scope, focus, study card ---------------------- */
.stack{margin-top:8px}
button.ghost{
  width:100%;margin-top:8px;padding:7px;background:#fff;border:1px solid var(--rule);
  font-size:11.5px;color:var(--ink);
}
button.ghost:hover{border-color:var(--ink);background:var(--sheet)}

.focus-row{
  display:flex;align-items:center;gap:8px;margin-top:9px;padding:6px 8px;
  background:#eef4f3;border-left:3px solid var(--index);font-size:11.5px;color:var(--index);
}
.focus-row span{flex:1;font-weight:600;line-height:1.3}
.focus-row button{background:none;border:none;font-size:17px;line-height:1;color:var(--ink-2);padding:0 2px}

.study{display:flex;flex-direction:column;gap:8px}
.study-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  border-bottom:1px solid var(--hair);padding-bottom:7px}
.study-head h3{font-family:var(--f-display);font-size:16px;margin:0;line-height:1.25;font-weight:600}
.study-head button{background:none;border:none;font-size:20px;line-height:1;color:var(--ink-2)}
.study-img{
  width:100%;min-height:34px;background:var(--sheet);border:1px solid var(--hair);
  display:grid;place-items:center;overflow:hidden;
}
.study-img img{width:100%;height:auto;display:block}
.study-img .ph{font-size:11px;color:#8296a0;font-style:italic;padding:12px}
.study-extract{font-size:12px;line-height:1.5;color:var(--ink-2);margin:0}
.study-note{font-size:12.5px;line-height:1.5;margin:0;color:var(--ink)}
.study-dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0;font-size:11.5px}
.study-dl dt{color:var(--index);font-weight:600;letter-spacing:.03em}
.study-dl dd{margin:0;color:var(--ink-2);font-family:var(--f-mono);font-size:11px;line-height:1.45}
.study-dl dd:nth-of-type(n+2){font-family:var(--f-ui);font-size:11.5px}
.study-src a{font-size:11px;color:var(--index)}
.study-src{margin:0}




/* ================= RESPONSIVE ==================================== */

/* floating zoom pad, always reachable over the plate */
.zoompad{
  position:absolute;right:9px;top:9px;display:flex;flex-direction:column;gap:5px;z-index:5;
}
.zoompad button{
  width:38px;height:38px;border:1px solid var(--rule);background:rgba(255,255,255,.94);
  color:var(--ink);font-size:19px;line-height:1;display:grid;place-items:center;
  box-shadow:0 1px 4px rgba(20,33,44,.18);border-radius:2px;
}
.zoompad button:active{background:var(--index);color:#fff}
.zoompad .lbl{
  font-family:var(--f-mono);font-size:9.5px;height:auto;padding:3px 0;
  background:rgba(20,33,44,.86);color:#dbe6ea;border-color:transparent;
}

/* ---- laptops / small desktops ---- */
@media (max-width:1180px){
  .frame{grid-template-columns:250px minmax(0,1fr) 250px;gap:12px;padding:12px}
}

/* ---- tablets and phones: one column, map first ---- */
@media (max-width:1000px){
  html,body{height:auto}
  body{display:block}

  .masthead{padding:10px 14px;gap:10px;position:sticky;top:0;z-index:20}
  .mast-mark img{height:28px}
  .mast-title h1{font-size:19px}
  .mast-title p{font-size:9.5px;letter-spacing:.06em}
  .mast-meta{display:none}

  .frame{
    display:flex;flex-direction:column;gap:12px;padding:12px;
    min-height:0;height:auto;
  }
  .plate-wrap{order:-1;height:58vh;height:58dvh;min-height:300px;max-height:640px}
  .margin{overflow:visible;gap:12px;padding-right:0}
  .block.grow{min-height:0}
  .legend{max-height:320px}

  .colophon{
    position:static;flex-direction:column;gap:4px;padding:12px 14px 18px;
    font-size:10.5px;line-height:1.45;
  }

  /* touch targets */
  .segmented button{padding:11px 4px;font-size:12px}
  .segmented.small button{padding:10px 4px;font-size:11.5px}
  .chips button{padding:7px 10px;font-size:12px}
  .check{padding:3px 0;font-size:13px}
  .check input{width:17px;height:17px}
  button.primary{padding:12px;font-size:13px}
  .row button,button.ghost{padding:11px;font-size:12.5px}
  textarea,input[type=text],select{font-size:16px;padding:10px}  /* 16px stops iOS zooming the page */
  .zoomrow button{width:38px;height:38px;font-size:19px}
  #savedList button{padding:9px 12px}

  .study-img img{max-height:220px;object-fit:cover}
  .drawer-panel{width:min(420px,94vw)}
}

/* ---- phones ---- */
@media (max-width:620px){
  .frame{padding:9px;gap:9px}
  .block{padding:11px 11px 13px}
  .plate-wrap{height:52vh;height:52dvh;min-height:270px}
  .mast-title p{display:none}
  .readout{font-size:10px;left:8px;right:auto;bottom:8px}
  .zoompad button{width:42px;height:42px}
  .eyebrow{font-size:10px}
  .colophon{font-size:10px}
  .legend li{padding:9px 0}
  .legend .nm{font-size:13px}
}

/* ---- short landscape phones ---- */
@media (max-height:520px) and (orientation:landscape) and (max-width:1000px){
  .plate-wrap{height:78vh;height:78dvh;min-height:220px}
  .masthead{position:static}
}

/* ---- very small ---- */
@media (max-width:380px){
  .segmented{flex-wrap:wrap}
  .segmented button{flex:1 0 44%;border-right:none;border-bottom:1px solid var(--hair)}
  .row{flex-direction:column}
}


/* ---- legend rows for line and area features -------------------- */
.legend li.shape-row{
  display:grid;grid-template-columns:20px 1fr;gap:8px;align-items:start;
  padding:8px 0;border-bottom:1px dotted var(--hair);cursor:pointer;
}
.legend li.shape-row:hover{background:#fff}
.legend .swatch{
  width:18px;height:12px;display:block;margin-top:3px;border-radius:1px;
}
.legend li.shape-row .cat{letter-spacing:.05em}