/* ==========================================================================
   Don's Tools - shared site UI
   Page-level rules that used to be injected into every page as a <style> block:
   the flat white ground, the type scale, the review bar, section rhythm, the
   pastel information notes and the bounded boxes. The tool card itself lives in
   tool-ui.css.
   ========================================================================== */

/* Don\'s Tools - managed site-rules block: R4 type scale, R5 tool alignment, R6 page ground */
/* the off-canvas mobile panel is parked to the right; clip it so no page scrolls sideways */
html{overflow-x:clip}
body{background-image:none}
.section--alt{background:var(--color-bg)}
.hero__note{margin:var(--space-5) auto var(--space-2);padding-inline:var(--space-4);text-align:center;color:var(--color-text-muted)}
/* R4 - body copy at the FAQ answer size */
.section p,.step p,.feature p,.faq p,.faq details p,.faq details>div,.hero__note,
.seo-section p,.seo-section li,.toolbox--wrap .note,.toolbox--wrap>.note,
.toolbox--wrap .hint,.toolbox--wrap .muted{font-size:16px;line-height:1.6}
/* R5 - everything inside the tool is centred */
.toolbox--wrap{text-align:center}
.toolbox--wrap .prow,.toolbox--wrap .row,.toolbox--wrap .actions,.toolbox--wrap .btns,
.toolbox--wrap .bar,.toolbox--wrap .inline,.toolbox--wrap .grp,.toolbox--wrap .poprow,
.toolbox--wrap .striprow,.toolbox--wrap .dlrow,.toolbox--wrap .process-row,.toolbox--wrap .right,
.toolbox--wrap .outwrap,.toolbox--wrap .ctrls,.toolbox--wrap .btnrow,.toolbox--wrap .tabs,
.toolbox--wrap .menu-wrap,.toolbox--wrap .wbtns,.toolbox--wrap .savebar,.toolbox--wrap .formbtns,
.toolbox--wrap .outbar,.toolbox--wrap .util,.toolbox--wrap .anchors,.toolbox--wrap .tbtns,
.toolbox--wrap .controls,.toolbox--wrap .opts,.toolbox--wrap .toolbox__actions{justify-content:center}
/* R10 - section rhythm: the white ground removed the alternating bands,
   so 96px of padding a side left dead space between sections */
