/* ============================================================================
   AutoPal 2026 redesign — CHROME (palette, type, header, footer, buttons)
   ----------------------------------------------------------------------------
   Ported from the ChatGPT Sites draft (autopal-reimagined, captured 10/15) with
   AutoPal's brass folded in. Every page loads this file; the redesigned pages
   add css/redesign.css. The credit application keeps its own form styles and
   takes only this file, which is why every class here is rd- prefixed.

   Readability (Adam 10/15): no text below 11px, and every text colour on its
   ground meets WCAG AA (4.5:1). Measured pairs are listed in REPORT.md. The
   draft's muted grey (#6a716c) sat at 4.5:1 on paper and under it on the
   cards, its bronze eyebrows at 3.3:1, its step labels at 2.9:1.
   ========================================================================== */
:root {
  --rd-ink: #17211f;
  --rd-paper: #f5f4ef;
  --rd-paper-alt: #eeeee8;
  --rd-card: #fcfcf8;
  --rd-white: #fff;
  --rd-muted: #555c57;        /* 6.2:1 on paper, 5.9:1 on paper-alt, 6.7:1 on cards */
  --rd-line: #ddded7;
  --rd-line-strong: #c8ccc2;
  --rd-sage: #e8ece6;
  --rd-sage-deep: #d7dfd1;
  --rd-brass: #B6883C;        /* AutoPal brass: fills, rules, icons, large type only */
  --rd-brass-text: #7a5a20;   /* brass for small text on light: 5.8:1 */
  --rd-sand: #dcc6a0;         /* brass on dark grounds */
  --rd-dark: #111a18;
  --rd-dark-muted: #a9b5ad;   /* 8.4:1 on the footer */
  --rd-green: #3F7D5B;
  --rd-warn: #855A18;
  --rd-radius: 4px;
  --rd-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rd-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rd-shell: min(1510px, calc(100% - 112px));
}

/* The credit application's own stylesheet reads the Ink & Brass tokens; point
   its type and ground at the new theme so it sits inside the new chrome. */
body.rd-theme {
  --font-display: var(--rd-display);
  --font-ui: var(--rd-font);
  --bone: var(--rd-paper);
  /* the form's faint greys, raised to AA (the readability item) */
  --text-mute: #555c57;
  --text-faint: #5c635e;
  --text-ghost: #636a64;
}

