/* customer-portal.css — the customer portal's OWN small sheet (CSP, 2026-09-15), loaded AFTER the vendored portal.css.
   It holds ONLY the classes that replaced this tree's 40 inline style attributes; every declaration below is the former inline
   value, quoted verbatim, so the computed styles are identical. portal.css is NEVER edited here (it is byte-copied from the
   vendor portal at deploy). Ruling owed: fold these into the vendor portal's sheet in the vendor phase and delete this file.
   Specificity notes: `.rowcard` in portal.css is one class (border-left:3px solid var(--line)) — `.rowcard.rowcard-*` wins;
   `.card .hint{margin:…}` and `.card h2{margin:…}` are (0,2,0)/(0,1,1) — the rules here match or exceed them and load later. */

/* was style="border-left:6px solid var(--warn|go|line|accent)" on .card (dashboard, booking, help, requests, request, login) */
.card.edge-warn{border-left:6px solid var(--warn)}
.card.edge-go{border-left:6px solid var(--go)}
.card.edge-line{border-left:6px solid var(--line)}
.card.edge-accent{border-left:6px solid var(--accent)}

/* was style="border-left-color:var(--go|stop|line|warn)" on .card.rowcard (_job_row, messages, requests) */
.rowcard.rowcard-go{border-left-color:var(--go)}
.rowcard.rowcard-stop{border-left-color:var(--stop)}
.rowcard.rowcard-line{border-left-color:var(--line)}
.rowcard.rowcard-warn{border-left-color:var(--warn)}

/* was style="width:100%" (9: login, request_new ×6, help, _guest_change, _datetime_change) and the four fixed widths (request_new) */
.w-full{width:100%}
.w-5em{width:5em}
.w-8em{width:8em}
.w-10em{width:10em}
.w-16em{width:16em}

/* was style="min-width:0" on table.ledger (account, request ×2) · style="max-width:28rem" on .card (login) */
.ledger.minw-0{min-width:0}
.card.maxw-28{max-width:28rem}

/* was style="margin:0" on the logout + withdraw forms · style="margin-top:0" on h2 (request ×2) · style="margin-top:var(--sp-2)" on .card (request) ·
   style="margin-top:var(--sp-3)" on .hint (login ×2) · style="gap:var(--sp-2);margin-top:var(--sp-2)" on p.row (request_new, help) */
form.m-0{margin:0}
.card .mt-0{margin-top:0}
.card.mt-2{margin-top:var(--sp-2)}
.card.edge-warn.mt-2{margin-top:var(--sp-2)}
.card .hint.mt-3,.hint.mt-3{margin-top:var(--sp-3)}
.row.gap-2{gap:var(--sp-2)}
.row.mt-2{margin-top:var(--sp-2)}

/* was messages.php's inline unread dot + emphasis */
.unread-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#1a7f37;margin-right:8px;vertical-align:middle}
.fw-700{font-weight:700}
.fw-600{font-weight:600}

/* the compose box and the change form's Notes (2026-09-16, the operator's walk): portal.css styles input+select only (:480), so both
   textareas sat at the browser's default (cols=20) — the same tokens as portal.css's .sheet--form textarea (:1787), quoted */
.compose textarea,.change-request textarea{width:100%;font:inherit;font-size:13px;padding:6px var(--sp-2);border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);resize:vertical;min-height:4.5em}
.change-request .ack{font-weight:400;font-size:13px;margin:var(--sp-1) 0}

/* E (2026-09-17): the booking reference on every list row (_job_row.php) — the row's own muted line; digits aligned, never wrapped */
.ref{white-space:nowrap;font-variant-numeric:tabular-nums}

/* the booking page's card grid (2026-09-17, Kaleb after the browser look): Event · Payments · Booking reference pinned to the LEFT column from 700 px
   (portal.css .cardgrid is two equal columns there, sparse auto-placement); Truck & menu, declared before Payments, takes the top-right cell */
@media(min-width:700px){.cardgrid .card.col-1{grid-column:1}}

/* THE CHANGE FORM (item 3 half two, 2026-09-17): the form and the quote card side by side from 700 px; portal classes throughout */
.change-panel{display:grid;gap:var(--sp-3)}
@media(min-width:700px){.change-panel{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}}
.change-panel .cr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--sp-2)}
.change-panel .cr-grid input,.change-panel .cr-grid select{width:100%}
.qcard{border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-3);background:var(--bg)}
.qcard[data-state="ok"]{border-color:var(--go)}
.qcard[data-state="refused"],.qcard[data-state="unpriceable"],.qcard[data-state="engine_unavailable"]{border-color:var(--stop)}
.qlines{display:grid;grid-template-columns:auto 1fr;gap:4px var(--sp-2);margin:0 0 var(--sp-2)}
.qlines dt{font-weight:600;font-size:12px;color:var(--muted)}
.qlines dd{margin:0}
.qms{margin:0 0 var(--sp-2);padding-left:18px;font-size:13px}

