/* Static counterpart to the report's FuelCostCalculator and inner-card pieces.
   SectionCard owns the shell; use report pills, label/value roles and open groups
   inside it. Shared tokens are mirrored from src/styles/tokens.css. */
#cost-simulator { color: var(--color-ink); }
#cost-simulator [hidden] { display: none !important; }
#cost-simulator > .min-w-0 { display: grid; gap: 16px; align-content: start; }
#cost-simulator .tool-card { min-width: 0; }
#cost-simulator :is(p, h3, span, button, a, strong, legend) { overflow-wrap: anywhere; }

/* ReportCallout: one neutral surface above the white section card. */
#cost-simulator .cs-assumption {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-card-sm);
  background: var(--color-row);
}
#cost-simulator .cs-assumption > i { margin-top: 1px; color: var(--color-action); font-size: 18px; line-height: 1; }
#cost-simulator #cs-private-car {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.45;
}

/* Report specs: quiet labels, semibold values, full-size editable controls. */
#cost-simulator .cs-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: var(--text-body-sm);
  font-weight: 400;
  line-height: var(--text-body-sm--line-height);
}
#cost-simulator .cs-field > span { color: var(--color-muted); }
/* Extra ID specificity keeps these above foundations' plate exclusions. */
#cost-simulator :is(input:not([type=checkbox]), select):not(#plate-input) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--spacing-control);
  padding: 10px 12px;
  border: 1px solid var(--color-btn-border);
  border-radius: var(--radius-row);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--text-control);
  font-weight: 600;
  line-height: var(--text-control--line-height);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--duration-fast);
}
#cost-simulator :is(input:not([type=checkbox]), select):not(#plate-input):hover { border-color: var(--color-btn-border-hover); }
#cost-simulator :is(input:not([type=checkbox]), select):not(#plate-input):focus {
  border-color: var(--color-action);
  outline: none;
}
#cost-simulator :is(input:not([type=checkbox]), select):not(#plate-input):focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
  border-color: var(--color-action);
}
#cost-simulator input[type=checkbox] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--color-action);
}
#cost-simulator :is(button, input, select, summary, a):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
#cost-simulator :is(input, select):not(#plate-input)[aria-invalid=true] { border-color: var(--color-danger-fg); }
#cost-simulator .cs-muted {
  margin-top: 12px;
  color: var(--color-muted);
  font-size: var(--text-body-sm);
  font-weight: 400;
  line-height: var(--text-body-sm--line-height);
}

#cost-simulator .cs-selector { margin-bottom: 24px; }
#cost-simulator .cs-selector .cs-field > span {
  color: var(--color-ink);
  font-size: var(--text-card-title);
  font-weight: 700;
  line-height: 1.4;
}
#cost-simulator .cs-selector .cs-field { gap: 12px; }
#cost-simulator .cs-subhead {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-card-title);
  font-weight: 700;
  line-height: var(--text-card-title--line-height);
}

/* One active driving pattern, using the report's selected-pill recipe. */
#cost-simulator #cs-scenarios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}
#cost-simulator #cs-scenarios button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--spacing-control);
  max-width: 100%;
  min-height: var(--spacing-control);
  padding: 3px 12px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-muted);
  font-family: inherit;
  font-size: var(--text-compact);
  line-height: 1.3;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
#cost-simulator #cs-scenarios button:hover {
  background: var(--color-chip);
  color: var(--color-ink);
}
#cost-simulator #cs-scenarios button[aria-pressed=true] {
  background: var(--color-action);
  color: var(--color-surface);
  font-weight: 600;
  text-decoration: none;
}
#cost-simulator #cs-scenarios button[aria-pressed=true]:hover {
  background: var(--color-action-hover);
}
#cost-simulator #cs-scenarios button[aria-pressed=true]:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-surface);
}

#cost-simulator .cs-workspace {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}
#cost-simulator .cs-workspace > * { min-width: 0; }
#cost-simulator #cs-print-context { display: none; }
/* A compact visual echo keeps the current price beside narrow-screen edits.
   The complete result and its single live announcement remain below. */
#cost-simulator #cs-live-estimate {
  position: sticky;
  top: calc(var(--mw-header-height, 63px) + 8px);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-card-border);
  background: var(--color-surface);
}
#cost-simulator #cs-live-label {
  color: var(--color-muted);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
}
#cost-simulator #cs-live-total {
  color: var(--color-ink);
  font-size: var(--text-stat-sm);
  font-weight: var(--text-stat-sm--font-weight);
  line-height: var(--text-stat-sm--line-height);
  letter-spacing: var(--text-stat-sm--letter-spacing);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
