/* ============================================================================
   DSR skin - the tool-template redesign (Sept 2026).
   Loaded AFTER the v6.7 stylesheet, so plain cascade wins most fights and
   !important is reserved for rules the old sheet itself marked !important
   (body theme classes, forced-white text families).

   The design (from PREVIEW - DSR on the tool template (fixed).html):
   white app body that melts into the host page's white stage, ONE dark
   panel (#10141a) with a Tyreloop-blue top edge holding the whole tool,
   blue-grey card surfaces, blue controls, verdict-tag fold-away report
   sections. TD red stays for danger states and the shop CTA only.
   ========================================================================= */

:root {
  --sk-panel: #10141a;
  --sk-deep:  #141a22;
  --sk-card:  #1a212b;
  --sk-card2: #16233a;
  --sk-line:  #333d49;
  --sk-line2: #2a3441;
  --sk-track: #232c37;
  --sk-blue:  #2563eb;
  --sk-blue-d:#1d4ed8;
  --sk-bluelt:#7fb4ff;
  --sk-ink:   #e8ebef;
  --sk-mut:   #9aa3ad;
}

/* ---- 1. the app body goes white (the host stage is white) ----------------- */
/* the engine re-adds body.theme-* with dark gradients (!important) after each
   report, so every theme class is matched here and out-shouted */
body,
body.theme-safe, body.theme-caution, body.theme-warning, body.theme-danger {
  background: #ffffff !important;
  color: #171717;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---- 2. page furniture the host page already provides --------------------- */
.skip-link, .breadcrumbs, .page-header, .hero-intro, .quick-answers,
.related-tools, .shop-cta-panel { display: none !important; }

/* ---- 3. the container becomes THE dark panel ------------------------------ */
.container {
  background: var(--sk-panel);
  border: 2px solid #171717;
  border-top: 4px solid var(--sk-blue);
  border-radius: 12px;
  padding: 16px 14px 20px;
  color: var(--sk-ink);
  /* shift the var-driven surfaces from neutral grey to the blue-grey family */
  --wl-bg: var(--sk-deep);
  --wl-card-bg: #161d27;
}

/* ---- 4. setup controls, preview style ------------------------------------- */
.setup-panel { background: transparent; border: 0; padding: 0; }

.setup-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--sk-mut);
  margin: 16px 0 8px;
}
.setup-label .step { display: none; }

.input-group select, .input-group input,
.advanced-input select, .advanced-input input {
  background: var(--sk-card);
  border: 1.5px solid var(--sk-line);
  border-radius: 9px;
  color: #fff;
  font-weight: 600;
}
.input-group select:focus, .input-group input:focus,
.advanced-input select:focus, .advanced-input input:focus {
  border-color: var(--sk-bluelt);
  outline: none;
}
.input-group label { color: var(--sk-mut) !important; font-weight: 700; }

.gps-detect-btn {
  border: 1.5px dashed #3a4552;
  border-radius: 9px;
  color: var(--sk-bluelt);
}
.gps-detect-btn:hover { border-color: var(--sk-bluelt); color: var(--sk-bluelt); }
.gps-or-divider { color: var(--sk-mut); }

