/* EA Spotless Rides — Client Portal (EAS-27)
   Extends the main site (styles.css): same dark theme, gold accent, Barlow
   fonts and button styles. Only portal-specific components live here.
   Design tokens come from global.css (loaded first on portal.html); the
   canonical set lives in css/tokens.css. */

.pt-app{min-height:100vh}

/* Auth screen — dark, matches the site hero */
.pt-auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(1200px 520px at 50% -10%, #1c1f26 0%, var(--black) 60%)}
.pt-auth-card{background:var(--dark2);border:1px solid var(--dark3);border-radius:14px;padding:38px 30px;width:100%;max-width:390px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.pt-auth-logo{height:56px;width:auto;margin-bottom:16px}
.pt-auth-title{font-family:var(--font-display);font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:28px;margin:0 0 6px;color:var(--white)}
.pt-auth-sub{color:var(--gray);font-size:14px;margin:0 0 22px}
.pt-or{display:flex;align-items:center;gap:10px;color:var(--gray);font-size:12px;margin:18px 0;text-transform:uppercase;letter-spacing:.1em}
.pt-or::before,.pt-or::after{content:"";flex:1;height:1px;background:var(--dark3)}
.pt-auth-msg{font-size:13px;margin-top:10px;min-height:18px;color:var(--gold-light)}
/* Auth feedback states — shared status tokens, readable on the dark card. */
.pt-auth-msg.ok{color:var(--success)}
.pt-auth-msg.err{color:var(--danger)}
.pt-auth-fine{font-size:12px;color:var(--gray);margin-top:18px}
#ptAuthInstall:not(:empty){margin-top:16px;padding-top:16px;border-top:1px solid var(--dark3)}
#ptAuthInstall .pt-btn{width:100%}
.pt-auth-install{font-size:12px;color:var(--gray);line-height:1.55}

/* Inputs + buttons (reuse site .btn-primary where possible) */
.pt-input{width:100%;padding:12px 14px;font-size:15px;font-family:inherit;color:var(--white);
  background:var(--dark3);border:1px solid rgba(255,255,255,.12);border-radius:6px;margin-bottom:10px}
.pt-input:focus{outline:none;border-color:var(--gold)}
/* Invalid state — once the field's been touched (:user-invalid) or flagged by
   JS (aria-invalid), so it doesn't read as broken before the customer types. */
.pt-input:user-invalid,.pt-input[aria-invalid="true"]{border-color:var(--danger)}
.pt-input:disabled{opacity:.6}
/* The base sets shape and type only; the modifiers below set the colour. It
   therefore has to carry its OWN background/colour too — a bare `pt-btn` with
   neither used to fall straight through to the user agent's default button,
   which iOS Safari paints in the system accent. Two "Add email"/"Add phone"
   buttons shipped bright blue in a gold-and-black app because of it.
   `appearance:none` kills the native chrome so the platform can never repaint
   a button we styled. Every modifier is declared after this rule, so each still
   wins on equal specificity. */
.pt-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:12px 18px;
  font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;
  border-radius:5px;border:1px solid transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none;background:var(--dark3);color:var(--white)}
.pt-btn-primary{background:var(--gold);color:var(--black)}
.pt-btn-primary:hover{background:var(--gold-light)}
.pt-btn-google{background:transparent;border-color:rgba(255,255,255,.18);color:var(--white)}
.pt-btn-google:hover{border-color:var(--gold)}
.pt-btn-sm{width:auto;padding:8px 15px;font-size:13px;background:var(--gold);color:var(--black)}
a.pt-btn{display:inline-flex;text-decoration:none}
.pt-link{background:none;border:none;color:var(--gold);font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;font-size:13px;padding:0}
.pt-link.danger{color:#ff8888;margin-left:14px}
.pt-btn-link{display:block;width:100%;background:none;border:none;color:var(--gray);font-size:13px;cursor:pointer;padding:10px 0 0;text-decoration:underline}
.pt-btn-link:hover{color:var(--white)}

/* App nav (site look) */
.pt-nav{display:flex;align-items:center;justify-content:space-between;padding:12px 5vw;background:rgba(10,10,10,.96);border-bottom:1px solid var(--dark3);position:sticky;top:0;z-index:var(--z-nav)}
.pt-nav-right{display:flex;align-items:center;gap:16px}
.pt-user{font-size:14px;color:var(--gray)}
/* Signed-in identity + service-area weather, matching Command HQ's header. */
.pt-signedin{display:flex;align-items:center;gap:8px}
.pt-user-avatar{border-radius:50%;object-fit:cover;border:1px solid var(--dark3);display:block}
.pt-signout{background:none;border:none;color:var(--gray);font-size:13px;cursor:pointer;font-family:inherit}
.pt-signout:hover{color:var(--white)}

/* Tabs */
.pt-tabs{display:flex;gap:2px;overflow-x:auto;background:var(--dark);border-bottom:1px solid var(--dark3);padding:0 max(12px,4vw);position:sticky;top:61px;z-index:var(--z-sticky)}
.pt-tab{flex-shrink:0;background:none;border:none;border-bottom:3px solid transparent;padding:14px 16px;font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gray);cursor:pointer}
.pt-tab.active{color:var(--gold);border-bottom-color:var(--gold)}

.pt-main{max-width:880px;margin:0 auto;padding:28px 5vw 70px}
/* Each tab panel is a <section>, and global.css gives every bare section
   3.5rem/1.5rem of padding — so every portal screen has been carrying ~48px of
   dead space above its first line and a second, narrower gutter inside
   .pt-main's own. The panel is a container, not a page section. */
.pt-panel{padding:0}
.pt-loading{color:var(--gray);text-align:center;padding:48px}
.pt-h2{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:26px;margin:0 0 18px;color:var(--white)}
.pt-h3{font-family:var(--font-display);font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin:24px 0 10px}
.pt-head-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}
.pt-head-row .pt-h2{margin:0}
.pt-muted{color:#9b9b9b;font-size:13px}

.pt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.pt-card{background:var(--dark2);border:1px solid var(--dark3);border-radius:12px;padding:18px}
.pt-card-label{font-family:var(--font-display);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--gray);margin-bottom:10px}
.pt-card-big{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--white);text-transform:uppercase}
.pt-cta{margin-top:24px}

