.utility{max-width:1100px;margin:auto;padding:24px;}
.utility label{display:block;font-weight:600;margin:16px 0 8px;}
.utility :is(textarea,select){box-sizing:border-box;width:100%;padding:12px;background:var(--freeify-raised);color:var(--freeify-text);border:1px solid var(--freeify-line);font:400 1rem/1.5 ui-monospace,monospace;}
.utility textarea{min-height:140px;resize:vertical;}
.utility-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.utility .check-label{display:flex;align-items:center;gap:12px;}
.utility .check-label input{width:22px;height:22px;accent-color:var(--freeify-gold);}
.utility .actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0;}
.utility button{font:inherit;min-height:44px;padding:10px 16px;border:1px solid var(--freeify-line);background:var(--freeify-gold);color:var(--freeify-action-ink);cursor:pointer;}
.utility button:disabled{opacity:.5;cursor:default;}
.utility :is(p,li){line-height:1.6;overflow-wrap:anywhere;}
.utility #listDetails{max-height:400px;overflow:auto;}
.utility #listError{border-left:3px solid var(--freeify-gold);padding-left:12px;}
.utility :is(a,button,textarea,select,input,summary,[tabindex]):focus-visible{outline:3px solid var(--freeify-focus);outline-offset:4px;}
.utility [hidden]{display:none!important;}
@media(max-width:750px){.utility{padding:14px;}.utility-grid,.result-grid{grid-template-columns:1fr;}.utility h1{font-size:2rem;}}

.utility input:not([type=checkbox]){box-sizing:border-box;width:100%;min-width:0;padding:12px;background:var(--freeify-raised);color:var(--freeify-text);border:1px solid var(--freeify-line);font:inherit}.utility fieldset{min-width:0;border:1px solid var(--freeify-line);padding:12px}.utility .utility-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.utility [role=alert]{color:var(--freeify-gold);font-weight:700}@media(max-width:750px){.utility .utility-grid{grid-template-columns:1fr}}
/* Reserve separate rows for return navigation and theme controls. */
@media(max-width:760px){
 body[data-studio="tool"]{padding-top:152px;}
 html:has(body[data-studio="tool"]){scroll-padding-top:152px;}
 body[data-studio="tool"] .tool-return-header{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:48px 44px;grid-template-areas:"brand theme" "return return";height:132px;min-height:132px;gap:8px 12px;padding:12px 16px;box-sizing:border-box;}
 body[data-studio="tool"] .tool-return-header .freeify-brand{grid-area:brand;justify-self:start;align-items:flex-start;text-align:left;min-width:0;max-width:100%;font-size:20px;}
 body[data-studio="tool"] .tool-return-header .freeify-brand small{white-space:normal;overflow-wrap:anywhere;font-size:12px;}
 body[data-studio="tool"] .tool-return-header .freeify-theme-slot{grid-area:theme;justify-self:end;}
 body[data-studio="tool"] .tool-return-header .theme-current{display:none;}
 body[data-studio="tool"] .tool-return-header .back{grid-area:return;justify-self:start;max-width:100%;white-space:normal;box-sizing:border-box;}
 body[data-studio="tool"] .skip-link:focus{top:146px;}
 body[data-studio="tool"] #workspace{scroll-margin-top:156px;}
}