/* Shared Material 3 selection controls. Native inputs retain forms, validation and keyboard semantics. */
:root { --md-control-motion: cubic-bezier(.2,.8,.2,1); --md-control-state: transparent; }
:root input:is([type="checkbox"],[type="radio"]) {
  appearance:none; -webkit-appearance:none; position:relative; display:inline-block;
  width:24px; height:24px; min-width:24px; min-height:24px; flex:0 0 24px;
  margin:0; padding:0; border:0; border-radius:50%; background:transparent;
  color:var(--brand); vertical-align:middle; cursor:pointer; overflow:visible;
  outline-offset:8px; touch-action:manipulation;
}
:root input:is([type="checkbox"],[type="radio"])::before {
  content:""; position:absolute; left:50%; top:50%; width:18px; height:18px;
  box-sizing:border-box; border:2px solid var(--muted); border-radius:2px;
  background:transparent; transform:translate(-50%,-50%);
  box-shadow:0 0 0 11px var(--md-control-state);
  transition:background-color 160ms, border-color 160ms, box-shadow 160ms, border-radius 200ms;
}
:root input:is([type="checkbox"],[type="radio"])::after {
  content:""; position:absolute; left:50%; top:50%; box-sizing:border-box;
  width:10px; height:6px; border-left:2px solid var(--md-sys-color-on-primary);
  border-bottom:2px solid var(--md-sys-color-on-primary);
  transform:translate(-50%,-65%) rotate(-45deg) scale(.2); opacity:0;
  transition:transform 300ms var(--motion-spring), opacity 120ms;
}
:root input[type="checkbox"]:is(:checked,:indeterminate)::before { background:var(--brand); border-color:var(--brand); }
:root input[type="checkbox"]:checked::after { transform:translate(-50%,-65%) rotate(-45deg) scale(1); opacity:1; }
:root input[type="checkbox"]:indeterminate::after { width:10px; height:2px; border:0; background:var(--md-sys-color-on-primary); transform:translate(-50%,-50%) scale(1); opacity:1; }
:root input[type="radio"]::before { width:20px; height:20px; border-radius:50%; box-shadow:0 0 0 10px var(--md-control-state); }
:root input[type="radio"]::after { width:10px; height:10px; border:0; background:var(--brand); border-radius:50%; transform:translate(-50%,-50%) scale(.2); }
:root input[type="radio"]:checked::before { border-color:var(--brand); }
:root input[type="radio"]:checked::after { opacity:1; transform:translate(-50%,-50%) scale(1); }
:root label:has(>input:is([type="checkbox"],[type="radio"])) { min-height:48px; cursor:pointer; }
:root label:has(>input:is([type="checkbox"],[type="radio"])):hover>input:not(:disabled),
:root input:is([type="checkbox"],[type="radio"]):hover:not(:disabled) { --md-control-state:color-mix(in srgb,var(--brand) 8%,transparent); }
:root input:is([type="checkbox"],[type="radio"]):is(:active,:focus-visible):not(:disabled) { --md-control-state:color-mix(in srgb,var(--brand) 12%,transparent); }
:root input:is([type="checkbox"],[type="radio"]):focus-visible { outline:2px solid var(--brand); }
:root input:is([type="checkbox"],[type="radio"]):disabled { opacity:.38; cursor:not-allowed; }
:root label:has(>input:is([type="checkbox"],[type="radio"]):disabled) { cursor:not-allowed; }
:root input:is([type="checkbox"],[type="radio"])[aria-invalid="true"]::before { border-color:var(--danger); }
.verification-toggle>.icon { display:none; } /* The actual control is the single source of checked state. */
.verification-toggle { transition:background 200ms,border-radius 350ms var(--motion-spring); }
.verification-toggle:has(input:checked) { background:var(--brand-soft); border-radius:24px; }

/* Shared outlined select: native popup, keyboard and optgroup behavior stay intact. */
:root select {
  appearance:none; -webkit-appearance:none; padding-right:48px;
  background-image:url('/static/select-chevron.svg'); background-repeat:no-repeat;
  background-position:right 16px center; background-size:20px; cursor:pointer;
  transition:border-color 160ms,box-shadow 160ms,background-color 160ms;
}
:root select:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-color:var(--brand); }
:root select:disabled { opacity:.38; cursor:not-allowed; }

/* Circular indeterminate progress: rotating arc + expanding/contracting sweep. */
.md-spinner { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex:0 0 24px; color:currentColor; vertical-align:middle; }
.md-spinner svg { display:block; width:100%; height:100%; overflow:visible; animation:md-spinner-rotate 1400ms linear infinite; }
.md-spinner circle { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; }
.md-spinner .md-spinner-track { opacity:.18; }
.md-spinner .md-spinner-arc { stroke-dasharray:1,126; stroke-dashoffset:0; animation:md-spinner-sweep 1400ms cubic-bezier(.4,0,.2,1) infinite; }
button>.md-spinner { display:none; }
button[aria-busy="true"] { cursor:progress; }
button[aria-busy="true"]>.md-spinner { display:inline-flex; animation:md-progress-enter 260ms var(--motion-spring); }
button[aria-busy="true"]>.icon { display:none; }
.md-page-progress { position:fixed; inset:0 0 auto; height:4px; z-index:100; background:var(--brand-soft); overflow:hidden; pointer-events:none; }
.md-page-progress[hidden] { display:none; }
.md-page-progress::after { content:""; position:absolute; width:38%; height:100%; border-radius:99px; background:var(--brand); animation:md-linear-sweep 1200ms cubic-bezier(.4,0,.2,1) infinite; }
@keyframes md-spinner-rotate { to { transform:rotate(360deg); } }
@keyframes md-spinner-sweep { 0% {stroke-dasharray:1,126;stroke-dashoffset:0} 50% {stroke-dasharray:90,126;stroke-dashoffset:-25} 100% {stroke-dasharray:1,126;stroke-dashoffset:-125} }
@keyframes md-linear-sweep { from {transform:translateX(-110%)} to {transform:translateX(370%)} }
@keyframes md-progress-enter { from {opacity:0;transform:scale(.7)} to {opacity:1;transform:scale(1)} }
@media (prefers-reduced-motion:reduce) {
  :root input:is([type="checkbox"],[type="radio"])::before,
  :root input:is([type="checkbox"],[type="radio"])::after,
  .verification-toggle,:root select { transition:none; }
  .md-spinner svg,.md-spinner .md-spinner-arc,button[aria-busy="true"]>.md-spinner,.md-page-progress::after { animation:none; }
  .md-spinner .md-spinner-arc { stroke-dasharray:80,126; }
  .md-page-progress::after { left:31%; }
}
@media (forced-colors:active) {
  :root input:is([type="checkbox"],[type="radio"]) { appearance:auto; -webkit-appearance:auto; forced-color-adjust:auto; }
  :root input:is([type="checkbox"],[type="radio"])::before,
  :root input:is([type="checkbox"],[type="radio"])::after { content:none; }
  :root select { appearance:auto; background-image:none; }
  .md-spinner { color:ButtonText; }
  .md-page-progress { background:Canvas; }
  .md-page-progress::after { background:Highlight; }
}