/* ===========================================================================
   SetuHaul Driver — 390px first.

   This is not the dashboard shrunk. A driver has one question at a time, one
   hand free, direct sunlight, and a truck to move. So:

     · one screen answers exactly one question
     · the answer is the biggest thing on it
     · the primary action lives in the bottom third, always
     · touch targets are 48px minimum, 56px for anything committing
     · body text never below 16px

   Status vocabulary is fixed app-wide and matches the dock light:
     on time  → clearance green   at risk → hi-vis amber
     delayed  → stop red          done    → quiet grey
   =========================================================================== */

body {
  font-size: var(--t-driver-body);
  background: var(--concrete);
  overscroll-behavior-y: none;
}

.app { min-height: 100dvh; display: flex; flex-direction: column; }

/* ------------------------------------------------------------- sign in
   A branded hero (deep signal blue, bridge-arch line art, the mark) with the
   form on a raised concrete sheet. The hero is fixed-colour by design — it is
   the brand, identical in light and dark. */

.auth {
  min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--concrete);
}

.auth__hero {
  position: relative; overflow: hidden; flex: 0 0 auto;
  padding: max(var(--s-8), env(safe-area-inset-top) + var(--s-6))
           var(--s-5) var(--s-7);
  background:
    radial-gradient(120% 90% at 85% -10%, #2C6DA4 0%, transparent 55%),
    linear-gradient(168deg, #1F4E79 0%, #14344F 78%);
  color: #fff;
}
.auth__hero--slim { padding-bottom: var(--s-5); }

/* Bridge-arch line art, anchored to the hero's bottom edge. */
.auth__arcs {
  position: absolute; inset: auto 0 0 0; width: 100%; height: 72%;
  opacity: .12; pointer-events: none;
}

.auth__brand {
  position: relative; display: flex; align-items: center; gap: var(--s-4);
}
.auth__logo {
  width: 64px; height: 64px; flex: 0 0 64px;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.14);
  animation: rise var(--dur-3) var(--ease);
}
.auth__logo--sm { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px; }
.auth__word {
  font-family: var(--font-display); font-size: 32px; font-weight: 800;
  letter-spacing: -.03em; line-height: 1;
}
.auth__word span { color: var(--hi-vis-pure); }
.auth__word--sm { font-size: 22px; }
.auth__tag {
  color: #B9C9D8; font-size: var(--t-small); margin: var(--s-2) 0 0;
}

/* The dock light itself — the design system's origin story, as a signature. */
.auth__lights {
  position: relative; display: flex; gap: 10px; margin-top: var(--s-6);
}
.auth__lights i {
  width: 9px; height: 9px; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}
.auth__lights i:nth-child(1) { background: #4CAF77; }
.auth__lights i:nth-child(2) { background: var(--hi-vis-pure);
                               animation: light-breathe 2.6s var(--ease) infinite; }
.auth__lights i:nth-child(3) { background: #C25450; }
@keyframes light-breathe {
  0%, 100% { box-shadow: 0 0 0 3px rgba(232,163,23,.10); }
  50%      { box-shadow: 0 0 0 6px rgba(232,163,23,.22); }
}
@media (prefers-reduced-motion: reduce) {
  .auth__lights i:nth-child(2), .auth__logo { animation: none; }
}

/* The form sheet slides over the hero's bottom edge. */
.auth__sheet {
  position: relative; flex: 1; margin-top: -18px;
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: flex; flex-direction: column;
  background: var(--concrete);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 32px rgba(10, 24, 38, .18);
}

.auth h1 {
  font-size: 28px; margin: 0 0 var(--s-2); letter-spacing: -.025em;
}
.auth__sub { color: var(--ink-2); margin: 0 0 var(--s-5); }

.langs { display: flex; gap: var(--s-2); margin-bottom: var(--s-5); }
.lang {
  min-height: 48px; padding: 0 var(--s-4); border-radius: var(--r-2);
  border: 1.5px solid var(--rule); background: var(--concrete-lit);
  font-size: var(--t-driver-body); font-weight: 600; color: var(--ink-2);
}
.lang[aria-pressed="true"] {
  background: var(--signal); border-color: var(--signal); color: #fff;
}

.f-label { display: block; margin-bottom: var(--s-2); }
.phone { display: flex; gap: var(--s-2); }
.phone__cc {
  display: flex; align-items: center; padding: 0 var(--s-3); min-height: 56px;
  background: var(--concrete-deep); border: 1.5px solid var(--rule);
  border-radius: var(--r-2); font-family: var(--font-data);
  font-size: 18px; font-weight: 600; color: var(--ink-2);
}
.in {
  width: 100%; min-height: 56px; padding: 0 var(--s-4);
  font-size: 19px; background: var(--concrete-lit); color: var(--ink);
  border: 1.5px solid var(--rule); border-radius: var(--r-2);
}
.in:focus { border-color: var(--signal); outline: none; }
.in--bad { border-color: var(--stop); }

.otp { display: flex; gap: var(--s-2); }
.otp input {
  flex: 1; min-width: 0; height: 62px; padding: 0; text-align: center;
  font-family: var(--font-data); font-size: 26px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--concrete-lit); color: var(--ink);
  border: 1.5px solid var(--rule); border-radius: var(--r-2);
}
.otp input:focus { border-color: var(--signal); outline: none; }
.otp input.on { border-color: var(--signal); background: var(--signal-wash); }

.hint { color: var(--ink-3); font-size: var(--t-small); margin-top: var(--s-2); }
.fielderr {
  display: flex; gap: var(--s-2); margin-top: var(--s-2);
  color: var(--stop); font-size: var(--t-small); font-weight: 600;
}
.devnote {
  margin-top: var(--s-4); padding: var(--s-3);
  border: 1px dashed var(--hi-vis-edge); border-radius: var(--r-2);
  background: var(--hi-vis-wash); color: var(--hi-vis); font-size: var(--t-small);
}
.devnote code { font-family: var(--font-data); font-size: 19px; font-weight: 700;
                letter-spacing: .12em; }

.auth__foot { margin-top: auto; padding-top: var(--s-5); }
.auth .btn-lg { width: 100%; }

/* Big committing button, thumb zone. */
.btn-lg {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 56px; padding: 0 var(--s-5);
  border: 0; border-radius: var(--r-2);
  background: var(--signal); color: #fff;
  font-size: 18px; font-weight: 700;
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn-lg:active:not(:disabled) { transform: scale(.99); }
.btn-lg:disabled { opacity: .5; }
.btn-lg--quiet {
  background: var(--concrete-lit); color: var(--ink);
  border: 1.5px solid var(--rule);
}
.btn-lg--go { background: var(--clearance); }

/* --------------------------------------------------------------- top bar */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--asphalt); color: #F0ECE5;
}
.topbar__title {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  letter-spacing: -.015em; flex: 1; min-width: 0;
}
.topbar__sub { font-size: var(--t-micro); color: #9C948A; }
.iconbtn {
  min-width: 44px; min-height: 44px; padding: 0 var(--s-3);
  border-radius: var(--r-2); background: rgba(255,255,255,.09);
  color: #F0ECE5; font-size: var(--t-small); font-weight: 600;
}
.back { font-size: 20px; }

/* Sync strip — a driver always knows how fresh this is. */
.syncbar {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 6px var(--s-4);
  background: var(--concrete-deep); border-bottom: 1px solid var(--rule);
  font-size: var(--t-micro); color: var(--ink-3);
}
.syncbar__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--clearance);
}
.syncbar--stale { background: var(--hi-vis-wash); color: var(--hi-vis); }
.syncbar--stale .syncbar__dot { background: var(--hi-vis-pure); }
.syncbar--off { background: var(--stop-wash); color: var(--stop); }
.syncbar--off .syncbar__dot { background: var(--stop); }

