/* Morning Huddle -- Daily Wins.
   feat/daily-wins-v3 (Wayne 2026-08-13): all explanatory small text / callouts
   removed (header fine print, the "ties to the Daily Report" stamp, the pill
   subtitle, the store-table footnotes, the eligible-pool note). What remains is
   clean tables and numbers, given real hierarchy WITHIN the shared design
   system -- every value below resolves to a tokens.css variable, no bespoke
   palette. The heavy lifting (cards, tables, toolbar, CSV button, date select)
   is still done by the shared components: .table-container / .table-header /
   .data-table (table.css), .view-toolbar (table.css), .filter-group
   (layout.css), .csv-btn (csv-button.css). This file only carries the Daily
   Wins layout specifics (the 2-up board grid, numeric alignment, the leader
   hero treatment, and the comparator / flag semantic tints). No em dashes. */

#morningHuddleView .mh-wrap {
  max-width: 1100px;
  font-family: var(--font-stack);
}

/* Toolbar: the date picker rides .filter-group (pixel-identical to the shared
   filter-bar selects); the selected date sits beside it, plainly and legibly,
   as the only text in the header now that the fine print is gone. */
#morningHuddleView .mh-toolbar { margin-bottom: 20px; }
#morningHuddleView .mh-daystamp {
  font-size: var(--text-body); color: var(--navy); font-weight: 600;
  letter-spacing: 0.1px;
}

/* Custom-range date inputs ride the same .filter-group rhythm as the timeframe
   select; the native date control inherits the shared input styling. */
#morningHuddleView .mh-custom input[type="date"] {
  font-family: var(--font-stack); font-size: var(--text-body);
}

/* Clamp line: one plain sentence when a requested range predates the loaded
   window. Muted, single row, no card -- the only prose in the view by design. */
#morningHuddleView .mh-clamp {
  color: #6b7280; font-size: var(--text-body); margin: -8px 0 18px;
}

/* Section heading for the associate boards -- a real display-tier title so the
   two blocks read as distinct sections, not one long list. */
#morningHuddleView h2.mh-section {
  font-size: var(--text-display); color: var(--navy); font-weight: 700;
  margin: 30px 0 14px; letter-spacing: -0.2px;
}

/* Cards space out like the order-risk stack, with a touch more air. */
#morningHuddleView .mh-card { margin-bottom: 18px; }

/* The four associate boards sit two-up, each in its own shared table card. */
#morningHuddleView .mh-boards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
#morningHuddleView .mh-boards .mh-card { margin-bottom: 0; }

/* Roomier row rhythm than the default data grid so the boards feel designed
   rather than dumped. */
#morningHuddleView .mh-table td { padding: 12px 16px; }

/* Numeric columns right-align with tabular figures, same as every data grid. */
#morningHuddleView .data-table td.mh-num,
#morningHuddleView .data-table th.mh-num {
  text-align: right; font-variant-numeric: tabular-nums;
}

/* Rank column carries a soft circular badge rather than a bare digit. */
#morningHuddleView .data-table td.mh-rank,
#morningHuddleView .data-table th.mh-rank {
  text-align: center; width: 46px;
}
#morningHuddleView .mh-rankbadge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--table-header-bg); color: #6b7280;
  font-weight: 700; font-size: var(--text-eyebrow);
  font-variant-numeric: tabular-nums;
}

/* Store / associate names read as the row identity: navy and semibold. */
#morningHuddleView .data-table td.mh-store,
#morningHuddleView .data-table td.mh-assoc,
#morningHuddleView .data-table td.mh-store-cell {
  color: var(--navy); font-weight: 600;
}
#morningHuddleView .data-table td.mh-metric { color: #4b5563; }

/* The key number in each row is the hero -- clearly the largest thing on the
   line (heading tier vs the 13px body cells around it), navy and heavy. */
#morningHuddleView .data-table td.mh-actual {
  font-weight: 700; color: var(--navy); font-size: var(--text-heading);
}
#morningHuddleView .data-table td.mh-cmp {
  color: #6b7280; font-size: var(--text-body);
}

/* Leader hero: rank 1 in each board gets a warm contest band, a filled orange
   rank badge, a heavier name, and a display-tier value. Uses the same brand
   accent (--ashley-orange) and contest tint the BTR / contest views use, so it
   stays inside the Hub's own vocabulary. The high-specificity #id prefix keeps
   the band steady even over the shared hover rule, so the leader always pops. */
#morningHuddleView .data-table tr.mh-lead td { background: var(--contest-soft); }
#morningHuddleView .data-table tr.mh-lead td:first-child {
  background: var(--contest-soft);
  box-shadow: inset 3px 0 0 var(--ashley-orange);
}
#morningHuddleView .data-table tr.mh-lead .mh-rankbadge {
  background: var(--ashley-orange); color: #fff; box-shadow: var(--shadow);
}
#morningHuddleView .data-table tr.mh-lead td.mh-assoc { font-weight: 700; }
#morningHuddleView .data-table tr.mh-lead td.mh-actual {
  font-size: var(--text-display);
}

/* Semantic tints, unchanged: the >100% close-rate flag reads in brand orange
   (a "look here" signal); the multiplier reads success-green. Both are still
   driven by the refresh's data-integrity flags. */
#morningHuddleView .mh-flag { color: var(--ashley-orange); font-weight: 700; }
#morningHuddleView .mh-x { color: var(--success-green); font-weight: 700; }

#morningHuddleView .mh-empty {
  color: #6b7280; padding: 40px 8px; text-align: center; font-size: var(--fs-body);
}
#morningHuddleView .mh-retry { margin-left: 10px; }

@media (max-width: 760px) {
  #morningHuddleView .mh-boards { grid-template-columns: 1fr; }
}