/* ============================================================================
   portal-2026.css — the ChatGPT draft's portal, over rounds two to six
   ----------------------------------------------------------------------------
   Loaded LAST. Nothing above it is deleted: every module, data attribute and
   behaviour of rounds two to six is untouched; this file re-themes them
   (tokens), lays the signed-in view out as the draft's sidebar + content on a
   desktop (the tab bar stays along the bottom of a phone — round four's thumb
   rule), splits the sign-in screen into film + form, and enforces the
   readability rule: no text under 11px, every text colour AA on its ground.
   ========================================================================== */

/* ---- tokens: the draft's palette with AutoPal's brass ------------------------ */
:root {
  --ink: #17211f;
  --bone: #f5f4ef;
  --surface: #fcfcf8;
  --surface-alt: #f3f4ee;
  --surface-dim: #eceee6;
  --surface-dark: #17211f;
  --skeleton: #e1e3db;
  --skeleton-hi: #eceee6;
  --line: #ddded7;
  --line-strong: #c8ccc2;
  --line-dim: #d3d6cd;
  --text: #17211f;
  --text-body: #2b332f;
  --text-mute: #555c57;   /* 6.2:1 on paper */
  --text-faint: #5c635e;  /* was #8A867D (3.4:1 on bone): the "too faint" grey */
  --text-ghost: #646b65;  /* was #A6A196: used for real text too (folder counts, fine print) */
  --brass-deep: #7a5a20;  /* brass as small text: 5.8:1 */
  --green: #2f6b4a;
  --warn: #7f5416;
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius-card: 5px;
  --radius-row: 4px;
  --radius-field: 3px;
  --radius-btn: 4px;
  --radius-chip: 3px;
  --shadow-card: none;
}
body { background: var(--bone); color: var(--text-body); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }

/* ---- readability floor: nothing under 11px (measured list in REPORT.md) ------- */
.tax-cell .k, .thumb-badge, .dropzone .constraints, .garage-facts .k, .pay-fine-line,
.folder-doc .chip-missing, .ring-of, .quick-s, .doc-tile .chip, .me-email-label,
.mono-label, .chip, .field label, .pw-toggle, .vehicle-media .ph,
.honest-number .basis, .delivery-contact .links a, .timeline-doc-main .meta, .record-main .meta,
.pay-total .k, .link-label, .dash-d, .doc-tile-meta,
.demo-hint, .stage .d, .auth-divider, .timeline-meta .mono, .nc-pk-count, .nc-car-brand,
.folder-open-title .spec, .folder-empty, .folder-count, .viewer-meta { font-size: 11.5px !important; }
.tab-count { font-size: 11px !important; }
.mono-label { letter-spacing: .1em; font-weight: 600; color: var(--text-faint); }
section.module h2 { font-size: 20px !important; }

/* ---- type ------------------------------------------------------------------ */
h1, h2, h3, .welcome h1, section.module h2, .tab-title { font-family: var(--font-display); letter-spacing: -.035em; }
.welcome h1 { font-size: 32px; font-weight: 500; line-height: 1.1; color: var(--text); }
.status-line { font-size: 15px; color: var(--text-mute); margin-top: 8px; }
.tab-eyebrow, .side-eyebrow { font-size: 12px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-deep); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tab-eyebrow::before, .side-eyebrow::before { content: ''; width: 20px; height: 1px; background: currentColor; }
.tab-welcome h1 { margin: 0; }

