/* CLIENT-ACCOUNT-REDESIGN-BATCH2-SHELL-PROFILE-ADDRESSES-001 (shell) —
   productionized to the owner-accepted "Carmel Go Workspace" direction by
   CLIENT-ACCOUNT-REDESIGN-V2-PRODUCTIONIZATION-001. One file, all five
   Client Account pages link it plus shared-app-light.css (base reset only —
   every visible token below is now a CLIENT-LOCAL override, matching the
   pre-existing --muted/--accent/--ok override pattern this file already
   used before this task). Logical properties throughout so RTL (he/ar) is
   correct by construction.

   Visual system derived verbatim from the production public storefront
   (frontend/courier/order-storefront.css) via the owner-accepted V2 design
   direction (frontend/prototypes/client-account-v2-design-direction/), per
   sol/claude-results/CLIENT-ACCOUNT-REDESIGN-V2-PRODUCTIONIZATION-001.md.
   Every selector the read-only client-order-detail.js/client/
   client-templates.js modules already render into (.cg-h1, .card,
   .detail-group, .field-row, .timeline-*, .edit-*, .tpl-item, .ac-*, .seg,
   .toggle-row, .confirm-box, .error-state/.empty-state, .badge, etc.) is
   preserved by name and re-themed here — those two modules are never
   touched by this task. */

