/* Base / structural styles for the Dashboard PWA.
 *
 * Phase 2 module split: reset + the panel-stage / panel / list-area structural rules.
 * Phase 5 visual pass: @font-face for the display face (Space Grotesk, SIL OFL 1.1, subset to
 * ~13KB), body stays system sans; `prefers-reduced-motion` guard on the panel animation. */

/* Space Grotesk — SIL Open Font License 1.1 (see fonts/space-grotesk-OFL.txt).
   Instanced to weight 600 and subset (Latin basic + Latin-1 + Latin Extended-A + a few
   punctuation/arrow/currency glyphs) offline with fonttools. Headings only. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  display: flex;
  flex-direction: column;
}

#panelStage {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  position: relative;
  /* The old <header> owned the top safe-area inset; with the header gone, the panel stage does. */
  padding-top: var(--safe-top);
  /* Claims horizontal gestures on this element for the page instead of Android's system
     edge-swipe-to-go-back (which otherwise intercepts left/right swipes before touch listeners
     ever see them inside a TWA / Chrome Custom Tabs). pan-y keeps native vertical scroll (used
     by .listArea inside each panel) completely untouched - only horizontal panning is given up
     to JS. See frontend-dev/notes.md, 2026-08-17 TWA edge-gesture entry, for the full reasoning
     and sourcing (Chrome uses touch-action: pan-y / none to register an Android Gesture
     Exclusion Rect for the element, so the OS itself skips its back-gesture there). */
  touch-action: pan-y;
}

.panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.panel[hidden] { display: none; }
.panel.panelEnterLeft { animation: panelEnterLeft .16s ease; }
.panel.panelEnterRight { animation: panelEnterRight .16s ease; }
@keyframes panelEnterLeft {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes panelEnterRight {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .panel.panelEnterLeft, .panel.panelEnterRight { animation: none; }
}

.listArea {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 24px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

.loadingMsg, .emptyMsg {
  color: var(--muted);
  font-size: var(--fs-meta);
  padding: 28px 0;
  text-align: center;
}