.pt-row,.pt-card2{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--dark2);border:1px solid var(--dark3);border-radius:10px;padding:14px 16px;margin-bottom:8px}
.pt-row-title{font-weight:600;font-size:15px;color:var(--white)}
.pt-row-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.pt-amt{font-family:var(--font-display);font-weight:800;color:var(--white);font-size:16px}
.pt-tag{display:inline-block;font-family:var(--font-display);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gold);background:rgba(212,160,23,.14);border-radius:4px;padding:1px 6px;vertical-align:middle}
.pt-pill{font-family:var(--font-display);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.07);color:var(--gray)}
.pt-pill.paid{background:rgba(126,223,126,.14);color:#7ddf7d}
.pt-pill.up{background:rgba(212,160,23,.16);color:var(--gold)}
.pt-pill.due{background:rgba(255,140,140,.12);color:#ff8888}
.pt-empty{color:#9b9b9b;font-size:14px;padding:26px 20px;background:var(--dark2);border:1px dashed var(--dark3);border-radius:12px;text-align:center}
.pt-empty-ico{font-size:30px;line-height:1;margin-bottom:10px}
.pt-empty-title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--white);font-size:15px;margin-bottom:5px}
.pt-empty-sub{color:#9b9b9b;font-size:13px;line-height:1.5;margin:0 auto 14px;max-width:340px}

/* Appointment cards: stacked, labelled detail lines + inline forecast */
.pt-row-appt{align-items:flex-start}
.pt-row-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.pt-row-appt .pt-row-title{margin-bottom:2px}
.pt-meta-line{display:flex;align-items:flex-start;gap:7px;font-size:13px;color:var(--gray);line-height:1.4}
.pt-meta-ico{flex-shrink:0;opacity:.85}
.pt-wx{display:flex;align-items:center;gap:7px;margin-top:5px;font-size:12.5px;color:var(--gray);background:rgba(255,255,255,.04);border:1px solid var(--dark3);border-radius:8px;padding:5px 9px;width:fit-content;max-width:100%}
.pt-wx[data-risk=risky]{color:#ffb38a;background:rgba(255,140,140,.08);border-color:rgba(255,140,140,.25)}
.pt-wx-emoji{font-size:14px;flex-shrink:0}
@media (max-width:600px){ .pt-row-appt{flex-direction:column} .pt-row-appt .pt-row-right{align-self:flex-start} }

.pt-form{display:flex;flex-direction:column;gap:8px;max-width:430px}
.pt-label{display:flex;flex-direction:column;gap:5px;font-family:var(--font-display);font-size:12px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.05em}
.pt-form .pt-btn{align-self:flex-start;width:auto;margin-top:10px}

@media (max-width:600px){ .pt-user{display:none} }

/* CRUD modal */
.pt-modal{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:18px}
.pt-modal[hidden]{display:none}
.pt-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.66)}
.pt-modal-card{position:relative;width:100%;max-width:440px;background:var(--dark2);border:1px solid var(--dark3);border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.6);max-height:90vh;overflow-y:auto}
.pt-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--dark3)}
.pt-modal-title{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:18px;margin:0;color:var(--white)}
.pt-modal-x{background:none;border:none;color:var(--gray);font-size:18px;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;padding:6px;margin:-6px -8px -6px 0}
.pt-modal-x:hover{color:var(--white)}
.pt-modal-body{display:flex;flex-direction:column;gap:8px;padding:18px 20px}
.pt-form-row{display:flex;gap:10px}
.pt-form-row .pt-label{flex:1;min-width:0}
.pt-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray);cursor:pointer;margin-top:4px}
.pt-modal-actions{display:flex;gap:10px;margin-top:10px}
.pt-modal-actions .pt-btn{flex:1}
.pt-modal-msg{padding:0 20px 16px;font-size:13px;color:var(--gold-light);min-height:14px}

