/* =================================================================
   Oil Guyz — Mobile App Prototype
   Foundation styles: design tokens + component classes + phone frame
   Calendly-clean. Orange = actions only. Green = brand.
   ================================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Brand + surfaces */
  --green: #1B4332;
  --green-dark: #12301F;
  --orange: #FF6B35;
  --orange-dark: #E85D2A;

  --surface: #FFFFFF;
  --surface-muted: #F5F4EF;
  --surface-inverse: #12301F;

  --text: #1F2937;
  --text-secondary: #4B5563;
  --text-inverse: #FFFFFF;
  --text-muted: #9CA3AF;

  --border: #E5E7EB;
  --border-strong: #D1D5DB;

  --danger: #DC2626;
  --danger-surface: #FEE2E2;
  --warning: #D97706;
  --warning-surface: #FEF3C7;
  --success: #15803D;
  --success-surface: #DCFCE7;
  --info: #1D4ED8;

  /* Spacing scale (px) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* Type */
  --font-head: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --t-11: 11px;
  --t-13: 13px;
  --t-15: 15px;
  --t-17: 17px;
  --t-22: 22px;
  --t-28: 28px;
  --t-34: 34px;

  --w-400: 400;
  --w-500: 500;
  --w-600: 600;
  --w-700: 700;

  /* Touch + camera */
  --touch: 48px;
  --shutter: 80px;

  /* Shadows (subtle only) */
  --shadow-sm: 0 1px 2px rgba(31, 41, 55, 0.06);
  --shadow-md: 0 2px 8px rgba(31, 41, 55, 0.08);
  --shadow-lg: 0 12px 40px rgba(31, 41, 55, 0.14);
  --shadow-phone: 0 30px 80px rgba(31, 53, 38, 0.28);
}

/* ---------- 2. RESET ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: var(--t-15);
  color: var(--text);
  background: var(--surface-muted);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

button {
  font-family: inherit;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  margin: 0;
  color: var(--text);
}

/* =================================================================
   3. OUTER PROTOTYPE CHROME (toolbar + stage) — lives outside phone
   ================================================================= */
.proto-toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.proto-toolbar__group {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.proto-toolbar__group--center {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.proto-brand {
  font-family: var(--font-head);
  font-weight: var(--w-700);
  font-size: var(--t-17);
  letter-spacing: 0.04em;
  line-height: 1;
}
.proto-brand__oil {
  color: var(--green);
}
.proto-brand__guyz {
  color: var(--orange);
}

.proto-title {
  font-family: var(--font-body);
  font-size: var(--t-13);
  font-weight: var(--w-500);
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.proto-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: var(--r-md);
  font-size: var(--t-13);
  font-weight: var(--w-500);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.proto-btn:hover {
  background: var(--surface-muted);
  border-color: var(--border-strong);
  color: var(--text);
}
.proto-btn__icon {
  font-size: var(--t-17);
  line-height: 1;
}
.proto-btn--demo {
  border-color: var(--green);
  color: var(--green);
  font-weight: var(--w-600);
}
.proto-btn--demo:hover {
  background: var(--green);
  color: var(--text-inverse);
  border-color: var(--green);
}

/* ---- Prototype access gate (client-side password) ---- */
.proto-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  background: var(--surface-muted);
}
.proto-gate[hidden] {
  display: none;
}
.proto-gate__card {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 40px rgba(31, 41, 55, 0.16);
  padding: var(--s-6) var(--s-5);
}
.proto-gate__brand {
  font-family: var(--font-head);
  font-weight: var(--w-700);
  font-size: var(--t-28);
  letter-spacing: 0.02em;
}
.proto-gate__brand .o {
  color: var(--green);
}
.proto-gate__brand .g {
  color: var(--orange);
}
.proto-gate__title {
  font-family: var(--font-head);
  font-weight: var(--w-700);
  font-size: var(--t-17);
  color: var(--text);
}
.proto-gate__sub {
  font-size: var(--t-13);
  color: var(--text-secondary);
  margin-bottom: var(--s-1);
}
.proto-gate__err {
  font-size: var(--t-13);
  font-weight: var(--w-600);
  color: var(--danger);
}
.proto-gate__err[hidden] {
  display: none;
}

.proto-stage {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--s-6);
  padding: var(--s-8) var(--s-4);
  min-height: calc(100vh - 64px);
}

/* ---- Build-notes side panel (toggled by the toolbar "Notes" button) ---- */
.proto-notes {
  flex: 0 1 340px;
  align-self: stretch;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-4);
  font-size: var(--t-13);
}
body.notes-off .proto-notes {
  display: none;
}
.proto-notes__head {
  font-size: var(--t-11);
  font-weight: var(--w-700);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--s-2);
}
.proto-notes__title {
  font-family: var(--font-head);
  font-size: var(--t-17);
  font-weight: var(--w-700);
  color: var(--text);
  margin-bottom: var(--s-3);
}
/* Side tag on shared screens (Account/Sign-in) — which flow these notes are for. */
.proto-notes__side {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--green);
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-size: var(--t-11);
  font-weight: var(--w-700);
  vertical-align: middle;
}
.proto-notes__list {
  margin: 0;
  padding-left: 1.1em;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  color: var(--text-secondary);
  line-height: 1.5;
}
.proto-notes__list li::marker {
  color: var(--green);
}
.proto-notes__id {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono, monospace);
  font-size: var(--t-11);
  color: var(--text-muted);
}
.proto-notes__empty {
  color: var(--text-muted);
  line-height: 1.5;
}

