/* Comparison surfaces in chameleon greens. Year colours and variation
   colours remain separate: sage/lime identify years, green/red show direction. */
.comparison-metric {
  background: linear-gradient(145deg, rgba(30, 65, 46, .78), rgba(15, 38, 28, .8));
  border-color: var(--line);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .035);
}
.comparison-metric label,
.comparison-metric h2,
.comparison-metric p,
.comparison-metric small { color: var(--muted); }
.comparison-metric > strong { color: var(--ink); }
.comparison-metric h2 { font-size: 12px; line-height: 1.55; }
.comparison-metric p { font-size: 11px; line-height: 1.6; }
.comparison-delta,
.comparison-legend,
.comparison-summary { color: var(--muted); }
.comparison-legend { gap: 10px 20px; }
.comparison-legend .swatch { width: 12px; height: 12px; border-radius: 4px; }
.comparison-legend .bar-2026,
.comparison-bar-pair .bar-2026 { background: #789582; }
.comparison-legend .bar-2027,
.comparison-bar-pair .bar-2027 { background: var(--accent); }
.comparison-tabs {
  background: rgba(7, 25, 18, .65);
  border-color: var(--line);
  border-radius: 12px;
  padding: 5px;
  gap: 5px;
}
.comparison-tabs button,
.comparison-tabs a {
  color: var(--muted);
  border-radius: 8px;
  min-height: 39px;
}
.comparison-tabs button:hover,
.comparison-tabs a:hover { background: #234b37; color: var(--ink); }
.comparison-tabs .active,
.comparison-tabs .active:hover {
  background: var(--brand-control);
  color: #102518;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 14px rgba(111, 210, 88, .14);
}
.comparison-tabs button:focus-visible,
.comparison-tabs a:focus-visible,
.comparison-change-item:focus-visible,
.comparison-table .row-title:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.comparison-bar-row { border-color: var(--line); }
.comparison-bar-label,
.comparison-bar-amount,
.comparison-summary strong { color: var(--ink); }
.comparison-bar-pair .comparison-bar-year { color: var(--muted); }
.comparison-bar-pair .comparison-bar-space { background: #294b38; border-radius: 4px; }
.comparison-bar-pair .bar-2026,
.comparison-bar-pair .bar-2027 { border-radius: 4px; }
.comparison-top-grid > .panel { border-radius: 18px; }
.comparison-change-item {
  color: var(--ink);
  border-color: var(--line);
  padding: 15px 3px;
  border-radius: 5px;
}
.comparison-change-item:hover { background: rgba(184, 241, 90, .055); }
.comparison-change-item small { color: var(--muted); }
.comparison-change-item .comparison-delta small { color: inherit; }
.comparison-toolbar {
  background: rgba(8, 28, 20, .65);
  border-color: var(--line);
  border-radius: 15px;
}
.comparison-toolbar label { color: var(--muted); font-size: 11px; }
.comparison-toolbar input,
.comparison-toolbar select {
  background: #0a2118;
  color: var(--ink);
  border-color: #42644f;
  border-radius: 8px;
  min-height: 42px;
  color-scheme: dark;
}
.comparison-toolbar input::placeholder { color: #8fae99; }
.comparison-toolbar input:focus,
.comparison-toolbar select:focus {
  border-color: var(--accent);
  outline: 2px solid rgba(184, 241, 90, .23);
  outline-offset: 2px;
}
.comparison-toolbar .button { min-height: 42px; }
.comparison-table {
  background: rgba(10, 29, 22, .62);
  border-color: var(--line);
  border-radius: 14px;
  scrollbar-color: #62896f #102b21;
}
.comparison-table th {
  background: #1b3b2b;
  color: #c1d8c5;
  font-size: 10px;
  letter-spacing: .5px;
}
.comparison-table td { color: var(--ink); border-color: var(--line); }
.comparison-table tr:hover td { background: rgba(120, 149, 130, .065); }
.comparison-table button.row-title { color: var(--ink); }
.comparison-table button.row-title:hover { color: #d0f7a0; }
.comparison-table .row-meta,
.comparison-table .comparison-context { color: var(--muted); }
.comparison-badge {
  color: #c7dccb;
  background: #203f31;
  border-color: #45634f;
  border-radius: 6px;
  padding: 4px 7px;
}
.comparison-badge.new,
.comparison-badge.status-new { color: #d6f5ac; background: #2b4325; border-color: #63814d; }
.comparison-badge.removed,
.comparison-badge.status-removed,
.comparison-badge.absent { color: #b9d4cf; background: #213b35; border-color: #45655c; }
.comparison-badge.unmatched,
.comparison-badge.status-unmatched,
.comparison-badge.changed { color: var(--caution); background: #392e25; border-color: #6b5638; }
.comparison-pair > div {
  background: rgba(24, 52, 39, .72);
  border-color: #43634c;
  border-radius: 14px;
}
.comparison-pair > div:last-child {
  background: rgba(39, 58, 29, .6);
  border-color: #607742;
}
.comparison-pair h3,
.comparison-pair label { color: #cedfce; }
.comparison-pair strong { color: var(--ink); }
.comparison-pair small,
.comparison-pair p,
.comparison-notes,
.comparison-context { color: var(--muted); }
.comparison-notes strong,
.comparison-context strong { color: var(--ink); }
.comparison-notes a { color: #d0f7a0; }
.comparison-notes summary { color: var(--ink); }
.comparison-caveat {
  background: rgba(67, 46, 32, .55);
  border-color: #685039;
  border-left-color: var(--caution);
  border-radius: 10px;
  color: #f0d7a5;
}
.comparison-caveat strong { color: #ffe3a5; }
.comparison-missing {
  background: #243c32;
  border-color: #486659;
  border-radius: 10px;
  color: #c1d5c9;
}
.comparison-missing strong { color: #e0f0df; }
.comparison-pair .comparison-missing { background: transparent; }
/* These last rules deliberately outrank surface text colours. */
.comparison-delta.change-up,
.comparison-metric .change-up,
.comparison-table .change-up,
.comparison-change-item .change-up,
.comparison-pair .change-up,
.comparison-summary .change-up,
.comparison-legend .change-up,
.comparison-chart .change-up { color: var(--positive); }
.comparison-delta.change-down,
.comparison-metric .change-down,
.comparison-table .change-down,
.comparison-change-item .change-down,
.comparison-pair .change-down,
.comparison-summary .change-down,
.comparison-legend .change-down,
.comparison-chart .change-down { color: var(--negative); }
.comparison-delta.change-flat,
.comparison-metric .change-flat,
.comparison-table .change-flat,
.comparison-change-item .change-flat,
.comparison-pair .change-flat,
.comparison-summary .change-flat,
.comparison-legend .change-flat,
.comparison-chart .change-flat { color: var(--muted); }
@media (max-width: 700px) {
  .comparison-metric { border-radius: 13px; }
  .comparison-metric h2 { font-size: 11px; }
  .comparison-metric p { font-size: 10px; }
  .comparison-tabs { border-radius: 10px; }
  .comparison-toolbar { border-radius: 12px; }
  .comparison-toolbar input,
  .comparison-toolbar select { font-size: 16px; }
}
@media print {
  .comparison-metric,
  .comparison-table,
  .comparison-pair > div,
  .comparison-pair > div:last-child,
  .comparison-missing,
  .comparison-caveat { background: #fff; border-color: #aaa; box-shadow: none; }
  .comparison-table th { background: #eee; color: #333; }
  .comparison-table td { border-color: #ccc; }
  .comparison-table tr:hover td,
  .comparison-change-item:hover { background: transparent; }
  .comparison-metric label,
  .comparison-metric h2,
  .comparison-metric p,
  .comparison-metric small,
  .comparison-metric > strong,
  .comparison-legend,
  .comparison-bar-label,
  .comparison-bar-amount,
  .comparison-bar-pair .comparison-bar-year,
  .comparison-change-item,
  .comparison-change-item small,
  .comparison-summary,
  .comparison-summary strong,
  .comparison-table td,
  .comparison-table button.row-title,
  .comparison-table .row-meta,
  .comparison-table .comparison-context,
  .comparison-pair h3,
  .comparison-pair label,
  .comparison-pair strong,
  .comparison-pair small,
  .comparison-pair p,
  .comparison-notes,
  .comparison-notes strong,
  .comparison-notes a,
  .comparison-context,
  .comparison-context strong,
  .comparison-caveat,
  .comparison-caveat strong,
  .comparison-missing,
  .comparison-missing strong { color: #222; }
  .comparison-badge { background: #f2f2f2; border-color: #aaa; color: #333; }
  .comparison-bar-pair .comparison-bar-space { background: #eee; }
  .comparison-delta.change-up,
  .comparison-metric .change-up,
  .comparison-table .change-up,
  .comparison-change-item .change-up,
  .comparison-pair .change-up,
  .comparison-summary .change-up,
  .comparison-legend .change-up,
  .comparison-chart .change-up { color: #18753c; }
  .comparison-delta.change-down,
  .comparison-metric .change-down,
  .comparison-table .change-down,
  .comparison-change-item .change-down,
  .comparison-pair .change-down,
  .comparison-summary .change-down,
  .comparison-legend .change-down,
  .comparison-chart .change-down { color: #b42318; }
  .comparison-change-item .comparison-delta small { color: inherit; }
}