/* ============================================================
   Astra Receiving — web app design system (P1.5 beauty pass)
   Translated 1:1 from app/src-v162 + BUILD-STANDARDS section 1;
   elevated 2026-08-08 (typography / depth / motion / iconwork)
   with ZERO layout-bone or status-semantic changes.

   The canvas was a 640-unit-wide grid; --u scales one canvas
   unit to the real column width, exactly like the Power Apps
   player's fit-to-width. Renditions at 640px are scale 1.0.
   Tokens only — no hardcoded sizes outside this block.

   P1.5 additions, all tokenized below:
   - Inter (variable, self-hosted subset, wght 400-800 + opsz):
     one face, optically tuned per role; tabular numerals on
     every time/count/date; tracked ALL-CAPS captions.
   - Layered light: ambient+key shadow pairs, frosted-glass nav
     (solid fallback), tuned hairlines.
   Desktop (>=700px) presentation lives in css/command.css.
   - Motion: 150-250ms, transform/opacity only, direction-aware
     screen glides, skeleton shimmer; reduced-motion respected.
   ============================================================ */

/* ---------- the typeface (self-hosted; no external requests) ---------- */
@font-face{
  font-family:"Inter";
  src:url("../fonts/InterVariable-astra.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

:root{
  /* brand + status tokens (App.OnStart verbatim) */
  --brand-red:#A02828; --brand-gold:#F8A018; --bg:#F6F7F8; --surface:#FFFFFF;
  --ink:#1B1F24; --muted:#5F6A73; --line:#E0E4E8; --gold-ink:#3A2A00;
  --good:#217A4B; --good-bg:#E2F1E8; --info:#22618F; --info-bg:#E3EDF5;
  --crit:#B23E36; --crit-bg:#F8E6E4; --warn:#996A0E; --warn-bg:#F7EDD6;
  --red-soft:#F2E0E0;

  /* one canvas unit (design grid was 640 wide) */
  --appw: min(100vw, 480px);
  --u: calc(var(--appw) / 640);

  /* type scale: canvas Size N renders at N*4/3 px at scale 1 */
  --fs-title:   calc(80 * var(--u) / 3);    /* TypeTitle 20  */
  --fs-sub:     calc(52 * var(--u) / 3);    /* TypeSub 13    */
  --fs-body:    calc(56 * var(--u) / 3);    /* TypeBody 14   */
  --fs-meta:    calc(16 * var(--u));        /* TypeMeta 12   */
  --fs-caption: calc(44 * var(--u) / 3);    /* TypeCaption 11*/
  --fs-pill:    calc(44 * var(--u) / 3);    /* TypePill 11   */
  --fs-navicon: calc(80 * var(--u) / 3);    /* TypeNavIcon 20*/
  --fs-navcap:  calc(16 * var(--u));        /* TypeNavCap 12 */
  --fs-10:      calc(40 * var(--u) / 3);    /* floor Size 10 */
  --fs-16:      calc(64 * var(--u) / 3);    /* picker/chevron 16 */
  --fs-17:      calc(68 * var(--u) / 3);    /* big action ~17 */

  /* optical weight tuning per role (Inter variable axis) */
  --w-body:440;    /* running text: a touch sturdier than 400 at 12-14px */
  --w-medium:560;  /* row meta, quiet emphasis */
  --w-strong:640;  /* IDs, day names, caps captions */
  --w-title:680;   /* screen titles, times — optically matches old 700 */
  --w-pill:660;    /* pills, badges, chips */

  /* tracking */
  --track-title:-0.015em;  /* large sizes tighten */
  --track-caps:0.09em;     /* ALL-CAPS captions open up */
  --track-tiny:0.01em;     /* 10-12px body breathes */

  /* spacing (SpaceS/M/L; side margins 16) */
  --sp-s: calc(12 * var(--u));
  --sp-m: calc(16 * var(--u));
  --sp-l: calc(24 * var(--u));

  /* layered light: every level is an ambient wash + a key drop.
     (P1 had single flat offsets; weight kept at the renditions'.) */
  --shadow-card:
    0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(27,31,36,.04),
    0 calc(5 * var(--u)) calc(14 * var(--u)) calc(-3 * var(--u)) rgba(27,31,36,.09);
  --shadow-card-hover:
    0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(27,31,36,.05),
    0 calc(14 * var(--u)) calc(30 * var(--u)) calc(-6 * var(--u)) rgba(27,31,36,.14);
  --shadow-ctl:
    0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(27,31,36,.04),
    0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(27,31,36,.06);
  --shadow-band: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(27,31,36,.04);
  --shadow-pop:
    0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(27,31,36,.05),
    0 calc(18 * var(--u)) calc(44 * var(--u)) calc(-8 * var(--u)) rgba(27,31,36,.16);

  /* hairlines (true 1px, ink-tinted — crisper than 2u line borders) */
  --hairline: 1px solid rgba(27,31,36,.10);
  --hairline-strong: 1px solid rgba(27,31,36,.14);

  /* frosted-glass nav (solid fallback below) */
  --glass: rgba(255,255,255,.82);

  /* motion */
  --t-fast:150ms; --t-med:200ms; --t-slow:250ms;
  --ease:cubic-bezier(.2,.6,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --font:"Inter", -apple-system, "Segoe UI", system-ui, Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ height:100%; }
body{
  min-height:100dvh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-body);
  font-weight:var(--w-body);
  font-optical-sizing:auto;
  line-height:1.3;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* tabular numerals wherever digits line up or step (times, counts,
   dates, badges) so nothing jitters as the board changes */
.top .title, .top .subtitle, .ctime, .wdate, .wbadge, .mcell,
.fact .v, .cnchip, .sitechip{
  font-variant-numeric:tabular-nums;
}

/* ---------- inline icons (currentColor; the emoji era is over) ---------- */
.svgi{ display:block; width:calc(26 * var(--u)); height:calc(26 * var(--u)); }
.svgi *{ vector-effect:non-scaling-stroke; }

/* ---------- the app column ---------- */
.app{
  width:var(--appw);
  margin:0 auto;
  height:100dvh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
}

/* >=700px the Command console (css/command.css) owns the viewport:
   it widens .app to full bleed and lays the rail + panes inside it.
   Everything in THIS file stays the phone column + the shared
   component system those panes are built from. */

/* ---------- boot / auth / error states ---------- */
.boot{
  flex:1; display:flex; flex-direction:column; gap:var(--sp-m);
  align-items:center; justify-content:center; color:var(--muted);
  font-size:var(--fs-sub); padding:var(--sp-l);
}
.boot-logo{ height:calc(40 * var(--u)); margin-bottom:calc(2 * var(--u)); }
.boot-text{ font-weight:var(--w-medium); letter-spacing:var(--track-tiny); }

/* skeleton board — the loading state IS the layout, shimmering
   (replaces the P1 spinner; same bones as the Today screen) */
.skel{
  width:100%; max-width:calc(608 * var(--u));
  display:flex; flex-direction:column; align-items:center;
  gap:calc(10 * var(--u));
}
.bone{
  position:relative; overflow:hidden;
  background:#E9ECEF; border-radius:calc(8 * var(--u));
}
.bone::after{
  content:""; position:absolute; inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0));
  animation:shimmer 1.5s var(--ease) infinite;
}
@keyframes shimmer{ to{ transform:translateX(100%); } }
.skel .b-title{ width:calc(300 * var(--u)); height:calc(26 * var(--u)); }
.skel .b-sub{ width:calc(210 * var(--u)); height:calc(16 * var(--u)); margin-bottom:calc(14 * var(--u)); }
.skel-card{
  width:100%; height:calc(100 * var(--u));
  background:var(--surface);
  border:var(--hairline); border-radius:calc(22 * var(--u));
  box-shadow:var(--shadow-band);
  display:flex; align-items:center; gap:calc(14 * var(--u));
  padding:0 var(--sp-m);
}
.skel-card .b-time{ width:calc(56 * var(--u)); height:calc(18 * var(--u)); }
.skel-card .b-mid{ flex:1; display:flex; flex-direction:column; gap:calc(8 * var(--u)); }
.skel-card .b-id{ width:56%; height:calc(15 * var(--u)); }
.skel-card .b-desc{ width:78%; height:calc(12 * var(--u)); }
.skel-card .b-pill{ width:calc(108 * var(--u)); height:calc(26 * var(--u)); border-radius:calc(14 * var(--u)); }

.gate-card{
  background:var(--surface); border:var(--hairline);
  border-radius:calc(24 * var(--u)); box-shadow:var(--shadow-pop);
  padding:var(--sp-l); width:calc(100% - 2 * var(--sp-m));
  max-width:calc(560 * var(--u));
  display:flex; flex-direction:column; gap:var(--sp-m); align-items:center;
  text-align:center;
}
.gate-card h1{
  margin:0; font-size:var(--fs-title); font-weight:var(--w-title);
  letter-spacing:var(--track-title); color:var(--ink);
}
.gate-card p{ margin:0; font-size:var(--fs-sub); color:var(--muted); line-height:1.45; }
.gate-card .err{ color:var(--crit); font-size:var(--fs-sub); overflow-wrap:anywhere; }
.gate-icon{
  width:calc(64 * var(--u)); height:calc(64 * var(--u));
  border-radius:50%; background:var(--crit-bg); color:var(--crit);
  display:flex; align-items:center; justify-content:center;
}
.gate-icon .svgi{ width:calc(32 * var(--u)); height:calc(32 * var(--u)); }
.errbox{
  background:var(--crit-bg); color:var(--crit); border-radius:calc(16 * var(--u));
  padding:var(--sp-s) var(--sp-m); font-size:var(--fs-sub); font-weight:var(--w-strong);
  width:100%; text-align:left; overflow-wrap:anywhere; line-height:1.4;
}

.bigbtn{
  display:flex; align-items:center; justify-content:center; gap:calc(10 * var(--u));
  width:100%; border:none; cursor:pointer;
  border-radius:calc(16 * var(--u));
  padding:calc(18 * var(--u));
  font-family:inherit; font-size:var(--fs-17); font-weight:var(--w-title);
  letter-spacing:var(--track-title);
  box-shadow:var(--shadow-card);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.bb-brand{ background:var(--brand-red); color:#fff; }
.bb-brand:hover{ background:#8f2424; box-shadow:var(--shadow-card-hover); transform:translateY(calc(-1 * var(--u))); }
.bb-ghost{
  background:none; border:calc(1.5 * var(--u)) solid var(--line);
  color:var(--muted); box-shadow:none;
}
.bb-ghost:hover{ border-color:var(--muted); color:var(--ink); }
.bigbtn:active{ transform:translateY(0) scale(.98); box-shadow:var(--shadow-ctl); }
.mslogo{ width:calc(21 * var(--u)); height:calc(21 * var(--u)); flex:none; }

/* ---------- header (H124, white surface, hairline + soft band) ---------- */
.top{
  flex:none; position:relative;
  background:var(--surface);
  height:calc(124 * var(--u));
  border-bottom:var(--hairline);
  box-shadow:var(--shadow-band);
  z-index:5;
  padding-top:env(safe-area-inset-top);
}
.top .logo{
  display:block; margin:calc(12 * var(--u)) auto 0;
  height:calc(30 * var(--u)); width:auto;
}
.top .title{
  position:absolute; left:calc(60 * var(--u)); right:calc(60 * var(--u));
  top:calc(48 * var(--u) + env(safe-area-inset-top)); height:calc(36 * var(--u));
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-title); font-weight:var(--w-title);
  letter-spacing:var(--track-title); color:var(--ink);
  white-space:nowrap;
}
.top .subtitle{
  position:absolute; left:calc(60 * var(--u)); right:calc(60 * var(--u));
  top:calc(86 * var(--u) + env(safe-area-inset-top)); height:calc(26 * var(--u));
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-sub); font-weight:var(--w-medium); color:var(--muted);
  letter-spacing:var(--track-tiny); white-space:nowrap;
}
/* Find header: left-aligned, no steppers */
.top .title.left, .top .subtitle.left{
  left:var(--sp-m); right:var(--sp-m); justify-content:flex-start;
}
/* detail header: title row shifted right of the back circle */
.top .title.after-back{ left:calc(60 * var(--u)); right:var(--sp-m); justify-content:flex-start; }
.top .subtitle.after-back{ left:calc(60 * var(--u)); right:var(--sp-m); justify-content:flex-start; }
/* header text crossfade when the board glides (chrome itself stays put) */
.top.t-swap .title, .top.t-swap .subtitle{ animation:tfade var(--t-fast) var(--ease-out) both; }
@keyframes tfade{ from{ opacity:0; } }

/* circle steppers + back circle (44u, BrandRedSoft, red glyph) */
.chev{
  position:absolute; top:calc(58 * var(--u) + env(safe-area-inset-top));
  width:calc(44 * var(--u)); height:calc(44 * var(--u));
  border:none; border-radius:50%;
  background:var(--red-soft); color:var(--brand-red);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:var(--shadow-ctl);
  padding:0;
  transition:transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.chev .svgi{ width:calc(22 * var(--u)); height:calc(22 * var(--u)); }
.chev:hover{ background:#eed7d7; transform:scale(1.05); box-shadow:var(--shadow-card); }
.chev:active{ background:#e8cccc; transform:scale(.92); box-shadow:var(--shadow-ctl); }
.chev.prev{ left:var(--sp-m); }
.chev.next{ right:var(--sp-m); }
.chev.month{ top:calc(44 * var(--u) + env(safe-area-inset-top)); }
.chev.back{ left:calc(8 * var(--u)); top:calc(52 * var(--u) + env(safe-area-inset-top)); }

/* ---------- scrolling body ---------- */
.board{
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:var(--sp-m) var(--sp-m)
          calc(120 * var(--u) + env(safe-area-inset-bottom) + var(--sp-l));
  scrollbar-width:none;
}
.board::-webkit-scrollbar{ display:none; }

/* direction-aware screen glides: content moves, chrome stays.
   (transform/opacity only; 200-220ms; killed by reduced-motion) */
.board.a-switch{ animation:in-up var(--t-med) var(--ease-out) both; }
.board.a-fwd{ animation:in-right 220ms var(--ease-out) both; }
.board.a-back{ animation:in-left 220ms var(--ease-out) both; }
.board.a-stepr{ animation:in-right var(--t-med) var(--ease-out) both; }
.board.a-stepl{ animation:in-left var(--t-med) var(--ease-out) both; }
@keyframes in-up{ from{ opacity:0; transform:translateY(calc(14 * var(--u))); } }
@keyframes in-right{ from{ opacity:0; transform:translateX(calc(22 * var(--u))); } }
@keyframes in-left{ from{ opacity:0; transform:translateX(calc(-22 * var(--u))); } }

/* ---------- load cards (Today/Find): accent rect behind a white face ---------- */
.card{
  display:block; width:100%; position:relative;
  height:calc(100 * var(--u));
  margin:0 0 calc(13 * var(--u));       /* TemplateSize 113 - card 100 */
  padding:0; border:none; text-align:left;
  font-family:inherit; color:inherit; font-size:inherit; font-weight:inherit;
  background:var(--line);                /* accent layer; overridden per status */
  border-radius:calc(22 * var(--u));
  box-shadow:var(--shadow-card);
  cursor:pointer;
  --glow:rgba(27,31,36,.12);             /* hover edge glow, tinted per status */
  transition:transform var(--t-fast) var(--ease);
}
/* pre-rendered hover shadow+glow, crossfaded on opacity (60fps cheap) */
.card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; pointer-events:none;
  box-shadow:var(--shadow-card-hover),
             0 calc(4 * var(--u)) calc(18 * var(--u)) calc(-2 * var(--u)) var(--glow);
  opacity:0; transition:opacity var(--t-med) var(--ease);
}
.card .face{
  position:absolute; left:calc(5 * var(--u)); right:0; top:0; bottom:0;
  background:var(--surface);
  border:calc(1.5 * var(--u)) solid var(--line);
  border-radius:calc(22 * var(--u));
  display:flex; align-items:center;
  padding:0 var(--sp-m) 0 calc(15 * var(--u));
  overflow:hidden;
  transition:border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
@media (hover:hover){
  .card:hover{ transform:translateY(calc(-2 * var(--u))); }
  .card:hover::after{ opacity:1; }
  .card:hover .face{ border-color:#c9d0d6; }
}
.card:active{ transform:translateY(0) scale(.985); }
.card:active .face{ background:#f7f7f8; }
.card:focus-visible{
  outline:calc(2.5 * var(--u)) solid var(--brand-red);
  outline-offset:calc(2 * var(--u));
}
/* status accent edges (exact v1.6.2 map; TAMED gold = edge+pill only) */
.card.e-gold{ background:var(--brand-gold); --glow:rgba(248,160,24,.30); }
.card.e-good{ background:var(--good); --glow:rgba(33,122,75,.26); }
.card.e-info{ background:var(--info); --glow:rgba(34,97,143,.26); }
.card.e-crit{ background:var(--crit); --glow:rgba(178,62,54,.26); }
.card.e-none{ background:var(--line); }
/* week rows with no trucks: no accent edge at all */
.card.e-flat{ background:transparent; box-shadow:none; }
.card.e-flat .face{ left:0; box-shadow:var(--shadow-card); }

.ctime{
  flex:none; width:calc(92 * var(--u));
  display:flex; flex-direction:column; justify-content:center;
}
.ctime .t{
  font-size:var(--fs-body); font-weight:var(--w-title); color:var(--ink);
  line-height:1.2;
}
.ctime .t.blank{ color:var(--warn); }
.ctime .ampm{
  font-size:var(--fs-10); font-weight:var(--w-strong); color:var(--muted);
  letter-spacing:.06em; line-height:1.2;
}
.ctime .d1{ font-size:var(--fs-meta); font-weight:var(--w-title); color:var(--muted); line-height:1.3; }
.ctime .d2{ font-size:var(--fs-meta); font-weight:var(--w-title); color:var(--muted); line-height:1.3; white-space:nowrap; }

.cmain{ flex:1; min-width:0; display:flex; flex-direction:column; gap:calc(4 * var(--u)); }
.cid{
  display:flex; align-items:center; gap:calc(10 * var(--u));
  font-size:var(--fs-body); font-weight:var(--w-strong); color:var(--ink);
  letter-spacing:.002em;
  white-space:nowrap;
}
.cdesc{
  font-size:var(--fs-meta); color:var(--muted); letter-spacing:var(--track-tiny);
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.sitechip{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  height:calc(22 * var(--u)); padding:0 calc(8 * var(--u));
  border:calc(1.5 * var(--u)) solid #C7CDD3; border-radius:calc(7 * var(--u));
  background:#FFFFFF;
  font-size:var(--fs-10); font-weight:var(--w-pill); color:var(--ink);
  letter-spacing:.02em;
}
.cnchip{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  height:calc(22 * var(--u)); padding:0 calc(8 * var(--u));
  background:var(--info-bg); color:var(--info);
  border-radius:calc(7 * var(--u));
  font-size:var(--fs-10); font-weight:var(--w-pill);
  letter-spacing:.02em;
}

/* status pills (W120 H28 R13 in canvas units) */
.pill{
  flex:none; min-width:calc(120 * var(--u)); height:calc(28 * var(--u));
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 calc(12 * var(--u));
  border-radius:calc(14 * var(--u));
  font-size:var(--fs-pill); font-weight:var(--w-pill);
  letter-spacing:.015em; white-space:nowrap;
  margin-left:calc(8 * var(--u));
}
.p-warn{ background:var(--warn-bg); color:var(--warn); }
.p-good{ background:var(--good-bg); color:var(--good); }
.p-info{ background:var(--info-bg); color:var(--info); }
.p-crit{ background:var(--crit-bg); color:var(--crit); }
.p-outline{ background:transparent; color:var(--muted); border:calc(1.5 * var(--u)) solid var(--line); }

/* ---------- week rows ---------- */
.wdate{
  flex:none; width:calc(92 * var(--u)); position:relative;
  display:flex; flex-direction:column; justify-content:center;
}
.wdate .dow{ font-size:var(--fs-body); font-weight:var(--w-strong); color:var(--ink); line-height:1.25; }
.wdate .md{ font-size:var(--fs-10); font-weight:var(--w-strong); color:var(--muted); line-height:1.25; }
.wdate.today .dow, .wdate.today .md{ color:var(--brand-red); }
.wdate.today::before{
  content:""; position:absolute;
  left:calc(-4 * var(--u)); top:50%; transform:translateY(-50%);
  width:calc(84 * var(--u)); height:calc(56 * var(--u));
  background:var(--red-soft); border-radius:calc(12 * var(--u));
  z-index:-1;
}
.wdate{ z-index:0; }
.wmeta{ flex:1; min-width:0; font-size:var(--fs-body); font-weight:var(--w-medium); color:var(--ink); }
.wmeta.quiet{ font-weight:var(--w-body); color:var(--muted); }
.wbadge{
  flex:none; min-width:calc(32 * var(--u)); height:calc(24 * var(--u));
  padding:0 calc(6 * var(--u));
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand-red); color:#fff;
  border-radius:calc(12 * var(--u));
  font-size:var(--fs-10); font-weight:var(--w-pill);
  box-shadow:0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(160,40,40,.30);
}
.wchev{
  flex:none; width:calc(40 * var(--u));
  display:flex; align-items:center; justify-content:center;
  color:var(--muted);
  transition:transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.wchev .svgi{ width:calc(20 * var(--u)); height:calc(20 * var(--u)); }
@media (hover:hover){
  .card:hover .wchev{ transform:translateX(calc(3 * var(--u))); color:var(--ink); }
}

/* week fit-to-viewport: in the desktop pane band the board is bound to
   the pane's height and the 7 rows flex to share it, compressing down to
   a readable floor on short windows (tablet landscape 1024x768 included)
   so the whole week is always visible without scrolling. Only genuinely
   short windows (<560px tall) fall back to natural rows + scroll. (The
   700–1023px solo board keeps natural rows, like the phone.) */
@media (min-width:1024px) and (min-height:560px){
  .board--week{
    display:flex; flex-direction:column;
    gap:calc(13 * var(--u));
    height:100%;
  }
  .board--week .card{
    flex:1 1 0; height:auto;
    min-height:calc(64 * var(--u));
    margin:0;
  }
}

/* ---------- month grid (flat white cells) ---------- */
.dowrow{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:calc(6 * var(--u));
  margin-bottom:calc(8 * var(--u));
}
.dowrow div{
  text-align:center; font-size:var(--fs-10); font-weight:var(--w-strong); color:var(--muted);
  letter-spacing:var(--track-caps); padding:calc(4 * var(--u)) 0;
}
.mgrid{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:calc(6 * var(--u));
}
.mcell{
  aspect-ratio:1; position:relative;
  background:var(--surface);
  border:calc(1.5 * var(--u)) solid var(--line);
  border-radius:calc(12 * var(--u));
  font-family:inherit; padding:0; margin:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center;
  gap:calc(5 * var(--u));
  padding-top:calc(11 * var(--u));
  transition:transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
@media (hover:hover){
  .mcell:hover{
    border-color:var(--brand-red);
    transform:translateY(calc(-1 * var(--u)));
    box-shadow:var(--shadow-ctl);
  }
}
.mcell:active{ transform:translateY(0) scale(.95); }
.mcell:focus-visible{
  outline:calc(2.5 * var(--u)) solid var(--brand-red);
  outline-offset:calc(1 * var(--u));
}
.mcell .n{ font-size:var(--fs-body); font-weight:var(--w-strong); color:var(--ink); line-height:1; }
.mcell .c{
  min-width:calc(30 * var(--u)); height:calc(22 * var(--u));
  padding:0 calc(6 * var(--u));
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand-red); color:#fff;
  border-radius:calc(10 * var(--u));
  font-size:var(--fs-10); font-weight:var(--w-pill);
  box-shadow:0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(160,40,40,.30);
}
.mcell.blank{ visibility:hidden; }
.mcell.today{
  border:calc(3 * var(--u)) solid var(--brand-gold);
  box-shadow:var(--shadow-ctl);
}
.mcell.sel{
  background:var(--brand-gold); border-color:var(--brand-gold);
  box-shadow:var(--shadow-ctl);
}
.mcell.sel .n{ color:var(--gold-ink); }
.legend{
  margin-top:var(--sp-l);
  text-align:center; font-size:var(--fs-meta); color:var(--muted);
  letter-spacing:var(--track-tiny); line-height:1.5;
  padding:0 var(--sp-s);
}

/* ---------- find ---------- */
.search{
  width:100%; height:calc(56 * var(--u));
  border:calc(1.5 * var(--u)) solid var(--line);
  border-radius:calc(16 * var(--u));
  background:var(--surface); color:var(--ink);
  font-family:inherit; font-size:var(--fs-body); font-weight:var(--w-body);
  padding:0 calc(14 * var(--u)) 0 calc(46 * var(--u));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6A73' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.2'/%3E%3Cpath d='M15.4 15.4 20.3 20.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:calc(22 * var(--u)) calc(22 * var(--u));
  background-position:calc(14 * var(--u)) center;
  box-shadow:var(--shadow-ctl);
  margin-bottom:var(--sp-m);
  -webkit-appearance:none; appearance:none;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.search::placeholder{ color:#8a949c; }
.search::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.search:hover{ border-color:#c9d0d6; }
.search:focus{
  outline:none;
  border-color:var(--brand-red);
  box-shadow:var(--shadow-ctl), 0 0 0 calc(3 * var(--u)) rgba(160,40,40,.14);
}
.hint{
  color:var(--muted); text-align:center;
  font-size:var(--fs-sub);
  padding:calc(60 * var(--u)) var(--sp-s) 0;
}

/* ---------- empty states (designed: quiet icon + friendly copy) ---------- */
.empty{
  color:var(--muted); text-align:center;
  font-size:var(--fs-sub);
  padding:calc(90 * var(--u)) var(--sp-s) 0;
}
.state-icon{
  width:calc(72 * var(--u)); height:calc(72 * var(--u));
  margin:0 auto calc(14 * var(--u));
  border-radius:50%;
  background:#EDF0F2; color:#96A0A9;
  display:flex; align-items:center; justify-content:center;
}
.state-icon .svgi{ width:calc(34 * var(--u)); height:calc(34 * var(--u)); }
.state-line{
  font-size:var(--fs-sub); font-weight:var(--w-strong); color:var(--ink);
  margin-bottom:calc(4 * var(--u));
}
.state-sub{ font-size:var(--fs-sub); color:var(--muted); line-height:1.45; }

/* ---------- detail (Book screen, read-only in P1) ---------- */
.factbox{
  background:var(--surface);
  border:var(--hairline);
  border-radius:calc(22 * var(--u));
  box-shadow:var(--shadow-card);
  padding:var(--sp-m) var(--sp-m) var(--sp-s);
  margin-bottom:var(--sp-m);
}
.factbox h4{
  margin:0 0 calc(10 * var(--u));
  font-size:var(--fs-caption); font-weight:var(--w-strong); color:var(--muted);
  letter-spacing:var(--track-caps); text-transform:uppercase;
}
.factgrid{ display:grid; grid-template-columns:1fr 1fr; gap:calc(12 * var(--u)) var(--sp-m); }
.fact{ min-width:0; }
.fact.wide{ grid-column:1 / -1; }
.fact .k{
  font-size:var(--fs-caption); font-weight:var(--w-strong); color:var(--muted);
  letter-spacing:var(--track-caps); text-transform:uppercase;
  margin-bottom:calc(3 * var(--u));
}
.fact .v{ font-size:var(--fs-body); font-weight:var(--w-strong); color:var(--ink); overflow-wrap:anywhere; }
.fact .v.quiet{ color:var(--muted); font-weight:var(--w-body); }
.notice{
  background:var(--crit-bg); color:var(--crit);
  border-radius:calc(16 * var(--u));
  padding:var(--sp-s) var(--sp-m);
  font-size:var(--fs-meta); font-weight:var(--w-strong);
  letter-spacing:var(--track-tiny);
  box-shadow:var(--shadow-ctl);
  margin-bottom:var(--sp-m);
}

/* ---------- booking form (P2) — the Book screen goes live ----------
   One builder (views.js bookingFormHtml) on every surface; this block
   is the phone / shared styling in the approved column's language —
   css/command.css compacts the same markup into the pane's language.
   No stock chrome anywhere: the date field is the Astra overlay
   calendar, dropdowns wear the canvas red chevron tile, the toggle is
   the app's own switch. */
.bookbox{ padding-bottom:var(--sp-m); }
.bkgrid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:calc(12 * var(--u)) var(--sp-m);
  margin-bottom:calc(12 * var(--u));
}
/* the main field grid follows the canvas card exactly on phones:
   (appointment | slot) / (carrier | seller SO) / (add | pallets) — the
   add-a-carrier input sits DIRECTLY UNDER the carrier dropdown (Marc's
   arrangement); css/command.css re-areas the same cells to three
   console columns, keeping the add cell under the dropdown there too */
.bkgrid.bk-main{
  grid-template-areas:
    "date slot"
    "carrier so"
    "add pallets";
}
.bkf-date{ grid-area:date; }
.bkf-slot{ grid-area:slot; }
.bkf-carrier{ grid-area:carrier; }
.bkf-so{ grid-area:so; }
.bkf-add{ grid-area:add; }
.bkf-pallets{ grid-area:pallets; }
.bkf{ min-width:0; display:flex; flex-direction:column; gap:calc(6 * var(--u)); }
.bk-k{
  font-size:var(--fs-caption); font-weight:var(--w-strong); color:var(--muted);
  letter-spacing:var(--track-caps); text-transform:uppercase;
}
.bk-in, .bk-sel, .bk-datebtn{
  width:100%; height:calc(56 * var(--u));
  border:calc(1.5 * var(--u)) solid var(--line);
  border-radius:calc(16 * var(--u));
  background:var(--surface); color:var(--ink);
  font-family:inherit; font-size:var(--fs-body); font-weight:var(--w-body);
  padding:0 calc(14 * var(--u));
  box-shadow:var(--shadow-ctl);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease);
}
.bk-in::placeholder{ color:#8a949c; }
.bk-in:hover, .bk-sel:hover, .bk-datebtn:hover{ border-color:#c9d0d6; }
.bk-in:focus, .bk-sel:focus, .bk-datebtn:focus-visible{
  outline:none; border-color:var(--brand-red);
  box-shadow:var(--shadow-ctl), 0 0 0 calc(3 * var(--u)) rgba(160,40,40,.14);
}
.bk-ta{
  height:auto; min-height:calc(76 * var(--u));
  padding:calc(10 * var(--u)) calc(14 * var(--u));
  resize:none; line-height:1.35;
}
.bk-notes{ margin-bottom:calc(12 * var(--u)); }
.bk-datebtn{
  text-align:left; cursor:pointer;
  font-weight:var(--w-strong); font-variant-numeric:tabular-nums;
}
.bk-datebtn:active{ background:#f7f7f8; }
/* dropdowns wear the canvas chevron tile: red square, white glyph
   (ddApptSlot_B ChevronBackground/ChevronFill) — no stock blue */
.bk-selwrap{ position:relative; display:block; }
.bk-sel{
  appearance:none; -webkit-appearance:none;
  padding-right:calc(58 * var(--u)); cursor:pointer;
  accent-color:var(--brand-red);
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
  font-weight:var(--w-medium);
}
.bk-selwrap::after{
  content:""; position:absolute;
  top:calc(8 * var(--u)); right:calc(8 * var(--u)); bottom:calc(8 * var(--u));
  width:calc(40 * var(--u)); border-radius:calc(10 * var(--u));
  background:var(--brand-red)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.4 12 15.4 18 9.4'/%3E%3C/svg%3E")
    center / calc(18 * var(--u)) no-repeat;
  pointer-events:none;
}
/* reserved reveals: the space stays, the fields appear — no layout
   jump (early-arrival calm gap; add-carrier sits under the dropdown) */
.bk-idle{ visibility:hidden; }
.bk-early{ margin-bottom:calc(12 * var(--u)); }
.bk-early .bk-earlyfields{ margin-bottom:0; }
.bk-earlyrow{
  display:flex; align-items:center; gap:calc(12 * var(--u));
  margin:calc(2 * var(--u)) 0 calc(12 * var(--u));
}
.tglx{
  position:relative; width:calc(84 * var(--u)); height:calc(44 * var(--u)); flex:none;
  border:none; border-radius:calc(22 * var(--u));
  background:#C6CDD4; cursor:pointer; padding:0;
  box-shadow:inset 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(27,31,36,.16);
  transition:background-color var(--t-med) var(--ease);
}
.tglx-knob{
  position:absolute; top:calc(4 * var(--u)); left:calc(4 * var(--u));
  width:calc(36 * var(--u)); height:calc(36 * var(--u)); border-radius:50%;
  background:#fff; box-shadow:0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(27,31,36,.3);
  transition:transform var(--t-med) var(--ease);
}
.tglx.on{ background:var(--brand-gold); }
.tglx.on .tglx-knob{ transform:translateX(calc(40 * var(--u))); }
.tglx:focus-visible{
  outline:calc(2.5 * var(--u)) solid var(--brand-red);
  outline-offset:calc(2 * var(--u));
}
/* trap #9: the state label is our own, spaced clear of the knob */
.tglx-state{
  font-size:var(--fs-meta); font-weight:var(--w-strong); color:var(--muted);
  min-width:calc(26 * var(--u));
}
.tglx-cap{ font-size:var(--fs-body); font-weight:var(--w-strong); color:var(--ink); }
/* the tail: actions — at Arrived the actual-weight capture joins them
   (the unload cluster). Phone stacks; the pane puts them on one row. */
.bk-tail{ display:flex; flex-direction:column; gap:calc(12 * var(--u)); }
/* capacity: warn, never block — gold family, names the approver */
.bk-cap{
  background:var(--warn-bg); color:var(--warn);
  border-radius:calc(16 * var(--u));
  padding:var(--sp-s) var(--sp-m);
  font-size:var(--fs-meta); font-weight:var(--w-strong);
  letter-spacing:var(--track-tiny); line-height:1.45;
  box-shadow:var(--shadow-ctl);
  margin-bottom:calc(12 * var(--u));
  font-variant-numeric:tabular-nums;
}
/* save failure: loud, designed, retry stays right below */
.bk-err{
  background:var(--crit-bg); color:var(--crit);
  border-radius:calc(16 * var(--u));
  padding:var(--sp-s) var(--sp-m);
  font-size:var(--fs-meta); font-weight:var(--w-strong);
  letter-spacing:var(--track-tiny); line-height:1.45;
  overflow-wrap:anywhere;
  margin-bottom:calc(12 * var(--u));
}
.bk-done{
  color:var(--muted); text-align:center; font-size:var(--fs-sub);
  padding:var(--sp-s) 0 var(--sp-m);
}
.bk-actions{ display:flex; gap:calc(10 * var(--u)); }
/* Save changes renders always but SURFACES only while an unsaved edit
   exists (Marc 08/09) — the hidden attr must beat the flex display */
.bk-btn[hidden]{ display:none; }

/* unpinned demo badge: sample data must never impersonate the real
   board (Marc 08/09) — fixed, loud, un-screenshot-around-able */
.demobadge{
  position:fixed; right:14px; bottom:14px; z-index:200;
  padding:7px 13px; border-radius:999px;
  background:var(--warn-bg); color:var(--warn);
  border:1.5px solid rgba(153,106,14,.35);
  font-size:11px; font-weight:700; letter-spacing:.14em;
  box-shadow:0 2px 8px rgba(27,31,36,.18);
  pointer-events:none;
}
@media (max-width:699.98px){
  .demobadge{ bottom:calc(96 * var(--u)); right:10px; }
}

/* arrival gate (Marc 08/09): wrong-day bookings can't arrive — the
   reason line sits under the disabled action */
.bk-gate{
  margin-top:calc(9 * var(--u));
  font-size:var(--fs-caption); font-weight:var(--w-medium);
  color:var(--warn); text-align:center; letter-spacing:var(--track-tiny);
}
/* Arrived locks the schedule: date + slot go quiet, no affordance */
.bk-datebtn:disabled, .bk-sel:disabled{
  background:#F3F4F6; color:var(--muted); cursor:default;
  border-color:var(--line);
}
.bk-selwrap:has(.bk-sel:disabled)::after{ opacity:.35; }
.bk-btn{
  flex:1; min-width:0; height:calc(64 * var(--u));
  border:none; border-radius:calc(18 * var(--u));
  font-family:inherit; font-size:var(--fs-17); font-weight:var(--w-title);
  letter-spacing:var(--track-title);
  cursor:pointer; box-shadow:var(--shadow-card);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.bk-primary{ background:var(--brand-red); color:#fff; }
.bk-primary:hover:not(:disabled){ background:#8f2424; box-shadow:var(--shadow-card-hover); }
.bk-good{ background:var(--good); color:#fff; }
.bk-good:hover:not(:disabled){ background:#1c6a41; box-shadow:var(--shadow-card-hover); }
.bk-ghost{
  background:none; border:calc(1.5 * var(--u)) solid var(--line);
  color:var(--muted); box-shadow:none;
  font-size:var(--fs-16);
}
.bk-ghost:hover:not(:disabled){ border-color:var(--muted); color:var(--ink); }
.bk-btn:active:not(:disabled){ transform:scale(.98); box-shadow:var(--shadow-ctl); }
.bk-btn:disabled{ opacity:.45; cursor:default; box-shadow:none; }
.bk-btn:focus-visible{
  outline:calc(2.5 * var(--u)) solid var(--brand-red);
  outline-offset:calc(2 * var(--u));
}
.bk-busy{ animation:bkpulse 1.1s ease-in-out infinite; }
@keyframes bkpulse{ 50%{ opacity:.45; } }

/* ---------- the Astra overlay calendar (the ONLY date picker) ---------- */
.bkcal{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:calc(16 * var(--u));
}
.bkcal-scrim{
  position:absolute; inset:0; border:none; padding:0; cursor:pointer;
  background:rgba(20,24,28,.55);
  animation:bkscrim var(--t-fast) var(--ease-out) both;
}
@keyframes bkscrim{ from{ opacity:0; } }
.bkcal-panel{
  position:relative; width:min(100%, calc(560 * var(--u)));
  max-height:calc(100dvh - 20px); overflow-y:auto;
  background:var(--surface); border:var(--hairline);
  border-radius:calc(22 * var(--u)); box-shadow:var(--shadow-pop);
  padding:var(--sp-m);
  animation:bkcalin var(--t-med) var(--ease-out) both;
}
@keyframes bkcalin{ from{ opacity:0; transform:translateY(calc(10 * var(--u))) scale(.98); } }
.bkcal-head{
  display:flex; align-items:center; gap:calc(8 * var(--u));
  margin-bottom:calc(10 * var(--u));
}
.bkcal-title{
  flex:1; text-align:center;
  font-size:var(--fs-title); font-weight:var(--w-title);
  letter-spacing:var(--track-title); color:var(--ink);
}
.bkcal-chev{
  width:calc(44 * var(--u)); height:calc(44 * var(--u)); flex:none;
  border:none; border-radius:50%;
  background:var(--red-soft); color:var(--brand-red);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; box-shadow:var(--shadow-ctl);
  transition:transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.bkcal-chev .svgi{ width:calc(20 * var(--u)); height:calc(20 * var(--u)); }
.bkcal-chev:hover{ background:#eed7d7; transform:scale(1.06); }
.bkcal-chev:active{ background:#e8cccc; transform:scale(.92); }
.bkcal-chev:focus-visible{
  outline:calc(2.5 * var(--u)) solid var(--brand-red);
  outline-offset:calc(2 * var(--u));
}
.bkcal .dowrow{ margin-bottom:calc(8 * var(--u)); }
.bkcal-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:calc(6 * var(--u)); }
.bkcal-cell{
  aspect-ratio:1; min-height:calc(40 * var(--u));
  background:var(--surface);
  border:calc(1.5 * var(--u)) solid var(--line);
  border-radius:calc(12 * var(--u));
  font-family:inherit; font-size:var(--fs-body); font-weight:var(--w-strong);
  color:var(--ink); font-variant-numeric:tabular-nums;
  display:flex; align-items:center; justify-content:center;
  padding:0; margin:0; cursor:pointer;
  transition:transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease);
}
@media (hover:hover){
  .bkcal-cell:hover:not(.blank){ border-color:var(--brand-red); transform:translateY(calc(-1 * var(--u))); }
}
.bkcal-cell:active{ transform:scale(.94); }
.bkcal-cell.blank{ visibility:hidden; }
/* canvas btnPickCell_B: gold TODAY border survives selection (red fill) */
.bkcal-cell.today{ border:calc(3 * var(--u)) solid var(--brand-gold); }
.bkcal-cell.sel{ background:var(--brand-red); color:#fff; }
.bkcal-cell.sel:not(.today){ border-color:var(--brand-red); }
.bkcal-cell:focus-visible{
  outline:calc(2.5 * var(--u)) solid var(--brand-red);
  outline-offset:calc(1 * var(--u));
}
.bkcal-foot{
  display:grid; grid-template-columns:1fr 1fr; gap:calc(10 * var(--u));
  margin-top:var(--sp-m);
}
/* short windows (phone landscape): the picker compacts instead of clipping */
@media (max-height:560px){
  .bkcal-panel{ width:min(100%, calc(430 * var(--u))); padding:var(--sp-s); }
  .bkcal-cell{ aspect-ratio:auto; height:34px; min-height:0; border-radius:9px; }
  .bkcal-head{ margin-bottom:calc(4 * var(--u)); }
  .bkcal-foot{ margin-top:var(--sp-s); }
  .bkcal-foot .bk-btn{ height:40px; font-size:14px; border-radius:12px; }
}

/* ---------- nav bar (H120, icon over label, soft-red active pill)
     Frosted glass: the board scrolls underneath; solid fallback. ---------- */
.tabs{
  position:absolute; left:0; right:0; bottom:0;
  background:var(--surface);          /* fallback when no backdrop-filter */
  border-top:var(--hairline-strong);
  box-shadow:0 calc(-2 * var(--u)) calc(10 * var(--u)) rgba(27,31,36,.04);
  height:calc(120 * var(--u) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;
  z-index:5;
}
@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .tabs{
    background:var(--glass);
    -webkit-backdrop-filter:blur(16px) saturate(1.5);
    backdrop-filter:blur(16px) saturate(1.5);
  }
}
.tab{
  flex:1; border:none; background:none; cursor:pointer;
  font-family:inherit; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:calc(8 * var(--u));
  padding:0;
  transition:color var(--t-fast) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.tab .i{
  position:relative; width:calc(72 * var(--u)); height:calc(44 * var(--u));
  display:flex; align-items:center; justify-content:center;
  border-radius:calc(22 * var(--u));
  transition:background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.tab .l{
  font-size:var(--fs-navcap); font-weight:var(--w-strong);
  letter-spacing:var(--track-tiny);
  transition:color var(--t-fast) var(--ease);
}
@media (hover:hover){
  .tab:hover{ color:#3E4750; }
  .tab:hover .i{ background:rgba(27,31,36,.05); }
  .tab.on:hover{ color:var(--brand-red); }
  .tab.on:hover .i{ background:var(--red-soft); }
}
.tab:active .i{ transform:scale(.9); }
.tab:focus-visible{
  outline:calc(2.5 * var(--u)) solid var(--brand-red);
  outline-offset:calc(-4 * var(--u));
  border-radius:calc(16 * var(--u));
}
.tab.on{ color:var(--brand-red); }
.tab.on .i{ background:var(--red-soft); }
.tab.on .l{ font-weight:var(--w-title); }
/* active pill pops only on a real tab switch (main.js adds a-pop) */
.tabs.a-pop .tab.on .i{ animation:pillpop 220ms var(--ease-out) both; }
@keyframes pillpop{ from{ transform:scale(.7); opacity:.4; } }

/* focus ring for the remaining interactive chrome */
.chev:focus-visible, .bigbtn:focus-visible{
  outline:calc(2.5 * var(--u)) solid var(--brand-red);
  outline-offset:calc(2 * var(--u));
}

/* ---------- reduced motion: everything settles instantly ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; }
}