/* Notes toggle button — green when active (notes showing). */
.proto-btn--notes {
  border-color: var(--green);
  color: var(--green);
  font-weight: var(--w-600);
}
.proto-btn--notes[aria-pressed='true'] {
  background: var(--green);
  color: var(--text-inverse);
}

/* =================================================================
   4. PHONE FRAME (~390 x 844, rounded ~40px)
   ================================================================= */
.phone {
  position: relative;
  width: 390px;
  height: 844px;
  background: var(--surface);
  border-radius: 44px;
  box-shadow: var(--shadow-phone);
  border: 10px solid #0f1512;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.phone__notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 26px;
  background: #0f1512;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  z-index: 20;
}

.phone__statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) var(--s-6) 2px;
  height: 44px;
  font-size: var(--t-13);
  font-weight: var(--w-600);
  color: var(--text);
  flex: 0 0 auto;
}
.phone__time {
  letter-spacing: 0.02em;
}
.phone__icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-13);
  color: var(--text);
}

.phone__screen {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  position: relative;
}
.phone__screen::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.phone__homebar {
  flex: 0 0 auto;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone__homebar::after {
  content: '';
  width: 134px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
}

/* =================================================================
   5. SCREEN SCAFFOLD (used by every registered screen)
   ================================================================= */
.screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.screen-header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  min-height: 52px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}
.screen-header .back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: var(--green);
  font-weight: var(--w-600);
  font-size: var(--t-15);
  /* Easy tap target: ≥44px tall, generous left/right hit area. */
  min-height: 44px;
  padding: 6px var(--s-3) 6px var(--s-2);
  margin-left: calc(var(--s-2) * -1);
  border-radius: var(--r-md);
}
.screen-header .back:active {
  background: var(--surface-muted);
}
.screen-header .back::before {
  content: '\2039';
  font-size: var(--t-22);
  line-height: 1;
}
.screen-header__title {
  font-family: var(--font-head);
  font-size: var(--t-17);
  font-weight: var(--w-600);
  color: var(--text);
  flex: 1;
  text-align: center;
}
/* When a header has a back button, balance the title with a spacer */
.screen-header__spacer {
  width: 56px;
  flex: 0 0 auto;
}
/* Tab-root screens use a big left-aligned page title */
.screen-title {
  font-family: var(--font-head);
  font-size: var(--t-28);
  font-weight: var(--w-700);
  color: var(--text);
  padding: var(--s-6) var(--s-4) var(--s-3);
}

.screen-body {
  flex: 1 1 auto;
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.screen-body--center {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--s-3);
}
.screen-body--flush {
  padding: 0;
}

/* Generic typographic helpers screens may use */
.h-lg {
  font-family: var(--font-head);
  font-size: var(--t-28);
  font-weight: var(--w-700);
  line-height: 1.15;
}
.h-md {
  font-family: var(--font-head);
  font-size: var(--t-22);
  font-weight: var(--w-600);
  line-height: 1.2;
}
.h-sm {
  font-family: var(--font-head);
  font-size: var(--t-17);
  font-weight: var(--w-600);
}
.text-body {
  font-size: var(--t-15);
  color: var(--text-secondary);
  line-height: 1.5;
}
.text-muted {
  color: var(--text-muted);
  font-size: var(--t-13);
}
.section-label {
  font-size: var(--t-13);
  font-weight: var(--w-600);
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0.01em;
}
.group-label {
  font-size: var(--t-11);
  font-weight: var(--w-700);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.center {
  text-align: center;
}
.spacer {
  flex: 1 1 auto;
}
.mono {
  font-family: var(--font-head);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.brand-num {
  color: var(--green);
  font-family: var(--font-head);
  font-weight: var(--w-700);
  font-variant-numeric: tabular-nums;
}

/* =================================================================
   6. BUTTONS
   ================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  min-height: var(--touch);
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--t-15);
  font-weight: var(--w-600);
  line-height: 1;
  text-align: center;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease,
    box-shadow 150ms ease, opacity 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* Primary = ORANGE (the thing you tap) */
.btn-primary {
  background: var(--orange);
  color: var(--text-inverse);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--orange-dark);
}
.btn-primary:active {
  background: var(--orange-dark);
  box-shadow: none;
}

/* Secondary = white + border (neutral) */
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover {
  background: var(--surface-muted);
}

/* Ghost = green text (brand, low emphasis) */
.btn-ghost {
  background: transparent;
  color: var(--green);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--surface-muted);
}

