/* special-characters: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.inline-fields { display: flex; gap: 8px; }
.inline-fields input { min-width: 0; }
.inline-fields input[type="color"] { width: 56px; flex: none; }
.chars-list { display: flex; flex-direction: column; gap: 18px; max-height: 560px; overflow-y: auto; padding-right: 4px; }
.chars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.char-btn {
    aspect-ratio: 1; display: grid; place-items: center; font-size: 1.45rem; line-height: 1; color: var(--ink);
    background: var(--paper); border: 1px solid var(--line); border-radius: 10px; cursor: copy;
}
.char-btn:hover { border-color: var(--signal); background: var(--signal-soft); }
.chars-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: end; padding-top: 14px; border-top: 1px solid var(--line); background: var(--paper); }
.chars-detail { display: flex; align-items: center; gap: 14px; min-width: 0; }
.chars-detail .code { font: 0.85rem var(--mono); color: var(--slate); overflow-wrap: anywhere; }
.chars-detail-glyph { flex: none; width: 56px; height: 56px; display: grid; place-items: center; font-size: 2rem; border-radius: 12px; background: var(--mist); }
.chars-detail-glyph:empty { display: none; }
@media (max-width: 640px) { .chars-bar { grid-template-columns: 1fr; } }