/* === Mobile === */

@media (max-width: 768px) {
  /* Re-enable normal document scrolling on mobile — pinning to the
     viewport (the desktop default) only makes sense when there's
     enough room for the paper to fit on a single screen. */
  html, body {
    height: auto;
    overflow: visible;
  }
  .shell--active .content-pane {
    overflow: visible;
    height: auto;
  }
  .content-pane__inner {
    height: auto;
    overflow: visible;
  }

  .shell {
    padding: 48px var(--space-md) var(--space-xl);
  }

  .shell__title {
    font-size: 1.2rem;
  }

  /* Grid is always single-column on mobile */
  .shell__grid {
    grid-template-columns: 1fr;
  }

  /* No sidebar layout on mobile */
  .shell--active .shell__body {
    grid-template-columns: 1fr;
    height: auto;
  }

  /* In active state, hide non-active blocks */
  .shell--active .block {
    display: none;
  }

  .shell--active .block--active {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
  }

  /* Content pane goes full width below the active block */
  .shell--active .content-pane {
    grid-column: 1;
  }

  .content-pane__inner {
    padding: var(--space-lg);
    min-height: auto;
  }

  /* Smaller dots on mobile */
  .dot {
    width: 10px;
    height: 10px;
  }

  .window-chrome {
    padding: 10px 14px;
  }

  /* Slot machine: stack vertically so the reel gets full width */
  .favorites-slot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .favorites-slot__viewport {
    width: 100%;
  }

  .favorites-slot__reroll {
    align-self: center;
  }

  /* About portrait: smaller, less margin */
  .about-portrait {
    max-width: 160px;
    margin: 0 0 var(--space-md) var(--space-md);
  }

  /* Lifecal stacked layout adjustments — at this width we let the page
     scroll instead of forcing the grid to share the viewport, and we drop
     the stats/no-u row to a stacked column so each card has full width.

     The desktop CSS pins the calendar inside a viewport-tall flex chain
     (`.content-pane:has(.lifecal) { overflow: hidden }` +
     `.content-pane__inner:has(.lifecal) { height: 100%; overflow: hidden }`
     + `.lifecal { height: 100% }` + `.lifecal__body { flex: 1 1 0 }`).
     That works when the viewport supplies the height; on mobile, with
     `.shell__body { height: auto }`, every percentage in that chain has
     no defined parent, so the whole thing collapses to ~100px and the
     calendar overflows the paper container. Unwind every link in the
     chain — explicit overrides, not defaults — so the paper grows with
     its content and the body itself scrolls. */
  .content-pane:has(.lifecal) {
    overflow: visible;
  }
  .content-pane__inner:has(.lifecal) {
    padding: var(--space-md);
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .lifecal {
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .lifecal__body {
    flex: 0 0 auto;
    height: auto;
  }
  .lifecal__panel {
    flex-direction: column;
  }
  .lifecal__main {
    padding: 0.4em 4rem 0.4em 1.4rem;
    min-height: 70vh;
  }
  .lifecal__era-label {
    font-size: 0.78rem;
  }
  .lifecal__decade-num {
    font-size: 0.6rem;
    left: -1.2rem;
  }
  /* Cells get even tinier on iPhone — disable hover scale (touch UA),
     kill the dark hover bg so the lived band still reads. */
  .lifecal__cell:hover {
    transform: none;
    background: rgba(44, 37, 37, 0.05);
  }
}

/* === Tablet / medium === */

@media (min-width: 769px) and (max-width: 1024px) {
  .shell--active .shell__body {
    grid-template-columns: 180px 1fr;
  }

}