/* Shared accessible controls; palettes and type remain child-owned. */
[hidden]{display:none!important}
.three-zone{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--space-4)}
.three-zone .site-nav{justify-self:end}
.three-zone .site-nav{grid-column:auto;grid-row:auto}
@media(min-width:48.001rem){.three-zone .site-nav{grid-column:3;grid-row:auto}}
.three-zone>a{color:var(--color-ink)}
@media(max-width:48rem){.three-zone{grid-template-columns:minmax(0,1fr)}.three-zone .site-nav{justify-self:start;grid-column:auto;grid-row:auto}}
h1,h2,h3,.site-brand,.footer-brand{font-weight:var(--display-weight)}
.hero{padding-block:var(--space-5) var(--space-6)}
.hero h1{margin-block:0 var(--space-4)}
.lede{max-width:58ch;font-size:1.18rem;margin-block:0 var(--space-5)}
.small{max-width:60ch;font-size:var(--text-sm);color:var(--color-muted)}
.band{background:var(--color-paper-2);color:var(--color-ink)}
.ruled{border-block-start:1px solid var(--color-rule)}
.tool-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6)}
.tool-layout h2{margin-block-start:0}
.utility{min-width:0}
.utility label{display:block;margin-block:var(--space-3) var(--space-2)}
.utility :where(input:not([type=checkbox]),select,textarea){width:100%}
.utility button,.calculator button{margin-block-start:var(--space-4)}
.tool-output{min-height:5lh;padding-block:var(--space-3)}
.tool-output [lang=sq]{font-family:var(--font-display);font-size:var(--text-xl)}
.helper{min-height:1lh;font-size:var(--text-sm);margin-block:var(--space-2)}
.revision-preview{margin-block-start:var(--space-4);overflow-wrap:anywhere}
.revision-preview [data-answer]{white-space:pre-wrap}
:where(button,.button,input,textarea,select){min-height:44px}
:where(input,textarea,select){outline:2px solid transparent;outline-offset:1px;border-width:1px}
:where(input,textarea,select):hover{border-color:var(--color-muted)}
:where(input,textarea,select):active{border-color:var(--color-accent)}
:where(input,textarea,select):focus-visible{outline:2px solid var(--color-focus);outline-offset:1px}
:where(input,textarea,select):user-invalid{outline:2px solid var(--color-focus);outline-offset:1px}
:where(button,.button){border:1px solid var(--color-accent);background:var(--color-paper);color:var(--color-accent);padding:var(--space-2) var(--space-4);line-height:1;white-space:nowrap}
:where(button,.button):hover{background:var(--color-paper-2)}
.button:hover{text-decoration:none}
:where(button,.button,summary):active{transform:translateY(1px)}
:where(button,input,textarea,select):disabled,fieldset:disabled :where(input,textarea,select,button){opacity:.55;cursor:not-allowed;background:var(--color-paper-2);color:var(--color-muted);border-color:var(--color-rule)}
a:active{opacity:.75}
a[aria-disabled=true]{color:var(--color-muted);cursor:not-allowed;pointer-events:none}
summary{cursor:pointer;min-height:44px}
summary:hover{text-decoration:underline}
summary[aria-disabled=true]{cursor:not-allowed;color:var(--color-muted)}
.site-nav ul,.footer-nav ul{align-items:center}
.search-controls{align-items:center}
.search-controls :where(input,button){height:44px}
.site-nav a,.footer-nav a{line-height:1}
dialog{width:min(100% - var(--space-5),40rem);border:1px solid var(--color-rule);background:var(--color-paper);color:var(--color-ink);padding:var(--space-5)}
dialog::backdrop{background:var(--color-ink);opacity:.6}
dialog h2{margin-block-start:0}
dialog ul{padding-inline-start:var(--space-4)}
dialog li{margin-block:var(--space-3)}
dialog form{margin-block:var(--space-4)}
input[type=checkbox],input[type=radio]{width:1.1rem;height:1.1rem;min-height:0}
@media(max-width:48rem){.tool-layout{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}.hero{padding-block:var(--space-5) var(--space-6)}.wrap{width:calc(100% - var(--space-5))}.lede{font-size:1.08rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}:where(button,.button,summary):active{transform:none}}
