/* Additive v2 layout. Both the link and these rules exclude phones and print. */
@media screen and (min-width: 768px) {
  html.v2-shell { --v2-wide-width: 1180px; }
  html.v2-shell main {
    width: min(100%, var(--v2-wide-width));
    padding: 32px 32px calc(var(--v2-bottom-nav-height) + env(safe-area-inset-bottom) + 32px);
  }
  html.v2-shell .bottom-nav {
    padding-inline: max(24px, calc((100vw - var(--v2-wide-width)) / 2 + 32px));
  }
  html.v2-shell .nav-item { font-size: 14px; }
  html.v2-shell .v2-brand-copy strong { font-size: 20px; }
  html.v2-shell .v2-brand-copy strong span { font-size: 16px; }
  html.v2-shell .v2-brand-copy small { font-size: 12px; }
  html.v2-shell .v2-primary-topbar { padding-bottom: 24px; }
  html.v2-shell .home-child-name { max-width: 140px; }
  html.v2-shell .home-child-menu { max-height: min(480px, 70dvh); overflow-y: auto; }
  html.v2-shell .view > *,
  html.v2-shell .v2-report-card > *,
  html.v2-shell .v2-profile-screen > *,
  html.v2-shell .v2-wrongbook-current > * { min-width: 0; }

  /* The old absolute-positioned lion crossed the copy at tablet widths. */
  html.v2-shell .v2-public-landing.v2-only:not(.hidden) {
    width: min(100%, var(--v2-wide-width));
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    align-content: start;
    gap: 24px;
    padding: 36px 40px;
  }
  html.v2-shell .v2-public-landing > * { min-width: 0; grid-column: auto; grid-row: auto; }
  html.v2-shell .v2-public-brand { grid-column: 1 / -1; }
  html.v2-shell .v2-public-hero {
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    align-items: center;
    gap: 20px;
    margin: 0;
    overflow: visible;
  }
  html.v2-shell .v2-public-hero > div { width: auto; min-width: 0; padding: 0; }
  html.v2-shell .v2-public-hero h1 { font-size: 30px; line-height: 1.4; }
  html.v2-shell .v2-public-hero h1 strong { font-size: 36px; line-height: 1.4; }
  html.v2-shell .v2-public-hero p { width: auto; font-size: 15px; }
  html.v2-shell .v2-public-hero img {
    position: static;
    width: 180px;
    height: 180px;
    margin: 0;
    object-fit: contain;
  }
  html.v2-shell .v2-public-feedback { grid-column: auto; grid-row: auto; margin: 0; }
  html.v2-shell .v2-public-trust { gap: 16px; margin: 0; }
  html.v2-shell .v2-public-trust strong { font-size: 14px; }
  html.v2-shell .v2-public-trust small { font-size: 12px; white-space: normal; }
  html.v2-shell .v2-public-actions { margin: 0; }

  /* Forms and one-question-at-a-time screens retain a readable line length. */
  html.v2-shell .v2-auth-screen {
    width: min(calc(100% - 64px), 640px);
    min-height: calc(100dvh - 64px);
    margin: 32px auto;
    padding: 32px 40px;
    border: 1px solid var(--v2-color-line);
    border-radius: 28px;
    box-shadow: var(--v2-shadow-card);
  }
  html.v2-shell .v2-auth-screen > * { flex-shrink: 0; }
  html.v2-shell .v2-auth-agreement { position: static; margin-top: auto; padding-top: 28px; white-space: normal; }
  html.v2-shell .v2-phone-heading { grid-template-columns: minmax(0, 1fr) 112px; }
  html.v2-shell .v2-onboarding-screen,
  html.v2-shell .v2-diagnostic-screen { width: min(100%, 800px); padding: 32px 40px; }
  html.v2-shell.v2-practice-active main { width: min(100%, 860px); padding: 0; }
  html.v2-shell .v2-practice-screen,
  html.v2-shell .v2-practice-complete { padding: 32px 40px; }
  html.v2-shell .v2-practice-question-card { padding: 28px; }
  html.v2-shell .v2-practice-question-card h2 { font-size: 22px; }
  html.v2-shell .v2-practice-complete-hero,
  html.v2-shell .v2-practice-complete-hero.has-long-topic { height: auto; min-height: 250px; margin-top: 32px; padding: 12px 230px 24px 0; }
  html.v2-shell .v2-practice-complete-hero h2,
  html.v2-shell .v2-practice-complete-hero.has-long-topic h2 { width: 100%; min-height: 0; display: block; overflow: visible; font-size: 30px; -webkit-line-clamp: unset; }
  html.v2-shell .v2-practice-complete-hero img,
  html.v2-shell .v2-practice-complete-hero.has-long-topic img { width: 210px; height: 210px; right: 0; bottom: 16px; }
  html.v2-shell .v2-practice-result-card { margin-top: 0; }

  /* Secondary pages must not leave a second interactive page visible beside them. */
  html.v2-shell.v2-growth-active main,
  html.v2-shell.v2-growth-active .bottom-nav,
  html.v2-shell.v2-report-plan-active main,
  html.v2-shell.v2-report-plan-active .bottom-nav,
  html.v2-shell.v2-wrongbook-plan-active main,
  html.v2-shell.v2-wrongbook-plan-active .bottom-nav { visibility: hidden; }
  html.v2-shell .v2-growth-center,
  html.v2-shell .v2-report-plan,
  html.v2-shell .v2-wrongbook-plan {
    width: min(100%, 880px);
    height: 100dvh;
    min-height: 0;
    inset: 0;
    margin: 0 auto;
    transform: none;
    padding: 28px 36px;
    overflow-y: auto;
    box-shadow: 0 0 0 100vmax rgba(44, 31, 22, .16);
  }
  html.v2-shell .v2-growth-center > *,
  html.v2-shell .v2-report-plan > *,
  html.v2-shell .v2-wrongbook-plan > * { flex-shrink: 0; min-width: 0; }
  html.v2-shell .v2-growth-hero p { white-space: normal; }
  html.v2-shell .v2-wrongbook-plan-hero h2 { max-width: none; }
  html.v2-shell .v2-wrongbook-plan-hero,
  html.v2-shell .v2-report-plan-hero { min-height: 170px; }
  html.v2-shell .v2-profile-child-copy h2 { overflow-wrap: anywhere; line-height: 1.3; }
  html.v2-shell .v2-profile-child-copy p,
  html.v2-shell .v2-profile-child-copy > span { white-space: normal; }

  /* Center dialogs on wide screens and keep every action reachable when short. */
  html.v2-shell .v2-sheet-backdrop,
  html.v2-shell .v2-profile-sheet,
  html.v2-shell .v2-practice-details-backdrop,
  html.v2-shell .v2-growth-record-sheet { align-items: center; padding: 24px; }
  html.v2-shell .v2-growth-record-sheet { position: fixed; }
  html.v2-shell .v2-sheet,
  html.v2-shell .v2-profile-sheet > article,
  html.v2-shell .v2-growth-record-sheet > article,
  html.v2-shell .v2-practice-details { max-height: calc(100dvh - 48px); overflow-y: auto; border-radius: 24px; }
  html.v2-shell #settingsModal.v2-account-security-active { padding: 24px; }
  html.v2-shell #settingsModal.v2-account-security-active > .settings-modal-box {
    width: min(100%, 760px);
    max-width: 760px !important;
    height: calc(100dvh - 48px);
    min-height: 0;
    max-height: calc(100dvh - 48px) !important;
    border: 1px solid var(--v2-color-line);
    border-radius: 24px;
  }
  html.v2-shell #settingsModal.v2-account-security-active #settingsBody { height: 100%; }
  html.v2-shell .v2-account-security { padding: 24px 32px; }
  html.v2-shell .v2-security-row { min-height: 58px; }
  html.v2-shell .v2-security-row > strong { font-size: 14px; }
  html.v2-shell .v2-security-row > small { font-size: 12px; }
}

