/* ==========================================================================
   Home: the player's clubhouse lobby (Phase 3a, Ledger IA 30 Sep).
   A compact photographic hero led by this month's League position, then
   Needs you (only when something is), Next game, Last time out, and a light
   Around the club. Redesign tokens (tokens.css, DQ20) and primitives
   (components.css) throughout; the one-off look of the old dashboard cards
   is gone with them.
   ========================================================================== */

#homeDashboard{ padding: 0 var(--space-4) var(--space-6); font-family: var(--font-ui); }

/* ---- Hero ------------------------------------------------------------------
   The photograph and one story (Shaun, 4 Oct): greeting, then the month's
   League position, named "Your September / League" before the position. Fewer
   things, more room: the greeting sits at the top of the photograph and the
   League story settles towards its foot, so the picture shows between them.
   Two gradients keep the left legible and blend the photo into the page; no
   frame, it is part of the page. Not the old marketing banner: it is sized to
   its story, with a floor rather than a reserved slab. */
.home-hero{
  position: relative; margin: 0 calc(-1 * var(--space-4)); box-sizing: border-box;
  display: flex; flex-direction: column; min-height: 336px;
  padding: 28px var(--space-4) var(--space-5);
  background:
    linear-gradient(90deg, rgba(10,10,9,0.9) 0%, rgba(10,10,9,0.66) 44%, rgba(10,10,9,0.12) 76%, rgba(10,10,9,0) 100%),
    linear-gradient(180deg, rgba(10,10,9,0) 0%, rgba(10,10,9,0.12) 55%, var(--surface-0) 100%),
    url("../../home/home-hero-padel.png") right 40% / cover no-repeat,
    var(--surface-0);
}
.home-hello{ display: flex; flex-direction: column; gap: 6px; }
.home-hello-date{ font-size: 13px; color: var(--text-dim); }
.home-hello-greeting{ font-family: var(--font-display); font-size: 26px; line-height: 1.1; color: var(--text); }
.home-greeting-name{ color: var(--accent-bright); }

/* The month, then the system, then the position, then the evidence. A
   ranking system is always named the same way on Home -- small capitals, as
   "League" here and "Power Rating" below -- so two positions never sit side
   by side unexplained. */
.home-month-context{
  margin-top: auto; padding-top: 36px;
  font-size: 14px; font-weight: 500; color: var(--text-soft);
}
.home-month{
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; min-height: var(--touch-min); margin-top: var(--space-3); padding: 0 28px 0 0;
  background: none; border: 0; border-radius: var(--radius-sm); color: var(--text); text-align: left;
  font-family: var(--font-ui); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.home-month-static{ cursor: default; }
.home-month-label{ font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.home-month-headline{ font-family: var(--font-display); font-size: 46px; line-height: 1.02; color: var(--text); }
.home-month-empty .home-month-headline{ font-size: 32px; }
.home-month-line{ margin-top: var(--space-2); font-family: var(--font-figures); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--text-soft); }
.home-month-chev{
  position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -5px;
  border-right: 1.5px solid var(--accent); border-top: 1.5px solid var(--accent); transform: rotate(45deg);
}
.home-month:active .home-month-headline{ opacity: .75; }
.home-choose{ margin-top: var(--space-4); align-self: flex-start; }

/* ---- Power: the longer view, under the photograph -----------------------------
   Named first ("Power Rating"), then the rating and the Power position within
   the tier, then recent form. One quiet panel, not a dashboard card. */
.home-block-power{ margin-top: var(--space-3); }
.home-power{
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: 6px; align-items: center;
  width: 100%; min-height: var(--touch-min); padding: 14px var(--space-4);
  background: var(--surface-1); border: 1px solid var(--surface-border); border-radius: var(--radius-md);
  color: var(--text); text-align: left; font-family: var(--font-ui); cursor: pointer;
}
.home-power:active{ background: var(--surface-2); }
.home-power-label{ grid-column: 1; font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); }
.home-power-main{ grid-column: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; }
.home-power-num{ font-family: var(--font-figures); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 600; line-height: 1.1; color: var(--text); }
.home-power-pos{ font-size: 14px; color: var(--text-soft); }
.home-power-form{ grid-column: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.home-power-sublabel{ font-size: 12.5px; color: var(--text-dim); }
.home-power-chev{ grid-column: 2; grid-row: 1 / span 3; }
.home-form-dots{ display: inline-flex; gap: 3px; }
.home-form-dots .form-dot{ width: 7px; height: 7px; }
.home-form-record{ font-family: var(--font-figures); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-dim); }
.home-power:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.is-up{ color: var(--move-up); }
.is-down{ color: var(--move-down); }

/* ---- Sections -------------------------------------------------------------- */
.home-section{ margin-top: var(--space-5); }
/* Below the hero the first section starts closer: one column only (on a
   monitor the two columns must start level). */
