:root {
  --bg: #141413; --panel: rgba(28, 28, 26, 0.94); --panel-solid: #1d1d1b; --raised: #262624; --line: rgba(255,255,255,.09);
  --ink: #f4f3ee; --ink-2: #c3c2b7; --ink-3: #8c8b82; --accent: #f07d4c; --accent-ink: #1a1a19;
  --blue: #3987e5; --aqua: #199e70; --yellow: #c98500; --magenta: #d55181; --violet: #9085e9; --red: #e66767;
  --good: #3fae6a; --warn: #e8a33a; --bad: #e66767;
  --radius: 10px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden;
  font: 13px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
canvas#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: #8fbcf2; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
.muted { color: var(--ink-3); } .small { font-size: 12px; } .tiny { font-size: 11px; }
.num { font-variant-numeric: tabular-nums; }

/* buttons & fields */
.btn { background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn:hover { background: rgba(255,255,255,.11); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: #ffb3b3; border-color: rgba(230,103,103,.4); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.sm { padding: 3px 8px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .tab:focus-visible, .row-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local],
input[type=search], input[type=url], select, textarea {
  background: #2a2a27; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; width: 100%; }
textarea { min-height: 90px; resize: vertical; }
input[type=range] { width: 100%; accent-color: var(--accent); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
label.field { display: block; margin: 8px 0; }
label.field > span { display: block; color: var(--ink-2); font-size: 12px; margin-bottom: 3px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.chk { display: flex; align-items: center; gap: 8px; margin: 6px 0; color: var(--ink-2); cursor: pointer; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0; }
.stack > * + * { margin-top: 8px; }
.pill { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; background: rgba(255,255,255,.08); color: var(--ink-2); }
.pill.good { background: rgba(63,174,106,.18); color: #8fdcab; } .pill.warn { background: rgba(232,163,58,.18); color: #f3c57a; }
.pill.bad { background: rgba(230,103,103,.18); color: #f5a3a3; } .pill.restricted { background: rgba(213,81,129,.2); color: #f1a2c0; }
.err { color: #f5a3a3; margin: 6px 0; } .ok { color: #8fdcab; }
hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }

/* layout */
.topbar { position: fixed; top: 0; left: 0; right: 0; height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 14px;
  background: linear-gradient(rgba(20,20,19,.96), rgba(20,20,19,.85)); border-bottom: 1px solid var(--line); z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 15px; white-space: nowrap; }
.brand .logo { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); display: grid; place-items: center; color: var(--accent-ink); font-weight: 800; }
.search { position: relative; flex: 1; max-width: 460px; }
.search input { padding-left: 30px; }
.search .ico { position: absolute; left: 10px; top: 7px; color: var(--ink-3); }
.results { position: absolute; top: 38px; left: 0; right: 0; background: var(--panel-solid); border: 1px solid var(--line); border-radius: var(--radius);
  max-height: 60vh; overflow: auto; box-shadow: 0 10px 30px rgba(0,0,0,.4); z-index: 30; }
.results button { display: flex; width: 100%; text-align: left; gap: 8px; padding: 8px 12px; background: none; border: 0; cursor: pointer; }
.results button:hover, .results button.active { background: rgba(255,255,255,.06); }
.spacer { flex: 1; }
.user { display: flex; align-items: center; gap: 8px; }

.side { position: fixed; top: 64px; left: 12px; bottom: 12px; width: 344px; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; z-index: 10; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); }
.tab { flex: 1; background: none; border: 0; border-radius: 7px; padding: 6px 4px; color: var(--ink-3); cursor: pointer; font-size: 12px; font-weight: 600; }
.tab.active { background: rgba(255,255,255,.08); color: var(--ink); }
.tabs-view { padding-bottom: 3px; border-bottom: 0; }
.tabs-list { padding-top: 3px; background: rgba(255,255,255,.025); }
.tabs-list .tab { font-weight: 550; font-size: 11.5px; padding: 4px 2px; }
.tabs .tab { padding-left: 2px; padding-right: 2px; white-space: nowrap; }
.side .body > .sect:first-child { margin-top: 0; }
.side .body { overflow-y: auto; padding: 12px 14px 16px; flex: 1; }
.sect { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 650; margin: 16px 0 8px; }
.sect:first-child { margin-top: 2px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.seg button { padding: 6px 4px; border-radius: 7px; border: 1px solid var(--line); background: rgba(255,255,255,.04); cursor: pointer; font-size: 12px; }
.seg button.on { background: rgba(240,125,76,.18); border-color: rgba(240,125,76,.55); color: #ffd3bf; }
.list { margin: 0 -6px; }
.row-btn { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 8px; padding: 7px 6px; cursor: pointer; }
.row-btn:hover { background: rgba(255,255,255,.05); }
.row-btn.sel { background: rgba(240,125,76,.12); }
.row-btn .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-btn .s { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.legend-bar { height: 10px; border-radius: 3px; margin: 6px 0 3px; }
.ticks { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 11px; }
.key { display: flex; align-items: center; gap: 8px; color: var(--ink-2); margin-top: 6px; font-size: 12px; }
.sw { width: 14px; height: 10px; border-radius: 2px; flex: none; }

.drawer { position: fixed; top: 64px; right: 12px; bottom: 12px; width: 400px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; z-index: 11; display: flex; flex-direction: column; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.drawer header { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: flex-start; }
.drawer header h2 { font-size: 17px; }
.drawer .body { padding: 12px 16px 18px; overflow-y: auto; flex: 1; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 4px 10px; margin: 8px 0; }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; }
.md { color: var(--ink-2); } .md p { margin: 6px 0; } .md h1, .md h2, .md h3 { font-size: 14px; margin: 12px 0 4px; color: var(--ink); }
.md img { max-width: 100%; }
.md ol { padding-left: 20px; margin: 4px 0 8px; }
.md table { border-collapse: collapse; margin: 6px 0 10px; font-size: 13px; } .md th, .md td { border: 1px solid var(--line); padding: 4px 9px; text-align: left; }
.md th { color: var(--ink); background: rgba(255,255,255,.04); } .md code { font-size: 12px; background: rgba(255,255,255,.06); padding: 0 4px; border-radius: 4px; }
.md.page h2 { font-size: 15.5px; margin: 18px 0 6px; padding-top: 4px; scroll-margin-top: 8px; } .md.page > :first-child { margin-top: 0; }
.toc { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.toc a { font-size: 12px; color: var(--ink-2); text-decoration: none; padding: 2px 8px; border: 1px solid var(--line); border-radius: 99px; }
.toc a:hover { color: var(--ink); border-color: var(--ink-3); }
.labels { position: fixed; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.lbl { position: absolute; left: 0; top: 0; white-space: nowrap; padding: 0 3px; color: #faf9f5; font: 600 12px/16px system-ui, sans-serif;
  text-shadow: 0 0 3px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.95), 0 1px 1px rgba(0,0,0,.8); will-change: transform; }
.lbl.cave { font: 700 14px/18px system-ui, sans-serif; color: #ffe3d1; letter-spacing: .01em; }
.lbl.cave[data-cave] { pointer-events: auto; cursor: pointer; }
.lbl.cave[data-cave]:hover { text-decoration: underline; text-underline-offset: 3px; }
.lbl.relief { font: italic 600 12px/16px system-ui, sans-serif; color: #f1e2c4; }
.lbl.water { font: italic 600 11.5px/15px system-ui, sans-serif; color: #a9d0ff; }
.lbl.place { color: #faf9f5; }
.lbl.obs { font: 500 11.5px/15px system-ui, sans-serif; color: #e4e2d8; }
.lbl.passage { font: italic 700 12.5px/17px system-ui, sans-serif; color: #ffd9bd; }
.lbl.cplace { font: 700 12.5px/17px system-ui, sans-serif; color: #fff1b8; }
.lbl.cnote { font: 500 11px/14px system-ui, sans-serif; color: #d9d4c4; }
.lbl[data-place] { pointer-events: auto; cursor: pointer; }
.lbl[data-place]:hover { text-decoration: underline; text-underline-offset: 3px; }
.tree-row { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; background: none; border: 0; color: inherit;
  padding: 3px 4px; border-radius: 6px; cursor: pointer; font: inherit; }
.tree-row:hover { background: rgba(255,255,255,.06); }
.sugg { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; }
.sugg.sel { border-color: rgba(255,210,63,.6); }
.sugg .ctx { font-size: 11.5px; color: var(--ink-3); margin: 2px 0 0 26px; }
.lbl.parcel { font: 600 11.5px/15px system-ui, sans-serif; color: #f3eee2; opacity: .9; }
.lbl.spring { font: 700 12px/16px system-ui, sans-serif; color: #bfe6ff; }
.lbl.stream { font: italic 700 12px/16px system-ui, sans-serif; color: #8fd0ff; }
.lbl.basin { font: italic 700 13px/17px system-ui, sans-serif; color: #ffffff; letter-spacing: .02em; }
.lbl.measure { font: 700 12px/16px system-ui, sans-serif; color: #141413; background: #ffd23f; border-radius: 4px; padding: 0 5px; text-shadow: none; }
.lbl.lead { font: 800 13px/16px system-ui, sans-serif; color: #ffd23f; }
.lbl.station { font: 500 10.5px/14px ui-monospace, Menlo, Consolas, monospace; color: #d9d7cc; }
.md ul { padding-left: 18px; margin: 4px 0 8px; } .md li { margin: 3px 0; } .md a { color: var(--accent, #f07d4c); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gallery button { padding: 0; border: 0; background: #2a2a27; border-radius: 6px; overflow: hidden; aspect-ratio: 1; cursor: zoom-in; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(255,255,255,.04); border-radius: 6px; margin: 4px 0; }

.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 40; display: grid; place-items: center; padding: 20px; }
.modal { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 14px; width: min(640px, 100%); max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.modal.wide { width: min(980px, 100%); }
.modal header { padding: 16px 18px 10px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.modal header h2 { font-size: 17px; flex: 1; }
.modal .body { padding: 12px 18px; overflow-y: auto; }
.modal footer { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lightbox img { max-width: 94vw; max-height: 84vh; }
.lightbox .cap { color: var(--ink-2); margin-top: 10px; max-width: 80vw; text-align: center; }
.lightbox .nav { position: absolute; top: 50%; transform: translateY(-50%); }

.picking { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 30; background: var(--accent); color: var(--accent-ink);
  padding: 8px 14px; border-radius: 999px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.4); display: flex; gap: 10px; align-items: center; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--panel-solid); border: 1px solid var(--line);
  padding: 8px 14px; border-radius: 10px; z-index: 60; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
#hovertip { position: fixed; display: none; pointer-events: none; z-index: 25; min-width: 180px; max-width: 300px; padding: 8px 10px;
  background: rgba(20,20,19,.96); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 6px 20px rgba(0,0,0,.4); font-size: 12px; }
#hovertip b { font-size: 13px; }
.hud { position: fixed; bottom: 14px; left: 370px; display: flex; gap: 10px; align-items: center; color: var(--ink-3); font-size: 12px; z-index: 5;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 5px 10px; }
.login { position: fixed; inset: 0; display: grid; place-items: center; z-index: 50;
  background: radial-gradient(ellipse at 30% 20%, #2a2420, #121211 70%); }
.login .card { width: min(380px, 92vw); background: var(--panel-solid); border: 1px solid var(--line); border-radius: 14px; padding: 26px; }
.login h1 { font-size: 20px; margin-bottom: 4px; }
table.t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.t th { text-align: left; color: var(--ink-3); font-weight: 600; padding: 6px; border-bottom: 1px solid var(--line); }
table.t td { padding: 6px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: top; }
.loading { position: fixed; inset: 0; display: grid; place-items: center; color: var(--ink-2); z-index: 4; }
@media (max-width: 900px) {
  .side { width: auto; right: 12px; top: auto; height: 46vh; }
  .drawer { left: 12px; width: auto; top: 64px; bottom: auto; max-height: 50vh; }
  .hud { display: none; }
  .search { max-width: none; }
  .brand span.full, .btn span.full { display: none; }
}

.measure-panel { position: fixed; left: 372px; bottom: 70px; width: 330px; max-height: 60vh; overflow: auto; z-index: 12; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.measure-panel header { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
@media (max-width: 900px) { .measure-panel { left: 12px; right: 12px; width: auto; bottom: 12px; } }
.slicer-panel { top: 64px; bottom: auto; width: 350px; max-height: calc(100vh - 140px); }
.slicer-panel input[type=range] { width: 100%; margin: 0; }
@media (max-width: 900px) { .slicer-panel { top: auto; bottom: 12px; } }

mark { background: rgba(255,210,63,.35); color: inherit; border-radius: 2px; padding: 0 1px; }

.modal.xwide { width: min(1500px, 100%); }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.lib-card { display: flex; flex-direction: column; gap: 2px; text-align: left; background: rgba(255,255,255,.03); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px; cursor: pointer; color: inherit; font: inherit; }
.lib-card:hover, .lib-card:focus-visible { border-color: rgba(240,125,76,.7); background: rgba(240,125,76,.08); }
.lib-card img { width: 100%; aspect-ratio: 8.5 / 11; object-fit: cover; object-position: top; background: #fff; border-radius: 4px; margin-bottom: 4px; }
.lib-year { font-weight: 700; font-size: 14px; }

/* profile along a drawn line (docked under the 3D view) */
.profile-panel { position: fixed; left: 368px; right: 12px; bottom: 12px; z-index: 11; background: var(--panel-solid); border: 1px solid var(--line);
  border-radius: var(--radius); display: flex; flex-direction: column; box-shadow: 0 8px 30px rgba(0,0,0,.45); }
.profile-panel header { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.profile-panel .pf-name { width: 190px; padding: 3px 7px; font-weight: 600; }
.profile-panel .pf-ctl { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.profile-panel .pf-ctl input[type=number] { width: 58px; padding: 2px 5px; }
.profile-panel .pf-ctl select, .profile-panel .pf-open { width: auto; padding: 2px 5px; font-size: 12px; }
.profile-panel .pf-open { max-width: 130px; }
.profile-grip { position: absolute; top: -5px; left: 0; right: 0; height: 10px; cursor: ns-resize; z-index: 2; }
.pf-plot { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 0 0 var(--radius) var(--radius); }
.pf-draw { padding: 12px 14px; font-size: 13px; color: var(--ink-2); }
.pf-tip { position: absolute; pointer-events: none; background: rgba(28,28,26,.94); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 8px; font-size: 12px; line-height: 1.45; max-width: 290px; z-index: 3; }
.pf-edit { position: absolute; z-index: 4; width: 246px; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 8px; padding: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.pf-sw { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.pf-sw.on { border-color: var(--ink); }
.pf-hint { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--accent-ink);
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; pointer-events: none; }
body.has-profile .hud { bottom: calc(var(--profile-h) + 22px); }
body.has-profile .measure-panel { bottom: calc(var(--profile-h) + 62px); }
body.has-profile .drawer { bottom: calc(var(--profile-h) + 22px); }
@media (max-width: 900px) { .profile-panel { left: 12px; } body.has-profile .side { display: none; } }
body.pf-drawing .lbl, body.pf-drawing .marker { pointer-events: none !important; }

/* cross-section editor and the map readings review */
.xs-wrap { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.xs-side { width: 270px; flex: none; }
.xs-side .sect:first-of-type { margin-top: 4px; }
.xs-canvas { flex: 1 1 460px; min-width: 300px; max-width: 760px; height: auto; border: 1px solid var(--line); border-radius: 8px; touch-action: none; user-select: none; }
.xs-tpl { display: flex; flex-wrap: wrap; gap: 4px; }
.xs-trace { flex: 1 1 340px; max-width: 520px; min-width: 260px; }
.xs-trace img { border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.rd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; margin-bottom: 8px; }
.rd-card { display: flex; gap: 8px; align-items: flex-start; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.03); }
.rd-card img { flex: none; border-radius: 4px; background: #fff; }
.rd-card.off { opacity: .5; }
.rd-card.off img { filter: grayscale(1); }
.rd-card.wide { grid-column: span 2; }
@media (max-width: 640px) { .xs-side { width: 100%; } .rd-card.wide { grid-column: auto; } }
/* adding a profile label: names on the 3D map can be clicked to label them */
body.pf-labelpick .lbl { pointer-events: auto !important; cursor: copy; }
body.pf-labelpick .lbl:hover { text-decoration: underline; text-underline-offset: 3px; }
body.pf-labelpick #scene { cursor: copy; }