/*
 * v26.8 — Overview statistics on the opening phone screen.
 * Approved by Marshall Hicks, October 7, 2026.
 *
 * Phone widths only (max-width: 800px). Tablet (820px and wider) and desktop
 * layouts are untouched. No content is hidden and no wording changes: the hero
 * is tightened (spacing, binding-fan height, type scale) and, on the themes
 * whose hero also carries the introduction and action buttons, the statistics
 * are visually placed directly after the binding fan with CSS grid. The DOM
 * order is unchanged.
 *
 * Supersedes the v23.7 phone rule that reserved the full opening screen for
 * the hero and kept the statistics just below it.
 */
@media (max-width: 800px) {
  /* Hero spacing and type scale (all six themes). */
  body[data-design] #t-overview:checked ~ .hero {
    min-height: 0 !important;
  }

  body[data-design] #t-overview:checked ~ .hero .hero-inner {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    row-gap: 10px !important;
  }

  body[data-design] #t-overview:checked ~ .hero h1.bibliographical-title {
    margin: 0 0 6px !important;
  }

  body[data-design] #t-overview:checked ~ .hero .census-purpose {
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  body[data-design] #t-overview:checked ~ .hero .census-edition {
    margin: 4px 0 10px !important;
  }

  body[data-design] #t-overview:checked ~ .hero .full-historical-title {
    margin: 0 0 10px !important;
    font-size: 14px !important;
    line-height: 1.42 !important;
  }

  body[data-design] #t-overview:checked ~ .hero .author-credit {
    margin: 0 !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
  }

  /* Binding fan: dark themes (index, midnight). The fan keeps its size. */
  body.design-midnight #t-overview:checked ~ .hero .hero-stage-label {
    margin-top: 6px !important;
  }

  body.design-midnight #t-overview:checked ~ .hero .hero-highlight {
    margin-top: 6px !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  /* Binding fan: folio, egyptian, museum and atlas. Books sit in the upper
     part of a shorter stage so the label below stays clear. */
  body:is(.design-folio, .design-egyptian, .design-museum, .design-atlas) #t-overview:checked ~ .hero .hero-stage {
    min-height: 196px !important;
  }

  body:is(.design-folio, .design-egyptian, .design-museum, .design-atlas) #t-overview:checked ~ .hero .hero-book {
    top: 16px !important;
    bottom: auto !important;
    width: 88px !important;
  }

  /* Egyptian keeps its framed top margin (corner bars and 1858 tab). */
  body.design-egyptian #t-overview:checked ~ .hero .hero-inner {
    padding-top: 64px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero h1.bibliographical-title {
    font-size: 28px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero h1.bibliographical-title::after {
    margin-top: 14px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero .hero-stage {
    min-height: 206px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero .hero-stage::before {
    top: 0 !important;
    width: 186px !important;
    height: 186px !important;
    border-width: 16px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero .hero-book {
    top: 20px !important;
  }

  /* Statistics: slimmer cells (the "At a Glance" heading keeps its space). */
  body[data-design] #t-overview:checked ~ .stats .stat {
    min-height: 0 !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
  }
}

/* Short phone screens (for example 384 x 694). */
@media (max-width: 800px) and (max-height: 700px) {
  body[data-design] #t-overview:checked ~ .hero .hero-inner {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  body[data-design] #t-overview:checked ~ .hero h1.bibliographical-title {
    font-size: 30px !important;
  }

  body[data-design] #t-overview:checked ~ .hero .census-purpose {
    font-size: 18px !important;
  }

  body[data-design] #t-overview:checked ~ .hero .census-edition {
    margin: 3px 0 8px !important;
  }

  body[data-design] #t-overview:checked ~ .hero .full-historical-title {
    margin-bottom: 8px !important;
    font-size: 13.5px !important;
    line-height: 1.38 !important;
  }

  body[data-design] #t-overview:checked ~ .hero .author-credit {
    font-size: 13px !important;
  }

  body.design-midnight #t-overview:checked ~ .hero .hero-bindings {
    height: 136px !important;
    min-height: 0 !important;
  }

  body.design-midnight #t-overview:checked ~ .hero .hero-bindings .hero-book {
    top: 4px !important;
    width: 86px !important;
  }

  body.design-midnight #t-overview:checked ~ .hero .hero-stage-label,
  body.design-midnight #t-overview:checked ~ .hero .hero-highlight {
    margin-top: 4px !important;
  }

  body.design-midnight #t-overview:checked ~ .hero .hero-highlight {
    font-size: 16px !important;
  }

  body:is(.design-folio, .design-egyptian, .design-museum, .design-atlas) #t-overview:checked ~ .hero .hero-stage {
    min-height: 176px !important;
  }

  body:is(.design-folio, .design-egyptian, .design-museum, .design-atlas) #t-overview:checked ~ .hero .hero-book {
    top: 10px !important;
    width: 84px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero .hero-inner {
    padding-top: 56px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero h1.bibliographical-title {
    font-size: 26px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero .hero-stage {
    min-height: 172px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero .hero-stage-label {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero .hero-stage::before {
    width: 156px !important;
    height: 156px !important;
    border-width: 13px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero .hero-book {
    top: 8px !important;
    width: 80px !important;
  }
}

/* Very short phone screens (for example 360 x 640). */
@media (max-width: 800px) and (max-height: 660px) {
  body[data-design] #t-overview:checked ~ .hero h1.bibliographical-title {
    font-size: 28px !important;
  }

  body.design-midnight #t-overview:checked ~ .hero .hero-bindings {
    height: 126px !important;
  }

  body.design-midnight #t-overview:checked ~ .hero .hero-bindings .hero-book {
    top: 2px !important;
    width: 80px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero h1.bibliographical-title {
    font-size: 24px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero h1.bibliographical-title::after {
    margin-top: 10px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero .hero-stage {
    min-height: 160px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero .hero-stage::before {
    width: 146px !important;
    height: 146px !important;
    border-width: 12px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero .hero-book {
    top: 6px !important;
    width: 76px !important;
  }
}

/*
 * Folio, egyptian, museum and atlas: show the statistics directly after the
 * binding fan; the introduction and action buttons follow them. Requires CSS
 * subgrid and :has(); older browsers keep the previous order.
 */
@supports (grid-template-rows: subgrid) and selector(:has(*)) {
  @media (max-width: 800px) {
    body:is(.design-folio, .design-egyptian, .design-museum, .design-atlas) .app:has(> #t-overview:checked) {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      row-gap: 0 !important;
    }

    body:is(.design-folio, .design-egyptian, .design-museum, .design-atlas) #t-overview:checked ~ .hero {
      display: grid !important;
      grid-column: 1 !important;
      grid-row: 1 / span 4 !important;
      grid-template-columns: minmax(0, 1fr) !important;
      grid-template-rows: subgrid !important;
    }

    body:is(.design-folio, .design-egyptian, .design-museum, .design-atlas) #t-overview:checked ~ .hero .hero-inner {
      grid-column: 1 !important;
      grid-row: 1 / span 4 !important;
      grid-template-rows: subgrid !important;
      row-gap: 0 !important;
    }

    body:is(.design-folio, .design-egyptian, .design-museum, .design-atlas) #t-overview:checked ~ .hero .hero-copy-top {
      grid-row: 1 !important;
      margin-bottom: 6px !important;
    }

    body:is(.design-folio, .design-egyptian, .design-museum, .design-atlas) #t-overview:checked ~ .hero .hero-stage {
      grid-row: 2 !important;
      margin-bottom: 10px !important;
    }

    body:is(.design-folio, .design-egyptian, .design-museum, .design-atlas) #t-overview:checked ~ .hero .hero-copy-bottom {
      grid-row: 4 !important;
      margin-top: 24px !important;
    }

    body:is(.design-folio, .design-egyptian, .design-museum, .design-atlas) #t-overview:checked ~ .stats {
      grid-column: 1 !important;
      grid-row: 3 !important;
      align-self: start !important;
      z-index: 2 !important;
    }
  }
}