/* A full page can have a comfortable interior. Keep app-content as the only
   scrolling pane; these desktop rules do not change the mobile keyboard flow. */
.app-header .app-desktop-link { display: none; }

@media (min-width: 1000px) {
  :root {
    --desktop-page-width: 1280px;
    --desktop-content-width: 1216px;
  }

  .app-shell {
    background: #eaf5ff;
  }

  .app-shell > .app-header {
    min-height: 76px;
    gap: 16px;
    padding: 12px max(32px, calc((100% - var(--desktop-content-width)) / 2));
  }

  .app-header .teacher-identity {
    gap: 0;
  }

  .app-header .teacher-identity img,
  .app-header #app-subtitle {
    display: none;
  }

  .app-header .teacher-identity strong {
    font-size: 24px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .app-header .ai-badge {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: inherit;
    vertical-align: baseline;
    color: #1672e8;
  }

  .app-header .app-navigation-button,
  .app-header .app-course-button {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 14px;
    border-radius: 10px;
  }

  .app-shell > .app-navigation {
    padding-inline: max(32px, calc((100% - var(--desktop-content-width)) / 2));
    background: #eaf5ff;
    border-bottom: 0;
  }

  .app-navigation button,
  .app-navigation .app-breadcrumb-current {
    min-height: 44px;
    font-size: 14px;
  }

  .app-shell > .app-progress {
    height: 2px;
    background: #dceaf6;
  }

  .app-shell > .app-content {
    width: 100%;
    max-width: var(--desktop-page-width);
    align-self: center;
    margin-inline: auto;
    padding: 28px 32px 40px;
    scroll-padding-top: 20px;
  }

  .app-content > h2 {
    margin-top: 8px;
    font-size: 30px;
    line-height: 1.3;
  }

  .app-content .intro {
    font-size: 16px;
    line-height: 1.75;
  }

  .app-content .screen-label {
    font-size: 13px;
    letter-spacing: .4px;
    color: #2266a4;
  }

  .app-content .quiet-note {
    font-size: 14px;
    line-height: 1.6;
  }

  /* Single-purpose screens use the same grid but do not fill a catalog row. */
  .app-shell > .app-content:is([data-view="level"], [data-view="goal"], [data-view="about"]) {
    max-width: 824px;
  }

  .app-shell > .app-content[data-view="alphabet"] {
    max-width: 1040px;
  }

  .app-content:is([data-view="level"], [data-view="goal"]) .choice strong {
    font-size: 16px;
  }

  .app-content:is([data-view="level"], [data-view="goal"]) .choice small {
    font-size: 14px;
  }

  .app-content:is([data-view="level"], [data-view="goal"], [data-view="about"]) .full-button {
    width: fit-content;
    max-width: 100%;
    min-width: 240px;
    min-height: 48px;
    gap: 24px;
    font-size: 16px;
  }

  .app-content[data-view="about"] .orli-tip {
    font-size: 16px;
    line-height: 1.75;
  }

  .app-content[data-view="alphabet"] .alphabet-name {
    font-size: 15px;
  }

  .app-content[data-view="alphabet"] .alphabet-note {
    max-width: 760px;
    font-size: 16px;
  }

  .app-content .course-links {
    justify-content: flex-start;
    gap: 12px;
  }

  .app-content .course-links button {
    min-height: 44px;
    font-size: 14px;
  }

  .app-content button:focus-visible,
  .app-header button:focus-visible,
  .app-content a:focus-visible {
    outline: 3px solid #69a7e9;
    outline-offset: 3px;
  }
}

@media (min-width: 1180px) {
  .app-header .app-desktop-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 8px;
    background: transparent;
    color: #2166ad;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }

  .app-header .app-desktop-link:hover { background: #edf5ff; }
}