/*
 * Manabi Future UI — Phase 3–9
 * Child/Family, Account/Dashboard, Marketing/Commerce, Admin,
 * Reading/System/Ops and the final compatibility boundary.
 */

@layer components {
  body.future-ui :where(.panel, .admin-card, .side-card, .price-card, .course-card, .family-child-card) {
    border-color: var(--mf-line);
    border-radius: var(--mf-radius-lg);
    box-shadow: var(--mf-shadow-1);
  }

  body.future-ui :where(.panel, .admin-card, .side-card, .price-card, .family-child-card) {
    background: var(--mf-surface-0);
  }

  body.future-ui :where(label:not(.check), .mf-form-field) {
    min-width: 0;
  }

  body.future-ui :where(label:not(.check), .mf-form-field, form) > :where(
    input:not([type]),
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    textarea,
    select
  ) {
    width: 100%;
    min-width: 0;
    min-height: var(--mf-control-h);
    border-color: var(--mf-line-strong);
    border-radius: var(--mf-radius-sm);
  }

  body.future-ui :where(input[type="checkbox"], input[type="radio"]) {
    width: 1.25rem;
    height: 1.25rem;
    min-height: 0;
    padding: 0;
    flex: 0 0 auto;
  }

  body.future-ui :where(input, textarea, select)[aria-invalid="true"] {
    border-color: var(--mf-red-600);
    background: var(--mf-danger-soft);
  }

  .mf-field-error {
    display: flex;
    align-items: flex-start;
    gap: var(--mf-space-2);
    margin-block-start: var(--mf-space-2);
    color: var(--mf-red-700);
    font-size: .9rem;
    font-weight: 700;
  }

  .mf-form-status {
    min-height: 1.4em;
    color: var(--mf-text-2);
    font-size: .9rem;
  }

  body.future-ui :where(button, .button, input[type="submit"]) {
    min-height: var(--mf-control-h);
    line-height: 1.35;
  }

  body.future-ui :where(button, .button, input[type="submit"])[aria-busy="true"] {
    cursor: progress;
  }

  body.future-ui :where(.alert, .empty-state, .future-status-panel) {
    line-height: 1.7;
  }

  body.future-ui :where(.alert.error, .alert.warning, .alert.success, .alert.info) {
    border-inline-start-width: 4px;
  }

  body.future-ui .alert.error { border-inline-start-color: var(--mf-red-600); }
  body.future-ui .alert.warning { border-inline-start-color: var(--mf-orange-600); }
  body.future-ui .alert.success { border-inline-start-color: var(--mf-green-600); }
  body.future-ui .alert.info { border-inline-start-color: var(--mf-blue-600); }

  .mf-skeleton {
    overflow: hidden;
    border-radius: var(--mf-radius-sm);
    background: var(--mf-surface-2);
  }

  .mf-skeleton::after {
    display: block;
    width: 42%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--mf-surface-0), transparent);
    content: "";
    animation: mf-skeleton-shift 1.25s infinite var(--mf-ease);
  }

  @keyframes mf-skeleton-shift {
    from { transform: translateX(-110%); }
    to { transform: translateX(340%); }
  }

  .mf-toast-center {
    position: fixed;
    inset-inline: auto max(16px, env(safe-area-inset-right));
    inset-block: auto calc(18px + var(--mf-fixed-clearance));
    z-index: var(--mf-layer-dialog);
    display: grid;
    gap: var(--mf-space-2);
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
  }

  .mf-toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--mf-space-3);
    padding: var(--mf-space-4);
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-md);
    background: var(--mf-surface-0);
    box-shadow: var(--mf-shadow-2);
    pointer-events: auto;
  }
}