/* Danger = red text/border (Sign out) — NOT orange */
.btn-danger {
  background: var(--surface);
  color: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover {
  background: var(--danger-surface);
}

/* Disabled / greyed (used for "CONTINUE" before valid) */
.btn[disabled],
.btn.is-disabled {
  background: var(--surface-muted);
  color: var(--text-muted);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--sm {
  min-height: 36px;
  font-size: var(--t-13);
  width: auto;
  padding: 0 var(--s-3);
}

/* Stack of full-width buttons with consistent rhythm */
.btn-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Row of equal-width buttons, side by side (e.g. Call | Navigate) */
.btn-row {
  display: flex;
  gap: var(--s-3);
}
.btn-row > .btn {
  flex: 1 1 0;
  min-width: 0;
}

/* ---- Document preview (manifest detail): a paper-like sheet ---- */
.doc-preview {
  background: var(--surface-muted);
  border-radius: var(--r-lg);
  padding: var(--s-3);
}
.doc-preview__sheet {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  padding: var(--s-4);
}
.doc-preview__head {
  text-align: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-2);
}
.doc-preview__brand {
  font-family: var(--font-head);
  font-size: var(--t-28);
  font-weight: var(--w-700);
  line-height: 1.05;
  color: var(--text);
}
.doc-preview__sub {
  font-size: var(--t-11);
  color: var(--text-secondary);
  line-height: 1.4;
}
.doc-preview__num {
  font-family: var(--font-head);
  font-weight: var(--w-700);
  color: var(--green);
  text-align: center;
  margin-bottom: var(--s-2);
}
.doc-preview__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 4px 0;
  border-bottom: 1px dotted var(--border);
  font-size: var(--t-12);
}
.doc-preview__k {
  color: var(--text-secondary);
  flex: 0 0 auto;
}
.doc-preview__v {
  color: var(--text);
  text-align: right;
  font-weight: var(--w-600);
}
.doc-preview__foot {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
  font-size: var(--t-11);
  color: var(--text-muted);
  line-height: 1.45;
}

/* Inline tappable link (click-to-call, open-in-maps). Brand green, underlines
   on hover. The orange "primary action" treatment is reserved for buttons. */
.link {
  color: var(--green);
  font-weight: var(--w-600);
  text-decoration: none;
}
.link:hover,
.link:focus-visible {
  text-decoration: underline;
}

/* =================================================================
   7. FORM FIELDS
   ================================================================= */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field > label,
.field__label {
  font-size: var(--t-13);
  font-weight: var(--w-600);
  color: var(--text-secondary);
}
/* Small helper line under a field label (e.g. "prefilled — change on site"). */
.field__hint {
  font-size: var(--t-12);
  color: var(--text-muted);
  line-height: 1.4;
  margin: -2px 0 0;
}
/* Native dropdown styled to match .input (keeps the OS picker on tap). */
select.input {
  cursor: pointer;
  background-color: var(--surface);
  font-family: var(--font-body);
  font-size: var(--t-15);
  color: var(--text);
}
/* Single-location accounts: show the restaurant name instead of a dropdown. */
.loc-single {
  font-family: var(--font-head);
  font-size: var(--t-17);
  font-weight: var(--w-700);
  color: var(--text);
}
.input {
  width: 100%;
  min-height: var(--touch);
  padding: 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: var(--t-15);
  color: var(--text);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.input::placeholder {
  color: var(--text-muted);
}
.input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(44, 74, 53, 0.12);
}
textarea.input {
  min-height: 96px;
  padding: var(--s-3);
  resize: none;
  line-height: 1.5;
}
.input--error {
  border-color: var(--danger);
}
.input--error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.help {
  font-size: var(--t-13);
  color: var(--text-muted);
}
.error-text {
  font-size: var(--t-13);
  color: var(--danger);
  font-weight: var(--w-500);
}

