/*
 * App shell layout: fixed header, navigation rail or tab bar, content area.
 *
 * Breakpoints
 * - 960 px and wider (kiosk 1024×600, desktop): rail on the left, the
 *   content area fills the rest; pages that fit (Today) do not scroll.
 * - 700–959 px (tablet portrait): same shell, the content area scrolls.
 * - under 700 px (phones): one column, the document scrolls, bottom tab bar.
 * The widths are the page's own CSS px, so the breakpoints are container
 * queries on <html> (`@container app`, base.css): at the display size's
 * larger step the kiosk's 1024 px are 931 and it lays out as a tablet.
 */
@layer layout {
  .app {
    min-height: 100%;
  }

  .app-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-header);
    height: var(--header-height);
    display: grid;
    grid-template-columns: var(--rail-width) minmax(0, 1fr) auto;
    align-items: center;
    background: var(--surface-0);
    border-bottom: 1px solid transparent;
  }

  .app-nav {
    position: fixed;
    z-index: var(--z-nav);
    top: var(--header-height);
    bottom: 0;
    left: 0;
    width: var(--rail-width);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-1) 1px var(--space-4);
  }

  /* A low window (a phone held sideways, 844 × 390) has no room for the
     whole rail: it scrolls, so every page stays in reach (review
     2026-10-09). The kiosk's 600 px hold it. Low means 500 of the page's
     px: a container query cannot ask for the height, so the media query
     asks for the screen's at each display size (500 × the step's zoom). */
  @container app (min-width: 700px) {
    @media (max-height: 450px) {
      .app-nav {
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
      }
    }

    @media (max-height: 500px) {
      :root:not([data-display-size="smaller"]) .app-nav {
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
      }
    }

    @media (max-height: 550px) {
      :root[data-display-size="larger"] .app-nav {
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
      }
    }
  }

  .app-main {
    position: fixed;
    top: var(--header-height);
    left: var(--rail-width);
    right: 0;
    bottom: 0;
    padding: var(--space-1) var(--space-4) var(--space-4) var(--space-1);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* A control scrolled into view by keyboard focus keeps its focus ring clear of the edge. */
    scroll-padding-block: var(--space-2);
  }

  .page {
    min-height: 100%;
  }

  /* Wide screens show date and status in the header: the page head is
     not shown, but its heading stays the page's h1 for screen readers
     (visually hidden; date and status are not repeated to them). */
  .page-head {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .page-head > :not(h1) {
    display: none;
  }

  /* Phones: the document scrolls so the browser chrome can collapse. */
  @container app (max-width: 699px) {
    .app-header {
      grid-template-columns: minmax(0, 1fr) auto;
      padding-left: var(--space-4);
    }

    .app-header.is-scrolled {
      border-bottom-color: var(--hairline);
    }

    .app-nav {
      top: auto;
      right: 0;
      width: auto;
      height: calc(var(--tabbar-height) + var(--safe-bottom));
      flex-direction: row;
      gap: var(--space-2);
      /* The outer labels stay clear of the alarm frame's edge (review 2026-10-09). */
      padding: var(--space-1) calc(var(--alarm-edge-width) + 2px) var(--safe-bottom);
      background: var(--surface-1);
      border-top: 1px solid var(--hairline);
    }

    .app-main {
      position: static;
      padding:
        calc(var(--header-height) + var(--space-1))
        var(--space-4)
        calc(var(--tabbar-height) + var(--safe-bottom) + var(--space-7));
      overflow: visible;
    }

    .page {
      min-height: 0;
    }

    .page-head {
      position: static;
      width: auto;
      height: auto;
      overflow: visible;
      clip-path: none;
      white-space: normal;
      padding: var(--space-3) 0 var(--space-5);
    }

    .page-head > :not(h1) {
      display: block;
    }
  }

  /* Keyboard focus never lands under the fixed header or the tab bar. A rule for <html> itself, which a container
     query cannot style: the screen's width decides (near 700 px at another display size only the focus scroll's
     margin differs). */
  @media (max-width: 699px) {
    html {
      scroll-padding-top: calc(var(--header-height) + var(--space-2));
      scroll-padding-bottom: calc(var(--tabbar-height) + var(--safe-bottom) + var(--space-2));
    }
  }

  /* While a sheet is open the page underneath does not scroll: sheet.js
     pins the body where it was (position: fixed at -scrollY) and scrolls
     back on close, so the page keeps its place. */

  /* The showroom (the public demo, ARCHITECTURE.md D11) shows the app as a
     device: a desktop's classic scrollbar would take the phone's width and
     sit on the kiosk's screen. Scrolling stays (review 2026-10-09). */
  :root[data-showroom],
  :root[data-showroom] * {
    scrollbar-width: none;
  }

  :root[data-showroom] ::-webkit-scrollbar {
    display: none;
  }

  /* The showroom's mouse drags pages and lists like a finger
     (showroom/drag-scroll.js): while it drags or holds a glide it stopped,
     the hand grabs and no text gets selected, whatever lies under it (the
     pressed look lets go too: base.css, pages.css). */
  :root[data-showroom][data-drag-scroll],
  :root[data-showroom][data-drag-scroll] * {
    cursor: grabbing !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }
}