/* ------------------------------------------------------------------ views */

.view { flex: 1; padding: var(--s-4) var(--s-4) 96px; }
.view[hidden] { display: none; }

/* =========================== HOME =========================================
   Answers one question: where do I need to be, and when.
   ========================================================================= */

/* Slot-moved banner. Full width, unmissable, must be acknowledged. */
.moved {
  margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) var(--s-4);
  padding: var(--s-4);
  background: var(--hi-vis-pure); color: var(--asphalt);
  border-bottom: 3px solid #B8770B;
  animation: rise var(--dur-3) var(--ease);
}
.moved__k {
  font-size: var(--t-micro); font-weight: 800; letter-spacing: var(--track-caps);
  text-transform: uppercase; margin-bottom: var(--s-2);
}
.moved__swap {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-3);
}
.moved__old { font-size: 17px; text-decoration: line-through; opacity: .62; }
.moved__arrow { font-size: 19px; font-weight: 700; }
.moved__new { font-size: 24px; font-weight: 700; }
.moved .btn-lg { background: var(--asphalt); min-height: 50px; width: 100%; }

.answer {
  background: var(--concrete-lit); border: 1px solid var(--rule);
  border-radius: var(--r-3); box-shadow: var(--lift-2);
  overflow: hidden; margin-bottom: var(--s-4);
}
.answer__status {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-small); font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
}
.answer__status--ontime  { background: var(--clearance-wash); color: var(--clearance); }
.answer__status--atrisk  { background: var(--hi-vis-wash);    color: var(--hi-vis); }
.answer__status--delayed { background: var(--stop-wash);      color: var(--stop); }
.answer__status--done    { background: var(--concrete-deep);  color: var(--ink-3); }