/* THE TRUCK IS BUSY (Phase 1, operator ruling 2026-09-18): its own state on the quote card. NOT --stop: a busy truck is not a
   refusal of something the customer typed and not a fault of ours — it is a fact about the truck's day, and --warn is the token
   this sheet already uses for "look at this", where --stop is "this is wrong". The alternatives ride the existing .qms list. */
.qcard[data-state="unavailable"]{border-color:var(--warn)}

/* ── UNAVAILABLE: a disabled button reads as unavailable (Kaleb 2026-09-23; measured 2026-09-22: a disabled .btn was pixel-identical to a live
   one — same ink, ground, border, pointer cursor — and on launch day it is the first control a premium-booking customer meets, beside "needs a
   person"). The sheet's own unavailable vocabulary (.geo-locked, .pf.is-off): muted ink, muted ground, hairline border, not-allowed cursor,
   no hover lift. Every .btn variant, because unavailable is unavailable; specificity (.btn:disabled = 0,2,0) beats every single-class variant.
   The only control the CUSTOMER portal ever disables is the change form's Send (views/_change_form.php:64 · portal.js cfReady / the in-flight
   submit); customer-portal.css carries the rule until the vendor-phase fold-in (layout.php's ruling owed) lands it in the ONE sheet. ── */
.btn:disabled,.btn[aria-disabled="true"]{color:var(--muted);background:var(--bg);border-color:var(--line);cursor:not-allowed;opacity:1}
.btn:disabled:hover,.btn[aria-disabled="true"]:hover{border-color:var(--line);background:var(--bg)}

/* ── THE SIGN-IN SKIN, ROUND 2 (Kaleb 2026-09-23; cosmetic only — views/login.php + views/auth_accept.php wear the .auth* hooks). The vendor login's ACTUAL values,
   not its tokens' cousins: every colour in this block is a literal MEASURED from the vendor portal's deployed stylesheet, /opt/sites/platform/portal/public/portal.css
   (sha256 49f9c3a64d26be57…, byte-equal to vendor-portal/public/portal.css), and lives in ONE place — the --auth-* custom properties on the first rule — each annotated
   with the line it was read from. Every other rule refers to those names; no other colour literal is written in this block (the rig's K1 asserts it; K3 re-reads each
   annotated line and checks the value is still there). portal.css is never edited and never re-vendored (option B stands); this portal's vendored copy of portal.css
   (066542944b7fb6f0…) predates the vendor's pre-auth block and declares none of these.
   Round 1 (live 04:39:53Z) painted the same shapes from the vendored sheet's tokens (--go-ink #17492f · --warn-bg-strong #ecca7a · --warn-bg #faf3e3 · --muted #6b7280 on
   the subheading, 4.83:1); the operator's eye beside the vendor login asked for the vendor's hexes, more contrast, and the logo — RULED 2026-09-23 (no vector exists; root swept the brand
   pool): the mark ships as a same-origin raster, public/logo-w200.webp, beside the wordmark — round 3, qa/REPORT-2026-09-23-seat-a-logo.md; its size and spacing are the vendor bar's, cited below.
   The pre-auth layout renders <main> alone (views/layout.php:60), so :has() lifts main's width and padding on these two pages only. The properties are declared on
   `body:has(.auth), .auth` — ONE rule — so the body can paint the ground AND a browser without :has() still gets them on .auth (degraded there: the bar inset by main's
   padding, the ground --bg — never broken; .auth paints its own cream to 100vh either way).
   NOT matched, on purpose (each is the operator's call, none is a colour): the fonts (Baloo 2 / Montserrat reach the vendor by a Google Fonts <link> that this portal's
   CSP `default-src 'self'` forbids — a root change); the UPPERCASE pill label (portal.css:2424 text-transform — the copy here is ruled and reads as written); the
   GOLD focus ring (portal.css:2399 — 1.82:1 on white; the ring here is the vendor's width and offset in the green, 12.53:1). ── */
body:has(.auth),.auth{
  --auth-green:#173A2B;             /* portal.css:2393 --au-green — the bar, the card / field / button border, the subheading, the hints, the links */
  --auth-ink:#0F2A1D;               /* portal.css:2393 --au-ink — the heading, the label, the field text, the button label */
  --auth-cream:#F8EEE7;             /* portal.css:2393 --au-cream (also :2392 .auth-body) — the page ground */
  --auth-gold:#E9B94E;              /* portal.css:2393 --au-gold — the button */
  --auth-gold-hi:#F2C864;           /* portal.css:2393 --au-gold-hi — the button, hovered */
  --auth-gold-text:#7A521A;         /* portal.css:2393 --au-gold-text — a link, hovered */
  --auth-white:#fff;                /* portal.css:2394 --au-white — the card, the field, the wordmark */
  --auth-shadow:rgba(23,58,43,.18)  /* portal.css:2413 .auth-card box-shadow — the card's hard shadow, the green at 18% */
}
body:has(.auth){background:var(--auth-cream)}
body:has(.auth) main{max-width:none;padding:0}
.auth{min-height:100vh;display:flex;flex-direction:column;background:var(--auth-cream);color:var(--auth-ink)}
/* the bar: the vendor's surface, height and side padding (portal.css:2401 · :2444); the brand cluster's 12px between the mark and the name (:2404); the wordmark at its
   brand-name size and weight (:2408 · :2446) */
