/* ============================================================================
   portal.css — shared design system for the DRIVER PORTAL and transactional
   flow (account, book, status, verify, card, card-auth, contract, payplan,
   extend, settlement, safety, connect-gig, inspect, survey, accident…).

   WHY THIS EXISTS: the marketing site has atrium.css; the portal had seventeen
   pages each carrying a private <style> — five greens, five border colors,
   five .btn implementations, three font regimes, four headers and seven pages
   with no header at all. A renter walking account → card → card-auth → safety
   changed typeface three times. This file is the portal's one source of truth,
   derived from atrium.css so the brand stays a single thing.

   Direction (Ben, 2026-08-24): LIGHT + PREMIUM — Tesla-clean, Avis-professional,
   with the component grammar of the Zevo screenshots (cards on a soft ground,
   list rows with verified badges, pill tabs, one button system) rendered light.

   Rules carried over from atrium.css: weights 400/500/600 (700 only for money),
   no gradient text, no emoji in UI chrome. One green. One border color.

   LOAD ORDER CONTRACT: link this BEFORE the page's residual <style>, so any
   page-specific layout the page still needs wins the cascade without !important.
   ========================================================================== */

:root{
  --ink:#171a20;            /* text + primary buttons — same as atrium.css */
  --body:#5c5e62;           /* secondary text — same as atrium.css */
  --faint:#8b8f94;
  --line:#e8eaec;           /* THE border color (was 5 different values) */
  --bg:#ffffff;
  --ground:#f6f7f8;         /* page ground behind cards */
  --accent:#1f8f6f;         /* THE brand green (was 5) — links, focus, accents */
  --ok:#12823b;             /* success/verified — checks, paid, active */
  --ok-soft:#e7f6ef;        /* success wash */
  --warn:#b45309;           /* amber text */
  --warn-soft:#fdf3e0;      /* amber wash */
  --err:#b91c1c;            /* error/red — failures, amounts due */
  --err-soft:#fdecec;       /* red wash */
  --radius:6px;             /* card radius — aligned with atrium.css (phase 6, 2026-08-30) */
  --radius-s:6px;           /* inputs, inner elements */
  --btn-radius:4px;         /* buttons — near-square, same as the marketing site */
  --pill:40px;              /* pills survive ONLY on genuine chips: tabs, badges, status */
  --hdr-h:56px;
  --shadow:0 1px 2px rgba(23,26,32,.04),0 4px 16px rgba(23,26,32,.06);
  --ease:cubic-bezier(.22,.61,.25,1);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);font-weight:400;color:var(--ink);background:var(--ground);
     line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:#d9efe7}
button{font-family:inherit}

h1,h2,h3{color:var(--ink);letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(1.5rem,4vw,2rem);font-weight:600;line-height:1.15}
h2{font-size:1.2rem;font-weight:600}
h3{font-size:1rem;font-weight:600}
.p-eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.p-sub{color:var(--body);font-size:.95rem}
.p-small{font-size:.83rem;color:var(--faint)}
.p-money{font-variant-numeric:tabular-nums}

/* ---- page scaffold ----------------------------------------------------- */
.p-main{width:min(880px,100%);margin:0 auto;padding:26px clamp(14px,4vw,28px) 70px;
        display:flex;flex-direction:column;gap:18px}
.p-main--narrow{width:min(640px,100%)}

/* ---- header: ONE portal header for every page -------------------------- */
/* Replaces .ah-header, the dark .top, account's .hdr and the seven headerless
   pages. Slim, white, sticky — the renter always knows whose page they're on
   and how to get back to their portal. */
.p-hdr{position:sticky;top:0;z-index:50;height:var(--hdr-h);background:rgba(255,255,255,.94);
       backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
       border-bottom:1px solid var(--line);display:flex;align-items:center;
       justify-content:space-between;gap:12px;padding:0 clamp(14px,4vw,28px)}