@media (max-width: 1199px){ .home-block-hero + .home-section{ margin-top: var(--space-3); } }
.home-section > .mp-section-head{ margin-top: 0; min-height: var(--touch-min); margin-bottom: var(--space-1); }
.home-head-link{
  margin-left: auto; min-height: var(--touch-min); padding: 0 0 0 var(--space-3);
  background: none; border: 0; color: var(--accent); font-family: var(--font-ui); font-size: 13px; font-weight: 500; cursor: pointer;
}

/* Needs you: a disclosure. The whole heading row is the control; the count is
   the signal; the chevron sits at the far end. Open, it is a short list of
   two-line summaries, each a door into the game -- no buttons, no boxes. */
.home-needs-head{ margin: 0; padding-right: 6px; }
button.home-needs-head::after{ margin-left: auto; }
.home-needs-head .mp-count-badge{ margin-left: var(--space-1); }
.home-needs-head:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.home-needs-list, .home-panel{
  background: var(--surface-1); border: 1px solid var(--surface-border); border-radius: var(--radius-md); overflow: hidden;
}
.home-needs-list{ margin-top: var(--space-1); border-color: var(--accent-hairline); }
.home-needs-list .mp-list-row{ border-bottom: 0; }
.home-game-row{
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3);
  width: 100%; min-height: 56px; padding: 10px var(--space-4);
  background: none; border: 0; border-bottom: 1px solid var(--surface-border-soft);
  color: var(--text); text-align: left; font-family: var(--font-ui); cursor: pointer;
}
.home-game-row.has-date{ grid-template-columns: auto minmax(0, 1fr) auto; }
.home-game-row:last-child{ border-bottom: 0; }
.home-game-row:active{ background: var(--surface-2); }
.home-game-row:focus-visible{ outline: 2px solid var(--accent); outline-offset: -2px; }
.home-game-row-main{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-game-row-teams{ font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-game-row-meta{ font-size: 12.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-booked{ color: var(--state-booked); }

/* Quiet list rows (Nothing booked yet, waiting on others, the review). */
.home-section .shell-list{
  background: var(--surface-1); border: 1px solid var(--surface-border); border-radius: var(--radius-md); overflow: hidden;
}
.home-panel + .shell-list{ margin-top: var(--space-2); }

/* ---- Last time out: the result is the centre -------------------------------- */
.home-lastresult{
  padding: var(--space-3) var(--space-4) var(--space-3);
  background: var(--surface-1); border: 1px solid var(--surface-border); border-radius: var(--radius-md);
}
.home-lastresult-empty{ padding: var(--space-4); }
.lr-context{ font-size: 12px; color: var(--text-dim); }
.lr-score{ display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-2); }
.lr-side{
  display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--lr-sets, 2), 26px); align-items: center; column-gap: 4px;
  color: var(--text-dim);
}
.lr-names{ font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-side-won .lr-names{ color: var(--text); }
.lr-set{ font-family: var(--font-display); font-size: 26px; line-height: 1; text-align: center; color: var(--icon-inactive); }
.lr-set-won{ color: var(--text); }
.lr-foot{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--surface-border-soft);
}
.lr-result{ font-size: 13.5px; color: var(--text-soft); }
.lr-delta{ font-family: var(--font-figures); font-variant-numeric: tabular-nums; font-weight: 600; }
.lr-view{
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch-min); padding: 0;
  background: none; border: 0; color: var(--accent); font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.lr-view::after{ content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); }
.lr-note{ margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }

/* ---- Around the club: a light rail ------------------------------------------
   Swipeable on a phone, each card wide enough to read and narrow enough that
   the next one shows; native momentum and snap, no scrollbar. */
.home-club-rail{
  display: flex; gap: var(--space-2); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 var(--space-4);
  margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4) 2px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.home-club-rail::-webkit-scrollbar{ display: none; }
.home-club-item{ flex: 0 0 62%; max-width: 260px; scroll-snap-align: start; }
.home-pulse-card{
  display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 92px; padding: var(--space-3) var(--space-4);
  background: var(--surface-1); border: 1px solid var(--surface-border); border-radius: var(--radius-md);
  color: var(--text); text-align: left; font-family: var(--font-ui); cursor: pointer;
}
.home-pulse-card:active{ background: var(--surface-2); }
.home-pulse-title{ font-size: 12px; color: var(--text-dim); }
.home-pulse-name{ font-family: var(--font-display); font-size: 24px; line-height: 1.1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.home-pulse-sub{ font-family: var(--font-figures); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--accent); }
.home-pulse-sub.is-up{ color: var(--move-up); }
.home-club-review{ margin-top: var(--space-2); }

/* Focus is always visible on Home's own controls. */
.home-month:focus-visible, .home-pulse-card:focus-visible,
.lr-view:focus-visible, .home-head-link:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }