/* ══════════════════════════════════════════════════════════════════════════════════════
   ESCARGO — AUTHENTICATED WORKSPACE DESIGN SYSTEM
   Founder visual-quality commission, 2026-08-15.

   ── WHY THIS FILE EXISTS ──────────────────────────────────────────────────────────────
   Customer (/drive), Business (/garage) and Driver (/app/driver) each grew their own
   colours, radii, shadows and type sizes. The result is a visual cliff after sign-in: the
   landing page looks designed, the workspace looks developer-built. Twenty screens were
   each solving the same styling problem separately.

   Every token below is MEASURED from the founder's reference design
   (escargot-mobile-design), not invented, so the authenticated product converges on the
   brand rather than on my taste.

   ── THE RULE THAT KEEPS THIS SAFE ─────────────────────────────────────────────────────
   This file is ADDITIVE. It defines tokens and `.ew-*` primitives. It does NOT restyle
   existing selectors, because the garage responsive + orientation suites (216 assertions
   across five viewports) pass against the current layout, and a global override would
   silently move geometry they measure. Surfaces adopt these classes deliberately, one at
   a time, and re-prove.

   ── THE SIGNATURE ─────────────────────────────────────────────────────────────────────
   Elevation is GREEN-TINTED, never neutral black — rgba(23,60,40,…) / rgba(7,59,36,…).
   That single decision is most of what separates "premium automotive software" from a
   bootstrap card. Blur is used sparingly; the reference leans on a crisp 2px solid ledge
   far more than on glass.
   ══════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand, measured from the reference ─────────────────────────────────────────── */
  --ew-forest: #073b24;
  --ew-deep:   #052c1b;
  --ew-green:  #0c4a2e;
  --ew-lime:   #80bf20;

  /* ── Text hierarchy. THREE weights of meaning, never one grey for everything. ───── */
  --ew-ink:    #17201b;   /* titles, numbers that matter          */
  --ew-text:   #3d463f;   /* body                                  */
  --ew-muted:  #707972;   /* metadata, timestamps, helper text     */

  /* ── Surfaces ───────────────────────────────────────────────────────────────────── */
  --ew-canvas: #f6f7f3;   /* page background                       */
  --ew-surface:#ffffff;   /* primary card                          */
  --ew-mist:   #eaf0e9;   /* secondary / inset panel               */
  --ew-line:   #dfe5dc;   /* borders + the solid ledge             */

  /* ── Semantic. Backgrounds only — paired with --ew-ink for AA contrast. ─────────── */
  --ew-good:   #dff5e5;
  --ew-warn:   #fff0c2;
  --ew-bad:    #ffe1de;
  --ew-info:   #dff1ff;
  --ew-good-ink: #0d5c31;
  --ew-warn-ink: #6b4e00;
  --ew-bad-ink:  #8c2119;
  --ew-info-ink: #10456b;

  /* ── Radius. Three steps, not twelve. ───────────────────────────────────────────── */
  --ew-r-sm: 10px;
  --ew-r:    12px;   /* the dominant radius in the reference */
  --ew-r-lg: 16px;   /* cards, sheets                        */
  --ew-r-pill: 999px;

  /* ── Elevation. Green-tinted, in four deliberate steps. ─────────────────────────── */
  --ew-ledge:   0 2px 0 0 var(--ew-line);                 /* crisp, flat, no blur     */
  --ew-e1:      0 4px 14px rgba(23,60,40,.125);           /* raised card              */
  --ew-e2:      0 12px 26px rgba(7,59,36,.145);           /* modal, popover           */
  --ew-e-sheet: 0 -8px 24px rgba(23,60,40,.063);          /* bottom sheet, upward     */
  --ew-e-cta:   0 8px 24px rgba(7,59,36,.333);            /* primary action           */

  /* ── Type scale. Deliberately non-adjacent so hierarchy survives a squint test. ── */
  --ew-t-display: 700 28px/1.15 var(--ew-font);
  --ew-t-page:    700 22px/1.2  var(--ew-font);
  --ew-t-section: 700 17px/1.3  var(--ew-font);
  --ew-t-card:    700 16px/1.35 var(--ew-font);
  --ew-t-body:    400 15px/1.5  var(--ew-font);
  --ew-t-meta:    400 13px/1.45 var(--ew-font);
  --ew-t-label:   700 11px/1.2  var(--ew-font);
  --ew-font: 'Geist', Inter, system-ui, -apple-system, sans-serif;

  --ew-tap: 48px;          /* minimum touch target */
  --ew-ease: cubic-bezier(.2,.7,.3,1);
}

