/* Drainage Inspector — "Survey signage"
   Ink on paper for full sun. One hi-vis yellow for "you, now", one red for
   "wrong", revision blue only for design changes. */

:root {
  --paper: #F6F5F0;
  --surface: #FFFFFF;
  --ink: #121311;
  --ink-2: #383B36;
  --ink-3: #555952;
  --rule: #CFD0C9;
  --hivis: #FFD100;
  --hivis-soft: rgba(255, 209, 0, 0.22);
  --hivis-band: rgba(255, 209, 0, 0.16);
  --on-hivis: #121311;
  --defect: #B3141A;
  --defect-bg: #FCEBEA;
  --rev: #1446A0;
  --rev-bg: #E8EEF9;
  --on-ink: #FFFFFF;
  --lane-off: #E3E2DB;
  --lane-crest: #EAE9E3;
  --lane-toe: #F0EFEA;
  --lane-face: #F5F4F0;
  --lane-plat: #FBFBF9;
  --lane-spine: #FFFFFF;
  --scrim: rgba(18, 19, 17, 0.45);
  --part: #8C8E86;
  /* embankment height bands on the strip: below the Type 9 threshold, up to 4 m, 4 m and over */
  --fill-lo: #E4DAC2;
  --fill-mid: #C29F5C;
  --fill-hi: #74551F;
  /* reference structures (bridges, road crossings): drawn for finding your way, not inspected */
  --ref: #4F6272;
  --ref-bg: rgba(79, 98, 114, 0.13);
  --hatch: repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 6px);
  --hazard: repeating-linear-gradient(135deg, var(--ink) 0 5px, var(--hivis) 5px 10px);
  --none-design: repeating-linear-gradient(135deg, #9A9C94 0 1.5px, transparent 1.5px 8px);
  --no-data: repeating-linear-gradient(90deg, #BDBFB7 0 2px, transparent 2px 6px);
  --f-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-sans: 'Barlow', 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --nav-h: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

:root[data-theme="office"] {
  --paper: #151614;
  --surface: #1F201E;
  --ink: #F2F1EC;
  --ink-2: #C9CAC3;
  --ink-3: #9A9C94;
  --rule: #3A3C38;
  --hivis-soft: rgba(255, 209, 0, 0.18);
  --hivis-band: rgba(255, 209, 0, 0.12);
  --defect: #FF6B61;
  --defect-bg: #3A1917;
  --rev: #7EA6E8;
  --rev-bg: #18243A;
  --on-ink: #151614;
  --lane-off: #1A1B19;
  --lane-crest: #1D1E1C;
  --lane-toe: #20211F;
  --lane-face: #232422;
  --lane-plat: #262725;
  --lane-spine: #2A2B29;
  --scrim: rgba(0, 0, 0, 0.6);
  --part: #6F716A;
  --fill-lo: #3A3428;
  --fill-mid: #8A6E3A;
  --fill-hi: #D9B46A;
  --ref: #9DB3C6;
  --ref-bg: rgba(157, 179, 198, 0.14);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 500 16px/1.4 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  font-variant-numeric: tabular-nums;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--ink); }
svg { display: block; }
.mono { font-family: var(--f-mono); }
.cond { font-family: var(--f-cond); }
.muted { color: var(--ink-3); }
.hidden { display: none !important; }

/* ------------------------------------------------------------ app frame */
#app {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  max-width: 560px; margin: 0 auto;
  background: var(--paper);
  overflow: hidden;
}
@media (min-width: 561px) {
  body { background: #D9D8D1; }
  :root[data-theme="office"] body { background: #0C0D0C; }
  #app { border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }
}
.screen { flex: 1; min-height: 0; display: none; flex-direction: column; position: relative; }
.screen.on { display: flex; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------- position header */
.pos {
  flex: none;
  padding: 10px 16px 8px;
  border-bottom: 3px solid var(--ink);
  background: var(--paper);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
}
.pos-line { display: flex; align-items: center; gap: 8px; font: 700 13px/1 var(--f-sans); letter-spacing: 0.08em; text-transform: uppercase; min-width: 0; }
.chip-sub { background: var(--ink); color: var(--on-ink); padding: 3px 6px; letter-spacing: 0.06em; }
.chip-fill { border: 2px solid var(--ink); padding: 1px 5px; letter-spacing: 0.04em; white-space: nowrap; }
.chip-fill.t9 { border-color: var(--defect); color: var(--defect); }
.chip-ref { background: var(--ref); color: var(--on-ink); padding: 3px 6px; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.gps {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 10px;
  border: 2px solid var(--ink);
  font: 600 15px/1 var(--f-sans);
  white-space: nowrap;
}
.gps.poor { background: var(--hivis); border-color: var(--hivis); color: var(--on-hivis); }
.gps.none { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.gps.anchor { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.pos-ch {
  font: 700 62px/0.95 var(--f-cond);
  letter-spacing: -0.01em;
  margin-top: 8px;
  white-space: nowrap;
  align-self: end;
}
.pos-ch .approx { font-size: 0.8em; margin-right: 2px; }
.pos-ch.hand { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.pos-you { text-align: right; align-self: end; justify-self: end; padding-bottom: 2px; }
.pos-you .lbl { font: 700 13px/1 var(--f-sans); letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; }
.pos-you .side { font: 700 34px/1.05 var(--f-cond); margin: 4px 0 4px; white-space: nowrap; }
.pos-you .facing { font: 700 13px/1 var(--f-sans); letter-spacing: 0.06em; color: var(--ink-2); white-space: nowrap; }
.pos-you .facing b { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 14px; }
.pos-you .facing .tri { display: inline-block; margin: 0 2px; }
.pos button.tap { text-align: inherit; }
.pos .pos-you.tap { text-align: right; }
.pos .pos-ch.tap { text-align: left; }
@media (max-width: 370px) {
  .pos-ch { font-size: 52px; }
  .pos-you .side { font-size: 28px; }
}

/* -------------------------------------------------------- lane header */
.lanes-head {
  flex: none;
  display: grid;
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  padding: 6px 0 5px;
  font: 700 12px/1 var(--f-cond);
  letter-spacing: 0.04em;
}
.lanes-head .sides { display: flex; justify-content: space-between; padding: 0 12px 4px; font: 700 13px/1 var(--f-sans); letter-spacing: 0.1em; }
.lanes-head .names { display: flex; align-items: end; }
.lanes-head .names span { text-align: center; color: var(--ink-2); }
.lanes-head .names .cl { font-size: 13px; color: var(--ink); }

/* -------------------------------------------------------------- strip */
.viewport { flex: 1; min-height: 0; position: relative; overflow: hidden; background: var(--paper); touch-action: none; }
.viewport > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.seg3 {
  position: absolute; left: 8px; bottom: 10px; z-index: 5;
  display: flex; border: 2px solid var(--ink); background: var(--surface);
  box-shadow: 0 2px 0 rgba(0,0,0,0.12);
}
.seg3 button { height: 44px; padding: 0 13px; font: 700 17px/1 var(--f-sans); border-right: 2px solid var(--ink); }
.seg3 button:last-child { border-right: 0; }
.seg3 button.on { background: var(--ink); color: var(--on-ink); }
/* strip scale: − | length on screen | +  (fixed steps, not a continuous zoom) */
.zoom {
  position: absolute; right: 8px; bottom: 10px; z-index: 5;
  display: flex; align-items: stretch; height: 44px;
  border: 2px solid var(--ink); background: var(--surface);
  box-shadow: 0 2px 0 rgba(0,0,0,0.12);
}
.zoom button { width: 42px; font: 700 26px/1 var(--f-sans); display: flex; align-items: center; justify-content: center; }
.zoom button:first-child { border-right: 2px solid var(--ink); }
.zoom button:last-child { border-left: 2px solid var(--ink); }
.zoom button:disabled { color: var(--rule); cursor: default; }
.zoom span { min-width: 64px; padding: 0 6px; display: flex; align-items: center; justify-content: center; font: 700 16px/1 var(--f-cond); white-space: nowrap; }
/* zoomed out: say so, in ink, so the scale is never mistaken for the walking one */
.zoom.out span { background: var(--ink); color: var(--on-ink); }
.recentre {
  position: absolute; right: 8px; bottom: 62px; z-index: 5;
  height: 44px; padding: 0 12px; border: 2px solid var(--ink); background: var(--hivis); color: var(--on-hivis);
  font: 700 15px/1 var(--f-sans); display: flex; align-items: center; gap: 6px;
}

/* ---------------------------------------------------------- at-you bar */
.atyou {
  flex: none; position: relative;
  display: grid; grid-template-columns: 1fr auto;
  border-top: 3px solid var(--ink);
  background: var(--surface);
  min-height: 72px;
}
.atyou::before {
  content: ''; position: absolute; top: 5px; left: 50%; width: 48px; height: 5px; margin-left: -24px;
  background: var(--ink-3); border-radius: 3px; opacity: 0.8;
}
.atyou .main { display: flex; align-items: center; gap: 12px; padding: 14px 10px 10px 12px; text-align: left; min-width: 0; }
.atyou .main .txt { min-width: 0; }
.atyou .kick { font: 700 12px/1 var(--f-sans); letter-spacing: 0.1em; color: var(--ink-3); text-transform: uppercase; }
.atyou .name { display: flex; align-items: center; gap: 8px; font: 700 21px/1.15 var(--f-sans); margin: 4px 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atyou .name span { overflow: hidden; text-overflow: ellipsis; }
.atyou .where { display: flex; align-items: center; gap: 8px; font: 500 16px/1 var(--f-mono); white-space: nowrap; }
.atyou .more { width: 88px; border-left: 2px solid var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 4px; background: var(--paper); }
.atyou .more .n { font: 700 30px/1 var(--f-cond); }
.atyou .more .w { font: 600 13px/1.15 var(--f-sans); text-align: center; color: var(--ink-2); }
.atyou.poor { background: var(--hivis); color: var(--on-hivis); }
.atyou.poor .main .kick, .atyou.poor .where { color: var(--on-hivis); }
.atyou.poor .more { background: var(--surface); color: var(--ink); width: 132px; }
.atyou.poor .poor-t { font: 700 20px/1.2 var(--f-sans); }
.atyou.poor .poor-s { font: 500 15px/1.3 var(--f-sans); margin-top: 3px; }
.atyou.rev { background: var(--rev-bg); border-top-color: var(--rev); }
.atyou.rev .more { background: var(--rev-bg); color: var(--rev); border-left-color: var(--rev); width: 104px; }
.atyou.absent .more { width: 108px; }
.atyou .progress { position: absolute; left: 0; bottom: -3px; height: 3px; background: var(--ink); }

/* ----------------------------------------------------------- bottom nav */
.nav {
  flex: none; display: grid; grid-template-columns: 1fr 1fr 1.35fr;
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  border-top: 3px solid var(--ink); background: var(--surface);
}
.nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-3); font: 600 15px/1 var(--f-sans); position: relative; }
.nav button svg { width: 24px; height: 24px; }
.nav button.on { color: var(--ink); font-weight: 700; }
.nav button.on::before { content: ''; position: absolute; top: -3px; left: 0; right: 0; height: 5px; background: var(--ink); }

/* ---------------------------------------------------------- chips etc. */
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; font: 700 13px/1 var(--f-sans); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; flex: none; }
.chip.exact { background: var(--ink); color: var(--on-ink); }
.chip.derived { border: 1.5px dotted var(--ink); text-transform: none; letter-spacing: 0; }
.chip.label { border: 1.5px dashed var(--ink-3); color: var(--ink-2); }
.chip.measured { background: var(--hivis); color: var(--on-hivis); border: 1.5px solid var(--ink); }
.chip.seen { background: var(--hivis); color: var(--on-hivis); border: 2px solid var(--ink); height: 26px; }
.chip.claim { border: 2px solid var(--ink); height: 26px; }
.chip.approved { background: var(--ink); color: var(--on-ink); height: 26px; padding: 0 10px; }
.chip.rejected { border: 2px solid var(--defect); color: var(--defect); height: 26px; padding: 0 10px; }
.chip.comments { border: 2px solid var(--ink); height: 26px; padding: 0 10px; }
.chip.pending { border: 2px dashed var(--ink-2); height: 26px; padding: 0 10px; }
.chip.rev { background: var(--rev); color: #fff; }
.chip.defect { background: var(--defect); color: #fff; }
.chip.lvl { border: 2px solid var(--ink); height: 26px; }

.badge {
  flex: none; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font: 700 22px/1 var(--f-cond);
  background: var(--ink); color: var(--on-ink);
}
.badge.c { background: transparent; color: var(--ink); border: 2.5px solid var(--ink); }
.badge.lg { width: 52px; height: 52px; font-size: 28px; }
.badge.xl { width: 52px; height: 52px; font-size: 30px; }
.badge svg { width: 11px; height: 14px; }
.badge .arr { display: flex; align-items: center; gap: 1px; }
.ticon { flex: none; width: 26px; height: 18px; color: var(--ink); }

.lbl-caps { font: 700 13px/1 var(--f-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.section-h { display: flex; align-items: center; justify-content: space-between; padding: 22px 16px 12px; }

/* stage meter */
.meter { display: flex; gap: 3px; }
.meter i { width: 18px; height: 16px; border: 1.5px solid var(--ink); display: block; }
.meter i.s { background: var(--ink); }
.meter i.h { background: var(--hatch); }
.meter i.z { background: var(--hazard); }
.meter i.n { border-style: dashed; border-color: var(--ink-3); }
.meter.lg { gap: 6px; }
.meter.lg i { flex: 1; width: auto; height: 38px; border-width: 2px; }
.meter.md i { width: 22px; height: 18px; }

/* ------------------------------------------------------------- buttons */
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 16px; border: 2.5px solid var(--ink); background: var(--surface); font: 700 20px/1.1 var(--f-sans); width: 100%; }
.btn svg { width: 24px; height: 24px; }
.btn.primary { min-height: 72px; background: var(--ink); color: var(--on-ink); font: 700 clamp(24px, 7.4vw, 30px)/1 var(--f-cond); white-space: nowrap; justify-content: space-between; padding: 0 28px 0 28px; }
.btn.primary.center { justify-content: center; }
.btn.defect { color: var(--defect); border-color: var(--defect); }
.btn.defect-solid { background: var(--defect); border-color: var(--defect); color: #fff; min-height: 72px; font: 700 30px/1 var(--f-cond); }
.btn.rev { background: var(--rev); border-color: var(--rev); color: #fff; min-height: 72px; font: 700 30px/1 var(--f-cond); }
.btn.ghost { border-style: dashed; }
.btn.hivis { background: var(--hivis); color: var(--on-hivis); }
.btn:disabled { opacity: 0.4; }
.row-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.row-btns.two { grid-template-columns: 1fr 1fr; }
.row-btns .btn { padding: 0 6px; gap: 6px; min-width: 0; font-size: 18px; }

/* ------------------------------------------------------------- sheets */
/* Each overlay is its own layer, so whatever opened last is on top. */
.ov { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.ov > * { pointer-events: auto; }
.scrim { position: absolute; inset: 0; background: var(--scrim); z-index: 20; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 21;
  background: var(--paper); border-top: 3px solid var(--ink);
  max-height: 78%; display: flex; flex-direction: column;
  animation: up 0.18s ease-out;
}
.sheet.tall { max-height: 88%; }
.sheet.rev { border-top-color: var(--rev); }
.sheet .grab { flex: none; height: 22px; display: flex; justify-content: center; align-items: center; }
.sheet .grab::after { content: ''; width: 48px; height: 5px; border-radius: 3px; background: var(--ink-3); }
.sheet .body { overflow-y: auto; padding: 0 16px 16px; }
@keyframes up { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }

.full { position: absolute; inset: 0; z-index: 30; background: var(--paper); display: flex; flex-direction: column; animation: up 0.16s ease-out; }
.topbar { flex: none; height: 60px; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; border-bottom: 3px solid var(--ink); background: var(--surface); }
.topbar .t { text-align: center; font: 700 30px/1 var(--f-cond); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .t.caps { font: 700 14px/1 var(--f-sans); letter-spacing: 0.12em; text-transform: uppercase; }
.topbar .ib { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.topbar .ib svg { width: 28px; height: 28px; }
.topbar .right { padding-right: 10px; min-width: 56px; display: flex; justify-content: flex-end; }
.topbar .tag { border: 2px solid var(--ink); padding: 4px 8px; font: 700 12px/1 var(--f-sans); letter-spacing: 0.08em; display: flex; gap: 5px; align-items: center; }

/* feature summary head */
.fhead { display: flex; gap: 12px; align-items: flex-start; }
.fhead .t1 { display: flex; align-items: center; gap: 7px; font: 700 21px/1.15 var(--f-sans); }
.fhead .t2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; font: 500 17px/1 var(--f-mono); }
.fhead .t2 .rel { font: 500 16px/1 var(--f-sans); color: var(--ink-3); }
.len { font-weight: 700; white-space: nowrap; }

/* what-is-built cards */
.built { border: 3px solid var(--ink); background: var(--surface); }
.built .part { padding: 16px 14px 14px; }
.built .part + .part { border-top: 2px solid var(--ink); }
.built .toprow { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.built .when { font: 500 14px/1.2 var(--f-mono); color: var(--ink-3); text-align: right; }
.built .stage { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; gap: 10px; }
.built .stage b { font: 700 32px/1 var(--f-cond); }
.built .stage span { font: 600 15px/1.2 var(--f-sans); color: var(--ink-2); text-align: right; }
.built .meter { margin-top: 12px; }
.built .warn { background: var(--defect-bg); color: var(--defect); padding: 12px 14px; border-top: 2px solid var(--ink); display: flex; gap: 12px; align-items: flex-start; font: 700 18px/1.2 var(--f-sans); }
.built .warn small { display: block; color: var(--ink); font: 600 15px/1.3 var(--f-sans); margin-top: 3px; }
.built .warn svg { flex: none; width: 26px; height: 26px; margin-top: 2px; }
.built.empty { border: 3px dashed var(--ink-3); background: transparent; padding: 18px; }
.built.empty b { font: 700 30px/1.05 var(--f-cond); display: block; margin-top: 12px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pair .built .part { padding: 12px; }
.pair .built .stage { margin-top: 10px; }
.pair .built .stage b { font: 700 19px/1.2 var(--f-sans); }
.pair .meter i { flex: 1; width: auto; height: 20px; }

/* stage option buttons */
.opt { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 72px; padding: 10px 18px; border: 2.5px solid var(--ink); background: var(--surface); text-align: left; margin-bottom: 10px; }
.opt b { display: block; font: 700 30px/1 var(--f-cond); }
.opt small { display: block; font: 500 16px/1.2 var(--f-sans); color: var(--ink-3); margin-top: 4px; }
.opt.primary { background: var(--ink); color: var(--on-ink); }
.opt.primary small { color: var(--on-ink); opacity: 0.85; }
.opt svg { width: 28px; height: 28px; flex: none; }
.opt.cur { border-color: var(--ink); }
.ladder { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; }
.ladder .opt { min-height: 56px; margin: 0; }
.ladder .opt b { font-size: 24px; }

/* list rows */
.frow { display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 12px; min-height: 72px; border-bottom: 1px solid var(--rule); background: var(--surface); width: 100%; text-align: left; }
.frow .mid { flex: 1; min-width: 0; }
.frow .t1 { display: flex; align-items: center; gap: 8px; font: 600 19px/1.15 var(--f-sans); white-space: nowrap; overflow: hidden; }
.frow .t1 span { overflow: hidden; text-overflow: ellipsis; }
.frow .t2 { display: flex; align-items: center; gap: 7px; font: 500 15.5px/1.2 var(--f-mono); margin-top: 5px; flex-wrap: wrap; color: var(--ink-2); }
.frow .t3 { font: 500 15px/1.2 var(--f-sans); color: var(--ink-3); margin-top: 5px; }
.frow .right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.frow .right .meter { gap: 2px; }
.frow .right .meter i { width: 13px; height: 15px; }
.frow .t2 .nw, .fhead .t2 .nw { white-space: nowrap; }
.frow .right .st { font: 700 16px/1 var(--f-sans); }
.frow .right .st.never { font-style: italic; color: var(--ink-3); font-weight: 600; }
.frow .right .st.diff { color: var(--defect); }
.frow .time { flex: none; width: 50px; font: 600 15px/1 var(--f-mono); }
.frow.hl { animation: flash 1.2s ease-out; }
@keyframes flash { 0% { background: var(--hivis); } 100% { background: var(--surface); } }

/* toast */
.toast {
  position: absolute; left: 10px; right: 10px; z-index: 50;
  bottom: calc(var(--nav-h) + var(--safe-b) + 84px);
  background: var(--ink); color: var(--on-ink);
  display: flex; align-items: center; gap: 12px; padding: 14px 14px 16px;
  animation: up 0.18s ease-out; box-shadow: 0 6px 18px rgba(0,0,0,0.25); overflow: hidden;
}
.toast .tt { flex: 1; min-width: 0; }
.toast .tt b { display: block; font: 700 18px/1.2 var(--f-sans); }
.toast .tt span { font: 500 15px/1.3 var(--f-sans); opacity: 0.85; }
.toast svg { width: 26px; height: 26px; flex: none; }
.toast .undo { flex: none; height: 48px; padding: 0 16px; background: var(--hivis); color: #121311; font: 700 18px/1 var(--f-sans); text-transform: uppercase; letter-spacing: 0.06em; }
.toast .bar { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--hivis); animation: deplete linear forwards; }
@keyframes deplete { from { width: 100%; } to { width: 0; } }

/* forms */
.fld { margin-bottom: 14px; }
.fld > label { display: block; font: 600 16px/1 var(--f-sans); color: var(--ink-2); margin-bottom: 7px; }
.inp { width: 100%; height: 56px; padding: 0 16px; border: 2.5px solid var(--ink); background: var(--surface); font: 500 22px/1 var(--f-mono); border-radius: 0; }
textarea.inp { height: auto; min-height: 96px; padding: 14px 16px; font: 500 18px/1.4 var(--f-sans); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pick { min-height: 56px; border: 2.5px solid var(--ink); background: var(--surface); padding: 8px 14px; font: 700 19px/1.15 var(--f-sans); text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pick.on { background: var(--ink); color: var(--on-ink); }
.pick.on.red { background: var(--defect); border-color: var(--defect); color: #fff; }
.pick.on.blue { background: var(--rev); border-color: var(--rev); color: #fff; }
.pick svg { width: 22px; height: 22px; flex: none; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.picks .pick { flex: none; }
.segm { display: grid; border: 2.5px solid var(--ink); }
.segm button { min-height: 56px; font: 700 18px/1.15 var(--f-sans); border-right: 2px solid var(--ink); background: var(--surface); padding: 4px 6px; }
.segm button:last-child { border-right: 0; }
.segm button.on { background: var(--ink); color: var(--on-ink); }
.segm.blue { border-color: var(--rev); }
.segm.blue button { border-right-color: var(--rev); }
.segm.blue button.on { background: var(--rev); color: #fff; }

.photos { display: flex; gap: 10px; flex-wrap: wrap; }
.photo { width: 104px; }
.photo .img { width: 104px; height: 88px; border: 2px solid var(--ink); background: var(--no-data), var(--lane-toe); background-size: cover; background-position: center; position: relative; }
.photo .img span { position: absolute; left: 4px; bottom: 4px; background: var(--surface); padding: 2px 5px; font: 700 13px/1 var(--f-sans); }
.photo .cap { font: 500 12.5px/1.45 var(--f-mono); color: var(--ink-3); margin-top: 4px; }
.photo-add { width: 104px; height: 88px; border: 2.5px solid var(--ink); background: var(--hivis); color: var(--on-hivis); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 700 16px/1 var(--f-sans); }
.photo-add svg { width: 28px; height: 28px; }

.note { font: 500 15px/1.4 var(--f-sans); color: var(--ink-3); }
.lock-note { display: flex; gap: 12px; align-items: flex-start; font: 500 17px/1.45 var(--f-sans); color: var(--ink-2); padding: 16px; }
.lock-note svg { flex: none; width: 24px; height: 24px; margin-top: 2px; }

/* read-only drawing panel */
.drawing { border: 2px solid var(--ink); padding: 4px; margin: 0 16px; background: var(--paper); }
.drawing > div { border: 2px solid var(--ink); padding: 14px 16px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; }
.kv > div { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.kv .k { font: 500 17px/1.2 var(--f-sans); color: var(--ink-3); }
.kv .v { font: 500 17px/1.3 var(--f-mono); text-align: right; }
.kv .v small { display: block; font: 600 15px/1.3 var(--f-sans); color: var(--ink-2); margin-top: 4px; }

/* IR list */
.ir { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--rule); background: var(--surface); }
.ir .d { font: 500 15px/1.3 var(--f-mono); color: var(--ink-2); }
.ir .n { font: 600 14px/1 var(--f-mono); color: var(--ink-2); }
.ir .s { font: 600 17px/1.2 var(--f-sans); margin-top: 3px; }
.gap { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--rule); background: var(--paper); }
.gap i { width: 12px; align-self: stretch; background: var(--hazard); border: 1.5px solid var(--ink); }
.gap b { font: 700 18px/1.2 var(--f-sans); display: block; }
.gap span { font: 500 15px/1.3 var(--f-mono); color: var(--ink-3); }

/* banners */
.banner { background: var(--defect); color: #fff; display: flex; gap: 12px; padding: 16px; align-items: flex-start; }
.banner b { display: block; font: 700 21px/1.2 var(--f-sans); }
.banner span { font: 500 15px/1.4 var(--f-mono); }
.banner svg { flex: none; width: 30px; height: 30px; }

/* doors */
.door { border: 3px solid var(--ink); margin-bottom: 14px; }
.door .dh { background: var(--hivis); color: var(--on-hivis); padding: 14px 16px; border-bottom: 2px solid var(--ink); }
.door .dh b { display: block; font: 700 16px/1.2 var(--f-sans); letter-spacing: 0.08em; text-transform: uppercase; }
.door .dh span { font: 600 16px/1.3 var(--f-sans); }
.door.blue { border-color: var(--rev); }
.door.blue .dh { background: var(--rev); color: #fff; border-bottom-color: var(--rev); }
.door button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 0 16px; border-top: 1px solid var(--rule); background: var(--surface); font: 600 19px/1.2 var(--f-sans); text-align: left; }
.door button:first-of-type { border-top: 0; }
.door button svg { width: 26px; height: 26px; flex: none; }
.door button .chev { margin-left: auto; }

/* toggles */
.tog { width: 58px; height: 34px; border: 2.5px solid var(--ink); position: relative; flex: none; background: var(--surface); }
.tog::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: var(--ink); transition: left 0.12s; }
.tog.on { background: var(--ink); }
.tog.on::after { left: 27px; background: var(--hivis); }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--rule); background: var(--surface); width: 100%; text-align: left; }
.setrow b { display: block; font: 600 19px/1.2 var(--f-sans); }
.setrow small { font: 500 15px/1.3 var(--f-sans); color: var(--ink-3); }
.radio { width: 30px; height: 30px; border: 3px solid var(--ink); border-radius: 50%; flex: none; position: relative; }
.radio.on::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--ink); }
.setrow.sel { background: var(--hivis-soft); }

/* keypad */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad button { height: 58px; border: 2.5px solid var(--ink); background: var(--surface); font: 700 30px/1 var(--f-cond); display: flex; align-items: center; justify-content: center; }
.keypad button svg { width: 32px; height: 26px; }
.kp-disp { display: flex; align-items: center; justify-content: space-between; border: 3px solid var(--ink); background: var(--surface); padding: 8px 16px; margin: 10px 0; min-height: 76px; }
.kp-disp .v { font: 700 52px/1 var(--f-cond); display: flex; align-items: baseline; gap: 10px; }
.kp-disp .v small { font: 600 18px/1 var(--f-sans); color: var(--ink-2); }
.kp-disp .v .cur { width: 3px; height: 44px; background: var(--ink); animation: blink 1s steps(2) infinite; align-self: center; }
.kp-disp .in { text-align: right; font: 600 15px/1.35 var(--f-sans); color: var(--ink-2); }
.kp-disp .in.bad { color: var(--defect); }
@keyframes blink { 50% { opacity: 0; } }

/* project list */
.proj-line { position: relative; }
.proj-sub { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 8px; min-height: 76px; padding: 8px 16px 8px 18px; width: 100%; text-align: left; position: relative; }
.proj-sub .dot { width: 36px; height: 36px; border-radius: 50%; border: 3px dashed var(--ink-3); background: var(--paper); z-index: 1; justify-self: center; }
.proj-sub.has .dot { border: 4px solid var(--ink); background: var(--surface); }
.proj-sub.cur { background: var(--hivis-soft); }
.proj-sub.cur .dot { background: var(--hivis); border-color: var(--ink); }
.proj-sub .code { font: 700 32px/1 var(--f-cond); margin-right: 8px; }
.proj-sub .nm { font: 600 20px/1.1 var(--f-sans); }
.proj-sub .rng { font: 500 15px/1.2 var(--f-mono); color: var(--ink-3); margin-top: 6px; }
.proj-sub.empty .code, .proj-sub.empty .nm { color: var(--ink-3); }
.proj-sub .st { font: italic 600 15px/1.3 var(--f-sans); color: var(--ink-3); text-align: right; }
.proj-rail { position: absolute; left: 42px; top: 38px; bottom: 38px; width: 5px; background: var(--ink); }
.pill-on { background: var(--ink); color: var(--on-ink); padding: 8px 12px; font: 700 15px/1 var(--f-sans); letter-spacing: 0.06em; }
.pill-dl { border: 2.5px solid var(--ink); padding: 10px 12px; font: 700 17px/1 var(--f-sans); display: flex; gap: 6px; align-items: center; background: var(--surface); }

/* section screen */
.sec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 16px 16px 14px; border-bottom: 3px solid var(--ink); }
.sec-head h1 { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font: 700 44px/1 var(--f-cond); }
.sec-head h1 small { font: 700 20px/1 var(--f-sans); }
.sec-head .rng { font: 500 15px/1.4 var(--f-mono); color: var(--ink-2); margin-top: 6px; }
.chips-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; border-bottom: 1px solid var(--rule); scrollbar-width: none; }
.chips-scroll::-webkit-scrollbar { display: none; }
.chips-scroll button { flex: none; height: 44px; padding: 0 14px; border: 2.5px solid var(--ink); font: 700 18px/1 var(--f-sans); display: flex; align-items: center; gap: 8px; background: var(--surface); white-space: nowrap; }
.chips-scroll button small { font: 500 14px/1 var(--f-mono); }
.chips-scroll button.on { background: var(--ink); color: var(--on-ink); }
.big-stat { font: 700 42px/1.05 var(--f-cond); margin: 0; }
.stack { display: flex; height: 40px; border: 2px solid var(--ink); margin: 14px 0; }
.stack i { display: block; height: 100%; }
.legend { display: grid; gap: 8px; }
.legend div { display: flex; align-items: center; gap: 12px; font: 600 18px/1.2 var(--f-sans); }
.legend i { width: 22px; height: 22px; border: 2px solid var(--ink); flex: none; }
.legend b { font: 600 18px/1 var(--f-mono); width: 30px; }
.hist { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; height: 150px; margin-top: 10px; }
.hist div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; font: 600 16px/1 var(--f-sans); }
.hist i { width: 100%; background: var(--part); border: 2px solid var(--ink); }
.hist small { font: 600 13.5px/1.1 var(--f-sans); color: var(--ink-2); text-align: center; }
.ribbon { padding: 0 16px 8px; }
.ribbon .r { display: grid; grid-template-columns: 66px 1fr; align-items: center; height: 42px; border-bottom: 1px solid var(--rule); width: 100%; text-align: left; }
.ribbon .r .k { font: 600 14px/1 var(--f-mono); color: var(--ink-2); text-align: right; padding-right: 10px; }
.ribbon .r .marks { position: relative; height: 100%; }
.ribbon .r .marks i { position: absolute; top: 7px; bottom: 7px; width: 4px; margin-left: -2px; background: var(--ink); }
.ribbon .r .marks i.none { background: var(--surface); border: 1.5px solid var(--ink); width: 6px; margin-left: -3px; }
.ribbon .r .marks i.moving { background: var(--part); border: 1.5px solid var(--ink); width: 6px; margin-left: -3px; }
.ribbon .r .marks i.stalled { background: var(--hazard); border: 1.5px solid var(--ink); width: 7px; margin-left: -3px; }
.ribbon .r .marks .you { position: absolute; top: 3px; bottom: 3px; width: 11px; margin-left: -5px; background: var(--hivis); border: 2px solid var(--ink); z-index: 1; }
.ribbon .r .marks .outside { position: absolute; top: 7px; bottom: 7px; background: var(--no-data); opacity: 0.8; }

/* day */
.card { border: 3px solid var(--ink); background: var(--surface); }
.card .ci { display: flex; gap: 14px; padding: 16px; align-items: flex-start; }
.card .ci + .ci { border-top: 2px solid var(--ink); }
.card .ci svg { flex: none; width: 30px; height: 30px; margin-top: 2px; }
.card .ci b { display: block; font: 700 24px/1.15 var(--f-sans); }
.card .ci span { font: 500 16.5px/1.45 var(--f-sans); color: var(--ink-2); }
.card.red { border-color: var(--defect); }
.card.red .ci b { color: var(--defect); }
.barcode { height: 60px; border: 1.5px solid var(--rule); background: var(--paper); position: relative; margin: 12px 0; overflow: hidden; }
.barcode i { position: absolute; top: 6px; bottom: 6px; width: 4px; margin-left: -2px; }
.barcode i.r { background: var(--ink); }
.barcode i.u { border: 1.5px solid var(--ink); background: var(--surface); width: 5px; }

.pad { padding: 0 16px; }
.pad-b { padding-bottom: 24px; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }

/* history */
.tl { position: relative; padding: 8px 16px 8px 16px; }
.tl::before { content: ''; position: absolute; left: 122px; top: 8px; bottom: 8px; width: 2px; background: var(--rule); }
.tl .e { display: grid; grid-template-columns: 94px 28px 1fr; gap: 6px; padding: 12px 0; }
.tl .e .d { font: 500 15px/1.35 var(--f-mono); color: var(--ink-2); }
.tl .e .dot { width: 22px; height: 22px; border: 2.5px solid var(--ink); background: var(--surface); margin-top: 2px; position: relative; z-index: 1; }
.tl .e .dot.seen { background: var(--hivis); }
.tl .e .dot.q { border-color: var(--defect); background: var(--defect-bg); }
.tl .e .dot.d { border-color: var(--rev); background: var(--rev-bg); }
.tl .e .dot.ir { background: var(--hatch), var(--surface); }
.tl .e > * { min-width: 0; }
.tl .e .c { border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
.tl .e .c .h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font: 700 19px/1.2 var(--f-sans); }
.tl .e .c .b { font: 500 16px/1.4 var(--f-sans); margin-top: 6px; }
.tl .e .c .m { font: 500 14.5px/1.4 var(--f-mono); color: var(--ink-3); margin-top: 6px; }
.strike { text-decoration: line-through; color: var(--ink-3); }

/* map */
.mapbox { position: absolute; inset: 0; background: var(--lane-toe); }
.mapbox .leaflet-container { background: var(--lane-toe); font-family: var(--f-sans); }
.mapbox.washed .leaflet-tile-pane { opacity: 0.5; filter: saturate(0.6); }
.mapbox.lines .leaflet-tile-pane { display: none; }
.map-date { position: absolute; top: 10px; left: 10px; z-index: 500; background: var(--surface); border: 2px solid var(--ink); padding: 6px 10px; font: 700 13px/1 var(--f-sans); letter-spacing: 0.08em; display: flex; gap: 6px; align-items: center; }
.map-tools { position: absolute; top: 10px; right: 10px; z-index: 500; display: flex; flex-direction: column; gap: 8px; }
.map-tools button { width: 52px; height: 52px; border: 2.5px solid var(--ink); background: var(--surface); display: flex; align-items: center; justify-content: center; font: 700 13px/1 var(--f-sans); flex-direction: column; }
.map-tools button.hv { background: var(--hivis); color: var(--on-hivis); }
.map-tools svg { width: 26px; height: 26px; }
.map-lbl { background: var(--surface); border: 2px solid var(--ink); padding: 2px 5px; font: 500 13px/1 var(--f-mono); white-space: nowrap; color: #121311; }
.map-lbl.exact { background: #121311; color: #fff; }
.map-note { position: absolute; right: 8px; bottom: 64px; z-index: 500; background: var(--surface); padding: 4px 8px; font: 500 12.5px/1 var(--f-sans); color: var(--ink-3); }

.empty-state { padding: 40px 24px; text-align: center; color: var(--ink-2); }
.empty-state b { display: block; font: 700 30px/1.1 var(--f-cond); color: var(--ink); margin-bottom: 8px; }

.linkbtn { color: var(--rev); text-decoration: underline; font: 700 18px/1 var(--f-sans); }
a { color: inherit; }

/* Type 9: progress by completed length */
.rg-sum { display: flex; justify-content: space-between; align-items: baseline; font: 500 20px/1.2 var(--f-sans); }
.rg-sum b { font: 700 28px/1.1 var(--f-cond); }
.rgbar { position: relative; height: 20px; border: 2px solid var(--ink); background: var(--surface); margin: 8px 0 10px; }
.rgbar i { position: absolute; top: 0; bottom: 0; background: var(--ink); }
.rg-list { font: 500 15px/1.5 var(--f-mono); color: var(--ink-2); margin-bottom: 12px; }
.rg-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.rg-row { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 8px; align-items: end; margin: 8px 0 12px; }
.rg-row label { display: flex; flex-direction: column; gap: 4px; font: 600 14px/1 var(--f-sans); color: var(--ink-2); }
.rg-row input { height: 52px; border: 2px solid var(--ink); background: var(--surface); padding: 0 10px; font: 500 20px/1 var(--f-mono); width: 100%; min-width: 0; }
.rg-row .here { min-height: 52px; width: auto; padding: 0 12px; font-size: 16px; }

/* Progress tab */
.pstats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.pstat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.pstat .lbl-caps { flex-basis: 100%; }
.pstat b { font: 700 24px/1.1 var(--f-cond); }
.pstat .pc { font: 600 16px/1 var(--f-sans); color: var(--ink-2); }
.pstat .pbar { flex-basis: 100%; height: 10px; border: 2px solid var(--ink); background: var(--surface); margin-top: 4px; }
.pstat .pbar i { display: block; height: 100%; background: var(--ink); }
.povr { margin: 14px 0 8px; padding: 14px; border: 3px solid var(--ink); background: var(--surface); }
.povr .lbl-caps { margin-bottom: 10px; }
.psub { display: block; width: 100%; text-align: left; padding: 12px 14px; margin-top: 8px; border: 2px solid var(--rule); background: var(--bg, transparent); }
.psub.cur { border: 3px solid var(--ink); }
.psub .who { display: flex; gap: 10px; align-items: baseline; font: 500 17px/1.2 var(--f-sans); margin-bottom: 8px; }
.psub .who b { font: 700 20px/1 var(--f-cond); letter-spacing: 0.04em; }
.tchips button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; }
.tchips button small { font: 600 14px/1.1 var(--f-mono); opacity: 0.9; }
@media (max-width: 420px) { .pstats { grid-template-columns: 1fr; } .psub .pstats { grid-template-columns: 1fr 1fr; } .psub .pstat b { font-size: 19px; } }