/* Toolisco — styles for Text Repeater, Typing Speed Test, Percentage Difference, Fraction,
   Circle and Standard Deviation calculators. Loaded only on those pages; builds on
   tools.css, sectools.css and seotools.css. */
.tool-app [hidden]{display:none!important}
.tool-app .tool-grid>.tool-panel{min-width:0}
.tool-app .tool-msg,.tool-app .panel-hint{overflow-wrap:anywhere}
.ct-note{font-size:var(--fs-xs);color:var(--text-mute);margin:.5rem 0 0}
.ct-warn{border:1px solid rgba(217,154,43,.55);background:rgba(217,154,43,.10);color:var(--text);border-radius:var(--r-md);padding:var(--s-2) var(--s-3);font-size:var(--fs-sm);margin-top:var(--s-3)}
.ct-steps{margin:var(--s-2) 0 0;padding-left:1.3rem;font-size:var(--fs-sm);color:var(--text-soft)}
.ct-steps li{list-style:decimal;margin:.35rem 0;overflow-wrap:anywhere}
.ct-big{font-family:var(--font-mono);overflow-wrap:anywhere}
.ct-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--s-3);align-items:end}
.ct-row .field{margin:0}
@media (max-width:560px){.ct-row{grid-template-columns:1fr}}
.ct-stats .seo-stat b{overflow-wrap:anywhere}
@media (max-width:560px){.ct-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ct-out{width:100%;min-height:220px;font-family:var(--font-mono);font-size:var(--fs-sm);white-space:pre-wrap;overflow-wrap:anywhere;resize:vertical}
/* typing test */
.tt-passage{border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-sunken);padding:var(--s-4);font-family:var(--font-mono);font-size:var(--fs-base);line-height:1.8;color:var(--text-mute);white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto;margin-top:var(--s-3)}
.tt-passage .ok{color:var(--text)}
.tt-passage .bad{color:#c2304a;background:rgba(225,86,107,.16);border-radius:2px}
.tt-passage .cur{border-bottom:2px solid var(--signal)}
:root[data-theme="dark"] .tt-passage .bad{color:#ff8ba0}
.tt-input{width:100%;min-height:150px;font-family:var(--font-mono);font-size:var(--fs-base);margin-top:var(--s-3)}
.tt-time{font-family:var(--font-mono);font-size:var(--fs-2xl);font-weight:700;color:var(--text)}
/* circle diagram */
.cc-diagram{display:block;width:100%;max-width:300px;height:auto;margin:var(--s-3) auto 0}
.cc-diagram .cc-ring{fill:rgba(34,211,238,.10);stroke:var(--text-mute);stroke-width:2}
.cc-diagram .cc-hi{stroke:var(--signal-deep);stroke-width:4}
:root[data-theme="dark"] .cc-diagram .cc-hi{stroke:var(--signal)}
.cc-diagram .cc-fill{fill:rgba(34,211,238,.30)}
.cc-diagram .cc-dot{fill:var(--text)}
.cc-diagram text{fill:var(--text);font-family:var(--font-mono);font-size:13px}