/* ==========================================================================
   EVAL · css/pages/store.css — the Store page: the seven summaries at full
   size. Owner: pages agent. The card IS the .sum primitive (the one the Home
   rail draws) grown up: .pgst-card only changes size and hangs the supporting
   figures under the headline. Tokens only, no hex codes.
   ========================================================================== */

.pgst { display: flex; flex-direction: column; width: 100%; min-width: 0; }
.pgst-grid {
  display: grid; gap: var(--gap); width: 100%; min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------- the card ----------------------------------------------------- */
.pgst-card {
  padding: 15px 17px 16px; border-radius: var(--r); gap: 14px;
  justify-content: flex-start; min-height: 0;
}
.pgst-card .s1 { gap: 10px; }
.pgst-card .s1 b {
  font-family: var(--font-head); font-size: var(--fs-h2); font-weight: 800;
  letter-spacing: var(--ls-head); color: var(--ink);
}
.pgst-card .s1 .cv { opacity: .55; }
.pgst-card .s2 { gap: 9px; flex-wrap: wrap; }
.pgst-card .s2 strong { font-size: var(--fs-d2); letter-spacing: -1px; }
.pgst-card .s2 em { font-size: var(--fs-row); }
/* STOP STRETCHING. A card taller than its content used to prise its own rows
   apart: at 1366x1024 "Yesterday 4 of 4", "Weekend No data" and "Show rate 79%"
   sat 105px apart with nothing between them, the Inventory buckets hung 145px
   below their tiles, and the eye kept hunting for the content that was missing.
   Slack is AIR, not a hole — so the supporting block keeps its own rhythm and
   sits centred in whatever room the row gives it, the way the Follow-ups card
   on Home already handles a tall iPad (home.css `.h-first`). */
.pgst-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.pgst-body > * { flex: 0 0 auto; min-height: 0; }
.pgst-stack { display: flex; flex-direction: column; justify-content: flex-start; gap: 14px; flex: 0 1 auto; }
.pgst-stack > .pgst-lanes { flex: 0 0 auto; }

/* ---------- supporting figures ------------------------------------------- */
.pgst-lanes { display: flex; flex-direction: column; justify-content: flex-start; gap: 13px; flex: 0 1 auto; }
.pgst-lane { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pgst-l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pgst-l1 .avatar { width: 22px; height: 22px; align-self: center; }
.pgst-lb {
  flex: 1; min-width: 0; font-size: var(--fs-sub); font-weight: 600; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pgst-l1 strong {
  font-family: var(--font-head); font-size: var(--fs-h2); font-weight: 800;
  letter-spacing: -.4px; color: var(--ink); white-space: nowrap;
}
.pgst-l1 em {
  font-style: normal; font-size: var(--fs-sub); font-weight: 500; color: var(--muted);
  white-space: nowrap;
}

.pgst-tiles { display: grid; gap: 8px; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.pgst-tiles.fill { flex: 0 1 auto; }
.pgst-tiles .tile { min-height: 74px; }
.pgst-tiles .tile { padding: 11px 12px; gap: 3px; justify-content: center; }
.pgst-tiles .tile b { font-size: var(--fs-h1); letter-spacing: -.7px; white-space: nowrap; }
.pgst-tiles .tile span { font-size: var(--fs-pill); }

.pgst-kvs { display: flex; flex-direction: column; justify-content: flex-start; flex: 0 1 auto; }
.pgst-kvs .kv { min-height: 48px; flex: 0 0 auto; }
.pgst-none { display: flex; }
.pgst-none .empty { flex: 1; }

/* ==========================================================================
   iPad: four columns, two rows, one screen. Sales pace takes two.
   ========================================================================== */
@media (min-width: 1000px) {
  #page-store.on { display: flex; }
  .pgst { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  /* the cards in a row share a bottom: four different ones read as four
     different rows, and the slack goes inside the cards instead of piling up
     as dead canvas under the shortest of them */
  .pgst-grid { grid-auto-rows: minmax(188px, auto); align-items: stretch; }
  /* …and the two rows share the PAGE. The grid used to end wherever its content
     did and leave ~100px of canvas under it on a 820px iPad, which reads as a
     page that stopped drawing. When everything fits without scrolling the rows
     take the height between them; the moment the content needs more than the
     screen the grid goes back to its own height and the page scrolls. */
  /* the team is the widest dataset: it takes two columns and fills the second row */
  .pgst-card[data-sum="team"] { grid-column: span 2; }
  .pgst-card[data-sum="team"] .pgst-lanes {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start; gap: 13px 20px;
  }
}

/* Wide iPad only (>=1120px, where the seven cards genuinely fit): the two rows
   share the PAGE. The grid used to end wherever its content did and leave ~100px
   of canvas under it on an 820px screen, which reads as a page that stopped
   drawing. Below 1120 the grid is taller than the screen anyway and scrolls, so
   the rule is not applied there — a row that has to squeeze to fit is worse than
   a page that scrolls. */
@media (min-width: 1120px) {
  .pgst-grid { min-height: 100%; grid-auto-rows: minmax(min-content, 1fr); }
  .pgst-card { min-height: 188px; }
  /* …unless there are more than seven cards. Pace spans two columns, so an
     eighth card (Inbox, once a mailbox is connected) makes three rows: with
     `min-height:100%` and 1fr rows the grid's own box stayed one screen tall
     while the third row spilled out of it, and the last card ended 103px past
     the bottom of a box that had already finished. Past seven the rows keep
     their own height and the page scrolls — which is what the scroller under
     `.pgst` was always for. */
  .pgst-grid:has(> :nth-child(8)) {
    min-height: 0; grid-auto-rows: minmax(188px, auto);
    /* and it may not be squeezed: as a flex item the grid's default is
       `flex-shrink: 1`, so three rows of content were compressed back into one
       screen's worth and every card in the first two rows drew its last lane
       over the card below it. It keeps its own height; `.pgst` scrolls. */
    flex: 0 0 auto;
  }
}

/* narrow iPad (1024 portrait): three columns, the grid scrolls rather than squeezing */
@media (min-width: 1000px) and (max-width: 1119px) {
  .pgst-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(186px, auto); }
}

/* ==========================================================================
   The short narrow iPad (1024x768 and 1112x834, both frames SPEC §2 names).
   Seven cards in three columns is three rows, and three rows of this content
   cannot fit 680px of page: at 1024 the grid measures 969. It scrolls, and it
   dissolves its last 48px through EVAL.dom.moreFade, which is the family's
   answer and is already armed here — that part is right and stays.

   What was wrong is WHERE the fold landed. Row 2 ended at 758 against a 754px
   page, so the dissolve was spent fading the inside of two cards that are
   otherwise whole (the Inventory card's "76+ days" row, Daina Dzenkovska's bar)
   while the two cards that are actually below the fold — Vitals and
   Appointments — began 16px past it and left no trace at all. The page read as
   finished at five of seven, and the fade read as decoration.

   So the rows give back the air they were not using and the third row comes up
   into the dissolve, where it says what it is: there is another row. Every
   number below is slack — padding, gaps, a tile floor — not a figure and not a
   type size; nothing shrinks, nothing is squeezed into a narrower column (round
   1 settled that a scroll beats a squeeze at this width), and the 44px hit box
   is the whole card.

   Measured at 1024x768: rows of 341 and 331 become 313 and 301, the grid 969
   becomes 893, and the third row starts at 712 against a 754px fold instead of
   at 770. Two rows now read whole — nothing is sliced — and Vitals and
   Appointments surface as two dissolving card tops, which is the page saying it
   continues rather than the page ending. All seven still do not fit 768px and
   are not meant to: that is what the scroller is for. */
@media (min-width: 1000px) and (max-width: 1119px) and (max-height: 860px) {
  .pgst-card { padding: 13px 15px 13px; gap: 11px; }
  .pgst-stack { gap: 11px; }
  .pgst-lanes { gap: 10px; }
  .pgst-lane { gap: 6px; }
  .pgst-tiles .tile { min-height: 66px; }
  .pgst-kvs .kv { min-height: 44px; }
  .pgst-card[data-sum="team"] .pgst-lanes { gap: 10px 20px; }
}

/* ==========================================================================
   Phone: one column, the page scrolls
   ========================================================================== */
@media (max-width: 999px) {
  .pgst-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pgst-card { padding: 14px 15px 15px; gap: 12px; }
  .pgst-card .s2 strong { font-size: var(--fs-d3); }
  .pgst-tiles .tile b { font-size: var(--fs-d3); }
  .pgst-lanes { gap: 11px; }
}