/* Booking-style step flow (ported qp-card system from book-now) */
.pt-step{margin-bottom:30px}
.pt-step-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.pt-step-num{width:26px;height:26px;border-radius:50%;background:var(--gold);color:var(--black);font-family:var(--font-display);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pt-step-title{font-family:var(--font-display);font-weight:800;font-size:18px;text-transform:uppercase;letter-spacing:.04em;color:var(--white)}
.pt-step-opt{color:var(--gray);font-size:13px;font-family:var(--font-body);font-weight:400;text-transform:none;letter-spacing:0}
.qp-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.qp-card{position:relative;cursor:pointer;border:1px solid var(--dark3);border-radius:8px;padding:16px 36px 14px 16px;background:var(--dark2);transition:border-color .14s,background .14s,box-shadow .14s;user-select:none;display:block}
button.qp-card{width:100%;appearance:none;-webkit-appearance:none;font:inherit;color:inherit;text-align:left}
.qp-card:hover{border-color:rgba(212,160,23,.4)}
.qp-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.qp-card.qp-on{border-color:var(--gold);background:rgba(212,160,23,.07);box-shadow:0 0 0 1px rgba(212,160,23,.1)}
.qp-card-svg{width:38px;height:38px;color:var(--gold);margin-bottom:10px;display:block;stroke:currentColor;fill:none}
.qp-card-svg path,.qp-card-svg circle,.qp-card-svg line,.qp-card-svg polyline,.qp-card-svg rect{stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qp-card-name{font-family:var(--font-display);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--white);line-height:1.15;margin-bottom:4px}
.qp-card-desc{font-size:12px;color:var(--gray);line-height:1.4}
.qp-card-price{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--gold);margin-top:10px}
.qp-dot{position:absolute;top:11px;right:11px;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;background:transparent;transition:all .14s}
.qp-card.qp-on .qp-dot{background:var(--gold);border-color:var(--gold)}
.qp-dot-check{opacity:0;transition:opacity .14s}
.qp-card.qp-on .qp-dot-check{opacity:1}
.qp-card.qp-add{border-style:dashed;text-align:center;padding:24px 16px;color:var(--gray)}
.pt-book-foot{position:sticky;bottom:0;background:rgba(10,10,10,.96);border-top:1px solid var(--dark3);margin:24px -5vw 0;padding:14px 5vw;display:flex;align-items:center;justify-content:space-between;gap:14px}
.pt-book-total{font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--gold)}
.pt-book-total .pt-strike{color:var(--gray);text-decoration:line-through;font-size:15px;font-weight:600;margin-right:6px}

