/* components part 10 of 10 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */

.tool-drop .tool-drop-t{font:650 clamp(19px,1.5vw,22px)/1.15 var(--disp);letter-spacing:-0.02em;color:var(--ink)}
.tool-drop-s{font-size:14.5px;line-height:1.5;color:var(--muted);max-width:42ch}
.tool-drop-s u{text-decoration:none;color:var(--accent);font-weight:700;border-bottom:1px solid currentColor}
.tool-view{position:relative;height:clamp(280px,30vw,440px);border-radius:12px;overflow:hidden;background:var(--grey)}
.tool-view>div{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:var(--muted)}
.tool-msg{margin:12px 2px 0;font-size:14px;line-height:1.5;color:var(--muted)}
.tool-msg:empty{display:none}
.tool-msg.is-bad{color:#9A3B2E;font-weight:600}
.tool-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 18px;margin-top:14px}
.tool-stats{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:8px 26px;margin:0}
.tool-stats:empty{display:none}
.tool-stats dt{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.tool-stats dd{margin:2px 0 0;font-size:13.5px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.tool-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.tool-field{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.tool-out{font:600 14.5px/1.2 var(--sans);color:var(--ink);padding:12px 38px 12px 16px;border:1px solid #D8D5CF;
  border-radius:999px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354514B' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/13px;
  -webkit-appearance:none;appearance:none;cursor:pointer}
.tool .tool-go{padding:14px 22px;font-size:13px;letter-spacing:.04em}
.tool .tool-go:disabled{opacity:.4;cursor:not-allowed}
.tool-after{margin-top:14px;border-radius:12px;background:#F2F6F3;border:1px solid #D3E1D8;padding:16px 18px}
.tool-after .tool-done{display:block;font-weight:700;font-size:14.5px;color:var(--green-d);margin-bottom:6px}
.tool-after p{font-size:14.5px;line-height:1.55;color:var(--body);margin:0 0 12px}
.tool-after-btns{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tool-after-btns .btn{padding:12px 18px;font-size:12.5px;letter-spacing:.04em}
.tool-again{border:0;background:none;padding:6px 0;cursor:pointer;font:700 13px var(--sans);color:var(--muted);
  text-decoration:underline;text-underline-offset:3px}
.tool-again:hover{color:var(--ink)}
.tool-pane[data-state=idle] .tool-act .tool-again,.tool-pane[data-state=load] .tool-act .tool-again,.tool-pane:not([data-state]) .tool-act .tool-again{display:none}
.tool-note{display:flex;gap:9px;align-items:flex-start;margin:16px 2px 2px;font-size:13px;line-height:1.5;color:var(--muted)}
.tool-note svg{flex:0 0 16px;width:16px;height:16px;margin-top:1px;color:var(--green)}
.tool-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin-top:14px}
.tool-opt{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.tool-opt>span{display:flex;justify-content:space-between;gap:8px}
.tool-opt output{color:var(--ink);font-weight:700}
.tool-opt input[type=range]{width:100%;accent-color:var(--accent)}
.tool-opt.chk{flex-direction:row;align-items:center;gap:9px;grid-column:1/-1;letter-spacing:0;font-size:13.5px}
.tool-opt.chk input{width:17px;height:17px;accent-color:var(--accent)}
.tool-vgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px}
.tool-vmain{position:relative;min-width:0}
.tool-viewer .tool-view{height:clamp(360px,44vw,600px)}
.tool-vbar{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}
.tool-vbtn{pointer-events:auto;border:1px solid var(--hair);background:rgba(255,255,255,.94);border-radius:999px;padding:8px 13px;
  font:700 11.5px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.tool-vbtn:hover{border-color:var(--faint)}
.tool-vbtn.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tool-side{display:flex;flex-direction:column;height:clamp(360px,44vw,600px);border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:var(--white)}
.tool-side-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;border-bottom:1px solid var(--hair)}
.tool-side .tool-side-h{font:700 11.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tool-storey{font:600 13px var(--sans);color:var(--ink);border:1px solid var(--hair);border-radius:8px;padding:6px 8px;max-width:160px;background:var(--white)}
.tool-cats{list-style:none;margin:0;padding:6px 8px;overflow:auto;flex:1 1 45%;border-bottom:1px solid var(--hair)}
.tool-cats label{display:flex;align-items:center;gap:9px;padding:6px;border-radius:6px;font-size:13.5px;color:var(--ink);cursor:pointer}
.tool-cats label:hover{background:var(--grey)}
.tool-cats span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool-cats b{font-size:12px;font-weight:600;color:var(--faint)}
.tool-cats input{accent-color:var(--accent);width:15px;height:15px}
.tool-props{overflow:auto;flex:1 1 55%;padding:10px 14px}
.tool-hint{font-size:13px;line-height:1.5;color:var(--muted);margin:4px 0;list-style:none}
.tool-kv{margin:0 0 8px}
.tool-kv div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:8px;padding:5px 0;border-bottom:1px solid #F0EEEA;font-size:12.5px}
.tool-kv dt{color:var(--muted);font-weight:600;overflow-wrap:anywhere}
.tool-kv dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.tool-pg{font:700 10.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:12px 0 4px}
.tool-vgrid:fullscreen{background:var(--white);padding:12px}
.tool-vgrid:fullscreen .tool-view,.tool-vgrid:fullscreen .tool-side{height:calc(100vh - 24px)}@media(max-width:860px){.tool-vgrid{grid-template-columns:1fr}.tool-side{height:320px}.tool-viewer .tool-view{height:380px}}
/* The trust band closes a tool page, right above the CTA. When the section above it is
   also grey, the hairline keeps them apart. */
section+.trust{border-top:1px solid var(--hair)}
.tool-cats li.is-on label{background:var(--grey)}
.tool-cats .tool-show{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);cursor:pointer}
.tool-props .tool-opt{margin:4px 0 12px}
.tool-props .tool-paper,.tool-props .tool-ink{width:100%;padding:10px 34px 10px 12px;font-size:13.5px;border-radius:10px}
.fmt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(12px,1.4vw,18px)}
.fmt{background:var(--white);border:1px solid var(--hair);border-radius:12px;padding:20px 22px}
.fmt-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.fmt .fmt-x{font:700 21px/1 var(--disp);letter-spacing:-0.02em;color:var(--ink)}
.fmt-e{font-size:12.5px;font-weight:600;color:var(--faint)}
.fmt p{font-size:14.5px;line-height:1.55;color:var(--body);margin:0 0 12px}
.fmt-io{display:flex;gap:6px;flex-wrap:wrap}
.fmt-io span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;
  border-radius:999px;background:var(--grey);color:var(--muted)}
.fmt-io span.on{background:#EEF3EF;color:var(--green-d)}@media(max-width:700px){
  .tool-head .hero-sub{font-size:16px;line-height:1.55}}@media(max-width:560px){
  .tool-drop{min-height:220px}
  .tool-view{height:260px}
  .tool-act{width:100%;margin-left:0}
  .tool-field{width:100%;justify-content:space-between}
  .tool-out{flex:1}
  .tool .tool-go{width:100%;justify-content:center}
  .tool-opts{grid-template-columns:1fr}}