/* Comparison presentation. Shell geometry comes from tool-scaffold.css,
   the static counterpart of React SectionCard / REPORT_CARD. */
#zone-comparison [hidden] { display: none !important; }
#zone-comparison .zc-content { display: grid; gap: 16px; align-content: start; }
/* ReportCallout grey recipe (inner.jsx): one quiet surface on the page. */
#zone-comparison .zc-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);
}
#zone-comparison .zc-assumption > i { margin-top: 1px; color: var(--color-action); font-size: 18px; line-height: 1; }
#zone-comparison .zc-scope {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-body);
  line-height: 1.45;
}
#zone-comparison .zc-overview-heading {
  margin: 0 0 12px;
  color: var(--color-ink);
  font-size: var(--text-card-h);
  font-weight: var(--text-card-h--font-weight);
  line-height: var(--text-card-h--line-height);
  letter-spacing: var(--text-card-h--letter-spacing);
}
#zone-comparison .zc-navigation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--spacing-control) var(--spacing-control);
  gap: 4px;
  align-items: center;
  margin: 0 -4px var(--spacing-card-y);
}
#zone-comparison .zc-tabs {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 4px;
}
#zone-comparison .zc-tabs::-webkit-scrollbar { display: none; }
#zone-comparison #zc-previous { grid-column: 2; grid-row: 1; }
#zone-comparison #zc-next { grid-column: 3; grid-row: 1; }
/* Exact ReportPill.css control recipe; no header-specific painted inset. */
#zone-comparison .zc-tab {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--spacing-control);
  min-width: var(--spacing-control);
  max-width: 100%;
  padding: 3px 12px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-muted);
  font-family: inherit;
  font-size: var(--text-compact);
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  text-decoration: none;
}
#zone-comparison .zc-tab[aria-selected=true] {
  background: var(--color-action);
  color: var(--color-surface);
  text-decoration: none;
}
#zone-comparison .zc-scroll {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-control);
  min-height: var(--spacing-control);
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-muted);
  font-size: 16px;
  line-height: 1;
}
#zone-comparison .zc-scroll:disabled { color: var(--color-faint); cursor: default; }
#zone-comparison :is(.zc-tab, .zc-scroll, .zc-open-city, .zc-row-arrow) {
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
#zone-comparison :is(button, a, [role=tabpanel]):focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
  box-shadow: none;
}
#zone-comparison .zc-tab[aria-selected=true]:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-surface);
}
#zone-comparison .zc-overview-caption {
  margin: 0 0 var(--spacing-card-y);
  color: var(--color-muted);
  font-size: var(--text-compact);
  line-height: var(--text-compact--line-height);
}
/* Related outcomes form open groups, like the report's specs and insights.
   Charge / restriction groups sit together when both exist; no verdicts merge. */
#zone-comparison #zone-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px var(--spacing-card-y-lg);
}
#zone-comparison .zc-result-group { min-width: 0; }
#zone-comparison :is(.zc-group-heading, .zc-guidance-heading) {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--color-ink);
  font-size: var(--text-card-title);
  font-weight: 700;
  line-height: 1.25;
}
#zone-comparison :is(.zc-group-heading, .zc-guidance-heading) > i {
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}
#zone-comparison .zc-group-count {
  margin-left: auto;
  padding-left: 8px;
  flex: 0 0 auto;
  color: var(--color-muted);
  font-size: var(--text-body-sm);
  font-weight: 400;
  line-height: var(--text-body-sm--line-height);
}
#zone-comparison .zc-group-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--spacing-card-y-lg);
}
#zone-comparison .zc-overview-row { min-width: 0; border-top: 1px solid var(--color-row-border); }
#zone-comparison .zc-open-city {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  align-content: center;
  gap: 4px 12px;
  width: calc(100% + 16px);
  min-height: var(--spacing-control);
  height: 100%;
  margin-inline: -8px;
  padding: 14px 8px;
  border: 0;
  border-radius: var(--radius-row);
  background: transparent;
  font-family: inherit;
  text-align: left;
}
#zone-comparison .zc-open-city:focus-visible { background: var(--color-row); }
#zone-comparison .zc-zone-name {
  grid-column: 1;
  color: var(--color-ink);
  font-size: var(--text-row-title);
  font-weight: 700;
  line-height: var(--text-row-title--line-height);
}
#zone-comparison .zc-overview-result { grid-column: 1; min-width: 0; }
#zone-comparison .zc-status {
  color: var(--color-muted);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--text-body--line-height);
  font-variant-numeric: tabular-nums;
}
#zone-comparison .zc-charge { color: var(--color-ink); font-weight: 600; white-space: nowrap; }
#zone-comparison .zc-evidence {
  display: block;
  margin: 4px 0 0;
  color: var(--color-muted);
  font-size: var(--text-compact);
  line-height: var(--text-compact--line-height);
}
#zone-comparison .zc-row-arrow {
  grid-column: 2;
  grid-row: 1 / 3;
  color: var(--color-mid);
  font-size: 16px;
  line-height: 1;
}
#zone-comparison .zc-overview-guidance {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--color-card-border);
}
#zone-comparison .zc-overview-note {
  margin: 0;
  max-width: 68ch;
  color: var(--color-muted);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}