.vehicle-btn {
  background: var(--sk-card);
  border: 1.5px solid var(--sk-line);
  border-radius: 9px;
  color: #c9d1d9;
}
.vehicle-btn:hover { border-color: #4a5766; }
.vehicle-btn.active {
  border-color: var(--sk-bluelt);
  background: var(--sk-card2);
  color: #fff;
}

.vehicle-specs { background: var(--sk-deep); border: 1.5px solid var(--sk-line2); border-radius: 9px; }

.toggle-switch { background: var(--sk-track); }
.toggle-switch.active { background: var(--sk-blue); }

.advanced-panel { background: var(--sk-deep); border-radius: 9px; }

/* the surfaced tyre row skin.js builds (proxies adv-grade / adv-tread) */
.sk-tyres-row { display: flex; gap: 8px; }
.sk-tyres-row select {
  flex: 1; min-width: 0;
  background: var(--sk-card);
  border: 1.5px solid var(--sk-line);
  border-radius: 9px;
  color: #fff; font-weight: 600;
  padding: 12px 11px; font-size: 15px; font-family: inherit;
}
.sk-tyres-row select:focus { border-color: var(--sk-bluelt); outline: none; }
.sk-tyres-note { font-size: 12.5px; color: var(--sk-mut); margin-top: 6px; }
.sk-tyres-flag { color: #fbbf24; text-transform: none; letter-spacing: 0; font-weight: 700; }

/* generate goes Tyreloop blue */
.generate-btn {
  background: var(--sk-blue);
  border-radius: 9px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2.5px;
  font-size: 18px;
}
.generate-btn:hover:not(:disabled) { background: var(--sk-blue-d); }
.generate-btn:disabled { background: var(--sk-track); color: #5c6773; }
.share-btn { border-radius: 9px; }

/* the sticky mobile generate bar fades into the PANEL colour, not old black */
@media (max-width: 600px) {
  .generate-bar { background: linear-gradient(to top, var(--sk-panel) 70%, transparent); }
}

/* ---- 5. loading becomes an inline strip under the generate bar ------------ */
/* (position:fixed centres in the iframe's full height - thousands of px down.
   skin.js moves #loading after .generate-bar; this restyles it in place) */
.loading-overlay {
  position: static;
  inset: auto;
  background: none;
  display: none;
  padding: 14px 0 2px;
}
.loading-overlay.show { display: flex; align-items: center; justify-content: center; gap: 12px; }
.loading-spinner { width: 26px; height: 26px; border-width: 3px; border-top-color: var(--sk-bluelt); margin: 0; }
.loading-text { font-size: 15px; letter-spacing: 2px; }

/* ---- 6. the baseline preview chip (skin.js renders into #preview-card) ---- */
.sk-prev {
  display: flex; align-items: center; gap: 12px;
  background: var(--sk-card2);
  border: 1.5px solid #2c4a75;
  border-radius: 9px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 13.5px; color: var(--sk-ink);
}
.sk-prev small { color: var(--sk-mut); display: block; font-size: 11.5px; margin-top: 2px; }
.sk-minring {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(var(--sk-bluelt) calc(var(--pct) * 1%), var(--sk-track) 0);
  display: flex; align-items: center; justify-content: center;
}
.sk-minring i {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--sk-card2);
  font-style: normal; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: var(--sk-bluelt);
}

/* ---- 7. the report ---------------------------------------------------------*/
/* header slims down: the summary panel's ring is the score display */
.report-header { background: var(--sk-deep); border: 1.5px solid var(--sk-line2); }
.report-header .report-safety-score { display: none; }

.summary-panel { background: var(--sk-deep); border: 1.5px solid var(--sk-line2); }

/* baseline vs yours (skin.js appends into the summary panel) */
.sk-delta {
  margin: 12px 14px; padding: 10px 12px;
  background: var(--sk-panel);
  border: 1.5px solid var(--sk-line2);
  border-radius: 9px;
}
.sk-delta .pills {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 12.5px; color: var(--sk-mut); font-weight: 700; flex-wrap: wrap;
}
.sk-delta .pills b { color: var(--sk-bluelt); font-size: 14.5px; }
.sk-delta .pills .you b { color: #f59e0b; }
.sk-delta .pills .arr { color: #5c6773; }
.sk-delta em {
  display: block; font-style: normal; margin-top: 5px; text-align: center;
  font-size: 12px; color: #c9d1d9;
}

/* report cards fold away behind verdict-tagged summaries */
details.dacc {
  background: var(--sk-deep);
  border: 1.5px solid var(--sk-line2);
  border-radius: 10px;
  overflow: hidden;
}
.report-grid > details.dacc { margin: 0; }
.report-grid > details.dacc.span-2 { grid-column: span 2; }
@media (max-width: 700px) { .report-grid > details.dacc.span-2 { grid-column: span 1; } }
details.dacc > summary {
  list-style: none; cursor: pointer;
  padding: 12px 13px;
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 13.5px; color: var(--sk-ink);
  letter-spacing: .02em;
}
details.dacc > summary::-webkit-details-marker { display: none; }
details.dacc[open] { border-color: #2c4a75; }
details.dacc .chev { margin-left: auto; color: #5c6773; font-size: 12px; transition: transform .15s; flex: 0 0 auto; }
details.dacc .dtag + .chev { margin-left: 0; }
details.dacc[open] .chev { transform: rotate(180deg); }
.dtag {
  margin-left: auto;
  font-size: 10.5px; font-weight: 800;
  border-radius: 5px; padding: 3px 8px; white-space: nowrap;
}
.dtag.warn { background: #3a2c12; color: #fbbf24; }
.dtag.ok   { background: #123528; color: #34d399; }
.dtag.info { background: var(--sk-card2); color: var(--sk-bluelt); }
/* the wrapped card sheds its own chrome; the details element is the card */
details.dacc > .report-card,
details.dacc > .score-breakdown { border: 0 !important; background: transparent !important; margin: 0 !important; border-radius: 0 !important; }
details.dacc > .report-card .card-title { display: none; }
details.dacc > .report-card, details.dacc > .score-breakdown { padding-top: 2px; }

/* the product line inside the stopping-distance card */
.sk-prodline {
  background: #241a1c;
  border-left: 3px solid #c41230;
  border-radius: 0 8px 8px 0;
  padding: 10px 12px; margin-top: 11px;
  font-size: 13px; color: #e8d5d8;
}
.sk-prodline a { color: #ff8fa0; font-weight: 800; text-decoration: none; }
.sk-prodline a:hover { text-decoration: underline; }

/* remaining big report surfaces onto the blue-grey family */
.report-card { background: #161d27; border: 1.5px solid var(--sk-line2); }
.score-breakdown { border-radius: 10px; }
.preview-card { background: transparent; border: 0; padding: 0; }
.hero-timeline, .impairment-panel, .school-zone-panel { border: 1.5px solid var(--sk-line2); }

/* ---- 8. town-first layout (option 2, 3 Sept 2026) ------------------------- */
.sk-hidden { display: none !important; }
.sk-soft { color: #fbbf24; text-transform: none; letter-spacing: 0; }

/* the tool's masthead: Tyreloop blue, ties to the panel's blue top edge */
.sk-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 27px;
  letter-spacing: 2.5px;
  line-height: 1.1;
  margin: 2px 0 14px;
}
/* the old sheet's forced-white text rules carry !important; the masthead's
   blue has to shout louder */
.setup-panel .sk-title, .container .sk-title { color: var(--sk-bluelt) !important; }
@media (max-width: 600px) { .sk-title { font-size: 23px; } }

/* the location label carries the quiet GPS link */
.sk-loc-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sk-gps, .gps-detect-btn.sk-gps {
  background: none; border: 0; padding: 0; min-height: 0; width: auto;
  color: var(--sk-bluelt); font-size: 12px; font-weight: 700;
  letter-spacing: 0; text-transform: none; cursor: pointer;
}
.sk-gps:hover { text-decoration: underline; border: 0; }
.gps-or-divider { display: none; }

/* two selects side by side once the time picker moves out */
.setup-section:first-of-type .location-row { display: flex; gap: 8px; }
.setup-section:first-of-type .location-row .input-group { flex: 1; min-width: 0; }
/* their all-caps micro labels repeat the question; the selects say it all */
.setup-section:first-of-type .location-row .input-group > label { display: none; }

/* make-it-yours rows */
.sk-rows-wrap { margin-top: 6px; }
.sk-rows { display: flex; flex-direction: column; gap: 7px; }
.srow {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--sk-deep); border: 1.5px solid var(--sk-line2);
  border-radius: 9px; padding: 11px 12px;
  font-size: 13.5px; cursor: pointer;
}
.srow b { color: var(--sk-ink); font-weight: 700; }
.srow .val { color: var(--sk-mut); }
.srow .chg {
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  color: var(--sk-bluelt); font-size: 12.5px; font-weight: 700; flex: 0 0 auto;
}
.sk-exp {
  margin: -2px 0 4px; padding: 12px;
  background: var(--sk-deep); border: 1.5px solid #2c4a75; border-radius: 9px;
}
.sk-exp .setup-label:first-child { margin-top: 0; }

/* selections carry no pictures */
.vehicle-btn-icon { display: none; }
.vehicle-btn { padding: 11px 8px; }
.vehicle-btn .vehicle-btn-label { font-size: 12.5px; font-weight: 700; }
.fleet-toggle-icon { display: none; }
@media (max-width: 600px) {
  /* the old horizontal icon strip becomes a wrapping row of text pills */
  .vehicle-grid { display: flex !important; flex-wrap: wrap !important; overflow: visible !important; }
  .vehicle-grid .vehicle-btn { flex: 0 0 auto; }
}

/* pieces that now live inside the More drawer keep tidy spacing */
.sk-exp .towing-toggle { margin-top: 0; }
.sk-exp .vehicle-specs-panel { margin-top: 12px; }

/* ---- 9. credit under the panel (on the white body) ------------------------ */
.sk-credit {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  font-size: 13px; color: #4a4a4a;
  max-width: 1000px; margin: 0 auto; padding: 10px 8px 0;
}