/* Appearance panel (2026-10-23): the palette button, the panel, text style,
   text size and bolder text. Shared by the dashboard pages (dashboard.css)
   and the phone pages (phone.css: Active, Use this phone, iPhone setup).
   The theme colours themselves are variables set by appearance.js. */
.appearance-button{display:inline-grid;place-items:center;width:34px;height:34px;flex:0 0 auto;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text);cursor:pointer}
.appearance-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.appearance-button:hover{border-color:var(--green)}
.appearance-button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.site-language-control .appearance-button{margin-inline-start:4px;width:31px;height:31px;align-self:center}
.appearance-dialog{width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--text);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.appearance-dialog::backdrop{background:rgba(0,0,0,.6)}
.appearance-form{display:grid;gap:14px;padding:18px}
.appearance-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.appearance-head h2{margin:0;font-size:1.2rem}
.appearance-note{margin:0;color:var(--muted);font-size:.82rem}
.appearance-group{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0;min-width:0}
.appearance-group[hidden]{display:none}
.appearance-group legend{width:100%;margin-bottom:6px;padding:0;color:var(--muted);font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.appearance-choice{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 11px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);cursor:pointer;font-size:.86rem}
.appearance-choice input{position:absolute;opacity:0;pointer-events:none}
.appearance-choice:has(input:checked){border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.appearance-choice:has(input:focus-visible){outline:2px solid var(--green);outline-offset:2px}
.appearance-swatch{display:inline-grid;place-items:center;width:30px;height:24px;border-radius:7px;background:var(--swatch-bg);color:var(--swatch-text);border:2px solid var(--swatch-accent);font-size:.72rem;font-weight:800}
.appearance-swatch-custom{background:conic-gradient(#ff746d,#ffc75c,#31e981,#68c8ff,#c79bff,#ff746d);color:#fff;border-color:var(--line);text-shadow:0 1px 2px #000}
.appearance-themes .appearance-choice{flex:1 1 130px}
.appearance-colour{display:grid;gap:5px;flex:1 1 110px;font-size:.82rem;color:var(--muted)}
.appearance-colour input{width:100%;height:40px;padding:2px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);cursor:pointer}
.appearance-problem{flex-basis:100%;margin:0;color:var(--amber);font-size:.82rem}
.appearance-problem:empty{display:none}
.appearance-actions{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
[data-font-sample="rounded"] span,html[data-font="rounded"] body{font-family:ui-rounded,"SF Pro Rounded","Nunito","Varela Round","Arial Rounded MT Bold",system-ui,sans-serif}
[data-font-sample="serif"] span,html[data-font="serif"] body{font-family:ui-serif,Georgia,Cambria,"Times New Roman",serif}
[data-font-sample="readable"] span,html[data-font="readable"] body{font-family:Verdana,"Atkinson Hyperlegible",Tahoma,"DejaVu Sans",sans-serif;letter-spacing:.02em;word-spacing:.06em}
html[data-text-size="s"]{font-size:93.75%}html[data-text-size="s"] body{font-size:14px}
html[data-text-size="l"]{font-size:112.5%}html[data-text-size="l"] body{font-size:17px}
html[data-text-size="xl"]{font-size:125%}html[data-text-size="xl"] body{font-size:19px}
html[data-text-weight="bold"] body{font-weight:600}
@media(max-width:560px){.appearance-form{padding:14px}.appearance-themes .appearance-choice{flex-basis:calc(50% - 4px)}}