/* 190pools home / hub (/). Builds on css/styles.css (loaded first) and reuses the
   .arc-card compact-row pattern from css/archive.css, which is loaded here too —
   both files are on the page, so the card rules are shared rather than copied.

   One rule for the whole file: nothing here may create or remove a node, and
   nothing may change geometry after load. The hub is correct as authored; JS
   only ever tightens the words. See js/home.js. */

.hub-main { max-width: 720px; }

/* .site-title is a flex row with gap:10px — two spans would render "190 pools". */
.hub-title { gap: 0; letter-spacing: -0.03em; }
.hub-title .t-pools { color: var(--gold); text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }

/* Section labels. One class, used on a <p> (eyebrow) and an <h2>. */
.hub-label {
  margin: 8px 0 -4px; font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft);
}

/* ------------------------------- the hero ------------------------------- */
.hub-hero { border-left: 5px solid var(--hub-accent, var(--line)); padding: 18px; }
.hub-hero .card-head h2 { font-size: clamp(1.15rem, 5vw, 1.5rem); display: flex; align-items: baseline; gap: 9px; }
.hub-hero-emoji { font-size: 1.3rem; line-height: 1; }
.hub-hero-mnf { --hub-accent: #0b3d2c; }   /* matches .mnf-link-30 */
.hub-hero-golf { --hub-accent: #1a4d2e; }  /* matches .arc-card-golf, for next summer */

/* The two volatile lines. A reserved height plus nowrap+ellipsis makes layout
   shift structurally impossible: a surprise long string truncates, it never
   reflows. This is why the pill carries the POOL's state and these carry the
   GAME's — a pill growing from "In season" to a full date wraps on a phone and
   pushes the entire page down. */
.hub-when, .hub-game {
  margin: 0; min-height: 1.35em; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hub-when { font-weight: 700; font-size: .92rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.hub-game { font-size: .86rem; color: var(--ink-soft); }
.hub-blurb { margin: 8px 0 0; font-size: .86rem; color: var(--ink-soft); line-height: 1.45; }
.hub-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }

/* One column per board: the button, then that board's last result and pot.
   Both captions reserve their height and truncate rather than wrap, so filling
   them in from the feed cannot move anything below. */
.hub-board { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.hub-board-last, .hub-board-pot {
  min-height: 1.3em; line-height: 1.3; padding-left: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.hub-board-last { font-size: .78rem; color: var(--ink-soft); font-weight: 600; }
.hub-board-pot { font-size: .8rem; color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.hub-board-pot .hub-roll { font-weight: 600; color: var(--ink-soft); }

@media (max-width: 420px) {
  .hub-hero-actions { gap: 12px; }
  .hub-board { width: 100%; }
  .hub-board .btn { width: 100%; justify-content: center; }
  .hub-board-last, .hub-board-pot { align-self: center; }
}

/* ------------------------------ compact rows ---------------------------- */
.hub-rows { margin-top: 2px; }
.hub-row { border-left-color: var(--hub-accent, var(--line)); }
.hub-row-sq   { --hub-accent: var(--mets-blue); }
.hub-row-mlb  { --hub-accent: var(--mets-orange); }
.hub-row-pg   { --hub-accent: var(--gold); }
.hub-row-golf { --hub-accent: #1a4d2e; }

/* .arc-card-go takes margin-left:auto in archive.css; with a pill in front of it
   the PILL must take the auto margin or the two fight for the right edge. */
.hub-row-status { margin-left: auto; flex: 0 0 auto; }
.hub-row .arc-card-go { margin-left: 10px; }

/* Promotion when the hero's season has passed: colour only, no geometry. */
.hub-row-next { --hub-accent: var(--mets-orange); }
.hub-row-next .arc-card-title { color: var(--mets-blue); }

/* A wrapped-up pool fades its accent rather than disappearing. */
.is-wrapped { --hub-accent: var(--line); }
.is-wrapped .arc-card-emoji, .is-wrapped .hub-hero-emoji { opacity: .6; }

/* ------------------------------ status pills ---------------------------- */
/* .status-pill and its .live / .final variants already live in styles.css.
   Only "not yet" is new; it borrows the .lock-chip.draft palette so the site
   keeps a single visual language for "this hasn't started". */
.status-pill.soon { background: #fff4d6; color: #8a5a00; border-color: #f2d287; }

/* ------------------------------ soft-404 note --------------------------- */
.hub-404 {
  margin: 0; padding: 10px 14px; border-radius: var(--radius-sm);
  background: #fff4d6; border: 1px solid #f2d287; color: #8a5a00;
  font-size: .86rem; line-height: 1.45;
}

/* ------------------------------ a11y helper ----------------------------- */
/* Promote to styles.css the moment a second page needs it. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ------------------------------ responsive ------------------------------ */
/* A long h2 plus a pill wraps the pill onto its own line at 360px; stack it
   above the heading instead so nothing jumps. */
@media (max-width: 480px) {
  .hub-hero .card-head { flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
}
/* Reclaim ~24px on narrow phones — the arrow is aria-hidden decoration. */
@media (max-width: 420px) {
  .hub-row .arc-card-go { display: none; }
  .hub-row-status { font-size: .66rem; padding: 3px 8px; }
}
@media (min-width: 600px) {
  .hub-hero { padding: 22px 24px; }
}

/* No @keyframes anywhere in this file, deliberately: the global
   prefers-reduced-motion rule (styles.css) zeroes durations but sets
   animation-iteration-count:1, so an animation would still play once. */