/* Font pairs: font choosers, the bilingual sample and the scale table. Loaded only on /tools/font-pairs/. */
.fp-note { margin: 0; font-size: var(--matrix-type-caption); }
.fp-availability { color: var(--matrix-text); }
.fp-inline-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--matrix-space-4) var(--matrix-space-12); padding: var(--matrix-space-4) var(--matrix-space-12); }
.fp-inline-group legend { font-weight: 500; font-size: var(--matrix-type-caption); }
.fp-inline-group .option-row { min-height: 0; }
.option-group select.matrix-input { max-width: 100%; }
#heading-family, #body-family { width: min(100%, 16em); }
.fp-scale .option-row input[type="range"] { width: min(100%, 160px); }
.fp-preview-block { display: grid; gap: var(--matrix-space-8); }
.fp-preview-block h3 { margin: 0; }
.fp-sample { padding: var(--matrix-space-24); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-panel); background: var(--matrix-surface); color: var(--matrix-text); overflow-wrap: anywhere; }
.fp-sample .fp-h { margin: 0 0 0.35em; }
.fp-sample p { margin: 0 0 0.8em; }
.fp-sample .fp-small { color: var(--matrix-muted); }
.fp-scale-table { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--matrix-space-4) var(--matrix-space-12); font-size: var(--matrix-type-caption); }
.fp-scale-table li { display: flex; justify-content: space-between; gap: var(--matrix-space-8); border-bottom: 1px solid var(--matrix-border); padding: 2px 0; }
.fp-scale-table code { font-family: var(--matrix-font-mono); }
.fp-field-error { margin: 0; font-size: var(--matrix-type-caption); } /* under a number field that cannot be used */
/* The scale, the rhythm and the export, folded under a summary that says what they are set to (fb_78a3885d); the summary is a
   44 px target. The pairing's ZIP at the top of its sample. */
.fp-more { border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); padding: 0 var(--matrix-space-16); }
.fp-more[open] { display: grid; gap: var(--matrix-space-16); padding-bottom: var(--matrix-space-16); }
.fp-more > summary { cursor: pointer; font-weight: 600; min-height: 44px; box-sizing: border-box; padding-block: 10px; overflow-wrap: anywhere; }
.fp-more-state { font-weight: 400; }
.fp-more > .option-group { border: 0; padding: 0; }
.fp-zip:empty { display: none; }
.fp-zip .download { min-height: 44px; }