/* Temporary design controls. Stable local type keeps the picker usable while experimenting. */
#font-preview {
  --font-display-weight: initial;
  --font-body-weight: initial;
  --font-ui-weight: initial;
  --font-code-weight: initial;
  --font-ui: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --font-body: "Geist", Arial, sans-serif;
  position: fixed;
  right: calc(max(18px, env(safe-area-inset-right)) + 112px);
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 15;
  color: var(--ink);
  color-scheme: var(--panel-scheme);
  font: .8125rem/1.4 var(--font-body);
}
#font-preview button, #font-preview input, #font-preview textarea { font: inherit; color: var(--ink); min-width: 0; }
#font-preview button:focus-visible, #font-preview input:focus-visible, #font-preview textarea:focus-visible { outline: 2px dashed var(--ink); outline-offset: 2px; }
#font-preview .font-preview-toggle { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100px; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line); background: var(--paper); font: .875rem/1.5 var(--font-ui); box-shadow: 3px 3px 0 #0004; }
#font-preview .font-preview-toggle > span { font: 600 1.05rem var(--font-body); letter-spacing: -.07em; }
#font-preview-panel { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: calc(max(18px, env(safe-area-inset-bottom)) + 52px); display: flex; flex-direction: column; width: min(410px, calc(100vw - 36px)); max-height: calc(100dvh - 88px); border: 1px solid var(--line); border-top: 3px solid var(--accent); background: var(--paper); box-shadow: 5px 5px 0 #0004; overflow: auto; overscroll-behavior: contain; }
#font-preview [hidden] { display: none; }
#font-preview .font-preview-heading { display: flex; align-items: center; gap: 6px; padding: 16px 16px 12px; }
#font-preview .font-preview-heading > div { flex: 1; min-width: 0; }
#font-preview h2 { margin: 0; font: 600 1.125rem/1.25 var(--font-body); letter-spacing: -.02em; }
#font-preview .font-preview-heading p { margin: 4px 0 0; color: var(--muted); font-size: .75rem; }
#font-preview .font-preview-close, #font-preview .font-preview-move { flex: 0 0 32px; height: 34px; padding: 0; background: transparent; font-size: 1.5rem; }
#font-preview .font-preview-move { touch-action: none; cursor: move; color: var(--muted); }
#font-preview .font-preview-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 16px 14px; }
#font-preview .font-preview-roles button { display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 9px 10px; border: 1px solid var(--line); background: transparent; overflow: hidden; }
#font-preview .font-preview-roles button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
#font-preview .font-preview-role-name { font: 500 .6875rem/1.4 var(--font-ui); }
#font-preview .font-preview-choice { font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
#font-preview .font-preview-weight-control { padding: 0 16px 12px; }
#font-preview .font-preview-weight-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
#font-preview .font-preview-weight-heading label { margin: 0; }
#font-preview .font-preview-weight-heading output { margin-left: 6px; font: .6875rem var(--font-ui); color: var(--muted); }
#font-preview #font-preview-weight-range { color: var(--muted); font: .625rem var(--font-ui); white-space: nowrap; }
#font-preview .font-preview-weight-row { display: flex; align-items: center; gap: 8px; }
#font-preview input[type="range"] { flex: 1; width: 0; height: 34px; min-height: 34px; padding: 0; margin: 0; border: 0; accent-color: var(--accent-ink); background: transparent; cursor: pointer; }
#font-preview input[type="number"] { flex: 0 0 68px; width: 68px; min-height: 34px; padding: 5px 6px; border: 1px solid var(--field-border); border-radius: 0; background: var(--field); font-size: 16px; }
#font-preview input[aria-invalid="true"] { outline: 1px solid var(--error); }
#font-preview .font-preview-weight-reset { min-height: 34px; padding: 5px 7px; border: 1px solid var(--line); background: transparent; font: .625rem var(--font-ui); }
#font-preview .font-preview-browse { padding: 12px 16px 10px; border-top: 1px solid var(--line); }
#font-preview label { display: block; margin: 0 0 8px; font: .8125rem/1.4 var(--font-body); letter-spacing: 0; text-transform: none; }
#font-preview .font-preview-search-row { display: flex; gap: 6px; }
#font-preview input[type="search"] { width: 100%; padding: 8px 10px; min-height: 38px; border: 1px solid var(--field-border); border-radius: 0; background: var(--field); font-size: 16px; }
#font-preview .font-preview-search-row button { flex: 0 0 34px; border: 1px solid var(--field-border); background: transparent; font-size: 1.125rem; }
#font-preview button:disabled { opacity: .4; cursor: default; }
#font-preview .font-preview-filters { display: flex; gap: 6px; margin-top: 10px; }
#font-preview .font-preview-filters button { flex: 1; min-height: 32px; padding: 5px; background: transparent; border: 1px solid var(--line); font: .6875rem/1.4 var(--font-ui); }
#font-preview .font-preview-filters button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
#font-preview .font-preview-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 6px; padding: 3px 16px 10px; min-height: 88px; height: 230px; flex-shrink: 1; overflow-y: auto; overscroll-behavior: contain; }
#font-preview .font-preview-list button { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 7px; text-align: left; min-height: 78px; padding: 10px; border: 1px solid var(--line); background: var(--field); overflow-wrap: anywhere; }
#font-preview .font-preview-list button:hover { border-color: var(--ink); }
#font-preview .font-preview-list button[aria-pressed="true"] { border-color: var(--accent-ink); box-shadow: inset 3px 0 0 var(--accent-ink); background: var(--soft); }
#font-preview .font-preview-sample { font-size: 1.0625rem; line-height: 1.2; }
#font-preview .font-preview-category { color: var(--muted); font: .5625rem/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .04em; }
#font-preview .font-preview-empty { grid-column: 1 / -1; color: var(--muted); padding: 12px 0; }
#font-preview .font-preview-footer { padding: 12px 16px; border-top: 1px solid var(--line); }
#font-preview .font-preview-actions { display: flex; gap: 8px; }
#font-preview .font-preview-actions button { flex: 1; min-height: 38px; padding: 8px; border: 1px solid var(--ink); background: transparent; font: .6875rem/1.4 var(--font-ui); }
#font-preview .font-preview-actions .font-preview-copy { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
#font-preview .font-preview-status { margin: 10px 0 0; min-height: 2.8em; color: var(--muted); font: .75rem/1.4 var(--font-body); }
#font-preview .font-preview-export { margin-top: 10px; width: 100%; font: .6875rem/1.4 var(--font-ui); background: var(--field); }
@media (max-width: 340px) {
  #font-preview .font-preview-heading, #font-preview .font-preview-browse, #font-preview .font-preview-footer { padding-left: 12px; padding-right: 12px; }
  #font-preview .font-preview-roles, #font-preview .font-preview-list { padding-left: 12px; padding-right: 12px; }
  #font-preview .font-preview-weight-control { padding-inline: 12px; }
  #font-preview .font-preview-list { grid-template-columns: 1fr; }
}
@media (max-height: 700px) {
  #font-preview .font-preview-heading { padding-block: 6px; }
  #font-preview .font-preview-roles { padding-bottom: 8px; }
  #font-preview .font-preview-roles button { padding-block: 4px; gap: 2px; }
  #font-preview .font-preview-weight-control { padding-bottom: 8px; }
  #font-preview .font-preview-list { min-height: 64px; }
  #font-preview .font-preview-browse, #font-preview .font-preview-footer { padding-block: 8px; }
}