/* Loaded after the existing design. Unsaved sites keep their original colors. */
.site-appearance-custom { background: var(--bg); }
.site-appearance-custom body, .site-appearance-custom body:has(.pub-head) { background-color: var(--bg); color: var(--ink); }
.site-appearance-custom body:has(.pub-head) .pub-head, .site-appearance-custom body:has(.pub-head) .pub-head.scrolled { background-color: var(--bg); color: var(--ink); }
.site-appearance-custom body:has(.home-hero) .home-hero { background-color: var(--bg); color: var(--ink); }
.site-appearance-custom body:has(.home-hero) .home-hero h1, .site-appearance-custom body:has(.home-hero) .home-hero .overline { color: var(--ink); }
.site-appearance-custom body:has(.portal-shell) .portal-shell, .site-appearance-custom body:has(.portal-shell) .portal-shell .content { background-color: var(--bg); color: var(--ink); }
.site-appearance-custom body:has(.portal-shell) .portal-top { background-color: var(--bg); }
.site-appearance-custom body:has(.portal-shell) .side-nav { background-color: var(--bg); }
.site-appearance-custom body:has(.portal-shell) .tabbar, .site-appearance-custom body:has(.pub-head) .tabbar { border-color: var(--accent); }
.site-appearance-custom body:has(.portal-shell) .tabbar [aria-current="page"], .site-appearance-custom body:has(.pub-head) .tabbar [aria-current="page"] { color: var(--accent); }
.site-appearance-custom body .btn:not(.ghost):not(.outl):not(.danger), .site-appearance-custom body .btn.gold { background-color: var(--forest); border-color: var(--forest); }
.site-appearance-custom body a:not(.btn):hover, .site-appearance-custom body .home .sc svg { color: var(--accent); }
/* Progressive disclosure keeps the interface editor usable on narrow phones. */
.interface-group { margin-block: 12px; min-width: 0; }
.interface-group > summary, .interface-subgroup > summary { cursor: pointer; font-weight: 700; padding: 12px 4px; list-style-position: inside; }
.interface-group > summary { font-size: 1.15rem; }
.interface-subgroup { border-top: 1px solid var(--border, #d9ddd5); min-width: 0; }
.interface-subgroup > .form, .interface-subgroup > .field, .interface-subgroup > .appearance-nav-row { margin-inline: 8px; }
.appearance-nav-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.appearance-nav-row .field, .appearance-editor input, .appearance-editor select { min-width: 0; max-width: 100%; }
@media (max-width: 440px) { .appearance-nav-row { grid-template-columns: minmax(0, 1fr); } }