.auth-bar{background:var(--auth-green);color:var(--auth-white);display:flex;align-items:center;gap:12px;min-height:108px;padding:0 36px}
/* the mark (round 3): the vendor's logo box — 78px tall, the width from the file's own aspect, a block (:2406); 56px on the phone (:2445). The file is public/logo-w200.webp, the
   brand pool's w200 rendition (200×178 = 2.3× the 78px box and 3.2× the 56px one — crisp at 2× on a laptop and 3× on a phone; the w800 is 49 KB to draw 78px); the <img>
   carries width="200" height="178" so the box is reserved before the bytes land */
.auth-logo{height:78px;width:auto;display:block}
.auth-wordmark{font-size:24px;font-weight:800;letter-spacing:.01em;line-height:1;white-space:nowrap;color:var(--auth-white)}
/* the column: the vendor's main padding (:2411) around its card width (:2412 max-width:560px) */
.auth-wrap{flex:1;width:100%;max-width:608px;margin:0 auto;padding:40px 24px 64px}
/* the heading (:2414) — above the card here, on the cream, as round 1 placed it */
.auth .auth-title{font-size:30px;font-weight:800;line-height:1.1;margin:0 0 .3em;color:var(--auth-ink)}
/* the card (:2412-2413): white, 3px green edge, 20px radius, the hard 8px shadow */
.auth .card.auth-card{max-width:none;background:var(--auth-white);border:3px solid var(--auth-green);border-radius:20px;padding:28px 28px 24px;box-shadow:0 8px 0 var(--auth-shadow)}
/* the subheading = the vendor's lede (:2415): 16px, the green, and WEIGHTED — the vendor's body face arrives at 700 (its Google Fonts request loads no lighter Montserrat) */
.auth .card .hint.auth-sub{font-size:16px;font-weight:700;line-height:1.55;color:var(--auth-green);margin:0 0 18px}
/* the hints = the vendor's hint colour and size (:2416); a step lighter than the lede in WEIGHT only (round 1: --muted #6b7280, 4.83:1 → the green, 12.53:1) */
.auth .card .hint.mt-3{font-size:15px;font-weight:500;line-height:1.55;color:var(--auth-green);margin-top:14px}
.auth .hint[data-sent-hint]{font-size:15px;font-weight:600;line-height:1.55;color:var(--auth-green);margin:0 0 14px}
/* the message box keeps this sheet's warn/go pair (the vendor's box has ONE state; ours has two) at the vendor's radius and weight (:2417) */
.auth .msg.card{border-radius:12px;max-width:none;font-weight:600}
/* the field (:2418-2421): a bold 15px label, a 48px 17px/600 input with a 2px green edge and 12px radius */
.auth label{display:block;font-size:15px;font-weight:700;color:var(--auth-ink);margin:0 0 14px}
.auth .auth-form input[type=email]{display:block;width:100%;min-height:48px;margin-top:6px;padding:11px 14px;font:inherit;font-size:17px;font-weight:600;
  border:2px solid var(--auth-green);border-radius:12px;background:var(--auth-white);color:var(--auth-ink)}
/* the button (:2422-2427): the gold pill — 52px, 3px green edge, 999px radius, the hard 6px shadow, 900 weight, lifted on hover, pressed on :active; the label as written */
.auth .auth-form .auth-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:6px;padding:12px 34px;
  background:var(--auth-gold);color:var(--auth-ink);border:3px solid var(--auth-green);border-radius:999px;font-weight:900;font-size:17px;letter-spacing:.06em;line-height:1.2;
  box-shadow:0 6px 0 var(--auth-green);transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.auth .auth-form .auth-btn:hover{background:var(--auth-gold-hi);border-color:var(--auth-green);color:var(--auth-ink);transform:translateY(-2px);box-shadow:0 8px 0 var(--auth-green);filter:none}
.auth .auth-form .auth-btn:active{transform:translateY(2px);box-shadow:0 3px 0 var(--auth-green)}
/* the links (:2397-2398): the green, bold, underlined 3px off the baseline; the gold-text on hover */
.auth .card .hint a{color:var(--auth-green);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.auth .card .hint a:hover{color:var(--auth-gold-text)}
/* focus (:2399 gives the width and the offset; the colour is the green — see the head of this block) */
.auth :focus-visible{outline:3px solid var(--auth-green);outline-offset:2px}
.auth .auth-form input[type=email]:focus{outline:3px solid var(--auth-green);outline-offset:2px;border-color:var(--auth-green)}
/* the phone step (:2443-2451) */
@media(max-width:899.98px){
  .auth-bar{min-height:80px;padding:0 20px}
  .auth-logo{height:56px}
  .auth-wordmark{font-size:20px}
  .auth-wrap{padding:24px 16px 48px}
  .auth .card.auth-card{padding:22px 18px 20px}
  .auth .auth-title{font-size:26px}
  .auth .auth-form .auth-btn{padding:12px 16px;font-size:16px}
}