/* ============================================================
   arena_components.css — Arena app component classes
   ------------------------------------------------------------
   DiveOS-styled, token-driven semantic classes that replace the
   inline-style idiom feature by feature. Reuses DiveOS tokens
   (loaded via tokens.css) and complements the DiveOS component
   CSS (.status-pill, .dv-btn) where DiveOS has no equivalent.
   ============================================================ */

/* ─── Card ─────────────────────────────────────────────────────
   DiveOS idiom: the --shadow-card 1px ring IS the border, so no
   separate border declaration (avoids a doubled hairline). */
.ao-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.ao-card--pad { padding: 15px; }
.ao-card--flush { box-shadow: none; }
/* Attention ring (e.g. a delayed movement) — amber instead of hairline. */
.ao-card--warn { box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 0 0 1px var(--warning); }
/* .ao-card--interactive (hover lift) lives in arena_ds.css */

/* ─── Type chip (Transfer / Excursion / Dive / Private) ─────── */
.ao-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  flex: none;
}
.ao-chip--sm { padding: 3px 8px; font-size: var(--text-2xs); }

/* Multi-item list input (dietary/allergies) — JS enhances a textarea into removable
   chips (progressive enhancement; the textarea is the no-JS fallback). */
.ao-chipbox { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); }
.ao-chipbox:focus-within { border-color: var(--accent); }
.ao-chip--input { color: var(--accent-strong); background: var(--accent-soft); }
.ao-chipbox input { flex: 1; min-width: 90px; border: 0; outline: 0; background: transparent;
  padding: 4px 6px; font-size: var(--text-sm); color: var(--ink); }
.ao-chip-x { border: 0; background: transparent; cursor: pointer; padding: 0; line-height: 1;
  font-size: var(--text-md); color: inherit; opacity: 0.6; }
.ao-chip-x:hover { opacity: 1; }
.ao-chip--transfer  { color: var(--status-in-water-fg);  background: var(--status-in-water-bg); }
.ao-chip--excursion { color: var(--status-briefing-fg);  background: var(--status-briefing-bg); }
.ao-chip--dive      { color: var(--status-confirmed-fg); background: var(--status-confirmed-bg); }
.ao-chip--private   { color: var(--status-returning-fg); background: var(--status-returning-bg); }

/* ─── Capacity bar ─────────────────────────────────────────── */
.ao-cap { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.ao-cap__track {
  width: 64px;
  height: 6px;
  border-radius: 3px;
  background: var(--gray-100);
  overflow: hidden;
}
.ao-cap__fill { height: 100%; border-radius: 3px; background: var(--accent); }
.ao-cap__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
}
.ao-cap--warn .ao-cap__fill { background: var(--warning); }
.ao-cap--full .ao-cap__fill { background: var(--danger); }
.ao-cap--full .ao-cap__num  { color: var(--danger); }

/* ─── Avatar (initials circle) ─────────────────────────────── */
.ao-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ─── Soft inline tag (e.g. "Manual", "Needs a boat") ──────── */
.ao-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.4;
}
.ao-tag--accent { color: var(--accent-strong); background: var(--accent-soft); }
.ao-tag--alert  { color: var(--status-cancelled-fg); background: var(--status-cancelled-bg); }
.ao-tag--muted  { color: var(--text-muted); background: var(--gray-100); }

/* ─── Section divider line (period headers, group separators) ─ */
.ao-rule { flex: 1; height: 1px; background: var(--hairline); }

/* ─── Status dot (fleet ticker) ────────────────────────────── */
.ao-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none; }
.ao-dot--lit { box-shadow: 0 0 0 3px var(--accent-soft); }

/* ─── Data-colored pill (status chip, transfer/room pill) ──────
   Colours come inline (data-driven fg/bg); the class owns the shape. */
.ao-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  flex: none;
}
.ao-pill__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); flex: none; }

/* ─── Square icon tile (booking-source mark, portal glyph) ───── */
.ao-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  flex: none;
}

/* ─── Inset panel (surface-inset rounded block) ──────────────── */
.ao-inset { background: var(--gray-50); border-radius: var(--radius-md); }

/* ─── Fine print (small muted caption/secondary-action text) ──── */
.ao-fineprint { font-size: var(--text-xs); color: var(--text-muted); }
.ao-fineprint--dim { color: var(--muted-2); }

