/* ══════════════════════════════════════════════════════════════════════════════
   ESCARGO INTERNAL OS — shared premium design system  (UI Sprint, 2026-07-23)
   Source of truth: the corrected landing page (assets/site.css). This is an ADDITIVE
   layer: `.os-*` classes + `--os-*` tokens. Existing app styles are untouched until a
   surface is deliberately migrated to `.os-*` (Touch Rule, no big-bang).
   Feel: premium automotive operating system — serious, dense, trust-led. Not playful.
   ══════════════════════════════════════════════════════════════════════════════ */
:root{
  /* brand (verbatim from the landing page) */
  --os-forest:#073b24; --os-forest-deep:#052c1b; --os-forest-soft:#0c4a2e;
  --os-lime:#80bf20; --os-lime-hover:#8fd226; --os-lime-press:#6ea51b;
  --os-ink:#232323; --os-text:#3c423e; --os-muted:#68706a;
  --os-pale:#f3f5f0; --os-line:#e1e6dd; --os-white:#fff;
  /* dark command surface tints */
  --os-d-panel:rgba(255,255,255,.06); --os-d-line:rgba(255,255,255,.12); --os-d-text:#cfe0d4; --os-d-muted:#8fa697;
  /* radius (landing base 6px; cards 8–14px per brief) */
  --os-r:6px; --os-r-card:12px; --os-r-lg:14px; --os-r-pill:999px;
  --os-shadow:0 1px 2px rgba(7,59,36,.06),0 8px 24px rgba(7,59,36,.08);
  --os-shadow-sm:0 1px 2px rgba(7,59,36,.06);
  --os-shadow-hover:0 2px 6px rgba(7,59,36,.10),0 16px 40px rgba(7,59,36,.12);
  --os-font:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  /* 8px spacing rhythm */
  --os-1:4px; --os-2:8px; --os-3:12px; --os-4:16px; --os-5:24px; --os-6:32px; --os-7:48px;
}

/* base: border-box on os surfaces (self-contained; independent of the host reset) +
   accessible lime focus ring (WCAG AA, matches the landing page). Scoped to os-* so it
   never alters existing app elements until a surface migrates. */
.os-shell,.os-shell *{box-sizing:border-box}
.os-shell a:focus-visible,.os-btn:focus-visible,.os-navitem:focus-visible,.os-input:focus-visible,
.os-select:focus-visible,.os-textarea:focus-visible,.os-job:focus-visible,.os-chip:focus-visible{
  outline:3px solid var(--os-lime);outline-offset:2px}

/* ── app shell ─────────────────────────────────────────────────────────────── */
.os-shell{display:grid;grid-template-columns:248px 1fr;grid-template-rows:auto 1fr;min-height:100vh;
  font-family:var(--os-font);color:var(--os-text);background:var(--os-pale)}
.os-sidebar{grid-row:1/3;background:var(--os-forest);color:var(--os-d-text);display:flex;flex-direction:column;
  padding:var(--os-4) var(--os-3);gap:var(--os-1);position:sticky;top:0;height:100vh;overflow-y:auto}
