/* A compact launcher beside club colours; detailed controls live in one owned dialog. */
.appearance-launcher{margin-top:.75rem;padding-top:.65rem;border-top:1px solid var(--line)}
.appearance-launcher-button{max-width:100%;text-align:left}
.appearance-launcher-button>span{min-width:0}
.appearance-launcher-button strong{white-space:normal;overflow-wrap:anywhere}
.appearance-launcher-button .appearance-style-swatch{display:grid;place-items:center;background:var(--club-soft);color:var(--club-text);border-color:var(--club-border);font-style:normal}
.appearance-launcher-button .appearance-style-swatch svg{display:block;width:22px;height:22px;flex:none}
#modal-root .modal:has(.appearance-dialog){display:flex;flex-direction:column;width:min(51rem,calc(100vw - 2rem));max-width:calc(100vw - 2rem);max-height:calc(100dvh - 2rem);overflow:hidden}
#modal-root .modal:has(.appearance-dialog)>.modal-head{flex:none;padding:.6rem .85rem;border-bottom:1px solid var(--club-border)}
#modal-root .modal:has(.appearance-dialog)>.modal-head button{min-width:44px;min-height:44px;flex:none}
#modal-root .modal:has(.appearance-dialog)>.modal-body{flex:0 1 auto;min-height:0;overflow:auto;padding:0}
.appearance-editor{min-width:0;padding:0 .85rem;background:var(--surface)}
.appearance-editor [hidden]{display:none!important}
.appearance-editor p,.appearance-editor small{color:var(--muted);font-size:.8rem;line-height:1.5}
.appearance-dialog-note{margin:.75rem 0}
.appearance-dialog-tabs{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem;padding:.45rem 0;background:var(--surface);border-bottom:1px solid var(--line)}
.appearance-dialog-tabs .settings-tab{min-width:0;min-height:44px;padding:.5rem;white-space:normal;font-size:.77rem;line-height:1.4}
.appearance-dialog-panel{min-width:0;padding:.7rem 0 .25rem}
.appearance-role-select{display:grid;gap:.35rem;max-width:25rem;font-size:.78rem;font-weight:650;color:var(--ink)}
.appearance-role-select .select{width:100%;min-height:44px}
.appearance-example{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin:.75rem 0 .1rem}
.appearance-editor [data-appearance-sample]{display:inline-flex;align-items:center;min-height:32px;padding:.3rem .65rem;border:1px solid var(--club-border);border-radius:.65rem;background:var(--club-subtle-gradient);color:var(--club-text);font-weight:750;font-size:.8rem}
.appearance-editor [data-appearance-sample=selected]{background:var(--club-selected-gradient);border-radius:999px}
.appearance-editor [data-appearance-sample=success]{color:var(--success);border-color:var(--status-success-border);background:var(--status-success-bg)}
.appearance-editor [data-appearance-sample=warning]{color:var(--warning);border-color:var(--status-warning-border);background:var(--status-warning-bg)}
.appearance-editor [data-appearance-sample=danger]{color:var(--danger);border-color:var(--status-danger-border);background:var(--status-danger-bg)}
.appearance-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1rem;padding:.65rem 0}
.appearance-field,.appearance-alpha{display:grid;gap:.4rem;min-width:0;font-size:.78rem;font-weight:650;color:var(--ink)}
.appearance-field .select{width:100%;min-width:0;font:inherit;min-height:44px}
.appearance-alpha>span:first-child{display:flex;justify-content:space-between;gap:.5rem}
.appearance-alpha output{font-variant-numeric:tabular-nums;color:var(--club-text);white-space:nowrap}
/* A real alpha ramp over a checkerboard, with native keyboard and touch behavior. */
.appearance-alpha-control{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:.65rem}
.appearance-alpha-checker,.appearance-preview-board{background:repeating-conic-gradient(#e1e5eb 0% 25%,#fff 0% 50%) 50%/12px 12px}
.appearance-alpha-checker{display:grid;place-items:center;height:44px;border:1px solid var(--line);border-radius:.5rem;overflow:hidden}
.appearance-alpha-sample{display:grid;place-items:center;width:34px;height:26px;border-radius:.3rem;font-size:19px;font-weight:750}
.appearance-alpha-sample svg{width:26px;height:24px}
.appearance-alpha input{appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:44px;margin:0;padding:0;background:transparent;border:0;cursor:pointer;box-shadow:none}
.appearance-alpha input::-webkit-slider-runnable-track{height:14px;border:1px solid var(--line);border-radius:999px;background:linear-gradient(90deg,transparent,var(--appearance-alpha-tone,var(--primary))),repeating-conic-gradient(#e1e5eb 0% 25%,#fff 0% 50%);background-size:100% 100%,10px 10px}
.appearance-alpha input::-moz-range-track{height:14px;border:1px solid var(--line);border-radius:999px;background:linear-gradient(90deg,transparent,var(--appearance-alpha-tone,var(--primary))),repeating-conic-gradient(#e1e5eb 0% 25%,#fff 0% 50%);background-size:100% 100%,10px 10px}
.appearance-alpha input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin-top:-6px;border:3px solid var(--surface);border-radius:50%;background:var(--primary);box-shadow:0 0 0 1px var(--club-control-border),0 2px 5px #0002}
.appearance-alpha input::-moz-range-thumb{width:18px;height:18px;border:3px solid var(--surface);border-radius:50%;background:var(--primary);box-shadow:0 0 0 1px var(--club-control-border),0 2px 5px #0002}
.appearance-alpha input::-moz-range-progress{background:transparent;border:0}
.appearance-alpha input:focus-visible{outline:2px solid var(--club-control-border);outline-offset:2px;border-radius:.5rem}
.appearance-live-preview{margin:.7rem 0 .15rem}
.appearance-preview-heading{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;flex-wrap:wrap;margin-bottom:.35rem;font-size:.8rem}
.appearance-preview-heading small{font-size:.72rem}
.appearance-preview-board{border:1px solid var(--line);border-radius:.75rem;overflow:hidden}
.appearance-preview-stage{padding:.55rem}
.appearance-preview-card{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:.6rem;padding:.65rem;border:1px solid var(--club-border);min-width:0}
.appearance-preview-icon{display:grid;place-items:center;width:36px;height:36px}
.appearance-preview-icon svg{width:22px;height:22px}
.appearance-preview-copy{min-width:0;border-radius:.3rem}
.appearance-preview-copy strong,.appearance-preview-copy small{display:block;overflow-wrap:anywhere}
.appearance-preview-copy strong{font-size:.85rem}
.appearance-preview-copy small{font-size:.72rem}
.appearance-preview-action{justify-content:center;text-align:center;max-width:9rem;white-space:normal}
@media(forced-colors:active){.appearance-alpha input{appearance:auto;-webkit-appearance:auto}.appearance-alpha input::-webkit-slider-thumb{appearance:auto;-webkit-appearance:auto}.appearance-alpha-checker,.appearance-preview-board{border-color:CanvasText}}

.appearance-dialog-reset{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin:.65rem 0}
.appearance-dialog-actions{position:sticky;bottom:0;z-index:3;display:flex;justify-content:flex-end;gap:.5rem;padding:.65rem 0;background:var(--surface);border-top:1px solid var(--club-border)}
.appearance-dialog-actions .button{min-height:44px;min-width:8rem}
@media(max-width:560px){
 #modal-root .modal:has(.appearance-dialog){width:calc(100vw - .75rem);max-width:calc(100vw - .75rem);max-height:calc(100dvh - .75rem)}
 .appearance-editor{padding:0 .65rem}
 .appearance-dialog-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .appearance-dialog-tabs .settings-tab{padding:.45rem;font-size:.75rem}
 .appearance-fields{grid-template-columns:minmax(0,1fr);gap:.6rem}
 .appearance-dialog-reset{align-items:start;flex-direction:column}
 .appearance-dialog-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .appearance-dialog-actions .button{min-width:0;width:100%;white-space:normal}
}

/* A compact application scene stays beside the controls without loading an iframe. */
.appearance-preview-nav{display:flex;gap:1rem;padding:.3rem .55rem;margin-bottom:.4rem;border:1px solid var(--club-border);border-radius:.45rem;font-size:.7rem;font-weight:650}
.appearance-preview-form{grid-column:1/-1;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.appearance-preview-field{flex:1 1 9rem;min-width:0;border:1px solid var(--club-control-border);padding:.4rem .55rem;font-size:.73rem}
.appearance-preview-statuses{display:flex;gap:.3rem;flex-wrap:wrap}
.appearance-editor .appearance-preview-statuses [data-appearance-sample]{min-height:26px;padding:.2rem .4rem;font-size:.65rem}
.appearance-preview-action{gap:.35rem}
.appearance-preview-action svg{width:16px;height:16px;flex:none}
.appearance-preview-board *{transition:none!important;animation:none!important}

/* Keep each selected setting's own example beside its control. */
.appearance-setting-preview{display:flex;align-items:center;gap:.55rem;min-height:52px;padding:.35rem .5rem;border:1px dashed var(--club-border);border-radius:.6rem;background:repeating-conic-gradient(#e8ecf1 0% 25%,#fff 0% 50%) 50%/10px 10px}
.appearance-setting-art{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:.35rem .6rem;border:1px solid var(--club-border);background:var(--surface);color:var(--club-text);font-size:.85rem;max-width:100%;overflow-wrap:anywhere}
.appearance-setting-text{flex:1;border:0;justify-content:flex-start}
.appearance-setting-art svg{width:22px;height:22px}
.appearance-setting-preview small{margin-left:auto;font-size:.66rem;font-weight:500;max-width:8rem;padding:.15rem .25rem;background:var(--surface);border-radius:.25rem}
.appearance-preview-soft{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding:.4rem .5rem;border:1px solid var(--club-border);border-radius:.45rem;font-size:.7rem}
.appearance-preview-secondary{border:1px solid var(--club-border);border-radius:.35rem;padding:.25rem .4rem;white-space:nowrap}
.appearance-preview-window{grid-column:1/-1;position:relative;display:grid;place-items:center;min-height:38px;border-radius:.45rem;overflow:hidden;background:repeating-conic-gradient(#e8ecf1 0% 25%,#fff 0% 50%) 50%/10px 10px}
.appearance-preview-window-shade{position:absolute;inset:0}
.appearance-preview-window-body{position:relative;padding:.3rem 1rem;font-size:.7rem}
.appearance-preview-photo{display:grid;place-items:center;width:32px;height:28px;flex:none}
.appearance-preview-photo svg{width:32px;height:24px}
@media(max-width:560px){.appearance-setting-preview{gap:.35rem}.appearance-setting-preview small{max-width:6rem}.appearance-setting-art{font-size:.8rem}}
/* Icons are part of every state example, including its independent alpha. */
.appearance-editor [data-appearance-sample]{gap:.35rem}
.appearance-editor [data-appearance-sample]>svg{width:16px;height:16px;flex:none}
.appearance-editor .appearance-preview-statuses [data-appearance-sample]>svg{width:12px;height:12px}
.appearance-setting-surface{min-width:6rem;gap:.35rem}
.appearance-setting-surface>svg{flex:none}
/* Scrubbing a live setting must not continually restart a colour transition. */
html[data-club-appearance-editing] :is(#app-screen,#modal-root) *{transition:none!important}
.appearance-setting-art{transition:none!important}