/* Select / dropdown styled like input */
.select {
  position: relative;
}
.select select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--s-8);
}
.select::after {
  content: '\25BE';
  position: absolute;
  right: var(--s-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* Checkbox (custom). Checked = GREEN. */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
  user-select: none;
}
.checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.checkbox__box {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, border-color 150ms ease;
  margin-top: 1px;
}
.checkbox__box::after {
  content: '\2713';
  color: var(--text-inverse);
  font-size: var(--t-15);
  font-weight: var(--w-700);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 120ms ease, transform 120ms ease;
}
.checkbox input:checked + .checkbox__box {
  background: var(--green);
  border-color: var(--green);
}
.checkbox input:checked + .checkbox__box::after {
  opacity: 1;
  transform: scale(1);
}
.checkbox__label {
  font-size: var(--t-15);
  color: var(--text);
  line-height: 1.4;
}

/* =================================================================
   8. CARDS + LIST ROWS
   ================================================================= */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-sm);
}
.card--flush {
  padding: 0;
  overflow: hidden;
}
.card__title {
  font-family: var(--font-head);
  font-size: var(--t-15);
  font-weight: var(--w-600);
  color: var(--text-secondary);
  margin-bottom: var(--s-3);
}

/* Key/value detail rows inside a card */
.kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  font-size: var(--t-15);
}
.kv + .kv {
  border-top: 1px solid var(--border);
}
.kv__k {
  color: var(--text-secondary);
}
.kv__v {
  color: var(--text);
  font-weight: var(--w-500);
  text-align: right;
}

/* Tappable list rows */
.list-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.list-row:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.list-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.list-row__title {
  font-family: var(--font-head);
  font-size: var(--t-17);
  font-weight: var(--w-600);
  color: var(--text);
}
.list-row__meta {
  font-size: var(--t-13);
  color: var(--text-secondary);
}
/* The orange tap affordance on a row (e.g. "Start >") */
.row-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--orange);
  font-weight: var(--w-600);
  font-size: var(--t-15);
  white-space: nowrap;
}
.row-action::after {
  content: '\203A';
  font-size: var(--t-22);
  line-height: 1;
}
.chev {
  color: var(--orange);
  font-size: var(--t-22);
  line-height: 1;
  font-weight: var(--w-600);
}

/* Plain divided list (manifests grouped by month) */
.divided-list {
  display: flex;
  flex-direction: column;
}
.divided-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  padding: var(--s-3) 0;
}
.divided-list__row:first-child {
  border-top: none;
}

/* =================================================================
   9. SEGMENTED CONTROL — active = GREEN
   ================================================================= */
.segment {
  display: inline-flex;
  width: 100%;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 3px;
}
.segment-option {
  flex: 1;
  min-height: 38px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--t-13);
  font-weight: var(--w-600);
  border-radius: 6px;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.segment-option.is-active {
  background: var(--green);
  color: var(--text-inverse);
  box-shadow: var(--shadow-sm);
}
.segment-option[disabled],
.segment-option.is-disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

/* =================================================================
   10. PILLS / BADGES
   ================================================================= */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--t-13);
  font-weight: var(--w-600);
  line-height: 1;
  background: var(--surface-muted);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.pill--success {
  background: var(--success-surface);
  color: var(--success);
  border-color: transparent;
}
.pill--warn {
  background: var(--warning-surface);
  color: var(--warning);
  border-color: transparent;
}
.pill--danger {
  background: var(--danger-surface);
  color: var(--danger);
  border-color: transparent;
}

/* Status pill used in lists (neutral default) */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--t-11);
  font-weight: var(--w-600);
  background: var(--surface-muted);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* Selectable pill group (time windows, bin size/type) — selected = GREEN */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.pill-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--t-13);
  font-weight: var(--w-600);
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.pill-select:hover {
  border-color: var(--green);
}
.pill-select.is-active {
  background: var(--green);
  color: var(--text-inverse);
  border-color: var(--green);
}

/* =================================================================
   11. TAB BAR (bottom) — active tab = GREEN
   ================================================================= */
.tabbar {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 6px var(--s-2) var(--s-2);
  flex: 0 0 auto;
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--touch);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--t-11);
  font-weight: var(--w-600);
  border-radius: var(--r-md);
  transition: color 150ms ease, background 150ms ease;
}
.tab__icon {
  position: relative;
  font-size: var(--t-22);
  line-height: 1;
}
/* Count badge on a tab icon (e.g. 3 pickups today). Orange = needs attention. */
.tab__badge {
  position: absolute;
  top: -7px;
  left: 100%;
  margin-left: -7px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--orange);
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--w-700);
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}
.tab:hover {
  color: var(--text-secondary);
}
.tab.is-active {
  color: var(--green);
}
.tab.is-active .tab__icon {
  color: var(--green);
}

/* A tab-root screen wraps body + tabbar; body scrolls, tabbar pinned */
.tab-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.tab-screen__body {
  flex: 1 1 auto;
}

/* =================================================================
   12. STEP DOTS — active dot = ORANGE wide
   ================================================================= */
.stepdots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-2) 0;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  transition: width 200ms ease, background 200ms ease;
}
.dot.is-active {
  width: 22px;
  background: var(--orange);
}
.dot.is-done {
  background: var(--green);
}