:root{
  /* ── Client-local override of shared-app-light.css's tokens (kept
     distinct so the shared file — also used by /order.html — is never
     edited) — the owner-accepted navy/blue system, reused verbatim from
     order-storefront.css. ── */
  --bg:#f7f8fb;
  --paper:#ffffff;
  --ink:#0f172a;
  --muted:#667085;
  --line:#dbe2ea;
  --line-strong:#c7d0dc;
  --field:#f3f6fb;
  --accent:#2f5bea;
  --accent-dark:#0f1b3d;
  --ok:#157a45;
  --err:#c0392b;
  --err-bg:#fdeceb;
  --focus-ring:rgba(47,91,234,.35);
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --shadow-sm:0 1px 3px rgba(15,23,42,.08);
  --radius:18px;
  --radius-sm:12px;
  --radius-pill:999px;

  /* Status/badge families — drawn from hues already present in
     order-storefront.css (gold tenant-name label, green success), not
     invented; darkened where needed for AA on their own tinted backgrounds. */
  --status-new-bg:#fdf3e0;    --status-new-ink:#7a5205;
  --status-progress-bg:#e6ecfe; --status-progress-ink:#2544ad;
  --status-done-bg:#e4f7ec;   --status-done-ink:#157a45;
  /* Darkened from --muted (4.441:1, below AA on this exact background) —
     a dedicated ink so the cancelled badge clears AA without moving the
     shared --muted token used elsewhere against lighter surfaces. */
  --status-cancelled-bg:#f1f2f4; --status-cancelled-ink:#5c6472;
  --status-unknown-bg:#f1e9fb; --status-unknown-ink:#5b3a94;

  /* Authenticated workspace grid (task section B). */
  --shell-nav-w:248px;
  --shell-aside-w:300px;
  --shell-header-h:64px;
  --workspace-max:1240px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  line-height:1.45;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

.skip-link{
  position:absolute; inset-inline-start:-999px; top:auto;
  background:var(--accent); color:#fff; padding:10px 16px; border-radius:0 0 8px 8px;
  z-index:100;
}
.skip-link:focus{ inset-inline-start:0; top:0; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}
a, button, input, select, textarea, [tabindex]{
  scroll-margin-block:16px;
  scroll-margin-inline:16px;
}

.cg-icon{ display:inline-flex; flex:0 0 auto; }
.cg-icon svg{ width:18px; height:18px; display:block; }

/* ── Shell: nav rail + content column (desktop); bottom tab bar (mobile) ──
   Flexbox, not grid: at the mobile breakpoint below, `.shell` becomes a
   100vh column of [rail (hidden), content-col (flex:1, its OWN scroll
   container), tab bar] — the tab bar occupies REAL, reserved flow space as
   a normal sibling, never `position:fixed` overlaying scrollable content.
   This is a structural guarantee, not a padding estimate: no interactive
   control can ever render behind the tab bar, at any content length,
   language or zoom level, because content-col's own scrollable box simply
   does not extend into the tab bar's row. `#tabbar-root` (the mount point)
   uses `display:contents` so its child `.tab-bar` participates directly in
   `.shell`'s own flex layout, exactly as if it were a direct child. */
.shell{
  display:flex;
  min-block-size:100vh;
  max-inline-size:100%;
}
.shell > *{ min-inline-size:0; }
#tabbar-root{ display:contents; }
.content-col{ flex:1; display:flex; flex-direction:column; min-inline-size:0; }

.cg-nav{
  flex:0 0 var(--shell-nav-w);
  inline-size:var(--shell-nav-w);
  background:var(--paper);
  border-inline-end:1px solid var(--line);
  padding:18px 12px;
  display:flex; flex-direction:column; gap:2px;
  position:sticky; top:0; align-self:start; min-block-size:100vh;
}
.cg-brand{
  display:flex; align-items:center; gap:9px;
  font-weight:800; font-size:16px; color:var(--ink); text-decoration:none;
  padding:6px 10px 18px;
}
.cg-brand .brand-mark{ width:28px; height:34px; object-fit:contain; flex:0 0 auto; }
.cg-nav a{
  display:flex; align-items:center; gap:11px;
  min-block-size:44px;
  padding:0 12px;
  border-radius:var(--radius-sm);
  color:var(--ink);
  text-decoration:none;
  font-size:14px; font-weight:600;
  white-space:nowrap;
  border-inline-start:3px solid transparent;
}
.cg-nav a.cg-brand{ min-block-size:0; border-inline-start:none; padding:6px 10px 18px; }
.cg-nav a .cg-icon{ color:var(--muted); }
.cg-nav a:hover{ background:var(--field); }
.cg-nav a[aria-current="page"]{
  background:var(--status-progress-bg); color:var(--accent);
  border-inline-start-color:var(--accent);
}
.cg-nav a[aria-current="page"] .cg-icon{ color:var(--accent); }
.cg-nav a.cg-nav-cta{ margin-block-start:10px; }
.cg-nav button.cg-signout{
  margin-block-start:auto;
  display:flex; align-items:center; gap:11px;
  min-block-size:44px; padding:0 12px; border-radius:var(--radius-sm);
  background:none; border:none; color:var(--muted);
  font-size:14px; font-weight:600; cursor:pointer; text-align:start; font-family:inherit;
}
.cg-nav button.cg-signout:hover{ background:var(--err-bg); color:var(--err); }

/* ── Topbar (sticky): breadcrumb + language switch + New order + mobile
   Sign out ── */
.cg-topbar{
  min-block-size:var(--shell-header-h);
  border-block-end:1px solid var(--line);
  background:rgba(247,248,251,.92);
  backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-inline:clamp(14px, 3vw, 32px);
}
.cg-crumb{ font-size:13px; font-weight:700; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cg-crumb strong{ color:var(--ink); }
.cg-topbar-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.lang-switch{ display:flex; gap:4px; }
.lang-switch a{
  display:inline-flex; align-items:center; justify-content:center;
  min-inline-size:32px; min-block-size:32px; padding:0 6px;
  border:1px solid var(--line); background:#fff; border-radius:8px;
  font-size:11px; font-weight:700; color:var(--muted);
  text-decoration:none;
}
.lang-switch a:hover, .lang-switch a:focus-visible{ border-color:var(--accent); color:var(--accent); }
.lang-switch a[aria-current="true"]{
  color:var(--accent); border-color:var(--accent); background:var(--status-progress-bg);
  font-weight:800; text-decoration:underline; text-underline-offset:3px;
}
.topbar-signout-mobile{ display:none; }

/* ── Buttons (shared across every existing page render) ─────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:0 18px; min-block-size:44px; border:1.5px solid transparent; border-radius:var(--radius-sm);
  background:var(--accent); color:#fff; font-size:14px; font-weight:700; cursor:pointer;
  text-decoration:none; text-align:center; font-family:inherit;
}
.btn .cg-icon svg{ width:16px; height:16px; }
.btn:hover{ background:#2749c4; }
button.btn:disabled{ opacity:.5; cursor:default; }
.btn-block{ display:flex; width:100%; }
.btn-secondary{ background:var(--field); color:var(--ink); border-color:var(--line); }
.btn-secondary:hover{ background:var(--line); }
.btn-danger{ background:#fff; color:var(--err); border-color:#f1c4be; }
.btn-danger:hover{ background:var(--err-bg); }
button.link-btn{
  background:none; border:none; color:var(--accent); font-weight:700;
  padding:8px 0; cursor:pointer; font-size:14px; text-align:start; font-family:inherit;
}
.err-box{
  color:var(--err); font-size:13px; margin-block-start:6px; display:none;
}
.err-box.show{ display:block; }
.muted-note{ color:var(--muted); font-size:13px; margin-block-start:6px; }
.hidden{ display:none !important; }

/* ── Main content / workspace ────────────────────────────────────────── */
main.cg-main{ padding:24px clamp(14px, 4vw, 40px); }
.workspace{
  flex:1;
  padding:22px clamp(14px, 3vw, 32px) 48px;
  max-inline-size:var(--workspace-max);
  width:100%;
}
.workspace-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; }
.workspace-grid.has-aside{ grid-template-columns:minmax(0,1fr) var(--shell-aside-w); }
.primary-col{ min-inline-size:0; }
.primary-col.narrow{ max-inline-size:840px; }
.aside-col{ min-inline-size:0; position:sticky; top:calc(var(--shell-header-h) + 20px); }
@media (max-width:1180px) and (min-width:901px){
  .workspace-grid.has-aside{ grid-template-columns:minmax(0,1fr); }
  .aside-col{ position:static; }
}

.cg-h1{ font-size:22px; margin:0 0 4px; overflow-wrap:anywhere; }
.cg-sub{ color:var(--muted); font-size:14px; margin:0 0 20px; }

.card{
  background:var(--paper); border-radius:var(--radius); padding:20px; margin-bottom:14px;
  box-shadow:var(--shadow-sm);
  max-inline-size:100%; overflow-wrap:break-word;
}
.card h2{ font-size:16px; margin:0 0 10px; }

/* ── Login ───────────────────────────────────────────────────────────── */
.login-wrap{
  display:flex; justify-content:center; padding:40px 14px;
}
/* Authenticated pages replaceChildren() this to empty (see
   invalidateSessionSynchronously/hideLoginUI) — its own padding box must
   not persist as real, unexplained vertical space above `.shell` once
   there is no login card to space out; the mobile shell below depends on
   `.shell` starting flush at the viewport top for its exact 100vh column
   math (rail/content-col/tab-bar), and even 1px of unaccounted offset here
   would push the reserved tab-bar row partially or fully off-screen. */
.login-wrap:empty{ display:none; }
.login-card{ width:100%; max-inline-size:420px; }
.login-brand{ display:flex; align-items:center; gap:9px; margin-block-end:18px; }
.login-brand .brand-mark{ width:28px; height:34px; object-fit:contain; flex:0 0 auto; }
.login-brand-text{ font-weight:800; font-size:16px; color:var(--ink); }
input[type="tel"], input[type="text"], input[type="password"]{
  width:100%; padding:12px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-size:16px; margin-block-end:10px; background:var(--field); color:var(--ink); font-family:inherit;
}
input[type="tel"]:focus, input[type="text"]:focus{
  outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 4px var(--focus-ring);
}
select{
  width:100%; padding:12px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-size:15px; margin-block-start:8px; background:var(--field); color:var(--ink); font-family:inherit;
}

/* ── Status badges ────────────────────────────────────────────────────── */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:700; padding:4px 11px; border-radius:var(--radius-pill); white-space:nowrap;
  background:var(--status-cancelled-bg); color:var(--status-cancelled-ink);
}
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.badge.new{ background:var(--status-new-bg); color:var(--status-new-ink); }
.badge.accepted, .badge.picked_up{ background:var(--status-progress-bg); color:var(--status-progress-ink); }
.badge.delivered{ background:var(--status-done-bg); color:var(--status-done-ink); }
.badge.cancelled{ background:var(--status-cancelled-bg); color:var(--status-cancelled-ink); }
.badge.unknown{ background:var(--status-unknown-bg); color:var(--status-unknown-ink); }