/* ── TYPOGRAPHY ───────────────────────────────────────────────────────────────────────
   Page title, section title and card title must never be the same size AND weight —
   that similarity is what makes a correct layout look unfinished. */
.ew-display { font: var(--ew-t-display); letter-spacing: -.02em; color: var(--ew-ink); margin: 0; }
.ew-h1      { font: var(--ew-t-page);    letter-spacing: -.015em; color: var(--ew-ink); margin: 0; }
.ew-h2      { font: var(--ew-t-section); letter-spacing: -.01em;  color: var(--ew-ink); margin: 0; }
.ew-h3      { font: var(--ew-t-card);    color: var(--ew-ink); margin: 0; }
.ew-body    { font: var(--ew-t-body);    color: var(--ew-text); margin: 0; }
.ew-meta    { font: var(--ew-t-meta);    color: var(--ew-muted); margin: 0; }
.ew-label   { font: var(--ew-t-label);   color: var(--ew-muted); text-transform: uppercase;
              letter-spacing: .07em; margin: 0; }
/* Prices and counts read as data, not prose — tabular figures stop columns dancing. */
.ew-figure  { font: 700 20px/1.2 var(--ew-font); color: var(--ew-ink);
              font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ── SURFACES ─────────────────────────────────────────────────────────────────────── */
.ew-card {
  background: var(--ew-surface); border: 1px solid var(--ew-line);
  border-radius: var(--ew-r-lg); padding: 16px;
}
.ew-card--quiet   { background: var(--ew-mist); border-color: transparent; }
.ew-card--raised  { box-shadow: var(--ew-e1); border-color: transparent; }
.ew-card--ledge   { box-shadow: var(--ew-ledge); }

/* An interactive card must LOOK interactive before it is touched, and confirm the touch. */
.ew-card--action {
  cursor: pointer; text-align: left; width: 100%; display: block;
  transition: transform .16s var(--ew-ease), box-shadow .16s var(--ew-ease);
}
.ew-card--action:hover  { box-shadow: var(--ew-e1); }
.ew-card--action:active { transform: translateY(1px) scale(.995); box-shadow: none; }

/* The one place glass earns its keep: a bar floating OVER scrolling content. Backdrop
   filter is progressive — the solid colour underneath is the fallback, never a
   low-contrast surprise. */
.ew-glass {
  background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.5);
  box-shadow: var(--ew-e1);
}
@supports (backdrop-filter: blur(1px)) {
  .ew-glass { backdrop-filter: saturate(1.6) blur(14px); background: rgba(255,255,255,.68); }
}

/* ── CONTROLS ─────────────────────────────────────────────────────────────────────── */
.ew-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ew-tap); padding: 0 20px; border-radius: var(--ew-r);
  font: 700 15px/1 var(--ew-font); letter-spacing: -.005em;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .12s var(--ew-ease), box-shadow .12s var(--ew-ease), background .12s;
}
.ew-btn:active   { transform: translateY(1px); }
.ew-btn:disabled, .ew-btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}
.ew-btn--primary   { background: var(--ew-forest); color: #fff; box-shadow: var(--ew-e-cta); }
.ew-btn--primary:hover  { background: var(--ew-green); }
.ew-btn--primary:active { box-shadow: 0 3px 10px rgba(7,59,36,.3); }
.ew-btn--lime      { background: var(--ew-lime); color: #14311f; box-shadow: var(--ew-e-cta); }
.ew-btn--secondary { background: var(--ew-surface); color: var(--ew-ink); border-color: var(--ew-line);
                     box-shadow: var(--ew-ledge); }
.ew-btn--ghost     { background: transparent; color: var(--ew-ink); }
.ew-btn--ghost:hover { background: var(--ew-mist); }
.ew-btn--danger    { background: #b3261e; color: #fff; box-shadow: 0 8px 24px rgba(179,38,30,.28); }
.ew-btn--block     { width: 100%; }

.ew-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ew-tap); height: var(--ew-tap); border-radius: var(--ew-r);
  background: transparent; border: 0; cursor: pointer; color: var(--ew-ink);
}
.ew-iconbtn:hover { background: var(--ew-mist); }

.ew-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border-radius: var(--ew-r-pill); border: 1px solid var(--ew-line);
  background: var(--ew-surface); color: var(--ew-text);
  font: 600 13px/1 var(--ew-font); white-space: nowrap; cursor: pointer;
}
.ew-chip[aria-pressed="true"], .ew-chip.on {
  background: var(--ew-forest); border-color: var(--ew-forest); color: #fff;
}
/* A horizontal chip row on a phone scrolls; it must never wrap into a second line that
   pushes content down, and the scrollbar must not be visible chrome. */
