/* Shared appearance settings; colors follow the selected palette and mode. */
.appearance-settings {
    width: min(620px, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 1.5rem;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--card);
    color: var(--foreground);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-sans);
}
.appearance-settings::backdrop { background: color-mix(in srgb, var(--overlay-ink) 48%, transparent); backdrop-filter: blur(3px); }
.appearance-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.appearance-settings h2 { margin: 0 0 .4rem; color: var(--foreground); font-size: 1.35rem; font-weight: 750; }
.appearance-settings p { margin: 0; color: var(--muted-foreground); font-size: .88rem; line-height: 1.5; }
.appearance-close {
    display: grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem;
    border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
    background: var(--card); color: var(--foreground); font-size: 1.4rem;
}
.appearance-section { min-width: 0; margin: 1.7rem 0 0; padding: 0; border: 0; }
.appearance-section legend { padding: 0; margin-bottom: .35rem; font-size: .95rem; font-weight: 700; }
.appearance-modes, .appearance-palettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .9rem; }
.appearance-modes label, .appearance-palette {
    position: relative; display: flex; align-items: center; gap: .65rem;
    padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card); color: var(--foreground); cursor: pointer;
}
.appearance-settings input[type="radio"] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--primary); flex-shrink: 0; }
.appearance-modes label:has(:checked), .appearance-palette:has(:checked) {
    border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, var(--card));
    box-shadow: 0 0 0 1px var(--primary);
}
.appearance-settings :focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
.appearance-palette { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.appearance-palette input { grid-column: 2; grid-row: 2; }
.appearance-swatches { grid-column: 1 / -1; display: flex; height: 2.7rem; margin-bottom: .35rem; border: 1px solid var(--border); border-radius: .4rem; overflow: hidden; }
.appearance-swatches i { flex: 1; }
.appearance-palette strong { grid-column: 1; grid-row: 2; font-size: .9rem; }
.appearance-palette small { grid-column: 1 / -1; color: var(--muted-foreground); font-size: .78rem; }
.appearance-footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.appearance-footer p { font-size: .78rem; }
@media (max-width: 480px) {
    .appearance-settings { padding: 1rem; }
    .appearance-palettes { grid-template-columns: 1fr; }
    .appearance-footer { align-items: flex-start; }
}

/* Palette-aware foregrounds for components previously assuming a dark primary. */
.brand-mark { color: var(--primary-foreground); }
html[data-palette="vercel"] body { font-family: var(--font-sans); }
html[data-palette="vercel"] code, html[data-palette="vercel"] pre, html[data-palette="vercel"] kbd { font-family: var(--font-mono); }
html[data-palette="vercel"] {
    --subtle: var(--muted-foreground);
    --line-strong: var(--border);
    --shadow-sm: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-spread) rgb(0 0 0 / var(--shadow-opacity));
}
html[data-palette="vercel"] .sidebar { border-color: var(--sidebar-border); }
html[data-palette="vercel"] .sidebar-link.is-active,
html[data-palette="vercel"] .space-link.is-active { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
html[data-palette="vercel"] .btn:not(.btn-light):not(.btn-danger):not(.btn-secondary),
html[data-palette="vercel"] .workspace-chat .workspace-chat-toggle,
html[data-palette="vercel"] .workspace-chat .workspace-chat-toggle.has-unread {
    background: var(--primary); color: var(--primary-foreground);
}
html[data-palette="vercel"] .btn-secondary { background: var(--secondary); color: var(--secondary-foreground); }
html[data-palette="vercel"] .btn-danger { background: var(--destructive); color: var(--destructive-foreground); }