/* The Ground Beneath Gloucestershire — viewer styles.

   Palette (from the subject, not a template):
     paper   #F2F1EC  cool, slightly grey — a log sheet, not a warm cream
     ink     #1F2A2E  slate green-black, the pen on the sheet
     rule    #C4C7BF  hairlines of the ruler and legend
     muted   #66706F  secondary text
     lias    #3D6B8E  Lias blue-grey: anything live or interactive
   Lithology colours live in viewer.js because the canvas needs them too. */

:root {
  --paper: #F2F1EC;
  --ink: #1F2A2E;
  --rule: #C4C7BF;
  --muted: #66706F;
  --lias: #3D6B8E;
  --lias-soft: rgba(61, 107, 142, 0.16);
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 2.4vw, 28px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-variation-settings: "wdth" 100, "wght" 400;
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

a { color: var(--lias); text-underline-offset: 2px; }
a:focus-visible, input:focus-visible { outline: 2px solid var(--lias); outline-offset: 3px; }

.stage { position: relative; width: 100%; height: 100vh; overflow: hidden; }

#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- masthead */
.masthead {
  position: absolute; top: var(--gutter); left: calc(var(--gutter) + 88px);
  max-width: 34ch; pointer-events: none;
}
.masthead h1 {
  margin: 0 0 4px;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.05;
  font-variation-settings: "wdth" 118, "wght" 720;
  letter-spacing: -0.01em;
}
.model-name { margin: 0; color: var(--muted); }
.synthetic {
  display: inline-block; margin: 8px 0 0; padding: 3px 8px;
  border: 1px solid var(--ink); border-radius: 2px;
  font-variation-settings: "wdth" 96, "wght" 520;
}
/* `display: inline-block` above outranks the user agent's [hidden] rule, so an
   unflagged model drew an empty bordered box. Only visible once a model that
   sets no flag existed. */
.synthetic[hidden] { display: none; }

/* ---------- depth ruler (peel control) */
.ruler {
  position: absolute; top: var(--gutter); bottom: 128px; left: var(--gutter);
  width: 72px; display: flex; flex-direction: column;
}
.ruler-label {
  margin: 0 0 6px; width: 72px;
  font-size: 12px; line-height: 1.25; color: var(--muted);
}
.ruler-track { position: relative; flex: 1; border-left: 1.5px solid var(--ink); margin-left: 24px; }
.ruler-ticks { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.ruler-ticks li {
  position: absolute; left: 0; transform: translateY(-50%);
  padding-left: 8px; font-size: 11px; color: var(--muted); white-space: nowrap;
}
.ruler-ticks li::before {
  content: ""; position: absolute; left: -1.5px; top: 50%; width: 6px; height: 1.5px; background: var(--ink);
}
.ruler-ticks li.major::before { width: 10px; }
.ruler-ticks li.major { color: var(--ink); }

/* Vertical range input: rotated, laid over the track. */
.ruler-input {
  position: absolute; left: 50%; top: 50%;
  width: 100%; height: 22px;
  /* width in the rotated frame = the track height; set from JS via --track-h */
  width: var(--track-h, 300px);
  /* Anticlockwise, so the input's max end (the surface) sits at the top of the
     track like the ticks do; clockwise put "surface" beside the lowest tick. */
  transform: translate(-50%, -50%) rotate(-90deg);
  margin: 0; background: transparent; cursor: ns-resize; appearance: none; -webkit-appearance: none;
}
.ruler-input::-webkit-slider-runnable-track { height: 2px; background: transparent; }
.ruler-input::-moz-range-track { height: 2px; background: transparent; }
.ruler-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -6px; border-radius: 50%;
  background: var(--lias); border: 2px solid var(--paper); box-shadow: 0 0 0 1.5px var(--lias);
}
.ruler-input::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--lias); border: 2px solid var(--paper); box-shadow: 0 0 0 1.5px var(--lias);
}
.ruler-readout { margin: 6px 0 0 24px; font-size: 13px; color: var(--lias); font-variation-settings: "wght" 560; }

/* ---------- certainty control */
.certainty {
  position: absolute; top: var(--gutter); right: var(--gutter);
  width: min(300px, 40vw);
}
.certainty label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.certainty-row { display: flex; align-items: center; gap: 10px; }
.certainty input[type="range"] { flex: 1; accent-color: var(--lias); }
.certainty output { min-width: 7ch; font-size: 13px; color: var(--lias); font-variation-settings: "wght" 560; }
.hint { margin: 4px 0 0; font-size: 12px; color: var(--muted); }

/* ---------- legend, drawn like a log column */
.legend { position: absolute; left: var(--gutter); bottom: var(--gutter); }
.legend ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 2px 18px; }
.legend li { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.legend .swatch { width: 26px; height: 12px; border: 1px solid rgba(31, 42, 46, 0.35); }
.legend .count { color: var(--muted); }

/* ---------- hover probe */
.probe {
  position: absolute; right: var(--gutter); bottom: var(--gutter);
  padding: 8px 10px; border-left: 2px solid var(--lias);
  background: rgba(242, 241, 236, 0.85); backdrop-filter: blur(2px);
  max-width: 28ch;
}
.probe p { margin: 0; }
.probe-class { font-variation-settings: "wdth" 110, "wght" 640; }
.probe-detail { font-size: 12px; color: var(--muted); }

/* ---------- credit */
.credit {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  margin: 0; font-size: 11px; color: var(--muted); text-align: center; max-width: 70ch;
}

@media (max-width: 720px) {
  .masthead { left: calc(var(--gutter) + 64px); max-width: 60vw; }
  .ruler { width: 56px; }
  .ruler-label { width: 56px; }
  .certainty { top: auto; bottom: 118px; right: var(--gutter); width: 46vw; }
  .legend ol { grid-template-columns: 1fr; }
  .probe { bottom: 60px; }
  .credit { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .probe { transition: opacity 120ms ease; }
}