/* Shared surface for the calculator tools.
   Generated by scripts/migration/share-tool-css.py from the rules the
   per-tool stylesheets had in common. Loaded BEFORE each tool's own
   file, so a tool can still override anything here.

   Colours, radii and the rest come from --t-* variables that each tool
   declares on its own root class, which is how the small differences
   between them survive sharing one rule. */

.tool .border-bottom { border-color:var(--t-line-soft) !important; }
.tool .form-control:focus, .tool .form-select:focus { border-color:var(--t-blue); box-shadow:0 0 0 3px rgba(0,153,204,.14); }
/* Rejoin the two halves of an input group after the radius override. */
.tool .input-group > .form-control { border-top-right-radius:0; border-bottom-right-radius:0; }
/* Spinners crowd a 46px field and the chips already cover quick changes. */
.tool input[type="number"]::-webkit-outer-spin-button, .tool input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.tool input[type="number"] { -moz-appearance:textfield; }
/* A disclosure button over a panel of real radio inputs: the radios give
   arrow-key navigation and screen-reader semantics for free, so only the
   circle is drawn by hand. */
.t-dd { position:relative; }
.t-dd-btn::after { content:""; position:absolute; right:15px; top:50%; width:11px; height:7px; margin-top:-3px; background-color:var(--t-grey); transition:transform .18s, background-color .16s; -webkit-mask:var(--t-chev) center/11px 7px no-repeat; mask:var(--t-chev) center/11px 7px no-repeat; }
.t-dd-btn[aria-expanded="true"]::after { transform:rotate(180deg); background-color:var(--t-blue); }
.t-dd-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t-dd-panel[hidden] { display:none; }
.t-dd-group:first-child { margin-top:2px; }
.t-dd-opt:hover { background:var(--t-bg); }
.t-dd-opt input { position:absolute; opacity:0; width:0; height:0; }
.t-dd-mark::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--t-blue); transform:scale(0); transition:transform .16s; }
.t-dd-opt input:checked ~ .t-dd-mark::after { transform:scale(1); }
.t-dd-txt { flex:1 1 auto; font-size:14px; font-weight:500; color:var(--t-dark); }
.t-dd-opt input:checked ~ .t-dd-txt { font-weight:700; }
.t-preset-note::before { content:""; width:13px; height:13px; flex:0 0 13px; background-color:currentColor; -webkit-mask:var(--t-check) center/13px 13px no-repeat; mask:var(--t-check) center/13px 13px no-repeat; }
/* ---- ratio chips ----------------------------------------------------- */
.t-chips { display:flex; flex-wrap:wrap; gap:7px; }
/* ---- reference table -------------------------------------------------- */
.t-table { width:100%; font-size:14px; }
.t-table thead th { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--t-grey); border-bottom:1px solid var(--t-line); }
.t-table tbody tr:last-child td, .t-table tbody tr:last-child th { border-bottom:0; }
.t-table tbody th { font-weight:700; color:var(--t-dark); }
/* ---- faq -------------------------------------------------------------- */
.t-faq { border-bottom:1px solid var(--t-line-soft); }
.t-faq:last-of-type { border-bottom:0; }
.t-faq summary { position:relative; padding:15px 30px 15px 0; font-size:15px; font-weight:600; color:var(--t-dark); cursor:pointer; list-style:none; transition:color .16s; }
.t-faq summary::-webkit-details-marker { display:none; }
.t-faq summary::after { content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%); width:22px; height:22px; border-radius:50%; background:var(--t-bg); color:var(--t-blue); font-size:15px; font-weight:600; display:flex; align-items:center; justify-content:center; line-height:1; }
.t-faq[open] summary::after { content:"\2212"; background:var(--t-blue); color:#fff; }
.t-faq summary:hover { color:var(--t-blue); }
.t-faq > div p:last-child { margin-bottom:0; }
.t-steps li:last-child { margin-bottom:0; }
/* ---- step scaffolding -------------------------------------------------- */
.t-step { margin-top:22px; }
.t-step:first-of-type { margin-top:0; }
.t-step-t { font-size:15px; font-weight:700; color:var(--t-dark); margin:0; }
.t-hint { display:block; margin-top:5px; font-size:12px; color:var(--t-grey-soft); line-height:1.45; }
.t-card-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; padding-top:11px; border-top:1px solid var(--t-line-soft); }
.t-card-meta span { font-size:11px; font-weight:600; color:var(--t-grey); background:var(--t-bg); border-radius:999px; padding:3px 9px; }
/* ---- the three secondary stats ------------------------------------------- */
.t-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; margin:12px 0 0; background:var(--t-line-soft); border:1px solid var(--t-line-soft); border-radius:var(--t-r); overflow:hidden; }
.t-stats > div { background:#fff; padding:12px 14px; }
.t-stats dt { margin:0; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--t-grey-soft); }
.t-stats p { margin:2px 0 0; font-size:11.5px; color:var(--t-grey-soft); line-height:1.35; }
/* ---- advanced / helper disclosures ------------------------------------------ */
.t-more { margin-top:18px; border-top:1px solid var(--t-line-soft); }
.t-more > summary { position:relative; padding:14px 26px 14px 0; font-size:13.5px; font-weight:700; color:var(--t-grey); cursor:pointer; list-style:none; transition:color .16s; }
.t-more > summary::-webkit-details-marker { display:none; }
.t-more > summary:hover { color:var(--t-blue); }
.t-more > summary::after { content:""; position:absolute; right:4px; top:50%; width:11px; height:7px; margin-top:-3px; background-color:currentColor; transition:transform .18s; -webkit-mask:var(--t-chev) center/11px 7px no-repeat; mask:var(--t-chev) center/11px 7px no-repeat; }
.t-more[open] > summary::after { transform:rotate(180deg); }
.t-more-body { padding:2px 0 18px; }
.t-check { display:flex; align-items:flex-start; gap:9px; margin:0; cursor:pointer; }
.t-check input { margin-top:2px; flex:0 0 auto; width:17px; height:17px; accent-color:var(--t-blue); }
.t-units button { border:0; background:transparent; color:var(--t-grey); cursor:pointer; font-size:12px; font-weight:700; padding:4px 11px; border-radius:6px; transition:background .16s, color .16s, box-shadow .16s; }
.t-units button[aria-pressed="true"] { background:#fff; color:var(--t-blue); box-shadow:0 1px 2px rgba(16,24,40,.10), 0 0 0 1px rgba(16,24,40,.04); }
.t-helper { padding:14px; background:var(--t-bg); border:1px solid var(--t-line-soft); border-radius:var(--t-r); }
.t-helper-out { margin:0; font-size:15px; font-weight:600; color:var(--t-dark); }
.t-head { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:10px; }
.t-head h2 { font-size:15px !important; font-weight:700; color:var(--t-dark); margin:0; }
.t-hero::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg, var(--t-blue), #58cbe8); }
.t-hero-lab { margin:0 0 6px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--t-grey); }
.t-hero-n { font-size:46px; font-weight:700; line-height:1; letter-spacing:-.03em; color:var(--t-dark); }

@media (max-width:575.98px) {
	.t-stats { grid-template-columns:1fr; }
	.t-hero-n { font-size:38px; }
}