/* Free tools (/tools/*), 2026-10-09. Sits on top of blog-v8.css (tokens --v8-*). Prefix: tl- */

.tl-wrap{max-width:920px;margin:0 auto;padding:0 24px}
/* Muted text one step darker than --v8-ink-3 so small grey copy passes WCAG AA (4.5:1) on paper and paper-2. */
:root{--tl-muted:#625D56}
@media(max-width:640px){.tl-wrap{padding:0 16px}}

/* Hero */
.tl-hero{padding:56px 0 28px}
.tl-hero .v8-crumb{margin-bottom:22px}
.tl-eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 var(--v8-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--v8-gold-ink);background:var(--v8-gold-tint);border:1px solid #F5DC94;padding:7px 11px;border-radius:999px}
.tl-hero h1{font-family:var(--v8-display);font-weight:800;font-size:clamp(34px,5.4vw,56px);line-height:1.04;letter-spacing:-.025em;color:var(--v8-ink);margin:18px 0 16px;max-width:15ch}
.tl-lede{font-size:clamp(17px,2vw,19.5px);line-height:1.55;color:var(--v8-ink-2);max-width:60ch;margin:0}
.tl-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;padding:0;list-style:none;font-size:14px;color:var(--tl-muted)}
.tl-trust li{display:flex;align-items:center;gap:8px}
.tl-trust li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--v8-gold)}
.tl-trust a{color:inherit}

/* The tool */
.tl-tool{background:#fff;border:1px solid var(--v8-line);border-radius:22px;padding:30px;margin:8px 0 36px}
@media(max-width:640px){.tl-tool{padding:20px 16px;border-radius:18px}}
.tl-label{display:block;font-weight:650;font-size:15px;color:var(--v8-ink);margin:0 0 9px}
.tl-hint{font-size:13.5px;color:var(--tl-muted);margin:7px 0 0;line-height:1.5}
.tl-input,.tl-select,.tl-textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--v8-ink);background:var(--v8-paper);border:1px solid var(--v8-line-2);border-radius:14px;padding:13px 15px;transition:border-color .15s,box-shadow .15s,background .15s}
.tl-textarea{min-height:128px;resize:vertical;line-height:1.55}
.tl-textarea.is-tall{min-height:220px;font-family:var(--v8-mono);font-size:14.5px}
.tl-input:focus,.tl-select:focus,.tl-textarea:focus{outline:none;border-color:#D99B00;background:#fff;box-shadow:0 0 0 4px rgba(248,179,0,.18)}
.tl-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:18px}
.tl-field{min-width:0}
.tl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.tl-chip{font:inherit;font-size:13.5px;color:var(--v8-ink-2);background:var(--v8-paper-2);border:1px solid var(--v8-line);border-radius:999px;padding:7px 13px;cursor:pointer;transition:background .15s,border-color .15s}
.tl-chip:hover{background:var(--v8-gold-tint);border-color:#F5DC94;color:var(--v8-ink)}
.tl-check{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--v8-ink-2);cursor:pointer}
.tl-check input{width:18px;height:18px;accent-color:#D99B00}
.tl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.tl-actions .v8-btn{font-size:16px;padding:14px 24px}
.tl-actions .v8-btn[disabled]{opacity:.6;cursor:progress;transform:none;box-shadow:none}
.tl-small{font-size:13.5px;color:var(--tl-muted)}
.tl-error{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:#FCEDEA;border:1px solid #F1C6BD;color:var(--v8-red);font-size:14.5px}
.tl-error:empty{display:none}

/* Results */
.tl-result{margin-top:30px;padding-top:30px;border-top:1px dashed var(--v8-line-2)}
.tl-result[hidden]{display:none}
.tl-verdict{font-family:var(--v8-display);font-weight:800;font-size:clamp(26px,3.6vw,36px);line-height:1.12;letter-spacing:-.02em;color:var(--v8-ink);margin:0 0 10px}
.tl-verdict-sub{font-size:16.5px;line-height:1.6;color:var(--v8-ink-2);margin:0 0 22px;max-width:62ch}
.tl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:22px 0}
.tl-stat{background:var(--v8-paper);border:1px solid var(--v8-line);border-radius:16px;padding:18px 18px 16px}
.tl-stat .v{display:block;font-family:var(--v8-display);font-weight:800;font-size:30px;line-height:1.05;letter-spacing:-.02em;color:var(--v8-ink)}
.tl-stat .l{display:block;font-size:13.5px;color:var(--tl-muted);margin-top:7px;line-height:1.4}
.tl-stat.is-gold{background:var(--v8-gold-tint);border-color:#F5DC94}
.tl-stat.is-gold .v{color:var(--v8-gold-ink)}
.tl-h3{font-family:var(--v8-display);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--v8-ink);margin:30px 0 12px}

/* Probability bars */
.tl-bars{display:grid;gap:10px;margin:8px 0 0;padding:0;list-style:none}
.tl-bar{display:grid;grid-template-columns:minmax(120px,220px) 1fr 52px;align-items:center;gap:14px;font-size:14.5px;color:var(--v8-ink-2)}
@media(max-width:560px){.tl-bar{grid-template-columns:1fr 46px}.tl-bar .track{grid-column:1/-1;order:3}}
.tl-bar .track{height:10px;border-radius:999px;background:var(--v8-paper-3);overflow:hidden}
.tl-bar .fill{display:block;height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#FFD15C,var(--v8-gold));transform:scaleX(0);transform-origin:left center;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.tl-bar.is-top{color:var(--v8-ink);font-weight:650}
.tl-bar .pct{text-align:right;font:600 13.5px var(--v8-mono);color:var(--v8-ink)}

/* Confidence chip */
.tl-conf{display:inline-flex;align-items:center;gap:7px;font:600 12.5px var(--v8-mono);color:var(--v8-ink-2);background:var(--v8-paper-2);border:1px solid var(--v8-line);border-radius:999px;padding:5px 10px;vertical-align:middle}
.tl-conf::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--v8-ink-3)}
.tl-conf.is-high::before{background:var(--v8-green)}
.tl-conf.is-mid::before{background:var(--v8-gold)}
.tl-conf.is-low::before{background:var(--v8-red)}