/* ─── Form/card display heading (Display font, xl) ──────────────── */
.ao-form-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; }

/* ─── Pax mark (mono adults + children) ──────────────────────── */
.ao-pax {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* ─── Task checklist (Tasks tab) ─────────────────────────────── */
.ao-task {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--surface);
  cursor: pointer;
  font-family: var(--font-sans);
}
.ao-task__box {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: 2px solid var(--hairline-strong);
  color: var(--status-confirmed-fg);
}
.ao-task__label { font-size: var(--text-sm); color: var(--gray-700); }
.ao-task--done .ao-task__box { background: var(--status-confirmed-bg); border: none; }
.ao-task--done .ao-task__label { color: var(--muted-2); text-decoration: line-through; }
.ao-task-add {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--hairline-strong);
  color: var(--muted-2);
  font-size: var(--text-sm);
}

/* ─── Journey timeline (Arrival / In-house / Departure) ──────── */
.ao-timeline { display: flex; flex-direction: column; }
.ao-step { display: flex; gap: 12px; align-items: flex-start; }
.ao-step__rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.ao-step__dot {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  color: var(--muted-2);
}
.ao-step__line { width: 2px; height: 20px; background: var(--hairline); }
.ao-step__body { padding-top: 3px; padding-bottom: 8px; min-width: 0; }
.ao-step__label { font-size: var(--text-sm); color: var(--muted); }
.ao-step__meta { font-size: var(--text-xs); color: var(--muted-2); margin-top: 2px; }
.ao-step__meta--mono { font-family: var(--font-mono); }
.ao-step--done .ao-step__dot  { background: var(--status-confirmed-bg); color: var(--status-confirmed-fg); }
.ao-step--done .ao-step__line { background: var(--status-confirmed-fg); opacity: 0.35; }
.ao-step--done .ao-step__label { color: var(--gray-700); }
.ao-step--active .ao-step__dot { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ao-step--active .ao-step__label { color: var(--gray-700); font-weight: 600; }
.ao-step--active .ao-step__meta { color: var(--accent); }
.ao-step--last .ao-step__body { padding-bottom: 0; }
.ao-step--last .ao-step__line { display: none; }

/* ─── Link-color reset guards ──────────────────────────────────
   The arena_ds.css base reset `.arena-ds a { color: var(--accent) }`
   has specificity (0,1,1) and outranks single-class component colours on
   <a> elements — turning primary-button labels accent-on-accent (invisible)
   and tinting inactive sidebar links. Re-assert intended colours at higher
   specificity for the link-based components. */
.arena-ds a.dv-btn--primary,
.arena-ds a.dv-btn--primary:hover { color: #fff; }
.arena-ds a.dv-btn--secondary { color: var(--ink); }
.arena-ds a.dv-btn--danger    { color: var(--cancelled); }
.arena-ds a.dv-btn--icon      { color: var(--muted); }
.arena-ds a.diveos-sidebar__link { color: var(--ink); }
.arena-ds .diveos-sidebar__item--active a.diveos-sidebar__link { color: var(--accent); }
.arena-ds a.diveos-sidebar__brand-link { color: inherit; }

/* ── Folio money summary (tasks/011 PR-4; PR-8 reuses on the drawer footer).
   Label/value rows for Total · Paid · Balance — money always .ao-mono. ── */
.ao-panel-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1.2; }
.ao-money-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--text-sm); }
.ao-money-row__label { color: var(--text-muted); }
.ao-money-row--strong { font-weight: 700; }
.ao-money--due { color: var(--status-cancelled-fg); }
.ao-money--settled { color: var(--status-confirmed-fg); }

/* ── Card flight-status flag (Delayed / Cancelled) — tasks/011 PR-7 ── */
.ao-flight-flag { font-size: var(--text-2xs); font-weight: 700; }
.ao-flight-flag--delayed { color: var(--status-briefing-fg); }
.ao-flight-flag--cancelled { color: var(--status-cancelled-fg); }

/* ── tasks/027 — monthly roster grid. A genuinely tabular VIEW → a real <table> inside .ao-card,
      horizontally scrollable (class-based per the DiveOS gate). Cell = state fill + boat letter (D2);
      the bottom row = uncovered-boat count on a heat tint (D4). Sticky name column + day headers. ── */
