/* HUSLLYFE — shared styles. Loaded by every page. */
:root{
  --bg:#08090a;--panel:#101214;--panel2:#151719;--text:#f4f4f1;
  --muted:#8f9498;--line:#272b2f;--accent:#d71920;--accent2:#ff3b30;
  --green:#79c78a;--gold:#c7a65a;
  /* Score bands — 0-60 low, 61-89 mid, 90-100 high. Shared by every gauge. */
  --score-low:#d71920;--score-mid:#dfae2a;--score-high:#5cc274;
  --score-none:#41474b;   /* nothing logged yet — not a measurement */
}
*{box-sizing:border-box}
/* `clip` rather than `hidden`: hidden would make the root a scroll
   container and break the sticky header. The off-canvas mobile nav sits
   at translateX(100%), which Chrome counts toward the document's
   scrollable overflow — so without this every page scrolled 300px
   sideways on a phone, into an empty strip. */
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}.wrap{max-width:1240px;margin:auto;padding:0 28px}
header{position:sticky;top:0;z-index:20;background:rgba(8,9,10,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{display:block;height:34px;width:auto}
@media(max-width:520px){.logo img{height:26px}}
nav{display:flex;gap:28px;font-size:12px;text-transform:uppercase;letter-spacing:.13em;color:#bfc2c5}
nav a:hover{color:white}
nav a.active{color:var(--text);border-bottom:2px solid var(--accent);padding-bottom:4px}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;background:none;border:none;cursor:pointer;padding:0}
.nav-toggle span{display:block;width:100%;height:1.5px;background:#ddd;transition:transform .3s ease,opacity .3s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-scrim{position:fixed;inset:0;background:rgba(8,9,10,.6);z-index:18;opacity:0;pointer-events:none;transition:opacity .3s ease}
.nav-scrim.open{opacity:1;pointer-events:auto}
@media(max-width:850px){
  nav{position:fixed;top:0;right:0;height:100dvh;width:min(78vw,300px);background:var(--panel2);border-left:1px solid var(--line);flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;padding:32px;transform:translateX(100%);transition:transform .4s cubic-bezier(.16,.84,.32,1);z-index:19}
  nav.open{transform:translateX(0)}
  nav a{font-size:14px}
  .nav-toggle{display:flex}
}

.hero{position:relative;min-height:720px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,64%);gap:36px;align-items:center;padding:75px 0;overflow:hidden}
.hero-copy{padding-right:0}
.hero-cluster{padding-left:0}
.kicker{color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
h1{font-size:clamp(58px,8vw,110px);line-height:.84;margin:18px 0 25px;letter-spacing:-.065em}
.hero p{max-width:610px;color:#b7babd;font-size:19px;line-height:1.65}
.cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}.btn{padding:14px 19px;border:1px solid #3a3e42;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;background:none;color:inherit;cursor:pointer;font-family:inherit;display:inline-block}.btn.primary{background:var(--accent);border-color:var(--accent)}
.btn:hover{border-color:#666}.btn.primary:hover{background:var(--accent2);border-color:var(--accent2)}
.cluster{background:radial-gradient(circle at 50% 48%,#25292c 0,#101214 46%,#090a0b 72%);border:1px solid #292d30;border-radius:34px;padding:35px 28px;box-shadow:0 30px 80px #000}
/* Hero cluster dials — the same .score-ring component Wealth and Drive use, at
   the same 220px size, one per engine. Arc colour comes from the score band.
   The 30px gap clears the arc, which is drawn 15px outside each ring's box. */
.gauges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;justify-items:center;align-items:center;padding:15px 0}
.gauges .score-ring{margin:0;--ring-size:clamp(120px,17.2vw,220px)}
.gauges .score-ring span{font-size:10px;letter-spacing:.18em;color:#aaa;text-transform:uppercase;margin-top:4px}
.cluster-foot{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:24px;padding-top:20px;gap:14px;color:#777;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
section{padding:90px 0;border-top:1px solid var(--line);scroll-margin-top:88px}
.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:35px;flex-wrap:wrap}
h2{font-size:48px;letter-spacing:-.04em;margin:8px 0}.section-head p{max-width:500px;color:var(--muted);line-height:1.6}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--panel);border:1px solid var(--line);padding:25px;min-height:310px;position:relative;overflow:hidden}
.card h3{font-size:25px;margin:18px 0 10px}.card p{color:var(--muted);line-height:1.6}.number{font-size:11px;color:var(--accent);letter-spacing:.2em;font-weight:800}
.metric{position:absolute;right:-12px;bottom:-20px;font-size:105px;font-weight:900;color:#171a1c}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{padding:25px;background:#0d0f10;border:1px solid var(--line)}.stat b{display:block;font-size:36px}.stat small{color:#777;text-transform:uppercase;letter-spacing:.14em}
.drive{display:grid;grid-template-columns:1fr 1fr;gap:20px}.drive-box{min-height:420px;background:linear-gradient(135deg,#17191b,#0a0b0c);border:1px solid var(--line);padding:32px;display:flex;flex-direction:column;justify-content:end}.drive-box h3{font-size:42px;margin:0 0 10px}.tag{color:var(--accent);font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
footer{padding:45px 0;border-top:1px solid var(--line);color:#73777b;font-size:11px;letter-spacing:.12em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
@media(max-width:850px){.hero,.drive{grid-template-columns:1fr}.gauges{max-width:620px;margin:auto;gap:20px}.cards,.stats{grid-template-columns:1fr 1fr}h1{font-size:68px}}
@media(max-width:520px){.wrap{padding:0 18px}.hero{padding:55px 0}.gauges{grid-template-columns:1fr;gap:30px}.gauges .score-ring{--ring-size:min(200px,52vw)}.cards,.stats{grid-template-columns:1fr}h2{font-size:38px}}

/* ---------- Disclosure (collapsible section) ----------
   Shared by the Garage "Add a Car" panel and the algorithm sections on the
   Dashboard and Body pages. Toggles marked data-auto are wired generically by
   wireChrome(); the Garage one is driven by its own page script instead,
   because it also opens and closes in response to saves and deletions. */
.disclosure{margin-bottom:4px}
.disclosure-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:#0b0d0e;border:1px solid var(--line);color:#fff;font-family:inherit;
  padding:18px 22px;cursor:pointer;text-align:left;transition:border-color .2s ease,background .2s ease}
.disclosure-toggle:hover{border-color:#666;background:#0e1112}
.disclosure-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dt-main{display:flex;align-items:center;gap:14px;min-width:0}
.dt-label{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.dt-hint{font-size:11px;color:#777;text-transform:uppercase;letter-spacing:.1em;text-align:right;flex-shrink:0}
.dt-icon{position:relative;width:20px;height:20px;flex-shrink:0}
.dt-icon::before,.dt-icon::after{content:'';position:absolute;background:var(--accent);
  transition:transform .25s ease,opacity .25s ease}
.dt-icon::before{top:9px;left:0;width:20px;height:2px}
.dt-icon::after{top:0;left:9px;width:2px;height:20px}
.disclosure-toggle[aria-expanded="true"] .dt-icon::after{transform:rotate(90deg);opacity:0}
.disclosure-body{margin-top:18px}
/* A section that is nothing but a disclosure doesn't need the full 90px
   section rhythm around a single collapsed bar. */
.math-section{padding:48px 0}
.disclosure.collapsed .disclosure-body{display:none}
@media(max-width:520px){.disclosure-toggle{flex-direction:column;align-items:flex-start;gap:6px}.dt-hint{text-align:left}}

/* ---------- Page banner (subpage hero with photo) ---------- */
.page-banner{position:relative;min-height:340px;display:flex;align-items:flex-end;padding:60px 0 40px;background-size:cover;background-position:center;overflow:hidden;border-bottom:1px solid var(--line)}
.page-banner:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,10,.55) 0%,rgba(8,9,10,.75) 55%,var(--bg) 100%)}
.page-banner .wrap{position:relative;z-index:1}
.page-banner h1{font-size:clamp(46px,7vw,86px);margin:12px 0 14px}
.page-banner p{max-width:600px;color:#c8cacb;font-size:16px;line-height:1.6}
.breadcrumb{font-size:11px;color:#8b8f93;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.breadcrumb a{color:#aeb1b4;border-bottom:1px solid transparent}
.breadcrumb a:hover{color:#fff;border-color:#fff}

/* ---------- Landing engine nav cards ---------- */
.engine-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.engine-card{position:relative;min-height:280px;border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;background-size:cover;background-position:center;transition:transform .3s ease,border-color .3s ease}
.engine-card:hover{transform:translateY(-4px);border-color:#444}
.engine-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,10,.15) 0%,rgba(8,9,10,.92) 78%)}
.engine-card-body{position:relative;z-index:1;padding:22px}
.engine-card .kicker{font-size:10px}
.engine-card h3{font-size:26px;margin:8px 0 6px}
.engine-card .ec-meta{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:11px;color:#aaa}
.engine-card .ec-score{font-size:22px;font-weight:900;color:var(--score-color,var(--gold))}
.engine-card .ec-arrow{font-size:13px;color:#eee;text-transform:uppercase;letter-spacing:.1em}
@media(max-width:850px){.engine-cards{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.engine-cards{grid-template-columns:1fr}}

/* ---------- Wealth Engine ---------- */
.wealth-dashboard{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.panel{background:var(--panel);border:1px solid var(--line);padding:26px}
.panel h3{margin:0 0 8px;font-size:22px}.muted{color:var(--muted);line-height:1.55}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.metric-card{background:#0b0d0e;border:1px solid var(--line);padding:18px}.metric-card b{font-size:25px;display:block;margin:5px 0}.metric-card small{color:#777;text-transform:uppercase;letter-spacing:.1em;font-size:9px}
.metric-card.editable{padding:12px 14px}
.metric-card.editable input{width:100%;background:transparent;border:none;color:var(--text);font-size:20px;font-weight:800;padding:4px 0 0;font-family:inherit;outline:none;border-bottom:1px solid transparent}
.metric-card.editable input:focus{border-bottom-color:var(--accent)}
/* Same treatment for the one editable card that is a choice, not a number. */
.metric-card.editable select{width:100%;background:transparent;border:none;color:var(--text);font-size:14px;font-weight:800;padding:8px 0 0;font-family:inherit;outline:none;border-bottom:1px solid transparent;cursor:pointer}
.metric-card.editable select:focus{border-bottom-color:var(--accent)}
.metric-card.editable select option{background:#0b0d0e;color:var(--text)}
.algorithm{margin-top:18px;background:#090a0b;border:1px solid var(--line);padding:20px;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;color:#b9bdc0;line-height:1.8;overflow:auto}
/* Shared score dial. Defaults compute to the original fixed 220px / 15px band /
   58px numeral, so Wealth and Drive render exactly as before; the variables let
   the dashboard cluster reuse the identical component per engine. */
.score-ring{--ring-size:220px;--ring-band:15px;--ring-accent:var(--score-color,var(--accent));width:var(--ring-size);height:var(--ring-size);border-radius:50%;margin:15px auto 0;border:var(--ring-band) solid #25292c;display:grid;place-items:center;position:relative;background:#0b0d0e}.score-ring:after{content:"";position:absolute;inset:calc(var(--ring-band) * -1);border-radius:50%;border:var(--ring-band) solid var(--ring-accent);border-left-color:transparent;transform:rotate(var(--deg,-38deg));transition:transform .8s cubic-bezier(.2,.8,.2,1)}.score-ring b{font-size:calc(var(--ring-size) / 220 * 58)}
/* Neutral dial: nothing logged yet. The arc closes into a full, even ring
   so it reads as an inactive dial rather than a score sitting at zero. */
[data-score-band="none"] b,
.ec-score[data-score-band="none"]{color:#5b6165}
.score-ring[data-score-band="none"]:after,
.mini-ring[data-score-band="none"]:after{border-left-color:var(--score-none);border-right-color:var(--score-none)}.score-ring span{display:block;text-align:center;color:#777;font-size:9px;letter-spacing:.15em}
.ratio{display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--line);margin-top:25px;padding-top:20px}.ratio b{font-size:34px}.ratio small{color:#777;text-transform:uppercase;letter-spacing:.12em}
@media(max-width:850px){.wealth-dashboard{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.metric-grid{grid-template-columns:1fr}}

.account{display:flex;justify-content:space-between;gap:12px;padding:14px;background:#0b0d0e;border:1px solid var(--line)}
.ledger{background:#0b0d0e;border:1px solid var(--line);padding:14px}
.ledger .account{padding:0;border:none;background:none}
.ledger-list{display:grid;gap:8px;margin-top:12px}
.ledger-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:12px}
.ledger-name{color:#ccc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.ledger-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.ledger-right input[type=number]{width:100px;background:#0a0b0c;border:1px solid var(--line);color:var(--gold);font-weight:800;font-size:13px;padding:6px 8px;font-family:inherit;outline:none;text-align:right}
.ledger-right input[type=number]:focus{border-color:var(--gold)}
.ledger-remove{background:none;border:none;color:#666;cursor:pointer;font-size:12px;padding:0;line-height:1}
.ledger-remove:hover{color:var(--accent)}
.ledger-add{display:flex;gap:8px;margin-top:14px}
.ledger-add input{flex:1;min-width:0;background:#0a0b0c;border:1px solid var(--line);color:var(--text);padding:9px 10px;font:inherit;font-size:12px;outline:none}
.ledger-add input:focus{border-color:#555}
.ledger-add input[type=number]{max-width:100px;flex:0 0 100px}
.ledger-add button{padding:9px 13px;font-size:11px}
.ledger-empty{color:#555;font-size:11px;padding:4px 0}
.ledger-caption{font-size:11px;color:#666;margin-top:6px}

/* ---------- Body Engine ---------- */
.training-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.readout{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:18px}
.readout .metric-card{min-height:100px;padding:14px}
.readout label{display:block;font-size:9px;color:#777;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.readout .val{font-size:22px;font-weight:800;display:block;margin-bottom:6px}
.readout input[type=range]{width:100%;-webkit-appearance:none;height:4px;background:#26292c;border-radius:2px;margin:0}
.readout input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;margin-top:-5px;border:2px solid #0b0d0e}
.readout input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid #0b0d0e;cursor:pointer}
.body-score{display:flex;align-items:center;gap:24px}
.mini-ring{width:150px;height:150px;border-radius:50%;border:12px solid #282c2f;display:grid;place-items:center;position:relative;background:#0b0d0e;flex-shrink:0}
.mini-ring:after{content:"";position:absolute;inset:-12px;border-radius:50%;border:12px solid var(--score-color,var(--accent));border-right-color:transparent;transform:rotate(var(--deg,24deg));transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.mini-ring b{font-size:45px}
.formula{background:#090a0b;border:1px solid var(--line);padding:18px;margin-top:16px;font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;line-height:1.8;color:#b8bdc0;overflow:auto}
.privacy{border-left:3px solid var(--accent);padding:16px 18px;background:#0d0f10;color:#aaa;line-height:1.6;margin-top:18px}
.training-table{width:100%;border-collapse:collapse;margin-top:18px;font-size:12px}
.training-table th,.training-table td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left}
.training-table th{color:#777;text-transform:uppercase;letter-spacing:.12em;font-size:9px}
.goal-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.goal-pill{border:1px solid var(--line);padding:9px 12px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;background:none;color:#aaa;font-family:inherit;cursor:pointer}
.goal-pill.active{border-color:var(--accent);color:#fff;background:rgba(215,25,32,.12)}
.today-status{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:18px;padding:18px;background:#0b0d0e;border:1px solid var(--line)}
.today-status b{font-size:28px}
@media(max-width:850px){.training-grid{grid-template-columns:1fr}.readout{grid-template-columns:1fr 1fr}.body-score{flex-direction:column;align-items:flex-start}}
@media(max-width:520px){.readout{grid-template-columns:1fr}}

/* ---------- Garage / Vehicle Profile ---------- */
.garage-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.vehicle-form{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:#777}
.field input,.field select,.field textarea{width:100%;background:#0a0b0c;color:var(--text);border:1px solid var(--line);padding:12px 13px;font:inherit;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#555}
.upload-zone{border:1px dashed #444;background:#0a0b0c;min-height:170px;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;margin-top:10px}
.upload-zone:hover{border-color:var(--accent)}
.upload-zone b{font-size:16px}.upload-zone span{color:#777;font-size:11px;margin-top:7px}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.photo-card{aspect-ratio:4/3;background:#0a0b0c;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;position:relative}
.photo-card img{width:100%;height:100%;object-fit:cover}
.photo-card .placeholder{color:#555;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.vehicle-preview{min-height:520px;background:linear-gradient(145deg,#17191b,#090a0b);border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;justify-content:space-between}
.vehicle-preview h3{font-size:38px;margin:8px 0 4px}
.vehicle-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}
.vehicle-meta div{background:#0b0d0e;border:1px solid var(--line);padding:14px}
.vehicle-meta small{display:block;color:#777;text-transform:uppercase;letter-spacing:.12em;font-size:9px;margin-bottom:5px}
.drive-scorebar{height:8px;background:#222;margin-top:10px;overflow:hidden}
.drive-scorebar span{display:block;height:100%;background:var(--score-color,var(--accent));transition:width .6s ease}
.add-vehicle{margin-top:16px}
.garage-list{margin-top:22px}
.garage-list h3{font-size:20px;margin:0 0 14px}
.vehicle-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vehicle-card{background:#0b0d0e;border:1px solid var(--line);overflow:hidden;position:relative}
.vehicle-card .thumb{aspect-ratio:4/3;background:#0a0b0c;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:#444;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.vehicle-card .vc-body{padding:14px}
.vehicle-card h4{font-size:16px;margin:0 0 6px}
.vehicle-card .vc-meta{display:flex;justify-content:space-between;color:#888;font-size:11px;margin-bottom:8px}
.vehicle-card .vc-score{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#777;text-transform:uppercase;letter-spacing:.1em}
/* True cost per mile, depreciation included. Shared by the Garage list and
   the Drive fleet cards, so it lives here rather than in garage.css. */
.vc-cpm{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:7px;padding-top:7px;border-top:1px solid var(--line);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#6a7075}
.vc-cpm b{font-size:15px;letter-spacing:0;color:var(--gold);text-transform:none}
.vc-cpm.locked b{color:#4e5357}
.vehicle-card .vc-score b{color:var(--gold);font-size:16px}
.vehicle-card .remove{position:absolute;top:8px;right:8px;width:24px;height:24px;background:rgba(8,9,10,.75);border:1px solid var(--line);color:#ccc;cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center}
.vehicle-card .remove:hover{border-color:var(--accent);color:var(--accent)}
.empty-note{color:#666;font-size:12px;padding:16px 0}
.storage-meter{margin:0 0 16px;font-size:11px;color:#777;display:flex;align-items:center;gap:10px}
.storage-meter .track{flex:1;height:4px;background:#1c1f21;max-width:220px}
.storage-meter .bar{display:block;height:100%;width:0%;background:var(--green)}
@media(max-width:850px){.garage-grid{grid-template-columns:1fr}.vehicle-form{grid-template-columns:1fr}.field.full{grid-column:auto}.vehicle-cards{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.photo-grid{grid-template-columns:1fr 1fr}.vehicle-meta{grid-template-columns:1fr}.vehicle-cards{grid-template-columns:1fr}}

/* ---------- Visual/editorial ---------- */
.visual-strip{max-width:1240px;margin:0 auto 75px;padding:0 28px;display:grid;grid-template-columns:1.3fr .7fr;gap:16px}
.visual{min-height:330px;border:1px solid var(--line);background-size:cover;background-position:center;position:relative;overflow:hidden}
.visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.86) 100%)}
.visual-copy{position:absolute;z-index:2;left:24px;right:24px;bottom:22px}.visual-copy h3{font-size:28px;margin:5px 0}.visual-copy p{color:#bbb;margin:0;max-width:500px}
.editorial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}.editorial-image{height:240px;background-size:cover;background-position:center;border-bottom:1px solid var(--line)}
.editorial-card{background:var(--panel);border:1px solid var(--line);transition:border-color .3s ease,transform .3s ease}
.editorial-card.linked:hover{transform:translateY(-4px);border-color:#444}
.editorial-card .copy{padding:20px}.editorial-card h3{margin:7px 0;font-size:22px}.editorial-card p{color:var(--muted);line-height:1.55}
@media(max-width:850px){.visual-strip,.editorial-grid{grid-template-columns:1fr}}@media(max-width:520px){.visual-strip{padding:0 18px}}

/* ---------- toast + reset ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#151719;border:1px solid var(--line);padding:12px 20px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;z-index:200;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.reset-btn{background:none;border:1px solid var(--line);color:#888;font-family:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;cursor:pointer}
.reset-btn:hover{border-color:var(--accent);color:var(--accent)}
.live-tag{font-size:9px;color:var(--green);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);padding:5px 9px;display:inline-block}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

/* ---------- profile control (injected into every header by app.js) ---------- */
.profile-ctl{position:relative;padding-left:22px;flex-shrink:0}
/* the header is a 4-item flex row now (logo | nav | profile | toggle);
   push the nav group right rather than relying on space-between. */
header .nav > nav{margin-left:auto}
@media(max-width:850px){.profile-ctl{margin-left:auto;padding-left:0;margin-right:14px}}
.profile-chip{
  display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);
  color:#c8cbce;font-family:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 11px;cursor:pointer;
}
.profile-chip:hover{border-color:#555;color:#fff}
.profile-ctl.open .profile-chip{border-color:var(--accent);color:#fff}
.profile-initial{
  width:19px;height:19px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;
  background:var(--accent);color:#fff;font-size:10px;font-weight:800;letter-spacing:0;
}
.profile-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-caret{font-size:9px;color:#8b9094}
@media(max-width:520px){.profile-name,.profile-caret{display:none}.profile-chip{padding:7px}}

.profile-panel{
  position:absolute;top:calc(100% + 10px);right:0;width:290px;z-index:40;
  background:var(--panel2);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.65);
  padding:14px;max-height:78vh;overflow-y:auto;
}
@media(max-width:520px){.profile-panel{right:-8px;width:min(88vw,290px)}}
.pp-head{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#6d7276;margin:2px 0 9px}
.pp-list{display:grid;gap:4px;margin-bottom:12px}
.pp-item{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:#0b0d0e;
  border:1px solid var(--line);color:#c8cbce;font:inherit;font-size:12px;padding:10px 11px;cursor:pointer;
}
.pp-item:hover{border-color:#555;color:#fff}
.pp-item.current{border-color:var(--accent);color:#fff}
.pp-tick{width:9px;color:var(--accent);font-size:9px;flex-shrink:0}
.pp-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-add{display:flex;gap:6px}
.pp-add input{
  flex:1;min-width:0;background:#0a0b0c;border:1px solid var(--line);color:var(--text);
  padding:9px 10px;font:inherit;font-size:12px;outline:none;
}
.pp-add input:focus{border-color:#555}
.pp-add-btn{
  background:none;border:1px solid var(--line);color:#c8cbce;font:inherit;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;padding:9px 12px;cursor:pointer;flex-shrink:0;
}
.pp-add-btn:hover{border-color:var(--accent);color:#fff}
.pp-sep{height:1px;background:var(--line);margin:14px 0}
.pp-action{
  display:block;width:100%;text-align:left;background:none;border:none;color:#c8cbce;
  font:inherit;font-size:12px;padding:9px 2px;cursor:pointer;
}
.pp-action:hover{color:#fff}
.pp-action:disabled{color:#4a4e51;cursor:not-allowed}
.pp-action.danger{color:#b4585c}
.pp-action.danger:hover{color:var(--accent2)}
.pp-action.danger:disabled{color:#4a4e51}
.pp-note{font-size:10px;line-height:1.55;color:#6d7276;margin:12px 0 0;border-top:1px solid var(--line);padding-top:11px}

/* ---------- Backup nag ---------- */
.backup-nag{max-width:1240px;margin:22px auto 0;padding:16px 22px;display:flex;gap:18px;
  align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:rgba(223,174,42,.09);border:1px solid #4a3d1f}
.backup-nag .bn-text{font-size:13px;line-height:1.6;color:var(--text);min-width:260px;flex:1}
.backup-nag .bn-text b{color:var(--gold)}
.backup-nag .bn-actions{display:flex;gap:12px;align-items:center;flex-shrink:0}
.backup-nag .bn-go{padding:10px 18px;font-size:11px}
.backup-nag .bn-later{background:none;border:none;color:var(--muted);font-family:inherit;font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;cursor:pointer;padding:8px}
.backup-nag .bn-later:hover{color:var(--text)}
@media(max-width:640px){.backup-nag{margin:16px 18px 0}}

/* ---------- First run ---------- */
.setup-section{padding:48px 0 0}
.setup-card{background:var(--panel);border:1px solid var(--line);padding:34px}
.setup-card h2{margin:6px 0 10px;font-size:34px;line-height:1.1}
.setup-card .muted{max-width:640px;font-size:13px}
/* One question now, so a three-column grid has nothing to arrange. */
.setup-form{display:grid;grid-template-columns:1fr;gap:20px;margin-top:22px;max-width:620px}
.setup-form .field.full{grid-column:1/-1}
/* A days-per-week box does not need 600px. */
.setup-form #setupTraining{max-width:130px;font-size:22px;font-weight:700;text-align:center}
/* .field sets flex-direction:column at the same specificity and earlier in
   the file, so the row direction has to be stated or the buttons stack. */
.setup-actions{display:flex;flex-direction:row;gap:14px;align-items:center;flex-wrap:wrap;margin-top:4px}
.setup-skip{background:none;border:none;color:var(--muted);font-family:inherit;font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;cursor:pointer;padding:10px}
.setup-skip:hover{color:var(--text)}
@media(max-width:850px){.setup-form{grid-template-columns:1fr}.setup-card h2{font-size:26px}}

.demo-ribbon{max-width:1240px;margin:22px auto 0;padding:12px 22px;display:flex;gap:16px;
  align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:12px;
  background:rgba(92,194,116,.08);border:1px solid #2c4430;color:var(--text)}
.demo-ribbon button{background:none;border:1px solid var(--line);color:var(--text);font-family:inherit;
  font-size:10px;text-transform:uppercase;letter-spacing:.1em;padding:8px 12px;cursor:pointer;flex-shrink:0}
.demo-ribbon button:hover{border-color:#666}
@media(max-width:640px){.demo-ribbon{margin:16px 18px 0}}

/* A dial running on a stated baseline rather than a measured log. */
.score-ring.provisional:after,.mini-ring.provisional:after{opacity:.55}
.score-ring.provisional b,.mini-ring.provisional b{opacity:.8}
.provisional-note{font-size:11px;color:var(--score-mid);line-height:1.5;margin:6px 0 10px;max-width:420px}
/* First run asks one question, so the card no longer needs a two-column grid
   and gets a closing line pointing at the pages that ask for more. */
.setup-later{
  font-size:12px;color:#6a7075;line-height:1.7;margin:16px 0 0;
  border-top:1px solid var(--line);padding-top:14px;
}
.setup-later a{color:var(--gold);border-bottom:1px solid var(--gold)}