/* Discount code (Book tab) — mirrors the booking page's compact code field */
.pt-book-discount{margin-bottom:24px}
.pt-disc-row{display:flex;gap:8px;max-width:430px}
.pt-disc-row .pt-input{margin-bottom:0;text-transform:uppercase}
.pt-disc-msg{font-size:12px;margin-top:6px;min-height:14px}
.pt-disc-msg.err{color:#ff8888}
.pt-disc-msg.ok{color:#9ee6b8}
.pt-disc-applied{display:flex;align-items:center;gap:12px;color:#9ee6b8;font-size:14px}

/* Flatpickr calendar — gold theme, matches the booking page */
.flatpickr-calendar{background:#111;border:1px solid var(--dark3);box-shadow:0 18px 45px rgba(0,0,0,.45);color:var(--white);font-family:var(--font-body)}
.flatpickr-months,.flatpickr-weekdays{background:var(--dark2)}
.flatpickr-current-month,.flatpickr-monthDropdown-months,.flatpickr-weekday,.flatpickr-day{color:var(--white) !important}
.flatpickr-day.weekend,.flatpickr-day.weekend:hover{color:var(--white) !important}
.flatpickr-day.today{border-color:rgba(212,160,23,.7)}
.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected:hover{background:var(--gold);border-color:var(--gold);color:var(--black) !important}
.flatpickr-day:hover{background:rgba(212,160,23,.16);border-color:rgba(212,160,23,.35)}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{color:rgba(255,255,255,.28) !important}
.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{fill:var(--gold)}

/* Branded toast (EAS-151) — replaces native alert() */
.pt-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(10px);z-index:var(--z-toast);display:flex;gap:10px;align-items:flex-start;max-width:min(92vw,460px);background:var(--dark2);border:1px solid var(--dark3);border-left:4px solid var(--gold);border-radius:12px;padding:14px 18px;color:var(--white);font-size:14px;line-height:1.45;box-shadow:0 18px 50px rgba(0,0,0,.55);opacity:0;transition:opacity .22s ease,transform .22s ease}
.pt-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.pt-toast.success{border-left-color:#7ddf7d}
.pt-toast.error{border-left-color:#ff8888}
.pt-toast-ic{flex-shrink:0;font-weight:800;color:var(--gold)}
.pt-toast.success .pt-toast-ic{color:#7ddf7d}
.pt-toast.error .pt-toast-ic{color:#ff8888}

/* Notification preferences (Account → Notifications) ──────────────────────── */
.pt-notif-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--dark3);cursor:pointer}
.pt-notif-row:last-of-type{border-bottom:none}
.pt-notif-info{display:flex;flex-direction:column;gap:5px;min-width:0}
.pt-notif-label{color:var(--white);font-size:14px;font-weight:600}
.pt-notif-chips{display:flex;gap:6px}
.pt-chip{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--gray);border:1px solid var(--dark3);border-radius:999px;padding:2px 8px}
/* iOS-style switch built on a checkbox so the row stays a plain <label> */
.pt-switch{appearance:none;-webkit-appearance:none;position:relative;width:46px;height:28px;border-radius:999px;background:var(--dark3);border:1px solid rgba(255,255,255,.14);cursor:pointer;flex:0 0 auto;transition:background .15s}
.pt-switch:checked{background:var(--gold)}
.pt-switch::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .15s}
.pt-switch:checked::after{transform:translateX(18px)}
.pt-switch:disabled{opacity:.5;cursor:default}

/* Review CTA card (dashboard) ─────────────────────────────────────────────── */
.pt-review-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;border-color:rgba(212,160,23,.4)}
.pt-review-cta-text{min-width:0}
@media (max-width:560px){.pt-review-cta{flex-direction:column;align-items:flex-start}.pt-review-cta .pt-btn{width:100%}}

/* Dashboard push/install nudge (EAS-39) — like the review CTA, with a dismiss × */
.pt-push-cta{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px;padding-right:40px;border-color:rgba(212,160,23,.4)}
.pt-push-dismiss{position:absolute;top:6px;right:10px;background:none;border:0;color:var(--gray);font-size:22px;line-height:1;cursor:pointer;padding:4px}
.pt-push-dismiss:hover{color:var(--white)}
@media (max-width:560px){.pt-push-cta{flex-direction:column;align-items:flex-start}.pt-push-cta .pt-btn{width:100%}}
/* Brief attention flash when we deep-link to the App & notifications card */
.pt-flash{animation:ptFlash 1.6s ease-out}
@keyframes ptFlash{0%,100%{box-shadow:0 0 0 0 rgba(212,160,23,0)}18%{box-shadow:0 0 0 3px rgba(212,160,23,.7)}}

/* Appointment card: title left, amount top-right ─────────────────────────── */
.pt-appt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pt-appt-head .pt-row-title{flex:1;min-width:0}
.pt-amt-top{flex:0 0 auto;white-space:nowrap}

/* Live appointment status pill (on the way / in progress) ─────────────────── */
.pt-pill.live{background:rgba(212,160,23,.16);color:var(--gold);border:1px solid rgba(212,160,23,.5)}
@keyframes ptLivePulse{0%,100%{opacity:1}50%{opacity:.45}}
.pt-pill.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:6px;vertical-align:middle;animation:ptLivePulse 1.4s ease-in-out infinite}

/* Status stepper: Confirmed → On the way → In progress → Done. The standalone
   pre-visit panel it used to live in retired with The Driveway — the stepper
   moved into the Right Now hero rather than repeating the appointment twice. */
.pt-stepper{display:flex;gap:4px;margin-bottom:18px}
.pt-step{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;text-align:center}
.pt-step-dot{width:12px;height:12px;border-radius:50%;background:var(--dark3);border:1px solid rgba(255,255,255,.16);flex-shrink:0;z-index:1}
.pt-step-label{font-size:11px;color:var(--gray);line-height:1.2}
.pt-step:not(:last-child)::after{content:"";position:absolute;top:6px;left:50%;width:100%;height:2px;background:var(--dark3);z-index:0}
.pt-step.is-done .pt-step-dot{background:var(--gold);border-color:var(--gold)}
.pt-step.is-done:not(:last-child)::after{background:var(--gold)}
.pt-step.is-done .pt-step-label{color:var(--white)}
.pt-step.is-current .pt-step-dot{background:var(--gold);border-color:var(--gold);animation:ptLivePulse 1.4s ease-in-out infinite}
.pt-step.is-current .pt-step-label{color:var(--gold);font-weight:700}
/* Loading spinner — gives the "Loading your account…" state visible motion so a
   slow mobile connection doesn't read as frozen. */
.pt-spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.18);border-top-color:var(--gold);border-radius:50%;animation:ptSpin .7s linear infinite;vertical-align:middle;margin-right:10px}
/* Inline button spinner — inherits the button's text color (currentColor) so
   it stays visible on the gold primary button and the dark secondary alike. */