.ao-roster-card { padding: 0; overflow: hidden; }
.ao-roster-scroll { overflow-x: auto; }
.ao-roster { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: var(--text-2xs); }
.ao-roster-name { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left; font-weight: 600; color: var(--ink); font-size: var(--text-sm); padding: 6px 12px; min-width: 150px; max-width: 180px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline-2); }
.ao-roster-corner { z-index: 3; top: 0; }
.ao-roster-dh { position: sticky; top: 0; z-index: 1; background: var(--surface); color: var(--text-muted); font-weight: 600; text-align: center; padding: 5px 0; min-width: 30px; width: 30px; line-height: 1.15; border-bottom: 1px solid var(--hairline); }
.ao-roster-dow { display: block; font-size: var(--text-2xs); color: var(--muted-2); text-transform: uppercase; }
.ao-roster-lvrow { font-size: var(--text-sm); }
.ao-roster-lvspan { color: var(--gray-700); }
.ao-run-time { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--ink); } /* a HH:MM run time on the transfers board */
.ao-roster-grouphd { position: sticky; left: 0; text-align: left; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); background: var(--gray-50); padding: 5px 12px; }
.ao-roster-dh.ao-roster-wk, .ao-roster-c.ao-roster-wk, .ao-roster-cov.ao-roster-wk { background: var(--gray-50); }
.ao-roster-dh.ao-roster-today { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.ao-roster-c.ao-roster-today, .ao-roster-cov.ao-roster-today { box-shadow: inset 1px 0 0 var(--accent-soft), inset -1px 0 0 var(--accent-soft); }
.ao-roster-c { padding: 0; text-align: center; height: 30px; border-bottom: 1px solid var(--hairline-2); border-right: 1px solid var(--hairline-2); }
.ao-roster-link { display: flex; align-items: center; justify-content: center; gap: 1px; width: 100%; height: 30px; text-decoration: none; }
.ao-roster-c--skip { background: var(--accent-soft); }
.ao-roster-c--crew { background: var(--gray-100); }
.ao-roster-c--leave { background: var(--status-briefing-bg); }
.ao-roster-c--ovr { box-shadow: inset 0 0 0 2px var(--accent); }
.ao-roster-lt { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 700; line-height: 1; }
.ao-roster-lt--skip { color: var(--accent); }
.ao-roster-lt--crew { color: var(--muted-2); }
.ao-roster-lv { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 700; color: var(--status-briefing-fg); }
.ao-roster-key { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 700; }
.ao-roster-covhd { border-top: 2px solid var(--hairline); }
.ao-roster-cov { text-align: center; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 700; height: 26px; color: var(--muted-2); border-right: 1px solid var(--hairline-2); border-top: 2px solid var(--hairline); }
.ao-roster-cov--1 { background: var(--status-briefing-bg); color: var(--status-briefing-fg); }
.ao-roster-cov--2 { background: var(--status-cancelled-bg); color: var(--status-cancelled-fg); }

/* ── Drawer folio-footer figures (M20): money is ALWAYS Geist Mono tabular ── */
.ao-money-figure { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight); font-size: var(--text-lg); font-weight: 600; color: var(--ink); }
.ao-money-figure--danger { color: var(--danger); }
.ao-money-figure--credit { color: var(--status-confirmed-fg); }

/* ── Statement line amount (guest portal folio) ── */
.st-line-amount { font-size: var(--text-sm); }

/* ── Transport vessel cards + drawer (tasks/023) — semantic classes so the new
      fleet component is class-based, not inline token-styles (DiveOS gate). ── */
.ao-icon-badge { display:inline-flex; align-items:center; justify-content:center; flex:none; border-radius:var(--radius-md); background:var(--accent-soft); color:var(--accent); }
.ao-icon-badge--lg { border-radius:var(--radius-lg); }
.ao-card-title { font-size:var(--text-md); font-weight:600; color:var(--ink); }
.ao-row-name { font-size:var(--text-sm); font-weight:600; color:var(--ink); } /* a list-row name (manifest heads/party header) */
.ao-meta { font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--muted-2); }
.ao-muted { font-size:var(--text-sm); color:var(--text-muted); }
.ao-muted--xs { font-size:var(--text-xs); }

/* ── Segmented pill-group (link-based) ──────────────────────────────────
   Gray backing tray for a row of mutually-exclusive link pills (view/shift
   switchers). The DiveOS .dv-segment is input-based; this is the link variant
   used by the boards (tasks/009 #12 first classed use — the older inline
   copies are baselined debt to migrate opportunistically). */
