/* Rebate calculator: the year blocks and the tax-back bars. Everything else (cards, tabs, rows, notes,
   reading sections) comes from tax.css, so the two calculators look like one family. */
.q--years { border-top: 1px solid var(--hair); padding-bottom: 8px; }
.q--years h2.q-label { margin: 0 0 6px; }
.yrs { display: grid; gap: 10px; margin-top: 16px; }

.yr { border: 1px solid var(--hair); border-radius: 16px; background: #fff; }
.yr[hidden] { display: none; }
.yr > summary { display: grid; grid-template-columns: auto 1fr auto 14px; align-items: baseline; gap: 4px 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.yr > summary::-webkit-details-marker { display: none; }
.yr > summary::after { content: ""; align-self: center; width: 7px; height: 7px; border: solid var(--ink-50); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s var(--ease); }
.yr[open] > summary::after { transform: rotate(-135deg); }
.yr-label { font-family: var(--serif); font-size: 21px; letter-spacing: -.01em; }
.yr-meta { font-size: 13px; color: var(--muted); }
.yr-amt { font-family: var(--serif); font-size: 18px; color: var(--green); }
.yr-body { padding: 4px 16px 18px; border-top: 1px solid var(--hair); }
.yr--off { padding: 14px 16px; font-size: 14px; color: var(--ink-70); }

.yr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.yr-row > label { flex: 0 0 100%; font-size: 14px; font-weight: 500; }
.yr-guess { margin-top: 6px; font-size: 13px; color: var(--amber); }
.yr-costs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--hair); }
.cost { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ink-70); }
.cost .pound { width: 100%; }
.cost .pound input { flex: 1; width: auto; min-width: 0; }

/* tax back by year: one series, so one colour, labelled in text */
.bars { list-style: none; display: grid; gap: 8px; margin-top: 22px; }
.bars li { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 14px; }
.bar-label { color: var(--ink-70); }
.bar-track { height: 12px; border-radius: 6px; background: var(--canvas-2); overflow: hidden; }
.bar { display: block; height: 100%; min-width: 4px; border-radius: 6px; background: var(--c-home); transition: width .5s var(--ease); }
.bars b { font-family: var(--serif); font-weight: 400; font-size: 17px; }

.rows .row-line small { display: block; font-size: 12.5px; color: var(--faint); }
.ttable--counts th, .ttable--counts td { padding: 14px 18px; vertical-align: top; }
.ttable--counts tbody th { font-weight: 500; }

@media (max-width: 560px) {
  .yr > summary { grid-template-columns: 1fr auto 14px; }
  .yr-meta { grid-column: 1 / 2; grid-row: 2; }
  .yr-label { font-size: 19px; }
  .yr-costs { grid-template-columns: minmax(0, 1fr); }
  .sel { width: 100%; }
  .yr-row .pound { width: 100%; }
  .yr-row .pound input { flex: 1; width: auto; }
  .ttable--counts th, .ttable--counts td { padding: 11px 8px; font-size: 13px; }
  .bars li { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; }
}