/* Appearance picker: also available to guests via the header settings button. */
.appearance-ui{display:grid;gap:1.5rem}
.appearance-intro{color:var(--muted);font-size:.875rem;line-height:1.65}
.appearance-section{display:grid;gap:.75rem}
.appearance-heading h3{font-size:1rem;font-weight:700;letter-spacing:0}
.appearance-heading p{color:var(--muted);font-size:.8125rem;margin-top:.2rem}
.appearance-theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.625rem}
.appearance-option{position:relative;text-align:center;min-width:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.5rem;padding:.65rem .5rem;border:1.5px solid var(--line);border-radius:.75rem;background:var(--surface);transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;min-height:3.7rem}
.appearance-option:hover{border-color:var(--brand);background:var(--soft)}
.appearance-option.is-selected{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand);background:var(--lavender)}
.appearance-option-label{font-size:.775rem;line-height:1.25;font-weight:650}
.appearance-tick{position:absolute;right:.3rem;top:.3rem;border-radius:100%;color:var(--on-brand);background:var(--brand);width:1.15rem;height:1.15rem;display:none;place-items:center}
.appearance-tick .icon{width:.7rem;height:.7rem;stroke-width:3}
.appearance-option.is-selected .appearance-tick{display:grid}
.appearance-swatches{display:block;position:relative;width:100%;max-width:9rem;height:3.45rem;background:var(--sw-bg);border-radius:.5rem;overflow:hidden;border:1px solid #8883}
.swatch-page{display:block;width:100%;height:100%;padding:.5rem}
.swatch-card{display:grid;gap:.3rem;width:88%;height:100%;background:var(--sw-surface);padding:.45rem;border-radius:.22rem;box-shadow:0 1px 3px #0001}
.swatch-card i{height:.25rem;border-radius:10rem;width:78%;background:var(--sw-accent);opacity:.75}
.swatch-card i:nth-child(2){width:100%;opacity:.3}.swatch-card i:nth-child(3){width:55%;opacity:.3}
.appearance-size-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem}
.appearance-size-grid .appearance-option{padding:.5rem .25rem;gap:.3rem;min-height:4.7rem}
.appearance-letter{color:var(--ink);line-height:1.15;font-weight:600}.appearance-letter.size-0{font-size:.93rem}.appearance-letter.size-1{font-size:1.08rem}.appearance-letter.size-2{font-size:1.23rem}.appearance-letter.size-3{font-size:1.4rem}.appearance-letter.size-4{font-size:1.6rem}
.appearance-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.typeface-sample{font-size:1.6rem;line-height:1.2;color:var(--brand)}.typeface-sample.editorial{font-family:Georgia,serif;font-style:italic}.typeface-sample.readable{font-family:Verdana,sans-serif;font-weight:700}.typeface-sample.standard{font-family:Inter,'Segoe UI',sans-serif}
.appearance-spacing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.appearance-spacing-grid .appearance-option{min-height:2.9rem}
.appearance-preview{border-radius:.75rem;background:var(--soft);border:1px solid var(--line);padding:1.25rem}
.appearance-preview h3{font-size:1.5rem;margin-top:.5rem;font-weight:400}.appearance-preview p{font-size:.875rem;margin:.65rem 0;color:var(--muted);line-height:1.7}
.appearance-footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.appearance-ui .text-link{font-size:.8125rem}
/* Ensure useful contrast in themes whose accent is light against dark surfaces. */
[data-theme="dark"] .bottom-nav .compose-mobile,[data-theme="slate"] .bottom-nav .compose-mobile{color:var(--on-brand)}
/* Two extra-large modes should let content reflow rather than clip labels. */
[data-text-size="extra-large"] .nav-item,[data-text-size="maximum"] .nav-item{min-height:2.65rem}
[data-text-size="extra-large"] .btn,[data-text-size="maximum"] .btn{white-space:normal;text-align:center}
@media(max-width:760px){.appearance-theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.appearance-option-label{font-size:.72rem}.appearance-size-grid{gap:.25rem}.appearance-size-grid .appearance-option{padding:.5rem .12rem}.appearance-preview{padding:1rem}}
@media(max-width:390px){.appearance-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.appearance-choice-grid{grid-template-columns:1fr 1fr}.appearance-choice-grid .appearance-option:last-child{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){.appearance-option{transition:none}}