/* =================================================================
   13. GEO BADGE — at-site = GREEN, off-site = AMBER
   ================================================================= */
.geo-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--t-13);
  font-weight: var(--w-600);
  line-height: 1;
}
.geo-badge::before {
  content: '\25CF';
  font-size: 9px;
}
.geo-badge.is-onsite {
  background: var(--success-surface);
  color: var(--success);
}
.geo-badge.is-offsite {
  background: var(--warning-surface);
  color: var(--warning);
}

/* =================================================================
   14. CAMERA / CAPTURE FLOW
   ================================================================= */
/* In-place capture: the live viewfinder and the captured photo share ONE
   fixed-size frame, and the shutter / Retake+Continue share ONE control area
   below it — so NOTHING shifts when the photo is taken (no page jump, no
   separate preview screen). A hidden checkbox the shutter/Retake toggle drives
   the swap. .capture is display:contents so the frame / spacer / controls are
   flex children of .screen-body. */
.capture {
  display: contents;
}
.capture__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* Capture screens fit the phone exactly (no scroll): a definite height lets the
   frame flex-fill instead of overflowing. */
.screen--fit {
  height: 100%;
}
/* The frame keeps the viewfinder's position in BOTH states and flex-fills the
   space between the step dots and the controls — so the page never scrolls and
   the image stays put when you take the photo. */
.capture__frame {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.capture__live,
.capture__captured {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.capture__live {
  background: linear-gradient(160deg, #2a2a2a 0%, #141414 100%);
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--t-13);
}
.capture__captured {
  display: none;
  background: linear-gradient(160deg, #383838 0%, #1c1c1c 100%);
}
.capture__badge {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
}
.capture__glyph {
  font-size: 44px;
  color: rgba(255, 255, 255, 0.35);
}
/* Burned-in timestamp for normal pickup/bin photos — date + time visible on
   the image (GPS stays in the metadata panel below, not on the photo face). */
.capture__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-family: var(--font-head);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-13);
  font-weight: var(--w-600);
  letter-spacing: 0.01em;
}
.capture__stampline {
  white-space: nowrap;
}

/* Burned proof stamp for the removal-notice photo — date/time/GPS visible. */
.capture__stamp {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--s-2) var(--s-3);
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-family: var(--font-head);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-13);
  font-weight: var(--w-600);
  line-height: 1.35;
  text-align: left;
}
/* Control area below the frame swaps shutter <-> Retake/Continue in place.
   Both control sets occupy the SAME grid cell so the area height is constant
   (the taller of the two) — toggling VISIBILITY (not display) means nothing
   below it shifts when the photo is taken. */
.capture__controls {
  display: grid;
  padding-top: var(--s-3);
}
.capture__controls > * {
  grid-area: 1 / 1;
  width: 100%;
}
.capture__live-ctl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}
.capture__shot-ctl {
  visibility: hidden;
}
.capture__toggle:checked ~ .capture__frame .capture__live {
  display: none;
}
.capture__toggle:checked ~ .capture__frame .capture__captured {
  display: flex;
}
.capture__toggle:checked ~ .capture__controls .capture__live-ctl {
  visibility: hidden;
}
.capture__toggle:checked ~ .capture__controls .capture__shot-ctl {
  visibility: visible;
}
.capture .shutter,
.capture label.btn {
  cursor: pointer;
}

/* ---- Reason picker (can't-complete / can't-sign) ---- */
.reason-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.reason-pill {
  width: 100%;
  text-align: left;
  min-height: var(--touch);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--t-15);
  font-weight: var(--w-600);
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.reason-pill:hover {
  background: var(--surface-muted);
}
.reason-pill.is-active {
  border-color: var(--green);
  background: var(--success-surface);
  color: var(--success);
}

.viewfinder {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, #2a2a2a 0%, #141414 100%);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--t-13);
}
.viewfinder__hint {
  letter-spacing: 0.04em;
}
.viewfinder__geo {
  position: absolute;
  right: var(--s-3);
  bottom: var(--s-3);
}

/* Geo-stamped captured preview frame */
.geo-stamp {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, #3a3a3a 0%, #1c1c1c 100%);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
}
.geo-stamp__time {
  font-size: var(--t-13);
  color: rgba(255, 255, 255, 0.7);
}

/* Shutter — 80px green-ringed orange circle */
.shutter-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) 0;
}
.shutter {
  width: var(--shutter);
  height: var(--shutter);
  border-radius: 50%;
  background: var(--orange);
  border: 4px solid var(--surface);
  box-shadow: 0 0 0 3px var(--orange), var(--shadow-md);
  transition: transform 120ms ease, background 150ms ease;
}
.shutter:hover {
  background: var(--orange-dark);
  box-shadow: 0 0 0 3px var(--orange-dark), var(--shadow-md);
}
.shutter:active {
  transform: scale(0.94);
}
.shutter__label {
  font-size: var(--t-13);
  font-weight: var(--w-600);
  color: var(--text-secondary);
}