.ao-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--gray-100); border-radius: var(--radius-md); }

/* ── Agent portal chrome: text/flash/canvas utilities (tasks/031 P1) ────────
   The trade-portal type scale as classes so views never set token-governed
   props inline (hallmark). Layout (flex/gap/margins) stays inline per DESIGN.md. */
.agp-h1 { font-size: var(--text-lg); font-weight: 600; margin: 0 0 4px; }
.agp-muted { color: var(--text-muted); }
.agp-xs { font-size: var(--text-xs); }
.agp-sec { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.agp-mono { font-family: var(--font-mono); }
.agp-link { color: var(--accent); }
.agp-flash { margin-bottom: 14px; padding: 10px 13px; border-radius: var(--radius-md); font-size: var(--text-sm); border: 1px solid var(--line); }
.agp-flash--ok { background: var(--green-50); color: var(--green-600); border-color: var(--green-100); }
.agp-flash--err { background: var(--red-50); color: var(--red-600); border-color: var(--red-100); }
.agp-kpi { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 650; margin-top: 3px; }
.agp-brandline { font-family: var(--font-display); font-size: var(--text-base); letter-spacing: -0.01em; color: var(--ink); }
.ao-auth-canvas { background: radial-gradient(130% 120% at 50% 0%, var(--gray-50), var(--canvas)); }

.agp-chip { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--radius-pill); padding: 5px 12px; font-weight: 600; font-size: var(--text-xs); border: 1px solid var(--line); }
.agp-chip--info { background: var(--gray-50); color: var(--text-muted); }
.agp-chip--warn { background: var(--amber-50); color: var(--amber-700); border-color: var(--amber-100); }
.agp-chip--crit { background: var(--red-50); color: var(--red-600); border-color: var(--red-100); }

/* ---- QA registry checklist (tasks/033, /admin — System Health & QA) ---- */
.ao-qa-kpi { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--ink); }
.ao-qa-kpi--dim { color: var(--muted); }
.ao-qa-kpi-sub { font-size: var(--text-sm); font-weight: 500; color: var(--muted); }
.ao-qa-key { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted); }
.ao-qa-ref { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); }
.ao-qa-title { font-weight: 600; color: var(--ink); }
.ao-qa-title--done { text-decoration: line-through; color: var(--success); }
.ao-qa-desc { font-size: var(--text-sm); color: var(--muted); }
.ao-qa-body { font-size: var(--text-sm); color: var(--gray-700); }
.ao-qa-strong { font-size: var(--text-sm); color: var(--ink); }
.ao-qa-note { font-size: var(--text-2xs); color: var(--muted-2); }
.ao-qa-note--alert { color: var(--danger); }
.ao-qa-expand { font-size: var(--text-2xs); color: var(--accent); cursor: pointer; }
.ao-qa-row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--hairline); }
.ao-qa-row--done { background: var(--success-bg); }
.ao-qa-state { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1.5px solid var(--hairline-strong); background: transparent; color: var(--muted); }
button.ao-qa-state { cursor: pointer; }
.ao-qa-state--empty { color: transparent; }
.ao-qa-state--completed { background: var(--status-confirmed-bg); border-color: var(--success-border); color: var(--status-confirmed-fg); }
.ao-qa-state--failed { background: var(--status-cancelled-bg); border-color: var(--danger-border); color: var(--status-cancelled-fg); }
.ao-qa-state--skipped { background: var(--gray-300); border-color: var(--gray-300); color: var(--gray-700); }
/* Block remaining bar (tasks/031 design review P5) — dashboard blocks + Book rail. */
.ao-blockbar { height: 7px; border-radius: var(--radius-pill); background: var(--gray-100); overflow: hidden; }
.ao-blockbar__fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); }