.ew-chiprow {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px; -webkit-overflow-scrolling: touch;
}
.ew-chiprow::-webkit-scrollbar { display: none; }

.ew-field { display: block; }
.ew-field > span { display: block; font: var(--ew-t-label); color: var(--ew-muted);
                   text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; }
/* 16px is not cosmetic: below it iOS zooms the page on focus. */
.ew-input, .ew-select, .ew-textarea {
  width: 100%; min-height: var(--ew-tap); padding: 12px 14px; font: 400 16px/1.4 var(--ew-font);
  color: var(--ew-ink); background: var(--ew-surface);
  border: 1px solid var(--ew-line); border-radius: var(--ew-r);
}
.ew-input:focus-visible, .ew-select:focus-visible, .ew-textarea:focus-visible,
.ew-btn:focus-visible, .ew-chip:focus-visible, .ew-iconbtn:focus-visible {
  outline: 2px solid var(--ew-lime); outline-offset: 2px;
}
.ew-textarea { min-height: 96px; resize: vertical; }

/* ── FEEDBACK ─────────────────────────────────────────────────────────────────────── */
.ew-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: var(--ew-r-pill); font: 700 12px/1.4 var(--ew-font);
}
.ew-status--good { background: var(--ew-good); color: var(--ew-good-ink); }
.ew-status--warn { background: var(--ew-warn); color: var(--ew-warn-ink); }
.ew-status--bad  { background: var(--ew-bad);  color: var(--ew-bad-ink); }
.ew-status--info { background: var(--ew-info); color: var(--ew-info-ink); }
.ew-status--idle { background: var(--ew-mist); color: var(--ew-muted); }