@layer layouts {
  /* Phase 3 — Child and Family */
  body.future-ui.shell-child,
  body.future-ui.shell-child-auth {
    --mf-control-h: var(--mf-control-h-child);
    line-height: var(--mf-child-leading);
  }

  body.future-ui.shell-child .site-header,
  body.future-ui.shell-child-auth .site-header {
    min-height: var(--mf-header-h);
  }

  body.future-ui.shell-child .child-global-nav {
    position: sticky;
    inset-block-start: var(--mf-header-h);
    z-index: var(--mf-layer-sticky);
    min-height: var(--mf-child-nav-h);
    border-block-end: 1px solid var(--mf-line);
    background: color-mix(in srgb, var(--mf-surface-0) 94%, transparent);
    backdrop-filter: blur(16px);
  }

  body.future-ui.shell-child .child-global-nav-inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 760px);
    min-height: var(--mf-child-nav-h);
    margin-inline: auto;
    gap: var(--mf-space-2);
    padding: var(--mf-space-2);
  }

  body.future-ui.shell-child .child-global-nav a {
    display: flex;
    min-width: 0;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: var(--mf-space-2);
    border: 1px solid transparent;
    border-radius: var(--mf-radius-sm);
    color: var(--mf-text-2);
    font-weight: 850;
    text-align: center;
    text-decoration: none;
  }

  body.future-ui.shell-child .child-global-nav a.is-active {
    border-color: var(--mf-line);
    background: var(--mf-info-soft);
    color: var(--mf-blue-700);
  }

  body.future-ui.shell-child ruby {
    ruby-align: center;
    ruby-position: over;
    line-height: calc(1em + var(--mf-ruby-gap));
    white-space: nowrap;
  }

  body.future-ui.shell-child rt {
    color: var(--mf-text-2);
    font-size: var(--mf-ruby-size);
    font-weight: 700;
    line-height: 1;
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: keep-all;
  }

  body.future-ui.shell-child :where(button, .button, input, select, textarea, summary) {
    font-size: max(1rem, 16px);
  }

  .mf-child-auth-stepper {
    grid-column: 1 / -1;
    margin-block: 0 var(--mf-space-5);
  }

  .mf-child-auth-stepper ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mf-child-auth-stepper li {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--mf-space-1);
    color: var(--mf-text-2);
    font-size: .92rem;
    font-weight: 800;
    text-align: center;
  }

  .mf-child-auth-stepper li::before {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 2px solid var(--mf-line-strong);
    border-radius: 50%;
    background: var(--mf-surface-0);
    content: attr(data-step);
  }

  .mf-child-auth-stepper li + li::after {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 50%;
    z-index: -1;
    width: 100%;
    height: 2px;
    background: var(--mf-line);
    content: "";
  }

  .mf-child-auth-stepper li.is-current,
  .mf-child-auth-stepper li.is-complete {
    color: var(--mf-blue-700);
  }

  .mf-child-auth-stepper li.is-current::before,
  .mf-child-auth-stepper li.is-complete::before {
    border-color: var(--mf-blue-600);
    background: var(--mf-blue-600);
    color: var(--mf-text-inverse);
    box-shadow: var(--mf-focus-ring);
  }

  .child-login-shell[data-state="error"] .child-login-card {
    border-color: var(--mf-red-600);
  }

  .child-login-shell[data-state="pin"] .child-login-icon {
    box-shadow: var(--mf-shadow-focus);
  }

  body.future-ui.shell-child .child-home-quick-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mf-space-4);
  }

  body.future-ui.shell-child .child-home-quick-nav a {
    min-height: 136px;
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-lg);
    background: var(--mf-surface-0);
    box-shadow: var(--mf-shadow-1);
  }

  body.future-ui.shell-child .child-home-quick-nav a:first-child {
    border-color: var(--mf-blue-600);
    box-shadow: var(--mf-shadow-focus);
  }

  body.future-ui.shell-child .child-today-task:first-child {
    border-color: var(--mf-blue-600);
    box-shadow: var(--mf-shadow-focus);
  }

  body.future-ui.shell-family .container {
    width: min(100%, calc(var(--mf-content-wide) + 40px));
  }

  .mf-family-switcher {
    position: sticky;
    inset-block-start: calc(var(--mf-header-h) + var(--mf-sticky-gap));
    z-index: var(--mf-layer-sticky);
    display: flex;
    align-items: center;
    gap: var(--mf-space-2);
    margin-block: var(--mf-space-4) var(--mf-space-6);
    padding: var(--mf-space-3);
    overflow-x: auto;
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-md);
    background: color-mix(in srgb, var(--mf-surface-0) 95%, transparent);
    box-shadow: var(--mf-shadow-1);
    backdrop-filter: blur(16px);
  }

  .mf-family-switcher > strong {
    flex: 0 0 auto;
    margin-inline-end: var(--mf-space-2);
  }

  .mf-family-switcher a {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 44px;
    align-items: center;
    gap: var(--mf-space-2);
    padding-inline: var(--mf-space-4);
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-pill);
    background: var(--mf-surface-0);
    color: var(--mf-text-1);
    font-weight: 800;
    text-decoration: none;
  }

  .mf-family-switcher a[aria-current="true"] {
    border-color: var(--mf-blue-600);
    background: var(--mf-info-soft);
    color: var(--mf-blue-700);
  }

  .family-child-card[hidden] { display: none !important; }

  body.future-ui.shell-family .family-child-card {
    scroll-margin-block-start: var(--mf-sticky-top);
  }

  body.future-ui.shell-family :where(.family-outcome-grid article, .guardian-ring-card, .guardian-week-card, .guardian-plan-card) {
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-md);
    background: var(--mf-surface-0);
  }

  body.future-ui.shell-family .family-delete-account {
    border-color: color-mix(in srgb, var(--mf-red-600) 40%, var(--mf-line));
    background: var(--mf-danger-soft);
  }

  /* Phase 4 — Account and Dashboard */
  body.future-ui.shell-auth {
    background:
      radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--mf-blue-500) 16%, transparent), transparent 35%),
      radial-gradient(circle at 88% 22%, color-mix(in srgb, var(--mf-orange-500) 12%, transparent), transparent 32%),
      var(--mf-surface-1);
  }

  body.future-ui.shell-auth .site-header .site-nav-area {
    display: none;
  }

  body.future-ui.shell-auth .container {
    display: grid;
    width: min(100%, 980px);
    min-height: calc(100dvh - var(--mf-header-h));
    align-content: center;
    padding-block: clamp(28px, 6vw, 72px);
  }

  body.future-ui.shell-auth :where(.auth-shell, .login-shell, .register-shell, .password-shell, .panel) {
    width: min(100%, 680px);
    margin-inline: auto;
  }

  body.future-ui.shell-auth :where(.auth-card, .login-card, .register-card, .panel) {
    border: 1px solid var(--mf-line);
    background: color-mix(in srgb, var(--mf-surface-0) 96%, transparent);
    box-shadow: var(--mf-shadow-2);
  }

  body.future-ui.shell-auth form {
    display: grid;
    gap: var(--mf-space-4);
  }

  body.future-ui.shell-learner .dash-layout,
  body.future-ui.shell-learner .records-layout {
    align-items: start;
  }

  body.future-ui.shell-learner :where(.today-learning-card, .next-card, .goal-card, .record-card) {
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-lg);
    background: var(--mf-surface-0);
    box-shadow: var(--mf-shadow-1);
  }

  body.future-ui.shell-learner .today-learning-card {
    border-color: var(--mf-blue-600);
    box-shadow: var(--mf-shadow-focus);
  }

  body.future-ui.shell-learner :where(.stat-cards, .kpi-row) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  }

  /* Phase 5 — Commerce and Marketing */
  body.future-ui.shell-public :where(.course-hero, .pricing-hero, .feature-hero, .how-hero, .faq-hero) {
    width: min(100%, 900px);
    margin-inline: auto;
    padding-block: clamp(42px, 8vw, 100px) clamp(30px, 6vw, 72px);
    text-align: center;
  }

  body.future-ui.shell-public :where(.course-hero, .pricing-hero, .feature-hero, .how-hero, .faq-hero) h1 {
    max-width: 18em;
    margin-inline: auto;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.18;
    text-wrap: balance;
  }

  body.future-ui.shell-public :where(.course-hero, .pricing-hero, .feature-hero, .how-hero, .faq-hero) .lead {
    max-width: 48em;
    margin-inline: auto;
  }

  body.future-ui.shell-public :where(.course-card-grid, .pricing-grid, .feature-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }

  body.future-ui.shell-public :where(.course-card, .price-card) {
    min-width: 0;
    transition: border-color var(--mf-motion-fast) var(--mf-ease), box-shadow var(--mf-motion-fast) var(--mf-ease), transform var(--mf-motion-fast) var(--mf-ease);
  }

  body.future-ui.shell-public :where(.course-card, .price-card):hover {
    border-color: var(--mf-blue-500);
    box-shadow: var(--mf-shadow-2);
    transform: translateY(-2px);
  }

  body.future-ui.shell-public :where(.price-card.featured, .course-plan-card.featured) {
    border-color: var(--mf-blue-600);
    box-shadow: var(--mf-shadow-focus);
  }

  body.future-ui.shell-public .compare-table-wrap {
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-lg);
    background: var(--mf-surface-0);
    box-shadow: var(--mf-shadow-1);
  }

  body.future-ui.shell-public .compare-table :where(th, td) {
    min-width: 132px;
    line-height: 1.55;
    vertical-align: top;
  }

  body.future-ui.shell-public .compare-table :where(th, td):first-child {
    min-width: 180px;
  }

  body.future-ui.shell-public .cta-panel {
    border: 1px solid transparent;
    border-radius: var(--mf-radius-xl);
    background:
      linear-gradient(var(--mf-surface-0), var(--mf-surface-0)) padding-box,
      linear-gradient(125deg, var(--mf-blue-600), var(--mf-cyan-400), var(--mf-orange-500)) border-box;
    box-shadow: var(--mf-shadow-focus);
  }

  /* Phase 6 — Admin */
  body.future-ui.shell-admin .admin-shell {
    display: grid;
    grid-template-columns: var(--mf-admin-sidebar-w) minmax(0, 1fr);
    align-items: start;
  }

  body.future-ui.shell-admin .admin-sidebar {
    position: sticky;
    inset-block-start: calc(var(--mf-header-h) + var(--mf-sticky-gap));
    max-height: calc(100dvh - var(--mf-header-h) - (2 * var(--mf-sticky-gap)));
    overflow-y: auto;
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-lg);
    background: var(--mf-surface-0);
    box-shadow: var(--mf-shadow-1);
  }

  body.future-ui.shell-admin .admin-nav-contents a {
    min-height: var(--mf-control-h-admin);
    border-radius: var(--mf-radius-sm);
  }

  body.future-ui.shell-admin .admin-nav-contents a.active {
    background: var(--mf-info-soft);
    color: var(--mf-blue-700);
  }

  body.future-ui.shell-admin :where(.kpi-row, .admin-kpis) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  }

  body.future-ui.shell-admin :where(.table-scroll, .watcher-table-wrap) {
    overflow: auto;
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-md);
    background: var(--mf-surface-0);
    scrollbar-gutter: stable;
  }

  body.future-ui.shell-admin :where(.data-table, .admin-table, .watcher-table) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  body.future-ui.shell-admin :where(.data-table, .admin-table, .watcher-table) thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: var(--mf-surface-2);
    color: var(--mf-ink-800);
  }

  body.future-ui.shell-admin :where(.data-table, .admin-table, .watcher-table) :where(th, td) {
    padding: 11px 13px;
    border-block-end: 1px solid var(--mf-line);
    line-height: 1.5;
    text-align: start;
    vertical-align: top;
  }

  body.future-ui.shell-admin .user-directory-table td {
    vertical-align: middle;
  }

  .admin-command-trigger kbd {
    padding: 2px 6px;
    border: 1px solid var(--mf-line-strong);
    border-radius: 6px;
    background: var(--mf-surface-1);
    color: var(--mf-text-2);
    font: inherit;
    font-size: .72rem;
  }

  .mf-command-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--mf-layer-dialog) - 1);
    background: color-mix(in srgb, var(--mf-ink-950) 52%, transparent);
  }

  .mf-command-palette {
    position: fixed;
    inset-block-start: min(12vh, 110px);
    inset-inline-start: 50%;
    z-index: var(--mf-layer-dialog);
    width: min(620px, calc(100vw - 28px));
    max-height: min(72vh, 720px);
    padding: var(--mf-space-5);
    overflow: auto;
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-lg);
    background: var(--mf-surface-0);
    box-shadow: var(--mf-shadow-focus);
    transform: translateX(-50%);
  }

  /* Destructive confirmations must stay above fixed editors, sticky headers,
     navigation drawers and loading helpers. Native <dialog> uses the browser
     top layer; these values are the safe fallback for older browsers. */
  .mf-command-palette.mf-confirm-dialog {
    inset: 50% auto auto 50%;
    z-index: 2147483000;
    max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin: 0;
    overscroll-behavior: contain;
    transform: translate(-50%, -50%);
  }

  .mf-confirm-dialog[data-top-layer="fallback"][open] {
    display: block;
  }

  .mf-confirm-scrim {
    z-index: 2147482999;
  }

  .mf-confirm-dialog::backdrop {
    background: rgba(5, 18, 33, .76);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .mf-command-palette[hidden],
  .mf-command-scrim[hidden] { display: none !important; }

  .mf-command-palette header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--mf-space-4);
  }

  .mf-command-palette header h2 { margin-block: 4px var(--mf-space-4); }

  .mf-command-palette header button {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-sm);
    background: var(--mf-surface-1);
  }

  .mf-command-palette input { width: 100%; }

  .mf-command-palette nav {
    display: grid;
    gap: var(--mf-space-2);
    margin-block-start: var(--mf-space-4);
  }

  .mf-command-palette nav a {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: var(--mf-space-3);
    padding: var(--mf-space-3) var(--mf-space-4);
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-sm);
    color: var(--mf-text-1);
    font-weight: 800;
    text-decoration: none;
  }

  .mf-command-palette nav a:hover,
  .mf-command-palette nav a:focus-visible {
    border-color: var(--mf-blue-600);
    background: var(--mf-info-soft);
  }

  .mf-admin-action-queue {
    display: grid;
    gap: var(--mf-space-4);
    margin-block-end: var(--mf-space-5);
    padding: var(--mf-space-5);
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-lg);
    background: var(--mf-surface-0);
    box-shadow: var(--mf-shadow-1);
  }

  .mf-admin-action-queue > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mf-space-4);
  }

  .mf-admin-action-queue h2 { margin: 3px 0 0; }

  .mf-admin-action-queue ol {
    display: grid;
    gap: var(--mf-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mf-admin-action-queue li,
  .mf-action-empty {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--mf-space-3);
    padding: var(--mf-space-3) var(--mf-space-4);
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-md);
    background: var(--mf-surface-1);
  }

  .mf-admin-action-queue li[data-severity="critical"] { border-inline-start: 4px solid var(--mf-red-600); }
  .mf-admin-action-queue li[data-severity="warning"] { border-inline-start: 4px solid var(--mf-orange-600); }
  .mf-admin-action-queue li[data-severity="info"] { border-inline-start: 4px solid var(--mf-blue-600); }
  .mf-admin-action-queue li p,
  .mf-action-empty p { margin: 3px 0 0; color: var(--mf-text-2); }
  .mf-action-empty { grid-template-columns: auto minmax(0, 1fr); background: var(--mf-success-soft); }

  .mf-detail-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--mf-layer-dialog) - 1);
    background: color-mix(in srgb, var(--mf-ink-950) 48%, transparent);
  }

  .mf-detail-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: var(--mf-layer-dialog);
    width: min(520px, calc(100vw - 20px));
    padding: clamp(20px, 4vw, 34px);
    overflow-y: auto;
    border-inline-start: 1px solid var(--mf-line);
    background: var(--mf-surface-0);
    box-shadow: var(--mf-shadow-focus);
  }

  .mf-detail-drawer[hidden],
  .mf-detail-scrim[hidden] { display: none !important; }

  .mf-detail-drawer > header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--mf-space-4);
    padding-block-end: var(--mf-space-4);
    border-block-end: 1px solid var(--mf-line);
  }

  .mf-detail-drawer > header h2 { margin-block: 3px 0; }

  .mf-detail-drawer > header button {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-sm);
    background: var(--mf-surface-1);
  }

  .mf-detail-drawer-body {
    display: grid;
    gap: var(--mf-space-4);
    padding-block: var(--mf-space-5);
    line-height: 1.75;
  }

  .mf-detail-drawer-body .mf-detail-note {
    padding: var(--mf-space-4);
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-md);
    background: var(--mf-info-soft);
  }

  /* Phase 7 — Reading, System and Ops */
  body.future-ui.shell-reading .container {
    width: min(100%, calc(var(--mf-content-reading) + 40px));
  }

  .mf-reading-toc {
    position: sticky;
    inset-block-start: calc(var(--mf-header-h) + var(--mf-sticky-gap));
    z-index: var(--mf-layer-sticky);
    margin-block: var(--mf-space-4) var(--mf-space-8);
    padding: var(--mf-space-4);
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-md);
    background: color-mix(in srgb, var(--mf-surface-0) 96%, transparent);
    box-shadow: var(--mf-shadow-1);
    backdrop-filter: blur(14px);
  }

  .mf-reading-toc ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mf-space-2);
    margin: var(--mf-space-3) 0 0;
    padding: 0;
    list-style: none;
  }

  .mf-reading-toc a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding-inline: var(--mf-space-3);
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-pill);
    background: var(--mf-surface-0);
    color: var(--mf-text-1);
    font-size: .88rem;
    font-weight: 750;
    text-decoration: none;
  }

  body.future-ui.shell-reading main :where(article, section, .legal-shell) {
    line-height: var(--mf-reading-leading);
  }

  body.future-ui.shell-reading main :where(h2, h3) {
    scroll-margin-block-start: calc(var(--mf-header-h) + 120px);
    text-wrap: balance;
  }

  body.future-ui.shell-reading main p,
  body.future-ui.shell-reading main li {
    max-width: 78ch;
  }

  body.future-ui.shell-system .container,
  body.future-ui.shell-ops .container {
    display: grid;
    width: min(100%, 980px);
    min-height: calc(100dvh - var(--mf-header-h));
    align-content: center;
    padding-block: clamp(34px, 7vw, 90px);
  }

  body.future-ui.shell-system :where(.panel, .error-panel),
  body.future-ui.shell-ops :where(.panel, .setup-shell, .ops-shell) {
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-lg);
    background: var(--mf-surface-0);
    box-shadow: var(--mf-shadow-2);
  }
}