#cost-simulator #cs-controls :is(input, button, summary) {
  scroll-margin-top: calc(var(--mw-header-height, 63px) + 88px);
}
#cost-simulator .cs-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 24px;
}
#cost-simulator .cs-fields > * { min-width: 0; }
#cost-simulator .cs-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--spacing-control);
  margin-top: 12px;
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--text-body--line-height);
}
#cost-simulator .cs-stepper { display: flex; align-items: end; gap: 8px; }
#cost-simulator .cs-stepper .cs-field { flex: 1; }
#cost-simulator .cs-step-buttons { display: flex; flex-shrink: 0; gap: 4px; }
#cost-simulator .cs-step-buttons button {
  width: var(--spacing-control);
  height: var(--spacing-control);
  border: 1px solid var(--color-btn-border);
  border-radius: 9999px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}
#cost-simulator .cs-step-buttons button:hover {
  border-color: var(--color-btn-border-hover);
  background: var(--color-chip);
}

/* Disclosures and reset share the report's quiet control hierarchy. */
#cost-simulator #cs-driving-times { margin-top: 20px; border-top: 1px solid var(--color-row-border); }
#cost-simulator summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  min-height: var(--spacing-control);
  padding: 14px 0;
  cursor: pointer;
  color: var(--color-ink);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--text-body--line-height);
}
#cost-simulator summary:hover { color: var(--color-action-hover); }
#cost-simulator summary::-webkit-details-marker { display: none; }
#cost-simulator summary > i {
  flex-shrink: 0;
  color: var(--color-muted);
  font-size: 16px;
  line-height: 1;
  transition: transform var(--duration-fast);
}
#cost-simulator details[open] > summary > i { transform: rotate(180deg); }
#cost-simulator #cs-time-summary {
  display: block;
  margin-top: 4px;
  color: var(--color-muted);
  font-size: var(--text-body-sm);
  font-weight: 400;
  line-height: var(--text-body-sm--line-height);
  font-variant-numeric: tabular-nums;
}

#cost-simulator .cs-drive { margin-top: 20px; min-width: 0; padding-bottom: 4px; }
#cost-simulator .cs-drive .cs-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#cost-simulator .cs-drive legend {
  margin-bottom: 8px;
  color: var(--color-ink);
  font-size: var(--text-row-title);
  font-weight: 700;
  line-height: var(--text-row-title--line-height);
}
#cost-simulator #cs-intermediate > p {
  margin: 12px 0 8px;
  color: var(--color-muted);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
}
#cost-simulator .cs-date-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#cost-simulator .cs-date-chips button {
  min-height: var(--spacing-control);
  max-width: 100%;
  padding: 3px 12px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-compact);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
#cost-simulator .cs-date-chips button:hover { background: var(--color-chip); color: var(--color-ink); }
#cost-simulator .cs-date-chips button[aria-pressed=true] {
  background: var(--color-action);
  color: var(--color-surface);
  font-weight: 600;
  text-decoration: none;
}
#cost-simulator .cs-date-chips button[aria-pressed=true]:hover { background: var(--color-action-hover); color: var(--color-surface); }
#cost-simulator .cs-date-chips button[aria-pressed=true]:focus-visible { box-shadow: inset 0 0 0 2px var(--color-surface); }

#cost-simulator .cs-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--spacing-control);
  margin-top: 8px;
  padding: var(--spacing-pill-y) var(--spacing-pill-x);
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-compact);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
#cost-simulator .cs-text-button:hover { background: var(--color-chip); color: var(--color-ink); }
#cost-simulator #cs-try-saving {
  background: var(--color-chip);
  color: var(--color-ink);
}
#cost-simulator #cs-try-saving:hover { background: var(--color-row-border); }
#cost-simulator .cs-sources a {
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-control);
  max-width: 100%;
  color: var(--color-action-hover);
  font-size: var(--text-compact);
  font-weight: 600;
  line-height: var(--text-compact--line-height);
  text-decoration: none;
  text-underline-offset: 3px;
}
#cost-simulator .cs-sources a:hover { text-decoration: underline; }
#cost-simulator .cs-errors {
  margin-top: 12px;
  color: var(--color-danger-fg);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
}

