/* This declaration must precede every other local stylesheet. */
@layer reset, base, tokens, layout, components, patterns, senior-overrides, utilities, overrides;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; }
}

@layer layout {
  html {
    scroll-padding-block-start: calc(var(--shell-header-height, 0px) + 16px);
    scroll-padding-block-end: calc(var(--shell-bottom-height, 0px) + 16px);
  }
  body[data-senior] { padding-block-end: var(--shell-bottom-height, 0px); }
  .av-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px 24px;
    padding: 16px max(16px, calc((100% - 1280px) / 2));
    border-block-end: 2px solid var(--nav-line);
    z-index: 40;
  }
  .av-search-container { container: search / inline-size; grid-column: 1 / -1; min-inline-size: 0; }
  .av-location { padding: 24px max(16px, calc((100% - 1280px) / 2)); }
  .av-footer { margin-block-start: 48px; padding: 32px 16px; }
  .av-help-page { max-inline-size: 70rem; padding: 32px 16px; margin-inline: auto; }
  .av-help-page section { margin-block: 48px; }
  .av-help-page p { max-inline-size: 65ch; }
  @media (min-width: 64em) and (min-height: 600px) {
    [data-nav-fixed] .av-header { position: sticky; top: 0; }
  }
  @media (min-width: 64em) {
    .av-header { grid-template-columns: auto minmax(0, 1fr) auto; }
    .av-search { max-inline-size: 44rem; margin-inline: auto; }
  }
}

@layer components {
  .av-brand { gap: 12px; font-weight: 750; }
  .av-brand img { flex: 0 0 40px; }
  .av-account { display: flex; flex-wrap: wrap; gap: 12px; }
  .av-search { display: grid; gap: 12px; }
  .av-search label { font-weight: 700; }
  .av-search-controls { display: grid; gap: 12px; }
  .av-search input { width: 100%; min-width: 0; border: 2px solid var(--nav-line); border-radius: 8px; padding: 8px 12px; }
  .av-search button { padding: 8px 24px; border: 2px solid var(--nav-link); border-radius: 8px; }
  .av-search:has(input:focus-visible) label { text-decoration: underline; }
  @container search (min-width: 16rem) {
    .av-search-controls { grid-template-columns: minmax(0, 1fr) auto; }
  }
  @supports (field-sizing: content) {
    .av-search input { field-sizing: content; width: auto; min-inline-size: min(100%, 20ch); max-inline-size: 100%; }
  }
  .av-help { position: relative; max-inline-size: 65ch; }
  .av-help summary { cursor: pointer; }
  .av-help-panel { padding: 24px; border: 2px solid var(--nav-link); border-radius: 8px; }
  @supports (anchor-name: --av-help) and (position-try-fallbacks: flip-block) and (position-area: bottom) {
    @media (min-width: 64em) {
      .av-help summary { anchor-name: --av-help; }
      .av-help[open] .av-help-panel {
        position: absolute;
        position-anchor: --av-help;
        position-area: bottom;
        position-try-fallbacks: flip-block, flip-inline;
        width: min(32rem, calc(100vw - 32px));
        max-height: 50dvh;
        overflow: auto;
        z-index: 50;
      }
    }
  }
}

@layer patterns {
  .av-step-status { display: grid; gap: 12px; justify-items: start; }
  .av-step-label { white-space: nowrap; }
  .av-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
  .av-primary a { padding: 12px; }
  .av-primary--desktop { display: none; justify-self: center; }
  .av-primary--mobile {
    padding: 12px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    border-block-start: 2px solid var(--nav-line);
    z-index: 40;
    & .av-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    & a { width: 100%; justify-content: center; padding-inline: 0; }
  }
  [data-nav-fixed] .av-primary--mobile { position: fixed; inset-inline: 0; bottom: 0; }
  .av-location nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
  .av-location ol { display: flex; align-items: center; flex-wrap: wrap; list-style: none; gap: 12px; padding: 0; margin: 0; }
  .av-location li { display: inline-flex; align-items: center; gap: 12px; }
  .av-location li + li { border-inline-start: 2px solid var(--nav-line); padding-inline-start: 12px; }
  .av-location [aria-current] { font-weight: 750; }
  .av-footer .av-links { justify-content: center; }
  .av-footer p { text-align: center; }
  .av-skip { position: fixed; top: 12px; left: 16px; z-index: 100; padding: 12px; transform: translateY(-200%); }
  .av-skip:focus { transform: none; }
  @media (min-width: 64em) {
    .av-primary--desktop { display: block; }
    .av-primary--mobile { display: none; }
  }
}

@layer patterns {
  .av-form-errors { padding: 16px; border: 3px solid var(--nav-danger); border-radius: 8px; }
  .av-form-errors ul { display: grid; gap: 12px; padding-inline-start: 24px; }
  .av-field-error { padding: 8px; border-inline-start: 4px solid var(--nav-danger); }
}

