/* Ajax property geophysics map
   Concept: an interactive version of the geophysicist's map sheet. The margin panel holds the
   legend and survey facts, and a depth gauge styled like a survey rod drives slices through the
   data. Chrome stays achromatic so the geologist's colour stretches are the only strong colour
   on screen; field-book yellow marks the current selection. */

@font-face {
  font-family: "Archivo Var";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo Var";
  src: url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #17232c;
  --ink-2: #3c4a51;
  --muted: #5f6e75;
  --film: #f3f5f3;
  --film-2: #e5eae7;
  --rule: #c9d1ce;
  --accent: #f1c232;
  --accent-deep: #c99a12;
  --stage: #24323a;
  --white: #ffffff;

  --font: "Archivo Var", "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-tick: 11.5px;
  --t-sm: 12.5px;
  --t-body: 14px;
  --t-h2: 13px;
  --t-title: 23px;

  --panel-w: 340px;
  --r-sm: 3px;
  --r-md: 6px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--ink);
  background: var(--film);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.stage :focus-visible { outline-color: var(--accent); }

/* ------------------------------------------------------------------ shell */
.app {
  display: grid;
  grid-template-columns: var(--panel-w) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
}

.bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 10px 20px;
  background: var(--film);
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}
.ident { min-width: 0; margin-right: auto; }
.ident h1 {
  margin: 0;
  font-size: var(--t-title);
  font-weight: 760;
  font-stretch: 125%;
  letter-spacing: -0.012em;
  line-height: 1.05;
}
.ident p {
  margin: 3px 0 0;
  font-size: var(--t-sm);
  color: var(--muted);
  font-stretch: 92%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.draft {
  font-size: 12px;
  font-weight: 600;
  font-stretch: 86%;
  padding: 3px 8px;
  border: 1.5px dashed var(--ink-2);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  white-space: nowrap;
}
.bar-actions { display: flex; align-items: center; gap: 10px; }

.views {
  display: inline-flex;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-md);
  overflow: hidden;
}
.views button {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  font-weight: 560;
  font-stretch: 94%;
}
.views button + button { border-left: 1.5px solid var(--ink); }
.views button[aria-selected="true"] { background: var(--ink); color: var(--film); }

.tour-btn {
  border: 1.5px solid var(--ink);
  background: var(--accent);
  border-radius: var(--r-md);
  padding: 6px 14px;
  font-weight: 640;
  font-stretch: 94%;
}
.tour-btn:hover { background: #f5cd4f; }
.bar .s { display: none; }
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1.5px solid var(--rule);
  background: var(--white);
  border-radius: var(--r-md);
}
.icon-btn svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ panel */
.panel {
  grid-row: 2;
  grid-column: 1;
  overflow-y: auto;
  background: var(--film);
  border-right: 1px solid var(--rule);
  scrollbar-width: thin;
}
.sheet-toggle { display: none; }
.block { padding: 16px 20px; }
.block + .block, .panel-more > .block, .block-legend { border-top: 1px solid var(--rule); }
.block-layers { border-top: 0; }
.block h2 {
  margin: 0 0 10px;
  font-size: var(--t-h2);
  font-weight: 680;
  font-stretch: 88%;
  color: var(--ink-2);
  letter-spacing: 0.005em;
}

.layer-list { display: grid; gap: 2px; }
.app[data-view="3d"] .block-layers { display: none; }
.app[data-view="3d"] .block-legend { border-top: 0; }
.layer {
  display: grid;
  grid-template-columns: 14px 1fr;
  column-gap: 10px;
  align-items: start;
  width: 100%;
  text-align: left;
  padding: 7px 10px 7px 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  position: relative;
}
.layer:hover { background: var(--film-2); }
.layer .dot {
  width: 12px; height: 12px;
  margin-top: 4px;
  border: 1.5px solid var(--ink-2);
  border-radius: 50%;
  background: var(--white);
}
.layer .nm { font-weight: 560; font-stretch: 96%; }
.layer .tx { grid-column: 2; font-size: var(--t-sm); color: var(--muted); font-stretch: 90%; line-height: 1.3; }
.layer[aria-checked="true"] { background: var(--film-2); }
.layer[aria-checked="true"]::before {
  content: "";
  position: absolute; left: -12px; top: 6px; bottom: 6px;
  width: 4px; border-radius: 2px;
  background: var(--accent);
}
.layer[aria-checked="true"] .dot { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 2.5px var(--white); }
.layer[aria-checked="true"] .nm { font-weight: 700; }

