/* Tools and handouts: the finder page (tools.html) and the calculator pages (tool-*.html).
   Handout pages (handout-*.html) carry their own print styles. Needs styles.css. */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tl-page{padding:40px 0 70px}
.tl-page .room-back{margin-bottom:26px}
.tl-page h1{color:var(--red)}
.tl-lead{font-size:19px;line-height:1.55;color:var(--muted);max-width:60ch;margin-top:16px}

/* Finder */
.tl-finder{background:var(--wash);border:2px solid var(--line);border-radius:20px;padding:22px;margin:32px 0 12px}
.tl-search{display:block;font-weight:800;font-size:15px}
.tl-search input{display:block;width:100%;margin-top:8px;padding:13px 16px;border:2px solid #8a8a96;border-radius:12px;font:inherit;font-size:17px;color:var(--ink);background:#fff}
.tl-search input:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.tl-filters{display:flex;flex-wrap:wrap;gap:18px 34px;margin-top:18px}
.tl-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tl-filter>span{font-size:12px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.tl-filter button{border:2px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:8px 15px;font-size:14px;font-weight:800;min-height:42px}
.tl-filter button:hover{border-color:var(--red);color:var(--red)}
.tl-filter button[aria-pressed="true"]{background:var(--red);border-color:var(--dark);color:#fff}
.tl-count{font-size:14px;color:var(--muted);margin:18px 2px 12px}

/* One row per tool, so a long list stays easy to scan. */
.tl-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.tl-item{display:grid;grid-template-columns:118px minmax(0,1fr) auto;gap:8px 22px;align-items:center;border:2px solid var(--line);border-bottom-width:4px;border-radius:18px;padding:18px 22px;background:#fff}
.tl-item[hidden]{display:none}
.tl-type{justify-self:start;font-size:12px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;border-radius:8px;padding:5px 10px}
.tl-type.calculator{background:var(--tint);color:var(--dark)}
.tl-type.handout{background:var(--amberbg);color:var(--amber)}
.tl-item h2{font-size:21px}
.tl-item h2 a{color:var(--ink);text-decoration:none}
.tl-item h2 a:hover{color:var(--red);text-decoration:underline}
.tl-item p{font-size:15px;color:var(--muted);margin-top:5px}
.tl-item .tl-meta{font-size:13px;margin-top:8px}
.tl-item .tl-meta b{color:var(--ink)}
.tl-empty{border:2px dashed var(--line);border-radius:18px;padding:26px;color:var(--muted);text-align:center}
.tl-note{font-size:14px;color:var(--muted);margin-top:26px;max-width:66ch}
@media(max-width:720px){.tl-item{grid-template-columns:1fr;padding:18px}.tl-item .button{justify-self:start}.tl-finder{padding:18px}}

/* Calculator pages */
.tc-how{background:var(--wash);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:26px 0;max-width:74ch}
.tc-how p{font-size:15px}
.tc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:26px;align-items:start}
.tc-option{border:2px solid var(--line);border-bottom-width:5px;border-radius:20px;background:#fff;overflow:hidden}
.tc-option>header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:64px;background:var(--red);color:#fff;border:0;padding:13px 20px}
.tc-option:nth-child(2)>header{background:#33333a}
.tc-option>header h2{font-size:18px;color:#fff}
.tc-copy{border:2px solid #ffffff66;background:transparent;color:#fff;border-radius:10px;padding:6px 12px;font-size:13px;font-weight:800;min-height:36px}
.tc-copy:hover{background:#ffffff22}
.tc-copy:focus-visible{outline-color:#fff}
.tc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;padding:20px}
.tc-field{display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:15px;min-width:0}
.tc-field.wide{grid-column:1 / -1}
.tc-field small{font-weight:400;font-size:13px;color:var(--muted);line-height:1.4}
.tc-input{display:flex;align-items:center;gap:8px;font-size:18px}
.tc-input input,.tc-field>input{width:100%;min-width:0;padding:10px 12px;border:2px solid #8a8a96;border-radius:10px;font:inherit;font-size:18px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;background:#fff}
.tc-field>input{font-weight:700;font-size:16px}
.tc-input input:focus-visible,.tc-field>input:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.tc-switch{display:flex;gap:8px}
.tc-switch button{flex:1;border:2px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:9px 10px;font-size:14px;font-weight:800;min-height:44px}
.tc-switch button[aria-pressed="true"]{background:var(--tint);border-color:var(--red);color:var(--dark)}
.tc-result{border-top:2px solid var(--line);background:var(--wash);padding:20px}
.tc-result p{font-size:15px}
.tc-headline{font-size:clamp(19px,2.4vw,23px)!important;font-weight:850;line-height:1.3;color:var(--dark);background:var(--tint);border-radius:12px;padding:14px 16px;margin:12px 0}
.tc-headline.good{color:var(--green);background:var(--goodbg)}
.tc-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tc-table th,.tc-table td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
.tc-table th:first-child{text-align:left;font-weight:700}
.tc-table thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--wash)}
.tc-table tr:last-child th,.tc-table tr:last-child td{border-bottom:0;font-weight:850}
.tc-compare{border:2px solid var(--yellow);border-radius:18px;background:#fffbea;padding:20px 22px;margin-top:22px}
.tc-compare h2{font-size:20px;margin-bottom:8px}
.tc-compare p{font-size:16px}
.tc-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.tc-small{font-size:13px;color:var(--muted);margin-top:18px;max-width:74ch}
@media(max-width:860px){.tc-grid{grid-template-columns:1fr}}
@media(max-width:420px){.tc-fields{grid-template-columns:1fr}}
@media print{header,footer,.skip,.room-back,.tc-foot,.tc-copy{display:none!important}.tl-page{padding:0}.tc-option,.tc-compare{break-inside:avoid}.tc-option>header,.tc-headline,.tc-compare{-webkit-print-color-adjust:exact;print-color-adjust:exact}}