.pt-btn-spin{display:inline-block;width:13px;height:13px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:ptSpin .7s linear infinite;vertical-align:-1px;margin-right:8px}
@keyframes ptSpin{to{transform:rotate(360deg)}}

/* Visible keyboard focus on all interactive elements (a11y). Cards already have
   their own :focus-visible; this covers buttons, links, tabs, inputs, toggles. */
.pt-btn:focus-visible,.pt-link:focus-visible,.pt-tab:focus-visible,.pt-input:focus-visible,
.pt-modal-x:focus-visible,.pt-switch:focus-visible,.pt-signout:focus-visible,
.pt-notif-row:focus-visible,a.pt-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  .pt-spinner,.pt-btn-spin{animation-duration:1.4s}
  .pt-pill.live::before{animation:none}
  .pt-step.is-current .pt-step-dot{animation:none}
  .pt-toast{transition:none}
}

/* ================================================
   MODERN REFRESH (UX consistency pass)
   Shared tokens from css/tokens.css. Unified depth, radius, motion and
   status colors so the portal reads like Command HQ. Visual-only.
   ================================================ */
.pt-card{background:var(--surface-card);border-color:var(--surface-line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.pt-row,.pt-card2{background:var(--surface-card);border-color:var(--surface-line);border-radius:var(--r-md)}
.pt-btn{border-radius:var(--r-sm);transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease)}
.pt-btn-primary{box-shadow:var(--shadow-gold)}
.pt-btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(212,160,23,.30)}
.pt-btn:active{transform:translateY(1px)}
.pt-input{border-radius:var(--r-xs);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.pt-input:focus{box-shadow:0 0 0 2px rgba(212,160,23,.12)}
/* Status pills → canonical tokens */
.pt-pill.paid{background:var(--success-bg);color:var(--success)}
.pt-pill.up{background:var(--warning-bg);color:var(--gold)}
.pt-pill.due{background:var(--danger-bg);color:var(--danger)}
@media (prefers-reduced-motion:reduce){
  .pt-btn{transition:none}
  .pt-btn-primary:hover,.pt-btn:active{transform:none}
}

/* ================================================
   THE DRIVEWAY (docs/plans/the-driveway.md)
   Two blocks: an adaptive Right Now that owns the event, and uniform vehicle
   rows that own the record. Built from the tokens already here — same gold,
   same Barlow Condensed, same 12px card / 5px button radii. Recomposition,
   not a restyle.
   ================================================ */
.dw-greet{font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);margin:0 0 14px}

