/* The free tools (/tools/*). Docs-page shell; tokens only, so both themes hold. */
.tl .dochero{padding-bottom:14px}
.tl .lede b{color:var(--ink);font-weight:600}
.tl-box{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:20px;margin:14px 0 0;min-width:0}
.tl-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.tl-form label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--ink);min-width:0}
.tl-form label i{font-style:normal;font-weight:400;color:var(--dim);font-size:12px}
.tl input,.tl select{font:inherit;font-size:16px;color:var(--ink);background:var(--sunk2,rgba(255,255,255,.04));border:1px solid var(--line);border-radius:12px;padding:11px 13px;width:100%;box-sizing:border-box;min-width:0}
.tl input:focus-visible,.tl select:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.tl-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:16px 0 0}
.tl-stat{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--sunk2,rgba(255,255,255,.03));min-width:0}
.tl-stat span{display:block;font-size:12.5px;color:var(--mid)}
.tl-stat b{display:block;font:700 26px/1.2 var(--display,Sora,sans-serif);color:var(--ink);margin-top:4px;overflow-wrap:anywhere}
.tl-stat.big b{font-size:34px;color:var(--blue)}
.tl-note{font-size:13.5px;color:var(--mid);line-height:1.6;margin:12px 0 0;max-width:72ch}
.tl-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:18px 0 0}
.tl-cta a{text-decoration:none}
.tl-btn{font:inherit;font-size:13.5px;border:1px solid var(--line);background:var(--panel);color:var(--mid);border-radius:10px;padding:8px 12px;cursor:pointer}
.tl-btn:hover{color:var(--ink);border-color:var(--blue)}
.tl-btn:disabled{opacity:.5;cursor:default}
.docmain section.tl-sec{margin:30px 0 0}
/* Added for the second set of tools (speech timer, quorum, order, invite, agenda timer). */
.tl textarea{font:inherit;font-size:16px;line-height:1.55;color:var(--ink);background:var(--sunk2,rgba(255,255,255,.04));border:1px solid var(--line);border-radius:12px;padding:11px 13px;width:100%;box-sizing:border-box;min-width:0;min-height:150px;resize:vertical}
.tl textarea:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.tl-form label.tl-wide{grid-column:1/-1}
.tl-list{margin:16px 0 0;padding:0 0 0 1.6em;display:grid;gap:8px;font-size:17px;color:var(--ink)}
.tl-list li{padding:6px 0;border-bottom:1px solid var(--line)}
.tl-pre{white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.6 var(--mono,'IBM Plex Mono',monospace);color:var(--ink);background:var(--sunk2,rgba(255,255,255,.03));border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:16px 0 0}
.tl-now{font:700 22px/1.3 var(--display,Sora,sans-serif);color:var(--ink);margin:16px 0 0}
.tl-clock{font:700 64px/1.1 var(--display,Sora,sans-serif);color:var(--blue);margin:6px 0 0;font-variant-numeric:tabular-nums}
.tl-clock.over{color:var(--red,#e5484d)}
.tl-row{display:grid;grid-template-columns:1fr 92px 40px;gap:8px;align-items:center;margin:8px 0 0}
.tl-row button{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--mid);border-radius:10px;height:44px;cursor:pointer}
.tl-mrow{display:grid;grid-template-columns:minmax(0,2fr) 90px minmax(0,1.4fr) 44px;gap:8px;margin:8px 0 0;align-items:center}
.tl-mrow button{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--mid);border-radius:10px;height:44px;cursor:pointer}
.tl-mhead{display:grid;grid-template-columns:minmax(0,2fr) 90px minmax(0,1.4fr) 44px;gap:8px;font-size:13px;font-weight:600;color:var(--ink)}
@media (max-width:560px){.tl-mrow{grid-template-columns:minmax(0,1fr) 80px 44px;grid-auto-flow:dense;padding-bottom:10px;border-bottom:1px solid var(--line)}.tl-mrow select{grid-column:1/3}.tl-mhead{display:none}}