/* tools.css — the working calculators on the three sub pages. Uses the site's colour tokens, so light/dark come for free. */
.t-sec{padding-block:clamp(40px,6vw,80px)}
.t-sec .sec-head{margin-bottom:clamp(20px,3vw,32px)}
.t-grid{display:grid;gap:20px;min-width:0}
@media (min-width:980px){.t-grid.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.t-grid.wide-l{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}.t-grid.wide-r{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}}
.t-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(16px,2.4vw,28px);min-width:0}
.t-card>h3{font-size:1.2rem;margin-bottom:4px}
.t-card h4{font-size:1.02rem;margin:18px 0 8px}
.t-hint{color:var(--ink2);font-size:.95rem;margin:2px 0 14px}
.t-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:12px;margin-bottom:14px}
.t-f{display:grid;gap:4px;min-width:0;align-content:start}
.t-f>label,.t-f>.l{font-weight:500;font-size:.93rem;line-height:1.35}
.t-f small{color:var(--ink2);font-size:.82rem;line-height:1.4}
.t-in{width:100%;min-width:0;min-height:44px;padding:.45em .7em;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);font:inherit;font-size:1rem;font-variant-numeric:tabular-nums}
select.t-in{padding-right:.4em}
.t-in:focus-visible{outline:3px solid var(--link);outline-offset:1px}
.t-in[aria-invalid="true"]{border-color:var(--bad);background:var(--bad-bg)}
.t-act{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.t-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:44px;padding:.4em 1.1em;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:.98rem;cursor:pointer}
.t-btn:hover{border-color:var(--link);background:var(--chip-bg)}
.t-btn.pri{background:var(--solid);border-color:var(--solid);color:var(--on-solid)}
.t-btn.pri:hover{filter:brightness(1.08)}
.t-btn[disabled]{opacity:.45;cursor:default}
.t-x{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink2);font-size:1.25rem;line-height:1;cursor:pointer;padding:0}
.t-x:hover{border-color:var(--bad);color:var(--bad)}

/* editable player rows */
.t-pl{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.t-pl>li{display:grid;grid-template-columns:1.6rem minmax(0,1fr) minmax(0,1fr) 44px;grid-template-areas:"n nm nm x" ". lv lv lv" ". g w .";gap:8px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface2)}
.t-pl .t-n{grid-area:n;text-align:center;font-family:var(--f-display);font-weight:600;color:var(--ink2)}
.t-pl .nm{grid-area:nm}.t-pl .lv{grid-area:lv}.t-pl .gmw{grid-area:g}.t-pl .wtw{grid-area:w}.t-pl .t-x{grid-area:x}
.t-pl label{display:grid;gap:2px;min-width:0}
.t-ml{font-size:.8rem;color:var(--ink2);line-height:1.3}
@media (min-width:640px){.t-pl .t-ml{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media (min-width:640px){.t-pl>li{grid-template-columns:1.6rem minmax(0,1.3fr) minmax(0,1.5fr) 5.2rem 5.2rem 44px;grid-template-areas:"n nm lv g w x";padding:6px 8px}}
.t-cols{display:none}
@media (min-width:640px){.t-cols{display:grid;grid-template-columns:1.6rem minmax(0,1.3fr) minmax(0,1.5fr) 5.2rem 5.2rem 44px;gap:8px;padding:0 8px;margin-top:6px;font-size:.85rem;color:var(--ink2)}}

/* the court: two sides and a net */
.t-courts{display:grid;gap:14px}
.t-court{border:2px solid var(--line);border-radius:var(--r-md);background:var(--surface2);overflow:hidden}
.t-court>header{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:baseline;padding:8px 14px;background:var(--chip-bg);color:var(--chip-fg);font-family:var(--f-display);font-weight:600}
.t-court>header span{font-family:var(--f-body);font-weight:500;font-size:.88rem}
.t-sides{display:grid;grid-template-columns:minmax(0,1fr) 2px minmax(0,1fr);gap:0}
.t-net{background:repeating-linear-gradient(to bottom,var(--ink2) 0 6px,transparent 6px 11px);opacity:.55;margin:10px 0}
.t-team{list-style:none;margin:0;padding:12px 10px;display:grid;gap:8px;align-content:start}
.t-team li{display:flex;gap:8px;align-items:center;justify-content:space-between;min-width:0}
.t-team b{font-weight:600;overflow-wrap:anywhere;min-width:0}
.t-court>.t-foot{padding:8px 14px;border-top:1px solid var(--line);font-size:.9rem;color:var(--ink2)}
.t-lv{flex:none;display:inline-block;min-width:2.3em;text-align:center;padding:.05em .45em;border-radius:999px;font-size:.82rem;font-weight:600;font-family:var(--f-display);background:var(--chip-bg);color:var(--chip-fg);border:1px solid var(--line)}
.t-lv.mid{background:var(--note-bg);color:var(--note-fg)}
.t-lv.pro{background:var(--solid);color:var(--on-solid);border-color:var(--solid)}
.t-queue{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:q}
.t-queue li{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface2)}
.t-queue li.go{border-color:var(--link);background:var(--chip-bg)}
.t-queue .q{font-family:var(--f-display);font-weight:600;color:var(--ink2);text-align:center}
.t-queue .nm{min-width:0;overflow-wrap:anywhere}
.t-queue .nm small{display:block;color:var(--ink2);font-size:.82rem;line-height:1.3}
.t-tag{font-size:.82rem;font-weight:600;padding:.1em .6em;border-radius:999px;background:var(--solid);color:var(--on-solid);white-space:nowrap}
.t-tag.off{background:transparent;color:var(--ink2);border:1px solid var(--line);font-weight:500}
.t-note{margin-top:12px;font-size:.93rem;color:var(--ink2)}
.t-note.warn{color:var(--note-fg);background:var(--note-bg);padding:.6em .9em;border-radius:var(--r-sm)}
.t-note.bad{color:var(--bad);background:var(--bad-bg);padding:.6em .9em;border-radius:var(--r-sm)}
.t-note.ok{color:var(--good);background:var(--good-bg);padding:.6em .9em;border-radius:var(--r-sm)}
details.t-why{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface2)}
details.t-why>summary{cursor:pointer;padding:.7em 1em;font-weight:600;min-height:44px;display:flex;align-items:center}
details.t-why>div{padding:0 1em 1em}

