/* =========================================================================
   PLUMB - Chrome: the drafting furniture
   -------------------------------------------------------------------------
   The pieces that make a Plumb surface read as a MEASURED DRAWING rather
   than a web page: registration plates, the datum spine with numbered
   stations, title blocks, dimension lines, gauges, margin notes, stamps.
   Plus the working controls (buttons, fields, chips, severity marks)
   drawn in the same hand.

   Everything here is opt-in classes on plain markup. Tokens come from
   colors_and_type.css.
   ========================================================================= */

/* =========================================================================
   PLATES - a card is a plate registered to the board
   Squared (2px), white above bone paper, with two registration corners
   (top-left, bottom-right) like crop marks. `plate--ink` is the inverse
   plate for verdicts and brand moments.
   ========================================================================= */
.plate {
  position: relative;
  background: var(--bg-plate);
  border: 1px solid var(--line);
  border-radius: var(--radius-plate);
  box-shadow: var(--shadow-plate);
}
.plate::before, .plate::after {
  content: "";
  position: absolute;
  width: 11px; height: 11px;
  pointer-events: none;
  z-index: 6;
}
.plate::before {
  top: -1px; left: -1px;
  border-top: 2px solid var(--graphite-500);
  border-left: 2px solid var(--graphite-500);
}
.plate::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--graphite-500);
  border-right: 2px solid var(--graphite-500);
}
.plate--ink {
  background: var(--bg-ink);
  border-color: var(--ink-line);
  color: var(--fg-on-ink);
}
.plate--ink::before, .plate--ink::after { border-color: var(--fg-on-ink-faint); }
.plate--plain::before, .plate--plain::after { content: none; }

/* A recessed inner panel on a plate (tables, wells). */
.inner {
  background: var(--bg-plate);
  border: 1px solid var(--line);
  border-radius: var(--radius-plate);
}

/* =========================================================================
   THE DATUM - one vertical line the page hangs off
   Wrap modules in .stations; each module is a .mod headed by a .stn.
   The line ends in the bob (drop in an <svg> or <plumb-mark> with
   class="datum-bob").
   ========================================================================= */
.stations { position: relative; padding-left: 118px; }
.datum {
  position: absolute;
  left: 46px; top: 14px; bottom: 16px;
  width: 1px;
  background: var(--line-strong);
}
.datum-bob { position: absolute; left: 38.5px; bottom: -8px; }
.mod { position: relative; margin-bottom: 36px; }
.mod:last-child { margin-bottom: 0; }

/* Station header: outlined numeral in the margin, a tick on the datum,
   a mono title, and a depth reading pushed right. */