@media screen and (min-width: 1024px) {
  /* Same DOM and reading order; only layout changes at the wide breakpoint. */
  html.v2-shell:not(.v2-practice-active) #view-home.active {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
    grid-template-rows: auto auto max-content 1fr;
    align-items: start;
    column-gap: 24px;
  }
  html.v2-shell #view-home > * { grid-column: 1 / -1; }
  html.v2-shell #view-home > #smartPlanCard { grid-column: 1; grid-row: 3 / 5; }
  html.v2-shell #view-home > #manualGenerateDetails { grid-column: 2; grid-row: 3; }
  html.v2-shell #view-home > #manualGenerateDetails[open] { grid-column: 1 / -1; grid-row: 5; }
  html.v2-shell #view-home > #v2WeeklyProgress { grid-column: 2; grid-row: 4; margin: 0; }
  html.v2-shell .v2-weekly-progress { padding: 24px; }
  html.v2-shell .v2-week-head { flex-wrap: wrap; }
  html.v2-shell .v2-week-head strong { font-size: 16px; }
  html.v2-shell .v2-week-day b { width: 34px; height: 34px; font-size: 13px; }
  html.v2-shell .v2-week-day small { font-size: 11px; }
  html.v2-shell #formCard .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  html.v2-shell .v2-public-landing.v2-only:not(.hidden) {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: 48px;
    row-gap: 28px;
    padding-block: 48px;
  }
  html.v2-shell .v2-public-hero { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr) 140px; gap: 8px; }
  html.v2-shell .v2-public-hero img { width: 140px; height: 140px; }
  html.v2-shell .v2-public-hero h1 { font-size: 26px; }
  html.v2-shell .v2-public-hero h1 strong { font-size: 32px; }
  html.v2-shell .v2-public-feedback { grid-column: 2; grid-row: 2 / 5; align-self: start; padding: 28px; }
  html.v2-shell .v2-public-trust { grid-column: 1; grid-row: 3; }
  html.v2-shell .v2-public-actions { grid-column: 1; grid-row: 4; }

  html.v2-shell .v2-wrongbook-current {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
    column-gap: 24px;
    align-items: start;
  }
  html.v2-shell .v2-wrongbook-current > * { grid-column: 1; }
  html.v2-shell .v2-wrongbook-current > .v2-wrongbook-hero { grid-column: 1 / -1; }
  html.v2-shell .v2-wrongbook-all { grid-column: 2; grid-row: 2 / span 4; margin-top: 16px; padding: 24px; border: 1px solid var(--v2-color-line); border-radius: 20px; background: #fff; }
  html.v2-shell .v2-wrongbook-all h2 { font-size: 17px; }
  html.v2-shell .v2-wrongbook-subject { min-height: 64px; }
  html.v2-shell .v2-wrongbook-detail p { width: 380px; }

  html.v2-shell .v2-report-screen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  html.v2-shell .v2-report-meta,
  html.v2-shell .v2-report-card { grid-column: 1 / -1; }
  html.v2-shell .v2-report-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 32px;
    align-items: start;
    margin: 0;
    padding: 28px;
  }
  html.v2-shell .v2-report-summary { grid-column: 1; grid-row: 1; min-height: 136px; padding-top: 16px; padding-right: 145px; }
  html.v2-shell .v2-report-summary > img { right: 0; bottom: 0; width: 140px; height: 140px; }
  html.v2-shell .v2-report-metrics { grid-column: 1; grid-row: 2; margin: 0; }
  html.v2-shell .v2-report-insight { grid-column: 1; grid-row: 3; margin: 0; }
  html.v2-shell .v2-report-history-heading { grid-column: 2; grid-row: 1; margin: 0; }
  html.v2-shell .v2-report-card > .v2-report-session-list { grid-column: 2; grid-row: 1 / 4; margin-top: 40px; }
  html.v2-shell .v2-report-session { min-height: 68px; }
  html.v2-shell .v2-report-session-copy strong,
  html.v2-shell .v2-report-history-heading h3 { font-size: 14px; }
  html.v2-shell .v2-report-session-copy small,
  html.v2-shell .v2-report-insight p,
  html.v2-shell .v2-report-meta { font-size: 12px; }
  html.v2-shell .v2-report-primary,
  html.v2-shell .v2-report-secondary { min-height: 52px; margin: 0; }

  html.v2-shell .v2-profile-screen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }
  html.v2-shell .v2-profile-screen > h1 { grid-column: 1 / -1; }
  html.v2-shell .v2-profile-child-card { grid-column: 1; grid-row: 2; margin: 0; padding: 24px; }
  html.v2-shell .v2-growth-entry { grid-column: 1; grid-row: 3 / 5; margin: 0; min-height: 160px; }
  html.v2-shell .v2-profile-menu { grid-column: 2; grid-row: 2; margin: 0; padding: 12px; }
  html.v2-shell .v2-profile-menu :is(button, a) { min-height: 76px; }
  html.v2-shell .v2-profile-menu strong { font-size: 15px; }
  html.v2-shell .v2-profile-menu small { font-size: 12px; }
  html.v2-shell .v2-parent-account { grid-column: 2; grid-row: 3; margin: 0; border: 1px solid var(--v2-color-line); border-radius: 18px; background: #fff; padding: 14px; }

  html.v2-shell .v2-growth-center.v2-only:not(.hidden) {
    width: min(100%, var(--v2-wide-width));
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    align-items: start;
    gap: 20px 24px;
  }
  html.v2-shell .v2-growth-header,
  html.v2-shell .v2-growth-title,
  html.v2-shell .v2-growth-hero { grid-column: 1 / -1; }
  html.v2-shell .v2-growth-week { grid-column: 1; grid-row: 4; margin: 0; }
  html.v2-shell .v2-growth-goal { grid-column: 1; grid-row: 5; margin: 0; }
  html.v2-shell .v2-growth-medals { grid-column: 2; grid-row: 4 / 6; margin: 0; }
  html.v2-shell .v2-growth-record-button { grid-column: 1 / -1; margin: 0; }
}