/* ── Overview: active-order workspace card + account summary aside ──── */
.active-order-card{ border:1.5px solid var(--line); }
.active-order-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-block-end:10px; }
.active-order-route{ font-size:15px; font-weight:700; margin-block-end:2px; overflow-wrap:break-word; }
.mini-timeline{ display:flex; align-items:center; gap:4px; margin-block:12px; }
.mini-timeline-seg{ flex:1; block-size:6px; border-radius:4px; background:var(--line); }
.mini-timeline-seg.done{ background:var(--accent); }
.mini-timeline-seg.current{ background:var(--status-new-ink); }
.cta-row{ display:flex; flex-wrap:wrap; gap:10px; margin-block-start:4px; }
.quick-links{ display:flex; flex-direction:column; gap:2px; }
.summary-stat{ display:flex; align-items:center; justify-content:space-between; padding-block:9px; border-block-end:1px solid var(--line); font-size:13px; }
.summary-stat:last-child{ border-block-end:0; }
.summary-stat strong{ font-size:15px; }

/* ── Orders: desktop table + mobile card list (same data, both in DOM) ── */
.order-table{ width:100%; border-collapse:collapse; }
.order-table thead th{
  text-align:start; font-size:11px; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em; padding:0 12px 10px;
  border-block-end:1.5px solid var(--line);
}
.order-table tbody tr{ border-block-end:1px solid var(--line); }
.order-table tbody tr:hover{ background:var(--field); }
.order-table td{ padding:13px 12px; font-size:14px; vertical-align:middle; }
.order-table .order-id-cell a{ font-weight:700; color:var(--ink); text-decoration:none; }
.order-table .order-id-cell a:hover{ color:var(--accent); }
.order-route-cell{ color:var(--muted); font-size:13px; overflow-wrap:break-word; max-inline-size:320px; }
.order-table .row-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.order-table .row-actions button, .order-table .row-actions a{ padding:8px 12px; font-size:12.5px; min-block-size:36px; }
.order-card-list{ list-style:none; margin:0; padding:0; display:none; flex-direction:column; gap:10px; }

