/* Shared phone sheet / desktop dialog, v1.0.0. */
.appearance-entry { width: 100%; text-align: left; font: inherit; }
.appearance-current { color: var(--pl-selected-fg); font-size: 12px; white-space: nowrap; }
.appearance-dialog { box-sizing: border-box; width: min(540px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 28px; border: 1px solid var(--pl-border); border-radius: 22px; color: var(--pl-text-main); background: var(--pl-card-bg); box-shadow: var(--pl-shadow-lg); overflow-y: auto; }
.appearance-dialog::backdrop { background: rgba(23,23,47,.38); }
.appearance-dialog h2 { margin: 0 48px 10px 0; font-size: 22px; }
.appearance-dialog p { color: #626a7b; font-size: 14px; line-height: 1.7; }
.appearance-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--pl-bg-soft); color: var(--pl-text-main); font-size: 28px; cursor: pointer; }
.appearance-dialog fieldset { border: 0; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; min-width: 0; }
.appearance-choice { display: grid; grid-template-columns: 22px 1fr auto; align-items: start; gap: 10px; padding: 16px; border: 2px solid var(--pl-control-border); border-radius: 14px; cursor: pointer; min-height: 44px; }
.appearance-choice:has(input:checked) { border-color: var(--pl-action); background: var(--pl-selected-bg); }
.appearance-choice:has(input:focus-visible) { outline: 2px solid var(--pl-focus); outline-offset: 3px; }
.appearance-choice input { width: 20px; height: 20px; margin: 2px 0; accent-color: var(--pl-action); }
.appearance-choice-copy { font-size: 16px; line-height: 1.5; }
.appearance-choice-description { display: block; font-size: 12px; color: #626a7b; margin-top: 6px; }
.appearance-default { font-size: 11px; margin-left: 8px; color: #626a7b; }
.appearance-choice-state { font-size: 12px; color: var(--pl-selected-fg); white-space: nowrap; grid-column: 3; grid-row: 1; padding-top: 3px; }
.appearance-preview { grid-column: 2 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px; border-radius: 9px; background: white; color: #202438; font-size: 11px; }
.appearance-indigo { --sample-action: var(--pl-indigo-action); --sample-soft: var(--pl-indigo-soft); --sample-fg: var(--pl-indigo-text); --pl-home-cta-fill: var(--pl-indigo-home-cta-fill); --pl-home-cta-shadow: var(--pl-indigo-home-cta-shadow); }
.appearance-rose { --sample-action: var(--pl-rose-action); --sample-soft: var(--pl-rose-soft); --sample-fg: var(--pl-rose-text); --pl-home-cta-fill: var(--pl-rose-home-cta-fill); --pl-home-cta-shadow: var(--pl-rose-home-cta-shadow); }
.appearance-preview-button { padding: 6px 9px; border-radius: 6px; }
.appearance-preview-tag { padding: 5px 7px; background: var(--sample-soft); color: var(--sample-fg); border-radius: 6px; }
.appearance-status { min-height: 24px; margin: 16px 0 0; }
.appearance-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 600px) {
 .appearance-dialog { width: 100%; max-height: calc(100dvh - 20px); margin: auto 0 0; border-radius: 22px 22px 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 350px) {
 .appearance-dialog { padding-left: 14px; padding-right: 14px; }
 .appearance-choice { padding: 12px; gap: 8px; }
 .appearance-choice-state { grid-column: 2 / -1; grid-row: auto; }
}