/* Shared visual baseline. Brand comes from applyClubTheme; statuses stay semantic. */
:root{
  --ink:#172033;
  --muted:#5b6472;
  --canvas:#f5f6f8;
  --surface:#fff;
  --line:#e4e7ec;
  --surface-muted:#f3f4f6;
  --control-edge:#d2d7df;
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-6:1.5rem;
  --text-body:.875rem;
  --text-small:.75rem;
  --text-label:.8125rem;
  --control-radius:.7rem;
  --card-radius:.9rem;
  --radius:var(--card-radius);
  --shadow:0 3px 12px rgb(23 32 51 / 4%);
  --ui-border:var(--line);
  --ui-focus:var(--club-control-border,#5394d4);
  --ui-focus-halo:var(--club-soft,#f1f6fc);
}
html{font-size:16px}
body{line-height:1.55;-webkit-font-smoothing:antialiased}
:root body .button{min-height:2.75rem;border-radius:var(--control-radius);padding:.6rem .9rem;font-size:var(--text-label);line-height:1.4;font-weight:650;text-align:center}
/* One quiet hover language for actionable controls; no geometry changes.
   Selected and semantic controls retain their original frame and meaning. */
@media(hover:hover) and (pointer:fine){
 :root body :is(button,[role="button"],summary,.member-card[data-action],.event-card[data-open],.calendar-agenda-item.is-clickable,.member-choice-chip,.p19-color-tile):not(:disabled):not([aria-disabled="true"]):not(:has(input:disabled)):hover{translate:none;transform:none}
 :root body :is(button,[role="button"],summary,.member-card[data-action],.event-card[data-open],.calendar-agenda-item.is-clickable,.member-choice-chip,.p19-color-tile):not(:disabled):not([aria-disabled="true"]):not(:has(input:disabled)):not(.active):not(.is-selected):not([aria-selected="true"]):not([aria-pressed="true"]):not([aria-current="page"]):hover{
   box-shadow:0 2px 7px rgb(23 32 51 / 7%);
 }
 :root body :is(.button.secondary,.settings-tab,.detail-tab,.filter-chip,.compact-choice-chip):not(:disabled):not([aria-disabled="true"]):not(.active):not([aria-pressed="true"]):hover{
   border-color:var(--club-control-border);background:var(--club-subtle-gradient);color:var(--ink);
 }
 :root body :is(summary,.nav-btn:not(.active),.icon-button,.modal-close,.modern-picker-icon):not(:disabled):not([aria-disabled="true"]):hover{background:var(--club-subtle-gradient)}
 :root body :is(input.input,select.select,textarea.textarea,.modern-picker-search):not(:disabled):not([readonly]):hover{border-color:var(--club-control-border)}
 :root body a[href]:not(.button):not([aria-disabled="true"]):hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
 /* A mild tonal response also covers selections, native controls and labels.
    Filter leaves local gradients, semantic colors and focus outlines intact. */
 :root body :is(button,a[href],summary,[data-action],[data-open],[data-nl-open],[role="button"],[role="tab"],[role="option"],[role="switch"],input:not([type="hidden"]),select,textarea,label[for],label:has(>input[type="checkbox"]),label:has(>input[type="radio"]),.p19-switch,.p19-color-tile,.member-choice-chip,.member-card[data-action],.event-card[data-open],.calendar-agenda-item.is-clickable):not(:disabled):not([readonly]):not([aria-disabled="true"]):not(:has(input:disabled)):not(:is([aria-disabled="true"] *)):hover{filter:brightness(.96)}
}

/* Secondary actions remain neutral; primary actions carry the club accent. */
:root body .button.secondary{background:#fff;color:var(--ink);border-color:var(--control-edge);box-shadow:none}
:root body :is(.compact-choice-chip,.filter-chip):not(.active):not([aria-pressed="true"]){background:#fff;color:var(--muted);border-color:var(--line);box-shadow:none}
@media(hover:hover) and (pointer:fine){
 :root body .button.secondary:not(:disabled):hover{background:var(--club-subtle-gradient);border-color:var(--club-control-border);color:var(--ink);box-shadow:0 2px 7px rgb(23 32 51 / 7%)}
}
:root body .button.sm{min-height:2.375rem;padding:.45rem .7rem;font-size:var(--text-small)}
:root body :is(.input,.select,.textarea){border-radius:var(--control-radius);border-color:var(--line);font-size:var(--text-body);line-height:1.45;color:var(--ink)}
:root body :is(input.input,select.select){min-height:2.75rem}
:root body textarea{line-height:1.6}
:root body textarea.textarea{min-height:7rem;resize:vertical}
:root body :is(.input,.textarea)[readonly]{background:#f8fafc;color:var(--ink)}
:root body .button:disabled,:root body .button[aria-disabled="true"]{box-shadow:none;translate:none;transform:none;cursor:not-allowed}
:root body .button[aria-busy="true"]{cursor:progress}
:root body .button .app-icon,:root body .button>svg{flex:none;width:1.1rem;height:1.1rem;vertical-align:middle}
:root body .form-field{min-width:0}
:root body .form-field>:is(.input,.select,.textarea){width:100%;min-width:0}
:root body .form-field:has(>[aria-invalid="true"])>label{color:var(--danger)}
:root body :is(.input,.select,.textarea)[aria-invalid="true"]{border-color:var(--danger)}
:root body .form-field [role="alert"]{font-size:var(--text-small);line-height:1.5;color:var(--danger)}
:root body :is(.input,.select,.textarea):disabled{cursor:not-allowed;background:#f5f7fa;color:var(--muted)}
:root body :is(.input,.select,.textarea):not(.recovery-code):focus{border-color:var(--ui-focus);box-shadow:0 0 0 3px var(--ui-focus-halo)}
:root body :is(input,textarea)::placeholder{color:var(--muted);opacity:1}
:root body :is(.form-field>label,.filter-field>span){font-size:.75rem;line-height:1.5;font-weight:650;color:#526176}
:root body :is(.form-help,.form-note){font-size:.75rem;line-height:1.6;color:var(--muted)}
:root body :is(.form-grid,.p19-form-grid){gap:.85rem}
:root body :is(input[type="checkbox"],input[type="radio"],input[type="range"]){accent-color:var(--club-control-border,#5394d4)}
:root body :is(.p19-switch input:checked+span,.attendance-toggle.on){background:var(--club-control-border,#5394d4)}
#view-attendance .attendance-row.present::after{border:1px solid var(--club-control-border)}
:root body :is(.panel,.staff-panel,.member-card,.product-card,.stat-card,.filter-bar,.table-wrap){border-radius:var(--card-radius)}
:root body :is(.panel,.staff-panel){background:var(--club-subtle-gradient);box-shadow:0 1px 3px rgb(16 24 40 / 3%)}
:root body :is(.panel-header h3,.staff-section-heading h3,.staff-panel>h3){font-size:1rem;font-weight:750;line-height:1.4;color:var(--ink)}
:root body :is(.panel-header p,.staff-panel-subtitle){font-size:.8rem;line-height:1.6;color:var(--muted)}
:root body .empty-state{border-radius:var(--card-radius);background:#fff;box-shadow:none}
:root body .empty-state>strong{font-size:.9rem;font-weight:700;color:var(--ink)}
:root body .empty-state>p{font-size:.8rem;line-height:1.6;color:var(--muted)}
:root body .table-wrap{scrollbar-width:thin;scrollbar-color:var(--club-border,#c5d6e6) transparent;overscroll-behavior-x:contain}
:root body .data-table th{font-size:.72rem;font-weight:700;line-height:1.5;text-transform:none}
:root body .data-table td{font-size:.8rem;line-height:1.55}
:root body .data-table thead th{background:var(--surface-muted);color:var(--muted)}
:root body .data-table thead:has(>tr:only-child) th{position:sticky;top:0;z-index:1}
:root body .data-table tbody tr:last-child td{border-bottom:0}
:root body .modal{border-radius:1.2rem}
:root body .modal-head h2{font-size:1.1rem;line-height:1.4;letter-spacing:-.02em;font-weight:750;color:var(--ink)}
:root body :is(.modal-actions,.p19-save-bar){background:#fff;border-top-color:var(--line)}
:root body .modal-actions{gap:.6rem}
:root body :is(.loader span,.progress span){background:var(--club-text,#326da5)}

/* Neutral typography in navigation; the selected frame supplies the club accent. */
#desktop-nav .nav-btn[data-nav]{font-weight:650}
#desktop-nav .nav-btn[data-nav]:is(.active,:hover){color:var(--ink)}
#desktop-nav .nav-btn[data-nav].active .nav-icon{color:inherit}

/* Brand settings preview responds to the same variables as the real interface. */
.club-theme-preview{grid-column:1/-1;min-width:0;padding:1rem;border:1px solid var(--line);border-radius:1rem;background:var(--club-subtle-gradient)}
.club-theme-preview>strong{display:block;margin-bottom:.3rem;color:var(--ink);font-size:.85rem;font-weight:700}
.club-theme-preview>p{margin:0 0 .8rem;color:var(--muted);font-size:.75rem;line-height:1.6}
.club-theme-usage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:1rem 0}
.club-theme-example{min-width:0;display:grid;align-content:start;gap:.35rem}
.club-theme-example>small{font-size:.68rem;color:var(--muted)}
.club-theme-example>span{display:flex;align-items:center;gap:.55rem;min-height:3.5rem;padding:.65rem .75rem;border:1px solid var(--line);border-radius:var(--control-radius);font-size:.78rem;color:var(--ink)}
.club-theme-example :is(strong,small){display:block;line-height:1.4}
.club-theme-example span small{font-size:.66rem;color:var(--muted)}
.club-theme-example .club-theme-example-selected{background:var(--club-selected-gradient);border-color:var(--club-control-border)}
.club-theme-example-selected>small,.club-theme-example-selected span small{color:#405169}
.club-theme-example-selected>.app-icon{width:1.1rem;height:1.1rem;color:var(--club-text)}
.club-theme-example .club-theme-example-action{background:var(--club-subtle-gradient);border-color:var(--club-control-border);color:var(--club-text);font-weight:700;justify-content:center}
.club-theme-example .club-theme-example-member{background:#fff;justify-content:space-between}
.club-theme-example-avatar{display:grid;place-items:center;flex:none;width:2rem;height:2rem;border-radius:.5rem;background:#fff;font-style:normal;color:var(--ink);font-size:.65rem}
.club-theme-example-points{min-width:2.6rem;padding:.25rem;text-align:center;background:var(--club-soft-gradient);color:var(--club-text);border:1px solid var(--club-border);border-radius:.6rem;font-weight:800}
@media(max-width:1000px){.club-theme-usage{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:360px){.club-theme-usage{grid-template-columns:minmax(0,1fr)}}
.club-theme-samples{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.club-theme-samples>.button{display:inline-flex;align-items:center;justify-content:center;cursor:default}
.club-theme-sample-selected{display:inline-flex;align-items:center;gap:.4rem;min-height:2.5rem;padding:.5rem .75rem;border:1px solid var(--club-control-border);border-radius:999px;background:var(--club-soft-gradient);color:var(--club-text);box-shadow:inset 0 0 0 1px var(--club-border);font-size:.75rem;font-weight:700}
.club-theme-tones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-top:1rem}
.club-theme-tone{display:flex;align-items:center;gap:.5rem;min-width:0;color:var(--muted);font-size:.75rem;line-height:1.4}
.club-theme-tone>i{display:block;flex:none;width:1.8rem;height:1.8rem;border:1px solid var(--club-border);border-radius:.6rem;background:var(--primary)}


/* Keyboard focus is visible without relying on a bright club color. */
:root body :is(.button,.settings-tab,.detail-tab,.member-editor-tab):focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px}
@media(hover:hover) and (pointer:fine){:root body .data-table tbody tr:not(.row-selected):hover td{background:var(--club-subtle-gradient)}}
@media(max-width:760px){:root body .button:not(.sm){min-height:2.75rem}:root body .button.sm{min-height:2.75rem}:root body :is(.input,.select,.textarea){font-size:16px}.club-theme-preview{padding:.85rem}.club-theme-tones{gap:.4rem}.club-theme-tone{font-size:.66rem}}
@media(prefers-reduced-motion:reduce){:root body :is(.button,.settings-tab,.detail-tab,.member-editor-tab){transition:none!important}}
:root body :is(.form-help,.wear-photo-controls>small,.wear-photo-url>summary,.wear-editor-active small,.wear-editor-context>span,.wear-editor-stock>small,.clubwear-managed-variant small){font-size:.75rem;line-height:1.5}
:root body :is(.badge,.pill,.chip,.communication-topic-chip,.communication-sender-chip){font-size:.75rem;line-height:1.4}
:root body .page-footer{font-size:.72rem;line-height:1.5;color:var(--muted)}
#data-status[data-status="loading"]{color:var(--muted)}
:root body :is(.input,.select,.textarea):not(.recovery-code):focus{outline:0}
:root body :is(input,select,textarea):not(.recovery-code):focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
:root body :is(button,a[href],summary,.member-card.is-clickable,.member-choice-chip-button,.training-day-switch):focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px}

.club-theme-tone>input[type="color"]{flex:none;width:2.4rem;height:2.4rem;padding:.15rem;border:1px solid var(--club-border);border-radius:.65rem;background:#fff;cursor:pointer}
.club-theme-tone small{display:block;margin-top:.15rem;font-size:.64rem;color:var(--muted)}
.club-theme-reset{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.65rem;margin-top:.85rem}
.club-theme-reset>small{flex:1 1 16rem;color:var(--muted);font-size:.7rem;line-height:1.5}
@media(max-width:480px){.club-theme-tones{grid-template-columns:1fr}.club-theme-reset .button{width:100%}}

/* Color selection is an explicit clickable tile, not a native horizontal strip. */
.p19-color-tile{position:relative;text-align:left;display:flex!important;align-items:center;gap:.7rem;min-height:4.4rem;margin:0;padding:.65rem .8rem;border:1px solid var(--line);border-radius:.9rem;background:#fff;cursor:pointer;color:var(--ink)}
.p19-color-tile:hover{border-color:var(--club-control-border);background:var(--club-subtle-gradient)}
.p19-color-tile:focus-within{outline:2px solid var(--club-control-border);outline-offset:3px}
.p19-color-tile .p19-color-swatch{display:block;flex:none;width:2.7rem;height:2.7rem;border:1px solid rgb(0 0 0 / 8%);border-radius:.75rem;background:var(--primary);box-shadow:inset 0 0 0 3px rgb(255 255 255 / 35%)}
.p19-color-tile>span{flex:1;min-width:0}
.p19-color-tile strong{display:block;color:var(--ink);font-size:.78rem;font-weight:750}
.p19-color-tile small{display:block;margin-top:.2rem;color:var(--muted);font-size:.68rem}
.p19-color-tile em{display:block;margin-top:.25rem;color:var(--club-text);font-size:.68rem;font-style:normal;font-weight:650}
.p19-color-tile>b{flex:none;display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:.5rem;background:var(--club-soft-gradient);color:var(--club-text);font-size:1rem}
.p19-color-tile:has(input:disabled){cursor:default;opacity:.6}

/* Show the text tone in use, so black does not look like a duplicate brand swatch. */
.p19-color-tile .p19-text-swatch{display:grid;place-items:center;color:var(--club-text);font-size:1.25rem;font-style:normal;font-weight:800;letter-spacing:-.06em;box-shadow:none;border-color:var(--club-border)}

/* Suggested palette stays local to the dialog until the club confirms it. */
.modal:has(.logo-palette-dialog){width:min(100%,40rem);border-radius:1.3rem}
.logo-palette-intro{margin:0 0 1rem;color:var(--muted);font-size:.85rem;line-height:1.6}
.logo-palette-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.logo-palette-option{display:grid;gap:.35rem;min-width:0;padding:.65rem;border:1px solid var(--line);border-radius:.85rem;background:#fff;text-align:left;color:var(--ink)}
.logo-palette-option>i{display:block;width:100%;height:2.8rem;border-radius:.55rem;border:1px solid rgb(0 0 0 / 10%)}
.logo-palette-option strong{font-size:.72rem}.logo-palette-option small{color:var(--muted);font-size:.68rem;font-variant-numeric:tabular-nums}
.logo-palette-option.is-selected{border-color:var(--club-control-border);box-shadow:inset 0 0 0 1px var(--club-control-border);background:var(--club-subtle-gradient)}
.logo-palette-option:focus-visible{outline:2px solid var(--club-control-border);outline-offset:3px}
.logo-palette-preview{margin-top:1.2rem;padding:1rem;border:1px solid var(--logo-border);border-radius:1rem;background:linear-gradient(135deg,#fff,var(--logo-soft));color:var(--logo-text)}
.logo-palette-preview>small{font-size:.6rem;letter-spacing:.1em;font-weight:750}
.logo-palette-card{display:flex;align-items:center;gap:.65rem;margin-top:.85rem;padding:.8rem;border:1px solid var(--logo-border);border-radius:.8rem;background:#fff}
.logo-palette-symbol{display:grid;place-items:center;flex:none;width:2.4rem;height:2.4rem;border-radius:.65rem;background:var(--logo-soft);color:var(--logo-text);font-weight:900}
.logo-palette-card>div{flex:1;min-width:0}.logo-palette-card strong{font-size:.85rem;color:var(--ink)}
.logo-palette-card p{margin:.25rem 0 0;font-size:.72rem;color:var(--muted)}
.logo-palette-tag{padding:.3rem .5rem;border:1px solid var(--logo-border);border-radius:999px;background:var(--logo-soft);color:var(--logo-text);font-size:.65rem;font-weight:700}
.logo-palette-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem;margin-top:.8rem;font-size:.75rem;font-weight:700}
.logo-palette-primary{padding:.65rem .8rem;border:1px solid var(--logo-text);border-radius:.7rem;background:linear-gradient(135deg,#fff,var(--logo-soft));color:var(--logo-text)}
.logo-palette-note{font-size:.72rem;color:var(--muted);line-height:1.6}
@media(max-width:480px){.logo-palette-options{grid-template-columns:repeat(2,minmax(0,1fr))}.logo-palette-dialog .modal-actions{display:grid;grid-template-columns:1fr}.logo-palette-card{flex-wrap:wrap}.logo-palette-option{min-height:5.5rem}}


/* All color controls share a small swatch and a quiet change label. */
.p19-color-tile.p19-color-compact{min-height:2.75rem;padding:0;border:0;border-radius:.55rem;background:transparent;box-shadow:none;gap:.65rem;width:max-content;max-width:100%}
.p19-color-tile.p19-color-compact:hover{background:transparent}
.p19-color-compact .p19-color-swatch{width:2.5rem;height:2.5rem;border-radius:.65rem;box-shadow:none}
.p19-color-compact strong{font-size:.73rem;font-weight:650}
.p19-color-compact em{font-size:.68rem;font-weight:500;color:var(--muted)}
.p19-color-compact:hover em{color:var(--club-text);text-decoration:underline;text-underline-offset:3px}
.p19-color-compact:hover .p19-color-swatch{border-color:var(--club-control-border)}

/* Compact application shell, with the working content before explanatory chrome. */
:root body .page-hero{border-radius:var(--card-radius);background:transparent;border-color:transparent;box-shadow:none}
:root body .page-hero-inner{min-height:0;padding:1rem;gap:.8rem}
:root body .page-hero h2{font-size:1.2rem;line-height:1.3;letter-spacing:-.025em;font-weight:750}
:root body .page-hero p{font-size:.8rem;line-height:1.5;margin-top:.25rem}
:root body .hero-icon{width:2.5rem;height:2.5rem;border-radius:.7rem;flex:none}
:root body .hero-icon .app-icon{width:1.2rem;height:1.2rem}
#desktop-nav .nav-btn[data-nav]{min-height:2.75rem;border-radius:.6rem;padding:.65rem .8rem;font-size:.86rem}
:root body .modal-close,:root body .icon-button{min-width:2.75rem;min-height:2.75rem;border-radius:.65rem}
.icon-button>svg,.logout-button>svg{width:1.15rem;height:1.15rem;flex:none;vertical-align:middle}
.logout-button{display:flex;align-items:center;justify-content:center;gap:.5rem}
#test-role-switcher:not(.is-preview):not(.is-expanded){padding:0;border:0;background:transparent;box-shadow:none;justify-content:flex-end;margin:0 0 .65rem;min-height:2.375rem}
#test-role-switcher:not(.is-preview):not(.is-expanded)>:not([data-toggle-role-controls]){display:none}
#test-role-switcher.is-preview>[data-toggle-role-controls]{display:none}
#test-role-switcher.is-preview{border-color:var(--club-border);background:var(--club-subtle-gradient);box-shadow:none}
#test-role-switcher.is-preview [data-test-role-note]{color:var(--ink);font-weight:650}
#test-role-switcher.is-expanded{flex-wrap:wrap;padding:.75rem}
@media(max-width:760px){:root body .page-hero-inner{padding:.8rem;gap:.65rem}:root body .page-hero h2{font-size:1.1rem}:root body .page-hero p{font-size:.75rem}#test-role-switcher:not(.is-preview):not(.is-expanded){margin-top:0;min-height:2.75rem}#test-role-switcher.is-preview{margin-top:0;padding:.7rem}.page-hero-actions{max-width:100%}}

/* Member list: identity and actionable status; full records stay in the detail. */
#view-members .member-card{display:grid;gap:.6rem;padding:.9rem;min-height:0;border-color:var(--line)}
#view-members .member-card-top{display:flex;align-items:center;gap:.7rem}
#view-members .member-card-identity{flex:1;min-width:0}
#view-members .member-card-identity h3{font-size:.9rem;line-height:1.4;overflow-wrap:break-word;white-space:normal;overflow:visible;text-overflow:clip}
#view-members .member-card-group{display:block;margin:.2rem 0 0;color:var(--muted);font-size:.78rem;line-height:1.4}
#view-members .member-card-category{color:var(--muted);font-size:.73rem}
#view-members .member-card-category:empty{display:none}
#view-members .member-card-info{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .6rem;border:0;padding:0}
#view-members .member-card-basic{font-size:.75rem;color:var(--muted);border:0;padding:0}
#view-members .member-card-status{padding:0;border:0;margin:0}
#view-members .member-card-open{display:inline-flex;align-items:center;justify-content:center;min-height:2.25rem;margin-left:auto;padding:.2rem .4rem;border:0;background:transparent;border-radius:.45rem;color:var(--club-text);font-size:.73rem;font-weight:650}
.member-card-points{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;flex:none;min-width:3.6rem;min-height:3.6rem;border:1px solid var(--club-border);border-radius:.9rem;padding:.45rem .55rem;background:var(--club-soft-gradient);color:var(--club-text);white-space:nowrap;box-shadow:inset 0 1px 0 rgb(255 255 255 / 70%)}
.member-card-points>strong{font-size:1.25rem;line-height:1.1;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.member-card-points small{font-size:.67rem;line-height:1.2;font-weight:550}
#view-members .member-card-diary{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.4rem .65rem;width:100%;min-width:0;min-height:2.75rem;margin:0;padding:.55rem .15rem .1rem;border:0;border-top:1px solid var(--line);background:transparent;border-radius:0 0 .5rem .5rem;text-align:left;color:var(--muted);font-size:.73rem;letter-spacing:0}
#view-members .member-card-diary-label{display:inline-flex;align-items:center;gap:.4rem;min-width:0;line-height:1.4}
.member-card-diary-label .app-icon{width:1rem;height:1rem;flex:none;color:var(--muted)}
#view-members .member-card-diary-state{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .55rem;border:1px solid var(--line);border-radius:.5rem;background:var(--surface-muted);color:var(--muted);font-size:.68rem;line-height:1.2;font-weight:650;white-space:nowrap}
#view-members .member-card-diary-state::before{content:'';width:.35rem;height:.35rem;border-radius:50%;background:currentColor}
#view-members .member-card-diary-state.is-disabled{border-color:var(--status-danger-border);background:var(--status-danger-bg);color:var(--danger)}
#view-members .member-card-diary-state.is-enabled{border-color:var(--status-success-border);background:var(--status-success-bg);color:var(--success)}
#view-members .member-card-diary:disabled{opacity:1;cursor:default}
#view-members .member-card-diary[aria-busy="true"]{cursor:progress}
#view-members :is(.member-card-diary,.member-card-open):focus-visible{outline:2px solid var(--club-control-border);outline-offset:3px}
@media(hover:hover) and (pointer:fine){#view-members .member-card-diary:not(:disabled):hover{background:var(--club-subtle-gradient)}#view-members .member-card-open:hover{background:var(--club-subtle-gradient)}}
@media(pointer:coarse){#view-members .member-card-open{min-height:2.75rem}}

:root body .member-editor-tab{min-height:2.75rem;font-size:.8rem}
:root body .member-editor-panel .form-field{margin:0}
:root body .member-editor-panel .member-form-grid{gap:.85rem}
@media(max-width:760px){#view-members .member-card{padding:.8rem}.member-editor-tabs{scroll-padding-inline:.5rem}.member-editor-panel .input{font-size:16px}}

#view-attendance [data-mark-all]{color:var(--ink)!important;background:#fff!important;border-color:var(--control-edge)!important;box-shadow:none!important}

/* Attendance uses one frame and a soft brand gradient; the entire card is the control. */
#view-attendance .attendance-row--simple{border:1px solid var(--line);background:#fff;box-shadow:none;min-height:4.25rem}
#view-attendance .attendance-row--simple.present{border:1px solid var(--club-control-border);background:var(--attendance-selected-gradient);box-shadow:none}
#view-attendance .attendance-row--simple::after{content:none;display:none}
#view-attendance .attendance-row--simple strong{font-size:.85rem;color:var(--ink)}
#view-attendance .attendance-row--simple small{font-size:.73rem}
#view-attendance .attendance-row.present .row-main small{color:#405169}
#view-attendance .attendance-row--simple[aria-disabled="true"]{cursor:default}
#view-attendance .attendance-row--simple:focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px}
#view-attendance .attendance-draft-note{padding:.7rem .85rem;gap:.6rem}
#view-attendance .attendance-draft-note small{font-size:.75rem}
#view-attendance .attendance-date-panel .week-strip{margin-top:.65rem!important}
@media(max-width:760px){#view-attendance .attendance-date-panel .toolbar>.muted{display:none}#view-attendance .attendance-draft-note{flex-wrap:wrap}#view-attendance .attendance-member-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#view-attendance .attendance-row--simple{padding:.6rem;gap:.4rem}#view-attendance .attendance-row--simple .avatar{width:1.85rem;height:1.85rem}#view-attendance .attendance-row--simple strong{font-size:.75rem}#view-attendance .attendance-row--simple small{font-size:.68rem}}
@media(max-width:760px){#view-attendance .attendance-availability-panel{padding:.75rem}#view-attendance .attendance-availability-panel .panel-header h3{font-size:.85rem}#view-attendance .attendance-availability-panel .panel-header{margin-bottom:.5rem}#view-attendance .attendance-availability-panel .panel-header>span{display:none}#view-attendance .attendance-member-grid{margin-top:.65rem!important}#view-attendance .panel:has(#attendance-group){padding:.75rem}#view-attendance .panel:has(#attendance-group)>.toolbar{gap:.4rem}#view-attendance .panel:has(#attendance-group)>.toolbar>.toolbar{flex-wrap:nowrap;overflow:auto;max-width:100%;padding:2px 0;white-space:nowrap}#view-attendance .panel:has(#attendance-group) [data-mark-all]{flex:none}}

/* One primary calendar program, with secondary horizon available on demand. */
:root body .calendar-program-stats{display:flex;gap:.5rem;flex-wrap:wrap;margin:.75rem 0}
:root body .calendar-program-stats .stat-card{display:flex;align-items:baseline;gap:.4rem;padding:.4rem .65rem;box-shadow:none;border:1px solid var(--line);background:#fff}
:root body .calendar-program-stats .stat-card small{display:none}
:root body .calendar-program-stats .stat-card strong{font-size:1rem;margin:0}
:root body .calendar-program-stats .stat-card span{font-size:.75rem}
.calendar-upcoming-disclosure>summary{cursor:pointer;font-weight:650;font-size:.85rem;min-height:2.75rem;align-content:center}
.calendar-upcoming-disclosure .calendar-upcoming-panel{border:0;padding:0;margin-top:.5rem!important}
.calendar-upcoming-disclosure .calendar-upcoming-panel>.panel-header{display:none}
:root body .calendar-agenda-item{padding:.75rem;min-width:0;text-align:left}
:root body .calendar-agenda-copy{min-width:0;overflow-wrap:anywhere}
:root body .calendar-agenda-copy strong{font-size:.85rem;line-height:1.45}
:root body .calendar-agenda-copy small{font-size:.75rem;line-height:1.5}
.camp-roster-list{max-height:27rem;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.camp-roster-list [hidden]{display:none!important}
:root body .camp-roster-row{padding:.7rem 0;font-size:.85rem;gap:.6rem}
:root body .camp-roster-row p{margin:.2rem 0;color:var(--muted);font-size:.78rem}
:root body .camp-member-picker{max-height:22rem;overflow:auto;overscroll-behavior:contain}
:root body :is(.phase6-tournament-tools,.event-filters){gap:.65rem;padding:.75rem}
@media(max-width:760px){.calendar-filter-row{gap:.35rem}.calendar-layout-switch{width:100%;justify-content:flex-start}.calendar-program-stats{order:0}.calendar-program-day-head h3{font-size:1rem}.camp-roster-list{max-height:22rem}.camp-roster-row{align-items:flex-start}.camp-roster-row>div{min-width:0}.event-filters label{font-size:.75rem}:root body .calendar-month-grid .calendar-day{min-height:3.5rem;padding:.35rem}.calendar-month-grid .calendar-events{display:none}.calendar-month-grid .calendar-day:has(.calendar-event)::after{content:'';display:block;width:.35rem;height:.35rem;border-radius:50%;margin:.25rem auto;background:var(--club-text)}}
@media(max-width:760px){:root body .calendar-filter-row{display:flex;flex-wrap:wrap;overflow:visible;white-space:normal}:root body .calendar-layout-switch{display:flex;flex:1 1 100%;width:100%;min-width:0;gap:.35rem}:root body .calendar-layout-switch>.filter-chip{flex:1;min-width:0;width:auto}:root body .calendar-filter-row>.filter-chip{flex:none;width:auto;min-width:2.75rem;padding:.45rem .65rem}:root body .calendar-program-stats{gap:.3rem;margin:.65rem 0}:root body .calendar-program-stats .stat-card{padding:.25rem .45rem}:root body .calendar-program-stats .stat-card:has(strong:empty){display:none}}

/* Compact mobile week and an explicit, searchable diary selection. */
.training-mobile-week,.td-picker-toggle{display:none}
.training-copy-disclosure{margin-top:.75rem;border-top:1px solid var(--line);padding-top:.5rem}
.training-copy-disclosure>summary{cursor:pointer;min-height:2.75rem;align-content:center;font-size:.8rem;font-weight:650}
:root body .td-filter-group label[hidden]{display:none}
:root body .td-sidebar .td-filter-group{max-height:30rem;overflow:auto;overscroll-behavior:contain}
@media(max-width:760px){
 :root body .training-mobile-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.2rem;margin-top:.75rem}
 .training-mobile-day{display:grid;place-items:center;gap:.2rem;min-height:3.5rem;padding:.3rem 0;border:1px solid var(--line);border-radius:.6rem;background:#fff;color:var(--ink);position:relative}
 .training-mobile-day span{font-size:.65rem;color:var(--muted)}.training-mobile-day strong{font-size:.9rem}
 .training-mobile-day.has-training::after{content:'';position:absolute;bottom:.15rem;width:.25rem;height:.25rem;background:var(--club-text);border-radius:50%}
 .training-mobile-day[aria-pressed="true"]{border-color:var(--club-control-border);background:var(--club-soft-gradient)}.training-mobile-day[aria-current="date"] strong{text-decoration:underline;text-underline-offset:.2rem}
 :root body .training-week-board{display:block;margin-top:.65rem}
 :root body .training-week-board>.training-week-day:not(.is-selected-day){display:none}
 :root body .training-week-board>.training-week-day.is-selected-day{min-height:0}
 :root body .training-week-day-main>strong{font-size:1rem}
 :root body .training-week-units{min-height:0}
 :root body .td-sidebar{padding:.65rem;margin:0}
 .td-picker-toggle{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;min-height:2.75rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:.7rem;background:#fff;color:var(--ink);font-size:.85rem;text-align:left}
 .td-picker-toggle span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .td-sidebar:not(.is-picker-open) .td-picker-body{display:none}.td-picker-body{padding-top:.75rem}
 :root body .td-sidebar .td-filter-group{max-height:16rem}
 :root body .td-sidebar-title{display:none}
 :root body .td-layout{gap:.75rem}
 :root body .td-content-head{padding:.75rem}
 :root body .td-content-head .eyebrow{display:none}
 :root body .td-content-head>div>span{font-size:.75rem}
 :root body .training-week-heading{gap:.5rem;padding:0}.training-week-heading h3{font-size:1rem}
}
.td-templates>summary{cursor:pointer;min-height:2.75rem;align-content:center;font-size:.85rem;font-weight:650}
:root body .td-templates>.panel-header{display:none}
@media(max-width:760px){:root body .training-week-heading-icon{display:none}:root body .training-week-heading{margin-bottom:.65rem}:root body .training-week-title-row{flex-wrap:nowrap;gap:.35rem}:root body .training-week-title-row h3{font-size:.9rem}:root body .training-week-title-row .badge{font-size:.65rem;white-space:nowrap}:root body .training-week-controls{display:flex;flex-wrap:nowrap;gap:.35rem}:root body .training-week-date{flex:1 1 0;min-width:0;width:auto}:root body .training-week-date input{width:100%;min-width:0;font-size:.75rem}:root body .training-week-controls .button{padding:.45rem .6rem}:root body .td-templates{padding:.5rem .85rem}}

/* Long messages disclose their body without making every card a color panel. */
#view-communication .communication-priority-card[data-communication-kind]{background:#fff;border:1px solid var(--line);border-left:3px solid var(--club-border);box-shadow:none}
#view-communication .communication-priority-card[data-communication-priority="urgentni"]{border-left-color:var(--danger)}
#view-communication .communication-card-text{font-size:.85rem;line-height:1.65;overflow-wrap:anywhere;white-space:pre-wrap}
.communication-message-details>summary{cursor:pointer;min-height:2.75rem;align-content:center;font-size:.8rem;font-weight:650;color:var(--club-text)}
.communication-message-details:not([open]) .message-less,.communication-message-details[open] .message-more{display:none}
.communication-card-content:has(.communication-message-details[open])>.communication-card-preview{display:none}
#view-newsletter .nl-summary{display:flex;flex-wrap:wrap;gap:.4rem;margin:.85rem 0}
#view-newsletter .nl-summary .filter-chip{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;font-size:.78rem}
#view-newsletter .nl-summary strong{font-variant-numeric:tabular-nums;padding:.05rem .3rem;border-radius:.35rem;background:var(--club-subtle-gradient);color:var(--ink)}
#view-newsletter .nl-search{width:100%}
#view-finance .filter-bar{gap:.65rem;align-items:flex-end}
#view-finance .stat-card{padding:.85rem;box-shadow:none}
#view-finance .stat-card strong{font-size:1.25rem}
@media(max-width:600px){
 #view-newsletter .nl-list-panel{padding:.75rem}
 #view-newsletter .nl-table{display:block;min-width:0;width:100%}
 #view-newsletter .nl-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #view-newsletter .nl-table tbody{display:grid;gap:.6rem}
 #view-newsletter .nl-table tr{display:flex;flex-wrap:wrap;gap:.35rem .75rem;border:1px solid var(--line);border-radius:.75rem;padding:.75rem}
 #view-newsletter .nl-table td{display:block;border:0;padding:0;font-size:.78rem;background:transparent}
 #view-newsletter .nl-table td:first-child{flex:1 1 100%;margin-bottom:.3rem}
 #view-newsletter .nl-table td:first-child strong{font-size:.85rem}
 #view-newsletter .nl-table td[data-label]::before{content:attr(data-label) ': ';color:var(--muted);font-size:.73rem}
 #view-newsletter .nl-table td:last-child{margin-left:auto}
 #view-newsletter .nl-table td[colspan]{width:100%;margin:0}
 #view-communication .communication-priority-card{padding:.8rem!important;gap:.5rem}
 #view-communication .communication-card-heading>strong{font-size:.9rem}
 #view-finance .filter-bar{display:grid;grid-template-columns:1fr 1fr}
 #view-finance .filter-field{min-width:0}
}
@media(max-width:600px){#view-newsletter .nl-list-panel>.table-wrap{border:0;box-shadow:none;background:transparent;padding:0;margin:0}}

/* Club settings first; personal navigation is a compact secondary section. */
:root body .settings-menu-panel{margin-top:1rem;padding:.6rem .9rem}
.settings-menu-panel>summary{cursor:pointer;min-height:2.75rem;align-content:center;font-size:.85rem;font-weight:650;color:var(--ink)}
.settings-menu-panel[open]>.panel-header{margin-top:.75rem}
:root body .logo-palette-preview{margin-top:.85rem;padding:.8rem}
:root body .logo-palette-card{padding:.65rem;margin-top:.5rem}
:root body .logo-palette-symbol{background:#fff;width:2.75rem;height:2.75rem;border:1px solid var(--logo-border);overflow:hidden}
.logo-palette-symbol img{display:block;width:100%;height:100%;object-fit:contain}
:root body .logo-palette-intro{font-size:.85rem;margin-bottom:.8rem}
:root body .p19-color-compact{min-height:2.75rem}
:root body .p19-color-compact .p19-color-swatch{flex-shrink:0}
@media(max-width:760px){:root body .p19-settings-nav{margin-top:.75rem}:root body .p19-settings-card{padding:.85rem}.settings-menu-panel .settings-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.logo-palette-options{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Persistent update notice; refreshing is an explicit action, never a surprise. */
.pwa-update-notice{position:fixed;z-index:140;right:1rem;bottom:1rem;width:min(25rem,calc(100vw - 2rem));padding:.9rem;border:1px solid var(--club-border);border-radius:.9rem;background:#fff;box-shadow:0 8px 28px rgb(23 32 51 / 12%);color:var(--ink)}
.pwa-update-notice strong{font-size:.9rem}.pwa-update-notice p{margin:.25rem 0 .7rem;font-size:.8rem;color:var(--muted)}
.pwa-update-confirm{width:min(30rem,calc(100vw - 2rem));padding:1.25rem;border:1px solid var(--line);border-radius:1rem;color:var(--ink);background:#fff;box-shadow:var(--shadow)}
.pwa-update-confirm::backdrop{background:rgb(23 32 51 / 20%)}
.pwa-update-confirm h2{margin:0;font-size:1.1rem}.pwa-update-confirm p{font-size:.875rem;line-height:1.6;color:var(--muted)}
.pwa-update-confirm .toolbar{justify-content:flex-end;flex-wrap:wrap}
@media(max-width:760px){.pwa-update-notice{bottom:calc(5rem + env(safe-area-inset-bottom));right:.75rem;width:calc(100vw - 1.5rem)}}

/* One week picker: full-width flow, compact at narrow component widths. */
#view-training_diary .td-journal{display:flex;flex-direction:column;gap:1rem;min-height:0}
#view-training_diary .td-journal>.td-content-head{order:0}
#view-training_diary .td-journal>.td-week-board{order:1;container:diary-week / inline-size;align-self:stretch;width:100%;height:auto;min-height:0;margin:0}
#view-training_diary .td-journal>.td-day-detail-grid{order:2;margin:0}
#view-training_diary .td-journal>.td-week-summary{order:3;margin:0}
#view-training_diary .td-journal>.td-templates{order:4;margin:0}
#view-training_diary .td-journal>.td-smart-plan{order:5}
#view-training_diary .td-week-board .td-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3rem;width:100%;min-width:0;overflow:visible;padding:.25rem}
#view-training_diary .td-week-board .td-day{display:grid;grid-template-columns:1fr;grid-template-rows:auto;place-items:center;align-content:center;position:relative;min-width:0;min-height:3.5rem;padding:.35rem 0;gap:.35rem;border:1px solid var(--line);border-radius:.7rem;background:#fff;color:var(--muted);box-shadow:none;transform:none;translate:none;overflow:visible;transition:background-color .16s ease,border-color .16s ease}
#view-training_diary .td-week-board .td-day>span{display:grid;grid-column:1;grid-row:1;place-items:center;gap:.2rem;min-width:0}
#view-training_diary .td-week-board .td-day>span>b{font-size:.6rem;line-height:1.2;letter-spacing:.02em}
#view-training_diary .td-week-board .td-day>span>strong{font-size:.95rem;line-height:1.2;color:var(--ink)}
#view-training_diary .td-week-board .td-day>:is(em,small,footer){display:none}
#view-training_diary .td-week-board .td-day.has-activity:not(.active){border-color:var(--line);background:var(--club-subtle-gradient)}
#view-training_diary .td-week-board .td-day.has-activity::after{content:'';position:absolute;bottom:.25rem;width:.25rem;height:.25rem;border-radius:50%;background:var(--club-text)}
#view-training_diary .td-week-board .td-day.active{border-color:var(--club-control-border);background:var(--club-selected-gradient);box-shadow:none;color:var(--club-text)}
#view-training_diary .td-week-board .td-day[aria-current="date"] strong{text-decoration:underline;text-underline-offset:.2rem}
#view-training_diary .td-week-board .td-day:hover{box-shadow:none;transform:none;translate:none}
@media(hover:hover) and (pointer:fine){#view-training_diary .td-week-board .td-day:not(.active):hover{background:var(--club-subtle-gradient);border-color:var(--club-control-border)}}
@media(min-width:761px) and (min-height:600px){
@container diary-week (min-width:42rem){
 #view-training_diary .td-week-board .td-day{min-height:6.5rem;grid-template-rows:auto auto;padding:.6rem .25rem;gap:.4rem}
 #view-training_diary .td-week-board .td-day>span>b{font-size:.6875rem}
 #view-training_diary .td-week-board .td-day>span>strong{font-size:1.125rem}
 #view-training_diary .td-week-board .td-day footer{display:flex;flex-direction:column;grid-column:1;grid-row:2;align-items:center;justify-content:center;justify-self:center;gap:.1rem;margin:0;min-width:0;white-space:normal;overflow:visible}
 #view-training_diary .td-week-board .td-day footer b{padding:0;border:0;background:transparent;color:var(--club-text);font-size:.8125rem;line-height:1.2}
 #view-training_diary .td-week-board .td-day footer span{padding:0;border:0;background:transparent;color:var(--muted);font-size:.75rem;font-weight:500;line-height:1.4;white-space:normal;overflow:visible}
}
}
@media(max-width:760px){#view-training_diary .td-journal{gap:.75rem}#view-training_diary .td-week-board .td-day footer{display:none}}
@media(prefers-reduced-motion:reduce){#view-training_diary .td-week-board .td-day{transition:none}}

/* Welcome initials must use a readable pair, including parent and member dashboards. */
#view-dashboard>.dashboard-welcome .dash-icon{background:var(--club-soft-gradient);color:var(--club-text);box-shadow:none;flex-shrink:0}
@media(max-width:760px){#view-calendar .calendar-month-panel{overflow:visible}#view-calendar .calendar-filter-row{min-width:0;width:100%}#view-calendar .calendar-month-grid,#view-calendar .calendar-head{min-width:0;width:100%}}

/* Touch geometry is measured on the actual hit area, including compact module controls. */
@media(max-width:760px){
 :root body :is(.compact-choice-chip,.filter-chip,.settings-tab,.attendance-choice,.availability-choice){min-height:2.75rem;min-width:2.75rem}
 :root body :is(.staff-event-title,.parent-event-link,.training-week-unit){min-height:2.75rem;align-content:center}
 :root body .staff-event-title{display:flex;align-items:center}
 :root body .button{min-width:2.75rem}
 #view-training .training-day-switch{min-height:2.75rem;height:2.75rem;background:transparent;box-shadow:none}
 #view-training .training-day-switch::before{content:'';position:absolute;inset-inline:0;top:50%;height:1.8rem;transform:translateY(-50%);border-radius:999px;background:var(--club-soft-gradient)}
 #view-training .training-day-switch.is-on::before{background:var(--club-control-border)}
 #view-training .training-day-switch i{top:50%;transform:translateY(-50%)}
 #view-training_diary .td-summary-table th>button{min-width:2.75rem;min-height:2.75rem}
}

@media(max-width:760px){:root body .view-section .filter-chip{min-width:2.75rem}}
.settings-draft-status{margin:0;padding:.65rem .8rem;border-radius:.65rem;background:var(--club-subtle-gradient);color:var(--ink);font-size:.8rem;line-height:1.5}
.settings-draft-status[hidden]{display:none}

.club-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.club-contact-item{display:flex;flex-direction:column;gap:.2rem;min-width:0;padding:.4rem 0}
.club-contact-item>small{font-size:.75rem;color:var(--muted)}
.club-contact-value{font-size:.9rem;color:var(--ink);overflow-wrap:anywhere}
.club-contact-link{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;max-width:100%;width:fit-content;color:var(--club-text);font-size:.875rem;text-decoration:none;overflow-wrap:anywhere}
.club-contact-link .app-icon{width:1.1rem;height:1.1rem;flex-shrink:0}
.club-contact-link>span{min-width:0;overflow-wrap:anywhere}
.club-contact-link:hover{text-decoration:underline;text-underline-offset:.2rem}
.club-contact-actions{display:flex;flex-wrap:wrap;gap:0 1rem}
.club-contact-person>div{min-width:0;flex:1}
.nl-local-draft{display:block;margin-top:.25rem;color:var(--ink);font-size:.75rem;font-weight:600}
:root body :is(.settings-fixed-slot small,.settings-menu-slot small,.settings-menu-preview,.settings-preview-item){font-size:.75rem}
:root body .p19-color-compact em{font-size:.75rem}

/* Diary access overview links to the existing member access editor. */
.diary-access-list{display:grid;gap:.5rem;max-height:55vh;overflow:auto;margin-top:.75rem;padding:.15rem}
.diary-access-row{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.75rem;border:1px solid var(--line);border-radius:.75rem}
.diary-access-row>div{min-width:0;display:grid;gap:.25rem}
.diary-access-row strong{font-size:.85rem;overflow-wrap:anywhere}
.diary-access-row small{font-size:.75rem;color:var(--muted)}
.diary-access-row[hidden]{display:none}
.diary-access-state{font-size:.75rem;color:var(--danger)}
.diary-access-state.is-enabled{color:var(--success)}

/* Shared application color picker; the OS color popover is not used. */
.modal:has(.theme-color-picker){width:min(100%,28rem)}
.theme-color-layout{display:grid;grid-template-columns:1fr;gap:.85rem;align-items:start}
.theme-color-layout>*{min-width:0}
.theme-color-area{min-width:0}
.theme-color-plane{position:relative;width:100%;height:10rem;border-radius:.8rem;border:1px solid rgb(0 0 0 / 12%);background:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,transparent),var(--picker-hue);cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none}
.theme-color-plane:focus-visible{outline:2px solid var(--club-control-border);outline-offset:3px}
.theme-color-cursor{position:absolute;left:clamp(.45rem,var(--picker-saturation),calc(100% - .45rem));top:clamp(.45rem,var(--picker-value-top),calc(100% - .45rem));width:.85rem;height:.85rem;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #172033,0 1px 4px #0005;transform:translate(-50%,-50%);pointer-events:none}
.theme-color-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.theme-color-hue{margin:.3rem 0 0}
.theme-color-hue [data-color-hue]{--slider-fill:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}

.theme-color-preview{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.3rem .7rem;padding:.6rem;border:1px solid var(--line);border-radius:1rem;background:linear-gradient(115deg,var(--picker-soft),var(--picker-end));color:var(--picker-text)}
.theme-color-large{grid-row:1/3;align-self:center;width:3rem;height:3rem;border:1px solid rgb(0 0 0 / 8%);border-radius:.75rem;background:var(--picker-color);color:var(--picker-contrast)}
.theme-color-large>span{display:none}
.theme-color-example{display:flex;align-items:center;gap:.6rem;margin:0;min-width:0}
.theme-color-example-icon{font-size:1.4rem;font-weight:800;letter-spacing:-.06em}
.theme-color-example strong{display:block;font-size:.85rem;color:var(--ink)}
.theme-color-example small{display:none}
.theme-color-example-action{display:block;justify-self:start;padding:.35rem .6rem;border:1px solid var(--picker-text);border-radius:.65rem;font-size:.75rem;font-weight:700;text-align:center}
.theme-color-presets{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.3rem;margin-bottom:.75rem}
.theme-color-presets>button{display:grid;place-items:center;width:100%;min-width:0;min-height:2.75rem;padding:.3rem;border:1px solid transparent;border-radius:.65rem;background:transparent}
.theme-color-presets>button>span{display:block;width:100%;height:1.9rem;border-radius:.45rem;background:var(--color-swatch);border:1px solid rgb(0 0 0 / 12%)}
.theme-color-presets>button[aria-pressed="true"]{border-color:var(--club-control-border);background:var(--club-soft-gradient)}
.modal-backdrop.is-color-sampling{visibility:hidden;pointer-events:none;backdrop-filter:none}
.theme-color-hex-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;align-items:end}
.theme-color-hex-row>*{min-width:0}
:root body .theme-color-dropper{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.75rem;padding:.6rem .7rem;font-size:.75rem;white-space:nowrap}
.theme-color-tool-status{margin:.35rem 0 0;font-size:.7rem;line-height:1.5;color:var(--muted)}
.theme-color-tool-status:empty{display:none}
.theme-color-hex{display:grid;gap:.4rem;font-size:.75rem;font-weight:650;color:var(--muted)}
:root body .theme-color-hex>.input{width:100%;font-family:ui-monospace,monospace;font-size:1rem;letter-spacing:.07em}
.theme-color-error{min-height:1.2rem;margin:.25rem 0;font-size:.72rem;color:var(--danger)}
.theme-color-slider{display:grid;gap:.35rem;margin:.4rem 0;color:var(--muted);font-size:.75rem}
.theme-color-slider>span{display:flex;justify-content:space-between;gap:.5rem}
.theme-color-slider output{font-variant-numeric:tabular-nums;color:var(--ink)}
.theme-color-slider>input{width:100%;min-width:0;height:2rem;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}
.theme-color-slider>input::-webkit-slider-runnable-track{height:.65rem;border:1px solid rgb(0 0 0 / 8%);border-radius:999px;background:var(--slider-fill)}
.theme-color-slider>input::-moz-range-track{height:.65rem;border:1px solid rgb(0 0 0 / 8%);border-radius:999px;background:var(--slider-fill)}
.theme-color-slider>input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-.35rem;border:3px solid #fff;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1px #8693a5,0 1px 4px #17203333}
.theme-color-slider>input::-moz-range-thumb{width:.9rem;height:.9rem;border:3px solid #fff;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1px #8693a5}
.theme-color-slider>input:focus-visible{outline:2px solid var(--club-control-border);outline-offset:2px;border-radius:.7rem}
.theme-color-slider [data-color-channel="0"]{--slider-fill:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.theme-color-slider [data-color-channel="1"]{--slider-fill:linear-gradient(90deg,#808080,var(--picker-hue))}
.theme-color-slider [data-color-channel="2"]{--slider-fill:linear-gradient(90deg,#000,var(--picker-mid),#fff)}
.theme-color-note{margin:.7rem 0;color:var(--muted);font-size:.75rem;line-height:1.6}
.theme-color-picker [data-color-auto]{width:100%;margin-top:.5rem}
.theme-color-picker [data-color-auto][aria-pressed="true"]{border-color:var(--club-control-border);background:var(--club-soft-gradient)}
.theme-color-error:empty{display:none}
.theme-color-fine{margin-top:.5rem;border-top:1px solid var(--line)}
.theme-color-fine>summary{display:flex;align-items:center;justify-content:space-between;min-height:2.75rem;font-size:.78rem;font-weight:650;color:var(--muted);cursor:pointer;list-style:none}
.theme-color-fine>summary::-webkit-details-marker{display:none}
.theme-color-fine>summary::after{content:'';width:.4rem;height:.4rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-right:.35rem}
.theme-color-fine[open]>summary::after{transform:rotate(225deg)}
.theme-color-fine .theme-color-presets{margin-top:.3rem}
.theme-color-picker .modal-actions{gap:.5rem;padding-top:.7rem}
@media(max-width:540px){
 .theme-color-picker .modal-actions{display:grid;grid-template-columns:1fr 1fr;position:sticky;bottom:0;z-index:1;padding:.7rem 0;background:#fff}
 .theme-color-picker .modal-actions .button{min-width:0;padding:.6rem .4rem}
 .theme-color-slider>input{min-height:2.75rem}
}

/* Contact destinations: one clear action per card. */
:root body .club-contact-panel{margin-top:1rem;padding:1rem}
.club-contact-identity{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem;min-width:0}
.club-contact-identity>div{min-width:0}
.club-contact-identity h3{margin:0;font-size:1.05rem;line-height:1.4;overflow-wrap:anywhere}
.club-contact-identity p{margin:.15rem 0 0;color:var(--muted);font-size:.75rem}
.club-contact-identity-icon,.club-contact-tile-icon{display:grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;border:1px solid var(--club-border);border-radius:.8rem;background:var(--club-soft-gradient);color:var(--club-text)}
.club-contact-identity-icon .app-icon,.club-contact-tile-icon .app-icon{width:1.25rem;height:1.25rem}
:root body .club-contact-tile{display:flex;align-items:flex-start;gap:.8rem;width:100%;min-width:0;min-height:9rem;margin:0;padding:1rem;border:1px solid var(--line);border-radius:.85rem;background:var(--club-subtle-gradient);color:var(--ink);text-decoration:none}
.club-contact-tile-copy{display:flex;flex-direction:column;align-self:stretch;gap:.35rem;min-width:0}
.club-contact-tile-copy>small{font-size:.72rem;font-weight:600;color:var(--muted)}
.club-contact-tile-copy>strong{font-size:.87rem;font-weight:650;line-height:1.5;overflow-wrap:anywhere}
.club-contact-tile-copy>span{margin-top:auto;padding-top:.4rem;font-size:.72rem;font-weight:650;color:var(--club-text)}
.club-contact-arrow{display:inline-block;width:1rem;height:1rem;margin-left:.2rem;vertical-align:middle}
.club-contact-grid>.empty-state{grid-column:1/-1}
:root body .club-contact-person{align-items:flex-start;padding:1rem;border:1px solid var(--line);border-radius:.85rem;background:var(--club-subtle-gradient)}
.club-contact-person>div>small{display:block;margin-top:.2rem;color:var(--muted);font-size:.75rem}
.club-contact-person .club-contact-actions{margin-top:.35rem;gap:.25rem 1rem}
@media(hover:hover) and (pointer:fine){
 :root body #view-placeholder a.club-contact-tile:hover{text-decoration:none;border-color:var(--club-control-border);box-shadow:0 3px 10px rgb(23 32 51 / 6%)}
}
@media(prefers-reduced-motion:no-preference){.club-contact-tile{transition:border-color .16s ease,box-shadow .16s ease,filter .16s ease}}
@media(min-width:1200px){.club-contact-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){.club-contact-grid{grid-template-columns:1fr}:root body .club-contact-tile{min-height:7rem;padding:.85rem}.club-contact-identity h3{font-size:1rem}}

.member-diary-filters{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;margin:.9rem 0}
.member-diary-filters>span{font-size:.75rem;color:var(--muted);margin-right:.25rem}
.member-diary-filters button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.75rem;border:1px solid var(--line);border-radius:var(--control-radius);padding:.4rem .7rem;background:#fff;font-size:.75rem}
.member-diary-filters button>span{font-size:.68rem;font-variant-numeric:tabular-nums;min-width:1.2rem;border-radius:.35rem;background:var(--surface-muted);padding:.1rem .25rem;color:var(--ink)}
.member-filter-empty{padding:1rem;text-align:center}
@media(max-width:480px){.member-diary-filters>span{width:100%}.member-diary-filters button{flex:1;padding:.4rem .45rem}}

#view-members .member-filter-host{padding:0;border:0;background:transparent;box-shadow:none}

/* A single attendance save control remains available while reviewing a long list. */
.attendance-save-dock{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:1rem;padding:.75rem 1rem;border:1px solid var(--line);border-radius:var(--card-radius);background:#fff}
.attendance-save-dock.is-editable{position:sticky;bottom:.75rem;z-index:10;box-shadow:0 3px 12px rgb(23 32 51 / 8%)}
.attendance-save-dock>div>strong{display:block;font-size:.85rem;color:var(--ink)}
.attendance-save-dock>div>small{display:block;font-size:.7rem;color:var(--muted)}
.attendance-save-actions{display:flex;align-items:center;justify-content:flex-end;gap:.7rem;flex-wrap:wrap}
.attendance-save-feedback{font-size:.73rem;color:var(--muted)}
@media(max-width:760px){.attendance-save-dock.is-editable{bottom:calc(4.65rem + env(safe-area-inset-bottom));padding:.65rem;gap:.5rem}.attendance-save-actions{display:grid;gap:.2rem;text-align:right}.attendance-save-feedback{font-size:.66rem}.attendance-save-dock .button{padding:.55rem .65rem;font-size:.75rem}}
@media(max-width:760px) and (max-height:480px){.attendance-save-dock.is-editable:focus-within{position:relative;bottom:auto}}

.td-selected-actions{display:flex;align-items:center;justify-content:flex-end;gap:.65rem;flex-wrap:wrap}
.td-selected-actions .button{display:inline-flex;align-items:center;justify-content:center;gap:.4rem}
.td-selected-entries>.panel-header h3::first-letter{text-transform:uppercase}
@media(max-width:480px){.td-selected-entries>.panel-header{align-items:flex-start;flex-wrap:wrap}.td-selected-actions{width:100%;justify-content:space-between}.td-selected-actions>.button{flex:1}}

/* A genuine indeterminate status, without empty dashboard placeholder cards. */
#loading-screen .loading-card:not(.runtime-error-card){max-width:28rem;padding:2rem 1.5rem}
#loading-screen .loading-card:not(.runtime-error-card) h1{font-size:clamp(1.2rem,4vw,1.45rem);font-weight:550;line-height:1.3;margin:.65rem 0}
#loading-screen .loading-card:not(.runtime-error-card) p{color:var(--muted);font-size:.9rem;line-height:1.6}
#loading-screen .loading-indicator{width:1.65rem;height:1.65rem;margin:1.4rem auto 0;border:2px solid #e1e8f0;border-top-color:#326da5;border-radius:50%;animation:club-loading-spin .85s linear infinite}
@keyframes club-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#loading-screen .loading-indicator{animation:none}}
.empty-icon>.app-icon{width:1.4rem;height:1.4rem}
.table-wrap[data-scrollable-table="true"]:focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px}
@media(pointer:coarse){details>summary{min-block-size:2.75rem;align-content:center}.td-summary-table button{min-height:2.75rem;min-width:2.75rem}.availability-choice{min-height:2.75rem}}
@media(max-width:760px){html.is-keyboard-open .attendance-save-dock.is-editable{position:static}html.is-keyboard-open #bottom-nav{visibility:hidden}html.is-keyboard-open .merch-checkout-summary{position:static}}

.app-release-summary{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-left:.5rem}
.app-environment{font-size:.62rem;border:1px solid var(--line);border-radius:.35rem;padding:.12rem .35rem;background:var(--surface-muted);color:var(--muted)}
.app-release-button{min-height:2rem;padding:.2rem .35rem;border:0;border-radius:.4rem;background:transparent;color:var(--muted);font-size:.68rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.app-version-dialog{width:min(29rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;margin:auto;padding:1rem;border:1px solid var(--line);border-radius:1rem;background:#fff;color:var(--ink);box-shadow:0 16px 48px rgb(23 32 51 / 15%)}
.app-version-dialog::backdrop{background:rgb(15 23 42 / 40%)}
.app-version-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.app-version-dialog h2{margin:0;font-size:1.05rem}
.app-version-dialog dl{display:grid;gap:.65rem;margin:1rem 0}
.app-version-dialog dl>div{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.6rem;font-size:.8rem}
.app-version-dialog dt{color:var(--muted)}
.app-version-dialog dd{margin:0;overflow-wrap:anywhere}
.app-version-status{font-size:.8rem;padding:.75rem;background:var(--surface-muted);border-radius:.65rem}
.app-version-status[data-state="error"]{color:var(--danger);background:var(--status-danger-bg)}
.app-version-status[data-state="ready"]{color:var(--club-text);background:var(--club-soft-gradient)}
.app-version-note{font-size:.74rem;color:var(--muted);line-height:1.65}
.app-version-canonical{display:block;font-size:.75rem;margin:.75rem 0}
.app-version-dialog>.toolbar{display:flex;flex-wrap:wrap;margin-top:1rem;gap:.5rem}
@media(max-width:760px){.app-release-summary{margin-left:0}.app-release-button{min-height:2.75rem}.app-version-dialog>.toolbar>.button{flex:1}}

@media(max-width:760px){:root body .page-footer{font-size:0}.page-footer>:not(.app-release-summary){display:none}.page-footer .app-release-summary{gap:.5rem;margin:0}}

.p19-save-copy{display:grid;gap:.2rem;min-width:0}
.p19-save-copy>small{font-size:.7rem;color:var(--muted)}
[data-settings-save-feedback]{font-size:.75rem;font-weight:650;color:var(--muted)}
[data-settings-save-feedback][data-state="saved"]{color:var(--success)}
[data-settings-save-feedback][data-state="error"]{color:var(--danger)}

.field-validation-message{display:block;margin-top:.2rem;font-size:.75rem;line-height:1.5;color:var(--danger);overflow-wrap:anywhere}

#view-dashboard .staff-dashboard{gap:.75rem}
#view-dashboard .staff-dashboard-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0;padding:0;min-height:0}
#view-dashboard .staff-dashboard-header h2{margin:0;line-height:1.25}
#view-dashboard .staff-dashboard-header p{margin:.25rem 0 0;line-height:1.5}
@media(max-width:600px){#view-dashboard .staff-dashboard-header{align-items:flex-start;gap:.65rem}#view-dashboard .staff-dashboard-next{gap:.4rem}#view-dashboard .staff-dashboard-next .button{min-height:44px}}

/* One compact page heading; account utilities live with the account in the sidebar. */
@media(min-width:761px){
 :root body .main-content{padding-top:.85rem}
 :root body .main-content>.topbar.is-docked{display:none;margin:0;min-height:0}
 .user-box>.sidebar-utilities{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.45rem}
 .user-box>.sidebar-utilities .profile-chip{display:none}
 .user-box>.sidebar-utilities .connection-status{color:var(--success);font-size:.68rem}
 .user-box>.sidebar-utilities .connection-status[data-connection="offline"]{color:var(--danger)}
 .user-box>#test-role-switcher:not(.is-preview):not(.is-expanded){margin:.35rem 0 0;min-height:0;justify-content:stretch;min-width:0}
 .user-box>#test-role-switcher>[data-toggle-role-controls]{width:100%;white-space:normal;min-height:38px}
}
:root body .view-section>.page-hero{margin-top:0;margin-bottom:0}
:root body .page-hero-inner{min-height:0;padding:.2rem .2rem .65rem;gap:.7rem;align-items:center}
:root body .page-hero p{margin:.2rem 0 0}
:root body .view-section>.page-hero+*{margin-top:.55rem!important}
:root body #view-calendar .calendar-page-hero .eyebrow{display:none}
:root body #view-calendar .calendar-page-hero .page-hero-inner{padding:.2rem .2rem .65rem}
:root body #view-calendar .calendar-page-hero .calendar-hero-nav{margin:0 .2rem .25rem;padding:.3rem .45rem;box-shadow:none}
@media(min-width:1100px){
 :root body #view-calendar .calendar-page-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:1rem;align-items:center;padding:0 0 .5rem}
 :root body #view-calendar .calendar-page-hero .page-hero-inner{padding-bottom:.2rem}
 :root body #view-calendar .calendar-page-hero .calendar-hero-nav{margin:0}
}
@media(max-width:760px){
 .mobile-header-actions>#test-role-switcher:not(.is-preview):not(.is-expanded){margin:0;min-height:0;min-width:0;flex:none}
 .mobile-header-actions>#test-role-switcher>[data-toggle-role-controls]{min-height:44px;padding:.4rem .55rem;font-size:.72rem}
 :root body .page-hero-inner{padding:.15rem .1rem .5rem;gap:.6rem}
 :root body .view-section>.page-hero+*{margin-top:.4rem!important}
}

.user-box>.sidebar-utilities .connection-status{white-space:normal;max-width:calc(100% - 52px)}
:root body #view-tournaments .schedule-catalog{padding:.7rem .85rem;margin-top:.55rem;margin-bottom:.65rem}
:root body #view-tournaments .schedule-catalog>.panel-header{margin:0;align-items:center;gap:.7rem}
:root body #view-tournaments .schedule-catalog>.panel-header h3{font-size:.85rem}
:root body #view-tournaments .schedule-catalog>.panel-header p{margin:.2rem 0 0;font-size:.74rem}
@media(max-width:760px){.mobile-header-actions .icon-button.dark{color:var(--ink);background:var(--club-subtle-gradient);border:1px solid var(--line)}}

/* Compact account identity; secondary account tools are disclosed on demand. */
@media(min-width:761px){
 .sidebar .user-box{position:relative;display:block;padding:.55rem .65rem;background:var(--club-subtle-gradient);border-block:1px solid var(--line)}
 .sidebar-account{min-width:0}.sidebar-account summary{display:flex;align-items:center;gap:.55rem;min-height:52px;padding:.3rem 42px .3rem 0;cursor:pointer;list-style:none;border-radius:.65rem}
 .sidebar-account summary::-webkit-details-marker{display:none}
 .sidebar-account summary:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
 .sidebar-account-avatar{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:1px solid var(--club-border);border-radius:11px;background:var(--club-soft-gradient);color:var(--club-text);font-size:.75rem;font-weight:800}
 .sidebar-account-copy{display:grid;gap:.2rem;min-width:0;flex:1}
 .user-box .sidebar-account-copy strong{color:var(--ink);font-size:.78rem;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .user-box .sidebar-account-copy b{padding:0;background:transparent;border-radius:0;font-size:.62rem;font-weight:600;letter-spacing:0;color:var(--muted);text-transform:none;line-height:1.3}
 .sidebar-account-chevron{width:14px;height:14px;flex:0 0 14px;color:var(--muted);transition:transform .15s}
 .sidebar-account[open] .sidebar-account-chevron{transform:rotate(180deg)}
 .user-box>.sidebar-utilities{display:contents}
 .user-box>.sidebar-utilities>.icon-button{position:absolute;right:.65rem;top:1rem;width:34px;height:34px;min-width:34px;min-height:34px;border-radius:10px;background:var(--surface);border-color:var(--line)}
 .user-box>.sidebar-utilities .connection-status{position:absolute;left:36px;top:45px;display:block;width:10px;height:10px;min-width:0;max-width:none;padding:0;margin:0;overflow:hidden;white-space:nowrap;text-indent:-9999px;background:var(--success);border:2px solid var(--surface);border-radius:50%}
 .user-box>.sidebar-utilities .connection-status[data-connection="offline"]{background:var(--danger)}
 .sidebar-account-menu{display:grid;gap:.2rem;margin:.4rem 0 .1rem;padding-top:.45rem;border-top:1px solid var(--line)}
 .sidebar-account-menu>button,.sidebar-account-menu [data-toggle-role-controls]{display:flex;align-items:center;justify-content:flex-start;box-shadow:none;width:100%;min-height:38px;padding:.5rem .65rem;text-align:left;border:0;border-radius:.5rem;background:transparent;color:var(--ink);font-size:.75rem;font-weight:600;white-space:normal}
 .sidebar-account-menu>button:hover,.sidebar-account-menu [data-toggle-role-controls]:hover{background:var(--club-soft-gradient);color:var(--club-text)}
 .sidebar-account-menu #test-role-switcher:not(.is-preview):not(.is-expanded){display:block;margin:0;padding:0;min-height:0}
}

/* Update actions stay above a personal phone bar, including wrapped labels. */
@media(max-width:760px){
 .pwa-update-notice{bottom:calc(var(--mobile-nav-height,4.5rem) + .65rem);max-height:calc(100dvh - var(--mobile-nav-height,4.5rem) - 1.5rem);overflow:auto;overscroll-behavior:contain}
 .pwa-update-notice .toolbar{display:flex;flex-wrap:wrap;gap:.4rem}
 .pwa-update-notice .toolbar>.button{min-height:44px;white-space:normal;line-height:1.35}
 .pwa-update-confirm{max-height:calc(100dvh - 1.5rem);overflow:auto}
 .pwa-update-confirm .button{min-height:44px;white-space:normal}
}

/* Coverage slider: visible filled track, clear limits and a larger drag handle. */
.theme-color-slider>[data-color-opacity]{
  --slider-fill:linear-gradient(to right,#172033 0%,#172033 var(--opacity-progress,22.22%),#d5dbe3 var(--opacity-progress,22.22%),#d5dbe3 100%);
  min-height:44px;
}
.theme-color-slider>[data-color-opacity]::-webkit-slider-runnable-track{height:10px;border:1px solid #8792a2;background:var(--slider-fill)}
.theme-color-slider>[data-color-opacity]::-moz-range-track{height:10px;border:1px solid #8792a2;background:var(--slider-fill)}
.theme-color-slider>[data-color-opacity]::-webkit-slider-thumb{width:24px;height:24px;margin-top:-8px;border:3px solid #fff;background:#172033;box-shadow:0 0 0 2px #172033,0 2px 5px #17203333;cursor:grab}
.theme-color-slider>[data-color-opacity]::-moz-range-thumb{width:18px;height:18px;border:3px solid #fff;background:#172033;box-shadow:0 0 0 2px #172033,0 2px 5px #17203333;cursor:grab}
.theme-color-slider>[data-color-opacity]:active{cursor:grabbing}
.theme-opacity-limits{margin-top:-4px;color:var(--muted)}
.theme-opacity-limits small{font-size:.72rem}