/* Associate Contributions and Costs — rate tables */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

#contributions > section{margin-top:clamp(2.25rem,4vw,3rem)}
#contributions > section:first-of-type{margin-top:0}
#contributions h2{font-size:clamp(1.3rem,2.2vw,1.65rem);letter-spacing:-.02em;margin:0 0 1rem}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--sand-line);border-radius:var(--r-md);background:#fff}
.table-scroll:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

.costs-rates{width:100%;border-collapse:separate;border-spacing:0;font-size:.97rem}
/* Only wide tables get a floor that forces horizontal scrolling (#409). */
.costs-rates.costs-wide{min-width:min(100%,560px)}
.costs-rates thead,
.costs-rates thead tr{background:var(--sand)}
.costs-rates thead th{background:var(--sand);color:var(--teal-deep);
  font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  text-align:left;padding:.7rem 1rem;vertical-align:bottom;white-space:normal;line-height:1.3}
.costs-rates thead tr:first-child th[colspan]{text-align:center;border-left:1px solid var(--sand-line)}
.costs-rates thead tr:first-child th[rowspan]{vertical-align:middle}
.costs-rates tbody th,
.costs-rates tbody td{padding:.8rem 1rem;border-top:1px solid var(--sand-line);vertical-align:baseline}
.costs-rates tbody th{text-align:left;font-weight:700;color:var(--ink);white-space:normal;min-width:11rem}
.costs-rates tbody td{font-variant-numeric:tabular-nums;white-space:nowrap}
.costs-rates tbody tr:nth-child(even) th,
.costs-rates tbody tr:nth-child(even) td{background:var(--sand-50)}
.costs-rates tbody tr:hover th,
.costs-rates tbody tr:hover td{background:var(--teal-50)}

.costs-rates .rate-extra th{font-weight:800}
.costs-rates .rate-extra th{white-space:normal}
.costs-rates .rate-extra th span{display:block;font-weight:700;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--gray-ink);margin-top:.15rem}
.costs-rates .rate-extra td{font-weight:700}

.rate-note{margin:.8rem 0 0;font-size:.9rem;line-height:1.5;color:var(--gray-ink);max-width:70ch}

/* keep the row label in view while a wide table scrolls sideways */
.costs-rates tbody th,
.costs-rates thead tr:first-child th:first-child{position:sticky;left:0;z-index:2}
.costs-rates tbody th{background:#fff}
.costs-rates tbody tr:nth-child(even) th{background:var(--sand-50)}
.costs-rates tbody tr:hover th{background:var(--teal-50)}
.costs-rates thead tr:first-child th:first-child{background:var(--sand);z-index:3}
.costs-rates tbody th::after,
.costs-rates thead tr:first-child th:first-child::after{content:"";position:absolute;top:0;right:0;bottom:-1px;
  width:1px;background:var(--sand-line)}

@media (max-width:640px){
  .costs-rates{font-size:.92rem}
  .costs-rates thead th,.costs-rates tbody th,.costs-rates tbody td{padding:.65rem .8rem}
  .costs-rates tbody th{min-width:8.5rem}
}
@media print{
  .table-scroll{overflow:visible;border:0}
  .costs-rates tbody tr:hover th,.costs-rates tbody tr:hover td{background:none}
}

/* Tobacco toggle (#416). Without JS every column stays visible, so the table
   is still complete and correct; the toggle only narrows what is shown. */
.rate-toggle{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 1rem}
.rt-label{font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gray-ink);margin-right:.15rem}
.rt-btn{font:inherit;font-size:.95rem;font-weight:600;min-height:40px;padding:.45rem 1rem;
  border-radius:var(--pill);border:1px solid var(--sand-line);background:#fff;color:var(--ink);
  cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.rt-btn:hover{border-color:var(--orange)}
.rt-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.rt-btn.is-on{background:var(--orange);border-color:var(--orange);color:#fff}
.costs-rates.tob-non [data-tob="yes"],
.costs-rates.tob-yes [data-tob="non"]{display:none}
/* With the toggle active the sub-header just repeats the button label. */
.costs-rates.tob-non thead tr:nth-child(2),
.costs-rates.tob-yes thead tr:nth-child(2){display:none}
.costs-rates.tob-non thead tr:first-child th[rowspan],
.costs-rates.tob-yes thead tr:first-child th[rowspan]{vertical-align:middle}
@media print{.rate-toggle{display:none}
  .costs-rates.tob-non [data-tob="yes"],
  .costs-rates.tob-yes [data-tob="non"]{display:table-cell}}

/* Pastel #763 -- centre all rates. Row labels (the first header column and
   the tbody row headers) stay left-aligned. */
.costs-rates thead tr:first-child th:not(:first-child),
.costs-rates thead tr:nth-child(2) th,
.costs-rates tbody td{text-align:center}