/* App shell: header, navigation (bottom bar on phones and portrait tablets, left rail from 1024 px)
   and the main area. Breakpoints: phone < 600, tablet 600-1023, wall/desktop >= 1024. */
@layer layout {
  .app {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--header-height) minmax(0, 1fr);
    grid-template-areas: 'header' 'main';
    min-height: 100dvh;
  }

  .app-header {
    grid-area: header;
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
    min-width: 0;
  }
  .app-header .brand {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
    font-weight: var(--weight-heavy);
    font-size: var(--text-lg);
    letter-spacing: 0.04em;
  }
  .app-header .brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    letter-spacing: 0;
    color: var(--color-text-muted);
  }
  .app-header .header-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
  }
  .app-header .clock {
    font-size: var(--text-lg);
    font-weight: var(--weight-heavy);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  /* On the wall the clock is read from across the room: larger than the page title. */
  :root[data-device='wall'] .app-header .clock { font-size: var(--text-2xl); line-height: 1; }
  .app-header .header-date {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  .app-main {
    grid-area: main;
    min-width: 0;
    padding: var(--space-4) var(--space-4) calc(var(--bar-height) + var(--space-6));
  }

  .app-nav {
    position: fixed;
    z-index: 25;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-line);
    padding: var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
  }
  .app-nav ul {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-1);
    max-width: 720px;
    margin: 0 auto;
  }
  .nav-item {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    min-height: 56px;
    padding: var(--space-1);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-text-muted);
    /* Labels never outgrow their cell: capped against the text size, ellipsis when a word is too long. */
    font-size: min(var(--text-xs), 15px);
    font-weight: var(--weight-bold);
    text-decoration: none;
    width: 100%;
    min-width: 0;
    padding-inline: 2px;
  }
  .nav-item .nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-item .icon { width: 24px; height: 24px; }
  .nav-item[aria-current='page'] {
    color: var(--color-accent);
    background: var(--color-accent-soft);
  }
  .app-header .header-time { display: flex; flex: none; align-items: baseline; gap: var(--space-2); }
  .app-header .brand { flex: 1 1 auto; }
  /* Phones: a compact header. Greeting and date are on the page, so the clock goes; the avatar shows
     initials only and the "Ort festlegen" chip only its icon. The household name takes what is left. */
  @media (max-width: 599px) {
    .app-header { gap: var(--space-2); padding: 0 var(--space-3); }
    .app-header .header-time, .app-header .avatar-label { display: none; }
    .app-header .header-end { flex: none; }
    .app-header .chip-text-optional {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .app-header .weather-chip { padding-inline: var(--space-3); min-width: var(--tap-min); justify-content: center; }
  }
  @media (min-width: 600px) and (max-width: 799px) {
    .app-header .header-date { display: none; }
  }

  /* The onboarding (#/einrichtung) is full screen (SPEC 4.3): no navigation, no header actions. */
  .app[data-route='einrichtung'] .app-nav, .app[data-route='einrichtung'] .header-end { display: none; }
  .app[data-route='einrichtung'] .app-main { padding-bottom: var(--space-8); }

  /* Phones: four items plus "Mehr". */
  .app-nav li.nav-extra { display: none; }

  /* Below 1024 px the header is sticky and the navigation fixed at the bottom: a control reached with
     the keyboard is scrolled clear of both (WCAG 2.4.11), on Home also clear of the FAB. */
  @media (max-width: 1023px) {
    html {
      scroll-padding-top: calc(var(--header-height) + var(--space-2));
      scroll-padding-bottom: calc(var(--bar-height) + env(safe-area-inset-bottom, 0px) + var(--space-4));
    }
    html:has(.fab:not([hidden])) {
      scroll-padding-bottom: calc(var(--bar-height) + env(safe-area-inset-bottom, 0px) + 64px + var(--space-6));
    }
  }

  @media (min-width: 600px) {
    .app-nav li.nav-extra { display: block; }
    .app-nav li.nav-more { display: none; }
    .app-main { padding-inline: var(--space-6); }
  }

  /* Wall and desktop: a left rail, the page fills the viewport (Home never scrolls). */
  @media (min-width: 1024px) {
    .app {
      grid-template-columns: var(--rail-width) minmax(0, 1fr);
      grid-template-areas: 'nav header' 'nav main';
      height: 100dvh;
    }
    .app-nav {
      grid-area: nav;
      position: static;
      border-top: 0;
      border-right: 1px solid var(--color-line);
      padding: var(--space-4) var(--space-2);
      overflow-y: auto;
    }
    .app-nav ul {
      grid-auto-flow: row;
      grid-auto-rows: min-content;
      gap: var(--space-2);
    }
    .nav-item { min-height: 72px; }
    /* The main area is the scroller. It is the containing block of absolutely placed descendants
       (.visually-hidden spans, file inputs), so none of them escapes and stretches the document, and
       scrolling to its end never chains on to the document (the shell would scroll away). */
    html, body { overflow: hidden; }
    .app-main {
      position: relative;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: var(--space-5) var(--space-6) var(--space-6);
    }
    .app-main > .page { flex: 1 1 auto; min-height: 0; }
    .app[data-route='einrichtung'] { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'header' 'main'; }
  }

  /* A page that is a single centred column (profile, onboarding, placeholders). */
  .page-narrow {
    width: min(100%, 720px);
    margin: 0 auto;
    display: grid;
    gap: var(--space-4);
  }
  .page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }
  .page-header h1 { margin-right: auto; }
}