/* settings.css: Settings page, theme and font choosers, warning banner. */
/* ===== SETTINGS ===== */
.settings-help { color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 14px; }
.settings-blocked-list { display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; list-style: none; }
.settings-blocked-list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
}
.settings-blocked-list__row form { max-width: none; margin: 0; }
.settings-toggles { display: flex; flex-direction: column; gap: 14px; }
.settings-toggles form { max-width: none; margin: 0; }
.setting-toggle {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
}

/* ===== SETTINGS: THEME CHOOSER ===== */
.theme-chooser {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.theme-group { display: flex; flex-direction: column; gap: 12px; }
.theme-group__header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.theme-group__title { margin: 0; font-size: 1rem; }
.theme-group__note { color: var(--text-muted); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }
.theme-group__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.theme-choice-form { max-width: none; margin: 0; }
.theme-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 224px;
    gap: 12px;
    padding: 10px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-subtle);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.theme-card.is-selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.theme-card:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}
@media (hover: hover) {
    .theme-card:hover {
        border-color: var(--color-primary);
        transform: translateY(-2px);
    }
}
.theme-card__preview {
    display: flex;
    flex-direction: column;
    min-height: 116px;
    gap: 8px;
    padding: 12px;
    overflow: hidden;
    border-radius: var(--radius-md);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
}
.theme-preview--default { background: linear-gradient(135deg, #241638 0%, #39205b 58%, #5a35b5 100%); }
.theme-preview--daylight { background: linear-gradient(135deg, #f2eef9 0%, #d9f0ed 58%, #f0bac9 100%); color: #1c1230; }
.theme-preview--aurora { background: linear-gradient(135deg, #0e2532 0%, #14556a 58%, #4b3ea0 100%); }
.theme-preview--comet { background: linear-gradient(135deg, #fffaf4 0%, #f4d4bd 58%, #f0c0ae 100%); color: #2b1a12; }
.theme-preview--mosslight { background: linear-gradient(135deg, #112524 0%, #1d544c 58%, #16785e 100%); }
.theme-preview--emberwake { background: linear-gradient(135deg, #2a1720 0%, #66303a 58%, #9a5720 100%); }
.theme-preview--surveyor { background: linear-gradient(135deg, #ffffff 0%, #dbe7f2 58%, #b7dbe3 100%); color: #111827; }
.theme-preview--rose-nebula { background: linear-gradient(135deg, #1f0e19 0%, #5a2346 58%, #4a5690 100%); }
.theme-preview--hearth-dusk { background: linear-gradient(135deg, #2e222f 0%, #7a3045 52%, #cd683d 100%); }
.theme-preview--tidelight { background: linear-gradient(135deg, #271854 0%, #317c87 58%, #db604c 100%); }
.theme-preview--orchard { background: linear-gradient(135deg, #f2f2f2 0%, #a8ed77 58%, #5fbc62 100%); color: #1b1f1d; }
.theme-preview--firefly-creek { background: linear-gradient(135deg, #001e3d 0%, #005c66 58%, #a1411b 100%); }
.theme-preview--slate-hollow { background: linear-gradient(135deg, #232a36 0%, #55516f 52%, #9a945c 100%); }
.theme-preview--high-contrast { background: linear-gradient(135deg, #000000 0%, #242424 58%, #005a5a 100%); }
.theme-preview--colorblind-safe { background: linear-gradient(135deg, #081522 0%, #15364c 58%, #935f00 100%); }
.theme-card__preview-top,
.theme-card__preview-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.theme-card__preview-top { font-size: 1.2rem; }
.theme-card__preview-signal { width: 42px; height: 6px; border-radius: var(--radius-pill); background: currentColor; opacity: .45; }
.theme-card__preview-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.theme-card__preview-row span { height: 7px; flex: 1; border-radius: var(--radius-pill); background: currentColor; opacity: .3; }
.theme-card__preview-row span:first-child { flex: 1.5; opacity: .65; }
.theme-card__preview-action { align-self: flex-start; padding: 4px 8px; border: 1px solid currentColor; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.theme-card__copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.theme-card__name { font-size: 1rem; font-weight: 700; }
.theme-card__tone { color: var(--text-secondary); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }
.theme-card__description { color: var(--text-secondary); font-size: .82rem; line-height: 1.45; }
.theme-card__status { margin-top: auto; align-self: flex-start; color: var(--color-primary); font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.theme-card__status[hidden] { display: none; }
.theme-card:disabled { transform: none; cursor: wait; }
.theme-chooser[aria-busy="true"] .theme-card { opacity: .72; }
.theme-save-status {
    margin: 12px 0 0;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: .75rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.theme-save-status[hidden] { display: none; }
/* ===== SETTINGS: FONT CHOOSER ===== */
.font-chooser {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.font-choice-form { max-width: none; margin: 0; }
.font-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 188px;
    gap: 10px;
    padding: 10px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-subtle);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.font-card.is-selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.font-card:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}
@media (hover: hover) {
    .font-card:hover {
        border-color: var(--color-primary);
        transform: translateY(-2px);
    }
}
.font-card__preview {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 7px;
    min-width: 0;
    padding: 12px;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--bg-cool);
    color: var(--text-primary);
}
.font-card__preview-title {
    font-family: var(--font-preview-family, var(--font-body));
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
}
.font-card__preview-copy {
    font-family: var(--font-preview-family, var(--font-body));
    font-size: .92rem;
    line-height: 1.35;
}
.font-card__preview-data {
    margin-top: auto;
    color: var(--color-primary);
    font-family: var(--font-preview-family, var(--font-body));
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.font-preview--system { --font-preview-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
.font-preview--nunito { --font-preview-family: 'Nunito', system-ui, sans-serif; }
.font-preview--lora { --font-preview-family: 'Lora', Georgia, serif; }
.font-preview--opendyslexic { --font-preview-family: 'Open-Dyslexic', system-ui, sans-serif; }
.font-preview--space-grotesk { --font-preview-family: 'Space Grotesk', system-ui, sans-serif; }
.font-preview--exo-2 { --font-preview-family: 'Exo 2', system-ui, sans-serif; }
.font-preview--quantico { --font-preview-family: 'Quantico', system-ui, sans-serif; }
.font-preview--cormorant-garamond { --font-preview-family: 'Cormorant Garamond', Georgia, serif; }
.font-card__copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.font-card__name { font-size: 1rem; font-weight: 700; }
.font-card__tone { color: var(--text-secondary); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }
.font-card__description { color: var(--text-secondary); font-size: .82rem; line-height: 1.45; }
.font-card__status { margin-top: auto; align-self: flex-start; color: var(--color-primary); font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.font-card__status[hidden] { display: none; }
.font-card:disabled { transform: none; cursor: wait; }
.font-chooser[aria-busy="true"] .font-card { opacity: .72; }
.font-save-status {
    margin: 12px 0 0;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: .75rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.font-save-status[hidden] { display: none; }
@media (max-width: 768px) {
    .font-card { min-height: 0; gap: 8px; padding: 8px; }
    .font-card__preview { min-height: 112px; padding: 10px; }
    .font-card__description { font-size: .75rem; }
}
@media (max-width: 600px) {
    .font-chooser { grid-template-columns: 1fr; }
}

.theme-calibration {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--border-subtle);
}
.theme-calibration__header h3 { margin: 6px 0 4px; font-size: 1.15rem; }
.theme-calibration__header p { margin: 0; max-width: 68ch; color: var(--text-secondary); font-size: .88rem; }
.theme-calibration__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.theme-calibration__sample {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
}
.theme-calibration__sample--conditions { background: var(--bg-cool); }
.theme-calibration__sample-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.theme-calibration__sample-head strong { display: block; margin-top: 4px; font-family: var(--font-heading); }
.theme-calibration__copy { margin: 0; color: var(--text-secondary); font-size: .86rem; line-height: 1.5; }
.theme-calibration__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-calibration__field { display: flex; flex-direction: column; gap: 5px; }
.theme-calibration__field .field-label { color: var(--text-secondary); font-size: .78rem; font-weight: 700; }
.theme-calibration__input {
    display: block;
    padding: 9px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: .86rem;
}
.theme-calibration__field .form-hint { margin: 0; color: var(--text-muted); font-size: .74rem; }
.theme-calibration__validation {
    color: var(--color-error-ink);
    font-size: .76rem;
    line-height: 1.35;
}
.theme-calibration__focus-example {
    align-self: flex-start;
    padding: 7px 9px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: .76rem;
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}
.theme-calibration__status-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-calibration__conditions-strip { margin: 0; padding: 12px; }
/* Collapsed by default at every width (x-data="toggler" on the <details>, no `open`
   attribute): this panel is sample UI, not a setting, and used to be forced permanently
   open on desktop because this summary was display:none there. Now it's a real, always-
   visible disclosure control, matching every other "disclosure, not deletion" panel in
   the codebase (the squad card's own stats/traits toggle, the incursion onboarding). */
.settings-calibration-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.settings-calibration-disclosure > summary::-webkit-details-marker { display: none; }
.settings-calibration-disclosure > summary span { color: var(--text-muted); font-size: .8rem; font-weight: 400; }
.settings-calibration-disclosure[open] > summary { margin-bottom: 12px; }
@media (max-width: 600px) {
    .theme-group__cards,
    .theme-calibration__grid { grid-template-columns: 1fr; }
    .theme-group__header { align-items: flex-start; flex-direction: column; gap: 4px; }
}
@media (max-width: 768px) {
    .theme-group__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .theme-card { min-height: 0; gap: 8px; padding: 8px; }
    .theme-card__preview { min-height: 82px; gap: 5px; padding: 9px; }
    .theme-card__description { font-size: .75rem; }
}

/* ===== WARNING BANNER (UX10) ===== */
.warning-banner {
    margin: 0 16px 12px;
}
.warning-banner-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    margin-top: 8px;
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius-md);
}
.warning-banner-row p { margin: 0; }