.answer__why {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--t-small); line-height: 1.45; color: var(--ink-2);
}
.answer__why b { font-family: var(--font-data); font-weight: 600; color: var(--ink); }

.answer__body { padding: var(--s-5) var(--s-4) var(--s-4); text-align: center; }
.answer__where {
  font-family: var(--font-display); font-weight: 800;
  font-size: 56px; line-height: .95; letter-spacing: -.04em;
}
.answer__wherek {
  font-size: var(--t-micro); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--ink-3); margin-top: var(--s-1);
}
.answer__when {
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: var(--t-driver-answer); font-weight: 600;
  margin-top: var(--s-4); letter-spacing: -.01em;
}
.answer__count {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s-2); padding: 5px 12px; border-radius: var(--r-full);
  background: var(--concrete-deep); color: var(--ink-2);
  font-family: var(--font-data); font-size: var(--t-small); font-weight: 600;
}
.answer__count--soon { background: var(--hi-vis-wash); color: var(--hi-vis); }
.answer__count--miss {
  background: var(--stop-wash); color: var(--stop);
  border: 1px solid var(--stop-edge); font-weight: 700;
}
.answer__facility { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--t-small); }

.answer__meta {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule-soft);
}
.answer__cell { padding: var(--s-3) var(--s-4); }
.answer__cell + .answer__cell { border-left: 1px solid var(--rule-soft); }
.answer__cellk { font-size: var(--t-micro); color: var(--ink-3);
                 letter-spacing: var(--track-caps); text-transform: uppercase; }
.answer__cellv { font-family: var(--font-data); font-size: 17px; font-weight: 600;
                 font-variant-numeric: tabular-nums; margin-top: 2px; }

/* Journey stepper — physical progress, five fixed stages. */
.steps {
  display: flex; padding: var(--s-4) 0 var(--s-3);
  background: var(--concrete-lit); border: 1px solid var(--rule);
  border-radius: var(--r-3); margin-bottom: var(--s-3);
}
.step {
  flex: 1; min-width: 0; text-align: center; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.step__dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--rule); box-shadow: 0 0 0 3px var(--concrete-lit);
  position: relative; z-index: 2;
}
.step--done .step__dot { background: var(--clearance); }
.step--now  .step__dot { background: var(--signal); box-shadow: 0 0 0 4px var(--signal-wash); }
.step__l {
  font-size: 10px; line-height: 1.25; color: var(--ink-3); font-weight: 600;
  padding: 0 2px; hyphens: auto;
}
.step--now .step__l { color: var(--signal); font-weight: 700; }
/* Connector spans dot centre to dot centre, behind the dots. */
.step:not(:last-child)::after {
  content: ""; position: absolute; z-index: 1; top: 5px; left: 50%;
  width: 100%; height: 2px; background: var(--rule);
}
.step--done:not(:last-child)::after { background: var(--clearance); }