.p-hdr .p-logo{font-size:1rem;font-weight:600;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.p-hdr .p-logo b{font-weight:600;color:var(--accent)}
.p-hdr .p-tag{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
       color:var(--faint);border:1px solid var(--line);border-radius:6px;padding:3px 8px;white-space:nowrap}
.p-hdr .p-hdr-right{display:flex;align-items:center;gap:14px;font-size:.86rem;font-weight:500}
.p-hdr .p-hdr-right a{color:var(--body)}
.p-hdr .p-hdr-right a:hover{color:var(--ink)}
@media(max-width:480px){.p-hdr .p-hide-sm{display:none}}

/* ---- cards ------------------------------------------------------------- */
.p-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
        box-shadow:var(--shadow);padding:clamp(16px,3vw,24px)}
.p-card--flush{padding:0;overflow:hidden}   /* for row lists and tables */
.p-seclabel{font-size:.8rem;font-weight:600;color:var(--body);margin:8px 2px -8px}

/* dark hero card (account.html progress hero keeps its dark ground —
   one deliberate dark moment on a light page, like Zevo's header band) */
.p-hero{background:var(--ink);color:#fff;border-radius:var(--radius);
        padding:clamp(20px,4vw,30px);box-shadow:var(--shadow)}
.p-hero h1{color:#fff}
.p-hero .p-eyebrow{color:rgba(255,255,255,.55)}
.p-hero p{color:rgba(255,255,255,.78);font-size:.95rem}

/* ---- list rows (Zevo profile-row grammar) ------------------------------ */
.p-row{display:flex;align-items:center;gap:14px;padding:14px clamp(14px,3vw,20px);
       border-bottom:1px solid var(--line);background:var(--bg)}
.p-row:last-child{border-bottom:0}
.p-row .p-ic{flex:none;width:36px;height:36px;border-radius:10px;background:var(--ground);
       display:flex;align-items:center;justify-content:center;color:var(--ink)}
.p-row .p-ic svg{width:20px;height:20px}
.p-row .p-bd{flex:1;min-width:0}
.p-row .p-t{display:block;font-weight:600;font-size:.95rem;color:var(--ink)}
.p-row .p-s{display:block;font-size:.83rem;color:var(--body);margin-top:1px}
.p-row .p-rt{flex:none;display:flex;align-items:center;gap:10px}

/* ---- verified badge (the Zevo green check) ----------------------------- */
.p-badge{flex:none;width:22px;height:22px;border-radius:50%;background:var(--ok);color:#fff;
         display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.p-badge svg{width:12px;height:12px}
.p-badge--off{background:var(--ground);color:var(--faint);border:1px solid var(--line)}
.p-badge--flag{background:var(--warn-soft);color:var(--warn);border:1px solid #f0d3b0}

/* ---- ONE button system ------------------------------------------------- */
.p-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
       padding:12px 26px;border-radius:var(--btn-radius);font-size:.9rem;font-weight:500;
       cursor:pointer;border:1px solid transparent;background:var(--ink);color:#fff;
       transition:transform .2s var(--ease),box-shadow .2s,background .2s;text-align:center}
.p-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(23,26,32,.18)}
.p-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.p-btn--ghost{background:var(--bg);color:var(--ink);border-color:var(--line)}
.p-btn--ghost:hover{box-shadow:0 4px 14px rgba(23,26,32,.08)}
.p-btn--full{width:100%}
.p-btn--sm{padding:8px 16px;font-size:.83rem}
.p-btn--danger{background:var(--err)}
@media(prefers-reduced-motion:reduce){.p-btn:hover{transform:none}}

/* ---- pill tabs (Zevo's Billing subnav) --------------------------------- */
.p-pilltabs{display:flex;gap:6px;flex-wrap:wrap}
.p-pilltabs button,.p-pilltabs a{border:1px solid transparent;background:transparent;
       color:var(--body);font-size:.86rem;font-weight:500;padding:8px 16px;
       border-radius:var(--pill);cursor:pointer;transition:background .15s,color .15s}
.p-pilltabs .on{background:var(--ink);color:#fff}
.p-pilltabs button:not(.on):hover,.p-pilltabs a:not(.on):hover{background:rgba(23,26,32,.06);color:var(--ink)}

/* ---- chips ------------------------------------------------------------- */
.p-chip{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;
        padding:4px 12px;border-radius:var(--pill);white-space:nowrap}
.p-chip--ok{background:var(--ok-soft);color:var(--ok)}
.p-chip--err{background:var(--err-soft);color:var(--err)}
.p-chip--warn{background:var(--warn-soft);color:var(--warn)}
.p-chip--line{border:1px solid var(--line);color:var(--body);font-weight:500}

/* ---- money summary pair (Zevo's Due / Wallet cards) -------------------- */
.p-moneypair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.p-moneypair{grid-template-columns:1fr}}
.p-due,.p-bal{border-radius:var(--radius-s);padding:16px 18px;text-align:center}
.p-due{background:var(--err-soft)}
.p-bal{background:var(--ok-soft)}
.p-due .p-eyebrow{color:#a05252}
.p-bal .p-eyebrow{color:#4c8a67}
.p-due strong,.p-bal strong{display:block;font-size:1.6rem;font-weight:700;letter-spacing:-.02em;
        font-variant-numeric:tabular-nums;margin-top:2px}
.p-due strong{color:var(--err)}
.p-bal strong{color:var(--ok)}

/* ---- trust note (the money-moment microcopy) --------------------------- */
.p-note{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--body);
        padding:12px 14px;background:var(--ground);border-radius:var(--radius-s)}
.p-note svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--accent)}