.ew-skeleton {
  border-radius: var(--ew-r-sm); min-height: 14px;
  background: linear-gradient(90deg, var(--ew-mist), #f7faf7, var(--ew-mist));
  background-size: 200% 100%; animation: ew-shimmer 1.2s linear infinite;
}
@keyframes ew-shimmer { to { background-position: -200% 0; } }

.ew-empty {
  text-align: center; padding: 32px 20px; border-radius: var(--ew-r-lg);
  background: var(--ew-mist); color: var(--ew-muted); font: var(--ew-t-body);
}
.ew-empty strong { display: block; font: var(--ew-t-section); color: var(--ew-ink); margin-bottom: 6px; }

/* ── LAYOUT ───────────────────────────────────────────────────────────────────────── */
/* Desktop should use width intelligently — not by enlarging phone cards. */
.ew-page { max-width: 1120px; margin: 0 auto; padding: 24px 20px 40px; }
.ew-stack   { display: grid; gap: 12px; }
.ew-stack-lg{ display: grid; gap: 20px; }
.ew-row     { display: flex; align-items: center; gap: 10px; }
.ew-spread  { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* A section header states WHERE YOU ARE and WHAT YOU CAN DO, in that order. */
.ew-pagehead { display: flex; align-items: flex-start; justify-content: space-between;
               gap: 16px; margin-bottom: 20px; }

/* ── MOBILE ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 719px) {
  .ew-page { padding: 16px 14px calc(96px + env(safe-area-inset-bottom)); }
  .ew-display { font-size: 24px; }
  .ew-h1 { font-size: 20px; }
  .ew-pagehead { flex-direction: column; align-items: stretch; gap: 12px; }
  /* On a phone the primary action is full width — not a small button in a corner. */
  .ew-pagehead .ew-btn { width: 100%; }
  .ew-card { padding: 14px; border-radius: var(--ew-r); }
  /* A sticky action bar must clear the bottom navigation AND the home indicator. */
  .ew-sticky-cta {
    position: sticky; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 40;
    padding: 10px 0;
  }
}

/* ── MOTION ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ew-card--action, .ew-btn { transition: none; }
  .ew-card--action:active, .ew-btn:active { transform: none; }
  .ew-skeleton { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   V3 BUSINESS OS REFINEMENT — shared layer (2026-10-05). CSS only; additive.
   Gives a definition to classes the garage, finance and stock screens already use but that had NO
   rule in any stylesheet (.tbl, .num, .chip-amber/-red/-low/-ok, .row-actions, .inp, helper text),
   a keyboard focus ring that is visible on light surfaces, and field states. No class is renamed,
   no markup changes, no action or datum is removed. Scoped to the signed-in shell and its overlays.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.shell, .overlay, .et-app { --v3o-ink: #132A22; --v3o-lime: #BCF35A; --v3o-lime-hover: #A9E349; --v3o-surface: #F5F7F3; --v3o-raised: #E9EEE5; --v3o-border: #D8E1D3; --v3o-muted: #5C6962; }

/* ── tables: finance, VAT, banking, supplier bills, purchasing, goods in, returns, stocktakes, stock ── */
.shell .tbl, .overlay .tbl { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; line-height: 1.45; }
.shell .tbl th, .overlay .tbl th { text-align: left; padding: 10px 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--v3o-muted); background: var(--v3o-surface); border-bottom: 1px solid var(--v3o-border); white-space: nowrap; }
.shell .tbl td, .overlay .tbl td { padding: 11px 12px; border-bottom: 1px solid var(--v3o-raised); vertical-align: top; color: var(--v3o-ink); }
.shell .tbl tbody tr:last-child td, .overlay .tbl tbody tr:last-child td { border-bottom: 0; }
.shell .tbl tbody tr:hover td, .overlay .tbl tbody tr:hover td { background: var(--v3o-surface); }
.shell .tbl tfoot td, .shell .tbl tfoot th, .overlay .tbl tfoot td { font-weight: 800; border-top: 2px solid var(--v3o-border); border-bottom: 0; background: #fff; }
.shell td.num, .shell th.num, .overlay td.num, .overlay th.num { text-align: right; white-space: nowrap; }
.shell .num, .overlay .num { font-variant-numeric: tabular-nums; }
.shell .pay-table tbody tr:hover td { background: var(--v3o-surface); }
@media (max-width: 760px) {
  /* a wide table scrolls inside itself; the page never scrolls sideways */
  .shell .tbl, .overlay .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}

/* ── status chips that had no colour ── */
.shell .chip-amber, .overlay .chip-amber, .shell .chip-low, .overlay .chip-low { background: #FFF4E0; color: #8A4B08; }
.shell .chip-red, .overlay .chip-red { background: #FDECEC; color: #A4161A; }
.shell .chip-ok, .overlay .chip-ok { background: #E7F6EC; color: #1E6B3A; }
.shell .chip, .overlay .chip { max-width: 100%; overflow-wrap: anywhere; }

/* ── small layout hooks and helper text that had no rule ── */
.shell .row-actions, .overlay .row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.shell .inp, .overlay .inp { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--v3o-border); border-radius: 10px; background: #fff; color: var(--v3o-ink); font: inherit; font-size: 16px; box-sizing: border-box; }
.shell .f-hint, .shell .form-note, .shell .pay-hint, .overlay .f-hint, .overlay .form-note, .overlay .pay-hint { font-size: 12.5px; line-height: 1.5; color: var(--v3o-muted); margin: 6px 0 0; }
.shell .pay-hint.bad, .overlay .pay-hint.bad { color: #A4161A; font-weight: 600; }
.shell .nav-locked { opacity: .62; }

/* ── keyboard focus: visible on light surfaces (the lime ring was about 2.2:1 on white), lime on the dark navigation ── */
.shell :focus-visible, .overlay :focus-visible { outline: 2px solid var(--v3o-ink); outline-offset: 2px; }
.shell .side :focus-visible, .shell .biz-mobnav :focus-visible, .biz-mobnav :focus-visible { outline-color: var(--v3o-lime); }

/* ── field states ── */
.shell .field input:not([type="checkbox"]):not([type="radio"]):hover, .shell .field select:hover, .shell .field textarea:hover,
.overlay .field input:not([type="checkbox"]):not([type="radio"]):hover, .overlay .field select:hover, .overlay .field textarea:hover, .shell .inp:hover, .overlay .inp:hover { border-color: #9FB0A4; }
.shell .field input:focus, .shell .field select:focus, .shell .field textarea:focus, .overlay .field input:focus, .overlay .field select:focus, .overlay .field textarea:focus, .shell .inp:focus, .overlay .inp:focus { border-color: var(--v3o-ink); }
.shell .field [aria-invalid="true"], .overlay .field [aria-invalid="true"] { border-color: #A4161A; box-shadow: 0 0 0 3px rgba(164, 22, 26, .12); }
.shell .field input:disabled, .shell .field select:disabled, .shell .field textarea:disabled, .shell .field input[readonly],
.overlay .field input:disabled, .overlay .field select:disabled, .overlay .field textarea:disabled, .overlay .field input[readonly], .shell .inp:disabled, .overlay .inp:disabled { background: var(--v3o-surface); color: var(--v3o-muted); cursor: not-allowed; }
.shell .btn[aria-disabled="true"], .overlay .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.shell .btn:active, .overlay .btn:active { transform: translateY(1px); }
@media (max-width: 420px) { .shell .f-2, .overlay .f-2 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .shell .btn:active, .overlay .btn:active { transform: none; } }

/* ── grouped navigation ── */
.shell .side .nav-group { list-style: none; margin: 14px 0 2px; padding: 0 14px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #9FB8A8; }
.shell .side .nav-list > .nav-group:first-child { margin-top: 2px; }
.biz-mobnav .biz-more-group { display: block; grid-column: 1 / -1; width: 100%; margin: 10px 0 2px; padding: 0 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #9FB8A8; }

/* ── quote summary: the commercial centre of the job (these classes had no rule) ── */
.shell .q-sum { display: grid; gap: 10px; border: 1px solid var(--v3o-border); }
.shell .q-sum-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.shell .q-sum-k { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--v3o-muted); }
.shell .q-sum-total { font-size: clamp(28px, 5vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: var(--v3o-ink); font-variant-numeric: tabular-nums; }
.shell .q-sum-decision { font-size: 14px; font-weight: 700; color: var(--v3o-ink); }
.shell .q-sum-more { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--v3o-muted); }
.shell .q-sum-more b { color: var(--v3o-ink); }
.shell .q-sum-act { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--v3o-raised); }
.shell .q-sum-btn { justify-self: start; min-height: 46px; }
.shell .q-sum-note { font-size: 12.5px; color: var(--v3o-muted); margin: 0; }
@media (min-width: 900px) { .shell .job-overview-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }

/* V3 TOKENS — copied verbatim by build-css.mjs from src/esc-v3.css; do not edit here */
:root {
  --v3-ink: #132A22;            /* deep Escargo green: text, navigation, strong anchors */
  --v3-lime: #BCF35A;           /* Escargo lime: primary action, active accent */
  --v3-lime-hover: #A9E349;
  --v3-paper: #FFFFFF;
  --v3-surface: #F5F7F3;        /* working background */
  --v3-raised: #E9EEE5;
  --v3-border: #D8E1D3;
  --v3-muted: #5C6962;
  --v3-danger: #A4161A;  --v3-danger-bg: #FDECEC;
  --v3-warn: #8A4B08;    --v3-warn-bg: #FFF4E0;
  --v3-ok: #1E6B3A;      --v3-ok-bg: #E7F6EC;
  --v3-info: #1F4E79;    --v3-info-bg: #E8F1FA;
  --v3-r-sm: 10px; --v3-r-md: 14px; --v3-r-lg: 24px; --v3-r-pill: 999px;
  --v3-s-1: 4px; --v3-s-2: 8px; --v3-s-3: 12px; --v3-s-4: 16px; --v3-s-5: 24px; --v3-s-6: 32px; --v3-s-7: 48px;
  --v3-shadow-1: 0 1px 2px rgba(19, 42, 34, .06), 0 8px 24px rgba(19, 42, 34, .06);
  --v3-shadow-2: 0 2px 4px rgba(19, 42, 34, .08), 0 18px 48px rgba(19, 42, 34, .14);
  --v3-focus: 0 0 0 3px #FFFFFF, 0 0 0 6px #132A22;      /* two-tone ring: visible on white, lime and green */
  --v3-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   V3 SHARED PRIMITIVES (2026-10-05) — tokens, page header, dialog.
   The token block above this comment is the SAME text that the public V3 stylesheet and the recovery
   stylesheet carry (the build copies it from one source and refuses to build if the copies differ).
   Everything below maps the workspace's EXISTING variables onto those tokens, so the garage workspace,
   the recovery workspace and the public site draw from one palette instead of three.
   Scope: the signed-in workspace shell and the things it opens (overlays, menus, toasts, V3 dialogs).
   The customer app, community pages and sign-in routes that share this document are NOT touched.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.shell, .overlay, .menu, .toast, .v3-dlg-back {
  --forest: var(--v3-ink); --forest-side: var(--v3-ink); --forest-deep: #0C1D17; --nav-active: #24483B;
  --lime: var(--v3-lime); --lime-hover: var(--v3-lime-hover);
  --ink: var(--v3-ink); --muted: var(--v3-muted);
  --page: var(--v3-surface); --border: var(--v3-border); --border-soft: var(--v3-raised);
  --ew-forest: var(--v3-ink); --ew-deep: #0C1D17; --ew-green: #24483B; --ew-lime: var(--v3-lime);
  --ew-ink: var(--v3-ink); --ew-muted: var(--v3-muted); --ew-canvas: var(--v3-surface); --ew-mist: var(--v3-raised); --ew-line: var(--v3-border);
  --v3o-ink: var(--v3-ink); --v3o-lime: var(--v3-lime); --v3o-lime-hover: var(--v3-lime-hover); --v3o-surface: var(--v3-surface); --v3o-raised: var(--v3-raised); --v3o-border: var(--v3-border); --v3o-muted: var(--v3-muted);
}
.shell { background: var(--v3-surface); }

/* ── page header: one pattern for the garage workspace (.page-head) and the recovery workspace (.et-pagehead) ── */
.shell .page-head h1, .et-app .et-pagehead h1 { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; color: var(--v3-ink); margin: 0; overflow-wrap: anywhere; }
.shell .page-head .sub, .et-app .et-pagehead p { font-size: 15px; line-height: 1.5; color: var(--v3-muted); margin: 6px 0 0; }
.shell .page-head { gap: 16px; margin-bottom: 22px; }
.shell .page-head .head-actions { gap: 10px; }
@media (max-width: 760px) { .shell .page-head h1, .et-app .et-pagehead h1 { font-size: 24px; } .shell .page-head .sub, .et-app .et-pagehead p { font-size: 14px; } }

/* ── dialog: the existing modal and drawer take the shared shape; .v3-dlg-* is the same pattern for dialogs built in code ── */
.overlay { background: rgba(19, 42, 34, .55); }
.overlay .modal { border-radius: 22px; box-shadow: var(--v3-shadow-2); }
.overlay .dlg-head h3 { font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; color: var(--v3-ink); }
.overlay .dlg-sub { font-size: 13.5px; line-height: 1.55; color: var(--v3-muted); }
.overlay .dlg-actions { flex-wrap: wrap; }
@media (max-width: 520px) { .overlay.center { padding: 0; align-items: flex-end; } .overlay .modal { width: 100%; border-radius: 22px 22px 0 0; } .overlay .dlg-actions .btn { flex: 1 1 100%; justify-content: center; min-height: 48px; } }
.v3-dlg-back { position: fixed; inset: 0; z-index: 120; background: rgba(19, 42, 34, .55); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
@media (min-width: 640px) { .v3-dlg-back { align-items: center; padding: 24px; } }
.v3-dlg { width: min(520px, 100%); max-height: 92vh; overflow: auto; background: var(--v3-paper); border-radius: 22px 22px 0 0; padding: 22px; box-shadow: var(--v3-shadow-2); font-family: var(--v3-font); color: var(--v3-ink); }
@media (min-width: 640px) { .v3-dlg { border-radius: 22px; } }
.v3-dlg-title { margin: 0 0 4px; font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; color: var(--v3-ink); }
.v3-dlg-sub { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--v3-muted); }
.v3-dlg-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--v3-raised); font-size: 14px; }
.v3-dlg-row > span { color: var(--v3-muted); } .v3-dlg-row > b { color: var(--v3-ink); text-align: right; overflow-wrap: anywhere; }
.v3-dlg-note { margin: 12px 0 0; padding: 11px 13px; border-radius: 12px; background: var(--v3-surface); border: 1px solid var(--v3-border); color: var(--v3-ink); font-size: 13.5px; line-height: 1.55; }
.v3-dlg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.v3-dlg-btn { flex: 1 1 180px; min-height: 48px; border-radius: 999px; border: 1px solid var(--v3-border); background: var(--v3-paper); color: var(--v3-ink); font: 700 15px/1.2 var(--v3-font); cursor: pointer; }
.v3-dlg-btn--primary { border-color: var(--v3-lime); background: var(--v3-lime); font-weight: 800; }
.v3-dlg-btn--primary:hover { background: var(--v3-lime-hover); border-color: var(--v3-lime-hover); }
.v3-dlg-btn:hover { border-color: var(--v3-ink); }
.v3-dlg :focus-visible { outline: 2px solid var(--v3-ink); outline-offset: 2px; }