/* Registry Airfold: Gymnity's typography, folded bands and quiet surfaces,
   with the Registry's blue / rose / green / gold information hierarchy.
   Screen-only overrides preserve the existing print/export presentation. */
@media screen {
  :root {
    color-scheme: light;
    --white: #fff;
    --primary: #a53e5b;
    --navy: #21348c;
    --blue: #21348c;
    --sky: #2d637d;
    --teal: #21705f;
    --green: #21705f;
    --yellow: #896017;
    --rose: #a53e5b;
    --charcoal: #151a2e;
    --gray: #616a80;
    --border: #d7dcea;
    --radius: 4px;
    --af-bg: #f6f7fa;
    --af-panel: #f1f3f8;
    --af-blue-tint: #eef0fb;
    --af-red-tint: #faedf1;
    --af-green-tint: #eaf5f0;
    --af-gold-tint: #faf3e6;
    --af-violet: #66549e;
    --af-violet-tint: #f1edf8;
    --af-focus: #6375cb;
    --af-shadow: 0 2px 8px rgb(21 26 46 / 4%);
    --section-accent: var(--blue);
    --section-fold: #344889;
    --section-tint: var(--af-blue-tint);
    --section-space: 28px;
  }

  body {
    background: var(--af-bg);
    color: var(--charcoal);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  :is(h1, h2, h3, h4) { line-height: 1.25; letter-spacing: -.025em; overflow-wrap: anywhere; }
  :is(p, label, li, td, dd) { overflow-wrap: anywhere; }
  :is(button, input, select, textarea) { font-family: inherit; }
  a { color: var(--blue); text-underline-offset: 3px; }
  :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--af-focus);
    outline-offset: 3px;
  }
  :is(button, a) { -webkit-tap-highlight-color: rgb(33 52 140 / 12%); }
  :is(input, select, textarea) { accent-color: var(--blue); }

  .layout { padding-top: 32px; }
  :is(.layout, #admin-app, .overview-layout) > * { min-width: 0; }
  :is(.hero, .admin-header, .overview-header) {
    position: relative;
    isolation: isolate;
    padding: 28px 32px;
    border: 0;
    border-radius: 4px;
    background: var(--charcoal);
    color: #fff;
    gap: 20px;
  }
  :is(.hero, .admin-header, .overview-header)::after {
    content: '';
    position: absolute;
    inset: 0 0 0 auto;
    width: min(34%, 340px);
    background: linear-gradient(135deg, transparent 46%, #293763 46%);
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
  }
  :is(.hero, .admin-header, .overview-header) h1 {
    color: inherit;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin: 0;
  }
  :is(.hero, .admin-header, .overview-header) :is(.lede, .eyebrow, .comp-meta, .comp-deadline) { color: #dce2f7; }
  .eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .16em; color: var(--gray); }
  .hero-text { min-width: 0; }
  :is(.hero, .admin-header, .overview-header) .btn.ghost { background: #fff; border-color: #fff; color: var(--blue); }
  :is(.hero, .admin-header, .overview-header) :is(button, a):focus-visible { outline-color: #fff; }
  .hero .ds-ack-note { margin-top: 20px; background: #fff; border-color: #fff; color: var(--gray); }
  .hero .ds-ack-note a:focus-visible { outline-color: var(--af-focus); }

  /* The fold is painted behind the heading; it never clips menus or focus. */
  .layout > section {
    margin-top: 24px;
    padding: var(--section-space);
    background: #fff;
    border: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: var(--af-shadow);
  }
  :is(#contact-section, #delegation-section, #section-delegation) {
    --section-accent: var(--primary);
    --section-fold: #b95571;
    --section-tint: var(--af-red-tint);
  }
  :is(#athletes-section, #completion-section, #section-athletes) {
    --section-accent: var(--green);
    --section-fold: #2d8471;
    --section-tint: var(--af-green-tint);
  }
  :is(#units-section, #section-units) {
    --section-accent: var(--yellow);
    --section-fold: #a17324;
    --section-tint: var(--af-gold-tint);
  }
  .layout > section:not(.legal-card) > :is(h2, .section-header) {
    position: relative;
    isolation: isolate;
    margin: calc(-1 * var(--section-space)) calc(-1 * var(--section-space)) 24px;
    padding: 18px var(--section-space);
    min-height: 64px;
    border: 0;
    border-radius: 3px 3px 0 0;
    background: var(--section-accent);
    color: #fff;
    font-size: 1.25rem;
  }
  .layout > section:not(.legal-card) > :is(h2, .section-header)::after,
  .overview-layout > section:not(.summary-grid) > .section-header::after {
    content: '';
    position: absolute;
    inset: 0 0 0 auto;
    width: min(28%, 230px);
    border-radius: inherit;
    background: linear-gradient(135deg, transparent 46%, var(--section-fold) 46%);
    z-index: -1;
    pointer-events: none;
  }
  .layout > section > .section-header h2 { margin: 0; font-size: 1.25rem; color: #fff; }
  #units-section > .section-header .hint { color: #fff; margin: 0; font-size: .88rem; }
  #completion-section { border-top: 4px solid var(--green); background: #fff; }
  .legal-card { border-left: 3px solid var(--blue); }
  .legal-card h2 { font-size: 1.2rem; }

  /* Controls share one geometry while retaining semantic colour. */
  :is(.btn, .pill-option, .tab, .modal-tab, .role-filter-pill, .athlete-add-pill, .delegation-add-pill, .unit-add-pill, .combo-add-group) {
    min-height: 44px;
    border-radius: 3px;
    padding: 9px 15px;
    font-size: .91rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  }
  .btn { border: 1px solid transparent; text-decoration: none; }
  .btn:is(.accent, .primary, .success, .danger) { position: relative; }
  .btn:is(.accent, .primary, .success)::after {
    content: '';
    position: absolute;
    inset: 0 0 auto auto;
    width: 9px;
    height: 9px;
    background: linear-gradient(45deg, transparent 50%, rgb(255 255 255 / 25%) 50%);
    pointer-events: none;
  }
  .btn:is(.primary, .danger) { background: var(--primary); border-color: var(--primary); color: #fff; }
  .btn.accent { background: var(--blue); border-color: var(--blue); color: #fff; }
  .btn.secondary { background: var(--sky); border-color: var(--sky); color: #fff; }
  .btn.success { background: var(--green); border-color: var(--green); color: #fff; }
  .btn.warning { background: var(--yellow); border-color: var(--yellow); color: #fff; }
  .btn.ghost { background: var(--af-blue-tint); border-color: #8b99c8; color: var(--blue); }
  .btn.ghost.danger { background: var(--af-red-tint); border-color: #bf8598; color: #963752; }
  .btn.ghost.reset-btn { background: var(--af-panel); border-color: #b4bdd2; color: #49546f; }
  .btn:not(:disabled):not(.disabled):hover { filter: none; box-shadow: var(--af-shadow); }
  .btn.accent:not(:disabled):hover { background: #19286e; }
  .btn:is(.primary, .danger):not(.ghost):not(:disabled):hover { background: #863047; }
  .btn.success:not(:disabled):hover { background: #185747; }
  .btn.warning:not(:disabled):hover { background: #6c4b10; }
  .btn.ghost:not(:disabled):hover { background: #dfe4f7; }
  .btn.ghost.danger:not(:disabled):hover { background: #f2dce4; }
  .btn:is(:disabled, .disabled, .action-disabled), #completion-section .finish-btn:disabled {
    background: #edf0f5;
    border-color: #c9d0de;
    color: #6b7385;
    opacity: 1;
    box-shadow: none;
  }
  :is(.btn.icon-button, .icon-button, .modal-close, .card .remove-btn, .reported-unit-card .remove-btn) {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    border-radius: 3px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn.icon-button.confirming { width: auto; padding-inline: 12px; flex-basis: auto; }
  :is(.field input, .field select, .field textarea, .list-search, .field .list-search, .filter-input, .multi-input) {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    max-width: 100%;
    border: 1px solid #b4bdd2;
    border-radius: 3px;
    background: #fff;
    padding: 10px 12px;
    color: var(--charcoal);
    font-size: 1rem;
    line-height: 1.4;
  }
  .field { color: #49546f; font-weight: 500; min-width: 0; }
  .field :is(input, select, textarea):focus, .list-search:focus, .field .list-search:focus {
    border-color: var(--blue);
    box-shadow: none;
    outline: 3px solid var(--af-focus);
    outline-offset: 3px;
  }
  :is(input, textarea)::placeholder { color: #737b8f; opacity: 1; }
  .field :is(input, select, textarea):disabled { color: #616a80; background: var(--af-panel); }
  .field input[type='file'] { padding: 6px; }
  input::file-selector-button { min-height: 32px; border: 1px solid #b4bdd2; border-radius: 2px; background: var(--af-panel); color: var(--blue); margin-right: 10px; font: inherit; cursor: pointer; }
  .field input:is([type='checkbox'], [type='radio']) { width: 20px; min-width: 20px; height: 20px; min-height: 20px; padding: 0; }
  .checkbox-field { min-height: 44px; align-items: center; gap: 12px; }
  .checkbox-field input[type='checkbox'] { width: 20px; height: 20px; flex: 0 0 20px; }
  .switch { min-height: 44px; }
  .switch-track { height: 28px; }
  .switch input:focus-visible + .switch-track { outline: 3px solid var(--af-focus); outline-offset: 3px; }
  .switch input:checked + .switch-track { background: var(--green); }
  .form-grid { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; }
  .club-grid, .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 24px; }
  .form-actions, .modal-actions { flex-wrap: wrap; }
  .hint, .required-hint, .drop-hint { color: var(--gray); }
  #units-section .hint { color: #80560e; }

  .pill-switch, .sort-switch { border: 1px solid var(--border); border-radius: 4px; background: #fff; padding: 3px; gap: 3px; flex-wrap: wrap; }
  .pill-switch .pill-option, .sort-switch .pill-option { min-height: 44px; border-radius: 3px; border-color: transparent; color: var(--blue); padding: 9px 12px; letter-spacing: 0; }
  .pill-switch .pill-option.active { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: none; }
  .sort-switch .pill-option { color: var(--green); }
  .sort-switch .pill-option.active { background: var(--green); border-color: var(--green); color: #fff; }
  .language-floating { top: 8px; left: max(12px, calc((100% - 1052px) / 2)); z-index: 30; }
  .language-floating .pill-switch { box-shadow: var(--af-shadow); }
  .language-floating .pill-option { min-height: 36px; padding: 6px 10px; font-size: .8rem; }

  /* Person and start cards retain their actions, roles and selection markers. */
  :is(.card, .competition-card, .cta-card, .available-unit-card, .reported-unit-card, .person-pill, .summary-card, .discipline-preview-card) {
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
    min-width: 0;
    max-width: 100%;
  }
  .competition-card { border-top: 3px solid var(--blue); padding: 22px; }
  .competition-card h3 { font-size: 1.18rem; }
  .competition-card .comp-meta { color: var(--gray); }
  .competition-card .comp-deadline { color: #80560e; }
  .competition-card .comp-actions { flex-wrap: wrap; gap: 10px; }
  .competition-card-list { gap: 18px; }
  :is(.available-unit-card, .reported-unit-card) { border-left: 3px solid var(--yellow); width: clamp(280px, 32vw, 400px); padding: 14px; }
  :is(.available-units, .available-delegates, #unit-list.card-list, .signature-panel, .summary-block, .logo-preview) { border-radius: 4px; border-color: var(--border); box-shadow: none; }
  :is(.available-units, #unit-list.card-list) { background: var(--af-gold-tint); border-color: #d7c197; }
  .available-delegates { background: var(--af-red-tint); border-color: #dfbdc8; }
  .available-units h3, #unit-list h3 { color: #80560e; }
  .logo-preview { background: var(--af-blue-tint); border-color: #aab6d9; }
  .logo-preview.drag-over { background: #dfe4f7; border-color: var(--blue); }
  :is(.athlete-list-item, .delegation-person-pill, .athlete-pill, .competition-pill) { border-radius: 4px; min-height: 44px; max-width: 100%; }
  .athlete-list-item { border-color: #9fc5b5; color: #216450; background: var(--af-green-tint); padding: 8px 12px; }
  .delegation-person-pill { border-color: #dfbdc8; color: #963752; background: var(--af-red-tint); padding: 8px 12px; }
  :is(.athlete-list-item, .delegation-person-pill):hover { transform: none; border-color: currentColor; box-shadow: var(--af-shadow); }
  :is(.athlete-list-label, .delegation-person-label) { min-width: 0; flex-wrap: wrap; gap: 5px 8px; }
  .person-pill { border-color: #dfbdc8; padding: 14px; }
  .person-pill:not(.registered) { border-style: dashed; }
  .athlete-add-pill { color: #216450; border-color: #7da99a; background: var(--af-green-tint); }
  .delegation-add-pill { color: #963752; border-color: #bf8598; background: var(--af-red-tint); }
  .unit-add-pill { color: #80560e; border-color: #bb9b5d; background: var(--af-gold-tint); }
  .athlete-pill { color: #49546f; border-color: #b4bdd2; }
  .athlete-pill.selected, .pill-select.grouped .athlete-pill.selected { background: var(--green); border-color: var(--green); color: #fff; }
  .pill-select.grouped .competition-pill.selected { background: var(--blue); border-color: var(--blue); color: #fff; }
  :is(.role-pill, .tag, .badge, .multi-tag, .unit-athletes span, .available-unit-card .unit-athletes span, .reported-unit-card .unit-athletes span) { border-radius: 3px; line-height: 1.45; }
  .role-pill.role-coach { color: #216450; background: var(--af-green-tint); border-color: #9fc5b5; }
  .role-pill.role-medical { color: #963752; background: var(--af-red-tint); border-color: #dfbdc8; }
  .role-pill.role-paramedical { color: #80560e; background: var(--af-gold-tint); border-color: #d7c197; }
  .role-pill.role-mental { color: var(--af-violet); background: var(--af-violet-tint); border-color: #c9bddd; }
  :is(.role-dropdown, .multi-dropdown) { border-radius: 4px; border-color: #b4bdd2; box-shadow: 0 6px 20px rgb(21 26 46 / 12%); }
  :is(.role-dropdown-option, .multi-option) { min-height: 44px; border-radius: 3px; }
  .multi-option.selected { background: var(--af-blue-tint); color: var(--blue); border-color: #8b99c8; }
  .multi-option.selected .multi-option-check { background: var(--blue); border-color: var(--blue); }

  /* Dialogs keep their existing scrolling regions and sticky action row. */
  .modal { z-index: 100; }
  .modal-backdrop, .password-backdrop { background: rgb(21 26 46 / 55%); backdrop-filter: blur(2px); }
  .modal-dialog, .password-dialog { border: 1px solid var(--border); border-top: 4px solid var(--blue); border-radius: 4px; box-shadow: 0 16px 48px rgb(21 26 46 / 18%); }
  .modal-dialog { max-height: calc(100dvh - 32px); }
  .modal-header { border-bottom: 1px solid var(--border); padding-bottom: 12px; gap: 12px; background: #fff; }
  .modal-header :is(h2, h3) { color: var(--charcoal); margin: 0; font-size: 1.2rem; }
  .modal-close { color: #49546f; background: var(--af-panel); font-size: 1.6rem; border: 1px solid var(--border); }
  .modal-actions { background: #fff; border-top: 1px solid var(--border); padding-top: 16px; }
  :is(.modal-form, .modal-body, .completion-summary-body) { padding-inline: 5px; scrollbar-color: #aab6d9 var(--af-panel); }
  .signature-panel { border-style: solid; background: var(--af-panel); }
  .signature-pad { background: #fff; border: 1px solid #b4bdd2; border-radius: 3px; }
  .signature-label { color: var(--charcoal); }
  .summary-stats div { background: var(--af-blue-tint); border: 1px solid var(--border); border-radius: 4px; box-shadow: none; }
  :is(.notice, .form-warning, .ds-ack-note, .ds-ack-warning, .club-start-message, .summary-status) { border-radius: 4px; }
  .notice, .form-warning, .ds-ack-warning { background: var(--af-gold-tint); border-color: #d7c197; color: #80560e; }
  .club-start-message.info { color: var(--blue); background: var(--af-blue-tint); border-color: #aab6d9; }
  .club-start-message.error { color: #963752; background: var(--af-red-tint); border-color: #bf8598; }
  .notification-toast { border-radius: 4px; background: #fff; color: var(--charcoal); box-shadow: 0 6px 20px rgb(21 26 46 / 12%); }
  #sync-status { top: 8px; right: max(12px, calc((100% - 1052px) / 2)); min-height: 44px; max-width: calc(100% - 146px); border-radius: 4px; padding: 9px 12px; flex-wrap: wrap; font-size: .8rem; box-shadow: var(--af-shadow); }
  #sync-status:empty { display: none; }
  #sync-status.status-saving { color: #fff; }
  #sync-status .status-tag { border-radius: 2px; }
  #sync-status.status-conflict { max-width: min(720px, calc(100% - 24px)); background: var(--rose); color: #fff; align-items: flex-start; }
  #sync-status.status-conflict > span:first-child { flex-basis: 100%; overflow-wrap: anywhere; }
  #sync-status:is(.status-conflict, .status-error) .btn { min-height: 44px; max-width: 100%; white-space: normal; background: #fff; border-color: #fff; color: var(--charcoal); }
  #sync-status:is(.status-conflict, .status-error) .btn:hover { background: var(--af-red-tint); }
  #sync-status:is(.status-conflict, .status-error) a:not(.btn) { color: #fff; text-decoration: underline; }
  #sync-status:is(.status-conflict, .status-error) :focus-visible { outline-color: #fff; outline-offset: 3px; }

  /* Shared account and candidate surfaces for the email-link workflow. */
  :is(.club-access, .club-access-admin) { margin-top: 24px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 4px; background: var(--af-panel); }
  :is(.club-access, .club-access-admin) > summary { min-height: 44px; padding: 10px 0; font-weight: 600; color: var(--blue); cursor: pointer; }
  :is(.club-access, .club-access-admin)[open] > summary { margin-bottom: 12px; border-bottom: 1px solid var(--border); }
  .club-access-member { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .club-access-member > * { min-width: 0; overflow-wrap: anywhere; }
  .club-access-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(120px, 1fr) auto; align-items: end; gap: 12px; margin-top: 18px; }
  .club-access-form .field { margin: 0; }
  .club-access-form .hint { grid-column: 1 / -1; }
  .login-layout { max-width: 760px; }
  .login-layout .hero { margin-bottom: 0; }
  .login-layout .field { max-width: 100%; }
  .account-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; margin-top: 20px; background: #fff; border: 1px solid var(--border); border-radius: 4px; }
  .account-bar > * { min-width: 0; overflow-wrap: anywhere; }
  .club-candidates { display: grid; gap: 12px; margin-block: 16px; }
  .club-candidate { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; padding: 18px; border: 1px solid #aab6d9; border-left: 3px solid var(--blue); border-radius: 4px; background: var(--af-blue-tint); }
  .club-candidate > * { min-width: 0; }
  .club-candidate :is(h3, p) { margin: 0; }
  .club-candidate small { color: #49546f; }
  .club-candidate-actions, .club-search-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .club-search-actions { padding-top: 12px; }

  /* Admin uses the same surfaces and semantic accents as the registration. */
  #login-view { max-width: 560px; margin: 32px auto; border-top: 4px solid var(--blue); }
  .panel, .tab-content { border: 1px solid var(--border); border-radius: 4px; background: #fff; }
  .tab-bar { gap: 6px; padding: 8px 0; margin-bottom: 12px; }
  .tab { --tab-accent: var(--blue); --tab-tint: var(--af-blue-tint); margin: 0 !important; border: 1px solid var(--border) !important; background: #fff !important; color: var(--tab-accent) !important; }
  .tab[data-tab='delegation'] { --tab-accent: var(--primary); --tab-tint: var(--af-red-tint); }
  .tab[data-tab='athletes'] { --tab-accent: var(--green); --tab-tint: var(--af-green-tint); }
  .tab[data-tab='units'] { --tab-accent: var(--yellow); --tab-tint: var(--af-gold-tint); }
  .tab[data-tab='disciplines'] { --tab-accent: var(--af-violet); --tab-tint: var(--af-violet-tint); }
  .tab[data-tab='database'], .tab[data-tab='admin'] { --tab-accent: #49546f; --tab-tint: var(--af-panel); }
  /* Inline tab colours come from the legacy renderer; these scoped overrides
     keep that renderer and its state/behaviour intact. */
  .tab.active { background: var(--tab-tint) !important; border-color: var(--tab-accent) !important; box-shadow: inset 0 -3px var(--tab-accent); }
  .tab:not(.active):hover { transform: none; background: var(--tab-tint) !important; }
  .tab .label { white-space: normal; }
  .tab-content { padding: 24px; }
  .grid { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
  .card header { flex-wrap: wrap; }
  .table-wrap, .table-scroll { max-width: 100%; overflow-x: auto; border-radius: 3px; }
  th { background: var(--af-panel); color: #49546f; }
  td, th { border-color: var(--border); }
  tr:hover td { background: var(--af-blue-tint); }
  .badge-green { background: var(--af-green-tint); color: #216450; border-color: #9fc5b5; }
  .badge-yellow { background: var(--af-gold-tint); color: #80560e; border-color: #d7c197; }
  .badge-primary { background: var(--af-red-tint); color: #963752; border-color: #dfbdc8; }
  .role-filter-pill.active { background: var(--blue); border-color: var(--blue); color: #fff; }
  .role-filter-pill.role-coach.active { background: var(--green); border-color: var(--green); color: #fff; }
  .role-filter-pill.role-medical.active { background: var(--primary); border-color: var(--primary); color: #fff; }
  .role-filter-pill.role-paramedical.active { background: var(--yellow); border-color: var(--yellow); color: #fff; }
  .role-filter-pill.role-mental.active { background: var(--af-violet); border-color: var(--af-violet); color: #fff; }
  .role-filter-pill.missing-required-pill { color: #80560e; background: var(--af-gold-tint); border-color: #bb9b5d; }
  .role-filter-pill.missing-required-pill.active { color: #fff; background: var(--yellow); border-color: var(--yellow); }

  .overview-layout { color: var(--charcoal); }
  .overview-layout > section:not(.summary-grid) { margin-top: 28px; }
  .overview-layout > section:not(.summary-grid) > .section-header {
    position: relative;
    isolation: isolate;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-radius: 4px;
    background: var(--section-accent);
    color: #fff;
  }
  .overview-layout > section > .section-header h2 { color: #fff; font-size: 1.2rem; margin: 0; }
  .overview-layout > section > .section-header .section-back { color: #fff; border-color: #fff; }
  .overview-layout .section-header .count-chip { background: #fff; color: var(--section-accent); border-radius: 3px; }
  .overview-layout .section-header a:focus-visible { outline-color: #fff; }
  .summary-card { border-top: 3px solid var(--blue); padding: 18px; }
  .summary-card strong { color: var(--blue); }
  .card-table { border-radius: 4px; border-color: var(--border); }
  .card-table th { background: var(--af-panel); color: #49546f; }
  .live-indicator { background: var(--af-green-tint); color: #216450; border-radius: 3px; }
  .live-indicator::before { background: var(--green); box-shadow: none; }
  .app-footer { border-top: 1px solid var(--border); font-size: .8rem; background: transparent; }
  .app-footer__links a { padding-block: 10px; }
}

@media screen and (max-width: 720px) {
  :root { --section-space: 20px; }
  .layout { padding: 24px 16px 48px; }
  #admin-app, .overview-layout { padding: 20px 16px 48px; }
  :is(.hero, .admin-header, .overview-header) { padding: 24px; flex-wrap: wrap; }
  .hero::after { width: 42%; }
  .club-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .tab-content { padding: 18px; }
  .tab .label { display: inline; }
  .tab { flex: 1 1 120px; }
  .tab.tab-right { margin-left: 0; }
  .person-pill { min-width: 0; flex-wrap: wrap; }
  :is(.athlete-list-item, .delegation-person-pill) { flex-wrap: wrap; width: 100%; max-width: 100%; }
  .pill-actions { flex-wrap: wrap; }
  .available-unit-card, .reported-unit-card { width: 100%; max-width: 100%; }
  .list-controls .list-search { min-width: 0; flex-basis: 100%; }
  .modal-dialog, .modal-dialog.wide-modal { width: calc(100% - 24px); padding: 16px; max-height: calc(100dvh - 24px); }
  .modal-actions { gap: 8px; }
  .modal-actions .btn { flex: 1 1 auto; }
  .notification-host { max-width: calc(100% - 24px); }
  .club-access-form { grid-template-columns: minmax(0, 1fr); }
  .club-access-form .btn { width: 100%; }
  .club-candidate-actions { width: 100%; }
  .club-candidate-actions .btn { flex: 1; }
}

@media screen and (max-width: 420px) {
  :root { --section-space: 16px; }
  .layout { padding-inline: 12px; }
  :is(.hero, .admin-header, .overview-header) { padding: 20px; }
  .club-start-row .club-name-field { min-width: 0; flex-basis: 100%; }
  #club-start-btn { width: 100%; }
  #completion-section .finish-btn { min-width: 0; width: 100%; padding-inline: 18px; }
  .summary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .available-unit-card, .reported-unit-card { padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  :is(.hero, .admin-header, .overview-header, .layout > section, .card, .btn, .tab, .modal-dialog, .pill-option, .club-candidate) { border: 1px solid CanvasText !important; }
  :is(.hero, .admin-header, .overview-header, .section-header, .layout > section > h2)::after, .btn::after { display: none; }
  :is(.pill-option.active, .tab.active, .athlete-pill.selected, .competition-pill.selected, .role-filter-pill.active) { outline: 2px solid Highlight; outline-offset: -3px; }
  .switch-track { border: 1px solid ButtonText; }
  .switch-thumb { background: ButtonText; }
  :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: Highlight; }
}

/* The authentication dialog precedes the registration and shares its form
   with login.html. Native dialog supplies focus trapping and inert background. */
.auth-dialog:not([open]) { display: none; }
.auth-dialog-open { overflow: hidden; }
.auth-dialog {
  width: min(520px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border, #d7dcea);
  border-radius: 4px;
  color: var(--charcoal, #151a2e);
  background: #fff;
  box-shadow: 0 20px 70px rgb(21 26 46 / 24%);
}
.auth-dialog::backdrop { background: rgb(21 26 46 / 48%); backdrop-filter: blur(3px); }
.auth-dialog-header {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  background: var(--blue, #21348c);
  color: #fff;
}
.auth-dialog-header::after {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 40%;
  background: linear-gradient(135deg, transparent 45%, rgb(255 255 255 / 10%) 45%);
  pointer-events: none;
  z-index: -1;
}
.auth-dialog-header h2 { margin: 0; font-size: 1.5rem; color: inherit; }
.auth-dialog-header .eyebrow { margin: 0 0 8px; color: #dce2f7; }
.auth-dialog-close {
  flex: 0 0 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 60%);
  border-radius: 3px;
  color: #fff;
  background: transparent;
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.auth-dialog-close:hover { background: rgb(255 255 255 / 15%); }
.auth-dialog-close:focus-visible { outline-color: #fff; }
.auth-dialog-content { padding: 24px; }
.auth-dialog-content > p { margin: 0 0 24px; }
.auth-dialog-languages { width: fit-content; margin: 0 0 18px auto; }
.auth-form .field { display: flex; margin-bottom: 18px; }
.auth-form input { width: 100%; min-width: 0; }
.auth-form .hint { margin-bottom: 0; }
.auth-message { margin: 18px 0 0; }
.auth-message:empty { display: none; }
.auth-check { margin-block: 20px; }
.registration-gate { min-height: 50vh; }
@media screen and (max-width: 420px) {
  .auth-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .auth-dialog-header, .auth-dialog-content { padding: 20px; }
  .auth-form .btn { width: 100%; }
}
@media (forced-colors: active) {
  .auth-dialog, .auth-dialog-close { border-color: CanvasText; }
  .auth-dialog-header::after { display: none; }
}
@media print { .auth-dialog, #registration-gate, #auth-check { display: none !important; } }

@media screen {
/* Keep the admin navigation in balanced rows, including under browser zoom. */
#admin-app .tab-bar {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}
#admin-app .tab {
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  padding: 9px 8px;
  gap: 6px;
  font-size: .875rem;
}
#admin-app .tab .label { white-space: nowrap; overflow-wrap: normal; }
#admin-app .tab .icon { font-size: 1rem; }
#admin-app .tab[data-tab='accounts'] { --tab-accent: var(--af-violet); --tab-tint: var(--af-violet-tint); }
#admin-app .tab[data-tab='clubs'] { --tab-accent: var(--primary); --tab-tint: var(--af-red-tint); }

@media (max-width: 1100px) {
  #admin-app .tab-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  #admin-app .tab-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

}