/* =================================================================
   15. KEYPAD (gallons entry)
   ================================================================= */
.bignum {
  text-align: center;
  padding: var(--s-4) 0 var(--s-2);
}
.bignum__value {
  font-family: var(--font-head);
  font-size: 64px;
  font-weight: var(--w-700);
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.bignum__unit {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-15);
  font-weight: var(--w-600);
  color: var(--text-secondary);
}
.bignum__hint {
  margin-top: var(--s-2);
  font-size: var(--t-13);
  color: var(--text-muted);
}
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}
.key {
  min-height: 56px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-md);
  font-family: var(--font-head);
  font-size: var(--t-22);
  font-weight: var(--w-600);
  color: var(--text);
  transition: background 120ms ease, border-color 120ms ease;
}
.key:hover {
  background: var(--surface-muted);
}
.key:active {
  background: var(--border);
}
.key--util {
  font-size: var(--t-15);
  color: var(--text-secondary);
}

/* =================================================================
   16. SUCCESS CHECK — green circle with check
   ================================================================= */
/* Animated success checkmark — ring pops in, then the tick draws. */
.success-anim {
  margin: 0 auto;
}
.success-anim svg {
  width: 104px;
  height: 104px;
  display: block;
}
/* Larger variant (e.g. customer request-submitted confirmation). */
.success-anim--lg svg {
  width: 136px;
  height: 136px;
}
.success-anim__ring {
  fill: var(--success-surface);
  stroke: var(--green);
  stroke-width: 2;
  transform-origin: center;
  animation: successPop 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.success-anim__tick {
  fill: none;
  stroke: var(--green);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 38;
  stroke-dashoffset: 38;
  animation: successDraw 360ms 360ms ease-out forwards;
}
@keyframes successPop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes successDraw {
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .success-anim__ring {
    animation: none;
  }
  .success-anim__tick {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* =================================================================
   17. HERO STAT — green brand card (KPIs, gallons hero)
   ================================================================= */
.hero-stat {
  background: var(--green);
  color: var(--text-inverse);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-4);
  text-align: center;
  box-shadow: var(--shadow-md);
}
.hero-stat__value {
  font-family: var(--font-head);
  font-size: var(--t-34);
  font-weight: var(--w-700);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-stat__label {
  margin-top: 6px;
  font-size: var(--t-11);
  font-weight: var(--w-600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.hero-stat__sub {
  margin-top: var(--s-2);
  font-size: var(--t-13);
  color: rgba(255, 255, 255, 0.85);
}

/* KPI tile pair (smaller stat cards) */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.kpi-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-sm);
}
.kpi-tile__label {
  font-size: var(--t-13);
  color: var(--text-secondary);
  line-height: 1.3;
}
.kpi-tile__value {
  margin-top: var(--s-2);
  font-family: var(--font-head);
  font-size: var(--t-28);
  font-weight: var(--w-700);
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

/* Simple sparkline bars */
.sparkline {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 56px;
  padding: var(--s-2) 0;
}
.sparkline__bar {
  flex: 1;
  background: var(--green);
  opacity: 0.5;
  border-radius: 2px 2px 0 0;
  min-height: 4px;
}
.sparkline__bar:last-child {
  opacity: 1;
}

/* =================================================================
   18. INLINE BANNERS (error / warn / info inside a screen)
   ================================================================= */
.banner {
  border-radius: var(--r-md);
  padding: var(--s-3);
  font-size: var(--t-13);
  line-height: 1.45;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  color: var(--text-secondary);
}
.banner__title {
  font-weight: var(--w-700);
  display: block;
  margin-bottom: 2px;
}
.banner--danger {
  background: var(--danger-surface);
  border-color: transparent;
  color: var(--danger);
}
.banner--warn {
  background: var(--warning-surface);
  border-color: transparent;
  color: var(--warning);
}

/* =================================================================
   19. EMPTY STATES + SPINNER
   ================================================================= */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--s-2);
  padding: var(--s-12) var(--s-6);
  flex: 1;
}
.empty__title {
  font-family: var(--font-head);
  font-size: var(--t-17);
  font-weight: var(--w-600);
  color: var(--text);
}
.empty__body {
  font-size: var(--t-13);
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 240px;
}

.spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--green);
  animation: spin 800ms linear infinite;
  margin: 0 auto;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* =================================================================
   20. SPLASH (brand background, green)
   ================================================================= */
.splash {
  position: absolute;
  inset: 0;
  background: var(--green);
  color: var(--text-inverse);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
}
.splash__brand {
  font-family: var(--font-head);
  font-weight: var(--w-700);
  font-size: var(--t-34);
  letter-spacing: 0.06em;
}
.splash__brand .o {
  color: var(--text-inverse);
}
.splash__brand .g {
  color: var(--orange);
}
.splash__spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--text-inverse);
  animation: spin 800ms linear infinite;
}
.splash__note {
  font-size: var(--t-13);
  color: rgba(255, 255, 255, 0.8);
}

