/* Shared, scoped controls for the existing tools. */
.font-explorer[hidden], .font-card[hidden], #gallery-more[hidden], .ad-placement[hidden] { display:none; }
.usability-filters { display:grid; grid-template-columns:minmax(12rem,2fr) repeat(2,minmax(8rem,1fr)); gap:1rem; align-items:end; margin:1.5rem 0 1rem; }
.usability-filters .field { min-width:0; margin:0; }
.usability-filters input, .usability-filters select, .readme-fields textarea { width:100%; min-width:0; }
.usability-filters input[type=search] { appearance:none; min-height:2.75rem; padding:.75rem; border:1px solid var(--border,#253241); border-radius:.6rem; background:var(--panel,#0f1722); color:var(--text,#e8f0f7); font:inherit; }
.usability-filters label, .readme-fields label { display:block; margin-bottom:.5rem; }
.usability-filters .check-label { display:flex; align-items:center; gap:.6rem; min-height:2.75rem; margin:0; }
.usability-filters input[type=checkbox], .readme-fields input[type=checkbox] { width:auto; min-width:1.2rem; min-height:1.2rem; }
.usability-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin:1rem 0; align-items:center; }
.usability-status { min-height:1.5em; font-variant-numeric:tabular-nums; }
.font-explorer, .gallery-finder, .readme-builder, #readme-preview { scroll-margin-top:6rem; }
#find-fitting-fonts { margin-top:.75rem; }
.font-explorer .font-gallery { margin-top:1rem; }
.font-explorer .font-card, #gallery-results .example-card { min-width:0; }
.font-explorer .font-card-name { align-items:start; flex-wrap:wrap; gap:.65rem; }
.gallery-finder { margin-bottom:2rem; }
.gallery-finder .usability-filters { grid-template-columns:minmax(12rem,2fr) repeat(3,minmax(8rem,1fr)); }
.gallery-finder .usability-filters .field:first-child { grid-column:1 / -1; }
.gallery-finder .small, .readme-builder .small { max-width:75ch; }
#gallery-results:empty { display:none; }
.gallery-favorite { justify-self:start; }
.gallery-favorite[aria-pressed=true] { border-color:var(--accent,#2dd4bf); color:var(--accent,#2dd4bf); }
.readme-builder { margin:2.5rem 0; padding-top:2rem; border-top:1px solid var(--border,#253241); }
.readme-layout { display:grid; grid-template-columns:minmax(15rem,.8fr) minmax(0,1.2fr); gap:1.5rem; align-items:start; }
.readme-fields { min-width:0; }
.readme-fields .field { margin-bottom:1.25rem; }
.readme-fields textarea { resize:vertical; min-height:6rem; padding:.8rem; border:1px solid var(--border,#253241); border-radius:.6rem; background:var(--panel,#0f1722); color:var(--text,#e8f0f7); font:inherit; }
.readme-fields label:has(input) { display:flex; align-items:center; gap:.65rem; }
.usability-sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.readme-fields textarea:disabled { opacity:.45; }
.readme-result { min-width:0; }
.readme-result details { margin-bottom:1rem; border:1px solid var(--border,#253241); border-radius:.75rem; overflow:hidden; }
.readme-result summary { cursor:pointer; padding:1rem; font-weight:600; min-height:2.75rem; }
.readme-preview { padding:0 1rem 1rem; overflow-wrap:anywhere; }
.readme-preview pre, #readme-markdown { white-space:pre; overflow:auto; max-width:100%; font-family:var(--mono,monospace); font-size:.75rem; line-height:1.35; padding:.75rem; background:#091018; border-radius:.4rem; }
.readme-preview h3 { margin-top:.5rem; }
#readme-markdown { margin:0 1rem 1rem; max-width:calc(100% - 2rem); }
.ad-placement { min-height:17.5rem; width:100%; max-width:60rem; margin:3rem auto; }
.font-explorer :focus-visible, .gallery-finder :focus-visible, .readme-builder :focus-visible { outline:2px solid var(--accent,#2dd4bf); outline-offset:3px; }
@media(max-width:900px) { .gallery-finder .usability-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .readme-layout { grid-template-columns:minmax(0,1fr); } }
@media(max-width:550px) { .usability-filters, .gallery-finder .usability-filters { grid-template-columns:minmax(0,1fr); } .usability-actions .button { max-width:100%; white-space:normal; } }