/* screens/pages-desktop.css — desktop (>=1024px) layouts for the non-room pages; loaded after js-states.css, before desktop/*. */

/* Column wrappers are layout-neutral on mobile. */
.page-col {
  display: contents;
}

@media (min-width: 1024px) {
  .screen.page-wide:not(.screen-beamer):not(.screen--hero):not(.screen--login) {
    max-width: 1200px;
  }

  .page-wide > .hdr {
    padding-inline: var(--space-8, 32px);
  }

  .page-wide > .screen-body,
  .page-wide > form.screen-body {
    padding: var(--space-6, 24px) var(--space-8, 32px) var(--space-10, 40px);
    gap: var(--space-4, 16px);
  }

  .page-wide .sticky-cta {
    padding: 0;
    background: none;
    margin-top: 0;
  }

  /* centred single-card pages */
  .page-join > .screen-body,
  .page-narrow > .screen-body,
  .page-solo-setup > form.screen-body,
  .page-solo-summary > .screen-body {
    width: 100%;
    margin-inline: auto;
    max-width: 560px;
  }

  .page-join > .screen-body {
    max-width: 480px;
  }

  .page-narrow > .screen-body {
    max-width: 640px;
  }

  /* online_create: form column + category column */
  .page-create > .online-create-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: var(--space-4, 16px) var(--space-6, 24px);
    align-items: start;
  }

  .page-create .page-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
    min-width: 0;
  }

  .page-create .page-col--side {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .page-create .page-col--main {
    grid-column: 1;
  }

  .page-create .page-col--end {
    grid-row: 2;
  }

  /* solo_setup: centred card, options in two columns */
  .page-solo-setup .solo-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4, 16px);
    align-items: start;
  }

  .page-solo-setup .solo-options > details,
  .page-solo-setup .solo-options > .solo-kids-toggle,
  .page-solo-setup .solo-options > .solo-umlauts-toggle,
  .page-solo-setup .solo-options > #solo-bot-options {
    grid-column: 1 / -1;
  }

  /* solo_play: answer fields in two columns like the room input */
  .page-solo-play > #solo-input-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: var(--space-3, 12px) var(--space-4, 16px);
    max-width: 900px;
    width: 100%;
    margin-inline: auto;
  }

  .page-solo-play > #solo-input-form > .sticky-cta,
  .page-solo-play > #solo-input-form > input {
    grid-column: 1 / -1;
  }

  .game-writing .page-solo-play .input-hdr {
    left: 0;
    transform: none;
    width: 100%;
    padding-inline: max(var(--space-8, 32px), calc((100% - 900px) / 2));
  }

  .game-writing .page-solo-play .game-submit {
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, 900px);
    padding-inline: var(--space-8, 32px);
    border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
  }

  .page-solo-play > .solo-play-abort {
    max-width: 900px;
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--space-8, 32px);
  }

  .page-solo-play > .screen-body {
    max-width: 760px;
    width: 100%;
    margin-inline: auto;
  }

  /* solo_summary: result left, details right */
  .page-solo-summary > .screen-body {
    max-width: 900px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6, 24px);
    align-items: start;
  }

  .page-solo-summary .page-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
    min-width: 0;
  }


  /* bestenliste: readable list width */
  .page-board > .screen-body {
    max-width: 880px;
    width: 100%;
    margin-inline: auto;
  }

  .page-board > .hdr {
    padding-inline: max(var(--space-8, 32px), calc((100% - 800px) / 2));
  }

  /* profile: header, then a card grid */
  .page-profile > .screen-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-4, 16px);
  }

  .page-profile > .screen-body > .stat-grid,
  .page-profile > .screen-body > .profile-letters,
  .page-profile > .screen-body > .profile-account-card {
    grid-column: 1 / -1;
  }

  .page-profile > .screen-body > .profile-letters > .profile-letter-card {
    min-width: 0;
  }

  /* account: centred two-column card grid */
  .page-account > .screen-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-4, 16px);
    max-width: 960px;
    width: 100%;
    margin-inline: auto;
  }

  .page-account > .screen-body > .btn--block,
  .page-account > .screen-body > .account-pool-card {
    grid-column: 1 / -1;
  }

  .page-account > .screen-body > .btn--block:only-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 360px);
  }

  /* help: no section headings to anchor a TOC; steps in two columns, text cards ~720px */
  .page-help > .screen-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-4, 16px);
    max-width: 784px;
    width: 100%;
    margin-inline: auto;
  }

  .page-help > .screen-body > .card {
    grid-column: 1 / -1;
  }
}