/* Right Now — one card, tone-coded by what it is asking of the customer. The
   left rule is the only place severity is expressed as colour, so an invoice
   that is merely available can never read as an alarm. */
.dw-now{background:var(--surface-card);border:1px solid var(--surface-line);border-left:3px solid var(--dark3);
  border-radius:var(--r-lg);padding:20px 18px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.dw-now.dw-tone-red{border-left-color:var(--danger);background:linear-gradient(180deg,var(--danger-bg) 0%,var(--surface-card) 46%)}
.dw-now.dw-tone-gold{border-left-color:var(--gold)}
.dw-now.dw-tone-green{border-left-color:var(--success)}
.dw-now.dw-tone-neutral{border-left-color:rgba(255,255,255,.22)}
.dw-now.dw-tone-quiet{border-left-color:var(--dark3);background:var(--dark2)}
.dw-hero-kicker{display:flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  font-family:var(--font-display);font-weight:700;color:var(--gray);margin-bottom:8px}
.dw-hero-kicker svg{width:14px;height:14px;flex-shrink:0}
.dw-hero-title{font-family:var(--font-display);font-weight:800;font-size:26px;line-height:1.15;letter-spacing:.02em;
  text-transform:uppercase;color:var(--white);margin:0}
.dw-tone-red .dw-hero-title{color:var(--danger)}
.dw-tone-gold .dw-hero-title{color:var(--gold)}
.dw-tone-green .dw-hero-title{color:var(--success)}
.dw-hero-sub{color:var(--gray);font-size:14px;line-height:1.5;margin-top:6px}
.dw-hero-detail{color:var(--gray);font-size:13px;margin-top:4px;opacity:.85}
.dw-stepper{margin:18px 0 4px}
.dw-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.dw-act{width:auto}
.dw-now .pt-wx{margin-top:12px}
/* All clear is deliberately understated — a quiet screen is the good outcome. */
.dw-tone-quiet .dw-hero-title{font-size:22px;color:var(--white);opacity:.92}

/* Queue — everything else that is pending, compact and in tier order. */
.dw-queue{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.dw-qrow{display:flex;align-items:center;gap:12px;background:var(--surface-card);border:1px solid var(--surface-line);
  border-left:3px solid var(--dark3);border-radius:var(--r-md);padding:12px 14px}
.dw-qrow.dw-tone-red{border-left-color:var(--danger)}
.dw-qrow.dw-tone-gold{border-left-color:var(--gold)}
.dw-qrow.dw-tone-green{border-left-color:var(--success)}
.dw-qrow-main{min-width:0;flex:1}
.dw-qrow-title{font-weight:700;font-size:14px;color:var(--white);line-height:1.3}
.dw-qrow-meta{color:var(--gray);font-size:12.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-qrow-act .pt-btn{width:auto;padding:8px 13px;font-size:12px}
.dw-more{display:block;margin:0 0 18px}

/* Your Vehicles — uniform rows, never the next visit. */
.dw-block-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 10px}
.dw-block-title{font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--white);margin:0}
.dw-veh{background:var(--surface-card);border:1px solid var(--surface-line);border-radius:var(--r-md);margin-bottom:8px;overflow:hidden}
.dw-veh.is-open{border-color:rgba(212,160,23,.35)}
.dw-veh-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;padding:13px 14px;cursor:pointer;color:inherit}
.dw-veh-ico{flex-shrink:0;width:34px;display:flex;align-items:center;justify-content:center;color:var(--gray)}
.dw-veh-ico svg{width:30px;height:auto}
.dw-veh-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.dw-veh-title{font-weight:700;font-size:14.5px;color:var(--white)}
.dw-veh-meta{color:var(--gray);font-size:12.5px}
/* "Due for a detail" (Phase 3) — a state of the record, not a call to action.
   Sits beside the Plan tag on the title line; warning-toned, never red, because
   a car being due is a nudge and not a problem. */