/* Assignment list row (my day, and the secondary loads on home). */
.rowcard {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; text-align: left;
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-2);
  background: var(--concrete-lit); border: 1px solid var(--rule);
  border-radius: var(--r-2); min-height: 64px;
}
.rowcard:active { background: var(--concrete-deep); }
.rowcard__rail { width: 3px; align-self: stretch; border-radius: 2px; }
.rowcard--ontime  .rowcard__rail { background: var(--clearance); }
.rowcard--atrisk  .rowcard__rail { background: var(--hi-vis-pure); }
.rowcard--delayed .rowcard__rail { background: var(--stop); }
.rowcard--done    .rowcard__rail { background: var(--ink-4); }
.rowcard__time {
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: 19px; font-weight: 700; min-width: 58px;
}
.rowcard__time--none {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  line-height: 1.2; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .04em;
}
.rowcard__main { flex: 1; min-width: 0; }
.rowcard__ref { font-weight: 600; font-size: var(--t-driver-body); }
.rowcard__sub { font-size: var(--t-small); color: var(--ink-3);
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rowcard__dock {
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  color: var(--ink-2);
}
.rowcard__chev { color: var(--ink-4); font-size: 18px; }

.section-h {
  display: flex; align-items: baseline; gap: var(--s-2);
  margin: var(--s-5) 0 var(--s-3);
}
.section-h h2 { font-size: 19px; }
.section-h span { color: var(--ink-3); font-size: var(--t-small); }

/* ======================== ASSIGNMENT DETAIL ============================= */

.detail__block {
  background: var(--concrete-lit); border: 1px solid var(--rule);
  border-radius: var(--r-3); margin-bottom: var(--s-3); overflow: hidden;
}
.detail__row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule-soft);
}
.detail__row:last-child { border-bottom: 0; }
.detail__k { color: var(--ink-3); font-size: var(--t-small); }
.detail__v { font-family: var(--font-data); font-weight: 600;
             font-variant-numeric: tabular-nums; text-align: right; }
.detail__v--wide { font-family: var(--font-body); font-weight: 500; }

/* =============================== CHAT =================================== */

.chatwrap { display: flex; flex-direction: column; height: 100dvh; }

/* Pinned shipment context — sits above the conversation, always. */
.pinned {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--signal-wash); border-bottom: 1px solid var(--rule);
}
.pinned__pin { font-size: 14px; }
.pinned__main { flex: 1; min-width: 0; }
.pinned__ref { font-weight: 700; font-size: var(--t-small); }
.pinned__sub {
  font-family: var(--font-data); font-size: var(--t-micro); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.pinned__change {
  font-size: var(--t-small); font-weight: 600; color: var(--signal);
  min-height: 44px; padding: 0 var(--s-2);
}

.banner {
  padding: var(--s-3) var(--s-4); text-align: center;
  font-size: var(--t-small); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.banner--PROPOSED  { background: var(--hi-vis-pure); color: var(--asphalt); }
.banner--REQUESTED { background: var(--signal); }
.banner--CONFIRMED { background: var(--clearance); }

.log { flex: 1; overflow-y: auto; padding: var(--s-4);
       overscroll-behavior: contain; }

.msg {
  max-width: 86%; margin-bottom: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-3);
  font-size: var(--t-driver-body); line-height: 1.45;
  animation: rise var(--dur-2) var(--ease);
}
.msg--me {
  margin-left: auto; background: var(--signal); color: #fff;
  border-bottom-right-radius: var(--r-1);
}
.msg--ai {
  background: var(--concrete-lit); border: 1px solid var(--rule);
  border-bottom-left-radius: var(--r-1);
}
.msg--sys {
  max-width: 100%; text-align: center; background: none;
  color: var(--ink-3); font-size: var(--t-small); padding: var(--s-2) 0;
}
.msg--err {
  max-width: 100%; background: var(--stop-wash); color: var(--stop);
  border: 1px solid var(--stop-edge);
}
/* Optimistic message, not yet acknowledged by the server. */
.msg--pending { opacity: .55; }

.typing { display: flex; gap: 5px; padding: var(--s-4); width: fit-content; }
.typing i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4);
  animation: blip 1.1s infinite;
}
.typing i:nth-child(2) { animation-delay: .14s; }
.typing i:nth-child(3) { animation-delay: .28s; }
@keyframes blip { 0%,60%,100% { opacity: .35 } 30% { opacity: 1 } }

/* Slot option card inside chat. */
.slot {
  background: var(--concrete-lit); border: 1.5px solid var(--rule);
  border-radius: var(--r-3); padding: var(--s-4); margin-bottom: var(--s-3);
}
.slot--held  { border-color: var(--hi-vis-pure); background: var(--hi-vis-wash); }
.slot--taken { opacity: .5; border-style: dashed; }
.slot__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-2);
}
.slot__dock { font-family: var(--font-display); font-size: 24px; font-weight: 800; }
.slot__time {
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: 21px; font-weight: 600; color: var(--signal);
}
.slot__line { font-size: var(--t-small); color: var(--ink-2); line-height: 1.45; }
.slot__line--go { color: var(--clearance); font-weight: 600; }
.slot .btn-lg { width: 100%; margin-top: var(--s-3); }
.countdown {
  margin-top: var(--s-3); text-align: center;
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 700; color: var(--hi-vis);
}
.countdown--urgent { color: var(--stop); }

