/* Arrive app styles — mobile-first (base = 375px), tokens only.
   Class names + values from /design/design-reference.html and _DESIGN_HOME_HYBRID.html. */
* { box-sizing: border-box; margin: 0; }
body { background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: 1.5; }
button { font: inherit; cursor: pointer; }
.hidden { display: none !important; } /* !important: state toggle utility, by design */

/* ── auth view ── */
.auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-5); padding: var(--s-5); text-align: center; }
.auth p { color: var(--muted); font-size: var(--fs-small); max-width: 300px; }

/* ── logo: "The Journey" (option F, Peter 2026-06-07) ── */
.logo { display: inline-flex; flex-direction: column; gap: 4px; }
.logo .lg-word { font-weight: 800; font-size: 17px; letter-spacing: -0.03em; line-height: 1; }
.logo .lg-word em { font-style: normal; color: var(--status-delivered); }
.logo .lg-bar { display: flex; gap: 3px; }
.logo .lg-bar span { height: 3px; flex: 1; border-radius: var(--r-pill); background: var(--status-delivered); }
.auth .logo .lg-word { font-size: 30px; }
.auth .logo .lg-bar { gap: 4px; }
.auth .logo .lg-bar span { height: 4px; }

/* ── chrome ── */
.page { max-width: 430px; margin: 0 auto; padding: var(--s-5) var(--s-4) 96px; display: flex; flex-direction: column; gap: var(--s-5); }
.top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.seg { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px; }
.seg button { font-size: var(--fs-micro); font-weight: 700; border: none; background: transparent; color: var(--muted); border-radius: var(--r-pill); padding: 7px 12px; min-height: 34px; }
.seg button.on { background: var(--ink); color: var(--card); }

/* ── reassurance header ── */
.breath h1 { font-family: var(--serif); font-weight: 600; font-size: 27px; line-height: 1.25; letter-spacing: -0.01em; }
.breath h1 em { font-style: normal; color: var(--status-delivered); }
.breath .ctx { margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-small); }

/* ── sections + rows ── */
.lbl { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: var(--s-2); }
.lbl .n { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0 8px; color: var(--ink-soft); }
.rows { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.prow { display: flex; align-items: center; gap: var(--s-3); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 9px 12px; min-height: 52px; }
.prow .pdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pdot.d-ordered { background: var(--status-ordered); }
.pdot.d-transit { background: var(--status-transit); }
.pdot.d-done { background: var(--status-delivered); }
.pdot.d-review { background: var(--status-exception); }
.prow .meta { flex: 1; min-width: 0; }
.prow .nm { font-size: var(--fs-small); font-weight: 650; }
.prow .it { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .wsq { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.wsq.personal { background: var(--ws-personal-ink); }
.wsq.business { background: var(--ws-business-ink); }
.wsq.custom { background: var(--faint); }
.prow.done { opacity: 0.62; }
.prow .when { font-size: var(--fs-micro); color: var(--faint); white-space: nowrap; }

/* tick-off control */
.tick { width: 34px; height: 34px; min-width: 34px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--card); color: transparent; font-size: 15px; display: flex; align-items: center; justify-content: center; padding: 0; }
.tick[aria-pressed="true"] { background: var(--status-delivered); border-color: var(--status-delivered); color: var(--card); }

/* all-fine + empty ── */
.allfine { background: var(--status-delivered-soft); border-radius: var(--r-card); padding: 14px 16px; display: flex; align-items: center; gap: var(--s-3); }
.allfine .tickmark { width: 30px; height: 30px; border-radius: 50%; background: var(--status-delivered); color: var(--card); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.allfine .tx { font-size: var(--fs-small); color: var(--status-delivered); font-weight: 600; }
.empty-state { text-align: center; padding: var(--s-7) var(--s-5); color: var(--muted); }
.empty-state .es-title { font-weight: 650; color: var(--ink); margin-bottom: var(--s-1); }
.error-banner { background: var(--status-exception-soft); color: var(--status-exception); border-radius: var(--r-ctl); padding: var(--s-3) var(--s-4); font-size: var(--fs-small); }

/* ── buttons ── */
.btn { font-size: var(--fs-small); font-weight: 650; border-radius: var(--r-pill); padding: 11px 18px; min-height: 44px; border: 1px solid transparent; }
.btn-primary { background: var(--signal); color: var(--signal-ink); }
.btn-dark { background: var(--ink); color: var(--card); }
.btn-secondary { background: var(--card); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost { background: transparent; color: var(--signal); border: none; }

/* floating add button */
.fab { position: fixed; right: 16px; bottom: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--card); font-size: 26px; border: none; box-shadow: var(--shadow-float); z-index: 20; }

/* ── bottom sheet (add order) ── */
.sheet-back { position: fixed; inset: 0; background: rgba(26,24,20,.35); z-index: 30; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; background: var(--card); border-radius: var(--r-card) var(--r-card) 0 0; box-shadow: var(--shadow-float); padding: var(--s-5) var(--s-4) var(--s-6); z-index: 31; max-width: 430px; margin: 0 auto; max-height: 86vh; overflow-y: auto; }
.sheet h2 { font-size: var(--fs-title); letter-spacing: -0.01em; margin-bottom: var(--s-4); }
.sheet .sheet-note { color: var(--muted); font-size: var(--fs-small); margin: -8px 0 var(--s-4); }
.field { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-3); }
.field label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.field input, .field select { font: inherit; font-size: var(--fs-body); padding: 11px 12px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--canvas); color: var(--ink); width: 100%; }
.field input:focus, .field select:focus { outline: 2px solid var(--signal); outline-offset: 0; }
.sheet .actions { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.sheet .actions .btn { flex: 1; }

/* ── scale up ── */
@media (min-width: 700px) {
  .page { max-width: 560px; }
  .sheet { max-width: 560px; border-radius: var(--r-card); bottom: 24px; left: 50%; right: auto; transform: translateX(-50%); width: 92%; }
}