.order-row{
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:14px;
  max-inline-size:100%;
}
.order-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.order-id{ font-weight:700; font-size:14px; }
.order-route{ font-size:14px; overflow-wrap:break-word; margin-bottom:4px; }
.order-date{ font-size:12px; color:var(--muted); margin-bottom:10px; }
.order-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.order-actions button, .order-actions a{ padding:9px 14px; font-size:13px; font-weight:600; border-radius:var(--radius-sm); }
.order-group-title{ font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:18px 0 8px; }
.order-group-title:first-child{ margin-block-start:0; }

/* ── Order detail (CLIENT-ACCOUNT-REDESIGN-BATCH3-ORDER-DETAIL-TIMELINE-001) */
.detail-group{
  border-block-start:1px solid var(--line); padding-block-start:14px; margin-block-start:16px;
}
.detail-group:first-of-type{ border-block-start:0; padding-block-start:0; margin-block-start:0; }
.detail-group h2{ font-size:14px; margin:0 0 8px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.field-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding-block:8px; border-block-end:1px solid var(--line);
  max-inline-size:100%;
}
.field-row:last-child{ border-block-end:0; }
.field-label{ min-inline-size:140px; color:var(--muted); font-size:12px; font-weight:700; }
.field-value{ font-size:14px; overflow-wrap:break-word; }
.detail-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-block-start:16px; }
.timeline-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.timeline-event{
  display:flex; flex-wrap:wrap; gap:10px; align-items:baseline;
  padding-block:7px; border-inline-start:2px solid var(--line); padding-inline-start:12px;
}
.timeline-status{ font-weight:700; font-size:13px; }
.timeline-at{ color:var(--muted); font-size:12px; }
.timeline-actor{ color:var(--muted); font-size:12px; }
@media (max-width:390px){
  .field-label{ min-inline-size:0; inline-size:100%; }
  .detail-actions{ flex-direction:column; align-items:stretch; }
}

/* ── Order edit (CLIENT-ACCOUNT-REDESIGN-BATCH4-NEW-ONLY-ORDER-EDITS-001) */
.edit-form{
  display:flex; flex-direction:column; gap:4px;
  margin-block-start:16px; padding-block-start:16px; border-block-start:1px solid var(--line);
  max-inline-size:100%;
}
.edit-fieldset{
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px 4px;
  margin:0 0 12px; min-inline-size:0; max-inline-size:100%;
}
.edit-fieldset legend{ font-size:12px; font-weight:800; padding:0 6px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.edit-field{ margin-bottom:10px; max-inline-size:100%; }
.edit-field-label{ display:block; font-size:12px; color:var(--muted); font-weight:700; margin-block-end:4px; }
.edit-field-input{
  width:100%; padding:10px; border:1.5px solid var(--line); border-radius:8px;
  font-size:14px; background:var(--field); color:var(--ink); font-family:inherit;
  max-inline-size:100%;
}
.edit-field-input:focus{ outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 4px var(--focus-ring); }
textarea.edit-field-input{ resize:vertical; min-block-size:64px; }
.edit-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-block-start:6px; }
@media (max-width:390px){
  .edit-actions{ flex-direction:column; align-items:stretch; }
}

