:root, html[data-theme="ksi"] {
  --green: #5b9330;
  --green-hover: #457026;
  --green-dark: #304c19;
  --green-light: #dde8cf;
  --bg: #121512;
  --surface: #1c201c;
  --surface-2: #242a24;
  --line: #2f362f;
  --text: #f2f5f0;
  --muted: #a3aca0;
  --danger: #e2564a;
  --warn: #d8a13a;
  --r: 14px;
  --pad: 18px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Theme: Midnight (cool blue-slate dark) ---- */
html[data-theme="midnight"] {
  --green: #4a8fd6;
  --green-hover: #3a76b8;
  --green-dark: #1f4a7a;
  --green-light: #cee0f2;
  --bg: #0f141c;
  --surface: #171e2a;
  --surface-2: #212a3a;
  --line: #2c3646;
  --text: #ecf1fa;
  --muted: #94a3b8;
  --danger: #e2564a;
  --warn: #d8a13a;
}

/* ---- Theme: Daybreak (light mode for glare / bright cabs) ---- */
html[data-theme="daybreak"] {
  --green: #4a7f22;
  --green-hover: #3d6a1c;
  --green-dark: #2b4d13;
  --green-light: #dde8cf;
  --bg: #f6f5ef;
  --surface: #ffffff;
  --surface-2: #ecebe3;
  --line: #d5d3c6;
  --text: #1c1f19;
  --muted: #5b6055;
  --danger: #b8342a;
  --warn: #a67420;
}

/* ---- Theme: High Contrast (accessibility, safety-yellow) ---- */
html[data-theme="high-contrast"] {
  --green: #ffe500;
  --green-hover: #ffcc00;
  --green-dark: #b39900;
  --green-light: #fff9b0;
  --bg: #000000;
  --surface: #0a0a0a;
  --surface-2: #1a1a1a;
  --line: #ffe500;
  --text: #ffffff;
  --muted: #d4d4d4;
  --danger: #ff5c5c;
  --warn: #ffb84d;
}

/* ---- Theme: Amber (warm dark, equipment-shop vibe) ---- */
html[data-theme="amber"] {
  --green: #e0872b;
  --green-hover: #c6741f;
  --green-dark: #7a4712;
  --green-light: #f5d9b6;
  --bg: #16110c;
  --surface: #201a13;
  --surface-2: #2b241a;
  --line: #3a2f22;
  --text: #f5eddf;
  --muted: #a89880;
  --danger: #e2564a;
  --warn: #ffb84d;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font, 'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif);
  /* font-size controlled by html[data-textsize="…"] rules below */
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior-y: contain;
}

.tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) var(--pad) 12px;
  background: rgba(18, 21, 18, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar .brand { height: 38px; width: auto; display: block; }
.wordmark {
  margin-left: auto;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--muted);
  /* Suppress iOS text-selection / callout on press-and-hold */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
/* Settings gear — sits at the right end of the topbar, after the wordmark.
   .wordmark carries margin-left:auto, which pushes both it and the gear to the
   right edge as a pair, so no extra layout work is needed here.
   44px is the minimum comfortable touch target for gloved hands on a truck
   seat, which is the real operating condition for this app. */
.topbar-gear {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-right: -10px;   /* pull the optical edge back in line with the pad */
  padding: 0;
  background: none; border: 0; border-radius: 12px;
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
.topbar-gear:active { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.topbar-gear[hidden] { display: none; }

/* Entra sign-in chip. Sits to the LEFT of the settings gear in the topbar.
   Small and quiet on purpose — the app has to keep working via the PIN
   paths until Commit 9 lands, so this must not draw the eye or imply that
   crew MUST sign in to use the app. */
.entra-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-right: 8px;
  max-width: 40vw;
  overflow: hidden;
}
.entra-chip[hidden] { display: none; }
.entra-chip .entra-signin,
.entra-chip .entra-signout {
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.entra-chip .entra-signin:hover,
.entra-chip .entra-signout:hover { color: var(--text); }
.entra-chip .entra-me {
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 30vw;
}
.entra-chip .entra-me[hidden] { display: none; }
.entra-chip .entra-signout[hidden] { display: none; }

/* Padlock on the Admin home tile. Admin is shown locked rather than hidden:
   hiding it makes the app look broken and leaves a manager on a crew phone
   with no way in. */
.tile-lock { font-size: 0.78em; margin-left: 5px; opacity: 0.75; vertical-align: 1px; }

/* Restore is the one destructive screen in Admin, so it gets a real warning
   band rather than a quiet hint. */
.restore-warn {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(214, 94, 84, 0.45);
  border-radius: 10px;
  background: rgba(214, 94, 84, 0.10);
}
.backup-restore-note { margin-top: 18px; }

.back {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-left: -8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); cursor: pointer;
}
.back:active { background: var(--surface-2); }

.offline-badge {
  position: sticky; top: 0; z-index: 25;
  margin: 0; padding: 7px var(--pad);
  background: var(--warn); color: #201a06;
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-align: center;
}

/* ---------- screens ---------- */
main { max-width: 620px; margin: 0 auto; }
.screen { display: none; padding: 20px var(--pad) 120px; }
.screen.active { display: block; animation: slide 0.26s var(--ease); }
@keyframes slide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen.active { animation: none; } }

.screen-title { font-size: 26px; font-weight: 900; line-height: 1.15; margin: 4px 0 6px; letter-spacing: -0.01em; }
.hint { color: var(--muted); font-size: 15px; margin: 0 0 20px; }

/* ---------- tiles ---------- */
.tile {
  display: flex; align-items: center; gap: 14px; width: 100%;
  margin-bottom: 12px; padding: 18px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  color: var(--text); text-align: left; font: inherit;
}
.tile-active {
  background: linear-gradient(160deg, #23331a, var(--surface) 70%);
  border-color: var(--green); cursor: pointer;
  box-shadow: 0 8px 24px -14px rgba(91, 147, 48, 0.7);
  transition: transform 0.12s var(--ease), background 0.2s var(--ease);
}
.tile-active:active { transform: scale(0.985); background: #263a1c; }
.tile-soon { opacity: 0.5; }
.tile-icon { flex: 0 0 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); color: var(--green); }
.tile-active .tile-icon { background: var(--green); color: #0f1a08; }
.tile-icon svg { width: 26px; height: 26px; }
.tile-body { display: flex; flex-direction: column; min-width: 0; }
.tile-label { font-size: 18px; font-weight: 700; }
.tile-sub { font-size: 14px; color: var(--muted); }
.tile-go { margin-left: auto; color: var(--green); }
.chip {
  margin-left: auto; padding: 4px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--muted);
}

.queue-banner {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px; padding: 14px;
  background: #33290c; border: 1px solid var(--warn); border-radius: var(--r);
}
.queue-banner strong { display: block; font-size: 15px; }
.queue-banner span { font-size: 13px; color: #e6d3a5; }

.home-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--muted);
}
.link { background: none; border: 0; padding: 6px 0; color: var(--green); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 54px; padding: 14px 18px;
  border: 1px solid transparent; border-radius: var(--r);
  font: inherit; font-weight: 700; font-size: 17px; cursor: pointer;
  transition: transform 0.1s var(--ease), background 0.16s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: scale(0.985); }
.btn-primary { background: var(--green); color: #0d1607; }
.btn-primary:hover:not(:disabled) { background: var(--green-hover); }
.btn-primary:disabled { background: var(--surface-2); color: #6d766c; cursor: not-allowed; border-color: var(--line); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface); }
/* Secondary: filled, but neutral. Used on ~20 buttons (home Sync/Exit, modal
   Cancel, Email PDF, the Admin utilities) and was missing from this file
   entirely, so all of them fell back to the browser's default grey button —
   light-on-dark, unrounded, and ignoring every theme. Filled rather than
   transparent so it reads as a real action next to .btn-ghost, which the app
   uses for "less than this". Hover lands on --surface, not --line: the
   high-contrast theme's --line is bright yellow and text on it measures
   1.28:1. */
.btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.btn-secondary:hover:not(:disabled) { background: var(--surface); }
.btn-secondary:disabled { background: var(--surface); color: var(--muted); cursor: not-allowed; }
.btn-xl { min-height: 68px; font-size: 19px; }
.btn-lg { min-height: 60px; font-size: 18px; }
.btn-sm { width: auto; min-height: 44px; font-size: 15px; padding: 10px 16px; flex: 0 0 auto; }
.btn-warn { background: var(--warn); color: #201a06; }

/* Outlook hand-off. Deliberately NOT green: green means "the app sent it".
   This button means "your own mail app is sending it", and the crew should be
   able to tell those two apart at a glance. */
.btn-outlook { background: #0f6cbd; color: #ffffff; }
.btn-outlook:hover:not(:disabled) { background: #0d5aa0; }
.btn-outlook svg { width: 22px; height: 22px; flex: 0 0 auto; }
.btn-outlook.secondary {
  background: transparent; color: #7cb8e8; border-color: #2c4a63;
  min-height: 48px; font-size: 15px; margin-top: 8px;
}
.btn-outlook.secondary:hover { background: rgba(15,108,189,0.12); }
.btn-outlook.secondary svg { width: 18px; height: 18px; }
.handoff-note {
  margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted);
  text-align: center;
}
.btn + .btn { margin-top: 10px; }
:focus-visible { outline: 3px solid var(--green-light); outline-offset: 2px; }

.spinner { display: none; width: 20px; height: 20px; border: 3px solid rgba(0,0,0,0.25); border-top-color: #0d1607; border-radius: 50%; animation: spin 0.7s linear infinite; }
.btn.sending .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- branded loading state (spray arc) --------------------------
   One indeterminate spinner for every network wait in the app: the shield
   sitting inside an orbiting green arc. Same visual language as the startup
   splash, so a crew member recognises "still working" instantly.

   Two variants:
     .ksi-load        block, for an empty panel that is filling in
     .ksi-load-inline compact single line, for a wait inside a populated panel

   Only `transform` is animated, and the whole thing is two SVG circles plus
   the 4 KB shield already precached by the service worker, so there is no
   extra request and nothing to lay out repeatedly.                        */
.ksi-load {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: 22px; padding: 30px 16px;
  color: var(--muted); font-size: 15px; text-align: center;
}
.ksi-load-mark {
  position: relative; width: 64px; height: 64px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
/* 32px is the shield's documented legibility floor. Below it the helmet
   collapses into a green blob -- at the 20px this was originally set to, the
   spray leaf had already disappeared entirely. */
.ksi-load-mark .kl-shield { width: 32px; height: 38px; opacity: 0.9; }
.ksi-load-orbit { position: absolute; inset: 0; transform: rotate(-90deg); }
/* The track is deliberately not var(--line): in High Contrast that token is the
   same yellow as --green, which would hide the arc and kill the sense of
   motion. A faint tint of the body text colour reads correctly in every theme. */
.ksi-load-track { fill: none; stroke: var(--muted); stroke-width: 3; opacity: 0.25; }
.ksi-load-arc {
  fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 56 127; transform-origin: 50% 50%;
  animation: kl-spin 1400ms linear infinite;
}
@keyframes kl-spin { to { transform: rotate(360deg); } }

/* Compact inline: same mark at half size, sitting beside its label. */
.ksi-load-inline {
  flex-direction: row; justify-content: flex-start;
  margin-top: 0; padding: 14px 4px; gap: 10px; text-align: left;
}
/* No shield in the compact variant. A 28px ring cannot hold a 32px shield, and
   the 10px one this used to draw was unreadable mush -- worse for the brand than
   showing no mark at all. The turning green arc alone still reads as "working". */
.ksi-load-inline .ksi-load-mark { width: 28px; height: 28px; }
.ksi-load-inline .ksi-load-mark .kl-shield { display: none; }

/* A spinning arc is exactly what motion-sensitive users asked not to see.
   Hold the arc still as a quarter-ring and let the label carry the message. */
@media (prefers-reduced-motion: reduce) {
  .ksi-load-arc { animation: none; opacity: 0.5; }
}

.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 62%, rgba(18,21,18,0));
}
.sticky-bar { display: flex; flex-direction: column; align-items: center; }
.sticky-bar > * { width: 100%; max-width: 620px; }

/* ---------- capture ---------- */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 22px; padding: 30px 16px;
  border: 1px dashed var(--line); border-radius: var(--r);
  color: var(--muted); font-size: 15px;
}
.empty-mark { color: #4c554a; }

.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-top: 20px; }
.shot { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot .x {
  position: absolute; top: 6px; right: 6px; width: 32px; height: 32px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(10,12,10,0.82); color: #fff; font-size: 17px; line-height: 1; cursor: pointer;
}
.shot .sz { position: absolute; bottom: 0; left: 0; right: 0; padding: 5px 7px; background: rgba(10,12,10,0.78); font-size: 11px; color: var(--green-light); font-variant-numeric: tabular-nums; }
.shots-review .x { display: none; }
.compress-note { margin-top: 12px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- form ---------- */
.field { margin-bottom: 18px; }
.field label, .toggle-row label { display: block; margin-bottom: 7px; font-size: 15px; font-weight: 700; }
.field label em { margin-left: 6px; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--green); text-transform: uppercase; }
input[type="text"], input[type="date"], select {
  width: 100%; min-height: 56px; padding: 12px 14px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  font: inherit; font-size: 17px;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3aca0' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px;
  padding-right: 44px;
}
input:focus, select:focus { border-color: var(--green); outline: none; }
input::placeholder { color: #707a6e; }
.other-input { margin-top: 10px; }
.row .field label { white-space: nowrap; }
/* Not var(--green): #5b9330 on the dark surface measures about 4.45:1, under the
   4.5:1 floor for text this small, and this is the marker that tells a crew a
   field is mandatory — on a phone in direct sun. */
.field label em.star { font-size: 17px; color: #8cc45f; letter-spacing: 0; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.money { position: relative; }
.money span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; }
.money input { padding-left: 32px; font-size: 20px; font-weight: 700; }

.suggests { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.suggests button {
  padding: 9px 13px; min-height: 40px;
  background: var(--surface-2); color: var(--green-light);
  border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.suggests button:active { background: var(--green-dark); }

.optional { margin: 4px 0 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.optional > summary { padding: 17px 16px; font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.optional > summary::-webkit-details-marker { display: none; }
.optional > summary::after { content: '+'; margin-left: auto; font-size: 22px; color: var(--green); }
.optional[open] > summary::after { content: '–'; }
.sum-hint { font-size: 13px; font-weight: 400; color: var(--muted); }
.optional > .field, .optional > .toggle-row { margin: 0 16px 18px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toggle-row label { margin: 0; }
.switch { flex: 0 0 auto; width: 62px; height: 36px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); cursor: pointer; }
.switch span { display: block; width: 28px; height: 28px; border-radius: 50%; background: #7d867b; transition: transform 0.18s var(--ease), background 0.18s var(--ease); }
.switch[aria-checked="true"] { background: var(--green-dark); border-color: var(--green); }
.switch[aria-checked="true"] span { transform: translateX(26px); background: var(--green); }

.form-error.queued { background: #33290c; border-color: var(--warn); color: #f0d69b; }
.form-error {
  display: flex; gap: 8px; margin: 4px 0 18px; padding: 13px 14px;
  background: #331916; border: 1px solid var(--danger); border-radius: 12px;
  color: #ffc9c3; font-size: 15px;
}

/* ---------- review ---------- */
.subject-card { padding: 14px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--green-dark); border-left: 4px solid var(--green); border-radius: 12px; }
.subject-label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.subject-card code { display: block; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13.5px; line-height: 1.55; color: var(--green-light); word-break: break-word; }

.summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sumrow { display: flex; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 16px; }
.sumrow:last-child { border-bottom: 0; }
.sumrow span { flex: 0 0 44%; color: var(--muted); font-size: 15px; }
.sumrow strong { flex: 1; font-weight: 700; word-break: break-word; }
.sumrow.big strong { font-size: 20px; color: var(--green); font-variant-numeric: tabular-nums; }
.dest-note { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
.dest-note strong { color: var(--text); }

/* ---------- success ---------- */
.screen-success { text-align: center; padding-top: 44px; }
.screen-success h1 { font-size: 27px; font-weight: 900; margin: 20px 0 6px; }
.success-sub { color: var(--muted); margin: 0 0 22px; }
.tick { width: 104px; height: 104px; margin: 0 auto; }
.tick svg { width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tick-c { stroke: var(--green); stroke-width: 2.5; opacity: 0.45; }
.tick-p { stroke: var(--green); stroke-width: 4.5; stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw 0.5s 0.1s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* Hand-off destination. Blue, matching the Outlook button, so the crew learn that
   blue = "you are finishing this in your own mail app". */
.to-box {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  max-width: 420px; margin: 0 auto 22px; padding: 16px 18px;
  background: rgba(15,108,189,0.10); border: 1px solid #2c6fa8; border-radius: 12px;
}
.to-box .to-label { font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: #9fd0f5; }
.to-box code {
  font-family: ui-monospace, Menlo, monospace; font-size: 16px; color: #e6f2fb;
  word-break: break-all; line-height: 1.35;
}
.to-box .btn { width: auto; }
/* When the receipt was handed to the crew member's mail app the app cannot prove
   it was sent, so the tick is blue, not the green "confirmed sent" tick. */
.screen-success.handoff .tick-c { stroke: #2c6fa8; }
.screen-success.handoff .tick-p { stroke: #4a9de0; }

.ref-box { display: inline-flex; flex-direction: column; gap: 4px; padding: 12px 20px; margin-bottom: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.ref-box span { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ref-box code { font-family: ui-monospace, Menlo, monospace; font-size: 16px; color: var(--green-light); }
.stack { max-width: 380px; margin: 0 auto; }

/* ---------- recent ---------- */
.rec { display: flex; align-items: center; gap: 12px; padding: 15px 14px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.rec-main { min-width: 0; flex: 1; }
.rec-vendor { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-meta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rec-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.status { padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.status.sent { background: #1f3312; color: #b6e08d; border: 1px solid var(--green-dark); }
.status.failed { background: #331916; color: #ffc9c3; border: 1px solid var(--danger); }
.status.queued { background: #33290c; color: #f0d69b; border: 1px solid var(--warn); }
/* Handed to the crew member's own mail app. The app cannot prove it left the
   phone, so it is styled distinctly from a confirmed SENT. */
.status.handoff { background: #10283b; color: #9fd0f5; border: 1px solid #2c6fa8; }

@media (min-width: 700px) {
  .screen { padding-bottom: 130px; }
  .screen-title { font-size: 30px; }
}

/* ---------- pickers (chip rows) ---------- */
.picker { margin: 0 0 20px; }
.picker-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.picker-head h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.01em; }
.picker-head em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.picker-head em.req { color: var(--green); }
.picker-head em.opt { color: #7d867b; }
.picker-head .clear { margin-left: auto; background: none; border: 0; padding: 4px 0; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  min-height: 48px; padding: 11px 16px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: 15.5px; font-weight: 500; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s var(--ease), background 0.14s var(--ease), border-color 0.14s var(--ease);
}
.pill:active { transform: scale(0.97); }
.pill.on { background: var(--green); border-color: var(--green); color: #0d1607; font-weight: 700; }
.pill.ghost { background: transparent; color: var(--muted); border-style: dashed; }
.pill.ghost.on { background: var(--green-dark); border-style: solid; border-color: var(--green); color: var(--green-light); }
.picker.unset .chips { padding: 6px; margin: -6px; border-radius: 16px; }
.picker.unset.flash .chips { box-shadow: 0 0 0 2px var(--danger); }

/* ---------- bottom sheet ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(6, 8, 6, 0.72); }
.sheet {
  position: relative; max-height: 78vh; display: flex; flex-direction: column;
  background: var(--surface); border-top: 1px solid var(--line);
  border-radius: 20px 20px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  animation: rise 0.24s var(--ease);
  max-width: 620px; width: 100%; margin: 0 auto;
}
@keyframes rise { from { transform: translateY(28px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 16px var(--pad); border-bottom: 1px solid var(--line); }
.sheet-head h2 { margin: 0; font-size: 18px; font-weight: 900; }
.sheet-head .back { margin-left: auto; }
.sheet-list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px var(--pad) 20px; }
.sheet-item {
  display: block; width: 100%; min-height: 56px; padding: 15px 16px;
  margin-top: 8px; text-align: left;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  font: inherit; font-size: 17px; cursor: pointer;
}
.sheet-item.on { background: var(--green-dark); border-color: var(--green); color: var(--green-light); font-weight: 700; }
.sheet-item:active { background: var(--green-dark); }


/* ---- long QuickBooks names: truncate in chips, never in the sheet -------- */
.pill {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 430px) {
  .pill { max-width: calc(100vw - 60px); }
}

/* ---- searchable bottom sheet -------------------------------------------- */
.sheet-search {
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.sheet-search input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;                /* 16px stops iOS Safari zooming on focus */
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  -webkit-appearance: none;
}
.sheet-search input:focus { outline: none; border-color: var(--brand); }
.sheet-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  text-align: left;
}
.sheet-item .sheet-name { white-space: normal; overflow-wrap: anywhere; }
.sheet-item .sheet-num {
  flex: none;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.82rem;
  color: var(--muted);
}
.sheet-item.on .sheet-num { color: inherit; }
.sheet-empty { padding: 22px 4px; color: var(--muted); }

/* ============================================================
   INVENTORY MODULE
   ============================================================ */

/* --- Location picker grid (trucks + trailer, then CCans/tents/compound) --- */
/* The location picker is grouped (Trucks & Trailer, then Yard & Shop), so
   the outer element is a plain block and each group's tiles get their own
   2-up grid. */
.unit-grid { margin-top: 8px; }
.unit-grid-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.unit-group-head {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 20px 0 8px;
}
.unit-group-head:first-child { margin-top: 4px; }
/* v84: the identity gate divides the crew by first letter instead of by rank.
   The letter lives in a narrow left gutter, not on its own line: most letters
   hold one or two names, so stacking a full-width divider above each one made
   the gate nearly three times longer to scroll. A gutter keeps the A-Z
   wayfinding at a fraction of the height. */
.alpha-row {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 8px;
}
.alpha-row:first-child { margin-top: 2px; }
.alpha-letter {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--muted);
  /* Match the chip height so the letter optically aligns with the first row
     of chips instead of floating above them. */
  line-height: 40px;
}
.alpha-row .identity-chips { margin: 0; }
.unit-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 20px 14px;
  border-radius: var(--r);
  cursor: pointer;
  transition: transform 0.1s var(--ease), border-color 0.15s, background 0.15s;
  text-align: center;
  letter-spacing: 0.01em;
}
.unit-btn:active { transform: scale(0.97); }
.unit-btn:hover { border-color: var(--green); }
/* Yard tiles carry a "what belongs here" line so a count lands in the
   right place. Left-aligned because the hint is a sentence, not a label. */
.unit-btn.has-hint {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 14px;
  /* Hints wrap to one, two or three lines depending on the location, which
     left the grid with visibly uneven rows. A floor tall enough for the
     longest hint (CCan 7) makes every yard tile the same height. */
  min-height: 106px;
}
.unit-btn-name { font-size: 1.05rem; font-weight: 800; }
.unit-btn-hint {
  font-weight: 500;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* --- Intake form: section headers and rows --- */
.inv-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px var(--pad) 6px;
  margin: 14px 0;
}
.inv-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.inv-section-head h2 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
}
.inv-section-sub {
  color: var(--muted);
  font-size: 0.85rem;
}
.inv-list { display: block; }
.inv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.inv-row:last-child { border-bottom: none; }
.inv-row-info { flex: 1 1 auto; min-width: 0; }
.inv-row-name {
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.inv-row-sub {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 2px;
}

/* --- +/- Stepper (touch-friendly counter) --- */
.stepper {
  flex: none;
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
}
.stepper .step {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--text);
  border: none;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  width: 42px;
  min-height: 42px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.stepper .step:active { background: var(--surface-2); }
.stepper .step-val {
  width: 54px;
  min-height: 42px;
  border: none;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  padding: 0 2px;
}
.stepper .step-val:focus {
  outline: none;
  background: var(--surface-2);
}
/* Hide the native spinner buttons — we have our own +/- controls. */
.stepper .step-val::-webkit-outer-spin-button,
.stepper .step-val::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.stepper .step-val { -moz-appearance: textfield; }

/* --- Read-only detail rendering (Live / Detail / Totals) --- */
.inv-row.read {
  padding: 8px 0;
}
.inv-count {
  font-weight: 700;
  min-width: 40px;
  text-align: right;
  color: var(--text);
  font-size: 1.05rem;
}
.inv-note-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px var(--pad);
  margin-top: 14px;
}
.inv-note-block h2 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  font-weight: 700;
}
.inv-note-block p { margin: 0; color: var(--muted); }

/* --- Live screen: unit cards --- */
.live-toolbar {
  display: flex;
  gap: 10px;
  margin: 4px 0 14px;
}
.live-row {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px var(--pad);
  margin-bottom: 10px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.15s;
}
.live-row:hover { border-color: var(--green); }
.live-row:active { transform: scale(0.99); }
.live-row-main { flex: 1 1 auto; min-width: 0; }
.live-unit {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.live-when {
  color: var(--muted);
  font-size: 0.86rem;
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.live-hint {
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.live-group-head {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 6px;
}
.live-group-head:first-child { margin-top: 2px; }
.live-row-right { flex: none; text-align: right; }
.live-total {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
}
.live-total-lbl {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

/* --- Combined totals: location toggle chips, grouped --- */
.totals-picker { margin: 6px 0 10px; }
.unit-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.totals-group-head {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 6px;
}
.totals-group-head:first-child { margin-top: 2px; }
.unit-toggle {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.unit-toggle.on {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.totals-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
.totals-summary {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 6px 0 4px;
}
.totals-summary strong { color: var(--text); font-size: 1.05rem; }
.totals-warn { color: var(--warn); }

/* Required picker: subtle green accent + a nudge on submitter selection */
.picker.required .picker-head h2 em.req {
  background: rgba(91, 147, 48, 0.15);
  color: var(--green);
  padding: 2px 8px;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 700;
}

/* "Add an item" button under a user-addable category (Other) */
.inv-add-btn {
  display: inline-block;
  margin: 10px 0 6px;
  padding: 6px 4px;
  font-size: 0.95rem;
}

/* Inventory History block on the Detail screen */
.inv-history {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: var(--r);
}
.inv-history .history-head {
  padding: 0 0 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.inv-history .history-head h2 {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
}
.history-row {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.history-row:last-child { border-bottom: none; }
.history-line1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--text);
}
.history-line1 strong { color: var(--green); font-weight: 700; }
.history-when {
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.history-changes {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}
.history-note {
  margin-top: 4px;
  color: var(--muted);
  font-style: italic;
  font-size: 0.86rem;
}

/* --- Collapsible category sections (Intake, Detail, Totals) ---
   The whole header row is a button; the body element shows/hides based
   on the `.open` class on the outer .inv-section.collapsible. This is
   simpler and more predictable than <details>/<summary> for our layout. */
.inv-section.collapsible > .inv-section-head.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  color: inherit;
  padding: 8px 4px;
  margin: 0 -4px 0;
  cursor: pointer;
  text-align: left;
  min-height: 44px;              /* thumb-friendly target */
}
.inv-section.collapsible > .inv-section-head.toggle:active {
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
}
.inv-section.collapsible > .inv-section-head.toggle > h2 {
  flex: 1 1 auto;
  margin: 0;
}
.inv-section.collapsible > .inv-section-head.toggle .twist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  color: var(--green);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.inv-section.collapsible:not(.open) > .inv-section-body { display: none; }
.inv-section.collapsible.open > .inv-section-body { display: block; }

/* --- History row delete button (leadership only) --- */
.history-line1 {
  gap: 8px;
}
.history-who {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.history-del {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: #c9a06b;                /* warm ochre, calmer than pure red */
  padding: 6px 10px;
  font-size: 1rem;
  line-height: 1;
  min-width: 40px;
  min-height: 36px;
  cursor: pointer;
}
.history-del:active { background: rgba(201,160,107,0.12); }

/* --- Inventory Search screen --------------------------------------
   Big top-of-screen input, a scrollable result list of catalog
   names, and (after the crew taps one) a "which units have this"
   block below. Two panels stack so the phone user can scroll from
   input straight into the locations without the input scrolling
   away — it stays sticky. */
.inv-search-box {
  position: sticky;
  top: calc(64px + env(safe-area-inset-top, 0px));
  z-index: 5;
  background: var(--bg, #121512);
  padding: 8px 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
#invSearchInput {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: inherit;
  font: inherit;
  font-size: 1.05rem;
}
#invSearchInput::placeholder { color: rgba(255,255,255,0.4); }
.inv-search-clear {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0 8px;
  cursor: pointer;
}

.inv-search-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.search-result {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 52px;
}
.search-result:active { background: rgba(255,255,255,0.06); }
.search-result.selected {
  border-color: var(--green);
  background: rgba(91,147,48,0.10);
}
.search-result-name {
  font-weight: 600;
  font-size: 1rem;
}
.search-result-cat {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}

.inv-search-locations { margin-top: 18px; }
.inv-search-header h2 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  color: var(--green);
}
.inv-search-header .hint { margin: 0; }
.inv-search-header .muted { color: rgba(255,255,255,0.4); }

.inv-search-hitlist {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.search-hit {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "unit count meta";
  align-items: baseline;
  gap: 4px 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 52px;
}
.search-hit:active { background: rgba(255,255,255,0.06); }
.search-hit-unit {
  grid-area: unit;
  font-weight: 700;
  color: var(--green);
  font-size: 1rem;
}
.search-hit-count {
  grid-area: count;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1.1rem;
  text-align: right;
}
.search-hit-meta {
  grid-area: meta;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  grid-column: 1 / -1;
  text-align: left;
  margin-top: 2px;
}

/* ---------------- Ideas ------------------------------------------------- */

.ideas-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.idea-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.idea-card.shipped { border-color: rgba(91,147,48,0.6); background: rgba(91,147,48,0.06); }
.idea-card.rejected { opacity: 0.55; }

.idea-vote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 2px;
}
.vote-btn {
  width: 32px;
  height: 30px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.vote-btn svg { width: 20px; height: 20px; }
.vote-btn:active { background: rgba(255,255,255,0.06); }
.vote-btn.up.on {
  background: var(--green);
  border-color: var(--green);
  color: #0d1607;
}
.vote-btn.down.on {
  background: var(--danger);
  border-color: var(--danger);
  color: #170707;
}
.vote-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: #fff;
  padding: 2px 0;
}

.idea-body {
  min-width: 0;
  cursor: pointer;
}
.idea-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--green);
  line-height: 1.25;
  word-break: break-word;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.idea-meta {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}
.idea-desc {
  margin-top: 6px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
  word-break: break-word;
}
.idea-desc-detail {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  line-height: 1.45;
}

.idea-status {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
}
.idea-status.shipped { background: rgba(91,147,48,0.2); color: #a8d182; border: 1px solid rgba(91,147,48,0.5); }
.idea-status.rejected { background: rgba(226,86,74,0.15); color: #f3a9a3; border: 1px solid rgba(226,86,74,0.4); }

.idea-mod {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pill.mini {
  padding: 4px 10px;
  font-size: 0.78rem;
  border-radius: 999px;
}
.pill.mini.danger {
  border-color: rgba(226,86,74,0.5);
  color: #f3a9a3;
}
.pill.mini.danger:active { background: rgba(226,86,74,0.15); }

.idea-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.idea-form-field label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
}
.idea-form-field input,
.idea-form-field textarea {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: #fff;
  font: inherit;
}
.idea-form-field textarea { min-height: 120px; resize: vertical; }

/* =========================================================================
   Rollout 2026-08-17 — Camera-Gallery dupe banner, Tools screen, Capture Weather
   ========================================================================= */

/* Duplicate-photo banner (shown after adding a photo already sent from this device) */
.dupe-banner {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 60;
  background: #3a2f0a;
  border: 1px solid #f6b93b;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #ffeaa8;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.dupe-body { display: flex; flex-direction: column; gap: 2px; }
.dupe-body strong { color: #ffe07a; font-weight: 700; }
.dupe-body span { font-size: 0.9rem; color: #ffeaa8; }
.dupe-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn.btn-warn { background: #f6b93b; color: #1a1200; border: none; }
.btn.btn-warn:hover { background: #ffcc55; }

/* Weather capture card */
.wx-status { margin-top: 8px; }
.wx-status-warn { color: #f6b93b; }
.wx-card {
  margin-top: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 16px 16px 12px;
}
.wx-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.wx-card-head h2 { margin: 0; font-size: 1.1rem; }
.wx-gps { margin: 0 0 12px 0; color: var(--text); opacity: 0.75; font-size: 0.92rem; line-height: 1.5; }
.wx-lsd { color: var(--green); font-weight: 600; letter-spacing: 0.02em; }
.wx-lsd-note { color: var(--muted); font-weight: 400; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; }
.wx-lsd-quarter { color: var(--muted); font-size: 0.9em; }
#revCopyBtn { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; }

/* ---------------- LSD Tracker picker ------------------------------------ */
.lsd-mode-toggle {
  display: flex; gap: 6px; padding: 4px;
  background: var(--surface-2, #f2f2f2);
  border-radius: 10px; margin: 14px 0;
}
.lsd-mode-btn {
  flex: 1; padding: 10px 12px; border: 0; background: transparent;
  border-radius: 8px; font-weight: 600; font-size: 15px; color: var(--text);
  cursor: pointer;
}
.lsd-mode-btn.active {
  background: var(--surface, #fff); color: var(--brand);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.lsd-picker {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px;
}

.lsd-field {
  display: grid;
  grid-template-columns: 90px 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e2e2);
  border-radius: 12px;
}
.lsd-field .lsd-lbl {
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.lsd-field .lsd-val {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}
.lsd-step {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--brand);
  color: #fff;
  font-size: 28px; line-height: 1;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.lsd-step:active { transform: scale(0.94); }
.lsd-step.lsd-down { justify-self: end; }
.lsd-step.lsd-up   { justify-self: start; }

.lsd-field-meridian { grid-template-columns: 90px 1fr; }
.lsd-mer-toggle { display: flex; gap: 4px; }
.lsd-mer {
  flex: 1 1 0; min-width: 0; padding: 12px 2px; border: 1px solid var(--border, #e2e2e2);
  background: var(--surface-2, #f6f6f6);
  border-radius: 10px;
  font-weight: 700; font-size: 14px; color: var(--muted);
  white-space: nowrap; text-align: center;
  cursor: pointer;
}
.lsd-mer.active {
  background: var(--brand); color: #fff; border-color: var(--brand);
}

.lsd-field-quarter { grid-template-columns: 90px 1fr; }
.lsd-quarter-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.lsd-q {
  padding: 14px 8px; border: 1px solid var(--border, #e2e2e2);
  background: var(--surface-2, #f6f6f6);
  border-radius: 10px;
  font-weight: 700; font-size: 16px; color: var(--muted);
  cursor: pointer;
}
.lsd-q.active {
  background: var(--brand); color: #fff; border-color: var(--brand);
}

.lsd-current-wrap {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px; background: var(--surface-2, #f6f6f6);
  border-radius: 12px; margin-bottom: 14px;
  border: 1px dashed var(--border, #e2e2e2);
}
.lsd-current-wrap .lsd-lbl {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.lsd-current {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px; font-weight: 700; color: var(--brand);
  letter-spacing: 0.02em;
}

.lsd-type-details {
  margin: 8px 0 14px;
  border: 1px solid var(--border, #e2e2e2);
  border-radius: 10px;
  padding: 8px 12px;
  background: var(--surface, #fff);
}
.lsd-type-details summary {
  cursor: pointer; font-weight: 600; padding: 4px 0;
  color: var(--muted); font-size: 14px;
}
.lsd-type-details[open] summary { color: var(--text); }
.lsd-type-input {
  width: 100%; margin: 10px 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--border, #e2e2e2);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  background: var(--surface-2, #f9f9f9);
  color: var(--text);
}
.lsd-parse-status.wx-status-warn { color: #c33; }

.lsd-result-card { margin-top: 8px; }
.lsd-map-btns {
  display: flex; flex-direction: column; gap: 10px; margin-top: 12px;
}
.lsd-map-btns .btn { justify-content: center; }
.lsd-map-btns .btn svg { margin-right: 8px; }

@media (max-width: 380px) {
  .lsd-field { grid-template-columns: 70px 1fr auto 1fr; gap: 6px; padding: 6px 10px; }
  .lsd-field .lsd-val { font-size: 28px; min-width: 48px; }
  .lsd-step { width: 48px; height: 48px; font-size: 24px; }
}

/* ---------------- LSD Tracker: History ---------------------------------- */
.lsd-history-btn {
  margin-top: 14px; width: 100%; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px;
}

.lsd-hist-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.lsd-hist-head .screen-title { margin: 0; }
.lsd-hist-clear { color: #c33; }

.lsd-hist-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 14px;
}
.lsd-hist-row {
  display: flex; align-items: stretch;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e2e2);
  border-radius: 12px;
  overflow: hidden;
}
.lsd-hist-load {
  flex: 1; text-align: left; padding: 12px 14px;
  background: transparent; border: 0; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  color: var(--text);
}
.lsd-hist-load:active { background: var(--surface-2, #f6f6f6); }
.lsd-hist-lsd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 17px; font-weight: 700; color: var(--brand);
}
.lsd-hist-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 12px; color: var(--muted);
}
.lsd-hist-kind {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2, #f0f0f0); font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
}
.lsd-hist-time { font-weight: 500; }
.lsd-hist-gps {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.lsd-hist-actions {
  display: flex; flex-direction: column; border-left: 1px solid var(--border, #e2e2e2);
}
.lsd-hist-icon-btn {
  flex: 1; min-width: 48px; padding: 8px 12px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--muted);
  text-decoration: none;
}
.lsd-hist-icon-btn:active { background: var(--surface-2, #f6f6f6); }
.lsd-hist-icon-btn:first-child { color: var(--brand); }
.lsd-hist-icon-btn + .lsd-hist-icon-btn { border-top: 1px solid var(--border, #e2e2e2); }
.lsd-hist-del { color: #c33; }

.lsd-hist-empty {
  text-align: center; padding: 40px 20px; color: var(--muted);
}
.lsd-hist-empty svg { opacity: 0.4; margin-bottom: 12px; }
.lsd-hist-empty p { margin: 4px 0; }
.lsd-hist-empty p strong { color: var(--text); }
.wx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.wx-cell {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wx-cell-wide { grid-column: 1 / -1; }
.wx-k {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wx-v { font-size: 1.02rem; font-weight: 600; color: #fff; }
.wx-src { font-size: 0.9rem; font-weight: 500; color: rgba(255,255,255,0.85); }
.wx-badge {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
}
.wx-badge-synced { background: #22592f; color: #a9f0b1; }
.wx-badge-pending { background: #4a3d10; color: #ffd57a; }

/* Weather captures list */
.wx-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.wx-row {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wx-row-head { display: flex; align-items: center; justify-content: space-between; }
.wx-row-gps { color: rgba(255,255,255,0.65); font-size: 0.88rem; }
.wx-row-line { color: rgba(255,255,255,0.90); font-size: 0.92rem; }
.wx-row-src { color: rgba(255,255,255,0.55); font-size: 0.8rem; }

/* Big primary button used by wxCaptureBtn */
.btn-xl {
  font-size: 1.1rem;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}
.wx-btn-label { font-weight: 700; }

/* Rollout 2026-08-17 — hotfix: Wind Source visibility + Delete button in captures list */
.wx-cell-wide {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}
.wx-cell-wide .wx-k { color: rgba(255,255,255,0.65); }
.wx-cell-wide .wx-v { font-size: 0.95rem; }
.wx-row-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.wx-del-btn,
.wx-copy-btn {
  color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.14);
  background: transparent;
  padding: 6px 12px;
  border-radius: 8px;
}
.wx-del-btn:hover { color: #ffb3b3; border-color: rgba(255,90,90,0.5); background: rgba(255,90,90,0.08); }
.wx-copy-btn:hover:not([disabled]) { color: #b3e6c3; border-color: rgba(90,200,120,0.5); background: rgba(90,200,120,0.08); }
.wx-copy-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Capture Weather result card — Copy for VMR button sits below the grid. */
.wx-card-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
.wx-card-actions .wx-copy-btn { padding: 8px 16px; }

/* Rollout 2026-08-17 — View captures moved under Capture now button */
.wx-view-btn { margin-top: 10px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }

/* =========================================================================
   Rollout 2026-08-17 (afternoon 2) — Herbicide Calculator (v0.1.1)
   Uses the app's dark theme tokens so text is readable on real surfaces.
   ========================================================================= */
.calc-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0 16px; font-size:14px; color:var(--muted); }
.calc-meta-pill { background:var(--surface-2); border:1px solid var(--line); padding:4px 12px; border-radius:999px; font-weight:600; color:var(--text); font-size:13px; }
.calc-meta-src { margin-left:auto; font-style:italic; color:var(--muted); }

.field-row { margin: 14px 0; }
.field-label { display:block; font-weight:600; margin-bottom:8px; color:var(--text); font-size:15px; }
.select-lg, .input-lg {
  width:100%; padding:14px; font-size:16px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface-2); color:var(--text);
  -webkit-appearance:none; appearance:none;
  font-family:inherit;
}
.select-lg:focus, .input-lg:focus { outline:2px solid var(--green); outline-offset:1px; border-color:var(--green); }
.field-row .hint { color:var(--muted); font-size:13px; margin:6px 0 0; }

/* Carrier-volume picker: eleven numeric .pill chips where a number box used to
   be. They inherit the .pill 48px touch target; these rules only stop a row of
   bare numbers from looking ragged, by giving every chip the same width and
   centring the digits. Tabular figures keep 500 and 1000 optically aligned. */
.bp-carrier-chips { gap:6px; }
.bp-carrier-chips .pill {
  min-width:64px; padding:11px 10px; text-align:center;
  font-variant-numeric:tabular-nums; font-size:15px;
}

.calc-result-card { margin-top:16px; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:14px; color:var(--text); }
.calc-result-actions { display:flex; justify-content:flex-end; margin-top:12px; }
.calc-result-eqhead { font-size:14px; color:var(--muted); margin-bottom:12px; }
.calc-result-eqhead strong { color:var(--text); }
.calc-table { width:100%; border-collapse:collapse; }
.calc-table th, .calc-table td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); font-size:15px; color:var(--text); }
.calc-table th { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); font-weight:700; }
.calc-table td:last-child, .calc-table th:last-child { text-align:right; }
.calc-amt { color:var(--green); font-size:17px; font-weight:700; }
.calc-missing { color:#e79b9b; font-style:italic; font-size:13px; }

.calc-bp-amount { font-size:44px; font-weight:800; color:var(--green); text-align:center; margin:12px 0 6px; letter-spacing:-0.5px; }
.calc-bp-line { text-align:center; color:var(--muted); font-size:14px; }
/* Label caution carried from the master's Backpack Note cell — season caps and
   required adjuvants. Amber, not green: this is a constraint, not a result. */
.calc-bp-note {
  margin-top:12px; padding:10px 12px; background:#2b2413; border:1px solid #6b5a24;
  border-left:4px solid #d9a521; border-radius:10px;
  color:#e8dcb8; font-size:13px; line-height:1.45;
}

.calc-vmr-tip {
  margin-top:16px; padding:14px 16px; background:#1f2b1a; border:1px solid #3a5a2e;
  border-left:4px solid var(--green); border-radius:12px;
}
.calc-vmr-tip-head {
  font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color:var(--green); margin-bottom:8px;
}
.calc-vmr-tip-body { font-size:14px; line-height:1.7; color:var(--text); }
.calc-vmr-tip-body strong { color:var(--green); font-weight:700; }

.calc-insight-card { margin-top:20px; }
.calc-insight-card summary {
  cursor:pointer; padding:12px 16px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; font-weight:600; color:var(--text); user-select:none; font-size:15px;
}
.calc-insight-card summary::-webkit-details-marker { color:var(--green); }
.calc-insight-list { list-style:none; padding:0 4px; margin:10px 0 0; }
.calc-insight-list li { padding:12px 0; border-bottom:1px dashed var(--line); font-size:14px; line-height:1.55; color:var(--text); }
.calc-insight-list li:last-child { border-bottom:none; }
.calc-insight-list li strong { color:var(--green); }
.calc-insight-type {
  display:inline-block; padding:2px 9px; border-radius:999px; font-size:10px;
  font-weight:800; text-transform:uppercase; letter-spacing:0.5px; margin-right:6px; vertical-align:middle;
}
.calc-insight-watchout   { background:#4a2020; color:#ffb4b4; }
.calc-insight-strength   { background:#22381a; color:#c8e6a5; }
.calc-insight-regulatory { background:#2c303a; color:#c7cde0; }
.calc-insight-funfact    { background:#3e341a; color:#ffd58a; }
.calc-insight-note       { background:#2c303a; color:#c7cde0; }

.calc-admin-meta { padding:14px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; font-size:14px; line-height:1.7; margin:10px 0 16px; color:var(--text); }
.calc-admin-meta strong { color:var(--green); }
.calc-admin-drop {
  display:block; padding:40px 20px; text-align:center; border:2px dashed var(--line); border-radius:14px;
  color:var(--muted); font-weight:600; cursor:pointer; background:var(--surface-2);
  transition:border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  font-size:15px;
}
.calc-admin-drop:hover { border-color:var(--green); background:var(--surface); color:var(--green); }
.calc-admin-status {
  margin-top:14px; padding:14px 16px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px;
  line-height:1.8; color:var(--text);
}
.calc-admin-ok { color:var(--green); font-weight:700; margin-top:8px; }
.calc-admin-fail { color:#e79b9b; font-weight:700; margin-top:8px; }

/* ================= ADMIN TABS ================= */
.admin-tabs {
  display: flex; gap: 8px; margin: 4px 0 20px;
  background: var(--surface-2); border-radius: 12px; padding: 4px;
}
.admin-tab {
  flex: 1; padding: 10px 12px; border: none; background: transparent;
  color: var(--muted); font-weight: 700; font-size: 14px; border-radius: 8px;
  cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease);
  font-family: inherit; letter-spacing: 0.2px;
}
.admin-tab.active { background: var(--green); color: var(--bg); }
.admin-tab:not(.active):active { background: var(--surface); color: var(--text); }

.admin-pane { animation: adminFade 0.18s var(--ease); }
@keyframes adminFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ================= THEME PICKER ================= */
.theme-hint { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.theme-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.theme-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--surface-2); border: 2px solid var(--line); border-radius: 14px;
  cursor: pointer; transition: border-color 0.15s var(--ease), transform 0.1s var(--ease);
}
.theme-card:active { transform: scale(0.98); }
.theme-card.active { border-color: var(--green); }
.theme-swatches {
  display: flex; flex-shrink: 0; border-radius: 10px; overflow: hidden;
  width: 84px; height: 44px; border: 1px solid var(--line);
}
.theme-swatch { flex: 1; }
.theme-info { flex: 1; min-width: 0; }
.theme-name { font-weight: 700; color: var(--text); font-size: 15px; }
.theme-desc { color: var(--muted); font-size: 12.5px; margin-top: 2px; line-height: 1.4; }
.theme-check {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface); border: 2px solid var(--line); position: relative;
}
.theme-card.active .theme-check { background: var(--green); border-color: var(--green); }
.theme-card.active .theme-check::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 6px; height: 11px;
  border: solid var(--bg); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

/* ================= ADMIN HUB + SUB-SCREENS (2026-08-17) ================= */

.admin-hub {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 8px;
}
.admin-hub-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e2e2e2);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  text-decoration: none;
  font: inherit;
}
.admin-hub-tile:active { background: var(--surface-2, #f6f6f6); }
.admin-hub-icon {
  flex: 0 0 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  background: var(--surface-2, #f2f2f2);
  border-radius: 12px;
}
.admin-hub-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.admin-hub-title { font-weight: 700; font-size: 16px; color: var(--text); }
.admin-hub-sub { font-size: 13px; color: var(--muted); }

/* Danger variant: nuclear actions (Force app update, wipe cache, etc.) */
.admin-hub-tile.admin-hub-danger { border-color: var(--warn); }
.admin-hub-tile.admin-hub-danger .admin-hub-icon {
  background: rgba(216, 161, 58, 0.15);
  color: var(--warn);
}
.admin-hub-tile.admin-hub-danger .admin-hub-title { color: var(--warn); }

.admin-h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin: 24px 0 8px; font-weight: 700;
}

.admin-info-grid {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 6px 14px; padding: 12px 14px;
  background: var(--surface-2, #f6f6f6);
  border: 1px solid var(--line, #e2e2e2);
  border-radius: 10px;
  font-size: 14px;
}
.admin-info-k { color: var(--muted); font-weight: 500; }
.admin-info-v { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.admin-info-v .ok   { color: var(--green, #2f8f2f); font-weight: 700; }
.admin-info-v .bad  { color: #c33; font-weight: 700; }
.admin-info-v .muted { color: var(--muted); }

.admin-ds-row {
  display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap;
}
.admin-ds-row .btn { flex: 1; min-width: 140px; }
/* Was #c33 on a #e6b0b0 border — values that only make sense against the
   default light-grey browser button this used to inherit. On the real themed
   surface that is 2.8:1. */
.admin-danger { color: var(--danger-text); border-color: color-mix(in srgb, var(--danger-text) 45%, transparent) !important; }

/* Reference Data tiles */
.admin-ds-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.admin-ds-tile {
  display: flex; flex-direction: column; gap: 4px;
  text-align: left; padding: 12px 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e2e2e2);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}
.admin-ds-tile:active { background: var(--surface-2, #f6f6f6); }
.admin-ds-title { font-weight: 700; font-size: 15px; }
.admin-ds-meta { font-size: 13px; color: var(--brand, var(--green, #2f8f2f)); font-weight: 600; }
.admin-ds-hint {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted, #6a6a6a);
  padding: 10px 12px;
  background: var(--surface-2, #f6f6f6);
  border: 1px dashed var(--line, #e2e2e2);
  border-radius: 8px;
  margin: 8px 0 12px;
}
.admin-ds-updated { font-size: 12px; color: var(--muted); }

.admin-ds-meta.calc-admin-meta { /* reuses existing style */ }

.admin-ds-history { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.admin-ds-ver {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--surface-2, #f6f6f6);
  border: 1px solid var(--line, #e2e2e2);
  border-radius: 10px;
  font-size: 13px;
  flex-wrap: wrap;
}
.admin-ds-ver-num { font-weight: 700; font-family: ui-monospace, Menlo, monospace; }
.admin-ds-ver-when { color: var(--muted); flex: 1; min-width: 120px; }
.admin-ds-ver-rows { color: var(--muted); }
.admin-ds-ver-cur {
  padding: 2px 8px; border-radius: 999px;
  background: var(--green, #2f8f2f); color: white;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* Default options fields */
.admin-field {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line, #e2e2e2);
}
.admin-field-k { font-size: 13px; color: var(--muted); font-weight: 600; }
.admin-field-v {
  padding: 10px 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #ccc);
  border-radius: 10px;
  font-size: 15px;
  color: var(--text);
  font: inherit;
}

.admin-tile-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  margin: 8px 0 12px;
}
.admin-tile-check {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--surface-2, #f6f6f6);
  border: 1px solid var(--line, #e2e2e2);
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
}
.admin-tile-check input { width: 18px; height: 18px; }

/* Activity list */
.admin-activity-list { display: flex; flex-direction: column; gap: 6px; }
.admin-activity-row {
  display: grid; grid-template-columns: max-content 1fr max-content;
  gap: 10px; padding: 8px 12px;
  background: var(--surface-2, #f6f6f6);
  border: 1px solid var(--line, #e2e2e2);
  border-radius: 8px;
  font-size: 13px;
  align-items: center;
}
.admin-activity-kind {
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 700; color: var(--brand, var(--green, #2f8f2f));
  font-size: 12px;
}
.admin-activity-detail { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-activity-time { color: var(--muted); font-size: 12px; }

/* Text size row */
.admin-textsize-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin: 8px 0 12px;
}
.admin-textsize-btn { padding: 12px 8px; font-size: 14px; }
.admin-textsize-btn.active {
  background: var(--green, #2f8f2f); color: white;
  border-color: var(--green, #2f8f2f);
}

/* Beta pill (in section headings) */
.admin-beta {
  display: inline-block; margin-left: 6px;
  padding: 2px 8px; border-radius: 999px;
  background: #d97706; color: white;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  vertical-align: middle;
}

/* PIN gate modal */
.pin-wrap {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.pin-scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.pin-card {
  position: relative;
  background: var(--surface, #fff);
  border-radius: 16px;
  padding: 24px;
  max-width: 340px; width: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.pin-card h2 { margin: 0 0 8px; font-size: 20px; }
.pin-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 24px;
  letter-spacing: 0.4em;
  text-align: center;
  border: 1px solid var(--line, #ccc);
  border-radius: 10px;
  background: var(--surface-2, #f6f6f6);
  margin: 12px 0 8px;
  font-family: ui-monospace, Menlo, monospace;
}
.pin-error { color: #c33; font-size: 13px; margin: 4px 0 8px; text-align: center; }

/* About: changelog pre (legacy — kept for one-off raw dumps) */
.admin-changelog-pre {
  padding: 12px; background: var(--surface-2, #f6f6f6);
  border: 1px solid var(--line, #e2e2e2); border-radius: 10px;
  font-size: 12px; font-family: ui-monospace, Menlo, monospace;
  white-space: pre-wrap;
  max-height: 400px; overflow-y: auto;
  color: var(--text);
}

/* About: release-note cards (Latest changelog) --------------------------- */
.admin-changelog { display: flex; flex-direction: column; gap: 8px; }

.release-card {
  background: var(--surface-2, #f6f6f6);
  border: 1px solid var(--line, #e2e2e2);
  border-radius: 12px;
  overflow: hidden;
}
.release-head {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.release-head:hover { background: rgba(0,0,0,0.03); }
.release-ver {
  font-weight: 700;
  font-size: 15px;
  color: var(--brand, #5b9330);
  min-width: 2.5em;
}
.release-latest {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand, #5b9330);
  color: #fff;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.release-date {
  font-size: 13px;
  color: var(--muted, #6a6a6a);
}
.release-count {
  font-size: 12px;
  color: var(--muted, #6a6a6a);
  white-space: nowrap;
}
.release-chev {
  font-size: 20px;
  color: var(--muted, #6a6a6a);
  transform: rotate(90deg);
  transition: transform 150ms ease;
  line-height: 1;
}
.release-card.open .release-chev { transform: rotate(-90deg); }

.release-detail {
  display: none;
  padding: 0 14px 14px;
  border-top: 1px solid var(--line, #e2e2e2);
}
.release-card.open .release-detail { display: block; }
.release-summary {
  margin: 12px 0 10px;
  font-size: 14px;
  color: var(--text);
}
.release-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.release-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14px;
  line-height: 1.4;
}
.release-body { color: var(--text); }
.release-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  min-width: 60px;
  text-align: center;
  color: #fff;
  background: #6a6a6a;
  align-self: center;
}
.rt-new       { background: #2ea043; }  /* green  — new features */
.rt-fix       { background: #cf222e; }  /* red    — bug fixes */
.rt-security  { background: #9333ea; }  /* purple — access & PIN */
.rt-polish    { background: #0969da; }  /* blue   — UI polish */
.rt-admin     { background: #8250df; }  /* violet — admin/deploy notes */
.rt-note      { background: #6a6a6a; }


/* Global text-size scaling — driven by html[data-textsize] */
html[data-textsize="sm"] { font-size: 14px; }
html[data-textsize="md"] { font-size: 16px; }  /* default */
html[data-textsize="lg"] { font-size: 18px; }
html[data-textsize="xl"] { font-size: 20px; }

/* Ensure key elements scale relative to root */
html[data-textsize="lg"] .screen-title { font-size: 26px; }
html[data-textsize="xl"] .screen-title { font-size: 30px; }
html[data-textsize="lg"] .hint { font-size: 16px; }
html[data-textsize="xl"] .hint { font-size: 18px; }

/* ---- Home Sync / Exit utility row -------------------------------------- */
.home-util {
  display: flex;
  gap: 10px;
  margin: 16px 0 8px;
}
.home-util .btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.home-util .btn svg { flex: 0 0 auto; }
.sync-status {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  text-align: center;
}
.sync-status.ok   { background: rgba(46, 160, 67, 0.15);  color: var(--ok,  #1a7f37); }
.sync-status.bad  { background: rgba(207, 34, 46, 0.15);  color: var(--bad, #cf222e); }
.sync-status.info { background: rgba(91, 147, 48, 0.15);  color: var(--brand, #5b9330); }

/* ---------- Exit Curtain (full-screen "app closed" overlay) ---------- */
.exit-curtain{
  position:fixed; inset:0;
  background:var(--ksi-green, #2f6b3d);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  z-index:9999;
  animation:exit-fade-in .2s ease-out;
}
@keyframes exit-fade-in{ from{opacity:0} to{opacity:1} }
.exit-curtain-card{
  max-width:420px; width:100%;
  background:#fff; color:#111;
  border-radius:16px; padding:32px 28px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.exit-curtain-logo{
  display:inline-block;
  font-weight:900; font-size:18px; letter-spacing:.15em;
  background:var(--ksi-green, #2f6b3d); color:#fff;
  padding:6px 14px; border-radius:6px;
  margin-bottom:18px;
}
.exit-curtain-card h1{
  font-size:24px; margin:0 0 12px; font-weight:700;
}
.exit-curtain-body{
  font-size:16px; margin:0 0 20px; color:#333; line-height:1.4;
}
.exit-curtain-hint{
  font-size:14px; margin:0 0 24px; color:#666; line-height:1.4;
}
.exit-curtain .btn-xl{
  font-size:16px; padding:14px 24px; min-height:48px;
  width:100%;
}

/* Sticky-bar hidden helper (used by other screens too). */
.sticky-bar-hidden { display: none !important; }


/* === SAFETY TICKETS === */
.safety-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.safety-leader-actions { display:flex; align-items:flex-end; flex-direction:column; gap:4px; padding-top:4px; }
.safety-leader-btn { max-width:220px; white-space:normal; text-align:right; }
.safety-signout { font-size:12px; }
.safety-my-tickets-link { margin-top:4px; width:100%; justify-content:center; }
.safety-picker { margin-top:18px; }
.safety-ticket-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.safety-ticket-card { display:flex; flex-direction:column; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--text); text-align:left; min-height:190px; }
.safety-ticket-card:active { background:var(--surface-2); }
.safety-ticket-thumb { display:grid; place-items:center; height:105px; background:var(--surface-2); overflow:hidden; color:var(--muted); font-size:12px; }
.safety-ticket-thumb img { width:100%; height:100%; object-fit:cover; }
.safety-ticket-no-photo { padding:12px; text-align:center; }
.safety-ticket-main { display:flex; flex:1; flex-direction:column; align-items:flex-start; gap:7px; padding:10px; }
.safety-ticket-main strong { font-size:14px; line-height:1.2; }
.safety-expiry { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.safety-expiry i { width:8px; height:8px; border-radius:50%; background:#89908a; flex:0 0 auto; }
.safety-expiry.safety-current i { background:#69b33a; }.safety-expiry.safety-expiring i { background:var(--warn); }.safety-expiry.safety-expired i,.safety-expiry.safety-missing i { background:var(--danger); }.safety-expiry.safety-none i { background:#89908a; }.safety-expiry.safety-missing i { background:transparent; border:2px solid var(--danger); }
.safety-review-badge { padding:2px 6px; border:1px solid var(--warn); border-radius:999px; color:var(--warn); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.safety-form-field { display:flex; flex-direction:column; gap:6px; margin:0 0 15px; }.safety-form-field label,.safety-email-row label { font-size:14px; font-weight:700; }.safety-form-field input,.safety-form-field select,.safety-form-field textarea,.safety-email-row input,.safety-search { width:100%; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--text); padding:12px; font:inherit; }
.safety-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.safety-check { display:flex; align-items:center; gap:8px; margin:-2px 0 16px; font-size:14px; }.safety-photo-picks { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0 16px; }.safety-photo-pick { display:flex; flex-direction:column; gap:6px; min-height:92px; padding:12px; background:var(--surface); border:1px dashed var(--line); border-radius:12px; cursor:pointer; }.safety-photo-pick span { font-size:13px; }.safety-photo-pick strong { color:var(--green); font-size:14px; }.safety-privacy { margin:0 0 18px; color:var(--muted); font-size:12px; }
.safety-summary { display:flex; flex-wrap:wrap; gap:7px; align-items:baseline; margin:14px 0; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); font-size:14px; }.safety-summary strong { color:#74ba49; font-size:20px; }.safety-summary b { color:var(--warn); }.safety-summary em { color:var(--danger); font-style:normal; }.safety-search { margin:0 0 12px; }
.safety-compliance-head,.safety-compliance-row { display:grid; grid-template-columns:minmax(120px,1.6fr) repeat(4,minmax(62px,1fr)) minmax(78px,1fr); gap:8px; align-items:center; }.safety-compliance-head { padding:8px 10px; color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }.safety-compliance-row { width:100%; padding:11px 10px; margin:0 0 7px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text); text-align:left; font:inherit; }.safety-compliance-row strong { font-size:13px; }.safety-overall { font-size:12px; font-weight:700; }.safety-overall.safety-compliant { color:#74ba49; }.safety-overall.safety-expiring { color:var(--warn); }.safety-overall.safety-gaps { color:var(--danger); }
.safety-binder-me { width:100%; }.safety-divider { display:flex; align-items:center; gap:10px; margin:18px 0; color:var(--muted); font-size:12px; }.safety-divider:before,.safety-divider:after { content:""; height:1px; flex:1; background:var(--line); }.safety-binder-list,.safety-custom-types { display:flex; flex-direction:column; gap:8px; }.safety-binder-list label,.safety-custom-types label,.safety-template-options label { display:flex; align-items:flex-start; gap:9px; padding:11px; border:1px solid var(--line); border-radius:10px; background:var(--surface); font-size:14px; }.safety-leader-warning { padding:10px; border-radius:10px; background:color-mix(in srgb,var(--warn) 17%,transparent); color:var(--warn); font-size:13px; }.safety-template-options { display:flex; flex-direction:column; gap:9px; }.safety-template-options label { display:grid; grid-template-columns:auto 1fr; }.safety-template-options strong { display:block; }.safety-template-options span { grid-column:2; color:var(--muted); font-size:12px; }.safety-custom-types { max-height:330px; overflow:auto; margin-top:14px; }.safety-binder-summary { padding:15px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }.safety-binder-summary strong { color:var(--green); font-size:19px; }.safety-binder-warnings { margin:12px 0; }.safety-binder-warnings p { margin:0 0 7px; padding:9px; border-left:3px solid var(--warn); background:var(--surface); font-size:13px; }.safety-ok-line { border-left-color:#74ba49 !important; }.safety-email-row { display:flex; flex-direction:column; gap:6px; margin:18px 0; }
.safety-modal-wrap { position:fixed; z-index:600; inset:0; display:flex; align-items:center; justify-content:center; padding:18px; }.safety-modal-scrim { position:absolute; inset:0; background:rgba(0,0,0,.66); }.safety-modal-card { position:relative; width:min(100%,420px); max-height:90vh; overflow:auto; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:0 18px 48px rgba(0,0,0,.45); }.safety-modal-card h2 { margin:0 0 8px; }.safety-modal-actions,.safety-detail-actions { display:flex; gap:9px; justify-content:flex-end; }.safety-pin-input { width:100%; padding:14px; margin:8px 0; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--text); font:700 24px ui-monospace,monospace; text-align:center; letter-spacing:.32em; }.safety-pin-error { color:var(--danger); font-size:13px; }.safety-modal-close { position:absolute; top:10px; right:10px; font-size:24px; }.safety-detail-photo { display:block; width:100%; max-height:52vh; object-fit:contain; border-radius:10px; background:var(--surface-2); }.safety-ticket-detail { display:grid; grid-template-columns:105px 1fr; gap:8px 10px; margin:14px 0; font-size:13px; }.safety-ticket-detail dt { color:var(--muted); }.safety-ticket-detail dd { margin:0; }.safety-ticket-meta-list { display:flex; flex-direction:column; gap:8px; }.safety-ticket-meta-list div { display:flex; justify-content:space-between; gap:8px; padding:9px; border:1px solid var(--line); border-radius:9px; font-size:13px; }.safety-toast { position:fixed; z-index:700; left:50%; bottom:22px; transform:translateX(-50%); width:min(calc(100% - 32px),480px); padding:12px 15px; border-radius:10px; background:#447522; color:#fff; box-shadow:0 8px 30px rgba(0,0,0,.3); font-weight:700; text-align:center; }.safety-toast.safety-bad { background:var(--danger); }.safety-toast.safety-warn { background:var(--warn); color:#201a06; }
@media (max-width:639px) { .safety-compliance-head { display:none; }.safety-compliance-row { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; }.safety-compliance-row > strong { grid-column:1/-1; padding-bottom:5px; border-bottom:1px solid var(--line); }.safety-compliance-row > span { display:flex; justify-content:space-between; }.safety-compliance-row > span:before { content:attr(data-label); color:var(--muted); font-size:11px; }.safety-compliance-row > .safety-overall:before { content:attr(data-label); }.safety-compliance-row .safety-expiry { justify-content:flex-end; }.safety-compliance-row .safety-expiry:before { display:none; } }
@media (min-width:640px) { .safety-ticket-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.safety-compliance-row:hover { border-color:var(--green); } }

/* Wallet mode */
.safety-wallet-screen {
  min-height:100dvh;
  margin:-16px;
  padding:20px 0 28px;
  background:#101510;
  color:#f4f7f1;
}

.safety-wallet-screen .screen-title {
  margin:0 20px 14px;
  color:#f4f7f1;
}

.safety-wallet-picker {
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:0 20px 14px;
}

.safety-wallet-picker .pill {
  flex:0 0 auto;
}

.safety-wallet-bundle-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:calc(100% - 40px);
  margin:0 20px 14px;
}

.safety-wallet-bundle-btn svg {
  width:19px;
  height:19px;
}

.safety-wallet-deck {
  display:flex;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
}

.safety-wallet-deck::-webkit-scrollbar {
  display:none;
}

.safety-wallet-card {
  flex:0 0 100vw;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  padding:0 20px 24px;
}

.safety-wallet-photo-wrap {
  display:grid;
  place-items:center;
  min-height:55dvh;
  max-height:65dvh;
  aspect-ratio:3 / 4;
  overflow:hidden;
  border:1px solid #465046;
  border-radius:16px;
  background:#050705;
}

.safety-wallet-photo {
  width:100%;
  height:100%;
  object-fit:contain;
}

.safety-wallet-tabs {
  display:flex;
  width:max-content;
  margin:12px auto 0;
  overflow:hidden;
  border:1px solid #4c574b;
  border-radius:999px;
}

.safety-wallet-tabs button {
  padding:8px 14px;
  color:#d8dfd4;
  font-size:13px;
}

.safety-wallet-tabs button.on {
  background:#4d8b35;
  color:#fff;
}

.safety-wallet-meta {
  padding:18px 2px 10px;
}

.safety-wallet-meta h2 {
  margin:0 0 10px;
  color:#86ca5b;
  font-size:clamp(24px,6vw,32px);
  line-height:1.08;
}

.safety-wallet-expiry {
  display:inline-flex;
  margin-bottom:14px;
  padding:5px 9px;
  border-radius:999px;
  background:#485248;
  color:#fff;
  font-size:13px;
  font-weight:700;
}

.safety-wallet-expiry.safety-current {
  background:#356d24;
}

.safety-wallet-expiry.safety-expiring {
  background:#9a6b11;
}

.safety-wallet-expiry.safety-expired {
  background:#8e2d2d;
}

.safety-wallet-meta dl {
  display:grid;
  grid-template-columns:110px 1fr;
  gap:7px 12px;
  margin:0;
  color:#edf0ea;
  font-size:14px;
}

.safety-wallet-meta dt {
  color:#aab4a7;
}

.safety-wallet-meta dd {
  margin:0;
}

.safety-wallet-qr {
  display:grid;
  place-items:center;
  width:120px;
  min-height:120px;
  margin:12px auto 0;
  padding:7px;
  border-radius:8px;
  background:#fff;
}

.safety-wallet-qr svg {
  width:106px;
  height:106px;
}

.safety-wallet-qr-caption {
  margin:7px auto 0;
  color:#c5cec2;
  font-size:12px;
  text-align:center;
}

.safety-wallet-dots {
  display:flex;
  justify-content:center;
  gap:6px;
  margin:-11px 0 13px;
}

.safety-wallet-dots i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#6d776b;
}

.safety-wallet-dots i.on {
  background:#86ca5b;
  transform:scale(1.25);
}

.safety-wallet-dots span {
  margin-left:4px;
  color:#c5cec2;
  font-size:12px;
}

.safety-wallet-empty {
  margin:34px 20px;
  padding:22px;
  border:1px solid #3e493e;
  border-radius:14px;
  background:#1a211a;
  color:#dbe2d7;
  text-align:center;
}

.safety-wallet-offline-badge {
  position:fixed;
  z-index:20;
  top:16px;
  right:14px;
  max-width:220px;
  padding:7px 10px;
  border-radius:999px;
  background:#a96d0e;
  color:#1c1404;
  font-size:12px;
  font-weight:700;
}

.safety-bundle-list {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:16px 0 10px;
}

.safety-bundle-list label {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px;
  align-items:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-2);
  font-size:13px;
}

.safety-bundle-list span {
  color:var(--muted);
  font-size:12px;
}

.safety-bundle-count {
  margin:12px 0;
  color:var(--muted);
  font-size:13px;
}

.safety-bundle-qr {
  display:grid;
  place-items:center;
  width:300px;
  height:300px;
  max-width:100%;
  margin:18px auto 14px;
  padding:14px;
  border-radius:12px;
  background:#fff;
}

.safety-bundle-qr svg {
  width:100%;
  height:100%;
}

.safety-bundle-modal-card code {
  display:block;
  overflow-wrap:anywhere;
  color:var(--muted);
  font-size:11px;
}

.safety-bundle-expiry {
  margin:12px 0;
  color:var(--green);
  font-weight:700;
}

@media (min-width:640px) {
  .safety-wallet-screen {
    margin:-24px;
    padding-top:28px;
  }

  .safety-wallet-screen .screen-title,
  .safety-wallet-picker {
    max-width:500px;
    margin-right:auto;
    margin-left:auto;
  }

  .safety-wallet-bundle-btn {
    max-width:500px;
    margin-right:auto;
    margin-left:auto;
  }

  .safety-wallet-deck {
    justify-content:center;
  }

  .safety-wallet-card {
    flex-basis:500px;
    max-width:500px;
  }
}

/* The inline Signet-Tally chip ("You N · KSI N" on each tool tile) was
 * removed in v1.0 (2026-08-25). All counters now render on
 * Admin > Click Counters -- see .usage-* below. Nothing renders .tally-chip
 * any more, so its rules are gone rather than left as dead weight. */

/* ---- Industry Highlights (v0.5) ---- */
.hl-list { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.hl-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px;
}
.hl-card.pending { border-color:rgba(216,161,58,0.55); background:rgba(216,161,58,0.06); }
.hl-badges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:9px; }
.hl-badge {
  font-size:11px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--muted);
}
.hl-badge.type-watch-out { background:rgba(226,86,74,0.15); color:#f3a9a3; border-color:rgba(226,86,74,0.4); }
.hl-badge.type-strength { background:rgba(91,147,48,0.18); color:#a8d182; border-color:rgba(91,147,48,0.5); }
.hl-badge.type-regulatory { background:rgba(74,143,214,0.15); color:#a9cdf3; border-color:rgba(74,143,214,0.4); }
.hl-badge.type-fun-fact { background:rgba(216,161,58,0.15); color:#e8c884; border-color:rgba(216,161,58,0.4); }
.hl-badge.pending { background:rgba(216,161,58,0.2); color:#e8c884; border-color:rgba(216,161,58,0.5); }
.hl-text { font-size:15px; line-height:1.55; color:var(--text); }
.hl-meta { margin-top:9px; font-size:12px; color:var(--muted); line-height:1.5; }
.hl-meta a { color:var(--green); }
.hl-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.hl-empty { padding:22px 4px; color:var(--muted); font-size:14px; text-align:center; }
.hl-count { float:right; font-size:12px; font-weight:600; color:var(--muted); }
.hl-count.over { color:var(--danger); }
.hl-optional { font-size:12px; font-weight:600; color:var(--muted); text-transform:none; }
.hl-viewer-hint { margin:0 0 8px; }
.hl-edit-field { margin-top:10px; }
.hl-edit-field textarea {
  width:100%; box-sizing:border-box; background:var(--surface-2); color:var(--text);
  border:1px solid var(--line); border-radius:10px; padding:11px 12px;
  font:inherit; font-size:15px; min-height:96px; resize:vertical;
}

/* ================================================================
   UPCOMING — COR audit interviews (TEMPORARY, remove after audit)
   Amber accent uses the theme-aware --warn token so it stays legible
   on dark, blue, light and high-contrast themes.
   ================================================================ */
.tile-upcoming {
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--warn) 18%, var(--surface)), var(--surface) 70%);
  border-color: var(--warn); cursor: pointer;
  box-shadow: 0 8px 24px -14px color-mix(in srgb, var(--warn) 70%, transparent);
  transition: transform 0.12s var(--ease), background 0.2s var(--ease);
}
.tile-upcoming:active { transform: scale(0.985); }
.tile-upcoming .tile-icon { background: var(--warn); color: #1c1400; }
.tile-upcoming .tile-go { color: var(--warn); }
.tile-flag {
  display: inline-block; margin-left: 8px; vertical-align: 2px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--warn); color: #1c1400;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}

.up-hero { border-left: 3px solid var(--warn); padding-left: 14px; margin: 4px 0 18px; }
.up-flag {
  display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px;
  background: var(--warn); color: #1c1400;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.up-dates { margin: 2px 0 10px; font-size: 15px; font-weight: 700; color: var(--warn); }
.up-blurb { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }

.up-rules {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--warn); border-radius: var(--r);
  padding: 14px 16px; margin: 0 0 24px;
}
.up-rules ul { margin: 0; padding-left: 20px; }
.up-rules li { font-size: 14px; line-height: 1.5; color: var(--text); margin-bottom: 8px; }
.up-rules li:last-child { margin-bottom: 0; }

.up-h2 {
  font-size: 19px; font-weight: 800; letter-spacing: -0.01em;
  margin: 28px 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}

/* ---- Day blocks and slot rows ---- */
.up-day { margin-bottom: 18px; }
.up-day-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 8px;
}
.up-day-label { font-size: 16px; font-weight: 800; color: var(--warn); }
.up-day-sub { font-size: 13px; color: var(--muted); }
.up-slots {
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; background: var(--surface);
}
.up-slot {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
}
.up-slot:last-child { border-bottom: 0; }
.up-slot-n {
  flex: 0 0 30px; font-size: 12px; font-weight: 700;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.up-slot-time {
  flex: 0 0 108px; font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.up-slot-body { display: flex; flex-direction: column; min-width: 0; }
.up-slot-name { font-size: 15px; font-weight: 600; }
.up-slot-group { font-size: 12px; color: var(--muted); }
.up-slot-break { background: var(--surface-2); }
.up-slot-break .up-slot-name {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.up-slot-reserve .up-slot-name { color: var(--muted); font-weight: 500; font-style: italic; }

/* ---- Accordion. Button + panel rather than <details> to match the app. ---- */
.up-acc { margin-bottom: 6px; }
.up-item {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); margin-bottom: 10px; overflow: hidden;
}
.up-item.is-open { border-color: var(--warn); }
.up-q {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 14px 16px; background: none; border: 0;
  color: var(--text); text-align: left; font: inherit; cursor: pointer;
}
.up-q:active { background: var(--surface-2); }
.up-q-text { font-size: 15px; font-weight: 700; line-height: 1.4; }
.up-chev {
  flex: 0 0 20px; margin-left: auto; margin-top: 2px; color: var(--warn);
  transition: transform 0.18s var(--ease);
}
.up-item.is-open .up-chev { transform: rotate(90deg); }
.up-a {
  padding: 0 16px 16px; border-top: 1px solid var(--line); margin-top: -1px;
}
.up-a p {
  margin: 12px 0 0; font-size: 15px; line-height: 1.55;
  color: var(--text); white-space: pre-wrap;
}
.up-pack {
  display: inline-block; margin: 12px 0 0; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 20%, transparent);
  border: 1px solid var(--warn); color: var(--warn);
  font-size: 12px; font-weight: 800;
}

/* ---- Role selector ---- */
.up-roletabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.up-roletab {
  padding: 9px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.up-roletab.is-on {
  background: var(--warn); border-color: var(--warn); color: #1c1400;
}
.up-rolesub { font-size: 13px; color: var(--muted); margin: -6px 0 14px; }

.up-foot {
  margin: 28px 0 8px; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
}
.up-foot p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.up-foot-note { margin-top: 10px !important; }

@media (max-width: 380px) {
  .up-slot { gap: 8px; padding: 10px 12px; }
  .up-slot-n { flex-basis: 24px; }
  .up-slot-time { flex-basis: 96px; font-size: 13px; }
  .up-slot-name { font-size: 14px; }
}

/* --- Upcoming: solid-fill tokens. --warn is a mid-tone in the light theme,
   so pills that fill with it need a darker fill + white text to clear 4.5:1.
   Dark themes keep the bright amber with near-black text. --- */
:root, html[data-theme="ksi"], html[data-theme="midnight"],
html[data-theme="high-contrast"], html[data-theme="amber"] {
  --warn-fill: var(--warn);
  --on-warn: #1c1400;
}
html[data-theme="daybreak"] {
  --warn-fill: #7a5215;
  --on-warn: #ffffff;
}
/* Destructive-action label on a --surface-2 button. Raw --danger (#e2564a) is
   only 3.9:1 there, and these labels are 15px bold, which WCAG counts as
   normal text needing 4.5:1. Lightened to clear it on every dark theme
   (worst case 5.6:1). Daybreak keeps its darker red, already 4.9:1. */
:root, html[data-theme="ksi"], html[data-theme="midnight"],
html[data-theme="high-contrast"], html[data-theme="amber"] {
  --danger-text: #f08276;
}
html[data-theme="daybreak"], html[data-theme="custom"][data-tone="light"] {
  --danger-text: #b8342a;
}
.tile-flag,
.up-flag,
.tile-upcoming .tile-icon,
.up-roletab.is-on {
  background: var(--warn-fill);
  color: var(--on-warn);
}
.up-roletab.is-on { border-color: var(--warn-fill); }

/* =========================================================================
   EMERGENCY MODULE
   Red tile on Home, injury triage, client + incident pickers, procedure screen
   with tap-to-call and tap-to-text rows and a group-text builder.
   ========================================================================= */

/* Home tile — solid red, white text, unmistakable */
.tile.tile-emergency {
  background: #c62828;
  color: #fff;
  border: 2px solid #b71c1c;
  box-shadow: 0 4px 14px rgba(198, 40, 40, 0.35);
  animation: emPulse 2.4s ease-in-out infinite;
}
.tile.tile-emergency .tile-icon,
.tile.tile-emergency .tile-go { color: #fff; }
.tile.tile-emergency .tile-label { color: #fff; font-weight: 900; letter-spacing: 0.5px; }
.tile.tile-emergency .tile-sub { color: rgba(255,255,255,0.9); }
.tile.tile-emergency:active { transform: scale(0.98); background: #b71c1c; }

@keyframes emPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(198, 40, 40, 0.35); }
  50%      { box-shadow: 0 4px 22px rgba(198, 40, 40, 0.65); }
}

/* Emergency screens — slightly darker page tint so it feels distinct */
.emergency-screen { padding-top: 4px; }

/* Sticky 911 banner across every emergency screen after triage */
.em-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: #c62828; color: #fff;
  padding: 12px 14px;
  border-radius: 12px;
  margin: 0 0 16px 0;
  font-size: 15px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(198,40,40,0.35);
}
.em-banner strong { font-weight: 800; }
.em-banner-911 {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: #c62828;
  padding: 8px 14px; border-radius: 999px;
  font-weight: 900; font-size: 15px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.em-banner-911:active { transform: scale(0.97); }

/* Triage screen (first tap on EMERGENCY) */
.em-triage-card {
  background: var(--surface, #1c1f1c);
  border: 2px solid #c62828;
  border-radius: 18px;
  padding: 24px 20px 20px;
  margin: 8px 0 16px;
  text-align: center;
}
.em-triage-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #c62828; color: #fff;
  margin-bottom: 14px;
}
.em-triage-title {
  font-size: 22px; font-weight: 900; line-height: 1.25;
  margin: 0 0 8px;
}
.em-triage-sub { color: var(--muted, #b8bcb5); margin: 0 0 20px; font-size: 15px; }

.em-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 18px 20px;
  border-radius: 14px;
  font-weight: 800; font-size: 18px;
  text-decoration: none;
  border: none;
  margin-bottom: 12px;
  cursor: pointer;
}
.em-btn:active { transform: scale(0.98); }
.em-btn-911 {
  background: #c62828; color: #fff;
  font-size: 22px; font-weight: 900; letter-spacing: 1px;
  padding: 22px 20px;
  box-shadow: 0 4px 14px rgba(198,40,40,0.4);
}
.em-btn-continue {
  background: var(--surface-2, #262a26);
  color: var(--fg, #e9ede6);
  border: 1px solid var(--border, #3a3f3a);
  font-size: 16px; font-weight: 700;
}
.em-hint {
  margin: 12px 0 0;
  color: var(--muted, #b8bcb5);
  font-size: 14px; line-height: 1.4;
}

/* Procedure screen — steps and contacts */
.em-proc-sub {
  color: var(--muted, #b8bcb5);
  font-size: 15px; line-height: 1.5;
  margin: 0 0 20px;
  padding: 12px 14px;
  background: var(--surface, #1c1f1c);
  border-left: 4px solid #c62828;
  border-radius: 8px;
}
.em-h2 {
  font-size: 16px; font-weight: 800;
  margin: 24px 0 12px;
  color: var(--fg, #e9ede6);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.em-steps {
  margin: 0 0 8px;
  padding-left: 22px;
  color: var(--fg, #e9ede6);
  line-height: 1.5;
}
.em-steps li { margin-bottom: 8px; font-size: 15px; }
.em-steps li strong { color: #ff9a94; }

/* Contact rows — big, thumb-friendly, call + text side by side */
.em-contacts { display: flex; flex-direction: column; gap: 10px; }
.em-contact {
  background: var(--surface, #1c1f1c);
  border: 1px solid var(--border, #3a3f3a);
  border-radius: 14px;
  padding: 12px 14px;
}
.em-contact-primary {
  border-color: #c62828;
  background: rgba(198,40,40,0.08);
}
.em-contact-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.em-contact-name {
  font-weight: 800; font-size: 17px;
  color: var(--fg, #e9ede6);
}
.em-contact-primary .em-contact-name::after {
  content: "CALL FIRST";
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px; font-weight: 900; letter-spacing: 0.5px;
  background: #c62828; color: #fff;
  border-radius: 999px;
  vertical-align: middle;
}
.em-contact-role { font-size: 13px; color: var(--muted, #b8bcb5); }
.em-contact-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 10px;
}
.em-contact-actions.single { grid-template-columns: 1fr; }
.em-action {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 8px;
  border-radius: 10px;
  font-weight: 800; font-size: 15px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  text-align: center;
}
.em-action:active { transform: scale(0.98); }
.em-action-call {
  background: #c62828; color: #fff;
}
.em-action-text {
  background: var(--surface-2, #262a26);
  color: var(--fg, #e9ede6);
  border: 1px solid var(--border, #3a3f3a);
}
/* Stack the number on its own line deliberately and never let it break inside
   itself — a half-width Call button is too narrow for "Call 587-646-5155" on
   one line, and an accidental break after a hyphen made the number hard to
   read at a glance in an emergency. */
.em-action-call > span { display: block; line-height: 1.25; }
.em-action-number {
  display: block; margin-left: 0;
  font-size: 13px; opacity: 0.9; font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.em-contact-actions.single .em-action-call > span { display: inline; }
.em-contact-actions.single .em-action-number { display: inline; margin-left: 6px; }

/* Group text button */
.em-group-actions { margin-top: 20px; }
.em-group-btn { width: 100%; }
.em-group-hint {
  margin: 8px 0 0;
  font-size: 13px; color: var(--muted, #b8bcb5);
  text-align: center;
}

/* Footer note (e.g. Cenovus placeholder note) */
.em-footer-note {
  margin-top: 20px;
  padding: 12px 14px;
  background: rgba(255, 179, 0, 0.1);
  border: 1px solid rgba(255, 179, 0, 0.4);
  border-radius: 10px;
  color: #ffb300;
  font-size: 13px; line-height: 1.5;
}
.em-footer-note:empty { display: none; }

/* Client + incident tiles inherit .tile styling but need a bit of breathing room */
.em-client-tile, .em-incident-tile { margin-bottom: 10px; }

/* Light theme adjustments */
html[data-theme="daybreak"] .em-triage-card { background: #fff; }
html[data-theme="daybreak"] .em-btn-continue { background: #eee; color: #222; border-color: #ccc; }
html[data-theme="daybreak"] .em-contact { background: #fff; border-color: #ddd; }
html[data-theme="daybreak"] .em-contact-primary { background: #ffe8e8; }
html[data-theme="daybreak"] .em-action-text { background: #eee; color: #222; border-color: #ccc; }
html[data-theme="daybreak"] .em-proc-sub { background: #f2f2ee; color: #444; }
html[data-theme="daybreak"] .em-steps { color: #222; }
html[data-theme="daybreak"] .em-contact-name { color: #111; }

/* -------- Emergency PIN gate pill (v44) --------------------------------- */
.em-pin-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin: 4px 0 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.35;
  border: 1px solid;
}
.em-pin-pill[data-state="locked"] {
  background: rgba(255, 179, 0, 0.10);
  border-color: rgba(255, 179, 0, 0.45);
  color: #ffb300;
}
.em-pin-pill[data-state="unlocked"] {
  background: rgba(46, 204, 113, 0.10);
  border-color: rgba(46, 204, 113, 0.45);
  color: #2ecc71;
}
.em-pin-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
.em-pin-pill-text { flex: 1 1 auto; }

html[data-theme="daybreak"] .em-pin-pill[data-state="locked"]   { color: #b57b00; }
html[data-theme="daybreak"] .em-pin-pill[data-state="unlocked"] { color: #1e8449; }

/* ================= CUSTOM THEME (user-picked colors + font) ================= */
html[data-theme="custom"] {
  --green:       var(--custom-green,       #5b9330);
  --green-hover: var(--custom-green-hover, #457026);
  --green-dark:  var(--custom-green-dark,  #304c19);
  --green-light: var(--custom-green-light, #dde8cf);
  --bg:          var(--custom-bg,          #121512);
  --surface:     var(--custom-surface,     #1c201c);
  --surface-2:   var(--custom-surface-2,   #242a24);
  --line:        var(--custom-line,        #2f362f);
  --text:        var(--custom-text,        #f2f5f0);
  --muted:       var(--custom-muted,       #a3aca0);
  --danger:      var(--custom-danger,      #e2564a);
  --warn:        var(--custom-warn,        #d8a13a);
  --font:        var(--custom-font,        'Satoshi', ui-sans-serif, system-ui, sans-serif);
}

/* Light-tone opt-in: mirrors the Daybreak fixups when the user picks a light bg. */
html[data-theme="custom"][data-tone="light"] .em-triage-card    { background: #fff; }
html[data-theme="custom"][data-tone="light"] .em-btn-continue   { background: #eee; color: #222; border-color: #ccc; }
html[data-theme="custom"][data-tone="light"] .em-contact        { background: #fff; border-color: #ddd; }
html[data-theme="custom"][data-tone="light"] .em-contact-primary{ background: #ffe8e8; }
html[data-theme="custom"][data-tone="light"] .em-action-text    { background: #eee; color: #222; border-color: #ccc; }
html[data-theme="custom"][data-tone="light"] .em-proc-sub       { background: #f2f2ee; color: #444; }
html[data-theme="custom"][data-tone="light"] .em-steps          { color: #222; }
html[data-theme="custom"][data-tone="light"] .em-contact-name   { color: #111; }
html[data-theme="custom"][data-tone="light"] .em-pin-pill[data-state="locked"]   { color: #b57b00; }
html[data-theme="custom"][data-tone="light"] .em-pin-pill[data-state="unlocked"] { color: #1e8449; }

/* Custom editor UI */
.custom-editor { display: grid; gap: 14px; margin-top: 12px; }
.custom-editor-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 12px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px;
}
.custom-editor-row label { font-size: 14px; color: var(--text); }
.custom-editor-row input[type="color"] {
  width: 44px; height: 32px; padding: 0; border: 1px solid var(--line);
  border-radius: 6px; background: transparent; cursor: pointer;
}
.custom-editor-row select {
  min-width: 180px; padding: 6px 8px; background: var(--surface);
  color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit;
}
.custom-editor-actions { display: flex; gap: 10px; margin-top: 4px; }
.custom-editor-actions .btn { flex: 1; }

/* =========================================================================
   SITE PHOTO — stamped field camera
   =========================================================================
   The viewfinder deliberately breaks the normal screen padding: the stage is
   a full-bleed 3:4 block so what the crew frames is what gets captured. The
   live overlay mirrors drawStamp() in site-photo.js — if you change a colour
   or a size here, change TONE_FILL there too or the preview will lie.
   ======================================================================= */

.sp-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  margin: 0 0 14px;
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
}
.sp-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Top status strip: accuracy on the left, compass dial on the right. */
.sp-top {
  position: absolute;
  top: 10px; left: 10px; right: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.sp-top .sp-dial { margin-left: auto; }

.sp-pill {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
  background: rgba(11, 20, 15, 0.62);
  color: #fff;
}
.sp-pill-ok   { color: #a7e07a; }
.sp-pill-warn { color: #ffc046; }
.sp-pill-dim  { color: var(--muted); }

/* Two-part dial. The N marker rotates to sit over real true north; the fixed
   index notch at 12 o'clock is the direction the lens is pointing. Reading the
   gap between them is how the crew sanity-checks the stamped bearing. */
.sp-dial {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(11, 20, 15, 0.62);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
}
/* Fixed index notch — what you are facing. */
.sp-dial::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  margin-left: -4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid #fff;
  z-index: 2;
}
.sp-dial-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transition: transform 140ms linear;
}
.sp-dial-n {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  font-style: normal;
  color: #a7e07a;
}
.sp-heading-read {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(11, 20, 15, 0.62);
  backdrop-filter: blur(6px);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Live preview of the burned-in block. */
.sp-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(11,20,15,0) 0%, rgba(11,20,15,0.68) 35%, rgba(11,20,15,0.86) 100%);
  pointer-events: none;
}
/* Single-line-and-clip, matching ellipsize() in site-photo.js. If a long
   description wrapped here but got clipped in the JPEG, the preview would be
   lying about what the crew is actually capturing. */
.sp-ov-line {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.42;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Last line sits beside the watermark, so it surrenders that width. */
.sp-overlay .sp-ov-line:last-child { padding-right: 46px; }
.sp-ov-warn   { color: #ffb020; }
.sp-ov-dim    { color: #c9d2cc; }
/* Lightened tint of --green (#5b9330). The brand green is too dark to stay
   legible burned into a photograph, so the stamp uses this tint instead. */
.sp-ov-accent { color: #9ccc5a; }

.sp-wm {
  position: absolute;
  right: 12px; bottom: 12px;
  height: 30px;
  width: auto;
  opacity: 0.92;
  z-index: 3;
  pointer-events: none;
}

.sp-tags { margin-bottom: 14px; }
.sp-tags .field { margin-bottom: 12px; }

/* Shutter bar. */
.sp-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 4px 0 8px;
}
.sp-bar-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 11px 0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.sp-bar-btn.active { border-color: var(--green); color: var(--green); }

.sp-shutter {
  appearance: none;
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 4px solid var(--green);
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 90ms var(--ease);
}
.sp-shutter span {
  display: block;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--green);
  transition: background 90ms var(--ease);
}
.sp-shutter:active { transform: scale(0.93); }
.sp-shutter:disabled { opacity: 0.5; cursor: default; }

/* Review. */
.sp-review-img {
  width: 100%;
  border-radius: var(--r);
  display: block;
  margin-bottom: 14px;
  background: #000;
}
.sp-review-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 14px;
}
.sp-meta-line {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Gallery. */
.sp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 18px;
}
.sp-cell {
  appearance: none;
  border: 0;
  padding: 0;
  position: relative;
  aspect-ratio: 1;
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
}
/* Biased above centre so the square crop favours the subject rather than the
   burned-in stamp band along the bottom of the photo. */
.sp-cell img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block; }
.sp-cell-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 5px 4px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-align: left;
  /* Opaque enough to sit over the photo's own burned-in stamp without the two
     sets of text colliding at thumbnail size. */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.82) 45%, rgba(0,0,0,0.94) 100%);
}

/* ============ Roles matrix editor (Compliance Table) ============ */
.safety-role-col { display: inline-flex; align-items: center; }
.safety-role-select {
  font: inherit; font-size: 12px; padding: 4px 6px;
  border: 1px solid var(--border, #d0d5c2); border-radius: 6px;
  background: #fff; color: var(--ink, #1a1a1a); max-width: 130px;
}
.safety-role-chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: #dde8cf; color: #304c19; font-size: 12px; font-weight: 500;
}
.safety-compliance-head, .safety-compliance-row {
  grid-template-columns: 1.6fr 1.2fr 1fr 1fr 1fr 1fr 1fr !important;
}
@media (max-width: 720px) {
  .safety-compliance-head { display: none; }
  .safety-compliance-row { grid-template-columns: 1fr !important; gap: 4px; }
}

/* Roles matrix modal */
.safety-roles-modal { max-width: 96vw; width: 1400px; max-height: 92vh; }
.safety-roles-modal .modal-body { display: flex; flex-direction: column; gap: 12px; }
.safety-roles-toolbar { display: flex; gap: 8px; }
.safety-roles-grid-wrap {
  overflow: auto; max-height: 62vh;
  border: 1px solid var(--border, #d0d5c2); border-radius: 8px;
}
.safety-roles-grid { border-collapse: collapse; font-size: 12px; width: max-content; }
.safety-roles-grid th, .safety-roles-grid td {
  border-bottom: 1px solid #eee; border-right: 1px solid #eee;
  padding: 4px 6px; text-align: left; vertical-align: middle;
  background: #fff;
}
.safety-roles-grid thead th {
  position: sticky; top: 0; background: #dde8cf; color: #304c19;
  font-weight: 600; z-index: 2;
}
.safety-roles-grid tbody tr:hover td { background: #f7fbee; }
.safety-roles-section, .safety-roles-course { min-width: 100px; }
.safety-roles-rolename {
  width: 100px; font: inherit; font-size: 11px; padding: 2px 4px;
  border: 1px solid transparent; background: transparent; color: inherit;
  font-weight: 600;
}
.safety-roles-rolename:focus, .safety-roles-section-in:focus, .safety-roles-course-in:focus {
  outline: none; border-color: #5b9330; background: #fff;
}
.safety-roles-section-in, .safety-roles-course-in {
  width: 100%; font: inherit; padding: 2px 4px;
  border: 1px solid transparent; background: transparent;
}
.safety-roles-req { font: inherit; font-size: 12px; padding: 2px 4px; }
.safety-roles-del {
  border: none; background: transparent; color: #a33; cursor: pointer;
  font-size: 16px; padding: 0 4px; line-height: 1;
}
.safety-roles-del:hover { color: #f00; }
.safety-roles-actions { display: flex; align-items: center; gap: 12px; }
.safety-roles-status { color: #5f5f5f; font-size: 13px; }
.safety-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ================= LIGHTNING WATCH ================================ */
.lx-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 16px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  margin: 12px 0;
}
.lx-banner[data-state="ok"] {
  background: var(--green-light); border-color: var(--green);
  color: var(--green-dark);
}
.lx-banner[data-state="warn"] {
  background: #3a2f14; border-color: var(--warn); color: #ffd77a;
}
.lx-banner[data-state="danger"] {
  background: #3a1c18; border-color: var(--danger); color: #ffb0a8;
  animation: lxPulse 1.8s ease-in-out infinite;
}
.lx-banner[data-state="unknown"] {
  background: var(--surface-2); border-color: var(--line); color: var(--muted);
}
@keyframes lxPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 86, 74, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(226, 86, 74, 0); }
}
.lx-banner-icon svg { display: block; }
.lx-banner-text { flex: 1; min-width: 0; }
.lx-banner-status {
  font-family: Satoshi, system-ui, sans-serif;
  font-weight: 900; font-size: 20px; line-height: 1.15;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.lx-banner-sub { font-size: 14px; margin-top: 2px; }

.lx-countdown {
  text-align: center; padding: 20px 12px;
  border: 2px solid var(--danger); border-radius: var(--r);
  background: var(--surface); margin: 12px 0;
}
.lx-countdown-lbl {
  font-size: 12px; letter-spacing: 2px; color: var(--danger);
  font-weight: 700; text-transform: uppercase;
}
.lx-countdown-val {
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-weight: 700; font-size: 56px; line-height: 1;
  color: var(--danger); margin: 6px 0;
  font-variant-numeric: tabular-nums;
}
.lx-countdown-sub { font-size: 13px; color: var(--muted); }

.lx-meta {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); margin: 12px 0;
  font-size: 13px;
}
.lx-meta > div { display: flex; flex-direction: column; }
.lx-meta span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; }
.lx-meta b { color: var(--text); font-weight: 600; font-size: 14px; margin-top: 2px; }

.lx-map-wrap {
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line); margin: 12px 0;
}
#lxMap { width: 100%; height: 260px; background: var(--surface-2); }

.lx-actions { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
/* ---- Site Photo: landscape gate ------------------------------------------
   The prompt is shown while the phone is upright, so it must read correctly
   in portrait -- it is deliberately NOT rotated. Once the crew turns the
   phone the prompt disappears and the shutter unlocks, so a rotated version
   would never be read anyway. */
.sp-rotate-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0.5rem 0.75rem 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid #ffb020;
  border-radius: 10px;
  background: rgba(255, 176, 32, 0.12);
  color: #ffb020;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
}
.sp-rotate-hint[hidden] { display: none; }

/* A phone outline that tips over, so the instruction reads at a glance for a
   crew member who is not going to stop and read a sentence. */
.sp-rotate-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 24px;
  border: 2px solid currentColor;
  border-radius: 3px;
  animation: sp-tip 2.2s ease-in-out infinite;
}
@keyframes sp-tip {
  0%, 30%   { transform: rotate(0deg); }
  55%, 85%  { transform: rotate(-90deg); }
  100%      { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-rotate-icon { animation: none; transform: rotate(-90deg); }
}

/* Disabled shutter has to look disabled, or the crew taps it repeatedly and
   assumes the app is broken rather than that it is waiting on them. */
.sp-shutter[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ==================== DEVICE IDENTITY ====================================
   "Who is holding this device?" first-run gate, and the Settings row that
   shows and changes the answer. Reuses .unit-group-head from the Inventory
   location picker so both grouped pickers read identically. */
.identity-lede {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: -4px 0 18px;
  max-width: 34em;
}
.identity-chips { margin-bottom: 4px; }

/* The device holder is marked with a leading dot rather than a colour change,
   so it stays legible against .pill.on in every theme. */
.pill.is-me::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 7px;
  vertical-align: 1px;
}
.pill.on.is-me::before { background: #0d1607; }

/* Collapsed "Submitting as Brandon · Change" row. One component shared by the
   five modules that need a name — see whoBarRender() in app.js. Sits directly
   above the chip grid it replaces and expands it on tap. */
.who-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.who-bar-verb { flex: 0 0 auto; color: var(--muted); font-size: 14px; }
.who-bar-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.who-bar-name::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 7px;
  vertical-align: 1px;
}
.who-bar-action {
  flex: 0 0 auto;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
/* Expanded: the bar becomes a header for the open grid below it. */
.who-bar[aria-expanded="true"] { margin-bottom: 9px; }

/* Commit 10 (SW ksi-field-v115): the Reimbursement claimant grid was retired
   in favour of a read-only "Filing as …" label sourced from the signed-in
   Entra session. Styled to match .who-bar so the surrounding form still
   reads as one visual family, but with no clickable affordance because the
   value is not user-editable — to file under a different name, that person
   signs in from the top-bar Entra chip. */
.claimant {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.claimant-verb { flex: 0 0 auto; color: var(--muted); font-size: 14px; }
.claimant-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.claimant-name::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 7px;
  vertical-align: 1px;
}
.claimant-hint {
  flex: 1 1 auto;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.identity-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 26px;
}
.identity-actions .btn-lg { flex: 1; }
.identity-foot { margin-top: 12px; }

/* Settings › This device */
.identity-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 18px;
}
.identity-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.identity-row-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.identity-row-name { font-size: 1.15rem; font-weight: 800; }
.identity-row-sub { line-height: 1.4; }
.identity-row .btn { flex: none; }

/* ==================== ADMIN > EMPLOYEE ROSTER ==============================
   One card per employee. Legal name and the derived chip name on the left,
   three actions on the right: Rename, Nickname, and Deactivate/Reactivate.
   ========================================================================= */
.roster-add {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px; margin-bottom: 18px;
}
.roster-add .other-input { margin-top: 8px; width: 100%; }
.roster-add-hint { margin: 8px 0 0; }
.roster-add-second { margin-top: 16px; }
.roster-optional {
  font-weight: 400; font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.roster-add .form-error { margin: 10px 0 0; }
.roster-add .btn { margin-top: 12px; }

.roster-list { display: flex; flex-direction: column; gap: 10px; }

.roster-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 14px;
}
.roster-row.is-off { opacity: 0.62; border-style: dashed; }

.roster-main { flex: 1 1 auto; min-width: 0; }
.roster-name {
  font-weight: 700; font-size: 16px; color: var(--text);
  /* Long legal names must ellipsize, never push the buttons off screen. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.roster-sub { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.roster-sub strong { color: var(--green-light); font-weight: 700; }
.roster-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; vertical-align: 1px;
}

/* Grid, not flex: 1fr columns guarantee equal button widths, where
   flex-basis:0 left a 2px rounding difference between them. Fixed 208px so
   two 13px labels fit without the column collapsing around "Nickname". */
.roster-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: 0 0 208px; }
.roster-acts .btn { width: 100%; height: 38px; min-height: 38px; padding: 0 10px; font-size: 13px; }
/* style.css has a global `.btn + .btn { margin-top: 10px }` for stacked
   full-width buttons. Inside a gap-spaced grid it double-spaces the pair and
   pushes later buttons out of line, so it has to be cancelled. */
.roster-acts .btn + .btn { margin-top: 0; }
/* Row 1: Details spans full-width — it is the new gate to the crown record and
   the most useful action here now, so it sits on its own line above the edits.
   Row 2: Rename + Nickname share a row (they were the old two-column pair).
   Row 3: Deactivate/Reactivate gets its own full-width row. It is the only
   action here with a consequence, so isolating it from the edits makes it
   harder to hit by accident in a moving truck. */
.roster-acts .btn:nth-child(1) { grid-column: 1 / -1; }
.roster-acts .btn:nth-child(4) { grid-column: 1 / -1; }

.roster-note {
  background: var(--surface-2); border-left: 3px solid var(--warn);
  border-radius: 6px; padding: 10px 12px; margin: 0 0 14px;
}
.roster-showoff { margin: 6px 0; align-self: flex-start; }

/* Narrow phones: the name gets the full width and the actions sit under it. */
@media (max-width: 400px) {
  .roster-row { flex-direction: column; align-items: stretch; }
  .roster-acts { flex: 1 1 auto; }
}

/* --- Inventory intake: filter, added-item tag, queue note ---------------
   All token-based (--surface/--line/--muted) so daybreak and the custom
   light tone inherit correctly without a per-theme override, unlike the
   older hardcoded rgba() rules on the Search screen above. */
.inv-filter-box {
  position: sticky;
  top: calc(64px + env(safe-area-inset-top, 0px));
  z-index: 5;
  background: var(--bg);
  padding: 8px 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
#invIntakeFilterInput {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
  /* Safari draws its own pill and clear button on type=search. */
  -webkit-appearance: none;
  appearance: none;
}
#invIntakeFilterInput::-webkit-search-cancel-button { display: none; }
#invIntakeFilterInput::placeholder { color: var(--muted); }
.inv-filter-clear {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1;
  /* 44px tap target; the glyph alone is far too small for a gloved thumb. */
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}
.inv-filter-empty { margin: 2px 0 12px; }

/* An item this crew added on this location, not stock the truck is meant to
   carry. Same pill as .roster-tag so the two read as one language. */
.inv-row-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; vertical-align: 1px;
}

.inv-queue-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--text);
  font-size: 14px;
}

/* Receive-Shipment summary line — renders live under the form so the
   crew reads back what they are about to save before they tap. */
.inv-receive-summary {
  margin: 12px 0 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-size: 14px;
  min-height: 1em;
}

/* Shipment log — one strip per day, delta on the left in green/red. */
.inv-receipts-list { display: flex; flex-direction: column; gap: 14px; }
.inv-receipt-day h3 {
  margin: 0 0 6px; font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
}
.inv-receipt-row {
  display: grid; grid-template-columns: 68px 1fr; gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  margin-bottom: 8px;
}
.inv-receipt-qty {
  font-size: 20px; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
}
.inv-receipt-qty.pos { color: var(--ok, #7ee787); }
.inv-receipt-qty.neg { color: var(--warn); }
.inv-receipt-line { font-size: 15px; }
.inv-receipt-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.inv-receipt-bol {
  color: var(--text); text-decoration: underline; font-weight: 600;
}

/* Receive-Shipment BOL photo picker + status + thumbnail. */
.inv-rcp-bol-row { display: flex; gap: 8px; align-items: center; }
.inv-rcp-bol-pick { flex: 1; text-align: center; cursor: pointer; }
.inv-rcp-bol-thumb {
  margin-top: 10px;
  max-width: 100%; max-height: 200px;
  border-radius: 10px; border: 1px solid var(--line);
  display: block;
}
#invRcpBolStatus.warn { color: var(--warn); }
#invRcpBolStatus.ok   { color: var(--ok, #7ee787); }

/* Full-screen BOL viewer in Admin shipment log. */
.inv-bol-viewer {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.inv-bol-viewer img {
  max-width: 100%; max-height: 100%;
  border-radius: 6px; box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}

/* ================= ASK SIGNET (Signet Bot) ==============================
   One column, thumb-first. The question box sits at the top so the crew is
   never scrolling to find it, and answers stack newest-first underneath. */
.bot-ask {
  margin-top: 14px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.bot-ask textarea {
  width: 100%;
  min-height: 84px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  resize: vertical;
}
.bot-ask textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.bot-ask-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.bot-ask-row .bot-count {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bot-ask-row #botAskBtn { min-width: 104px; }
.bot-mic { display: inline-flex; align-items: center; gap: 6px; }
.bot-mic.on { background: var(--green); color: #fff; border-color: var(--green); }

.bot-thinking {
  margin: 10px 2px 0;
  font-size: 0.88rem;
  color: var(--muted);
}
.bot-chips { margin-top: 12px; }
.bot-chip {
  text-align: left;
  font-size: 0.84rem;
  line-height: 1.25;
  white-space: normal;
}

.bot-answers { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.bot-card {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 12px;
}
.bot-card.is-offline { border-left-color: var(--warn); }
.bot-card.is-error   { border-left-color: var(--danger); }
.bot-card.is-unknown { border-left-color: var(--muted); }
/* Amber, not red. The answer service being down is not the crew's fault and not
   an error they can act on — they still got usable rows off the phone. Red is
   reserved for things they must do something about. */
.bot-card.is-degraded { border-left-color: var(--warn); }

.bot-q {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.bot-a { margin: 0; font-size: 1rem; line-height: 1.5; white-space: pre-wrap; }
.bot-dim { color: var(--muted); }

.bot-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* Fully tokenised on purpose. A hardcoded green fill went unreadable in
   Daybreak (pale text on a pale fill) and stayed KSI green in Midnight while
   the rest of the screen went blue. Dark accent text on the light accent fill
   holds contrast in all three themes. */
.bot-src-chip {
  padding: 3px 9px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--green-dark);
  background: var(--green-light);
  border: 1px solid var(--green);
  border-radius: 999px;
}
.bot-card-actions { margin-top: 12px; }

/* Meta text and Copy sit on one baseline so the card keeps a flat bottom edge
   whether or not there is anything to say in the meta line. */
.bot-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.bot-meta { margin: 0; font-size: 0.76rem; color: var(--muted); }
.bot-copy {
  flex: 0 0 auto;
  padding: 4px 10px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  /* Deliberately small and quiet. It is a convenience for the office, not
     something a gloved thumb should hit while reaching for the action button. */
}
.bot-copy:active { background: var(--green-light); border-color: var(--green); color: var(--green-dark); }

/* Closest matches under a "not in Signet" answer. Rules it off so nobody reads
   the raw rows as though the model had endorsed them. */
.bot-closest {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.bot-off-head {
  margin: 14px 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.bot-off-list { margin: 0; padding-left: 18px; font-size: 0.92rem; line-height: 1.45; }
.bot-off-list li { margin-bottom: 6px; }

.bot-foot { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.bot-foot p { margin: 0 0 8px; font-size: 0.8rem; line-height: 1.45; color: var(--muted); }


/* ================= ADMIN: CLICK COUNTERS (v1.0) =========================
 * Replaces the inline .tally-chip that used to sit on each tool tile.
 * Built for a 414px phone held one-handed: label on the left, the two
 * numbers right-aligned in fixed-width tabular columns so rows line up
 * vertically no matter how long the label is. Labels wrap; numbers never do.
 * ====================================================================== */
.usage-tabs {
  display: flex; gap: 8px; margin: 16px 0 12px;
}
.usage-tab {
  flex: 1 1 0; min-width: 0;
  padding: 10px 6px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--muted); font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.usage-tab.is-on {
  background: var(--green); border-color: var(--green); color: #fff;
}

.usage-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.usage-status { font-size: 12px; color: var(--muted); min-width: 0; }
.usage-bar .link { font-size: 13px; flex: 0 0 auto; }

/* Headline row. Three equal cells; two-cell variant for the leadership tab. */
.usage-hero {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 6px;
}
.usage-hero-2 { grid-template-columns: repeat(2, 1fr); }
.usage-hero-cell {
  padding: 12px 8px; border-radius: var(--r); text-align: center;
  background: var(--surface-2); border: 1px solid var(--line);
  min-width: 0;
}
.usage-hero-n {
  display: block; font-size: 20px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.usage-hero-k {
  display: block; margin-top: 3px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em; color: var(--muted); line-height: 1.3;
}

.usage-group { margin-top: 22px; }
.usage-list { display: flex; flex-direction: column; gap: 8px; }
.usage-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}
.usage-row-label {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.35;
  overflow-wrap: anywhere;
}
.usage-row-nums { flex: 0 0 auto; display: flex; gap: 10px; }
.usage-n {
  display: flex; flex-direction: column; align-items: flex-end;
  min-width: 46px;
}
.usage-n i {
  font-style: normal; font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.usage-n b {
  font-size: 15px; font-weight: 800; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.usage-n-you b { color: var(--green); }
.usage-n-ksi b { color: var(--text); }

.usage-empty {
  margin: 14px 0; padding: 14px;
  border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line);
  font-size: 13px; line-height: 1.5; color: var(--muted);
}

/* Leadership tab */
.usage-lock {
  padding: 16px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line);
}
.usage-lock .hint { margin: 0 0 12px; }
.usage-privacy { margin: 0 0 14px !important; }

.usage-people { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.usage-person {
  border-radius: var(--r); background: var(--surface); border: 1px solid var(--line);
  overflow: hidden;
}
.usage-person > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 13px; cursor: pointer; list-style: none;
}
.usage-person > summary::-webkit-details-marker { display: none; }
.usage-person-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 15px; font-weight: 700; color: var(--text);
  overflow-wrap: anywhere;
}
.usage-person-total {
  flex: 0 0 auto; font-size: 16px; font-weight: 800; color: var(--green);
  font-variant-numeric: tabular-nums;
}
.usage-person-body { padding: 0 13px 13px; }
.usage-person-meta { margin: 0 0 10px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.usage-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.usage-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 5px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.usage-chip b {
  font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums;
}

@media (max-width: 360px) {
  .usage-hero-n { font-size: 18px; }
  .usage-tab { font-size: 12px; padding: 9px 4px; }
  .usage-n { min-width: 40px; }
}

/* ---------------- Reimbursement module (PR 1) ------------------------ */
/* Two-panel intro block above the pickers so crew see the "no photo, no
   reimbursement" and pay-timing rules before they start filling anything
   in. Uses surface + muted-text tokens so it stays inside the dark theme. */
.guide-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin: 0 0 18px; font-size: 14px; color: var(--muted);
}
.guide-panel p { margin: 0 0 8px; }
.guide-panel p:last-child { margin-bottom: 0; }
.guide-panel strong { color: var(--text); }

/* Plain-input class used by the reimburse form so we don't have to write
   `.receipt-form input` selectors. Matches the existing input styling. */
.input {
  display: block; width: 100%; padding: 12px 14px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  font: inherit; font-size: 16px;
  -webkit-appearance: none; appearance: none;
}
textarea.input { resize: vertical; min-height: 56px; }
.input:focus { outline: 2px solid var(--green); outline-offset: 1px; }

.counter { font-size: 12px; color: var(--muted); text-align: right; margin: 4px 0 14px; font-variant-numeric: tabular-nums; }

/* Send-bar wrapper keeps the Submit button visually grouped without hiding
   the status hint below it. Not sticky — the receipt module already owns
   the sticky pattern for compress-and-send flows. */
.send-bar { margin: 18px 0 8px; }

/* Photo preview thumbnail used inside #reimburseShot. */
.shot-thumb {
  display: block; width: 100%; max-width: 260px; margin: 0 auto;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
}

/* Status line under the send bar. Info is muted; err flips it to danger. */
#reimburseStatus[data-kind="err"] { color: var(--danger); }

/* ============ FUEL MODULE (PR #2) ============ */

.fuel-review { display: flex; flex-direction: column; gap: 6px; }
.fuel-thumb {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 12px;
  background: #0d1a06 center/cover no-repeat; margin-bottom: 8px;
  position: relative;
}
.fuel-thumb-status {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(0,0,0,0.55); color: #eaf3e4;
  font-size: 12px; padding: 4px 8px; border-radius: 999px;
}
.fuel-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.radio-row { display: flex; gap: 8px; }
.radio-row-wrap { flex-wrap: wrap; }
.radio-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface-2);
  font-weight: 600; font-size: 15px; cursor: pointer;
}
.radio-chip input { position: absolute; opacity: 0; pointer-events: none; }
.radio-chip:has(input:checked) { background: var(--green); color: #0d1607; border-color: var(--green); }

.fuel-unit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fuel-unit-chip { justify-content: center; padding: 12px 8px; }
.fuel-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-left: 6px; vertical-align: middle;
}
.fuel-dot-seasonal { background: #f0b429; }
.fuel-unit-legend { color: var(--muted); font-size: 13px; margin-top: 6px; }

.fuel-admin-toolbar { display: flex; gap: 8px; margin: 4px 0 12px; }
.fuel-admin-list { display: flex; flex-direction: column; gap: 8px; }
.fuel-admin-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface);
}
.fuel-admin-main { flex: 1 1 auto; min-width: 0; }
.fuel-admin-unit { font-weight: 800; font-size: 16px; }
.fuel-admin-meta { color: var(--muted); font-size: 13px; }
.fuel-admin-ref { display: block; font-size: 12px; color: var(--muted); word-break: break-all; }
.fuel-admin-empty { color: var(--muted); }

/* ================================================================
   HEAT STRESS FIELD CHECK (HSE-001)  —  heat-stress.js
   ================================================================ */

/* ---- auto-fill bar ---- */
.hs-auto-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 4px 0 14px;
}
.hs-src {
  color: var(--muted); font-size: 13px; line-height: 1.35;
  flex: 1 1 100%;
}
/* Specificity has to beat `.field label em`, which sets colour: var(--green)
   and would otherwise paint this chip KSI green on a KSI green background. */
.field label em.hs-auto,
.hs-auto {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  border-radius: 999px; font-size: 10px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--green-dark); color: var(--green-light);
  border: 1px solid var(--green); vertical-align: middle;
}
.hs-sec {
  margin: 26px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.hs-hint { color: var(--muted); font-size: 13px; margin: 6px 0 0; line-height: 1.45; }

/* ---- band card ---- */
.hs-band {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px; margin: 12px 0;
  border-radius: var(--r); border: 1px solid var(--line);
  background: var(--surface-2); border-left-width: 5px;
}
.hs-band-ok    { border-left-color: var(--green);  }
.hs-band-watch { border-left-color: #c9c23a;       }
.hs-band-warn  { border-left-color: var(--warn);   }
.hs-band-stop  { border-left-color: var(--danger); }
.hs-band-empty { border-left-color: var(--line); color: var(--muted); }
.hs-band-num {
  flex: 0 0 auto; min-width: 62px; text-align: center;
  font-size: 34px; font-weight: 900; line-height: 1;
  padding: 6px 4px 0;
}
.hs-band-ok    .hs-band-num { color: var(--green);  }
.hs-band-watch .hs-band-num { color: #d7d04a;       }
.hs-band-warn  .hs-band-num { color: var(--warn);   }
.hs-band-stop  .hs-band-num { color: var(--danger); }
.hs-band-body { flex: 1 1 auto; min-width: 0; }
.hs-band-lbl {
  font-size: 11px; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.hs-band-name { font-size: 17px; font-weight: 800; line-height: 1.25; }
.hs-band-req  { font-size: 14px; color: var(--text); margin-top: 6px; line-height: 1.45; }
.hs-band-math { font-size: 12px; color: var(--muted); margin-top: 8px; }
.hs-band-deg { font-size: 16px; font-weight: 800; vertical-align: super; opacity: 0.75; }
/* Both work-rest cycles live in the band card: the one that applies today is
   emphasised, the other stays visible because activities change mid-shift. */
.hs-band-cycles {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 9px; font-size: 13px; color: var(--text);
}
.hs-band-cycles b { font-variant-numeric: tabular-nums; }
.hs-band-alt { color: var(--muted); }
.hs-hint-warn { color: var(--warn); }

/* ---- conditions drawer ----
   The six weather fields collapse behind a summary line that shows the numbers
   they produce, so the common case — auto-fill got it right — needs no taps. */
.hs-drawer {
  margin: 12px 0; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); overflow: hidden;
}
.hs-drawer > summary {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 15px; cursor: pointer; list-style: none;
}
.hs-drawer > summary::-webkit-details-marker { display: none; }
.hs-drawer > summary::after {
  content: ''; position: absolute; right: 18px; margin-top: 6px;
  width: 8px; height: 8px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: rotate(45deg);
}
.hs-drawer > summary { position: relative; padding-right: 40px; }
.hs-drawer[open] > summary::after { transform: rotate(-135deg); }
.hs-drawer[open] > summary { border-bottom: 1px solid var(--line); }
.hs-drawer-t {
  font-size: 11px; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted);
}
.hs-drawer-v { font-size: 14px; color: var(--text); line-height: 1.4; }
.hs-drawer-v b { font-variant-numeric: tabular-nums; }
.hs-drawer-body { padding: 4px 15px 15px; }

/* ---- policy flags ---- */
.hs-flags { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.hs-flag {
  padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.4;
  border: 1px solid var(--line); background: var(--surface);
  border-left: 4px solid var(--line);
}
.hs-flag-ok    { border-left-color: var(--green);  }
.hs-flag-watch { border-left-color: #c9c23a;       }
.hs-flag-warn  { border-left-color: var(--warn);   }
.hs-flag-stop  {
  border-left-color: var(--danger);
  background: rgba(226, 86, 74, 0.10); font-weight: 700;
}

/* ---- required control checklist ---- */
.hs-checks { display: flex; flex-direction: column; gap: 8px; }
.hs-check {
  display: flex; gap: 11px; align-items: flex-start; text-align: left;
  width: 100%; padding: 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 15px; line-height: 1.4;
}
.hs-check.on { border-color: var(--green); background: var(--green-dark); }
.hs-box {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid var(--muted); display: flex;
  align-items: center; justify-content: center;
  font-size: 15px; font-weight: 900; line-height: 1; color: transparent;
}
.hs-check.on .hs-box {
  border-color: var(--green-light); background: var(--green);
  color: #fff;
}
.hs-check-txt { flex: 1 1 auto; min-width: 0; }
.hs-req-tag {
  display: inline-block; margin-left: 7px; padding: 1px 7px;
  border-radius: 999px; font-size: 10px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(226, 86, 74, 0.16); color: #f0a49c;
  border: 1px solid var(--danger);
}
/* A modifier, not a panel: applied to .field and .hs-check to mark the exact
   control that blocked filing, so the scroll-to on submit lands on it. */
.field.hs-missing > label { color: #f0a49c; }
.field.hs-missing .input,
.field.hs-missing select,
.field.hs-missing textarea,
.field.hs-missing .hs-sig {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(226, 86, 74, 0.16);
}
.hs-check.hs-missing {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(226, 86, 74, 0.16);
}
.hs-check.hs-missing .hs-box { border-color: var(--danger); }

/* ---- Go / No-Go ---- */
.hs-decision { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hs-dec {
  padding: 16px 10px; border-radius: 12px; cursor: pointer;
  border: 2px solid var(--line); background: var(--surface);
  color: var(--muted); font: inherit; font-size: 17px; font-weight: 900;
  letter-spacing: 0.06em;
}
.hs-dec.on.go   { border-color: var(--green);  background: var(--green);  color: #fff; }
.hs-dec.on.nogo { border-color: var(--danger); background: var(--danger); color: #fff; }
.hs-dec-go   { color: var(--green);  font-weight: 900; }
.hs-dec-nogo { color: var(--danger); font-weight: 900; }

/* ---- signature ---- */
.hs-sig {
  width: 100%; height: 160px; display: block;
  border: 1px dashed var(--line); border-radius: 12px;
  background: #fff; touch-action: none; cursor: crosshair;
}
.hs-sig-actions {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 8px; font-size: 13px;
}
.hs-sig-state { color: var(--muted); }

/* ---- deficiency / action log ---- */
.hs-def-body { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.hs-def-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface);
}
.hs-def-n {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-2); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.hs-def-fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.hs-def-x {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer;
}
.hs-def-x:hover { border-color: var(--danger); color: var(--danger); }

/* ---- crew sign-on ---- */
.hs-signs-body { display: flex; flex-direction: column; gap: 10px; }
.hs-signs { display: flex; flex-direction: column; gap: 10px; }

/* ---- filed screen ---- */
.hs-filed-mark {
  display: flex; gap: 12px; align-items: center;
  padding: 14px; border-radius: var(--r); margin-bottom: 14px;
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: 15px; line-height: 1.45;
}
.hs-filed-ok     { border-left: 5px solid var(--green); }
.hs-filed-queued { border-left: 5px solid var(--warn);  }
.hs-filed-card {
  padding: 4px 14px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface); margin-bottom: 14px;
}
.hs-filed-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px;
}
.hs-filed-row:last-child { border-bottom: 0; }
.hs-filed-row span { color: var(--muted); flex: 0 0 auto; }
.hs-filed-row b { text-align: right; word-break: break-word; }
.hs-preview {
  white-space: pre-wrap; word-break: break-word;
  padding: 13px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 12.5px; line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  max-height: 300px; overflow: auto;
}

/* ---- history list ---- */
.hs-list { display: flex; flex-direction: column; gap: 10px; }
.hs-list-row {
  padding: 12px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface);
}
.hs-list-head { display: flex; gap: 11px; align-items: center; }
.hs-list-adj {
  flex: 0 0 auto; min-width: 46px; text-align: center;
  padding: 5px 6px; border-radius: 9px;
  background: var(--surface-2); border-left: 4px solid var(--line);
  font-size: 19px; font-weight: 900; line-height: 1.1;
}
.hs-list-meta {
  display: flex; flex-wrap: wrap; gap: 5px 10px;
  margin-top: 8px; font-size: 13px; color: var(--muted);
  align-items: center;
}
.hs-list-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hs-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
}
.hs-pill-filed  { background: var(--green-dark); color: var(--green-light); }
.hs-pill-queued { background: rgba(216, 161, 58, 0.18); color: #eec877; }

/* The work-rest cycle fields hold whole sentences. They wrap instead of
   clipping, and they never scroll: the crew must be able to read the whole
   instruction without tapping into the field. */
.hs-cycle {
  resize: vertical;
  min-height: 60px;
  line-height: 1.35;
  overflow: hidden;
}

/* ---- Admin › Document Consolidator ------------------------------------
   Themed entirely through the CSS variables, so it follows KSI, Midnight and
   Daybreak without a per-theme override. */
.dc-privacy { padding:10px 12px; border-left:3px solid var(--green); border-radius:0 8px 8px 0; background:var(--surface); color:var(--text); font-size:13px; }
.dc-ocr-why { margin:-8px 0 16px; }
.dc-opts { margin:0 0 18px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.dc-opts > .field:last-child { margin-bottom:0; }
.dc-run { width:100%; margin:0 0 10px; }
.dc-prog { margin:6px 0 14px; }
.dc-bar { height:8px; overflow:hidden; border-radius:999px; background:var(--surface-2); }
.dc-bar-fill { width:0; height:100%; border-radius:999px; background:var(--green); transition:width .2s var(--ease); }
.dc-prog-text { margin:7px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dc-status-good { border-color:var(--green) !important; color:var(--text); }
.dc-status-warn { border-color:var(--warn) !important; color:var(--warn); }
.dc-status-bad { border-color:var(--danger) !important; color:var(--danger); }
.dc-downloads { margin:14px 0 4px; }
.dc-dl { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; margin:0 0 8px; text-align:left; }
.dc-dl-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dc-dl-size { flex:0 0 auto; color:var(--muted); font-size:12px; font-weight:400; }

/* ---- Admin › The Ledger -------------------------------------------------
   Read-only summary of the Signet event log for one month. Themed via
   variables so it inherits KSI, Midnight, and Daybreak automatically. */
.ledger-controls { display:flex; gap:12px; align-items:end; flex-wrap:wrap; margin:0 0 12px; }
.ledger-month-label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.ledger-month-input { padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); font-size:14px; }
.ledger-status { min-height:1.4em; margin:0 0 10px; font-size:13px; color:var(--muted); }
.ledger-status-error { color:var(--danger); }
.ledger-totals { padding:12px 14px; margin:0 0 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.ledger-total-events { font-size:16px; margin:0 0 4px; }
.ledger-total-events strong { font-size:22px; }
.ledger-total-by-type { font-size:13px; color:var(--muted); }
.ledger-total-by-type strong { color:var(--text); }
.ledger-truncated-inline { color:var(--warn); font-size:12px; }
.ledger-buckets { display:flex; flex-direction:column; gap:14px; }
.ledger-group { padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.ledger-group-title { margin:0 0 8px; font-size:15px; font-weight:600; color:var(--text); }
.ledger-row { display:flex; gap:10px; align-items:baseline; padding:6px 0; border-top:1px solid var(--line); }
.ledger-row:first-of-type { border-top:none; padding-top:0; }
.ledger-row-count { flex:0 0 auto; min-width:2.5em; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
.ledger-row-type { flex:0 0 auto; color:var(--text); font-size:14px; }
.ledger-row-window { flex:1 1 auto; text-align:right; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.ledger-capped-tag { margin-left:6px; padding:1px 6px; border-radius:999px; background:var(--warn); color:#000; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.ledger-empty { padding:20px; text-align:center; color:var(--muted); font-style:italic; border:1px dashed var(--line); border-radius:12px; }
.ledger-footnote { margin-top:16px; font-size:12px; color:var(--muted); }

/* --- Employee Record (crown component 6, read-only) -------------------
   The record is a stack of small sections. Each section is a labelled block
   with plain label:value rows, mirroring the safety-tickets detail styling
   so the two feel like part of the same admin surface. Everything is
   token-based (--surface-2, --line, --muted, --text) so daybreak and the
   custom light theme inherit correctly without a per-theme override. */
.emp-record-body { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.emp-record-section {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 14px 12px;
}
.emp-record-h2 { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.emp-record-line { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.emp-record-line:last-child { border-bottom: none; }
.emp-record-label { color: var(--muted); font-size: 13px; }
.emp-record-value { color: var(--text); font-size: 14px; text-align: right; word-break: break-word; }
.emp-record-history-item {
  padding: 8px 10px; border-left: 3px solid var(--line); background: var(--surface);
  border-radius: 6px; margin-bottom: 8px; font-size: 13px;
}
.emp-record-history-item:last-child { margin-bottom: 0; }
.emp-record-history-when { color: var(--muted); font-size: 12px; margin-left: 6px; }
.emp-record-history-note { color: var(--text); margin-top: 4px; }
.emp-record-notes { margin: 0; padding: 8px 10px; background: var(--surface); border-radius: 6px; white-space: pre-wrap; }
.emp-record-foot { margin-top: 14px; font-size: 12px; color: var(--muted); }

/* --- Employee Record: inline role-change form -----------------------
   The form matches the surrounding emp-record-section styling so it
   reads as another block on the same screen rather than a modal that
   floats in from somewhere. Kept below the last section, with margin
   so it doesn't hug the read-only content. */
.emp-record-form {
  margin-top: 16px; padding: 14px 14px 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px;
}
.emp-record-form .field-label { margin-top: 10px; }
.emp-record-form .field-label:first-of-type { margin-top: 0; }
.emp-record-form textarea.other-input { width: 100%; box-sizing: border-box; resize: vertical; min-height: 68px; }
.emp-role-change-current { margin: 0 0 12px; }
.emp-role-change-acts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px;
}
.emp-role-change-acts .btn { width: 100%; }
/* Cancel + Save should not double-space via the global .btn + .btn rule. */
.emp-role-change-acts .btn + .btn { margin-top: 0; }
.emp-record-act-row { margin-top: 10px; }
.emp-record-act-row .btn { min-width: 140px; }

/* --- Employee Record: split action row (Change role + Terminate) --- */
.emp-record-act-row-split { display: flex; gap: 10px; flex-wrap: wrap; }
.emp-record-act-row-split .btn { flex: 1 1 140px; min-width: 140px; }
.emp-record-act-row-split .btn + .btn { margin-top: 0; }

/* --- Termination form (danger-styled) ---------------------------------
   Same box shape as the role-change form but the border and heading pick
   up the --danger token so leadership sees it is not a routine edit at
   a glance. The confirmation block styles the review text; it renders
   only after the first submit ('Review termination'). */
.emp-record-form-danger { border-color: var(--danger); }
.emp-record-form-danger .emp-record-h2 { color: var(--danger); }
.emp-terminate-hint { margin: 0 0 10px; }
.emp-terminate-confirm {
  margin: 12px 0 0; padding: 10px 12px;
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  border-left: 3px solid var(--danger); border-radius: 6px;
  font-size: 13px; line-height: 1.45;
}
.emp-terminate-warn { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }

/* Danger button variant. Used for the second-tap 'Confirm termination'
   state so the button visibly escalates from warn (amber) to danger (red)
   between review and confirm. */
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:disabled { opacity: 0.6; }

/* --- Employee Record: HR fields action row --- */
.emp-record-act-row-hr { margin-top: 16px; text-align: right; }
.emp-record-act-row-hr .btn { min-width: 160px; }

/* --- Employee Record: HR row expanded to two buttons (Discipline + HR fields) --- */
.emp-record-act-row-hr { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.emp-record-act-row-hr .btn { min-width: 160px; }
.emp-record-act-row-hr .btn + .btn { margin-top: 0; }

/* --- Discipline form: prior-history strip --- */
.emp-discipline-history { margin-bottom: 14px; padding: 10px 12px; background: var(--surface-2); border-radius: 6px; border-left: 3px solid var(--line); }
.emp-discipline-history-title { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.emp-discipline-history-list { list-style: none; margin: 0; padding: 0; }
.emp-discipline-history-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; }
.emp-discipline-history-row + .emp-discipline-history-row { border-top: 1px dashed var(--line); }
.emp-discipline-history-kind { font-weight: 500; }
.emp-discipline-history-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.emp-discipline-history-empty { margin: 0; }

/* Colour dot before the kind label. Uses ::before so the label text still
   reads naturally without emoji or icon fonts. */
.emp-discipline-history-kind::before {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 8px; vertical-align: middle; background: var(--muted);
}
.emp-discipline-kind-praise        .emp-discipline-history-kind::before { background: var(--ok, #4ea882); }
.emp-discipline-kind-coaching      .emp-discipline-history-kind::before { background: var(--muted); }
.emp-discipline-kind-verbal        .emp-discipline-history-kind::before { background: var(--warn); }
.emp-discipline-kind-written       .emp-discipline-history-kind::before { background: var(--warn); }
.emp-discipline-kind-final         .emp-discipline-history-kind::before { background: var(--danger); }
.emp-discipline-kind-investigation .emp-discipline-history-kind::before { background: var(--muted); }

/* '(required)' badge that appears next to Notes and Evidence pointer when
   the selected kind makes them mandatory. Amber to draw the eye without
   escalating to danger \u2014 the field is still valid empty until submit. */
.emp-discipline-req { margin-left: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--warn); }

/* Sequence warning banner. Soft, not blocking. Amber left-border matches
   the (required) badge weighting \u2014 leadership sees it as a nudge, not a
   stop sign. */
.emp-discipline-seq-warn {
  margin: 10px 0 0; padding: 8px 10px;
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  border-left: 3px solid var(--warn); border-radius: 6px;
  font-size: 12px; line-height: 1.4;
}

/* --- Fact-of status forms (accommodation + RTO, Wave 3) --- */
.emp-factof-current { margin-bottom: 12px; padding: 10px 12px; background: var(--surface-2); border-radius: 6px; border-left: 3px solid var(--line); }
.emp-factof-current-title { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.emp-factof-current-lines { margin: 0; font-size: 13px; color: var(--text); }
.emp-factof-empty { margin: 0; }

/* Active/inactive badge inline with the current-state title. */
.emp-factof-badge {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em;
  font-weight: 600; letter-spacing: 0.05em; vertical-align: middle;
}
.emp-factof-badge-active { background: color-mix(in srgb, var(--ok, #4ea882) 20%, var(--surface)); color: var(--ok, #4ea882); }
.emp-factof-badge-inactive { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }

/* Medical-detail warning banner. Same amber weighting as the discipline
   sequence warning so leadership reads it as a nudge in the same visual
   language, but with more space and a bolder lead-in because the
   PIPEDA / medical-privacy risk is higher than a sequence-skipping risk. */
.emp-factof-medical-warn {
  margin: 0 0 14px; padding: 10px 12px;
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  border-left: 3px solid var(--warn); border-radius: 6px;
  font-size: 12px; line-height: 1.45;
}
.emp-factof-medical-warn strong { color: var(--warn); }

/* --- Medical detail form (Wave 4, Stage 2) ---
   Same fact-of card scaffolding as accommodation/RTO, one distinction:
   the amber banner is inverted (this IS the medical door, not "don't
   write medical here"), and the form has a left border in the amber
   colour so it's visually distinct from the fact-of forms above. */
.emp-record-form-medical {
  border-left: 3px solid var(--warn);
  padding-left: 12px;
}

/* --- Bug report screenshot picker (Settings > About > Report a bug) ---
   Small preview under the description field. Thumb caps at 180px tall so
   a portrait phone screenshot doesn't push the Post bug button off screen. */
.hint-inline { color: var(--muted); font-size: 13px; font-weight: 400; margin-left: 4px; }
#bugScreenshotPreview {
  margin-top: 8px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
#bugScreenshotThumb {
  max-width: 100%; max-height: 180px;
  align-self: flex-start;
  border-radius: 4px;
  background: #000;
}
.bug-shot-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bug-shot-meta .hint { margin: 0; font-size: 13px; }
.btn.btn-sm { padding: 6px 12px; font-size: 13px; }