@layer pages {
  body.future-ui.shell-auth main h1,
  body.future-ui.shell-learner main h1 {
    color: var(--mf-ink-950);
    text-wrap: balance;
  }

  body.future-ui.shell-auth main :where(.auth-card, .panel) > :first-child,
  body.future-ui.shell-learner .today-learning-card > :first-child {
    margin-block-start: 0;
  }

  body.future-ui.shell-auth form :where(.button.primary, button.primary) {
    width: 100%;
    justify-content: center;
  }

  body.future-ui.shell-learner .progress-line,
  body.future-ui.shell-learner .progress-bar {
    min-width: 0;
  }

  body.future-ui.shell-learner .progress-bar > span {
    background: linear-gradient(90deg, var(--mf-blue-600), var(--mf-cyan-400));
  }

  body.future-ui.shell-learner :where(.route-card, .record-card, .goal-card) h3 {
    overflow-wrap: break-word;
    line-break: strict;
  }
}

/* Notification settings uses an unlayered compatibility bridge because the
 * legacy form foundation is intentionally unlayered. Keep this page-specific
 * and loaded after style.css so native checkbox sizing cannot become a field. */
body.future-ui.shell-learner .notification-settings {
  width: min(100%, 980px);
  margin: 28px auto 60px;
}

body.future-ui.shell-learner .notification-settings > h1 {
  margin: 8px 0 6px;
  font-size: clamp(30px, 4vw, 44px);
}

body.future-ui.shell-learner .notification-settings > p {
  margin: 0;
  color: var(--mf-text-2);
}

body.future-ui.shell-learner .notification-form {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

body.future-ui.shell-learner .notification-toggle {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 76px;
  padding: 14px 16px;
  border: 1px solid var(--mf-line);
  border-radius: 16px;
  background: var(--mf-surface-0);
  color: var(--mf-text-1);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

body.future-ui.shell-learner .notification-toggle:hover {
  border-color: var(--mf-blue-500);
  background: var(--mf-info-soft);
}

body.future-ui.shell-learner .notification-toggle:focus-within {
  border-color: var(--mf-blue-600);
  box-shadow: var(--mf-focus-ring);
}

body.future-ui.shell-learner .notification-toggle-master {
  min-height: 84px;
  border-color: #b8cffd;
  background: linear-gradient(135deg, #f1f6ff, #f8fbff);
}

body.future-ui.shell-learner .notification-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  accent-color: var(--mf-blue-600);
}

body.future-ui.shell-learner .notification-toggle > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.future-ui.shell-learner .notification-toggle strong {
  color: var(--mf-ink-950);
  font-size: 15px;
  line-height: 1.45;
}

body.future-ui.shell-learner .notification-toggle small {
  color: var(--mf-text-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
}

body.future-ui.shell-learner .notification-topics {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--mf-line);
  border-radius: 20px;
  background: var(--mf-surface-1);
}

body.future-ui.shell-learner .notification-topics > legend {
  padding: 0 8px;
  color: var(--mf-ink-950);
  font-size: 15px;
  font-weight: 900;
}

body.future-ui.shell-learner .notification-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.future-ui.shell-learner .notification-schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.future-ui.shell-learner .notification-schedule-grid > label {
  display: grid;
  gap: 7px;
  color: var(--mf-ink-950);
  font-size: 13px;
  font-weight: 850;
}

body.future-ui.shell-learner .notification-schedule-grid :where(input, select) {
  margin-top: 0;
}

body.future-ui.shell-learner .notification-form > .button {
  width: fit-content;
  min-width: 190px;
  justify-content: center;
}

body.future-ui.shell-learner .notification-test-form {
  padding-top: 18px;
  border-top: 1px solid var(--mf-line);
}

@media (max-width: 760px) {
  body.future-ui.shell-learner .notification-topic-grid,
  body.future-ui.shell-learner .notification-schedule-grid {
    grid-template-columns: 1fr;
  }

  body.future-ui.shell-learner .notification-form > .button {
    width: 100%;
  }
}