/* ---- buttons: the draft's flat ink buttons ------------------------------------ */
.btn { border-radius: var(--radius-btn); font-family: var(--font-ui); font-weight: 600; transition: background .25s, transform .25s, box-shadow .25s; }
.btn-primary, .btn-dark { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.btn-primary:hover, .btn-dark:hover { background: #2e423a; transform: translateY(-1px); box-shadow: 0 8px 22px #101d1814; }
.btn-ghost { background: transparent; border: 1px solid var(--line-strong); color: var(--text); }
.btn-ghost:hover { background: #e8ece6; }
.btn-link { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- cards and widgets ------------------------------------------------------- */
.card, .widget, section.module.widget, .garage-card, .learn-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: none; }
.widget { padding: 24px; }
.widget-head { gap: 12px; margin-bottom: 16px; }
.widget-ico { color: var(--brass-deep); background: transparent !important; border: 1px solid var(--line); border-radius: 50%; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
section.module .widget-head h2 { font-size: 19px !important; font-weight: 500; letter-spacing: -.03em; flex: 1; margin: 0; }
.widget-tag { margin-left: auto; }
.widget-lede { font-size: 15px; color: var(--text-mute); line-height: 1.6; margin: 0 0 16px; }
.records-none { font-size: 15px; color: var(--text-mute); }
.chip { border-radius: var(--radius-chip); }

/* ---- header ------------------------------------------------------------------ */
.dash-header { background: #f5f4effa; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); padding: 12px 20px; position: sticky; top: 0; z-index: 25; }
.dash-header .logo { width: 118px; }
.dash-header .site-links a { color: var(--text); font-size: 14px; font-weight: 550; }
.avatar { background: #dce3d5; border-color: transparent; color: var(--text); font-size: 12px; width: 38px; height: 38px; }
.btn-signout { border-radius: var(--radius-btn); background: transparent; color: var(--text); font-size: 13px; border-color: var(--line-strong); }

/* ---- the sidebar (desktop) / the bottom bar (phone) ---------------------------- */
.side-eyebrow, .side-bottom { display: none; }
.portal-tabs { grid-template-columns: repeat(5, 1fr); background: #f5f4effa; }
.portal-tab { font-size: 11.5px; color: var(--text-mute); }
.portal-tab.is-active { color: var(--text); }
.portal-tab.is-active::before { background: var(--brass); }
@media (max-width: 879px) {
  .portal-tab { min-height: 56px; padding: 0 2px; }
  .portal-tab span { font-size: 11px; }
}
@media (min-width: 880px) {
  #view-dashboard:not([hidden]) {
    display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: auto 1fr;
    grid-template-areas: "head head" "side main"; min-height: 100vh;
  }
  #view-dashboard > .dash-header { grid-area: head; }
  #view-dashboard > .portal-side { grid-area: side; background: #e9ece3; border-right: 1px solid var(--line); }
  #view-dashboard > .dash-wrap { grid-area: main; }
  .portal-side { position: relative; }
  .portal-side > * { position: sticky; }
  .side-eyebrow { display: flex; padding: 30px 24px 0; top: 70px; }
  .portal-tabs {
    position: sticky !important; top: 110px !important; z-index: 2;
    display: flex !important; flex-direction: column; gap: 2px;
    padding: 6px 14px !important; background: transparent !important; border: 0 !important; backdrop-filter: none;
  }
  .portal-tab { flex-direction: row; justify-content: flex-start; min-height: 46px; padding: 0 14px !important; gap: 12px; font-size: 15px; border-radius: 3px !important; color: var(--text-body); }
  .portal-tab svg { width: 18px; height: 18px; }
  .portal-tab:hover { background: #dfe5d8; }
  .portal-tab.is-active { background: var(--sage-active, #d7dfd1); color: var(--text); }
  .portal-tab.is-active::before { top: 10px; bottom: 10px; left: 0; right: auto; width: 3px; height: auto; }
  .tab-count { margin-left: auto !important; }
  .side-bottom { display: flex; flex-direction: column; gap: 12px; margin: 26px 24px 0; padding-top: 20px; border-top: 1px solid #cdd5c6; font-size: 14px; font-weight: 600; top: 420px; }
  .side-bottom a { color: var(--text); text-decoration: none; }
  .side-bottom a:hover { text-decoration: underline; }
  .dash-wrap { max-width: 1180px !important; width: 100%; margin: 0; padding: 34px 44px 60px !important; }
  #view-dashboard .dash-wrap { padding-bottom: 60px !important; }

  /* the Dashboard: the draft's two columns (1.5fr / 1fr) */
  #panel-dashboard:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; grid-auto-flow: row dense; }
  #panel-dashboard > .welcome, #panel-dashboard > #dash-learn { grid-column: 1 / -1; }
  #panel-dashboard > #dash-glance { grid-column: 1; grid-row: span 2; align-self: stretch; } /* beside quick actions + requests; the two lists then pair up below */
  #panel-dashboard > #dash-quick, #panel-dashboard > #module-needs { grid-column: 2; }
  #panel-dashboard > #dashboard-body, #panel-dashboard #dashboard-body > .dash-pair { display: contents; }
  #panel-dashboard #dashboard-body > .dash-quiet { grid-column: 2; }
  #panel-dashboard #module-recent { grid-column: 1; }
  #panel-dashboard #module-messages { grid-column: 2; }
  #panel-dashboard #module-info { grid-column: 1 / -1; }
  #panel-dashboard > #dash-glance > *, #panel-dashboard > #dash-quick > * { height: 100%; }
}
#panel-payments:not([hidden]), #panel-support:not([hidden]) { display: flex; flex-direction: column; gap: 18px; }
#payments-body, .support-grid { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 880px) {
  #payments-body, .support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
  #panel-dashboard .quick-grid { grid-template-columns: 1fr 1fr !important; }
}
.support-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.support-fine { font-size: 14px; color: var(--text-mute); }
.pay-lenders { display: flex; flex-direction: column; }
.pay-lender { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--line); }
.pay-lender-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pay-lender .dash-t { font-weight: 600; color: var(--text); }
.pay-lender .dash-d { color: var(--text-mute); font-size: 13px !important; }

/* ---- the glance: the draft's lease widget ---------------------------------------- */
.glance .name { font-size: 24px; letter-spacing: -.04em; }
.ring-done { stroke: var(--brass); }
.quick-tile { background: #f1f3ec; border: 1px solid var(--line); border-radius: 3px; }
.quick-tile:hover { background: #e8ece6; }
.quick-ico { color: var(--brass-deep); }

/* ---- requests (the draft's request widget: a coloured top rule, a status) ---------- */
#module-needs { border-top: 3px solid #b58b51; }
#module-needs:has(.need-slot.is-done):not(:has(.need-slot:not(.is-done))) { border-top-color: #93a084; }
.need-slot { border: 1px solid var(--line); border-radius: var(--radius-row); background: transparent; }
.need-slot .d[data-received="filing"] { color: var(--warn); }
.need-actions a.need-action { text-decoration: none; display: inline-flex; align-items: center; }

/* ---- documents ----------------------------------------------------------------- */
.folder-tile { border-radius: var(--radius-card); }

/* ---- modal + toast -------------------------------------------------------------- */
.modal { border-radius: 8px; background: var(--bone); }
.toast { background: var(--ink); color: #fff; border-radius: 4px; }

/* ---- sign in: the draft's split entry — our film left, the form right ------------- */
.login-view { background: var(--bone) !important; display: flex; flex-direction: column; }
.login-bg { position: relative !important; inset: auto !important; height: 260px; flex: none; overflow: hidden; background: #142320; }
.login-video { position: absolute; inset: 0; }
.login-wash { background: linear-gradient(0deg, #0c1c18ee, #0c1c1830 70%) !important; }
.login-caption { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2; color: #fff; }
.login-eyebrow { font-size: 12px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: #e3d3b4; }
.login-caption-t { font: 500 24px/1.2 var(--font-display); letter-spacing: -.03em; margin: 10px 0 0; max-width: 420px; }
.login-main { position: relative; z-index: 1; flex: 1; padding: 34px 20px 50px !important; justify-content: flex-start !important; }
.login-main > .logo { content: url('/assets/logo-autopal-800.png'); width: 190px !important; filter: none !important; }
/* the card turns light: its rules read --bone/--on-dark as "text on the card" */
.auth-card {
  --bone: #17211f; --on-dark: #17211f; --surface-dark: #fcfcf8; --brass-bright: #7a5a20; --warn-on-dark: #7f5416;
  background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important;
  padding: 0 !important; max-width: 400px !important; color: var(--ink);
}
.auth-card h1 { font: 500 40px/1.1 var(--font-display) !important; letter-spacing: -.045em; color: var(--ink); }
.auth-tab { color: #555c57 !important; font-size: 14px !important; }
.auth-tab[aria-selected="true"] { color: var(--ink) !important; border-bottom-color: var(--brass) !important; }
.auth-card .field label { color: var(--ink) !important; }
.auth-card .field input { background: #f9f9f4 !important; border: 1px solid #c9cec1 !important; color: var(--ink) !important; font-size: 15px; height: 48px; }
.auth-card .field input::placeholder { color: #6b716d !important; }
.auth-card .pw-toggle { color: #555c57 !important; }
.auth-card .btn-primary { background: var(--ink) !important; color: #fff !important; min-height: 50px; }
.auth-card .btn-alt { border-color: #c9cec1 !important; border-radius: 3px; color: var(--ink); font-size: 14px; min-height: 46px; }
.auth-card .btn-alt:hover { background: #e8ece6; }
.auth-card .auth-divider { color: #555c57; }
.auth-card .auth-foot, .auth-card .auth-explain { color: #555c57 !important; }
.auth-card .form-alert { color: #5e3f10; }
.auth-card .form-alert.info { color: #3d4541; }
.login-back a { color: var(--ink) !important; text-decoration: underline; }
@media (min-width: 880px) {
  .login-view:not([hidden]) { display: grid !important; grid-template-columns: 1fr 1fr; min-height: 100vh; }
  .login-bg { height: auto; min-height: 100vh; }
  .login-caption { left: 55px; right: 45px; bottom: 65px; }
  .login-caption-t { font-size: 40px; }
  .login-main { justify-content: center !important; padding: 60px 64px !important; }
}
/* Adam 10/16: full-width film, a touch darker; sign-in floats in a rounded card on the right; caption pinned in view at any zoom */
@media (min-width: 700px) {
  .login-view:not([hidden]) { display: block !important; min-height: 100vh; }
  .login-bg { position: fixed !important; inset: 0 !important; height: 100vh !important; min-height: 0; z-index: 0; }
  .login-wash { background: linear-gradient(0deg, #0c1c18d0, #0c1c1866 55%, #0c1c1855) !important; }
  .login-caption { position: fixed; left: clamp(24px, 4vw, 64px); right: auto; bottom: clamp(24px, 6vh, 72px); max-width: min(46vw, 560px); }
  .login-caption-t { font-size: clamp(26px, 3.2vw, 44px); }
  .login-main { position: relative; z-index: 2; margin: 0 clamp(24px, 5vw, 96px) 0 auto; width: min(460px, 44vw); min-height: 100vh; display: flex; flex-direction: column; justify-content: center !important; padding: 24px 0 !important; box-sizing: border-box; }
  .login-main > .logo, .login-main > .auth-card, .login-main > .login-back { background: #f6f5f0; }
  .login-main > .logo { box-sizing: content-box; width: 150px !important; padding: 24px calc(50% - 75px) 4px; border-radius: 16px 16px 0 0; display: block; }
  .login-main > .auth-card { max-width: none !important; padding: 8px 36px 12px !important; }
  .login-main > .login-back { padding: 4px 36px 22px; border-radius: 0 0 16px 16px; box-shadow: 0 24px 60px #0006; }
  .login-main > .logo { box-shadow: 0 -8px 60px #0003; }
  .auth-card h1 { font-size: clamp(28px, 3vw, 40px) !important; margin: 4px 0 8px !important; }
  .auth-card .btn-alt { min-height: 42px; }
}
/* Adam 10/16: the whole sign-in card stays pinned in view on desktop; tightens on short screens instead of scrolling */
@media (min-width: 700px) {
  .login-main { position: sticky !important; top: 0; height: 100vh; height: 100dvh; min-height: 0 !important; overflow-y: auto; padding: clamp(8px, 2vh, 24px) 0 !important; }
  .login-main > .logo { padding-top: clamp(10px, 2.4vh, 24px); }
  .auth-card h1 { font-size: clamp(24px, 3.6vh, 40px) !important; margin: 2px 0 clamp(4px, 1vh, 8px) !important; }
  .auth-card .field input { height: clamp(40px, 5vh, 48px); }
  .auth-card .btn-primary { min-height: clamp(42px, 5vh, 50px); }
  .auth-card .btn-alt { min-height: clamp(36px, 4.4vh, 42px); }
}
/* Adam 10/16 (2): ONE solid card behind logo, form and back link — no seams, no see-through middle */
@media (min-width: 700px) {
  .login-main { position: fixed !important; top: 50% !important; right: clamp(24px, 5vw, 96px); transform: translateY(-50%); margin: 0 !important; height: auto !important; max-height: calc(100dvh - 32px); overflow-y: auto; background: #f6f5f0 !important; border-radius: 16px; box-shadow: 0 24px 60px #0006; padding: 0 0 8px !important; }
  .login-main > .logo, .login-main > .auth-card, .login-main > .login-back { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; border: 0 !important; backdrop-filter: none !important; }
  .login-main > .login-back { width: auto !important; margin: 0 !important; text-align: center; }
}
/* Adam 10/16 (3): fit the whole card at 100% on laptop heights: compact spacing, then scale down by screen height */
@media (min-width: 700px) {
  .login-main { overflow: visible !important; max-height: none !important; padding: 0 0 4px !important; }
  .login-main > .logo { width: 120px !important; padding: 18px calc(50% - 60px) 0 !important; }
  .login-main > .auth-card { padding: 4px 32px 6px !important; }
  .auth-card h1 { font-size: 30px !important; margin: 4px 0 6px !important; }
  .auth-card .field { margin-bottom: 10px; }
  .auth-card .field input { height: 42px !important; }
  .auth-card .btn-primary { min-height: 44px !important; }
  .auth-card .btn-alt { min-height: 38px !important; margin-top: 6px; }
  .auth-card .auth-divider { margin: 10px 0 !important; }
  .login-main > .login-back { padding: 2px 32px 14px !important; }
}
/* Adam 10/16 (4): bigger centered logo, more breathing room above */
@media (min-width: 700px) { .login-main > .logo { width: 200px !important; padding: 30px calc(50% - 100px) 6px !important; } }
/* the background film's pause control (js/motion.js), over the film's top-left corner */
.login-view { position: relative; }
.login-view .motion-toggle { position: absolute; top: 14px; left: 14px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: #0b1a1d99; color: #fff; border: 1px solid #ffffff60; border-radius: 6px; font: 600 13px var(--font-ui); cursor: pointer; backdrop-filter: blur(12px); }
.login-view .motion-toggle[hidden] { display: none; }
.login-view .motion-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.login-view .motion-toggle .motion-icon { font-size: 11px; letter-spacing: -1px; }
@media (prefers-reduced-motion: reduce) {
  .login-bg { background: #142320 url('../assets/login-poster.jpg') center / cover no-repeat !important; }
}

/* the tab headings (Your garage, Your documents, My info): the draft's display type, not the old mono label */
section.module .tab-head h2, .tab-title { text-transform: none !important; letter-spacing: -.04em !important; font: 500 32px/1.15 var(--font-display) !important; color: var(--text) !important; }