/* Uses the existing ASCIIForge palette and typography. Previews keep their
   literal spaces and scroll inside the card rather than widening the page. */
.font-group-page > .lead { max-width:76ch; }
.font-group-form { display:flex; align-items:end; gap:1rem; flex-wrap:wrap; margin:1.5rem 0 .75rem; }
.font-group-form[hidden] { display:none; }
.font-group-form > div { display:grid; gap:.4rem; min-width:150px; }
.font-group-form > div:first-child { flex:1; max-width:480px; }
.font-group-form input,.font-group-form select { width:100%; min-height:44px; }
.font-group-form button { min-height:44px; }
#font-group-status { min-height:3em; color:var(--muted); overflow-wrap:anywhere; }
.font-group-table { max-width:100%; overflow:auto; margin-bottom:2rem; }
.font-group-table table { min-width:540px; width:100%; }
.font-group-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
.font-group-card { min-width:0; padding:1.25rem; background:var(--panel); border:1px solid var(--border); border-radius:12px; display:flex; flex-direction:column; scroll-margin-top:6rem; }
.font-group-card h3 { margin-top:0; }
.font-group-card > p { color:var(--muted); }
.font-group-preview { max-width:100%; min-height:160px; overflow:auto; margin:.5rem 0; padding:1rem; font:12px/1.2 var(--mono); white-space:pre; background:var(--bg); color:var(--text); }
.font-group-actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:auto; }
.font-group-actions .button { min-height:44px; }
.font-group-card[data-state="error"] .font-group-preview { white-space:normal; }
.font-group-notes { max-width:80ch; margin-block:2.5rem; }
.font-group-related { padding-top:1rem; border-top:1px solid var(--border); }
.font-group-page :is(a,button,input,select,[tabindex]):focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media(max-width:760px) { .font-group-grid { grid-template-columns:minmax(0,1fr); } .font-group-form { align-items:stretch; } .font-group-form > div:first-child { flex-basis:100%; max-width:none; } }