.stn {
  position: relative;
  display: flex; align-items: baseline; gap: 14px;
  margin: 0 0 12px;
}
.stn .stn-n {
  position: absolute; left: -118px; top: -7px;
  width: 40px; text-align: right;
  font: 700 30px/1 var(--font-display);
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.1px var(--graphite-300);
}
.stn::before {
  content: "";
  position: absolute; left: -76px; top: 1px;
  width: 9px; height: 9px; box-sizing: border-box;
  border: 1.2px solid var(--graphite-500);
  border-radius: 50%;
  background: var(--bg);
  z-index: 2;
}
.stn .stn-t {
  font: 500 11px var(--font-mono);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.stn .stn-d {
  margin-left: auto;
  font: 400 9.5px var(--font-mono);
  letter-spacing: var(--track-eyebrow);
  color: var(--fg-subtle);
}

/* =========================================================================
   ANNOTATION FURNITURE
   ========================================================================= */

/* Title block - the drawing-sheet strip. Fill with <span> cells:
   RUN Nº · DRAWN: XX · SHEET · SCALE · DATUM · COORDS */
.tblock {
  display: flex; justify-content: space-between; gap: 24px;
  border-top: 2px solid var(--graphite-900);
  border-bottom: 1px solid var(--line-strong);
  padding: 8px 2px;
  font: 400 var(--text-3xs) var(--font-mono);
  letter-spacing: 0.13em;
  color: var(--fg-muted);
  text-transform: uppercase;
}

/* Margin note - a dashed-rule aside in the surveyor's hand. */
.note {
  font: 400 11.5px/1.7 var(--font-mono);
  color: var(--fg-muted);
  border-left: 1px dashed var(--line-strong);
  padding: 2px 0 2px 16px;
}
.note b {
  font-weight: 700; color: var(--fg-body);
  letter-spacing: 0.08em; text-transform: uppercase;
  display: block; margin-bottom: 4px;
}
.note--ink { color: var(--fg-on-ink-muted); border-color: var(--ink-line-2); }
.note--ink b { color: #D6D3C9; }

/* Vertical margin note running up a module's right edge. */
.marg {
  position: absolute; right: -30px; top: 44px;
  writing-mode: vertical-rl;
  font: 400 9px var(--font-mono);
  letter-spacing: 0.22em;
  color: var(--fg-subtle);
  text-transform: uppercase;
}

/* Dimension line - <div class="dim"><i></i>LABEL<i></i></div> */
.dim {
  display: flex; align-items: center; gap: 8px;
  font: 400 9px var(--font-mono);
  letter-spacing: var(--track-stamp);
  color: var(--fg-subtle);
}
.dim i { flex: 1; height: 5px; border-bottom: 1px solid var(--graphite-300); position: relative; }
.dim i::before, .dim i::after {
  content: "";
  position: absolute; bottom: -3px;
  width: 1px; height: 7px;
  background: var(--graphite-300);
}
.dim i::before { left: 0; }
.dim i::after { right: 0; }

/* Gauge - a reading under a KPI numeral. Position the needle with
   <i style="left:61%"></i>; label the ends with two <span>s. */
.gauge {
  position: relative;
  margin-top: 16px; padding-top: 5px;
  border-top: 1px solid var(--line-strong);
  display: flex; justify-content: space-between;
  font: 400 9px var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
}
.gauge i { position: absolute; top: -5px; width: 2px; height: 9px; background: var(--clay-500); }

/* Crosshair - a tiny + registration mark. Absolute-position it. */
.crosshair { position: absolute; width: 9px; height: 9px; color: var(--graphite-300); }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: currentColor; }
.crosshair::before { left: 4px; top: 0; width: 1px; height: 9px; }
.crosshair::after { top: 4px; left: 0; height: 1px; width: 9px; }

/* Graph paper - for map wells and empty states. Never behind prose. */
.graphpaper {
  background-color: var(--bg);
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Live badge - the one pill. ● pulses while an analysis runs. */
.live {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 10px var(--font-mono);
  letter-spacing: var(--track-stamp);
  color: var(--clay-600);
  background: var(--clay-50);
  border: 1px solid var(--clay-100);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  white-space: nowrap;
}
.live i { font-style: normal; animation: plumb-pulse 2.2s infinite; }

/* Stamp - VERIFIED / COMPLETE. Add .plumb-slam when it lands. */
.stamp {
  display: inline-flex;
  font: 700 10px var(--font-mono);
  letter-spacing: var(--track-eyebrow);
  color: var(--clay-600);
  border: 2px solid var(--clay-500);
  border-radius: 3px;
  padding: 4px 8px;
  text-transform: uppercase;
}
.stamp--ink { color: var(--fg); border-color: var(--graphite-900); }

/* =========================================================================
   SEVERITY - one red pencil
   ■ Deal-breaker (clay) · ■ Material (graphite-700) · ■ Noted (graphite-500)
   Use: <span class="sev high">■ Deal-breaker</span>
   ========================================================================= */
.sev { font: 600 12.5px var(--font-body); white-space: nowrap; }
.sev.high { color: var(--sev-high); }
.sev.med  { color: var(--sev-med); }
.sev.low  { color: var(--sev-low); }

/* =========================================================================
   CONTROLS - the working hand
   ========================================================================= */

/* Buttons: .btn + .btn--clay | .btn--ink | .btn--ghost | .btn--ghost-ink,
   size with .btn--sm. Press sinks 1px, never scales. */
.btn {
  font: 600 15px var(--font-body);
  border: none;
  border-radius: var(--radius-control);
  padding: 13px 24px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform 60ms var(--ease-out);
}
.btn:active { transform: translateY(var(--press-drop)); }
.btn--clay { background: var(--clay-500); color: var(--accent-fg); }
.btn--clay:hover { background: var(--clay-550); }
.btn--clay:active { background: var(--clay-700); }
.btn--ink { background: var(--graphite-900); color: var(--fg-on-ink); }
.btn--ink:hover { background: #33332F; }
.btn--ghost {
  background: transparent; color: var(--fg-body);
  border: 1px solid var(--line-strong);
  padding: 12px 23px;
}
.btn--ghost:hover { border-color: var(--graphite-500); color: var(--fg); }
.btn--ghost-ink {
  background: transparent; color: var(--fg-on-ink);
  border: 1px solid var(--fg-on-ink-faint);
  padding: 12px 23px;
}
.btn--ghost-ink:hover { border-color: var(--fg-on-ink); }
.btn--sm { font-size: 13.5px; padding: 10px 18px; }
.btn--sm.btn--ghost, .btn--sm.btn--ghost-ink { padding: 9px 17px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Field - mono placeholder (a form is a form to fill in ink). */
.fld {
  font: 400 13.5px var(--font-body);
  color: var(--fg);
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  outline: none;
  background: var(--bg-plate);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.fld::placeholder { color: var(--fg-subtle); font-family: var(--font-mono); font-size: 12px; }
.fld:focus { border-color: var(--clay-500); box-shadow: var(--shadow-focus-ring); }

/* Segmented control - the severity filter. */
.seg {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--bg-plate);
}
.seg > span, .seg > button {
  all: unset;
  font: 500 12.5px var(--font-body);
  padding: 8px 15px;
  cursor: pointer;
  color: var(--fg-muted);
  border-right: 1px solid var(--line);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.seg > span:last-child, .seg > button:last-child { border-right: none; }
.seg > span:hover, .seg > button:hover { color: var(--fg); }
.seg > .on { background: var(--graphite-900); color: var(--fg-on-ink); }

/* Toggle */
.tg {
  width: 40px; height: 22px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  position: relative;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
  flex: none;
}
.tg::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg-plate);
  transition: left var(--dur-base) var(--ease-out);
  box-shadow: 0 1px 2px rgb(30 30 27 / 0.25);
}
.tg.on { background: var(--clay-500); }
.tg.on::after { left: 21px; }

/* Evidence file chip - <a class="fchip"><b>PDF</b>name.pdf · 2.4 MB
   <span class="arr">↗</span></a> */
.fchip {
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 11px var(--font-mono);
  color: var(--fg-body);
  background: var(--bg-plate);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 11px;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.fchip b {
  font: 700 8.5px var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--fg-on-ink);
  background: var(--graphite-500);
  border-radius: 2px;
  padding: 2px 5px;
}
.fchip .arr {
  color: var(--fg-subtle);
  transition: color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.fchip:hover { border-color: var(--clay-500); color: var(--fg); }
.fchip:hover .arr { color: var(--clay-500); transform: translate(1px, -1px); }

/* Locate link - a dotted-clay cross-reference ("locate in graph ↓"). */
.lgr {
  font: 500 10px var(--font-mono);
  letter-spacing: var(--track-stamp);
  color: var(--clay-600);
  border-bottom: 1px dotted var(--clay-300);
  cursor: pointer;
  text-transform: uppercase;
  text-decoration: none;
}
.lgr:hover { color: var(--clay-700); }

/* Checklist row - the register-pull checklist. Toggle .done. */
.ck {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--paper-100);
  cursor: pointer;
  user-select: none;
}
.ck:last-child { border-bottom: none; }
.ck .bx {
  width: 20px; height: 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: 3px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-base) var(--ease-out);
}
.ck .bx path {
  stroke: var(--clay-500);
  stroke-dasharray: 26; stroke-dashoffset: 26;
  transition: stroke-dashoffset 0.3s var(--ease-out) 0.05s;
}
.ck.done .bx { border-color: var(--clay-500); }
.ck.done .bx path { stroke-dashoffset: 0; }
.ck .tx {
  font: 400 12.5px var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--fg);
  transition: color var(--dur-base) var(--ease-out);
}
.ck.done .tx { color: var(--fg-subtle); text-decoration: line-through; }

@media (prefers-reduced-motion: reduce) {
  .live i { animation: none; }
}