/* Canton tax comparison (js/taxtool.js). Loaded only on those pages.
   Highlight colours validated with the dataviz checker on #16161A:
   A #1A8BE6, B #46A824 (lightness band, chroma, CVD, contrast all pass). */
.tt { --tt-a: #1A8BE6; --tt-b: #46A824; --tt-bar: #3A3A42;
  margin: 28px 0 40px; padding: 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.tt__form { display: grid; gap: 16px; }
@media (min-width: 560px) { .tt__form { grid-template-columns: 1fr 1fr; } }
.tt__field { display: grid; gap: 6px; }
.tt__field label { color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.tt__field input, .tt__field select {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; font: inherit; font-size: 1.05rem;
  color: var(--text); background: var(--bg-soft); border: 1px solid var(--line);
}
.tt__field input:focus-visible, .tt__field select:focus-visible, .tt-bar:focus-visible {
  outline: 2px solid var(--blue-2); outline-offset: 2px;
}
.tt__field--a label::before, .tt__field--b label::before {
  content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: 0;
}
.tt__field--a label::before { background: var(--tt-a); }
.tt__field--b label::before { background: var(--tt-b); }

.tt__cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 24px; }
.tt-card { padding: 18px 20px; border-radius: 16px; background: var(--bg-soft); border-top: 3px solid var(--tt-a); }
.tt-card--b { border-top-color: var(--tt-b); }
.tt-card__name { color: var(--muted); font-weight: 600; font-size: 0.95rem; }
.tt-card__year { font-size: clamp(1.7rem, 4vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.tt-card__meta { color: var(--muted-2); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.tt__diff { margin-top: 18px; font-size: 1.12rem; font-weight: 600; color: var(--text); }
.tt__msg { margin-top: 18px; color: var(--muted); }

.tt__rank { margin-top: 32px; }
.tt__rank h3 { font-size: 1.1rem; margin-bottom: 12px; }
.tt-chart { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tt-bar { display: grid; grid-template-columns: 9.5em 1fr 7em; align-items: center; gap: 10px;
  padding: 3px 4px; border-radius: 6px; font-size: 0.88rem; color: var(--muted-2); }
.tt-bar__track { height: 12px; }
.tt-bar__fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--tt-bar); }
.tt-bar__val { text-align: right; font-variant-numeric: tabular-nums; visibility: hidden; }
.tt-bar:hover, .tt-bar:focus-visible { background: rgba(255,255,255,0.04); color: var(--text); }
.tt-bar:hover .tt-bar__val, .tt-bar:focus-visible .tt-bar__val { visibility: visible; }
.tt-bar.is-a, .tt-bar.is-b { color: var(--text); font-weight: 700; }
.tt-bar.is-a .tt-bar__val, .tt-bar.is-b .tt-bar__val { visibility: visible; }
.tt-bar.is-a .tt-bar__fill { background: var(--tt-a); }
.tt-bar.is-b .tt-bar__fill { background: var(--tt-b); }
@media (max-width: 560px) {
  .tt { padding: 16px; }
  .tt-bar { grid-template-columns: 7.2em 1fr 6.2em; gap: 6px; font-size: 0.8rem; }
}

.tt__table { margin-top: 14px; }
.tt__table summary { cursor: pointer; color: var(--blue-2); font-weight: 600; }
.tt__table table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
.tt__table th, .tt__table td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--line); }
.tt__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.tt__source { margin-top: 18px; color: var(--muted-2); font-size: 0.88rem; }
.tt__check { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--muted); font-weight: 600; font-size: 0.95rem; cursor: pointer; }
.tt__check input { width: 20px; height: 20px; accent-color: var(--tt-a); }
.tt__field[hidden] { display: none; }