/* Agent dashboard composition (approved Stitch reference, 2026-07-07). */
.agp-banner { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 14px; border-radius: var(--radius-md); background: var(--amber-50); border: 1px solid var(--amber-100); color: var(--amber-700); font-size: var(--text-xs); font-weight: 600; }
.agp-banner a { color: inherit; text-decoration: underline; margin-left: auto; white-space: nowrap; }
.agp-banner--info { background: var(--gray-50); border-color: var(--line); color: var(--text-muted); }
.agp-banner--crit { background: var(--red-50); border-color: var(--red-100); color: var(--red-600); }
.agp-dashgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .agp-dashgrid { grid-template-columns: 1fr; } }
.agp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .agp-kpis { grid-template-columns: repeat(2, 1fr); } }
.agp-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.agp-table th { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; }
.agp-table td { padding: 8px 10px; border-bottom: 1px solid var(--hairline-2); }
.agp-table tr:last-child td { border-bottom: 0; }
.agp-2xs { font-size: var(--text-2xs); }
.agp-railhead { background: var(--gray-100); margin: -16px -16px 12px; padding: 10px 16px; border-radius: var(--radius-md) var(--radius-md) 0 0; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); font-weight: 600; }
.agp-okpanel { background: var(--green-50); border: 1px solid var(--green-100); color: var(--green-600); border-radius: var(--radius-md); padding: 10px 12px; font-size: var(--text-xs); }
.agp-pinbox { background: var(--accent-soft, var(--gray-50)); border-radius: var(--radius-md); padding: 10px; text-align: center; font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 650; letter-spacing: .3em; }

/* ── Agent-portal card anatomy (ported from the Stitch HTML export, 2026-07-07):
   header-band cards, caps micro-labels, unit stepper, date chips. ── */
.agp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.agp-card__head { display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-bottom: 1px solid var(--line); background: var(--gray-100); border-radius: var(--radius-md) var(--radius-md) 0 0; font-weight: 600; font-size: var(--text-base); } /* gray-100: gray-50 vanished against the canvas — the card top read as floating text */
.agp-card__head .agp-meta { margin-left: auto; font-weight: 500; }
.agp-card__body { padding: 20px; }
.agp-card--dashed { border-style: dashed; }
.agp-label { display: block; font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 6px; }
.agp-stepper { display: inline-flex; align-items: stretch; height: 38px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.agp-stepper button { border: 0; background: transparent; color: var(--text-muted); padding: 0 12px; cursor: pointer; font-size: var(--text-base); }
.agp-stepper button:first-child { border-right: 1px solid var(--hairline-2); }
.agp-stepper button:last-child { border-left: 1px solid var(--hairline-2); }
.agp-stepper button:hover { background: var(--gray-50); }
.agp-stepper input { border: 0; width: 48px; text-align: center; font-family: var(--font-mono); font-size: var(--text-sm); -moz-appearance: textfield; appearance: textfield; }
.agp-stepper input::-webkit-outer-spin-button, .agp-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.agp-datechip { background: var(--gray-100); padding: 2px 7px; border-radius: 4px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.agp-bookgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .agp-bookgrid { grid-template-columns: 1fr; } }
.agp-3col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .agp-3col { grid-template-columns: 1fr; } }
.agp-ocrstrip { display: flex; align-items: center; gap: 10px; background: var(--accent-soft); border-radius: var(--radius-md); padding: 10px 14px; font-size: var(--text-xs); }
.agp-ocrstrip .agp-meta { margin-left: auto; }

.agp-card__head--caps { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.agp-dim { color: var(--muted-2); }
.agp-tba { font-style: italic; color: var(--text-muted); }
.agp-dropzone { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: 24px; text-align: center; }
.agp-margin { color: var(--green-600); }

/* ── .fp-* — the FIELD portal set (tasks/033: crew + rep portals) ──────────
   One shared shell (layouts/field): sticky identity top bar, fluid phone-first
   main (320–430; ≥480 centers a column), fixed 4-tab bottom bar. Touch targets
   ≥48px; whole rows are tap targets on checklists. */
.fp-shell { min-height: 100vh; min-height: 100dvh; background: var(--canvas); display: flex; flex-direction: column; }
.fp-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(6px); }
.fp-top__name { font-weight: 650; color: var(--ink); font-size: var(--text-md); line-height: 1.15; }
.fp-top__cap { font-size: var(--text-xs); color: var(--text-muted); }
.fp-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-xs); margin-left: auto; flex: none; }
.fp-main { flex: 1; width: 100%; max-width: 480px; margin: 0 auto; padding: 14px 14px 84px;
  display: flex; flex-direction: column; gap: 12px; }
.fp-flash { margin: 10px 14px 0; padding: 9px 12px; border-radius: var(--radius-md); font-size: var(--text-sm); }
.fp-flash--ok { background: var(--success-bg); color: var(--success); }
.fp-flash--err { background: var(--danger-bg); color: var(--danger); }