@layer senior-overrides {
  [data-senior] :is(.av-form-errors, .av-field-error) {
    color: var(--nav-ink) !important;
    background-color: var(--nav-surface) !important;
  }
  [data-senior] [aria-invalid="true"] { border: 3px solid var(--nav-danger) !important; }
  html { font-size: max(100%, 20px) !important; scroll-behavior: auto !important; }
  /* Reserved tokens are assigned on every element to close inheritance gaps. */
  :where([data-senior], [data-senior] *) {
    --nav-ink: #13201d !important;
    --nav-link: #123c33 !important;
    --nav-surface: #fffdf7 !important;
    --nav-state: #edf3f0 !important;
    --nav-line: #405a50 !important;
    --nav-focus: #123c33 !important;
    --nav-danger: #8d1f19 !important;
    font-family: system-ui, sans-serif !important;
    font-size: max(20px, 1rem, var(--reader-font-size, 1rem)) !important;
    line-height: max(1.6, var(--reader-line-height, 1.6)) !important;
    letter-spacing: max(.02em, var(--reader-letter-spacing, .02em)) !important;
    word-spacing: var(--reader-word-spacing, normal) !important;
    text-transform: none !important;
    text-align: start !important;
    overflow-wrap: anywhere !important;
    animation: none !important;
    transition: none !important;
  }
  [data-senior] :is(h1, h1 *) { font-size: max(1.8rem, var(--reader-font-size, 1rem)) !important; line-height: 1.6 !important; }
  [data-senior] :is(h2, h2 *) { font-size: max(1.4rem, var(--reader-font-size, 1rem)) !important; }
  [data-senior] p { margin-block-end: max(1em, var(--reader-paragraph-spacing, 1em)) !important; }
  [data-senior] :where(a, button, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea, summary) {
    min-inline-size: 56px !important;
    min-block-size: 56px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    scroll-margin-block: 16px !important;
  }
  [data-senior] a { text-decoration: underline !important; text-underline-offset: .18em !important; text-decoration-thickness: .1em !important; }
  [data-senior] :is(.av-brand, .av-primary a, .av-account a, .av-location a, .av-footer a, .av-skip, .category-nav a, .page-nav a, .tournament-tabs a, .management-tabs a, .tournaments-pagination a, .back-to-tournaments, .arena-back, .av-help-page > a, .av-help-page section > a) {
    display: inline-flex !important;
    align-items: center !important;
  }
  [data-senior] label:has(input:is([type="checkbox"], [type="radio"])) { min-height: 56px !important; padding: 12px !important; }
  [data-senior] :where(.av-surface, .av-primary, .tournament-tabs, .management-tabs, .category-nav, .page-nav, .tournaments-pagination, .back-to-tournaments, .arena-back),
  [data-senior] :where(.av-surface, .av-primary, .tournament-tabs, .management-tabs, .category-nav, .page-nav, .tournaments-pagination) * {
    color: var(--nav-ink) !important;
    background-color: var(--nav-surface) !important;
    background-image: none !important;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
    text-shadow: none !important;
  }
  [data-senior] :is(a, button, input, select, textarea, summary) {
    color: var(--nav-link) !important;
    background-color: var(--nav-surface) !important;
    background-image: none !important;
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  [data-senior] :is(.tournament-directory-card, .schedule-card) { display: grid !important; min-inline-size: 0 !important; }
  [data-senior] :is(a, button) :is(span, strong, small, b) { color: inherit !important; background-color: transparent !important; }
  [data-senior] .av-primary a { min-inline-size: 64px !important; min-block-size: 64px !important; }
  [data-senior] :is(.av-links, .av-account, .av-search, .av-search-controls, .tournament-tabs, .management-tabs, .category-nav, .page-nav, .tournaments-pagination) { gap: 12px !important; }
  [data-senior] .registration-management-actions { gap: 12px !important; }
  [data-senior] :is(.tournament-tabs, .management-tabs, .category-nav, .page-nav) { display: flex; flex-wrap: wrap !important; overflow: visible !important; padding: 12px !important; }
  [data-senior] :is(.tournament-tabs, .management-tabs) button { flex: 1 1 160px !important; height: auto !important; }
  [data-senior] :is(a, button):hover { background-color: var(--nav-state) !important; }
  [data-senior] :is([aria-current]:not([aria-current="false"]), [aria-selected="true"]) { border-block-end: 4px solid var(--nav-link) !important; font-weight: 750 !important; }
  [data-senior] :focus-visible { outline: 3px solid var(--nav-focus) !important; outline-offset: 3px !important; box-shadow: 0 0 0 3px var(--nav-surface) !important; }
  [data-senior] .av-skip { transform: translateY(-200%) !important; }
  [data-senior] .av-skip:focus { transform: none !important; }
  [data-senior] :is(.av-header, .av-location, .av-footer, .av-primary) { box-sizing: border-box !important; }
  [data-senior] :is(.av-search, .av-search-controls, .av-header, .av-links) > * { min-width: 0; }
  [data-senior] .av-help-panel { background: var(--nav-surface) !important; color: var(--nav-ink) !important; }
  [data-senior] :is(.av-help-page, .av-help-page p) { color: var(--nav-ink) !important; }
  [data-senior] .av-help-page { background: var(--nav-surface) !important; }
  @media (max-width: 639px) {
    [data-senior] :is(.av-brand, .av-account) { overflow-wrap: anywhere !important; }
    [data-senior] .av-brand img { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  }
  @media (forced-colors: active) {
    :where([data-senior], [data-senior] *) {
      --nav-ink: CanvasText !important;
      --nav-link: LinkText !important;
      --nav-surface: Canvas !important;
      --nav-state: Canvas !important;
      --nav-line: CanvasText !important;
      --nav-focus: Highlight !important;
      --nav-danger: CanvasText !important;
    }
  }
}

@layer utilities {
  [hidden] { display: none !important; }
}