/* legend */
.lg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.lg-name { font-weight: 640; font-stretch: 92%; }
.lg-units { font-size: var(--t-sm); color: var(--muted); white-space: nowrap; }
.lg-bar {
  height: 14px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(23, 35, 44, 0.18);
}
.lg-ticks {
  position: relative;
  height: 16px;
  margin-top: 4px;
  font-size: var(--t-tick);
  font-stretch: 80%;
  color: var(--ink-2);
}
.lg-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.lg-ticks span:first-child { transform: none; }
.lg-ticks span:last-child { transform: translateX(-100%); }
.lg-ticks span::before {
  content: ""; position: absolute; top: -5px; left: 50%; width: 1px; height: 4px; background: var(--ink-2);
}
.lg-ticks span:first-child::before { left: 0; }
.lg-ticks span:last-child::before { left: auto; right: 0; }
.lg-note { margin: 8px 0 0; font-size: var(--t-sm); color: var(--muted); line-height: 1.35; }

.block-explain p { margin: 0; max-width: 62ch; }
.block-explain .tech { margin-top: 6px; font-size: var(--t-sm); color: var(--muted); }

/* controls */
.seg {
  display: inline-flex;
  border: 1.5px solid var(--ink-2);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 12px;
}
.seg button {
  border: 0; background: var(--white);
  padding: 5px 12px;
  font-size: var(--t-sm);
  font-weight: 560;
  font-stretch: 92%;
}
.seg button + button { border-left: 1.5px solid var(--ink-2); }
.seg button[aria-checked="true"] { background: var(--ink-2); color: var(--white); }

.checks { display: grid; gap: 7px; margin-bottom: 14px; }
.check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; line-height: 1.35; }
.check input { width: 16px; height: 16px; margin: 1px 0 0; flex: none; accent-color: var(--ink); }
.check .sw { width: 22px; height: 0; border-top: 2.5px solid var(--ink-2); flex: none; }
.check .sw.dash { border-top-style: dashed; }
.check small { color: var(--muted); font-size: var(--t-sm); }

.range { display: grid; gap: 4px; font-size: var(--t-sm); color: var(--ink-2); margin-bottom: 12px; }
.range input { width: 100%; accent-color: var(--ink); }
.range .seg { justify-self: start; margin-bottom: 0; }
.text-btn {
  border: 1.5px solid var(--ink-2); background: var(--white);
  border-radius: var(--r-md); padding: 5px 12px; font-size: var(--t-sm); font-weight: 560;
}
.hint { margin: 0 0 12px; font-size: var(--t-sm); color: var(--ink-2); max-width: 60ch; }
.section-picks { display: flex; gap: 8px; flex-wrap: wrap; }
.section-picks button {
  border: 1.5px solid var(--ink); background: var(--white);
  border-radius: var(--r-md); padding: 5px 12px;
  font-weight: 620; font-stretch: 92%;
}
.section-picks button:hover { background: var(--film-2); }

.facts { display: grid; grid-template-columns: 92px 1fr; gap: 5px 12px; margin: 0; font-size: var(--t-sm); }
.facts dt { color: var(--muted); font-stretch: 90%; }
.facts dd { margin: 0; }

.block-fine { font-size: 12px; color: var(--muted); line-height: 1.45; }
.block-fine p { margin: 0 0 8px; max-width: 64ch; }
.block-fine p:last-child { margin-bottom: 0; }
.block-fine a { color: var(--ink-2); }

