/* house-ui layout — M3 window size classes and canonical layouts.
 *
 * Desktop first: the expanded layout is the design, smaller windows get
 * their own arrangement rather than a squeezed copy of it.
 *
 *   ≥ 1200  large     rail · main · pane (360)
 *   ≥  840  expanded  rail · main · pane (300)
 *   ≥  600  medium    rail · main; pane slides over from the right
 *   <  600  compact   main; bottom nav bar; pane slides over
 */

.app {
  --rail-w: 88px;
  --pane-w: 360px;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--pane-w);
  grid-template-areas: "rail main pane";
  height: 100dvh;
  background: var(--surface);
}
.app > .rail  { grid-area: rail; }
.app > .main  { grid-area: main; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.app > .pane  { grid-area: pane; min-width: 0; overflow: auto; }
.app > .navbar { display: none; }
/* No pane yet (or ever): two columns, not an empty third. Scoped above
   compact, or its higher specificity would override the phone layout. */
@media (min-width: 600px) {
  .app:not(:has(> .pane)) { grid-template-columns: var(--rail-w) minmax(0, 1fr); grid-template-areas: "rail main"; }
}

/* The main pane is a container on a raised surface with a big corner:
   the rail and the page background read as one "frame" around it. */
.main .content {
  flex: 1; overflow: auto;
  padding: var(--sp-2) var(--sp-6) var(--sp-8);
}
.pane {
  margin: var(--sp-2) var(--sp-2) var(--sp-2) 0;
  border-radius: var(--shape-xl);
  background: var(--surface-container-low);
}
.pane-toggle { display: none; }

@media (max-width: 1199px) {
  .app { --pane-w: 300px; }
}

@media (max-width: 839px) {
  .app { grid-template-columns: var(--rail-w) minmax(0, 1fr); grid-template-areas: "rail main"; }
  .app > .pane {
    position: fixed; inset: var(--sp-2) var(--sp-2) var(--sp-2) auto; z-index: 20;
    width: min(360px, calc(100vw - var(--sp-4))); margin: 0;
    box-shadow: var(--elev-3);
    translate: calc(100% + var(--sp-4)) 0;
    transition: translate var(--dur-medium) var(--ease-standard);
  }
  .app.pane-open > .pane { translate: 0 0; }
  /* A scrim behind the open pane: the first click outside only dismisses it,
     instead of also landing on whatever was underneath. */
  .app.pane-open::after { content: ""; position: fixed; inset: 0; z-index: 19; background: var(--scrim); }
  .pane-toggle { display: inline-grid; }
}

@media (max-width: 599px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "main" "nav";
  }
  .app > .rail { display: none; }
  .app > .navbar { display: flex; grid-area: nav; padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom)); }
  .main .content { padding: var(--sp-2) var(--sp-4) var(--sp-6); }
}

/* List-detail: a list column beside the selected item, on wide windows only. */
.list-detail { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: var(--sp-6); min-height: 0; }
@media (max-width: 839px) {
  .list-detail { grid-template-columns: minmax(0, 1fr); }
  .list-detail.showing-detail > :first-child { display: none; }
  .list-detail:not(.showing-detail) > :last-child { display: none; }
}

/* Section header inside a page. */
.section-title { font: var(--title-s); color: var(--on-surface-variant); margin: var(--sp-6) var(--sp-4) var(--sp-2); }