/* Report result ladder: subgroup heading, tabular statistic, quiet context.
   Non-numeric outcomes keep the inner-card title role instead of a stat. */
#cost-simulator #cs-result {
  border-top: 1px solid var(--color-card-border);
  padding-top: 24px;
}
#cost-simulator #cs-result-heading {
  margin: 0 0 16px;
  color: var(--color-ink);
  font-size: var(--text-card-title);
  line-height: 1.4;
  font-weight: 700;
}
#cost-simulator #cs-total {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-stat);
  line-height: var(--text-stat--line-height);
  letter-spacing: var(--text-stat--letter-spacing);
  font-weight: var(--text-stat--font-weight);
  font-variant-numeric: tabular-nums;
}
#cost-simulator #cs-result:is([data-kind=restricted], [data-kind=unknown], [data-kind=neutral], [data-kind=invalid], [data-kind=unavailable]) #cs-total {
  font-size: var(--text-card-h);
  line-height: var(--text-card-h--line-height);
  letter-spacing: var(--text-card-h--letter-spacing);
  font-weight: var(--text-card-h--font-weight);
}
#cost-simulator #cs-basis {
  margin: 6px 0 0;
  color: var(--color-muted);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
  font-weight: 400;
}
#cost-simulator #cs-calculation {
  margin-top: 16px;
  color: var(--color-ink);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--text-body--line-height);
  font-variant-numeric: tabular-nums;
}
#cost-simulator #cs-outcome-note {
  margin-top: 12px;
  max-width: 68ch;
  color: var(--color-muted);
  font-size: var(--text-body-sm);
  font-weight: 400;
  line-height: var(--text-body-sm--line-height);
}
/* Comparison is an insight row, not another paragraph of results copy. */
#cost-simulator #cs-comparison {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin-top: 16px;
  max-width: 68ch;
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
  font-weight: 400;
}
#cost-simulator #cs-comparison[hidden] { display: none !important; }
#cost-simulator #cs-comparison > i {
  margin-top: 2px;
  color: var(--color-accent-deep);
  font-size: 16px;
  line-height: 1;
}
#cost-simulator #cs-breakdown {
  margin-top: 24px;
  border-top: 1px solid var(--color-row-border);
}
#cost-simulator .cs-detail {
  display: grid;
  gap: 12px;
  padding: 4px 0 8px;
}
#cost-simulator :is(#cs-assumptions, #cs-evidence) {
  margin: 0;
  max-width: 68ch;
  color: var(--color-muted);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
  font-weight: 400;
}
#cost-simulator .cs-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  margin-top: 16px;
}
#cost-simulator .cs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#cost-simulator[data-usage=false] #cs-result { border: 0; padding: 0; }
@media (min-width: 1200px), (min-width: 768px) and (max-width: 1023px) {
  #cost-simulator #cs-live-estimate { display: none; }
  #cost-simulator[data-usage=true] .cs-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 32px;
  }
  #cost-simulator[data-usage=true] #cs-result {
    align-self: start;
    position: sticky;
    top: calc(var(--mw-header-height, 63px) + 24px);
    border-top: 0;
    border-left: 1px solid var(--color-card-border);
    padding: 0 0 0 32px;
  }
}
@media (max-width: 639px) {
  #cost-simulator #cs-scenarios {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  #cost-simulator *, #cost-simulator ::before, #cost-simulator ::after {
    animation: none;
    transition: none;
    scroll-behavior: auto;
  }
}
@media print {
  #cost-simulator :is(.cs-selector, #cs-examples, #cs-controls, #cs-live-estimate, #cs-try-saving, #cs-announcement, #cs-breakdown > summary) { display: none !important; }
  #cost-simulator .cs-workspace { display: block; }
  #cost-simulator #cs-print-context { display: block; margin-bottom: 12px; font-weight: 600; }
  #cost-simulator[data-usage] #cs-result { position: static; border: 0; margin: 0; padding: 0; }
  #cost-simulator #cs-breakdown::details-content { content-visibility: visible; }
  #cost-simulator #cs-breakdown > .cs-detail { display: grid !important; }
  #cost-simulator #cs-comparison > i { display: none; }
  #cost-simulator #cs-comparison { grid-template-columns: minmax(0, 1fr); }
  #cost-simulator .cs-sources a { display: inline; min-height: 0; }
  #cost-simulator .cs-sources a::after { content: ' (' attr(href) ')'; }
  #cost-simulator { break-inside: auto; }
}