/* ------------------------------------------------------------------ stage */
.stage { grid-row: 2; grid-column: 2; position: relative; overflow: hidden; background: var(--stage); }
.view { position: absolute; inset: 0; }
.view-3d { background: linear-gradient(#dfe5e3, #f1f3f1 62%, #e3e8e5); cursor: grab; }
.view-3d:active { cursor: grabbing; }
.view-3d canvas { display: block; }

.loading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 8px 14px; border-radius: var(--r-md);
  background: var(--film); color: var(--ink); font-size: var(--t-sm);
  border: 1px solid var(--rule);
}
.loading:empty { display: none; }

/* shown once when Esri tiles fail with a key configured (map-view.js) */
.basemap-notice {
  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 4;
  max-width: min(560px, calc(100% - 32px));
  padding: 8px 12px; border-radius: var(--r-md);
  background: #fff4d6; color: var(--ink); border: 1px solid var(--accent-deep);
  font-size: var(--t-sm); line-height: 1.4; box-shadow: 0 4px 18px rgba(23, 35, 44, 0.18);
}

/* map details */
.maplibregl-ctrl-group { border-radius: var(--r-md) !important; box-shadow: 0 0 0 1px var(--rule) !important; }
.maplibregl-ctrl-scale { border-color: var(--ink); color: var(--ink); background: rgba(243, 245, 243, 0.85); font-family: var(--font); font-stretch: 85%; }
.maplibregl-ctrl-attrib { font-family: var(--font); font-size: 11px; }
/* On wide maps the credits stay on one line, trimmed with an ellipsis and shown in full on hover or
   focus, the way Esri's own viewer does it, so they never run into the scale bar and zoom buttons. */
.maplibregl-ctrl-bottom-right { max-width: calc(100% - 150px); }
.maplibregl-ctrl-attrib:not(.maplibregl-compact) { max-width: 100%; box-sizing: border-box; }
.maplibregl-ctrl-attrib:not(.maplibregl-compact) .maplibregl-ctrl-attrib-inner { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maplibregl-ctrl-attrib:not(.maplibregl-compact):hover .maplibregl-ctrl-attrib-inner,
.maplibregl-ctrl-attrib:not(.maplibregl-compact):focus-within .maplibregl-ctrl-attrib-inner { white-space: normal; }
.sec-label {
  font-family: var(--font);
  font-size: 12px; font-weight: 680; font-stretch: 85%;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  cursor: pointer;
  white-space: nowrap;
}
.sec-label:hover, .sec-label.on { background: var(--accent); }
.place { display: flex; align-items: center; gap: 6px; pointer-events: none; }
.place i { width: 9px; height: 9px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 2px var(--ink); }
.place span {
  font-family: var(--font); font-size: 13px; font-weight: 640; font-stretch: 96%; color: var(--white);
  text-shadow: 0 0 3px var(--ink), 0 0 2px var(--ink), 0 0 6px rgba(23, 35, 44, 0.8);
}
.ajax-pin {
  font-family: var(--font);
  font-size: 13px; font-weight: 720; font-stretch: 100%;
  color: var(--ink); background: var(--accent);
  border: 1.5px solid var(--ink); border-radius: var(--r-sm);
  padding: 2px 8px; white-space: nowrap;
}

/* ------------------------------------------------------------------ gauge (survey rod) */
.gauge {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  height: min(460px, calc(100% - 120px));
  min-height: 260px;
  width: 132px;
  padding: 10px 12px 10px 10px;
  background: var(--film);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: 0 4px 18px rgba(23, 35, 44, 0.18);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  z-index: 3;
  user-select: none;
  touch-action: none;
}
.g-title { font-size: 12px; font-weight: 680; font-stretch: 86%; line-height: 1.2; color: var(--ink-2); }
.g-end { font-size: var(--t-tick); font-stretch: 82%; color: var(--muted); text-align: right; padding-right: 2px; }
.g-end.top { margin: 6px 0 4px; }
.g-end.bottom { margin-top: 4px; }
.g-track { position: relative; cursor: pointer; outline: none; border-radius: var(--r-sm); }
.g-track:focus-visible { box-shadow: 0 0 0 2px var(--ink); }
.g-rod {
  position: absolute; right: 2px; top: 0; bottom: 0; width: 12px;
  border: 1.5px solid var(--ink);
  display: flex; flex-direction: column;
  background: var(--white);
}
.g-rod i { flex: 1 1 0; display: block; }
.g-rod i:nth-child(odd) { background: var(--ink); }
.g-tick {
  position: absolute; right: 20px;
  transform: translateY(-50%);
  font-size: var(--t-tick); font-stretch: 80%; color: var(--ink-2);
  white-space: nowrap; line-height: 1;
}
.g-tick::after { content: ""; position: absolute; right: -6px; top: 50%; width: 4px; height: 1px; background: var(--ink-2); }
.g-thumb {
  position: absolute; right: 0; left: 0;
  height: 0;
  transition: top 160ms ease-out;
  pointer-events: none;
}
.g-thumb::after {
  content: ""; position: absolute; right: -3px; width: 22px; top: -1.5px; height: 3px;
  background: var(--accent); box-shadow: 0 0 0 1px var(--ink);
}
.g-thumb span {
  position: absolute; right: 24px; top: 0; transform: translateY(-50%);
  background: var(--accent); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 720; font-stretch: 86%;
  padding: 2px 6px; white-space: nowrap;
}
.gauge.dragging .g-thumb { transition: none; }

.compass3d {
  position: absolute; right: 14px; bottom: 16px; width: 44px; height: 44px;
  color: var(--ink); background: var(--film); border: 1px solid var(--rule); border-radius: 50%;
  z-index: 3;
}
.compass3d text { font: 700 10px var(--font); fill: currentColor; }
.three-label {
  font-family: var(--font); font-size: 12px; font-weight: 680; font-stretch: 85%;
  color: var(--ink); background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid var(--ink); border-radius: var(--r-sm); padding: 1px 6px;
  white-space: nowrap; pointer-events: none;
}

/* ------------------------------------------------------------------ "drag to turn" hint over the 3D model */
.three-hint {
  position: absolute; left: 50%; bottom: calc(var(--hint-lift, 0px) + 12px);
  transform: translateX(-50%);
  z-index: 3; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px;
  max-width: calc(100% - 24px);
  padding: 7px 13px 7px 10px; border-radius: 999px;
  background: var(--accent); color: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: 0 4px 18px rgba(23, 35, 44, 0.22);
  font-size: var(--t-sm); font-weight: 640; line-height: 1.2; white-space: nowrap;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
/* fades in once the reveal swing has settled */
.three-hint.show { opacity: 1; visibility: visible; transition: opacity 0.4s ease 1.4s, visibility 0s linear 1.4s; }
/* on phones the open detail sheet covers most of the model, so the hint waits until it closes */
.app.sheet-open .three-hint { opacity: 0; visibility: hidden; transition: none; }
.three-hint svg { width: 19px; height: 19px; flex: none; transform-origin: 50% 50%; animation: hint-nudge 1.8s ease-in-out infinite; }
@keyframes hint-nudge {
  0%, 100% { transform: rotate(-16deg); }
  50% { transform: rotate(16deg); }
}

/* ------------------------------------------------------------------ guided tour */
.tour {
  position: absolute; left: 16px; top: 16px; z-index: 6;
  width: min(380px, calc(100% - 200px));
  max-height: calc(100% - 32px);
  overflow-y: auto;
  background: var(--film);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: 0 8px 28px rgba(23, 35, 44, 0.24);
  padding: 14px 16px 14px;
}
.tour.at-bottom { top: auto; bottom: 16px; width: min(560px, calc(100% - 180px)); }
.intro h2 { margin: 0 0 8px; font-size: 21px; font-weight: 750; font-stretch: 112%; line-height: 1.15; }
.intro .tour-nav button.start { background: var(--accent); }
.intro .tour-nav button.start:hover { background: #f5cd4f; }
.tour.over-section { top: auto; left: auto; right: 16px; bottom: 16px; width: min(400px, calc(100% - 32px)); }
.tour-progress { display: grid; grid-auto-flow: column; gap: 4px; margin-bottom: 10px; }
.tour-progress i { height: 4px; border-radius: 2px; background: var(--rule); }
.tour-progress i.done { background: var(--ink-2); }
.tour-progress i.now { background: var(--accent); box-shadow: 0 0 0 1px var(--accent-deep); }
.tour-step { font-size: var(--t-sm); color: var(--muted); margin: 0 0 2px; }
.tour h3 { margin: 0 0 6px; font-size: 18px; font-weight: 720; font-stretch: 108%; line-height: 1.2; }
.tour p.tour-text { margin: 0 0 12px; max-width: 58ch; }
.tour-nav { display: flex; align-items: center; gap: 8px; }
.tour-nav .spacer { flex: 1; }
.tour-nav button {
  border: 1.5px solid var(--ink); border-radius: var(--r-md); padding: 5px 14px; font-weight: 620;
  background: var(--white);
}
.tour-nav button.next { background: var(--ink); color: var(--film); }
.tour-nav button.quiet { border-color: transparent; background: transparent; color: var(--ink-2); padding-left: 4px; padding-right: 4px; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ section viewer */
.section-view {
  position: absolute; inset: 0; z-index: 5;
  background: var(--film);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.sv-head {
  display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--rule);
}
.sv-title { margin-right: auto; min-width: 0; }
.sv-title h2 { margin: 0; font-size: 20px; font-weight: 760; font-stretch: 115%; line-height: 1.1; }
.sv-title p { margin: 3px 0 0; font-size: var(--t-sm); color: var(--muted); }
.sv-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sv-controls .seg { margin: 0; }
.sv-close { width: 34px; height: 34px; border: 1.5px solid var(--ink); border-radius: var(--r-md); background: var(--white); display: grid; place-items: center; }
.sv-close svg { width: 14px; height: 14px; }
.sv-locator { width: 56px; height: 64px; flex: none; }
.sv-plot { position: relative; min-height: 0; }
.sv-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sv-plot .ax { font-size: var(--t-tick); font-stretch: 82%; fill: var(--ink-2); font-family: var(--font); }
.sv-plot .ax-title { font-size: var(--t-sm); fill: var(--muted); font-family: var(--font); font-stretch: 90%; }
.sv-foot {
  display: grid; grid-template-columns: minmax(220px, 420px) 1fr; gap: 24px; align-items: start;
  padding: 10px 18px 14px; border-top: 1px solid var(--rule);
}
.sv-foot p { margin: 0; font-size: var(--t-sm); color: var(--ink-2); max-width: 70ch; }
.sv-rotate { display: none; }
@media (max-width: 760px) and (orientation: portrait) {
  .sv-rotate { display: block; position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: var(--t-sm); color: var(--muted); }
}

/* ------------------------------------------------------------------ embedded in the page */
/* The website page carries the title, the survey facts and the fine print, so inside its frame
   the bar keeps only the controls and the panel keeps only layers, legend, explanation and sections. */
.app.embedded { --panel-w: 300px; }
.app.embedded .ident,
.app.embedded .draft,
.app.embedded .block-facts,
.app.embedded .block-fine { display: none; }
.app.embedded .bar { justify-content: flex-end; }
/* the controls float over the top-right of the map, so the frame has no empty bar */
.app.embedded { position: relative; grid-template-rows: 0 minmax(0, 1fr); }
.app.embedded .bar {
  position: absolute; top: 10px; right: 10px; z-index: 7;
  padding: 6px 8px;
  background: rgba(243, 245, 243, 0.88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  box-shadow: 0 4px 18px rgba(23, 35, 44, 0.22);
}
.app.embedded .icon-btn { border-color: var(--ink-2); }
/* the page explains the sections right under the map */
.app.embedded #section-note { display: none; }
/* tighter panel so layers, legend, explanation and sections fit the frame without scrolling */
.app.embedded .block { padding: 10px 16px; }
.app.embedded .block h2 { margin-bottom: 6px; }
.app.embedded .lg-note { display: none; } /* the page explains the colour stretches */
.app.embedded .hint { margin-bottom: 8px; }
.app.embedded .layer { padding: 5px 10px 5px 8px; }

/* ------------------------------------------------------------------ small screens */
@media (max-width: 760px) {
  :root { --t-title: 19px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .bar { padding: 8px 10px 8px 12px; gap: 8px; }
  .ident p { display: none; }
  .draft { display: none; }
  .views button { padding: 6px 9px; }
  .tour-btn { padding: 6px 10px; }
  .icon-btn { display: none; }
  .bar .l { display: none; }
  .bar .s { display: inline; }

  .stage { grid-column: 1; grid-row: 2; }
  .panel {
    grid-column: 1; grid-row: 2;
    align-self: end;
    z-index: 4;
    max-height: 44%;
    border-right: 0;
    border-top: 1px solid var(--rule);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -6px 22px rgba(23, 35, 44, 0.22);
  }
  .app.sheet-open .panel { max-height: 82%; }
  .sheet-toggle {
    display: flex; align-items: center; gap: 10px;
    width: 100%; border: 0; background: transparent;
    padding: 8px 14px 2px; font-size: var(--t-sm); color: var(--muted);
  }
  .sheet-toggle .grip { width: 36px; height: 4px; border-radius: 2px; background: var(--rule); }
  .panel-more { display: none; }
  .app.sheet-open .panel-more { display: block; }
  .block { padding: 10px 14px; }
  .block-layers h2 { display: none; }
  .layer-list { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .layer { display: block; width: auto; flex: none; padding: 6px 11px; border: 1.5px solid var(--rule); background: var(--white); border-radius: 999px; }
  .layer .dot, .layer .tx { display: none; }
  .layer[aria-checked="true"] { border-color: var(--ink); background: var(--accent); }
  .layer[aria-checked="true"]::before { display: none; }
  .block-legend { border-top: 0; padding-top: 4px; }
  .lg-note { display: none; }

  .gauge {
    top: 10px; transform: none; right: 8px;
    height: min(300px, calc(56% - 20px)); min-height: 200px; width: 98px;
    padding: 8px 9px 8px 8px;
  }
  .app.carded .panel { display: none; }
  .tour, .tour.at-bottom, .tour.over-section { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 48%; padding: 12px 13px; }
  .tour h3 { font-size: 16px; }
  .compass3d { bottom: auto; top: 10px; right: auto; left: 10px; }

  .sv-head { padding: 10px 56px 8px 12px; gap: 10px; position: relative; }
  .sv-close { position: absolute; right: 10px; top: 10px; }
  .sv-locator { display: none; }
  .sv-foot { grid-template-columns: 1fr; gap: 8px; padding: 8px 12px 12px; }
  .sv-foot p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}