.fp-tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 6; display: flex; height: 62px;
  background: #fff; border-top: 1px solid var(--hairline); padding-bottom: env(safe-area-inset-bottom); }
.fp-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: var(--text-2xs); color: var(--text-muted); text-decoration: none; min-height: 48px; }
.fp-tab.is-active { color: var(--accent); font-weight: 650; }
.fp-tab.is-soon { opacity: .38; pointer-events: none; }

.fp-sec { font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.fp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fp-chip { background: #fff; border: 1px solid var(--hairline); border-radius: 999px; padding: 4px 11px;
  font-size: var(--text-xs); color: var(--text-muted); }
.fp-chip b { color: var(--ink); }

.fp-card { background: var(--surface, #fff); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 13px 14px; }
.fp-card--empty { border-style: dashed; text-align: center; padding: 26px 16px; color: var(--text-muted); }
.fp-triphead { display: flex; align-items: baseline; gap: 9px; }
.fp-time { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-lg); }
.fp-route { font-weight: 600; font-size: var(--text-md); }
.fp-cap { font-size: var(--text-xs); color: var(--text-muted); }
.fp-bar { height: 6px; background: var(--canvas); border-radius: 4px; margin: 9px 0 4px; overflow: hidden; }
.fp-bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.fp-actions { display: flex; gap: 9px; margin-top: 11px; }
.fp-actions .dv-btn { flex: 1; min-height: 46px; }

/* PIN pad: real buttons (a11y), 3×4 grid, dots above. */
.fp-pinbox { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 26px 0 8px; }
.fp-pindots { display: flex; gap: 14px; }
.fp-pindot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-strong); }
.fp-pindot.is-filled { background: var(--accent); border-color: var(--accent); }
.fp-pinpad { display: grid; grid-template-columns: repeat(3, 76px); gap: 12px; }
.fp-pinpad button { min-height: 60px; border-radius: var(--radius-lg); border: 1px solid var(--hairline);
  background: #fff; font-size: var(--text-xl); font-weight: 600; color: var(--ink); }
.fp-pinpad button:active { background: var(--canvas); }
.fp-pinpad .fp-pinpad__ghost { border: none; background: transparent; font-size: var(--text-sm); color: var(--text-muted); }

@media (prefers-reduced-motion: no-preference) {
  .fp-pinbox.is-error .fp-pindots { animation: fp-shake .3s; }
  @keyframes fp-shake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
}
.fp-empty-title { font-weight: 600; color: var(--ink); margin: 0 0 4px; }

/* fp — P2 manifest additions */
.fp-chiprow { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.fp-selchip { border: 1px solid var(--hairline); background: #fff; border-radius: 999px; padding: 9px 14px;
  font-size: var(--text-xs); color: var(--text-muted); text-decoration: none; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; }
.fp-selchip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.fp-partyhead { display: flex; align-items: center; gap: 8px; padding: 8px 2px; }
.fp-checkrow { display: flex; align-items: center; gap: 11px; padding: 9px 2px; border-top: 1px solid var(--hairline-2); }
.fp-checkrow:first-child { border-top: none; }
.fp-checkform { margin: 0; flex: none; }
.fp-checkbtn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--border-strong);
  background: #fff; font-size: var(--text-lg); color: #fff; flex: none; }
.fp-checkbtn.is-checked { background: var(--success); border-color: var(--success); }
.fp-checkname { font-weight: 600; font-size: var(--text-sm); }
.fp-checkname.is-done { text-decoration: line-through; color: var(--text-muted); }
.fp-checkname.is-noshow { color: var(--danger); }
.fp-walktag { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .05em; color: var(--accent);
  background: var(--accent-soft); border-radius: 4px; padding: 2px 5px; }
.fp-noshowbtn { width: 40px; height: 40px; border-radius: var(--radius-md); border: 1px solid var(--hairline);
  background: #fff; color: var(--text-muted); flex: none; }
.fp-addbtn { display: flex; align-items: center; justify-content: center; min-height: 48px;
  border-radius: var(--radius-md); background: var(--accent); color: #fff; font-weight: 600;
  text-decoration: none; font-size: var(--text-sm); }
.fp-fare { font-family: var(--font-mono); font-weight: 650; font-size: var(--text-2xl); }