/**
 * gexhex's own pages of the front theme across the whole window (plan 13, 26 September).
 *
 * Only where the body carries gx-wide (gexhex_control_is_wide()); the theme and the site's other pages keep
 * their look. The theme's frame already spans the window: what these rules open is what sits inside it.
 * Running text keeps a readable measure, because one line across a 2560 px screen cannot be read; cards,
 * steps, forms and menus spread.
 */
body.gx-wide {
  --gx-pad-wide: clamp(2.5rem, 3vw, 5rem);
  --gx-read: 48rem;
  --gx-card-min: 16rem;
  --gx-step-min: 30rem;
  --gx-gap: clamp(1rem, 1.6vw, 2rem);
  --gx-card-pad: clamp(1rem, 1.4vw, 1.5rem);
  --gx-card-bg: color-mix(in oklch, var(--color-paper) 45%, white);
}

@media (min-width: 64rem) {
  body.gx-wide {
    --frame-pad: var(--gx-pad-wide);
  }
}

/* The header's menus on one line, wrapping to the right when the window is too narrow for them. The theme
   gives the lists a row direction from 48rem up but not a flex display, so a menu with several items
   stacks into a column. */
@media (min-width: 48rem) {
  body.gx-wide .nav-panel {
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: 2.2rem;
    row-gap: .5rem;
  }
  /* not the contextual links (Quick edit, ...): they stay hidden until their pencil opens them */
  body.gx-wide .nav-panel ul:not(.contextual-links) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: 1.4rem;
    row-gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

/* The chart pages' 44px bar (zerogamma_charts). Its menus are clipped where the window is narrower than
   they are, so on a phone the account menu could not be reached, and the menus' hidden headings, placed
   absolutely against an ancestor outside the clip, widened the page to 665 px at 390. The bar now holds
   them and scrolls sideways instead of cutting them off. */
body.gx-wide .zgc-site__nav {
  position: relative;
  overflow-x: auto;
  scrollbar-width: none;
}
body.gx-wide .zgc-site__nav::-webkit-scrollbar {
  display: none;
}

/* The front page: what the product is, as cards; the way in, as buttons. */
body.gx-wide .zerogamma-front__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gx-card-min)), 1fr));
  gap: var(--gx-gap);
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
body.gx-wide .zerogamma-front__points > li {
  margin: 0;
  padding: var(--gx-card-pad);
  background: var(--gx-card-bg);
  border: 1px solid var(--color-ink-200);
  border-top: 2px solid var(--color-mark);
  font-size: 1.05rem;
  line-height: 1.55;
}
body.gx-wide .zerogamma-front__links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
body.gx-wide .zerogamma-front__links a {
  display: inline-block;
  padding: .8rem 1.5rem;
  background: var(--color-ink-950);
  color: var(--color-paper);
  border: 1px solid var(--color-ink-950);
  font-weight: 600;
  text-decoration: none;
}
body.gx-wide .zerogamma-front__links a + a {
  background: transparent;
  color: var(--color-ink-950);
  border-color: var(--color-ink-400);
}

/* The setup page: every step a card, as many to a row as the window holds (one on a phone and a tablet,
   two at 1440, four at 2560), each picture as wide as its card. */
body.gx-wide .zg-install {
  max-width: none;
}
body.gx-wide .zg-install__lead,
body.gx-wide .zg-install__note {
  max-width: var(--gx-read);
}
body.gx-wide .zg-install__steps,
body.gx-wide .zg-install__use {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--gx-step-min)), 1fr));
  gap: var(--gx-gap);
}
/* Three cards in a four-card row would leave a hole; they share the row instead. */
body.gx-wide .zg-install__use {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gx-step-min)), 1fr));
}
body.gx-wide .zg-install__step {
  min-width: 0;
  margin: 0;
  padding: var(--gx-card-pad);
  background: var(--gx-card-bg);
  border: 1px solid var(--color-ink-200);
}
body.gx-wide .zg-install__step img {
  max-width: 100%;
}
body.gx-wide .zg-install__use img {
  max-width: min(100%, 22rem);
}

/* Questions and answers side by side once there is room: the question on the left, its answer on the
   right at a readable measure. */
@media (min-width: 64rem) {
  body.gx-wide .zg-install__trouble {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr);
    column-gap: clamp(2rem, 4vw, 5rem);
    row-gap: 1.1rem;
  }
  body.gx-wide .zg-install__trouble dt,
  body.gx-wide .zg-install__trouble dd {
    margin: 0;
  }
  body.gx-wide .zg-install__trouble dd {
    max-width: var(--gx-read);
  }
}

/* The key page: what to do on the left, the fields and the button on the right. */
@media (min-width: 64rem) {
  body.gx-wide form.zerogamma-key {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 6rem);
    align-items: start;
  }
  body.gx-wide form.zerogamma-key > p {
    grid-column: 1;
    grid-row: 1 / span 4;
    max-width: var(--gx-read);
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
  }
  body.gx-wide form.zerogamma-key > :not(p) {
    grid-column: 2;
  }
  body.gx-wide form.zerogamma-key input[type=text],
  body.gx-wide form.zerogamma-key textarea {
    max-width: none;
  }
}