/* Whoop-style layer (approved mockups, Oct 2026). Loaded after style.css.
   True black, heavy Satoshi numbers, color only signals risk.
   Brand purple #6B3FD9 appears only on the logo and the mode chip. */
body.w { background:#000; color:#fff; font-family:"Satoshi",system-ui,sans-serif; font-weight:500; }
body.w { --g:#16EC06; --y:#FFDE00; --o:#FF8A00; --r:#FF2D3A; --n:#5a5a62; --c:#5a5a62; --card:#111114; --track:#1e1e22; --muted:#8a8a93; }
body.w .g { --c:var(--g); } body.w .y { --c:var(--y); } body.w .o { --c:var(--o); } body.w .r { --c:var(--r); } body.w .n { --c:var(--n); }
body.w main { max-width:430px; padding:0 22px 120px; }
body.w h1, body.w h2, body.w legend { font-weight:900; letter-spacing:-.6px; }
body.w .page-h, body.w .report-w h1 { font-size:30px; margin:0 0 4px; }
body.w .foot { padding-bottom:110px; }

/* Header */
.w-top { display:flex; justify-content:space-between; align-items:center; max-width:430px; margin:0 auto; padding:calc(18px + env(safe-area-inset-top)) 22px 22px; }
.w-logo { display:flex; align-items:center; gap:9px; text-decoration:none; }
.w-logo .w-icon { width:26px; height:26px; border-radius:8px; background:#6B3FD9; }
.w-logo .w-word { height:26px; width:auto; }
.w-chip { font-size:13px; font-weight:700; padding:7px 13px; border-radius:99px; background:#16161a; border:1px solid #2a2a30; color:#fff; text-decoration:none; }
body.w main a.w-chip { text-decoration:none; }
.w-chip b { color:#9b7bff; font-weight:900; }

/* Bottom tabs */
body.w nav.w-nav { background:#0a0a0c; border-top:1px solid #1c1c20; padding:10px 6px calc(10px + env(safe-area-inset-bottom)); }
body.w nav.w-nav a { color:#6a6a72; font-size:12px; font-weight:700; min-width:4.6rem; }
body.w nav.w-nav a.on { color:#fff; }
body.w nav.w-nav .icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* Cards and labels */
body.w .card { display:block; background:var(--card); border:0; border-radius:22px; padding:20px; margin:0 0 14px; color:#fff; text-decoration:none; }
body.w main a.card { text-decoration:none; color:#fff; }
body.w .lbl { display:block; font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); }
body.w .hint { color:var(--muted); font-size:14px; font-weight:500; line-height:1.4; }
body.w .section-lbl { margin:26px 4px 10px; }

/* Rings */
.ring-track { fill:none; stroke:var(--track); }
.ring-fill { fill:none; stroke:var(--c); stroke-linecap:round; filter:drop-shadow(0 0 12px color-mix(in srgb, var(--c) 55%, transparent)); }

/* Now */
.hero { display:flex; flex-direction:column; align-items:center; margin:4px 0 28px; text-align:center; }
.ring-xl { position:relative; width:300px; height:300px; }
.ring-xl svg, .rw svg { transform:rotate(-90deg); overflow:visible; display:block; }
.ring-n { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-n b { font-size:112px; font-weight:900; letter-spacing:-5px; line-height:1; }
.ring-n b.dash { color:#3a3a40; }
.ring-n em { text-transform:uppercase; font-style:normal; font-weight:900; font-size:16px; letter-spacing:2.5px; color:var(--c); margin-top:6px; }
.hero .sentry { font-size:40px; font-weight:900; letter-spacing:-1px; margin:26px 0 0; display:flex; align-items:center; gap:12px; color:#fff; }
.hero .sentry i { width:14px; height:14px; border-radius:50%; background:var(--c); box-shadow:0 0 16px var(--c); }
.hero .sentry.is-off i { background:#5a5a62; box-shadow:none; }
.hero .spot { font-size:18px; font-weight:700; margin:8px 0 0; color:#fff; }
.hero .time { font-size:15px; color:var(--muted); margin:4px 0 0; max-width:320px; }
.duo, .rings { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.duo .card { margin:0; }
.duo .card b { display:block; font-size:40px; font-weight:900; margin-top:8px; color:var(--c); line-height:1.1; }
.duo .card small { font-size:14px; font-weight:700; color:#cfcfd4; }
.why-card p { font-size:16px; font-weight:700; margin:8px 0 6px; }
.why-card .more, .acct-links a { font-size:14px; font-weight:700; color:var(--muted); }
.quick-mode .seg { margin:12px 0 8px; }

/* Segmented controls */
body.w .seg { display:flex; gap:4px; background:#0a0a0c; border:1px solid #222228; border-radius:14px; padding:4px; }
body.w .seg button.seg-btn[type="submit"]:not(.linkish) { flex:1; background:transparent; color:#8a8a93; font-weight:700; font-size:15px; border:0; border-radius:10px; min-height:40px; }
body.w .seg button.seg-btn.on[type="submit"]:not(.linkish) { background:#2a2a30; color:#fff; }
body.w .seg-sm button.seg-btn[type="submit"]:not(.linkish) { font-size:13px; min-height:30px; }

/* Report */
.report-w .sub { color:var(--muted); font-size:15px; margin:0 0 20px; }
.rec-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.rec h2 { font-size:28px; margin:0; }
.rec-score { margin:6px 0 0; color:var(--c); font-weight:900; font-size:15px; letter-spacing:1px; text-transform:uppercase; }
.rec-score b { font-size:22px; }
.conf { flex:none; font-size:12px; font-weight:900; letter-spacing:1.4px; padding:6px 11px; border-radius:99px; background:#ffffff14; color:#cfcfd4; }
.conf-solid { background:#16EC0622; color:#16EC06; }
.conf-rough { background:#FFDE0022; color:#FFDE00; }
.conf-no-data { background:#FF2D3A22; color:#FF2D3A; }
.why { list-style:none; margin:14px 0 0; padding:0; }
.why li { font-size:16px; font-weight:700; padding:7px 0 7px 20px; position:relative; line-height:1.35; }
.why li:before { content:""; position:absolute; left:0; top:14px; width:8px; height:8px; border-radius:50%; background:var(--c); }
.rings .card { display:flex; flex-direction:column; align-items:center; padding:22px 10px; margin:0; }
.rw { position:relative; width:132px; height:132px; margin:12px 0 4px; display:block; }
.rw b { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:46px; font-weight:900; letter-spacing:-2px; }
.rings .tag { font-size:13px; font-weight:900; letter-spacing:1.5px; color:var(--c); }
.tap { margin:4px 0 4px; }

/* Driver rows (tappable bars) */
body.w .drow { border-top:1px solid #1d1d21; border-bottom:0; padding:0; }
body.w .card .drow:first-of-type { border-top:0; }
body.w .drow > .fold-toggle, body.w div.drow { display:block; width:100%; padding:14px 0; background:none; border:0; color:#fff; text-align:left; font:inherit; cursor:pointer; }
body.w .drow > .fold-toggle::after { display:none; }
.rh { display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:17px; }
.rh > span { display:flex; align-items:center; gap:10px; }
.rh b { font-size:22px; font-weight:900; color:var(--c); }
.chev { display:inline-block; width:8px; height:8px; border-right:2.5px solid #6a6a72; border-bottom:2.5px solid #6a6a72; transform:rotate(45deg); margin-top:-4px; transition:transform .2s; }
.fold.open .chev { transform:rotate(-135deg); margin-top:4px; }
span.bar { display:block; height:8px; border-radius:9px; background:var(--track); margin-top:10px; overflow:hidden; }
span.bar i { display:block; height:100%; border-radius:9px; background:var(--c); }
.drow .fold-inner { padding:0; }
.drow.open .fold-inner { padding-bottom:14px; }
.drow .fold-inner p { font-size:15px; color:#d8d8dc; line-height:1.4; }
.ctitle { margin:10px 0 0; font-size:12px !important; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted) !important; }

/* Charts in the report use the row's risk color */
body.w .chart .bar { fill:color-mix(in srgb, var(--c) 32%, #111114); }
body.w .chart .bar-on { fill:var(--c); }
body.w .chart .track { fill:var(--track); }
body.w .chart .line { stroke:var(--c); stroke-width:2; }
body.w .chart.map { border-color:#2a2a30; border-radius:12px; }
body.w .mix { list-style:none; padding:0; margin:6px 0 0; }
body.w .mix li, body.w .metric { display:flex; justify-content:space-between; gap:12px; font-size:14px; color:#cfcfd4; margin:6px 0; }
body.w .metric span:last-child { font-weight:700; color:#fff; text-align:right; }

/* Night strip */
.strip { display:flex; gap:4px; margin-top:14px; }
.strip i { flex:1; height:34px; border-radius:6px; background:var(--c); }
.strip i.now { outline:2.5px solid #fff; outline-offset:2px; }
.cx { display:flex; justify-content:space-between; font-size:11px; font-weight:700; color:#6a6a72; margin:6px 0 8px; }

/* Full-breakdown folds */
body.w .report-w > .fold { background:var(--card); border:0; border-radius:18px; margin:0 0 10px; padding:0 18px; }
body.w .fold-toggle { color:#fff; font-weight:700; }
body.w .fold-score { color:var(--c); font-weight:900; }
body.w .fold-nested .fold-toggle { color:#d8d8dc; }
body.w .unavailable summary { color:var(--muted); font-size:14px; }

/* History */
.week-row { display:flex; justify-content:space-between; margin:14px 0 8px; }
.day { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#6a6a72; }
.day i { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:900; font-size:14px; color:#000; background:var(--c); }
.day i.e { background:transparent; border:2px solid #232328; }
.day.today span { color:#fff; }
body.w .parks { list-style:none; margin:0; padding:0; }
body.w .parks li.card { padding:16px 18px; }
body.w .parks a { display:flex; align-items:center; gap:14px; color:#fff; text-decoration:none; padding:0; border:0; }
.park .dot { flex:none; width:14px; height:14px; border-radius:50%; background:var(--c); box-shadow:0 0 12px var(--c); }
.pmain { flex:1; min-width:0; display:flex; flex-direction:column; }
.pmain .place { font-weight:700; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pmain .when { color:var(--muted); font-size:14px; }
.pside { display:flex; flex-direction:column; align-items:flex-end; }
.pside b { font-size:28px; font-weight:900; color:var(--c); line-height:1; }
body.w .parks .verdict { font-size:13px; font-weight:700; color:#cfcfd4; margin:2px 0 0; }
body.w .parks .level { font-size:11px; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; color:var(--c); }
body.w .park-type { margin:12px 0 0; }

/* Modes */
body.w fieldset.card { padding:18px 20px; }
body.w fieldset.card legend { float:left; width:100%; font-size:20px; margin:0 0 6px; padding:0; }
body.w .parking-picker.card h2 { font-size:20px; }
body.w main > section.parking-picker { border:0; margin:0 0 14px; padding:20px; }
body.w button[type="submit"]:not(.linkish):not(.seg-btn) { background:#fff; color:#000; font-weight:900; border-radius:14px; }
.acct-links { display:flex; justify-content:space-between; align-items:center; }
body.w .acct-links .linkish { background:none; border:0; color:var(--muted); font:inherit; font-weight:700; font-size:14px; cursor:pointer; }


/* Status tab + Control panel (Tesla-app mirror, Oct 2026) */
body.w nav.w-nav a { min-width:3.6rem; }
.status-banner { font-size:13px; font-weight:700; color:#FF8A00; background:#FF8A0014; border-radius:14px; padding:12px 14px; margin:0 0 14px; line-height:1.35; }
.status-car .status-hero { margin-top:10px; }
.status-motion { margin-bottom:16px; }
.status-motion b { display:block; font-size:28px; font-weight:900; letter-spacing:-.6px; }
.status-motion b.is-on { color:#16EC06; }
.status-motion b.is-off { color:#8a8a93; }
.status-motion span { display:block; margin-top:4px; font-size:15px; font-weight:700; color:#cfcfd4; }
.status-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.status-grid .lbl { margin-bottom:4px; }
.status-grid b { font-size:22px; font-weight:900; letter-spacing:-.4px; }
.status-grid b.on { color:#16EC06; }
.status-grid b.off { color:#8a8a93; }
.status-score h2 { font-size:22px; margin:8px 0 0; font-weight:900; letter-spacing:-.4px; }
.wakes-left { margin:8px 0 14px; font-weight:700; color:#cfcfd4; }
.ctrl-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.ctrl-btn { appearance:none; border:1px solid #2a2a30; background:#1a1a1e; color:#fff; font:inherit; font-weight:800; font-size:15px; border-radius:16px; min-height:52px; padding:12px 10px; cursor:pointer; }
.ctrl-btn:active { background:#2a2a30; }
.ctrl-btn.wake-hint { border-color:#FF8A0055; }
.ctrl-dialog { border:0; border-radius:22px; padding:0; background:#111114; color:#fff; width:min(360px, calc(100vw - 32px)); box-shadow:0 20px 60px #000c; }
.ctrl-dialog::backdrop { background:#000a; }
.ctrl-dialog form { padding:22px; }
.ctrl-dialog-text { font-size:17px; font-weight:700; line-height:1.4; margin:0 0 18px; }
.ctrl-dialog-actions { display:flex; gap:10px; }
.ctrl-cancel, .ctrl-go { flex:1; appearance:none; border:0; border-radius:14px; min-height:46px; font:inherit; font-weight:800; font-size:15px; cursor:pointer; }
.ctrl-cancel { background:#2a2a30; color:#fff; }
.ctrl-go { background:#6B3FD9; color:#fff; }
.health-list, .cmd-list { list-style:none; margin:12px 0 0; padding:0; }
.health-list li, .cmd-list li { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid #1d1d21; font-size:15px; font-weight:700; }
.health-list li:first-child, .cmd-list li:first-child { border-top:0; }
.health-list span, .cmd-meta { color:#8a8a93; font-weight:600; }
.health-list b, .cmd-label { color:#fff; text-align:right; }
.cmd-list li { flex-direction:column; align-items:flex-start; gap:2px; }
.cmd-meta { font-size:13px; }
.status-admin { border:1px solid #6B3FD944; }
.status-admin .lbl { color:#9b7bff; }

/* UX cleanup Oct 15 — contrast, nav clearance, Rough, Car, Admin */
body.w { --muted:#B8B8B8; }
body.w .hint, body.w .time, body.w .sub, body.w .cmd-meta, body.w .lede { color:#B8B8B8; font-size:15px; }
body.w main { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
body.w .foot { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
body.w nav.w-nav { z-index: 40; }
.w-chip { font-size:13px; }
.w-chip b { color:#9b7bff; }
.status-banner.subtle { font-size:14px; font-weight:700; color:#FFB020; background:#FF8A0018; border-radius:12px; padding:10px 12px; margin:0 0 14px; }
.rough-tag { display:inline-block; font-size:11px; font-weight:900; letter-spacing:1px; text-transform:uppercase; padding:4px 9px; border-radius:99px; background:#FFDE0022; color:#FFDE00; border:0; vertical-align:middle; cursor:pointer; }
.spot-score { display:flex; align-items:center; gap:16px; margin-top:10px; }
.ring-sm { position:relative; width:88px; height:88px; flex:none; }
.ring-sm svg { transform:rotate(-90deg); display:block; }
.ring-sm b { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:900; letter-spacing:-1px; }
.spot-copy .band-word { font-size:22px; font-weight:900; margin:0 0 4px; color:var(--c); }
.spot-copy .rec-line, .rec-line { font-size:17px; font-weight:700; margin:0; color:#fff; }
.sub-line { display:block; margin-top:4px; font-size:15px; font-weight:600; color:#B8B8B8; }
.plain-grid b { font-size:20px; }
.batt-row { display:flex; align-items:center; gap:8px; margin-top:2px; }
.batt-ring { width:28px; height:28px; transform:rotate(-90deg); }
.batt-ring .ring-track, .batt-ring .ring-fill { fill:none; }
.wakes-left { margin:8px 0 14px; font-weight:700; font-size:15px; color:#cfcfd4; }
.status-controls { margin-bottom:28px; padding-bottom:8px; }
.admin-badge { display:inline-block; font-size:11px; font-weight:900; letter-spacing:1.4px; text-transform:uppercase; padding:5px 10px; border-radius:99px; background:#6B3FD922; color:#9b7bff; margin:0 0 10px; }
.admin-w .page-h { color:#9b7bff; }
.admin-user { padding:12px 0; border-top:1px solid #1d1d21; }
.admin-user:first-of-type { border-top:0; }
.admin-fold { margin-top:12px; color:#B8B8B8; font-size:14px; font-weight:700; }
.admin-pre { font-size:11px; overflow:auto; max-height:240px; background:#0a0a0c; padding:10px; border-radius:12px; color:#cfcfd4; }
body.w .hero .sentry { font-size:28px; }

body.w .park-wrong { margin: 8px 0 0; }
body.w .park-wrong .seg-btn { min-height: 30px; font-size: 13px; padding: 0 12px; background: transparent; color: #8a8a93; border: 1px solid #3a3a42; border-radius: 10px; font-weight: 700; }
body.w .park-wrong .seg-btn.on { color: #f5a623; border-color: #f5a623; }


/* Home: tintable car (paint_* from settings) + in-motion tile */
.hero .hero-car {
  margin: 18px 0 0;
  display: flex;
  justify-content: center;
}
.hero .hero-car .car {
  width: min(72vw, 220px);
  height: auto;
  display: block;
}
.hero.is-driving {
  margin-bottom: 18px;
}
.hero .motion-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 28px 16px 8px;
  min-height: 280px;
  justify-content: center;
}
.hero .motion-tile .hero-car {
  margin: 0;
}
.hero .motion-tile .hero-car .car {
  width: min(78vw, 260px);
}
.hero .motion-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 280px;
}
.hero .motion-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2a2a30;
  color: #fff;
  box-shadow: 0 0 20px rgba(255,255,255,0.08);
}
.hero .motion-line {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #f4f4f4;
}
.hero .motion-line strong {
  font-weight: 900;
  letter-spacing: -0.02em;
}

.status-banner.live { font-size:14px; font-weight:700; color:#1FA97A; background:#1FA97A18; border-radius:12px; padding:10px 12px; margin:0 0 14px; }
.status-progress { font-size:14px; font-weight:600; border-radius:12px; padding:10px 12px; margin:0 0 14px; line-height:1.35; background:#FFFFFF12; }
.status-progress.is-wait { color:#FFB020; }
.status-progress.is-ok { color:#1FA97A; }
.status-progress.is-err { color:#FF5A5A; }