/* Appearance choices keep a visible native radio and selected state in both modes.
   Avoid legacy utility colour overrides on these controls. */
.f4-appearance-choice{position:relative;display:inline-block;cursor:pointer;color-scheme:light}
.f4-appearance-choice>span{display:block;min-height:44px;padding:10px 12px 10px 38px;border:2px solid var(--f4-border-strong, ButtonBorder);border-radius:4px;background:var(--f4-surface, Canvas);color:var(--f4-ink, CanvasText);font-size:14px;line-height:20px}
.f4-appearance-choice input[type="radio"]{position:absolute;z-index:1;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;margin:0;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;accent-color:var(--f4-link, Highlight);background:none;border:0;box-shadow:none;color-scheme:light}
html.dark-mode .f4-appearance-choice,html.dark-mode .f4-appearance-choice input[type="radio"]{color-scheme:dark}
.f4-appearance-choice input[type="radio"]:checked{background:none;border:0}
.f4-appearance-choice input:checked+span{background:var(--f4-btn-secondary-bg, ButtonFace);border-color:var(--f4-link, Highlight);font-weight:600}
.f4-appearance-choice:hover>span{background:var(--f4-btn-secondary-hover, ButtonFace)}
.f4-appearance-choice input:focus-visible+span{outline:3px solid var(--f4-focus, Highlight);outline-offset:2px}