/* Lists inside results */
.tl-tags{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0;padding:0;list-style:none}
.tl-tags li{font-size:14px;background:var(--v8-paper-2);border:1px solid var(--v8-line);border-radius:10px;padding:6px 11px;color:var(--v8-ink)}
.tl-notes{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.tl-notes li{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:15px;line-height:1.55;color:var(--v8-ink-2)}
.tl-notes li::before{content:"";width:9px;height:9px;margin-top:7px;border-radius:3px;background:var(--v8-gold)}
.tl-notes li.is-warn::before{background:var(--v8-red)}
.tl-notes li.is-ok::before{background:var(--v8-green)}
.tl-links{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.tl-links a{color:var(--v8-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--v8-gold);text-underline-offset:3px}
.tl-code{position:relative;margin:10px 0 0}
.tl-code pre{margin:0;max-height:440px;overflow:auto;background:#151412;color:#F4F1EA;border-radius:14px;padding:18px;font:13.5px/1.6 var(--v8-mono);white-space:pre-wrap;word-break:break-word}
.tl-copy{position:absolute;top:10px;right:10px;font:600 12.5px var(--v8-body);background:#fff;color:var(--v8-ink);border:1px solid var(--v8-line-2);border-radius:9px;padding:6px 10px;cursor:pointer}
.tl-table{width:100%;border-collapse:collapse;font-size:14.5px;margin:8px 0 0}
.tl-table th,.tl-table td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--v8-line);vertical-align:top}
.tl-table th{font:600 12px var(--v8-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--tl-muted)}
.tl-table td.num,.tl-table th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tl-ok{color:var(--v8-green);font-weight:650}
.tl-bad{color:var(--v8-red);font-weight:650}

/* Loading */
.tl-spin{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid rgba(26,18,0,.25);border-top-color:#1A1200;animation:tl-spin .7s linear infinite;vertical-align:-3px}
@keyframes tl-spin{to{transform:rotate(360deg)}}

/* CTA band inside a result */
.tl-cta{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;margin-top:28px;padding:22px 24px;border-radius:18px;background:var(--v8-ink);color:#F4F1EA}
.tl-cta p{margin:0;font-size:15.5px;line-height:1.55;color:#D9D4C8}
.tl-cta strong{display:block;color:#fff;font-family:var(--v8-display);font-size:19px;margin-bottom:4px}
@media(max-width:640px){.tl-cta{grid-template-columns:1fr}}

/* exp-tool-result, email-agent variant: the band's link becomes an inline email form (GT.resultCta) */
.tl-cta.is-agent{grid-template-columns:minmax(0,1fr);gap:16px}
.tl-agent{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;max-width:580px;margin:0}
.tl-agent input[type="email"]{flex:1 1 220px;min-width:0;height:48px;box-sizing:border-box;padding:0 15px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#F4F1EA;font:inherit;font-size:16px;transition:border-color .15s,box-shadow .15s}
.tl-agent input[type="email"]::placeholder{color:#9C978C}
.tl-agent input[type="email"]:focus{outline:none;border-color:var(--v8-gold);box-shadow:0 0 0 3px rgba(248,179,0,.25)}
.tl-agent input[aria-invalid="true"]{border-color:#ff8a8d}
.tl-agent button{height:48px;padding:0 20px;border:1px solid #D99B00;border-radius:12px;background:var(--v8-gold);color:#1A1200;font:inherit;font-size:15.5px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s,transform .15s}
.tl-agent button:hover{background:#ffcb47;transform:translateY(-1px)}
.tl-agent button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.tl-agent button[disabled]{opacity:.7;cursor:progress;transform:none}
.tl-cta .tl-agent-note{flex:1 0 100%;margin:2px 0 0;font-size:13.5px;line-height:1.45;color:#A9A398}
.tl-cta .tl-agent-msg{flex:1 0 100%;margin:0;font-size:15px;line-height:1.5}
.tl-cta .tl-agent-msg:empty{display:none}
.tl-cta .tl-agent-msg.is-ok{color:var(--v8-gold);font-weight:650}
.tl-cta .tl-agent-msg.is-err{color:#ff8a8d}
.tl-agent.is-sent input,.tl-agent.is-sent button,.tl-agent.is-sent .tl-agent-note{display:none}
.tl-cta .ps-ask{margin:0}
@media(max-width:560px){.tl-agent button{flex:1 1 100%}}

/* "Share this task with us" row after a result (GT.shareRow) */
.tl-share{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin:28px 0 0;padding:14px 16px 14px 18px;border:1px dashed var(--v8-line-2);border-radius:14px;background:var(--v8-paper)}
.tl-share .tl-share-text{flex:1 1 260px;margin:0;font-size:15px;line-height:1.5;color:var(--v8-ink-2)}
.tl-share-btn{font:inherit;font-size:14.5px;font-weight:650;color:var(--v8-ink);background:#fff;border:1px solid var(--v8-line-2);border-radius:10px;padding:9px 18px;cursor:pointer;white-space:nowrap;transition:border-color .15s}
.tl-share-btn:hover{border-color:#D99B00}
.tl-share-btn:focus-visible{outline:3px solid rgba(248,179,0,.55);outline-offset:2px}
.tl-share-btn[disabled]{opacity:.65;cursor:progress}
.tl-share.is-done{border-style:solid;border-color:#C2E0C9;background:#EAF4EC}
.tl-share.is-done .tl-share-text{color:var(--v8-green);font-weight:650}
@media(prefers-reduced-motion:reduce){.tl-agent button,.tl-agent input[type="email"],.tl-share-btn{transition:none}.tl-agent button:hover{transform:none}}

/* Content below the tool */
.tl-content{padding:8px 0 30px}
.tl-content h2{font-family:var(--v8-display);font-weight:750;font-size:clamp(24px,3vw,30px);letter-spacing:-.02em;color:var(--v8-ink);margin:48px 0 14px;line-height:1.2}
.tl-content h3{font-family:var(--v8-display);font-weight:700;font-size:22px;color:var(--v8-ink);margin:28px 0 8px}
.tl-content p,.tl-content li{font-size:17px;line-height:1.7;color:var(--v8-ink-2)}
.tl-content p{margin:0 0 16px;max-width:68ch}
.tl-content ul,.tl-content ol{margin:0 0 18px;padding-left:22px;max-width:66ch}
.tl-content li{margin:0 0 8px}
.tl-content a{color:var(--v8-ink);text-decoration:underline;text-decoration-color:var(--v8-gold);text-underline-offset:3px}
.tl-content details{border-bottom:1px solid var(--v8-line);padding:16px 0}
.tl-content summary{cursor:pointer;font-weight:650;font-size:17px;color:var(--v8-ink);list-style:none;display:flex;justify-content:space-between;gap:16px}
.tl-content summary::-webkit-details-marker{display:none}
.tl-content summary::after{content:"+";font:400 22px/1 var(--v8-body);color:var(--tl-muted)}
.tl-content details[open] summary::after{content:"−"}
.tl-content details p{margin:12px 0 0}

/* Related tools */
.tl-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:18px 0 0}
.tl-related a{display:block;text-decoration:none;background:#fff;border:1px solid var(--v8-line);border-radius:16px;padding:18px 18px 16px;transition:box-shadow .2s,transform .2s}
.tl-related a:hover{box-shadow:0 18px 36px -26px rgba(20,19,18,.4);transform:translateY(-2px)}
.tl-related strong{display:block;font-family:var(--v8-display);font-size:17px;color:var(--v8-ink);margin-bottom:6px}
.tl-related span{display:block;font-size:14px;line-height:1.5;color:var(--v8-ink-2)}

.tl-jev{font-size:13.5px;color:var(--tl-muted);margin:18px 0 0}
.tl-jev a{color:inherit}
.tl-endcard{margin:44px 0 64px}

@media(prefers-reduced-motion:reduce){.tl-bar .fill,.tl-related a,.v8-btn{transition:none}.tl-bar .fill{transform:none}.tl-spin{animation-duration:1.5s}}

/* Embedded view (/tools/<slug>/?embed=1; the worker adds html.tl-embed): just the tool. */
html.tl-embed #nav,html.tl-embed footer,html.tl-embed .tl-content,html.tl-embed .tl-endcard,html.tl-embed .v8-crumb,html.tl-embed .tl-trust,html.tl-embed .tl-embed-snippet{display:none}
html.tl-embed body{background:var(--v8-paper)}
html.tl-embed .tl-hero{padding:20px 0 6px}
html.tl-embed .tl-hero h1{font-size:clamp(26px,4vw,34px);margin:12px 0 8px}
html.tl-embed .tl-tool{margin:8px 0 14px}
.tl-embed-credit{display:none}
html.tl-embed .tl-embed-credit{display:block;text-align:center;font-size:13.5px;color:var(--tl-muted);margin:0 0 18px}
html.tl-embed .tl-embed-credit a{color:var(--v8-ink);font-weight:600}
.tl-embed-snippet .tl-code pre{max-height:none}