/* The free tool shell's own rules (includes/tools/_shell.php tool_head()): every tool page carries them, so they are one
   cached sheet instead of ~21 KB inline on each page (Option B item 2, r77). Linked by tool_head() right after
   components/page-style.php and before the tool's own inline <style>, the place the inline block had in the cascade,
   so a tool's own rules still win over these. Learn this properly (components/tool-lessons.php) is at the end. */
main.wrap{padding-bottom:44px;max-width:var(--wrap)}
.tool-hero{padding:4px 0 0;margin-bottom:12px}
/* No eyebrow labels above tool titles (2026-10 redesign) */
.tool-hero > .pill:first-child{display:none}
.tool-hero h1{font-size:clamp(26px,3.4vw,34px);margin:10px 0 6px;line-height:1.15}
.tool-hero p{color:var(--ink-2);margin:0;max-width:66ch;font-size:16px}
.panel{background:var(--surface);border:0;border-radius:var(--r3);box-shadow:var(--shadow);padding:20px 22px;margin:16px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:7px 16px;border-radius:var(--pill);background:var(--surface);border:2px solid var(--rule-2);color:var(--ink);cursor:pointer;font:inherit;font-size:15px;font-weight:700;line-height:1.2;text-decoration:none;transition:border-color .12s cubic-bezier(.22,1,.36,1),background .12s cubic-bezier(.22,1,.36,1),color .12s cubic-bezier(.22,1,.36,1)}
.btn:hover{border-color:var(--blue)}
.btn:active{background:rgba(var(--ink-rgb),.06)}
.btn.primary{background:var(--study-btn);color:var(--on-study-btn);border-color:transparent;box-shadow:none}
.btn.primary:hover{background:var(--study-btn-hover);border-color:transparent}
/* white on --study-btn in both themes, 4.76:1, as the course's .lp-btn (dark text on it was 3.99:1) */
.btn.primary,:root[data-theme="dark"] .btn.primary{color:var(--on-study-btn,#fff)}
.btn.primary:active{background:var(--study-btn-press);transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.btn.primary:active{transform:none}}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--text);border-color:rgba(var(--ink-rgb),.2);background:transparent}
.btn.sm{min-height:44px;padding:4px 14px;font-size:14px;border-radius:var(--pill)}
@media (pointer:coarse){.btn.sm,.tab{min-height:44px;padding:8px 14px}}
.btn.danger{background:transparent;border-color:rgba(196,64,64,.3);color:var(--danger,#b04040)}
.btn.danger:hover{border-color:rgba(196,64,64,.55);background:rgba(196,64,64,.05)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.tight{gap:6px}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=search],textarea,select{
  background:var(--surface);border:2px solid var(--rule-2);border-radius:12px;padding:8px 12px;color:var(--ink);font:inherit;font-size:15px;width:100%;min-height:44px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue)}
textarea{resize:vertical;min-height:110px;line-height:1.5}
label{font-size:14px;font-weight:600;color:var(--ink-2);display:block;margin:0 0 4px}
.field{margin:0 0 12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse}
th,td{text-align:start;padding:8px 10px;border-bottom:1px solid rgba(var(--ink-rgb),.07);vertical-align:middle}
th{color:var(--muted);font-weight:600;font-size:12.5px}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}
.pill{display:inline-block;padding:0;border-radius:0;background:none;border:none;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.stat{font-size:36px;font-weight:700;font-variant-numeric:tabular-nums}
.hint{color:var(--muted);font-size:12.5px}
.kbd{font:11.5px ui-monospace,SFMono-Regular,Menlo,monospace;border:1px solid rgba(var(--ink-rgb),.18);border-bottom-width:2px;border-radius:4px;padding:1px 5px;background:var(--card);color:var(--text)}
.btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.gamify-bar .gsound:focus-visible,a:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px}
.toast{position:fixed;inset-inline-end:18px;bottom:18px;inset-inline-start:auto;transform:translateY(10px);background:var(--navy);color:#fff;padding:12px 18px;border-radius:var(--pill);font-size:15px;font-weight:600;opacity:0;transition:.2s cubic-bezier(.22,1,.36,1);pointer-events:none;z-index:120;max-width:calc(100vw - 36px)}
.toast:empty{display:none}
.toast.show{opacity:1;transform:translateY(0)}
/* Below-tool prose blocks (how-to / FAQ) - quiet, no card box */
.calc-sim{margin:14px 4px 0;font-size:15.5px;color:var(--ink-2)}
.calc-sim a{color:var(--study-ink);font-weight:700}
.calc-sim a:hover{text-decoration:underline;text-underline-offset:3px}
/* Composition: the tool owns the main column; a context rail (how to use, one tip, related tools) sits beside it
   on wide screens and flows under the tool on smaller ones. Canvas-heavy tools only get the rail from 1680px. */
.tool-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.tool-main{min-width:0}
/* Wide screens: the rail spans both rows, so the guide and FAQ (.tool-more) sit straight under the tool
   beside it and the left column never leaves a hole next to a long rail. Narrow: tool, rail, then the rest. */
.tool-more{min-width:0}
@media (min-width:1180px){.tool-layout:not(.wide){grid-template-columns:minmax(0,1fr) clamp(270px,22vw,340px)}
  .tool-layout:not(.wide) .tool-main{grid-column:1;grid-row:1}
  .tool-layout:not(.wide) .tool-more{grid-column:1;grid-row:2}
  .tool-layout:not(.wide) .tool-rail{grid-column:2;grid-row:1 / span 2;align-self:start;position:sticky;top:84px;margin-top:16px}}
@media (min-width:1680px){.tool-layout.wide{grid-template-columns:minmax(0,1fr) 330px}
  .tool-layout.wide .tool-main{grid-column:1;grid-row:1}
  .tool-layout.wide .tool-more{grid-column:1;grid-row:2}
  .tool-layout.wide .tool-rail{grid-column:2;grid-row:1 / span 2;align-self:start;position:sticky;top:84px;margin-top:16px}}
/* A tool that draws its own companion rail ($GLOBALS['bl_tool_own_rail']) gets the whole width. */
.tool-layout.solo{grid-template-columns:minmax(0,1fr)}
/* The rail is one column of reading, not a stack of boxes: sections are set apart by type and a thin divider. */
.tool-rail{display:grid;gap:0;align-content:start}
/* Under the tool on tablets: how-to on the left, tip and related tools on the right. Phones: one column. */
@media (min-width:700px) and (max-width:1179px){.tool-rail{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;align-items:start}
  .tool-rail > .rail-card:first-child:not(:only-child):not(.rail-tip){grid-row:span 2}
  .tool-rail > .rail-card:only-child{grid-column:1 / -1}
  .tool-rail > .rail-card:nth-child(2){padding-top:4px}}
/* Sections are set apart by space and their headings, never by rules (owner, 7 Oct: hairline dividers read as AI). */
.rail-card{padding:14px 0 18px}
.rail-card + .rail-card{margin-top:12px}
.rail-card:first-child{padding-top:4px}
.rail-card h2{font-size:18px;margin:0 0 8px}
.rail-card ol{margin:0;padding-inline-start:20px;color:var(--ink-2);font-size:15px;line-height:1.5}
.rail-card ol li{margin:0 0 6px}
.rail-card ol li::marker{color:var(--study-ink);font-weight:700}
.rail-tip{display:flex;gap:12px;align-items:flex-start}
.rail-tip img{flex:none;width:56px;height:auto;margin:-2px 0 0 -4px}
html[data-noodle-own] .blm-hello{display:none!important}
.rail-tip p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.5}
.rail-tip b{display:block;color:var(--gold-ink);font-family:var(--f-display);font-size:18px;font-weight:600;margin-bottom:4px}
/* Related tools: a quiet list of links, icon then name. */
.rail-rel{display:grid;gap:0;margin:0 -6px}
.rail-rel a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 6px;border-radius:10px;color:var(--ink);font-weight:600;font-size:15px}
.rail-rel a svg{flex:none;color:var(--study-ink)}
.rail-rel a:hover{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}
.tool-more .tool-guide,.tool-more .related{max-width:72ch}
/* The free tool shell: a 1040px column for every tool but the canvas ones, then under the tool one quiet row of
   related tools (44px rows, sentence case) and the how-to folded away. */
