/* Dashboard pager — horizontal scroll-snap surface below the fixed topbar.
   Compositor-driven (no JS animation), so paging stays cheap even under load. */
.pager {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;            /* Firefox */
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}
.pager::-webkit-scrollbar { width: 0; height: 0; }  /* Chromium/WebKit */

/* Swipe-to-change-page disabled in Settings: block native horizontal panning and
   snapping. Programmatic scrolling (dot taps, keyboard arrows, goToPage) still
   works because overflow:hidden does not stop scrollLeft/scrollTo. */
.pager.no-swipe {
  overflow-x: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;
  overscroll-behavior-x: auto;
}

.pager-page {
  position: relative;       /* anchor for the absolutely-positioned "+" drop-zone */
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  height: 100%;
  overflow-y: auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Parked = active but not the current page (set by dashboard-pager.js once a
   scroll settles, dropped the instant scrolling starts). Skips rendering of the
   whole off-screen subtree — SDK widget iframes included, whose rAF/animations
   the browser then stops. The page's own box is explicitly sized (flex-basis +
   height 100%), so offsetLeft and scroll-snap geometry are unaffected. */
.pager-page.is-parked { content-visibility: hidden; }
/* Layout mode measures and mutates every page's grid — never park while editing. */
body.layout-editing .pager-page.is-parked { content-visibility: visible; }

/* Dot indicators. Sit in the topbar's actions; keep touch targets comfortable. */
.pager-dots {
  display: inline-flex;
  align-items: center;
  gap: 0;       /* the dots' own padding provides the spacing */
  padding: 0 4px;
}
.pager-dot {
  /* 25px touch target around a 9px visible dot: the padding belongs to the
     button but background-clip keeps it invisible — easy to hit on the Edge
     touchscreen without growing the dots visually. */
  width: 25px;
  height: 25px;
  padding: 8px;
  background-clip: content-box;
  border: 0;
  border-radius: 50%;
  background-color: rgba(var(--accent-rgb), 0.28);
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}
.pager-dot:hover { background-color: rgba(var(--accent-rgb), 0.5); }
.pager-dot.is-active { background-color: var(--accent); transform: scale(1.25); }

/* Labelled mode (topbarClock.pageLabels): the dot becomes a pill carrying the
   page name. Same tokens as the tab-group tabs (DashboardGrid.css) so themes
   already cover it, but a class of its own — .tabgroup-tab drags `cursor: grab`
   and the per-theme overrides of a different component along with it.
   Height stays 25px: this row sits in the topbar and inside the Minimal island
   pill, and neither may grow because a page was renamed. */
.pager-dot.is-labelled {
  width: auto;
  min-width: 0;
  max-width: 132px;
  height: 25px;
  padding: 0 11px;
  border-radius: 13px;
  background-clip: border-box;
  font: inherit;   /* a <button> would otherwise keep the UA font */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--accent-rgb), 0.1);
  color: var(--dim-text);
  transition: background-color 160ms ease, color 160ms ease;
}
/* The circle's pop would shove the neighbouring pills sideways. */
.pager-dot.is-labelled.is-active {
  transform: none;
  background-color: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.pager-dot.is-labelled:hover { background-color: rgba(var(--accent-rgb), 0.22); }
.pager-dots:has(.pager-dot.is-labelled) { gap: 4px; }
/* A long name must be cut, never widen the row: eight pages have to fit. */
.pager-dot-label {
  font: inherit;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  /* letter-spacing is added after the LAST letter as well, so it sits inside the
     box and pushes the glyphs half of it left of centre. Cancel it, or the name
     reads fractionally off inside a pill whose padding is exactly even. */
  margin-right: -0.5px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The existing dashboard becomes the content of page 1. It used to be the
   second grid row of .shell (auto-stretched to fill height); nested inside a
   .pager-page (display:block) it needs an explicit height:100% so its own
   grid rows (repeat(2, minmax(0,1fr))) keep dividing the full page height
   instead of collapsing to content height. */
/* Generated page grids reuse the dashboard grid sizing. */
.pager-page > .dashboard, #dashboard-layout { width: 100%; height: 100%; }
#widget-pool { display: none; }
/* A page hidden by the pager active-set must leave the flow so the remaining
   page fills the viewport and scroll offsets stay correct. */
.pager-page[hidden] { display: none; }

.layout-control-btn[disabled] { opacity: 0.35; pointer-events: none; }

/* Page add (+) / remove (×) — shown next to the dots only in Layout mode. */
.pager-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 7px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, transform 120ms ease, opacity 160ms ease;
}
.pager-page-btn:hover { background: rgba(var(--accent-rgb), 0.24); }
.pager-page-btn:active { transform: scale(0.92); }
.pager-page-btn:disabled { opacity: 0.3; pointer-events: none; }
/* Rename (✎) — the glyph is smaller than the ‹ › × ones at the same size. */
.pager-page-rename { font-size: 12px; }
/* Always red — touch has no hover, so the delete affordance must read as
   destructive on sight. */
.pager-page-remove {
  border-color: rgba(231, 76, 60, 0.55);
  background: rgba(231, 76, 60, 0.16);
  color: var(--red);
}
.pager-page-remove:hover { background: rgba(231, 76, 60, 0.28); color: var(--red); }