.dw-due{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;font-family:var(--font-display);font-weight:700;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;vertical-align:middle;color:var(--warning);background:rgba(240,212,136,.12);border:1px solid rgba(240,212,136,.34)}
.dw-due.is-lapsed{color:var(--danger);background:rgba(255,138,138,.1);border-color:rgba(255,138,138,.3)}
.dw-veh-chev{color:var(--gray);font-size:20px;line-height:1;transition:transform var(--dur) var(--ease)}
.dw-veh.is-open .dw-veh-chev{transform:rotate(90deg)}
.dw-veh-body{padding:2px 14px 14px;border-top:1px solid var(--surface-line)}
.dw-veh-body .pt-card-label{margin:12px 0 6px}
.dw-veh-body .pt-row{background:transparent;border:0;border-bottom:1px solid var(--surface-line);border-radius:0;padding:9px 0}
.dw-veh-notes{margin:10px 0 0;font-style:italic}
.dw-veh-tools{display:flex;align-items:center;gap:0;margin-top:12px}

/* Phase 2 — the timeline the vehicle row opens into. The plan and the next
   visit sit ABOVE the history: what happens next outranks what happened. */
.dw-plan{margin:12px 0 0;padding:10px 12px;border-radius:var(--r-sm);background:rgba(212,160,23,.08);border:1px solid rgba(212,160,23,.28)}
.dw-plan.is-paused{background:rgba(154,154,154,.08);border-color:var(--surface-line)}
.dw-plan-title{font-weight:700;font-size:13.5px;color:var(--white)}
.dw-plan-note{margin-top:5px;font-size:12.5px;color:var(--warning)}
.dw-veh-next{margin:10px 0 0;font-size:13.5px;font-weight:600;color:var(--white)}
.dw-veh-where{margin:4px 0 0;font-size:12.5px}
.dw-veh-more{margin:10px 0 0;font-size:12.5px}
.dw-veh-spend{float:right;font-weight:600;color:var(--gray);letter-spacing:0;text-transform:none}
.dw-visit{border-bottom:1px solid var(--surface-line);padding:9px 0}
.dw-visit:last-of-type{border-bottom:0}
/* "This figure covers the whole stop, not just this car." */
.dw-shared{color:var(--warning)}
.dw-visit-acts{display:flex;gap:14px;margin-top:6px}
/* A horizontal strip, not a grid: a phone screen shows two or three and the
   customer scrolls, rather than the drawer growing by a screenful per visit. */