main.wrap.fs-narrow-main{max-width:1040px}
.tool-layout.solo > .tool-main,.tool-layout.solo > .fs-under,.tool-layout.solo > .tool-more{grid-column:1;grid-row:auto}   /* one column, in source order (the old rail's rows no longer apply) */
.fs-under{display:grid;gap:8px;margin:22px 0 0}
.fs-under > .tl-wrap,.fs-under > section{margin-top:0}
.fs-next h2{font-size:17px;margin:0 0 6px}
.fs-next ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:8px}
.fs-next a{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;border-radius:var(--r2,14px);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);font-weight:600;font-size:15.5px;text-decoration:none;transition:transform .18s cubic-bezier(.22,1,.36,1)}
.fs-next a svg{flex:none;color:var(--study-ink)}
.fs-next a:hover{color:var(--study-ink)}
.fs-next a:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){.fs-next a{transition:none}.fs-next a:active{transform:none}}
.fs-how{margin:6px 0 0}
/* The shell's two button styles (spec: one primary a screen, everything else a text link). .fs-go is the race
   card's .pl-go: 58px, radius 18px, full width on a phone; .fs-link a 44px underlined link. A tool sets only what
   differs (its own min-width, say). */
.fs-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;padding:0 24px;border:0;border-radius:18px;background:var(--study-btn);color:var(--on-study-btn,#fff);font:800 17px/1.2 var(--f-body);cursor:pointer;text-decoration:none;transition:transform .16s cubic-bezier(.22,1,.36,1)}
.fs-go:hover{background:var(--study-btn-hover)}
.fs-go:active{transform:scale(.97);background:var(--study-btn-press)}
@media (min-width:600px){.fs-go{width:auto;min-width:220px}}
.fs-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 4px;background:none;border:0;color:var(--study-ink);font:700 15px/1.25 var(--f-body);cursor:pointer;text-align:start;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:transform .16s cubic-bezier(.22,1,.36,1)}
.fs-link:hover{text-decoration-thickness:2px}
.fs-link:active{transform:scale(.97)}
.fs-go:focus-visible,.fs-link:focus-visible{outline:3px solid var(--study-ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.fs-go,.fs-link{transition:none}.fs-go:active,.fs-link:active{transform:none}}
/* Rail folded under a full-width tool: one quiet disclosure, three columns when open. */
.tool-below{margin:18px 0 6px}
.tool-below > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;min-height:52px;font:600 17px/1.3 var(--f-display);color:var(--ink)}
.tool-below > summary::-webkit-details-marker{display:none}
.tool-below > summary::before{content:"";flex:none;width:8px;height:8px;margin-inline-start:3px;border-inline-end:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(-45deg);transition:transform .15s cubic-bezier(.22,1,.36,1)}
.tool-below[open] > summary::before{transform:rotate(45deg)}
.tool-below .tb-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0 36px;padding:0 0 14px}
.tool-below .rail-card,.tool-below .rail-card:first-child{padding:4px 0 14px;margin-top:0}
.seo-block,.panel.seo-block,.card.seo-block{background:none;border:none;box-shadow:none;padding:8px 2px;margin:20px 0 0}
.seo-block h2{font-size:18px;font-weight:700;margin:0 0 8px}
.tool-guide{max-width:72ch}
.tool-guide h2{margin:22px 0 8px}
.tool-guide .bl-fold-s h2{margin:0}.tool-guide .bl-fold{margin-top:6px}
.rail-fold.bl-fold{border:0}.rail-fold>.bl-fold-s{min-height:44px;padding:0}.rail-fold>.bl-fold-b{padding:6px 0 0}
.tool-guide ol,.tool-guide ul{padding-inline-start:22px;margin:0}
.tool-guide li{margin:0 0 6px}
.seo-block dt{font-weight:600}
.tg-formula{list-style:none;padding:0 !important;margin:0}
.tg-formula li{margin:0 0 8px}
.tg-formula .fx-l{color:var(--muted)}
.tg-formula .fx{font:600 16px/1.5 var(--f-mono,ui-monospace,Menlo,monospace);color:var(--ink);white-space:normal}
.tg-ftw{overflow-x:auto;margin:0 0 6px}
.tg-ftable{border-collapse:separate;border-spacing:0 4px;width:100%;max-width:640px}
.tg-ftable th,.tg-ftable td{padding:9px 14px;background:var(--surface-2,rgba(21,54,90,.05));text-align:start;vertical-align:top;border:0}
.tg-ftable th{font-weight:600;color:var(--ink-2);border-radius:10px 0 0 10px;width:38%}
.tg-ftable td{font:600 16px/1.5 var(--f-mono,ui-monospace,Menlo,monospace);color:var(--ink);border-radius:0 10px 10px 0}
.tg-checked{margin:0 0 4px;font-size:14px;color:var(--ink-3)}
.seo-block .tg-q{color:var(--ink-2)}
.seo-block .tg-steps{padding-inline-start:22px;margin:8px 0}
.seo-block .tg-a b{color:var(--ink)}
.relmap .relcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:4px 32px}
.relmap h3{font-size:15px;margin:10px 0 6px;color:var(--ink-2)}
.relmap ul{list-style:none;padding:0;margin:0}
.relmap li{margin:0}
.relmap a{display:flex;align-items:center;gap:9px;min-height:44px;color:var(--ink);font-weight:600;font-size:15px}
.relmap a svg{flex:none;color:var(--study-ink)}
.relmap a:hover{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}
.seo-block dd,.seo-block li,.seo-block p{color:var(--muted);line-height:1.55}
/* Gamify bar - one quiet line */
.gamify-bar{display:flex;gap:14px;justify-content:flex-end;align-items:center;margin:6px 0 -4px;padding:0 4px}
.tool-top{display:flex;align-items:center;justify-content:space-between;gap:4px 14px;flex-wrap:wrap;padding:0 4px}
.tool-top .crumbs{margin:6px 0 -4px;font-size:13.5px}
.tool-top .gamify-bar{display:none}
.gamify-bar .gsound.snd-ic{min-width:44px;min-height:44px;justify-content:center;padding:0;border:1.5px solid var(--rule-2);border-radius:var(--r1,12px);color:var(--ink-2)}
.gsound.snd-ic .gsl{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-snd-slot] > .gsound.snd-ic{flex:none;min-width:44px;min-height:44px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center}
.gsound.snd-ic .gsi svg{display:block}
.snd-row{display:flex;justify-content:flex-end;margin:12px 0 0}
.snd-row .gamify-bar{margin:0;padding:0}
.related{max-width:72ch}
.gamify-bar .gv{display:inline-flex;align-items:center;gap:5px;background:none;border:none;border-radius:6px;padding:2px 3px;font-size:12.5px;font-weight:600;color:var(--muted);line-height:1}
.gamify-bar .gv b{font-variant-numeric:tabular-nums;color:var(--text)}
.gamify-bar .gv svg{display:block;width:13px;height:13px;opacity:.8}
.gamify-bar .gsound{cursor:pointer;min-height:36px;gap:7px;padding:2px 8px;border-radius:var(--pill);font-size:13.5px;color:var(--ink-3)}
.gamify-bar .gsound .gsl{color:inherit;font-weight:600}
@media (pointer:coarse){.gamify-bar .gsound{min-height:44px}}
.gamify-bar .gsound:hover{color:var(--text);background:rgba(var(--ink-rgb),.06)}
.gamify-bar .pop{animation:gpop .45s cubic-bezier(.22,1,.36,1)}
@keyframes gpop{0%{transform:scale(1)}42%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes floatUp{0%{opacity:0;transform:translateY(6px) scale(.9)}20%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-44px) scale(1)}}
.xp-float{position:fixed;z-index:120;pointer-events:none;font-weight:700;font-size:13px;color:var(--accent-text,#0d9aa7);animation:floatUp 1s cubic-bezier(.22,1,.36,1) forwards}
.fire b{color:var(--accent-text,#0d9aa7)}
@media (prefers-reduced-motion:reduce){main .panel,.xp-float,.gamify-bar .pop{animation:none!important}.btn{transition:none}}
/* Learn this properly (components/tool-lessons.php): the study tint, a book, a list of lessons; never the ads' navy and yellow */
.tlearn{background:var(--study-tint);border-radius:var(--r3);padding:22px 24px 18px;margin:40px 0 0;max-width:760px}
.tl-head{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.tl-i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--study-ink)}
.tlearn h2{font-size:20px !important;margin:2px 0 4px !important;color:var(--ink)}
.tlearn .tl-head p{margin:0 !important;font-size:15.5px !important;line-height:1.55;color:var(--ink-2) !important;max-width:62ch}
.tlearn .tl-head p b{font-weight:700;color:var(--ink)}
.tl-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.tl-list a{display:flex;align-items:center;gap:12px;min-height:56px;padding:9px 14px;border-radius:12px;background:var(--surface);color:var(--ink);text-decoration:none;
  transition:transform .15s cubic-bezier(.22,1,.36,1)}
.tl-list a:hover{transform:translateX(3px)}
.tl-list a:hover .tl-t > span{color:var(--study-ink)}
.tl-t{flex:1 1 auto;min-width:0;display:grid;gap:1px}
.tl-t > span{font-weight:700;font-size:15.5px;line-height:1.35}
.tl-t small{font-size:13.5px;color:var(--ink-3);line-height:1.35}
.tl-tag{flex:none;font-size:12.5px;font-weight:700;line-height:1;padding:5px 7px;border-radius:6px}
.tl-tag.free{background:var(--free-bg);color:var(--free)}   /* free is one colour site-wide (owner, 13 Oct) */
.tl-tag.plus{background:var(--gold-tint,rgba(214,160,40,.16));color:var(--gold-ink,#8a5a00)}
.tl-go{flex:none;color:var(--study-ink)}
.tl-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin:12px 0 0 !important;font-size:15px !important;color:var(--ink-2) !important;max-width:none !important}
.tl-course{font-weight:700;color:var(--study-ink);text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.tl-plus{line-height:1.5}
.tl-plus a{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media (max-width:520px){.tlearn{padding:18px 16px 14px}.tl-head{grid-template-columns:minmax(0,1fr)}.tl-i{display:none}}
@media (prefers-reduced-motion:reduce){.tl-list a{transition:none}.tl-list a:hover{transform:none}}