/* big answer */
.t-big{background:var(--hero-1) linear-gradient(160deg,var(--hero-1),var(--hero-2));color:#fff;border-radius:var(--r-md);padding:18px 20px;margin-bottom:16px}
.t-big .k{color:var(--hero-fg2);font-size:.95rem}
.t-big .v{font-family:var(--f-display);font-weight:700;font-size:clamp(2.2rem,6vw,3.2rem);line-height:1.15;color:var(--yellow);font-variant-numeric:tabular-nums}
.t-big .v small{font-size:.4em;font-weight:500;color:#fff;margin-left:.35em}
.t-big .s{color:var(--hero-fg2);font-size:.93rem;margin-top:2px}
.t-big.neg .v{color:#FFB4A8}
.t-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 14px}
.t-stats>div{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface2);min-width:0}
.t-stats dt{font-size:.85rem;color:var(--ink2);line-height:1.35}
.t-stats dd{margin:2px 0 0;font-family:var(--f-display);font-weight:600;font-size:1.25rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.t-stats dd small{font-family:var(--f-body);font-weight:400;font-size:.8rem;color:var(--ink2);margin-left:.25em}
.t-stats .good dd{color:var(--good)}.t-stats .bad dd{color:var(--bad)}
.t-bars{display:grid;gap:5px;margin:6px 0 0}
.t-bar{display:grid;grid-template-columns:5.5rem minmax(0,1fr) 2.6rem;gap:8px;align-items:center;font-size:.9rem}
.t-bar .b{height:12px;border-radius:99px;background:var(--bg2);overflow:hidden}
.t-bar .b i{display:block;height:100%;background:var(--link);border-radius:99px;min-width:2px}
.t-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-bar em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}

/* tables that fold into cards on a phone */
.t-tw{overflow-x:auto;margin:6px 0 4px}
table.t-tb{width:100%;border-collapse:collapse;font-size:.95rem}
.t-tb th,.t-tb td{padding:.5em .6em;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.t-tb thead th{font-family:var(--f-display);font-weight:600;background:var(--surface2);font-size:.88rem;white-space:nowrap}
.t-tb .n{text-align:right;font-variant-numeric:tabular-nums}
.t-tb tfoot th,.t-tb tfoot td{background:var(--surface2);font-weight:600;border-bottom:0}
.t-tb td .t-in{min-height:40px;padding:.3em .5em}
.t-tb tr.sel td{background:var(--chip-bg)}
.t-tb .lo{color:var(--good);font-weight:600}.t-tb .hi{color:var(--bad);font-weight:600}
@media (max-width:759px){
  table.t-tb.t-fold,.t-tb.t-fold tbody,.t-tb.t-fold tfoot,.t-tb.t-fold tr,.t-tb.t-fold td,.t-tb.t-fold th{display:block}
  .t-tb.t-fold thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .t-tb.t-fold tbody tr{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface2);padding:8px 10px;margin-bottom:10px;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
  .t-tb.t-fold tbody td{border:0;padding:0;min-width:0}
  .t-tb.t-fold tbody td::before{content:attr(data-l);display:block;font-size:.8rem;color:var(--ink2);line-height:1.3}
  .t-tb.t-fold tbody td.full{grid-column:1/-1}
  .t-tb.t-fold tbody td.n{text-align:left}
  .t-tb.t-fold tfoot tr{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:var(--r-sm);background:var(--surface2);margin-bottom:6px}
  .t-tb.t-fold tfoot th,.t-tb.t-fold tfoot td{padding:0;background:none}
}
.t-chip{display:inline-block;padding:.05em .6em;border-radius:99px;font-size:.82rem;font-weight:600;white-space:nowrap}
.t-chip.paid{background:var(--good-bg);color:var(--good)}
.t-chip.partial{background:var(--note-bg);color:var(--note-fg)}
.t-chip.unpaid{background:var(--bad-bg);color:var(--bad)}
.t-chip.free{background:var(--chip-bg);color:var(--chip-fg)}

/* qr */
.t-qr{display:grid;gap:14px;justify-items:center;text-align:center}
.t-qr canvas{max-width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--line);background:#fff}
.t-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;word-break:break-all;text-align:left;background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-sm);padding:.6em .8em;color:var(--ink2)}

