/* The STREAMED goal board — the Views dropdown's "Scroll <periods>" choice.
   Its own file rather than more of styles/goal-board.css: that file is the CARD
   and the COLUMN, which every board draws whatever mode it is in, and this is
   one MODE of the grid they sit on. Keeping them apart is also what keeps
   goal-board.css under its size threshold.

   Loaded globally from index.html, beside goal-board.css and AFTER it, because
   the stream overrides `.gb-board`'s fit-the-page tracks with fixed ones.
   Behaviour lives in js/period-stream/. */

/* ── The STREAMED board ──────────────────────────────────────────────────
   `.gb-board--stream` is the Views dropdown's "Scroll <periods>" choice: the
   board stops fitting the page and becomes a strip you pull sideways, with the
   periods arriving as you reach them (js/period-stream/).

   Two rules do the whole thing, and both are the opposite of what the fixed
   board wants:

   1. THE TRACKS ARE A FIXED WIDTH, not `1fr`. A streamed board has no "number
      of columns" to divide the page by — the count changes as you scroll, so
      `1fr` would shrink every column each time the window grew and the board
      would breathe in and out under the pointer. A column is `--gb-stream-col-w`
      wide wherever it is in the strip, which is also what makes one measurement
      enough for `streamColumnStep()`.
   2. IT SCROLLS. `.gb-board` is `overflow: visible` because a fixed board has
      nothing off-screen; here that would CLIP every column past the window edge
      instead of letting you reach it — the same swap `.dlg-grid` makes for the
      Daily tab's week.

   The inline `grid-template-columns` each view writes (one track per period on
   screen) is overridden here rather than at the source: the views compute the
   COUNT, and how wide a track is belongs to the mode. */
.gb-board--stream {
  --gb-stream-col-w: 300px;
  grid-auto-flow: column;
  grid-auto-columns: var(--gb-stream-col-w);
  grid-template-columns: none !important;
  overflow-x: auto;
  overflow-y: hidden;
  /* Momentum on a trackpad without the browser also treating a horizontal swipe
     as a back-navigation gesture. */
  overscroll-behavior-x: contain;
  /* The strip is grabbable everywhere the module allows a pan to start; the
     cursor is only promised on that surface, so it goes on the board and the
     cards override it. See `.dlg-strip-panning` — the same gesture, shared. */
  cursor: grab;
}
.gb-board--stream .gb-col,
.gb-board--stream .gb-card,
.gb-board--stream .ltg-text {
  cursor: auto;
}
.gb-board--stream.dlg-strip-panning {
  cursor: grabbing;
  /* Mid-pan the pointer sweeps across headers and goal text; without this the
     drag paints the board blue behind itself. */
  user-select: none;
}
.gb-board--stream::-webkit-scrollbar {
  height: 12px;
}
.gb-board--stream::-webkit-scrollbar-track {
  background: transparent;
}
.gb-board--stream::-webkit-scrollbar-thumb {
  /* Inset by a transparent border rather than a smaller height, so the thumb
     keeps the full 12px hit area while reading as a slim pill. */
  background: rgba(var(--overlay-rgb), 0.28);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
}
.gb-board--stream::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--overlay-rgb), 0.5);
  background-clip: padding-box;
}

/* The period the strip is CENTRED on, marked as you scroll so the board and the
   topbar label agree about which one is being talked about. Distinct from
   `.is-current`, which is the period containing today and does not move. */
.gb-board--stream .gb-col.gb-col--centre > .gb-col-card {
  box-shadow: 0 0 0 1px rgba(var(--overlay-rgb), 0.18);
}

/* Phone: a period per screen, paged with the thumb. The pointer pan is a
   desktop gesture and a 300px column on a 390px screen is a column and a
   sliver, which reads as a layout bug rather than as more board. */
html[data-device='phone'] .gb-board--stream {
  --gb-stream-col-w: 100%;
  scroll-snap-type: x mandatory;
}
html[data-device='phone'] .gb-board--stream .gb-col {
  scroll-snap-align: start;
}