/* ---- warning box (card-name warning, ACH banners) ---------------------- */
.p-warnbox{display:flex;gap:12px;align-items:flex-start;background:var(--warn-soft);
        border:1px solid #f0d3b0;border-radius:var(--radius-s);padding:14px 16px;
        font-size:.88rem;color:#7a4310}
.p-warnbox b{color:#7a4310}
.p-errbox{display:flex;gap:12px;align-items:flex-start;background:var(--err-soft);
        border:1px solid #efc4c4;border-radius:var(--radius-s);padding:14px 16px;
        font-size:.88rem;color:#7c1d1d}
.p-okbox{display:flex;gap:12px;align-items:flex-start;background:var(--ok-soft);
        border:1px solid #bfe3cd;border-radius:var(--radius-s);padding:14px 16px;
        font-size:.88rem;color:#134e33}

/* ---- forms ------------------------------------------------------------- */
.p-label{display:block;font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:7px}
.p-input,.p-select,.p-textarea{width:100%;padding:12px 14px;border:1px solid var(--line);
        border-radius:var(--radius-s);font:inherit;font-size:.95rem;background:var(--bg);
        color:var(--ink);transition:border-color .15s,box-shadow .15s}
.p-input:focus,.p-select:focus,.p-textarea:focus{outline:none;border-color:var(--accent);
        box-shadow:0 0 0 3px rgba(31,143,111,.15)}
.p-field{margin-bottom:16px}
.p-check{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--body);
        padding:10px 0;cursor:pointer}
.p-check input{margin-top:3px;accent-color:var(--accent);width:16px;height:16px;flex:none}

/* ---- progress ---------------------------------------------------------- */
.p-progress{height:8px;border-radius:6px;background:rgba(255,255,255,.18);overflow:hidden}
.p-progress i{display:block;height:100%;border-radius:6px;background:#7be0c0;
        transition:width .6s var(--ease)}
.p-card .p-progress{background:var(--line)}
.p-card .p-progress i{background:var(--accent)}

/* ---- steps / timeline (status.html rail) ------------------------------- */
.p-track{position:relative;padding-left:30px}
.p-track::before{content:"";position:absolute;left:10px;top:8px;bottom:8px;width:2px;
        background:var(--line);border-radius:2px}
.p-tstep{position:relative;padding:10px 0 18px}
.p-tstep .p-dot{position:absolute;left:-30px;top:12px;width:22px;height:22px;border-radius:50%;
        background:var(--bg);border:2px solid var(--line);display:flex;align-items:center;
        justify-content:center;color:#fff}
.p-tstep.done .p-dot{background:var(--ok);border-color:var(--ok)}
.p-tstep.done .p-dot::after{content:"";width:6px;height:10px;border-right:2px solid #fff;
        border-bottom:2px solid #fff;transform:rotate(45deg);margin-top:-3px}
.p-tstep.now .p-dot{border-color:var(--accent);box-shadow:0 0 0 4px rgba(31,143,111,.15)}

/* ---- tables ------------------------------------------------------------ */
.p-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-s)}
.p-tablewrap table{border-collapse:collapse;width:100%;font-size:.88rem;min-width:420px}
.p-tablewrap td,.p-tablewrap th{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left}
.p-tablewrap th{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
        color:var(--faint);background:var(--ground)}
.p-tablewrap tr:last-child td{border-bottom:0}
.p-tablewrap td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---- signature canvas (contract/payplan/extend/settlement) ------------- */
/* The canvases were fixed 170px with no responsive rules; on a narrow phone
   the box overflowed its card. Width tracks the container; height stays in a
   band tall enough to sign in. touch-action:none is set by the pages' JS. */
.p-sigwrap{border:1.5px dashed var(--line);border-radius:var(--radius-s);background:var(--bg);
        overflow:hidden}
.p-sigwrap canvas{display:block;width:100%;height:clamp(150px,24vh,190px)}

/* ---- car cards (book.html) --------------------------------------------- */
.p-carcard{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);
        overflow:hidden;cursor:pointer;transition:box-shadow .25s var(--ease),
        transform .25s var(--ease),border-color .2s;display:flex;flex-direction:column}
.p-carcard:hover{box-shadow:0 10px 30px rgba(23,26,32,.10);transform:translateY(-2px)}
.p-carcard.sel{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.p-carcard img{width:100%;aspect-ratio:1200/560;object-fit:cover}
.p-carcard .p-carbody{padding:14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
@media(prefers-reduced-motion:reduce){.p-carcard:hover{transform:none}}

/* ---- sign-in screen (account.html #authScreen) ------------------------- */
/* The portal's front door was a bare card on a grey field — the least
   confidence-inspiring screen on the site, and the first one a driver sees.
   Full-bleed operations photograph on the left, the sign-in card on the
   right at a readable measure; on a phone the photo becomes a shallow band
   with a dark wash so white type on it stays legible. The card's contents
   are untouched — same ids, same inputs, same handlers. */
.p-auth{display:grid;grid-template-columns:1fr minmax(360px,440px);
        min-height:calc(100vh - var(--hdr-h));background:var(--ground)}
.p-auth-media{position:relative;overflow:hidden;background:var(--ink)}
.p-auth-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-auth-media::after{content:"";position:absolute;inset:0;
        background:linear-gradient(90deg,rgba(23,26,32,.30) 0%,rgba(23,26,32,0) 55%)}
.p-auth-card{display:flex;flex-direction:column;justify-content:center;
        background:var(--bg);border-left:1px solid var(--line);
        padding:clamp(24px,4vw,44px) clamp(20px,3.4vw,36px)}
.p-auth-brand{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
        color:var(--faint);margin-bottom:22px}
.p-auth-brand span{color:var(--accent)}
/* .center is account.html's historical login wrapper (max-width 430, 9vh top
   margin, centred). Inside this card the column IS the measure, so neutralise
   the margin rather than fight it from the page. */
.p-auth-card .center{margin:0;max-width:none;width:100%}
/* The three states already carry their own surfaces; a card border inside the
   card would double the frame. */
.p-auth-card .card{border:0;box-shadow:none;padding:0;margin:0;background:none}
@media(max-width:860px){
  .p-auth{grid-template-columns:1fr;min-height:0}
  .p-auth-media{height:34vh;min-height:190px}
  .p-auth-media::after{background:linear-gradient(180deg,rgba(23,26,32,.15) 0%,rgba(23,26,32,.55) 100%)}
  .p-auth-card{border-left:0;border-top:1px solid var(--line);justify-content:flex-start}
}

/* ---- footer ------------------------------------------------------------ */
.p-foot{text-align:center;font-size:.78rem;color:var(--faint);padding:26px 16px 40px;line-height:1.7}
.p-foot a{color:var(--body)}

[hidden]{display:none!important}