:root {
  --senior-focus: #174ea6;
  --senior-surface: #ffffff;
  --senior-ink: #111827;
  --senior-muted: #374151;
  --senior-border: rgba(17, 24, 39, 0.22);
}

.senior-mode-toggle {
  align-items: center;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(30, 41, 59, 0.14);
  border-radius: 0.55rem;
  color: #172033;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  justify-content: center;
  min-height: 2.55rem;
  padding: 0.5rem 0.78rem;
  white-space: nowrap;
}

.senior-mode-toggle[aria-pressed="true"] {
  background: #174ea6;
  border-color: #174ea6;
  color: #fff;
}

.site-header__inner.has-senior-mode-toggle,
.site-header__inner:has(.senior-mode-toggle) {
  grid-template-columns: minmax(230px, 1fr) auto auto auto;
}

.site-header__inner > .senior-mode-toggle,
body.bg-ink header:has(nav) .senior-mode-toggle {
  justify-self: end;
}

body.bg-ink header:has(nav) .container-safe > .flex {
  grid-template-columns: minmax(230px, 1fr) auto auto auto !important;
}

body.bg-ink header:has(nav) .senior-mode-toggle {
  grid-column: 3;
}

body.bg-ink header:has(nav) .container-safe > .flex > div:last-child > div {
  grid-column: 4 !important;
}

html.senior-mode {
  font-size: 112%;
  scroll-behavior: auto;
}

html.senior-mode body {
  color: var(--senior-ink);
  line-height: 1.68;
}

html.senior-mode *,
html.senior-mode *::before,
html.senior-mode *::after {
  animation-duration: 0.001ms !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
}

html.senior-mode a:focus-visible,
html.senior-mode button:focus-visible,
html.senior-mode input:focus-visible,
html.senior-mode select:focus-visible,
html.senior-mode textarea:focus-visible {
  outline: 4px solid rgba(23, 78, 166, 0.42) !important;
  outline-offset: 3px !important;
}

html.senior-mode .main-nav a,
html.senior-mode .lang-switch button,
html.senior-mode .senior-mode-toggle,
html.senior-mode .home-button,
html.senior-mode .daily-link,
html.senior-mode .senior-card__link,
html.senior-mode .routine-step__button,
html.senior-mode .routine-step__link,
html.senior-mode body.bg-ink .btn,
html.senior-mode body.bg-ink .btn-tab {
  font-size: 1.08rem !important;
  min-height: 3rem !important;
  padding: 0.68rem 0.92rem !important;
}

html.senior-mode .brand__tagline,
html.senior-mode .home-lead,
html.senior-mode .home-visual__caption,
html.senior-mode .game-link p,
html.senior-mode .senior-page p,
html.senior-mode .senior-page li {
  color: var(--senior-muted) !important;
  font-size: 1.12rem;
}

html.senior-mode .game-link,
html.senior-mode .senior-card,
html.senior-mode .routine-step,
html.senior-mode body.bg-ink .card,
html.senior-mode body.bg-ink .rounded-2xl.border,
html.senior-mode body.bg-ink .rounded-xl.border {
  background: var(--senior-surface) !important;
  border-color: var(--senior-border) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08) !important;
}

html.senior-mode .home-kicker,
html.senior-mode .senior-kicker,
html.senior-mode .routine-kicker {
  color: var(--senior-focus) !important;
}

html.senior-mode .home-button--primary,
html.senior-mode .daily-link--primary,
html.senior-mode .senior-card__link,
html.senior-mode .routine-step__button,
html.senior-mode body.bg-ink .btn-primary,
html.senior-mode body.bg-ink .bg-primary {
  background: var(--senior-focus) !important;
  border-color: var(--senior-focus) !important;
  color: #fff !important;
}

html.senior-mode .sudoku-cell {
  color: #111827;
  font-size: clamp(1.6rem, 5.4vw, 3.45rem);
  font-weight: 620;
}

html.senior-mode .sudoku-cell.is-user {
  color: #174ea6;
  font-weight: 720;
}

html.senior-mode .quick-number-pad button {
  color: #174ea6;
  font-size: 1.65rem;
  font-weight: 760;
}

@media (max-width: 1040px) {
  .site-header__inner.has-senior-mode-toggle,
  .site-header__inner:has(.senior-mode-toggle),
  body.bg-ink header:has(nav) .container-safe > .flex {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .senior-mode-toggle {
    flex: 0 0 auto;
  }

  .site-header__inner > .senior-mode-toggle,
  body.bg-ink header:has(nav) .senior-mode-toggle {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
  }

  body.bg-ink header:has(nav) .container-safe > .flex > div:last-child > div {
    grid-column: 2 !important;
  }
}

@media (max-width: 640px) {
  html.senior-mode {
    font-size: 108%;
  }

  .senior-mode-toggle {
    font-size: 0.95rem;
    min-height: 2.35rem;
    padding: 0.45rem 0.65rem;
  }
}