.rd-skip { position: fixed; top: -100px; left: 20px; z-index: 100; background: #fff; color: var(--rd-ink); padding: 10px 20px; font: 600 14px var(--rd-font); }
.rd-skip:focus { top: 15px; }

/* ---- logo: the real AutoPal mark, light and dark variants ---------------- */
.rd-logo { display: inline-flex; align-items: center; line-height: 0; }
.rd-logo img { height: 34px; width: auto; display: block; }
.rd-logo .on-dark { display: none; }

/* ---- header ------------------------------------------------------------- */
.rd-header { position: relative; z-index: 30; color: var(--rd-ink); background: var(--rd-paper); border-bottom: 1px solid var(--rd-line); font-family: var(--rd-font); transition: background .3s, color .3s; }
.rd-header-inner { width: var(--rd-shell); margin: auto; height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.rd-nav { display: flex; gap: 34px; align-items: center; font-size: 14px; font-weight: 550; }
.rd-nav a { color: inherit; text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.rd-nav a:hover, .rd-nav a[aria-current="page"] { border-bottom-color: currentColor; }
.rd-header-right { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.rd-portal-link { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; min-width: 44px; color: inherit; text-decoration: none; font-weight: 550; }
.rd-portal-link .hp-glyph { width: 18px; height: 18px; }
.rd-portal-link .hp-initial { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--rd-brass); color: #14100A; font: 700 12px var(--rd-font); }
.rd-portal-link .hp-initial[hidden] { display: none; }
.rd-menu-toggle { display: none; border: 0; background: none; color: inherit; font-size: 26px; line-height: 1; padding: 8px; cursor: pointer; }

/* home: the header floats over the hero until the page scrolls */
.rd-home .rd-header { position: absolute; top: 0; left: 0; width: 100%; color: #fff; background: transparent; border-bottom-color: #ffffff26; }
.rd-home .rd-header .rd-logo .on-dark { display: block; }
.rd-home .rd-header .rd-logo .on-light { display: none; }
.rd-home .rd-header .rd-btn.rd-header-cta { background: #ffffff10; border-color: #ffffffa0; color: #fff; }
.rd-header.solid { position: fixed !important; top: 0; left: 0; width: 100%; color: var(--rd-ink) !important; background: #f5f4effa !important; backdrop-filter: blur(18px); border-bottom-color: var(--rd-line) !important; }
.rd-header.solid .rd-header-inner { height: 70px; }
.rd-header.solid .rd-logo .on-dark { display: none !important; }
.rd-header.solid .rd-logo .on-light { display: block !important; }
.rd-header.solid .rd-btn.rd-header-cta { background: var(--rd-ink) !important; border-color: var(--rd-ink) !important; color: #fff !important; }
body:not(.rd-home) .rd-header.solid { position: sticky !important; }

/* ---- buttons ------------------------------------------------------------ */
.rd-btn { min-height: 50px; padding: 14px 22px; display: inline-flex; gap: 26px; align-items: center; justify-content: space-between; font: 600 14px var(--rd-font); border: 1px solid var(--rd-ink); background: var(--rd-ink); color: #fff; border-radius: var(--rd-radius); text-decoration: none; cursor: pointer; transition: background .25s, transform .25s, box-shadow .25s; }
.rd-btn .arrow { font-size: 19px; line-height: 1; transition: transform .3s; }
.rd-btn:hover { background: #2e423a; transform: translateY(-2px); box-shadow: 0 8px 22px #101d1814; }
.rd-btn:hover .arrow { transform: translate(4px, -2px); }
.rd-btn.light { background: var(--rd-paper); color: var(--rd-ink); border-color: var(--rd-paper); }
.rd-btn.outline { background: transparent; color: var(--rd-ink); border-color: var(--rd-line-strong); }
.rd-btn.outline:hover { background: var(--rd-sage); }
.rd-btn.brass { background: var(--rd-brass); border-color: var(--rd-brass); color: #14100A; }
.rd-header .rd-btn { min-height: 42px; padding: 10px 17px; gap: 16px; font-size: 13px; }

:where(.rd-header, .rd-footer) a:focus-visible, :where(.rd-header, .rd-footer) button:focus-visible, .rd-btn:focus-visible { outline: 3px solid var(--rd-brass); outline-offset: 4px; }

/* ---- footer ------------------------------------------------------------- */
.rd-footer { background: var(--rd-dark); color: #d8ded7; font-family: var(--rd-font); }
.rd-footer a { color: inherit; text-decoration: none; }
.rd-footer a:hover { text-decoration: underline; }
.rd-footer-inner { width: var(--rd-shell); margin: auto; }
.rd-footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 60px; padding: 65px 0 50px; }
.rd-footer-brand p { font-size: 14px; line-height: 1.7; max-width: 260px; margin: 18px 0 0; color: var(--rd-dark-muted); }
.rd-footer-brand .rd-logo img { height: 36px; }
.rd-footer h4 { font: 600 12px var(--rd-font); letter-spacing: .12em; text-transform: uppercase; color: var(--rd-dark-muted); margin: 0 0 18px; }
.rd-footer ul { padding: 0; margin: 0; list-style: none; }
.rd-footer li { font-size: 14px; margin: 10px 0; }
.rd-footer-trust { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 22px 0; border-top: 1px solid #ffffff16; font-size: 13px; color: var(--rd-dark-muted); }
.rd-footer-trust span::before { content: '✓'; color: var(--rd-sand); margin-right: 8px; }
.rd-footer-bottom { border-top: 1px solid #ffffff16; padding: 22px 0; display: flex; justify-content: space-between; gap: 15px; font-size: 13px; color: var(--rd-dark-muted); }
.rd-footer-bottom div { display: flex; gap: 25px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  :root { --rd-shell: calc(100% - 64px); }
  .rd-nav { gap: 22px; }
  .rd-header-right { gap: 16px; }
  .rd-footer-main { gap: 30px; }
}
@media (max-width: 860px) {
  :root { --rd-shell: calc(100% - 40px); }
  .rd-header-inner { height: 72px; }
  .rd-logo img { height: 28px; }
  .rd-nav { display: none; }
  .rd-nav.open { display: flex; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: flex-start; background: var(--rd-paper); color: var(--rd-ink); padding: 22px 20px 26px; box-shadow: 0 15px 20px #0002; gap: 18px; font-size: 16px; }
  .rd-header-right .rd-header-cta { display: none; }
  .rd-portal-link .label { display: none; }
  .rd-menu-toggle { display: block; }
  .rd-footer-main { grid-template-columns: 1fr 1fr; gap: 35px 25px; padding: 50px 0; }
  .rd-footer-main > div:first-child { grid-column: 1 / -1; }
  .rd-footer-bottom { flex-direction: column; }
}

/* ---- the profile circle (js/site-session.js paints it signed in) --------- */
.rd-header-right { position: relative; }
.rd-portal-link { position: relative; }
.rd-portal-link.is-in .hp-glyph { display: none; }
.rd-portal-link .hp-photo { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.rd-header .hp-menu { position: absolute; top: calc(100% + 14px); right: 0; min-width: 210px; max-width: 280px; background: #fff; color: var(--rd-ink); border: 1px solid var(--rd-line); border-radius: 8px; box-shadow: 0 18px 40px #17211f29; padding: 6px; z-index: 110; }
.rd-header .hp-menu-who { font-size: 13px; color: var(--rd-muted); padding: 8px 10px 7px; margin-bottom: 4px; border-bottom: 1px solid var(--rd-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-header .hp-menu-item { display: block; width: 100%; text-align: left; font: 500 14px var(--rd-font); color: var(--rd-ink); padding: 10px; border-radius: 6px; background: none; border: 0; cursor: pointer; text-decoration: none; min-height: 44px; }
.rd-header .hp-menu-item:hover, .rd-header .hp-menu-item:focus-visible { background: var(--rd-sage); outline: none; }
/* the application's phone step labels were 10px: the 11px floor */
body.rd-theme .step-label { font-size: 11px !important; }

/* ---- the application, from every page ----------------------------------------- */
.rd-nav-apply, .rd-header .rd-btn.rd-header-apply { display: none; }
@media (max-width: 860px) {
  .rd-header .rd-btn.rd-header-apply { display: inline-flex; min-height: 38px; padding: 8px 14px; gap: 0; font-size: 13px; }
  .rd-home .rd-header:not(.solid) .rd-btn.rd-header-apply { background: #ffffff14; border-color: #ffffffa0; color: #fff; }
  .rd-nav.open .rd-nav-apply { display: block; font-weight: 700; padding-bottom: 14px; border-bottom: 1px solid var(--rd-line); width: 100%; }
}