.dw-shots{display:flex;gap:8px;overflow-x:auto;margin:8px 0 2px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.dw-shot{position:relative;flex:0 0 auto;display:block;width:88px;height:66px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--surface-line)}
.dw-shot img{width:100%;height:100%;object-fit:cover;display:block}
.dw-shot{padding:0;background:none;cursor:zoom-in}
.dw-shot-tag{position:absolute;left:0;bottom:0;padding:1px 5px;font-size:10px;letter-spacing:.04em;text-transform:uppercase;background:rgba(10,10,10,.72);color:var(--white)}

/* Photo lightbox (Phase 3) — stays inside the app. */
.pt-noscroll{overflow:hidden}
.dw-lb[hidden]{display:none}
.dw-lb{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;gap:6px;padding:16px;background:rgba(6,6,6,.94);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dw-lb-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.dw-lb-img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--r-md);background:var(--dark2)}
.dw-lb-cap{color:var(--gray);font-size:12.5px;text-align:center;letter-spacing:.02em}
.dw-lb-close{position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;border-radius:999px;background:rgba(26,26,26,.9);color:var(--white);font-size:26px;line-height:1;cursor:pointer}
.dw-lb-nav{flex:0 0 auto;width:40px;height:56px;border:0;border-radius:var(--r-sm);background:rgba(26,26,26,.72);color:var(--white);font-size:26px;line-height:1;cursor:pointer}
.dw-lb-nav[hidden]{display:none}
.dw-lb-close:hover,.dw-lb-nav:hover{background:var(--dark3);color:var(--gold)}
.dw-lb-close:focus-visible,.dw-lb-nav:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* On a phone the arrows would eat the photo's width — swipe covers it there. */
@media (max-width:520px){ .dw-lb-nav{display:none} }

/* Visits we can't attribute to a vehicle — a disclosure, not a section, so it
   never competes with the record it is an exception to. */
.dw-orphans{margin:14px 0 0;background:var(--surface-card);border:1px solid var(--surface-line);border-radius:var(--r-md);padding:10px 14px}
.dw-orphans summary{cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--gray)}
.dw-orphans summary:hover{color:var(--white)}
.dw-orphans-note{font-size:12.5px;margin:10px 0 4px}
.dw-orphans .pt-row{background:transparent;border:0;border-bottom:1px solid var(--surface-line);border-radius:0;padding:9px 0}

/* Account is a composite of four sections now — give them air so the stacked
   headings read as sections rather than one long form. */
#pt-account > div:not(:empty) + div:not(:empty){margin-top:34px;padding-top:26px;border-top:1px solid var(--surface-line)}

/* Sign-in recovery disclosure */
.pt-auth-help{margin-top:14px;text-align:left;font-size:12px;color:var(--gray)}
.pt-auth-help summary{cursor:pointer;color:var(--gold);font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-align:center}
.pt-auth-help p{margin:10px 0 0;line-height:1.55}
.pt-auth-help a{color:var(--gold)}

@media (max-width:520px){
  .dw-hero-title{font-size:22px}
  .dw-hero-actions .pt-btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){ .dw-veh-chev{transition:none} }