@layer utilities {
  [data-future-enhanced="true"] :where(h1, h2, h3) { text-wrap: balance; }

  body.future-ui [data-primary-action="true"] {
    box-shadow: var(--mf-shadow-focus);
  }

  body.future-ui.is-dialog-open { overflow: hidden; overscroll-behavior: none; }

  @media (max-width: 900px) {
    body.future-ui.shell-admin .admin-shell {
      grid-template-columns: 78px minmax(0, 1fr);
    }

    body.future-ui.shell-admin .admin-sidebar .admin-nav-label,
    body.future-ui.shell-admin .admin-sidebar .sidebar-foot,
    body.future-ui.shell-admin .admin-sidebar hr + a span {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    body.future-ui.shell-admin .admin-sidebar a {
      justify-content: center;
    }
  }

  @media (max-width: 760px) {
    body.future-ui.shell-child {
      --mf-child-nav-h: 64px;
    }

    body.future-ui.shell-child .child-global-nav a {
      flex-direction: column;
      gap: 2px;
      font-size: .78rem;
      line-height: 1.2;
    }

    body.future-ui.shell-child .child-home-quick-nav {
      grid-template-columns: 1fr;
    }

    body.future-ui.shell-child .child-home-quick-nav a {
      min-height: 92px;
    }

    .child-login-shell {
      grid-template-columns: 1fr;
    }

    .child-login-visual {
      text-align: center;
    }

    .mf-family-switcher {
      inset-block-start: calc(var(--mf-header-h) + var(--mf-sticky-gap));
      margin-inline: calc(-1 * max(14px, env(safe-area-inset-left)));
      border-inline: 0;
      border-radius: 0;
    }

    body.future-ui.shell-family :where(.family-child-columns, .guardian-progress-overview, .family-form-grid, .family-settings-grid) {
      grid-template-columns: 1fr;
    }

    body.future-ui.shell-admin .admin-shell {
      display: block;
    }

    body.future-ui.shell-admin .admin-sidebar {
      position: static;
      display: flex;
      max-height: none;
      margin-block-end: var(--mf-space-4);
      overflow-x: auto;
      overflow-y: hidden;
      border-radius: var(--mf-radius-md);
    }

    body.future-ui.shell-admin .admin-nav-contents {
      display: flex;
      min-width: max-content;
    }

    body.future-ui.shell-admin .admin-sidebar hr,
    body.future-ui.shell-admin .admin-sidebar > a,
    body.future-ui.shell-admin .admin-sidebar .sidebar-foot {
      display: none;
    }

    body.future-ui.shell-admin .admin-nav-contents a {
      min-width: 52px;
    }

    .admin-command-trigger kbd { display: none; }

    .mf-admin-action-queue li {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .mf-admin-action-queue li .button {
      grid-column: 2;
      justify-self: start;
    }

    .mf-reading-toc {
      position: relative;
      inset-block-start: auto;
    }

    .mf-reading-toc ol {
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-block-end: var(--mf-space-2);
    }

    .mf-reading-toc li { flex: 0 0 auto; }

    body.future-ui.shell-public :where(.course-card, .price-card):hover {
      transform: none;
    }
  }

  @media (max-width: 420px) {
    .mf-child-auth-stepper li { font-size: .76rem; }
    .mf-child-auth-stepper li::before { width: 30px; height: 30px; }
    .mf-child-auth-stepper li + li::after { inset-block-start: 14px; }
    .admin-command-trigger span { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mf-skeleton::after { animation: none; }
    body.future-ui.shell-public :where(.course-card, .price-card) { transition: none; }
  }

  @media (forced-colors: active) {
    .mf-family-switcher,
    .mf-reading-toc,
    .mf-command-palette,
    body.future-ui.shell-admin .admin-sidebar {
      border: 2px solid CanvasText;
    }
  }

  @media print {
    .child-global-nav,
    .mf-family-switcher,
    .mf-reading-toc,
    .admin-sidebar,
    .admin-command-trigger,
    .mf-command-palette,
    .mf-command-scrim,
    .mf-detail-drawer,
    .mf-detail-scrim,
    .mf-toast-center {
      display: none !important;
    }

    body.future-ui :where(.panel, .admin-card, .price-card, .course-card) {
      box-shadow: none !important;
    }
  }
}