#zone-comparison .zc-overview-note + .zc-overview-note { margin-top: 16px; }
#zone-comparison .zc-overview-note button {
  min-height: var(--spacing-control);
  color: var(--color-brand-hover);
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#zone-comparison #zc-panel-overview .zc-sources {
  gap: 0 var(--spacing-card-x);
  margin-top: 12px;
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
}
#zone-comparison #zc-panel-overview .zc-sources a {
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-control);
  color: var(--color-brand-hover);
}
@media (min-width: 768px) {
  #zone-comparison #zone-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #zone-comparison .zc-result-group { grid-column: 1 / -1; }
  #zone-comparison .zc-group-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #zone-comparison .zc-result-group--paired { grid-column: auto; }
  #zone-comparison .zc-result-group--paired .zc-group-list { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  #zone-comparison [data-outcome-group=not_affected] .zc-group-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (hover: hover) {
  #zone-comparison .zc-tab:hover { background: var(--color-chip); color: var(--color-ink); }
  #zone-comparison .zc-tab[aria-selected=true]:hover { background: var(--color-action-hover); color: var(--color-surface); }
  #zone-comparison .zc-scroll:not(:disabled):hover { background: var(--color-chip); color: var(--color-ink); }
  #zone-comparison .zc-open-city:hover { background: var(--color-row); }
  #zone-comparison .zc-open-city:hover .zc-row-arrow { color: var(--color-ink); }
  #zone-comparison #zc-panel-overview :is(.zc-overview-note button, .zc-sources a):hover { color: var(--color-action-hover); }
}
#zone-comparison .zc-tab[aria-selected=true]:active { background: var(--color-action-hover); }
#zone-comparison :is(.zc-open-city, .zc-scroll:not(:disabled)):active { background: var(--color-chip); }
#zone-comparison .zc-scheme + .zc-scheme { border-top: 1px solid var(--color-card-border); margin-top: 28px; padding-top: 28px; }
#zone-comparison .zc-scheme-name { margin: 0 0 10px; font-size: var(--text-card-title); line-height: 1.4; font-weight: 700; color: var(--color-muted); }
#zone-comparison .zc-result { margin: 0; font-size: var(--text-card-h); font-weight: var(--text-card-h--font-weight); line-height: var(--text-card-h--line-height); letter-spacing: var(--text-card-h--letter-spacing); color: var(--color-ink); }
#zone-comparison .zc-explanation { margin: 12px 0 0; max-width: 68ch; font-size: var(--text-body); line-height: var(--text-body--line-height); color: var(--color-muted); }
#zone-comparison .zc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin: 12px 0 20px; }
#zone-comparison .zc-actions :is(a, button) { display: inline-flex; align-items: center; min-height: var(--spacing-control); font-size: var(--text-compact); font-weight: 600; color: var(--color-action); text-decoration: underline; text-underline-offset: 3px; text-align: left; }
#zone-comparison .zc-actions .zc-map-link { color: var(--color-muted); font-weight: 500; }
#zone-comparison .zc-facts { display: grid; gap: 14px; border-top: 1px solid var(--color-card-border); padding-top: 20px; }
#zone-comparison .zc-facts > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; }
#zone-comparison .zc-facts dt { font-size: var(--text-body-sm); line-height: var(--text-body-sm--line-height); color: var(--color-muted); }
#zone-comparison .zc-facts dd { margin: 0; font-size: var(--text-body); line-height: var(--text-body--line-height); color: var(--color-ink); }
#zone-comparison .zc-sources { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; font-size: var(--text-body-sm); line-height: var(--text-body-sm--line-height); }
#zone-comparison .zc-sources a, #zone-comparison .zc-note a { color: var(--color-action); text-decoration: underline; text-underline-offset: 3px; }
#zone-comparison .zc-review-date { margin-top: 8px; color: var(--color-muted); font-size: var(--text-caption); line-height: var(--text-caption--line-height); }
#zone-comparison .zc-note { margin-top: 24px; border-top: 1px solid var(--color-card-border); padding-top: 20px; color: var(--color-muted); font-size: var(--text-body); line-height: var(--text-body--line-height); }
#zone-comparison .zc-note h3 { font-size: var(--text-card-title); font-weight: 700; color: var(--color-ink); margin-bottom: 14px; }
#zone-comparison .zc-note p + p { margin-top: 12px; }
#zone-comparison .zc-note .zc-facts { border: 0; padding-top: 0; }
#zone-comparison .zc-note .zc-facts dd { color: var(--color-muted); }
#zone-comparison .zc-footnote { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--color-card-border); font-size: var(--text-compact); line-height: var(--text-compact--line-height); color: var(--color-muted); }
@media (max-width: 600px) {
  #zone-comparison .zc-facts > div { grid-template-columns: 1fr; gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  #zone-comparison :is(.zc-tab, .zc-scroll, .zc-open-city, .zc-row-arrow) { transition: none; }
}
@media print {
  #zone-comparison.tool-shell { break-inside: auto; }
  #zone-comparison .zc-navigation, #zone-comparison #zc-panel-overview, #zone-comparison .zc-map-link { display: none !important; }
  #zone-comparison .zc-panel[hidden], #zone-comparison .zc-note[hidden]:not(.hidden) { display: block !important; }
  #zone-comparison .zc-panel + .zc-panel { margin-top: 24px; }
  #zone-comparison .zc-scheme { break-inside: avoid; }
}