.section{padding-block:var(--space-8);margin-block:0}
.section--tight{padding-block:var(--space-5)}
.section__head{margin-bottom:var(--space-7)}
.section .faq,.section .features,.section .steps,.section .cardgrid{margin-top:0}
/* R11 - bounded boxes: nothing stretches without limit, it scrolls instead */
.toolbox--wrap textarea{resize:vertical;max-height:60vh;overflow:auto}
.toolbox--wrap pre,.toolbox--wrap .out,.toolbox--wrap .outbox,.toolbox--wrap .output,
.toolbox--wrap .results-panel,.toolbox--wrap .result,.toolbox--wrap .prevbox,
.toolbox--wrap .list,.toolbox--wrap .rows,.toolbox--wrap .log{max-height:60vh;overflow:auto}
.toolbox--wrap .table-scroll,.toolbox--wrap .tablewrap{max-height:60vh;overflow:auto}
/* R11 - a side-by-side row fills its height and centres its panel */
.toolbox--wrap .grid,.toolbox--wrap .grid2,.toolbox--wrap .two,.toolbox--wrap .split{align-items:stretch}
.toolbox--wrap .preview{display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:var(--space-4)}
/* R12 - the privacy banner is a light green information box, well clear of both neighbours */
.hero__note{display:flex;align-items:center;justify-content:center;gap:var(--space-2);
max-width:72ch;margin:var(--space-6) auto var(--space-7);
padding:var(--space-4) var(--space-5);background:var(--dt-info-bg);
border:1px solid var(--dt-info-bd);border-radius:var(--radius-md);
text-align:center;color:var(--color-text);font-size:16px;line-height:1.6}
/* R13 - h1 and h2 match h3, and item gaps are doubled */
h2,.section__head h2,main h2{font-size:20px;line-height:1.35}
/* the page title is three times its own standfirst, and the pair scales together */
:root{--dt-sub:20px}
@media (max-width:640px){:root{--dt-sub:16px}}
.hero__sub,.thero>p,.hero__text+p{font-size:var(--dt-sub);line-height:1.5}
h1,.thero h1,.hero h1,.hero__text h1,main h1{font-size:calc(var(--dt-sub) * 3);line-height:1.1}
.steps{gap:var(--space-8)}
.features{gap:var(--space-8)}
.cardgrid{gap:var(--space-6)}
/* R16 - review bar, FAQ chevron, search field */
/* R16b - the review bar is a box, and its button asks to be pressed */
.reviewbar{background:none;border:0;padding:var(--space-5) var(--space-4) 0}
.reviewbar__inner{max-width:1080px;margin-inline:auto;background:var(--dt-info-bg);
border:1px solid var(--dt-info-bd);border-radius:var(--radius-lg)}
@keyframes dt-nudge{0%,88%,100%{transform:translateY(0)}92%{transform:translateY(-3px)}96%{transform:translateY(-1px)}}
.reviewbar__cta{animation:dt-nudge 5.5s ease-in-out infinite}
.reviewbar__cta:hover{transform:translateY(-2px);animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.reviewbar__cta{animation:none}}
.reviewbar__inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:var(--space-3) var(--space-4);padding:var(--space-3) var(--space-4)}
.reviewbar__mark{display:inline-flex;align-items:center;justify-content:center;
width:28px;height:28px;flex:none;border-radius:8px;background:var(--color-accent);color:#14181d}
.reviewbar__text{margin:0;font-size:16px;line-height:1.5;color:var(--color-text);text-align:center}
.reviewbar__text b{font-weight:700}
.reviewbar__cta{flex:none;display:inline-flex;align-items:center;gap:var(--space-2);
border:1px solid var(--color-border-strong);border-radius:999px;background:var(--color-surface);
padding:8px 18px;font-family:var(--font-sans);font-size:15px;font-weight:600;
color:var(--color-text);text-decoration:none;transition:border-color .15s,color .15s}
.reviewbar__cta:hover{border-color:var(--color-accent);color:var(--color-accent)}
/* one chevron per FAQ row: the reskin pseudo-element duplicated the inline icon */
.faq summary::after{display:none!important}
/* the search field is the box, not a box inside a box */
.toolsearch__box input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){
border:0!important;background:transparent!important;
box-shadow:none!important;border-radius:0!important;outline:none;padding:var(--space-2) 0;font-size:16px}
/* one control height, one radius, one type size */
/* a checkbox is centred in a control slot the same height as an input */
/* slider, and input plus unit, keep their readout on the control line */
/* a hidden or disabled option must not leave a hole in the grid */
/* touch targets */
/* R8 - in-tool information notes as light pastel boxes */
:root{--dt-info-bg:#f4f8ec;--dt-info-bd:#e0ebcd}
html.dark{--dt-info-bg:#1b2028;--dt-info-bd:#2b3540}
.toolbox--wrap .note{background:var(--dt-info-bg)!important;border:1px solid var(--dt-info-bd)!important;
border-radius:var(--radius-md)!important;padding:var(--space-4) var(--space-5)!important;
margin:var(--space-5) auto 0!important;max-width:72ch;box-shadow:none!important;
font-size:16px;line-height:1.6;font-weight:400;color:var(--color-text);text-align:center}
.toolbox--wrap .note b,.toolbox--wrap .note strong{font-weight:700}
/* R5 exceptions - reading and editing surfaces stay left */
.toolbox--wrap textarea,.toolbox--wrap input[type=text],.toolbox--wrap input[type=url],
.toolbox--wrap input[type=email],.toolbox--wrap input[type=search],.toolbox--wrap pre,
.toolbox--wrap code,.toolbox--wrap table,.toolbox--wrap th,.toolbox--wrap td,
.toolbox--wrap li,.toolbox--wrap .out,.toolbox--wrap .outbox,.toolbox--wrap .results-panel,
.toolbox--wrap .result,.toolbox--wrap .empty{text-align:left}