/* static content blocks */
.t-rules{width:100%;border-collapse:collapse;font-size:.97rem}
.t-rules th,.t-rules td{padding:.65em .8em;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.t-rules thead th{font-family:var(--f-display);font-weight:600;background:var(--surface2)}
.t-rules td.num,.t-rules th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.t-rules code,.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:var(--chip-bg);color:var(--chip-fg);padding:.05em .4em;border-radius:6px}
.t-steps{display:grid;gap:22px}
.t-fig{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));max-width:760px}
.t-fig figure{margin:0;display:grid;gap:8px;align-content:start}
.t-fig figcaption{font-size:.88rem;color:var(--ink2);line-height:1.45}
.t-lvtbl .code{font-family:var(--f-display);font-weight:700;white-space:nowrap}
@media (max-width:759px){
  .t-rules.t-fold thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .t-rules.t-fold,.t-rules.t-fold tbody,.t-rules.t-fold tr,.t-rules.t-fold td,.t-rules.t-fold th{display:block}
  .t-rules.t-fold tr{padding:12px 14px;border-bottom:1px solid var(--line)}
  .t-rules.t-fold tbody tr:last-child{border-bottom:0}
  .t-rules.t-fold th{padding:0 0 4px;font-size:1.02rem;border:0;text-align:left!important}
  .t-rules.t-fold td{padding:2px 0;border:0;text-align:left!important;white-space:normal}
  .t-rules.t-fold td[data-l]::before{content:attr(data-l) ": ";font-weight:600;color:var(--ink2);font-size:.9rem}
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.t-btn,.btn{transition:none}}
.t-fold tbody td[data-l=""]::before{display:none}
.t-fig .shot{width:auto}
.t-fig{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.t-fig:has(>figure:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.t-fig .shot{max-width:240px;justify-self:center;width:100%}
.t-fig figcaption{font-size:.82rem}
@media (min-width:640px){.t-fig{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}.t-fig figcaption{font-size:.88rem}}
@media (min-width:900px){.split:has(>.t-fig){grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.split.rev:has(>.t-fig){grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.t-rules tbody th,.t-tb tbody th{background:transparent;font-weight:600;width:auto}
.t-tw:has(>.t-rules){border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.t-tb td.b-due{white-space:nowrap}
.t-tb .b-due small{display:block;color:var(--ink2);font-size:.8rem}
.t-tb td:last-child{white-space:nowrap}
.t-tb .b-qr{min-height:40px;padding:.2em .9em}
.t-tb .t-x{width:40px;height:40px}
.t-card .t-rules th,.t-card .t-rules td{padding:.55em .55em}
.t-fig:has(>figure:nth-child(6):last-child),.t-fig:has(>figure:nth-child(5):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.t-rules{min-width:0}
table.t-tb{min-width:0}
@media (min-width:760px){#b-table,#sp-table{min-width:640px}}