.quick { display: flex; gap: var(--s-2); padding: 0 var(--s-4) var(--s-3);
         flex-wrap: wrap; }
.quick button {
  min-height: 46px; padding: 0 var(--s-4); border-radius: var(--r-full);
  border: 1.5px solid var(--signal); background: var(--concrete-lit);
  color: var(--signal); font-size: var(--t-small); font-weight: 600;
}

.composer {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom));
  background: var(--concrete-lit); border-top: 1px solid var(--rule);
}
.mic {
  width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%;
  background: var(--signal); color: #fff;
  display: grid; place-items: center;
}
/* The glyph must never steal the press — hold-to-talk lives on the button. */
.mic svg { pointer-events: none; display: block; }
.mic--rec { background: var(--stop); }
.mic:disabled { background: var(--ink-4); }
.composer .in { min-height: 52px; font-size: var(--t-driver-body); }
.send {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: var(--r-2);
  background: var(--signal-deep); color: #fff; font-size: 19px;
}
.asr {
  position: absolute; left: var(--s-4); right: var(--s-4); bottom: 84px;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-2);
  background: var(--asphalt); color: #F0ECE5; font-size: var(--t-driver-body);
  box-shadow: var(--lift-3);
}
.asr b { display: block; font-size: var(--t-micro); color: var(--hi-vis-pure);
         letter-spacing: var(--track-caps); text-transform: uppercase; }

/* ============================== PROFILE ================================= */

.prof {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5) var(--s-4);
  background: var(--concrete-lit); border: 1px solid var(--rule);
  border-radius: var(--r-3); margin-bottom: var(--s-4);
}
.prof__av {
  width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%;
  background: var(--signal); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
}
.prof__name { font-family: var(--font-display); font-size: 21px; font-weight: 700; }
.prof__id { font-family: var(--font-data); font-size: var(--t-small); color: var(--ink-3); }

/* ============================ BOTTOM NAV =================================
   Fixed, thumb-reachable, four destinations. The assistant is a destination,
   not a floating decoration, because it is a real part of the job. */

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--concrete-lit); border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: var(--s-2) 0 var(--s-3); min-height: 58px;
  color: var(--ink-3); font-size: 10.5px; font-weight: 600;
}
.nav button[aria-current="page"] { color: var(--signal); }
.nav__ico { font-size: 19px; line-height: 1; }
.nav__badge {
  position: absolute; transform: translate(14px, -4px);
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-full);
  background: var(--stop); color: #fff;
  font-family: var(--font-data); font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}

/* --------------------------------------------------------------- skeleton */

.sk-answer {
  background: var(--concrete-lit); border: 1px solid var(--rule);
  border-radius: var(--r-3); padding: var(--s-5) var(--s-4); text-align: center;
}

/* ------------------------------------------------------------- responsive
   Baseline is 390px. On a tablet or desktop the column is centred rather than
   stretched — a driver layout stretched to 1200px is nobody's product. */
@media (min-width: 560px) {
  .app, .auth, .chatwrap {
    max-width: 480px; margin: 0 auto;
    border-left: 1px solid var(--rule); border-right: 1px solid var(--rule);
    min-height: 100dvh; background: var(--concrete);
  }
  .nav { max-width: 480px; left: 50%; transform: translateX(-50%); }
}

/* A requested slot is not a promise. The pill and the change banner both say
   so, because the assistant's words ("waiting for warehouse confirmation")
   and the screen beside them must not disagree. */
.answer__status--pending { background: var(--hi-vis-wash); color: var(--hi-vis); }
.rowcard--pending .rowcard__rail { background: var(--hi-vis-pure); }
.moved__pending {
  margin: var(--s-2) 0 var(--s-3); font-size: var(--t-small); font-weight: 600;
  color: #4A3A12;
}

/* A declined request is an answer, not an absence — make it read as one. */
.answer__rej {
  color: var(--hi-vis); font-weight: 600;
  border-left: 3px solid currentColor; padding-left: var(--s-3);
}