/* =================================================================
   21. AUTH / CENTERED BRAND SCREENS
   ================================================================= */
.auth {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-12) var(--s-6) var(--s-6);
  min-height: 100%;
}
.auth__brand {
  text-align: center;
  margin-bottom: var(--s-2);
}
.auth__wordmark {
  font-family: var(--font-head);
  font-weight: var(--w-700);
  font-size: var(--t-28);
  letter-spacing: 0.05em;
}
.auth__wordmark .o {
  color: var(--green);
}
.auth__wordmark .g {
  color: var(--orange);
}
.auth__subtitle {
  margin-top: var(--s-1);
  font-size: var(--t-15);
  color: var(--text-secondary);
}

/* =================================================================
   22. LAUNCHER (foundation home)
   ================================================================= */
.launcher {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.launcher__hero {
  background: var(--green);
  color: var(--text-inverse);
  padding: var(--s-8) var(--s-6) var(--s-6);
}
.launcher__wordmark {
  font-family: var(--font-head);
  font-weight: var(--w-700);
  font-size: var(--t-28);
  letter-spacing: 0.05em;
}
.launcher__wordmark .o {
  color: var(--text-inverse);
}
.launcher__wordmark .g {
  color: var(--orange);
}
.launcher__tagline {
  margin-top: var(--s-2);
  font-size: var(--t-13);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
}
.launcher__body {
  padding: var(--s-6) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.launcher__demos {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.launcher__index {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.launcher-group__title {
  font-size: var(--t-11);
  font-weight: var(--w-700);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}
.launcher-links {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.launcher-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  text-align: left;
  border: none;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--s-3) var(--s-4);
  min-height: var(--touch);
  transition: background 120ms ease;
}
.launcher-link:first-child {
  border-top: none;
}
.launcher-link:hover {
  background: var(--surface-muted);
}
.launcher-link__title {
  font-size: var(--t-15);
  font-weight: var(--w-500);
  color: var(--text);
}
.launcher-link__id {
  font-size: var(--t-11);
  color: var(--text-muted);
  font-family: var(--font-head);
}

/* =================================================================
   23. UTILITIES
   ================================================================= */
.stack-2 { display: flex; flex-direction: column; gap: var(--s-2); }
.stack-3 { display: flex; flex-direction: column; gap: var(--s-3); }
.stack-4 { display: flex; flex-direction: column; gap: var(--s-4); }
.row-2 { display: flex; align-items: center; gap: var(--s-2); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.mt-2 { margin-top: var(--s-2); }
.mt-4 { margin-top: var(--s-4); }
.pad-4 { padding: var(--s-4); }
.is-hidden { display: none !important; }

/* =================================================================
   24. FAUX-SELECT OPTION LIST (truck picker, region picker, etc.)
   A stacked card of tappable rows; selected row gets a green check.
   Reuses card--flush rhythm; selected = green text + ✓.
   ================================================================= */
.opt-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  text-align: left;
  border: none;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--s-3) var(--s-4);
  min-height: var(--touch);
  transition: background 120ms ease;
}
.opt-row:first-child {
  border-top: none;
}
.opt-row:hover {
  background: var(--surface-muted);
}
.opt-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.opt-row__title {
  font-size: var(--t-15);
  font-weight: var(--w-500);
  color: var(--text);
}
.opt-row__meta {
  font-size: var(--t-13);
  color: var(--text-secondary);
}
.opt-row__check {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: var(--t-22);
  line-height: 1;
}
.opt-row.is-selected .opt-row__title {
  color: var(--green);
  font-weight: var(--w-700);
}
.opt-row.is-selected .opt-row__check {
  color: var(--green);
}
.opt-row.is-selected .opt-row__check::before {
  content: '\2713';
}

/* =================================================================
   25. SIGNATURE PAD — finger-draw canvas + stored-signature state
   The canvas is wired with JS (onShow) to draw; the stored state shows
   the saved mark in a script font with a small "on file" green pill.
   ================================================================= */
.sign-pad {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.sign-pad__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.sign-pad__hint {
  font-size: var(--t-13);
  color: var(--text-muted);
  pointer-events: none;
}
.sign-pad__baseline {
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  bottom: 28px;
  border-bottom: 1px solid var(--border-strong);
  pointer-events: none;
}
.sign-pad__x {
  position: absolute;
  left: var(--s-4);
  bottom: 8px;
  font-size: var(--t-13);
  color: var(--text-muted);
  pointer-events: none;
}

/* Stored-signature display card (saved mark on file) */
.sign-stored {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-sm);
}
.sign-stored__mark {
  font-family: 'Brush Script MT', 'Segoe Script', cursive;
  font-size: var(--t-28);
  color: var(--text);
  line-height: 1;
  transform: rotate(-3deg);
}

/* =================================================================
   26. Manifest review rows (pre-filled manifest review)
   Auto-filled rows are plain read-only .kv rows; editable rows host inline
   inputs/segments (the control itself signals editability — no pill).
   ================================================================= */
/* A manifest section header inside the review card */
.manifest-section {
  font-size: var(--t-11);
  font-weight: var(--w-700);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--s-3) 0 var(--s-1);
}
.manifest-section:first-child {
  margin-top: 0;
}
/* Cari header block (locked, top of the manifest) */
.manifest-header {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3);
}
.manifest-header__brand {
  font-family: var(--font-head);
  font-size: var(--t-34);
  font-weight: var(--w-700);
  letter-spacing: 0.02em;
  line-height: 1.05;
}
/* OIL GUYZ wordmark colours, shared by the review header + detail preview. */
.manifest-header__brand .o,
.doc-preview__brand .o {
  color: var(--green);
}
.manifest-header__brand .g,
.doc-preview__brand .g {
  color: var(--orange);
}
.manifest-header__line {
  font-size: var(--t-13);
  color: var(--text-secondary);
  line-height: 1.4;
}
/* Inline compact input used inside an editable manifest row */
.input--inline {
  min-height: 38px;
  max-width: 150px;
  text-align: right;
  font-size: var(--t-13);
}
/* The static footer disclaimer line on the manifest */
.manifest-footer {
  font-size: var(--t-11);
  color: var(--text-muted);
  line-height: 1.5;
  border-top: 1px solid var(--border);
  padding-top: var(--s-3);
  margin-top: var(--s-2);
}