/* ── Profile / addresses ─────────────────────────────────────────────── */
.profile-field{ margin-bottom:12px; }
.profile-field .lbl{ font-size:12px; color:var(--muted); margin-bottom:2px; }
.profile-field .val{ font-size:15px; overflow-wrap:break-word; }
.addr-row{
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:8px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  max-inline-size:100%;
}
.addr-row .addr-text{ min-inline-size:0; overflow-wrap:break-word; }
.addr-label{ font-weight:700; font-size:13px; margin-bottom:2px; }
.addr-value{ font-size:14px; color:var(--ink); }
.addr-form{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.addr-limit-note{ font-size:13px; color:var(--muted); margin-top:8px; }

/* ── Templates (CLIENT-ACCOUNT-REDESIGN-BATCH5-TEMPLATES-RELOCATION-001) */
.tpl-item{ display:flex; align-items:center; gap:10px; max-inline-size:100%; }
.ti-meta{ flex:1; min-inline-size:0; }
.ti-name{ font-weight:700; font-size:15px; overflow-wrap:break-word; }
.ti-slug{ font-size:12px; color:var(--muted); font-weight:600; margin-block-start:1px; }
.ti-acts{ display:flex; flex-wrap:wrap; gap:6px; flex-shrink:0; }
.ti-btn{
  border:1.5px solid var(--line); background:#fff; border-radius:9px;
  padding:7px 11px; font-size:12.5px; font-weight:700; cursor:pointer;
  color:var(--ink); font-family:inherit; line-height:1; white-space:nowrap;
}
.ti-btn:hover{ background:var(--field); }
.ti-del{ color:var(--err); border-color:#f1c4be; }
.new-card{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:16px; border:1.5px dashed var(--line-strong); border-radius:var(--radius);
  color:var(--muted); font-weight:700; font-size:14.5px; text-decoration:none;
  cursor:pointer; background:transparent;
}
.new-card:hover{ border-color:var(--accent); color:var(--accent); background:var(--status-progress-bg); }
@media (max-width:390px){
  .tpl-item{ flex-direction:column; align-items:stretch; }
  .ti-acts{ justify-content:flex-start; }
}

.field-row .fr-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-block-end:6px; }
.field-row .edit-field-label{ margin:0; }
.lock-lbl{ display:flex; align-items:center; gap:4px; flex-shrink:0; cursor:pointer; }
.lock-lbl input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
.slug-hint{ font-size:12px; color:var(--muted); margin-block-start:4px; min-block-size:15px; }

.ac{ position:relative; }
.ac-inp{ display:flex; gap:8px; align-items:center; }
.ac-inp .edit-field-input{ flex:1; min-inline-size:0; }
.geo-btn{
  flex-shrink:0; border:1.5px solid var(--line); background:#fff; border-radius:8px;
  padding:0 11px; block-size:44px; cursor:pointer; font-size:17px; line-height:1;
}
.geo-btn:disabled{ opacity:.5; cursor:default; }
.ac-list{
  position:absolute; z-index:30; inset-inline:0; top:calc(100% + 4px);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:0 16px 40px -16px rgba(15,23,42,.35); overflow:hidden;
}
.ac-item{ padding:10px 12px; font-size:14px; cursor:pointer; border-block-end:1px solid var(--line); }
.ac-item:last-child{ border-block-end:0; }
.ac-item:hover, .ac-item:focus{ background:var(--field); outline:none; }

.seg{ display:flex; gap:6px; background:var(--field); padding:4px; border-radius:var(--radius-sm); flex-wrap:wrap; }
.seg button{ flex:1; min-inline-size:64px; border:0; background:transparent; color:var(--muted); font-weight:700; font-size:13.5px; padding:9px; border-radius:9px; cursor:pointer; font-family:inherit; }
.seg button.on{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(15,23,42,.12); }

.toggle-row{ display:flex; align-items:center; }
.sw-input{ width:44px; height:26px; accent-color:var(--ok); cursor:pointer; }

/* ── Empty / loading / error states ─────────────────────────────────── */
.empty-state{ text-align:center; color:var(--muted); padding:30px 10px; font-size:14px; }
.loading-state{ text-align:center; color:var(--muted); padding:30px 10px; font-size:14px; }
.error-state{ color:var(--err); text-align:center; padding:20px 10px; font-size:14px; }
.error-state .btn{ margin-block-start:12px; }

/* ── Confirm dialog (role="alertdialog") ────────────────────────────── */
.confirm-box{
  border:1.5px solid #f1c4be; border-radius:var(--radius-sm); padding:14px; margin-bottom:10px;
  background:var(--err-bg);
}
.confirm-box p{ margin:0 0 10px; font-size:14px; }
.confirm-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* Session-expired banner */
.session-banner{
  border:1.5px solid #f1c4be; border-radius:var(--radius-sm); padding:14px; margin-bottom:14px;
  background:var(--err-bg); color:var(--err); font-size:14px;
}

.ltr-frag{ unicode-bidi:isolate; direction:ltr; display:inline-block; }

/* Default (desktop): hidden. Declared BEFORE the mobile media query below —
   both rules share the exact same `.tab-bar` specificity, so cascade order
   alone decides the winner at ≤900px; this default must come first or it
   would always beat the mobile override regardless of viewport. */
.tab-bar{ display:none; }

/* ── Mobile ≤ 900px: bottom tab bar, single column, card lists ─────────
   `.shell` becomes a 100vh flex COLUMN; `.content-col` is the one
   scrollable region (flex:1 + overflow-y:auto), and the tab bar is a real,
   reserved sibling row after it, in normal flow — never `position:fixed`/
   `sticky` overlaying content. This is the only option proven to
   STRUCTURALLY guarantee zero overlap: `position:sticky; bottom:0` was
   tried first and looked safer, but a sticky element engages its "stuck"
   (visually pinned, covering whatever is underneath) state the instant
   total content exceeds the viewport by even one pixel — real fixture
   content at 200% zoom routinely lands in exactly that band, so sticky
   reproduced the identical real coverage a plain `position:fixed` bar has.
   A genuine reserved flex row is the only structure where content-col's
   own box can never extend into the tab bar's row at any content length.
   The one real cost: elements scrolled past content-col's own clipped
   edge report a `getBoundingClientRect()` position as if still visible,
   which a naive `elementFromPoint` occlusion check can misread as "covered
   by the tab bar" — `measurePageState`'s candidate filter below is
   clip-aware specifically to close that gap, so it is a solved concern,
   not a remaining limitation. */
@media (max-width:900px){
  .shell{ flex-direction:column; block-size:100vh; min-block-size:100vh; }
  .cg-nav{ display:none; }
  .content-col{ min-block-size:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .cg-topbar{ padding-inline:14px; }
  .cg-crumb{ display:none; }
  .lang-switch a{ min-inline-size:44px; min-block-size:44px; }
  .topbar-signout-mobile{ display:inline-flex; }
  .workspace{ padding:16px 14px 24px; }
  .workspace-grid, .workspace-grid.has-aside{ grid-template-columns:1fr; gap:16px; }
  .aside-col{ position:static; }
  .primary-col.narrow{ max-inline-size:none; }

  .order-table{ display:none; }
  .order-card-list{ display:flex; }

  .tab-bar{
    display:flex; flex:0 0 auto;
    background:var(--paper); border-block-start:1px solid var(--line);
    padding-block:6px; padding-inline:4px;
    padding-block-end:calc(6px + env(safe-area-inset-bottom));
  }
  .tab-bar a{
    flex:1; min-inline-size:0; display:flex; flex-direction:column; align-items:center; gap:3px;
    min-block-size:52px; justify-content:center; text-decoration:none; color:var(--muted);
    font-size:10.5px; font-weight:700; border-radius:10px; padding-inline:2px;
    overflow-wrap:break-word; text-align:center;
  }
  .tab-bar a .cg-icon svg{ width:20px; height:20px; }
  .tab-bar a[aria-current="page"]{ color:var(--accent); }

  .card{ padding:16px; }
  .field-label{ min-inline-size:0; inline-size:100%; }
}

@media (max-width:390px){
  main.cg-main{ padding-inline:12px; }
  .workspace{ padding-inline:12px; }
}