.os-sidebar .os-brand{color:#fff;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;padding:var(--os-2) var(--os-3) var(--os-4)}
.os-sidebar .os-brand span{color:var(--os-lime)}
.os-navitem{display:flex;align-items:center;gap:var(--os-3);min-height:44px;padding:0 var(--os-3);border-radius:var(--os-r);
  color:var(--os-d-text);text-decoration:none;font-weight:600;font-size:.92rem;transition:background .15s,color .15s}
.os-navitem:hover{background:var(--os-d-panel);color:#fff}
.os-navitem.is-active{background:var(--os-lime);color:var(--os-forest-deep)}
.os-topbar{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:var(--os-4);
  background:var(--os-white);border-bottom:1px solid var(--os-line);padding:var(--os-3) var(--os-5);position:sticky;top:0;z-index:40}
.os-topbar h1{font-size:1.15rem;color:var(--os-ink);letter-spacing:-.015em;margin:0}
.os-main{grid-column:2;padding:var(--os-5);max-width:1280px;width:100%}
.os-mobilenav{display:none}

/* dark command / control-room surface */
.os-dark{background:var(--os-forest);color:var(--os-d-text)}
.os-dark h1,.os-dark h2,.os-dark h3{color:#fff}
.os-dark .os-card{background:var(--os-d-panel);border-color:var(--os-d-line);color:var(--os-d-text);box-shadow:none}
.os-dark .os-card h3{color:#fff}
/* a card that is ITSELF a dark command panel (class on the card, not a wrapper) —
   double-class beats the single `.os-card` background */
.os-card.os-dark{background:var(--os-forest);border-color:var(--os-forest-soft);color:var(--os-d-text);box-shadow:var(--os-shadow-sm)}
.os-card.os-dark h3{color:#fff}

/* ── layout helpers ────────────────────────────────────────────────────────── */
.os-grid{display:grid;gap:var(--os-4)}
.os-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--os-3)}
.os-cols-2{grid-template-columns:1fr 1fr}.os-cols-3{grid-template-columns:repeat(3,1fr)}
.os-section-h{display:flex;align-items:center;justify-content:space-between;margin:var(--os-5) 0 var(--os-3)}
.os-kicker{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--os-forest)}

/* ── cards & KPIs ──────────────────────────────────────────────────────────── */
.os-card{background:var(--os-white);border:1px solid var(--os-line);border-radius:var(--os-r-card);
  box-shadow:var(--os-shadow-sm);padding:var(--os-4);transition:box-shadow .2s ease,transform .2s ease}
.os-card--hover:hover{box-shadow:var(--os-shadow-hover);transform:translateY(-2px)}
.os-card h3{margin:0 0 var(--os-2);color:var(--os-ink);font-size:1.02rem;letter-spacing:-.01em}
.os-kpi{padding:var(--os-4)}
.os-kpi .os-kpi-label{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--os-muted)}
.os-kpi .os-kpi-val{font-size:1.7rem;font-weight:800;color:var(--os-ink);line-height:1.1;margin-top:var(--os-1)}
.os-kpi .os-kpi-sub{font-size:.82rem;color:var(--os-muted);margin-top:var(--os-1)}
.os-kpi .os-kpi-val.pos{color:var(--os-lime-press)} .os-kpi .os-kpi-val.neg{color:#b91c1c}

/* ── tables ────────────────────────────────────────────────────────────────── */
.os-table{width:100%;border-collapse:collapse;font-size:.9rem}
.os-table th{text-align:left;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--os-muted);padding:var(--os-2) var(--os-3);border-bottom:1px solid var(--os-line)}
.os-table td{padding:var(--os-3);border-bottom:1px solid var(--os-line);color:var(--os-text)}
.os-table tr:last-child td{border-bottom:0}
.os-table tr:hover td{background:var(--os-pale)}
.os-table-wrap{overflow-x:auto;border-radius:var(--os-r-card)}

/* ── job / booking cards ───────────────────────────────────────────────────── */
.os-job{display:flex;align-items:center;justify-content:space-between;gap:var(--os-3);padding:var(--os-4);
  border:1px solid var(--os-line);border-radius:var(--os-r-card);background:var(--os-white);transition:border-color .15s,box-shadow .2s}
.os-job:hover{border-color:var(--os-lime);box-shadow:var(--os-shadow-sm)}
.os-job-title{font-weight:700;color:var(--os-ink)} .os-job-meta{font-size:.82rem;color:var(--os-muted);margin-top:2px}

/* ── status chips ──────────────────────────────────────────────────────────── */
.os-chip{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;padding:4px 10px;
  border-radius:var(--os-r-pill);background:var(--os-pale);color:var(--os-ink);border:1px solid var(--os-line);transition:background .15s}
.os-chip--ok{background:#e9f7dd;color:var(--os-forest-deep);border-color:#cdebae}
.os-chip--warn{background:#fef9c3;color:#854d0e;border-color:#fde68a}
.os-chip--err{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.os-chip--info{background:#e0f2fe;color:#075985;border-color:#bae6fd}
.os-chip--live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--os-lime-press);animation:os-pulse 1.6s infinite}

/* ── timeline ──────────────────────────────────────────────────────────────── */
.os-timeline{list-style:none;margin:0;padding:0}
.os-timeline li{position:relative;padding:0 0 var(--os-4) var(--os-5);border-left:2px solid var(--os-line)}
.os-timeline li:last-child{border-left-color:transparent}
.os-timeline li::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;
  background:var(--os-white);border:2px solid var(--os-line)}
.os-timeline li.done::before{background:var(--os-lime);border-color:var(--os-lime-press)}
.os-timeline li.current::before{background:var(--os-white);border-color:var(--os-lime-press);box-shadow:0 0 0 4px #e9f7dd}
.os-timeline li.cancelled::before{background:#ef4444;border-color:#ef4444}
/* key/value detail grid (detail pages, tracker summaries) */
.os-kv{display:grid;grid-template-columns:1fr 1fr;gap:var(--os-3) var(--os-4);margin-top:var(--os-3)}
.os-kv .k{color:var(--os-muted);font-size:.74rem;font-weight:600}
.os-kv .v{color:var(--os-ink);font-weight:700;font-size:.92rem}
@media (max-width:520px){.os-kv{grid-template-columns:1fr}}
.os-timeline .t-title{font-weight:700;color:var(--os-ink);font-size:.92rem}
.os-timeline .t-sub{font-size:.8rem;color:var(--os-muted)}

/* ── buttons ───────────────────────────────────────────────────────────────── */
.os-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;
  border-radius:var(--os-r);font-size:.95rem;font-weight:700;text-decoration:none;border:2px solid transparent;
  cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s,transform .05s}
.os-btn:active{transform:translateY(1px)}
.os-btn--lime{background:var(--os-lime);color:var(--os-forest-deep)} .os-btn--lime:hover{background:var(--os-lime-hover)}
.os-btn--ghost{background:transparent;color:var(--os-ink);border-color:var(--os-line)} .os-btn--ghost:hover{border-color:var(--os-ink)}
.os-btn--dark{background:var(--os-forest);color:#fff} .os-btn--dark:hover{background:var(--os-forest-soft)}
.os-btn[disabled]{opacity:.55;cursor:default}
.os-btn--full{width:100%}

/* ── forms ─────────────────────────────────────────────────────────────────── */
.os-field{margin-bottom:var(--os-3)}
.os-label{display:block;font-weight:600;font-size:.85rem;color:var(--os-text);margin-bottom:6px}
.os-input,.os-select,.os-textarea{width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;font-size:.95rem;
  font-family:inherit;color:var(--os-ink);background:var(--os-white);border:1.5px solid var(--os-line);border-radius:var(--os-r)}
.os-input:focus,.os-select:focus,.os-textarea:focus{outline:none;border-color:var(--os-lime)}
.os-textarea{min-height:88px;resize:vertical}

/* ── modal ─────────────────────────────────────────────────────────────────── */
.os-modal-scrim{position:fixed;inset:0;background:rgba(5,44,27,.45);display:grid;place-items:center;z-index:100;padding:var(--os-4);
  animation:os-fade .18s ease}
.os-modal{background:var(--os-white);border-radius:var(--os-r-lg);box-shadow:0 20px 60px rgba(5,44,27,.35);
  max-width:520px;width:100%;padding:var(--os-5);animation:os-fade-slide .22s ease}

/* ── states ────────────────────────────────────────────────────────────────── */
.os-empty{text-align:center;color:var(--os-muted);padding:var(--os-7) var(--os-4)}
.os-empty .os-empty-t{font-weight:700;color:var(--os-ink);font-size:1.05rem;margin-bottom:6px}
.os-error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:var(--os-r-card);padding:var(--os-3) var(--os-4);font-size:.9rem;font-weight:600}
.os-honest{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:var(--os-r);padding:10px 13px;font-size:.82rem}
.os-approval{border-left:4px solid var(--os-lime);background:#f6fbef}
.os-payment{border:1px solid var(--os-line);border-radius:var(--os-r-card);padding:var(--os-4)}
.os-payment .os-row{display:flex;justify-content:space-between;font-size:.9rem;padding:3px 0}
.os-payment .os-row.total{border-top:1px solid var(--os-line);margin-top:6px;padding-top:8px;font-weight:800;color:var(--os-ink);font-size:1.05rem}
.os-skel{position:relative;overflow:hidden;background:var(--os-pale);border-radius:var(--os-r)}
.os-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:os-shimmer 1.3s infinite}
.os-skel-line{height:14px;margin:8px 0}.os-skel-line.sh{width:60%}
.os-spin{width:20px;height:20px;border:3px solid var(--os-line);border-top-color:var(--os-lime-press);border-radius:50%;
  display:inline-block;vertical-align:middle;animation:os-spin .8s linear infinite}

/* ── media (binding fit rules) ─────────────────────────────────────────────── */
.os-media{overflow:hidden;border-radius:var(--os-r-card);background:var(--os-pale);position:relative}
.os-media>img,.os-media>video{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.os-ar-16-9{aspect-ratio:16/9}.os-ar-4-3{aspect-ratio:4/3}.os-ar-3-2{aspect-ratio:3/2}.os-ar-1-1{aspect-ratio:1/1}

/* ── motion ────────────────────────────────────────────────────────────────── */
@keyframes os-fade{from{opacity:0}to{opacity:1}}
@keyframes os-fade-slide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes os-pulse{0%{box-shadow:0 0 0 0 rgba(110,165,27,.5)}70%{box-shadow:0 0 0 6px rgba(110,165,27,0)}100%{box-shadow:0 0 0 0 rgba(110,165,27,0)}}
@keyframes os-shimmer{to{transform:translateX(100%)}}
@keyframes os-spin{to{transform:rotate(360deg)}}
.os-in{animation:os-fade-slide .4s ease both}
.os-in-2{animation:os-fade-slide .4s ease .06s both}
.os-in-3{animation:os-fade-slide .4s ease .12s both}

/* ── responsive ────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .os-shell{grid-template-columns:1fr}
  .os-sidebar{display:none}
  .os-topbar{grid-column:1}.os-main{grid-column:1;padding:var(--os-4)}
  .os-cols-2,.os-cols-3{grid-template-columns:1fr}
  .os-mobilenav{display:flex;position:sticky;bottom:0;z-index:40;background:var(--os-white);border-top:1px solid var(--os-line);
    justify-content:space-around;padding:6px 4px}
  .os-mobilenav a{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:44px;justify-content:center;
    color:var(--os-muted);text-decoration:none;font-size:.68rem;font-weight:600;flex:1}
  .os-mobilenav a.is-active{color:var(--os-forest)}
}
@media (max-width:480px){ .os-main{padding:var(--os-3)} .os-kpi .os-kpi-val{font-size:1.45rem} }

/* accessibility: honour reduced motion everywhere */
@media (prefers-reduced-motion:reduce){
  *,.os-in,.os-in-2,.os-in-3{animation:none!important;transition:none!important}
  .os-card--hover:hover{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════════
   AOS Wave 1 (2026-07-27) — BRAND FOUNDATION primitives. Additive, tokens only.
   • .os-hero  — the premium page-opening block the commission requires on every
     major page. Two variants: --photo (real founder/category imagery with a
     legibility gradient) and the default forest-gradient + brand illustration.
   • .os-load  — the branded loading state (EscargoBrand.loader). The mascot
     glyph travels a dashed road; reduced-motion gets a calm static state.
   Rendered exclusively through escargo/app/brand.js so no surface hand-rolls
   its own variant.
   ══════════════════════════════════════════════════════════════════════════════ */
.os-hero{position:relative;overflow:hidden;border-radius:var(--os-r-lg);
  background:linear-gradient(140deg,var(--os-forest),var(--os-forest-soft));
  color:#fff;min-height:clamp(150px,26vw,236px);display:flex;align-items:flex-end;
  box-shadow:var(--os-shadow);margin-bottom:var(--os-4)}
.os-hero-media{position:absolute;inset:0}
.os-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.os-hero--photo .os-hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,44,27,.88) 0%,rgba(5,44,27,.45) 45%,rgba(5,44,27,.12) 100%)}
.os-hero-glyph{position:absolute;right:clamp(8px,4vw,36px);top:50%;transform:translateY(-50%);
  opacity:.9;pointer-events:none}
.os-hero-body{position:relative;padding:clamp(14px,3.4vw,28px);max-width:46rem}
.os-hero-kicker{display:inline-block;color:var(--os-lime);font-weight:750;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--os-2)}
.os-hero-title{font-weight:800;font-size:clamp(1.35rem,3.6vw,2rem);letter-spacing:-.02em;
  line-height:1.12;margin:0}
.os-hero-sub{color:var(--os-d-text);font-size:clamp(.86rem,1.6vw,.98rem);line-height:1.5;
  margin:var(--os-2) 0 0;max-width:38rem}
.os-hero-actions{display:flex;gap:var(--os-2);flex-wrap:wrap;margin-top:var(--os-3)}
@media (max-width:640px){ .os-hero-glyph{display:none} }

.os-load{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--os-2);padding:var(--os-6) var(--os-4);text-align:center}
.os-load-stage{width:120px}
.os-load-mascot{animation:osLoadBob 1.6s ease-in-out infinite}
.os-load-road{height:4px;border-radius:var(--os-r-pill);margin-top:2px;
  background-image:repeating-linear-gradient(90deg,var(--os-line) 0 14px,transparent 14px 26px);
  animation:osLoadRoad 1.1s linear infinite}
.os-load-label{color:var(--os-muted);font-size:.9rem;font-weight:600}
@keyframes osLoadBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes osLoadRoad{to{background-position:-26px 0}}
@media (prefers-reduced-motion:reduce){
  .os-load-mascot,.os-load-road{animation:none!important}
}


/* ── MOBILE LABEL FLOOR (founder decision, 2026-09-06) ────────────────────────────────────────
   12px minimum for user-facing micro-labels on mobile. These are real customer copy, not decals:
   plan badges, section eyebrows, capacity tags and the sample-data disclaimer all rendered between
   11px and 11.5px at 375px, below the readable floor the mobile batteries already enforce.

   SCOPED TO MOBILE, and to these classes only. The desktop scale is untouched, and nothing here
   reaches the deliberately decorative micro-typography in meets.css (decals, plate lettering,
   wordmark superscripts at 5-8px), which is design rather than reading copy, nor any
   internal-only admin label. Hierarchy is preserved the way the founder asked - by weight,
   tracking, casing and spacing, all of which these rules already carry - rather than by making
   the text too small to read. */
@media (max-width:640px){
  .os-kicker{font-size:12px}
  .os-hero-kicker{font-size:12px}
}