/* Removal-notice capture: a photo frame with the date/time/GPS stamp BURNED
   into the image at the bottom. Unlike pickup photos, this stamp is meant to
   be visible — it is the legal proof the notice was posted, when, and where. */
.notice-shot {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--surface-muted), var(--border));
}
.notice-shot__hint {
  font-size: var(--t-28);
  color: var(--text-muted);
  opacity: 0.5;
}
.notice-shot__stamp {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--s-2) var(--s-3);
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-family: var(--font-head);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-13);
  font-weight: var(--w-600);
  line-height: 1.35;
  text-align: left;
}

/* Before/After photo thumbnails on the review card — small, side by side. */
.review-photos {
  display: flex;
  gap: var(--s-2);
}
.review-photo {
  flex: 1 1 0;
  margin: 0;
  min-width: 0;
}
.review-photo__img {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--surface-muted), var(--border));
}
.review-photo__img--after {
  background: linear-gradient(135deg, var(--success-surface), var(--surface-muted));
}
.review-photo__glyph {
  font-size: var(--t-28);
  color: var(--text-muted);
  opacity: 0.55;
}
.review-photo__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1);
  margin-top: 6px;
  font-size: var(--t-12);
  font-weight: var(--w-600);
  color: var(--text-secondary);
}
.review-photo__time {
  font-weight: var(--w-400);
  font-size: var(--t-11);
  color: var(--text-muted);
}

/* =================================================================
   27. PORTAL (web dashboard) CHROME — distinct from the phone app
   A "this is the web portal, not the phone" framing inside the phone
   shell. A green ribbon banner + a simple side-rail-free header.
   ================================================================= */
.portal-ribbon {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--green);
  color: var(--text-inverse);
  font-size: var(--t-11);
  font-weight: var(--w-700);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--s-2) var(--s-4);
}
.portal-ribbon::before {
  content: '\1F5A5'; /* desktop computer */
  font-size: var(--t-15);
}
.portal-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.portal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  text-align: left;
  border: none;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--s-3) var(--s-4);
  min-height: 56px;
  transition: background 120ms ease;
}
.portal-row:first-child {
  border-top: none;
}
.portal-row:hover {
  background: var(--surface-muted);
}
.portal-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.portal-row__title {
  font-size: var(--t-15);
  font-weight: var(--w-600);
  color: var(--text);
}
.portal-row__meta {
  font-size: var(--t-13);
  color: var(--text-secondary);
}
.portal-row__chev {
  color: var(--orange);
  font-size: var(--t-22);
  line-height: 1;
  font-weight: var(--w-600);
}
/* Status dot for active/inactive in portal rows */
.dot-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--t-13);
  font-weight: var(--w-600);
  color: var(--text-secondary);
}
.dot-status::before {
  content: '\25CF';
  font-size: 9px;
  color: var(--text-muted);
}
.dot-status.is-active {
  color: var(--success);
}
.dot-status.is-active::before {
  color: var(--success);
}