/* EVO TrustGuard — /css/_lib/heatmap.css
 *
 * Owned by:    the shared calendar heat map, /js/_lib/heatmap.js (ADM-DASH1,
 *              C167). Linked by sales-metrics.html (the full calendar) and
 *              admin.html (the compact dashboard widgets).
 * Category:    shared admin component. Admin shells are PERMANENTLY DARK, so
 *              there is no light variant here.
 * Edit policy: MOVED VERBATIM from css/page-sales-metrics.css (C145-S6 /
 *              C149) so the two surfaces draw from one stylesheet. The
 *              .sm-hm--compact block at the foot is the only addition. The
 *              sm- prefix is kept on purpose: renaming would change the
 *              sales-metrics markup, which the extraction must keep
 *              byte-identical.
 */
:root {
  /* C145-S6 heat-map ramp. FOUR filled levels plus an empty level, on the
     brand red rather than GitHub's green so the calendar reads as part of
     this platform. Literal rgba of the --red hue is the sanctioned C103 wash
     pattern (a token alpha would not give us a five-step ramp).

     LEVEL 0 IS NOT TRANSPARENT. A day with no activity inside the selected
     range is INFORMATION — it is a day you did not work — and it has to be
     visibly different from a padding cell outside the range, which is not
     information at all. So level 0 gets a faint filled square and
     out-of-range cells get a nearly-invisible one. */
  --sm-hm-l0:  rgba(255, 255, 255, 0.07);
  --sm-hm-l1:  rgba(229, 52, 46, 0.28);
  --sm-hm-l2:  rgba(229, 52, 46, 0.50);
  --sm-hm-l3:  rgba(229, 52, 46, 0.72);
  --sm-hm-l4:  rgba(229, 52, 46, 0.95);
  /* OUT-OF-RANGE IS FULLY TRANSPARENT — no square at all. It was a
     near-invisible 0.02 wash, which put it ~1.14:1 against the in-range zero
     beside it: a distinction the spec REQUIRES, that a sighted reader could
     not actually make (screen-reader users got it from the label either way).
     Presence-vs-absence is categorical and unmissable, and it says what the
     cell means better than any wash could: a pad cell is scaffolding, not a
     day you failed to work. (Frontend agent finding 4b.) */
  --sm-hm-out: transparent;
  /* 15px as of C149 (SM-DASH1) — up from 12px so the calendar reads as the
     DOMINANT element of the dashboard panel (GitHub/Anthropic usage-panel
     proportions), paired with the compact tile restyle in the same sprint.
     Everything sized off this token (cells, day-label rows, month-label
     slots) scales with it; the grid still scrolls inside .sm-hm-scroll and
     the page body never scrolls sideways. */
  /* TODAY'S RING IS WHITE, NOT --red. It was var(--red) — which in the dark
     set is #e5342e, the SAME hue as --sm-hm-l4 at 0.95 alpha. On any range
     where today was the busiest day (very likely on 7d) the ring dissolved
     into its own fill and today lost its marker on exactly the day the
     marker mattered most. White reads against every step of the ramp AND
     against the empty ground. (Frontend agent finding 3b.) */
  --sm-hm-today: rgba(255, 255, 255, 0.92);
  --sm-hm-cell: 15px;
  --sm-hm-gap:  3px;
}

/* ── Calendar heat map ──
   GitHub-contribution shape: one cell per day, weeks as COLUMNS, weekday
   rows. Scrolls inside its OWN container — an 'all' range can be a year
   wide, and the page body must never scroll sideways. */
.sm-hm-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-3) var(--space-3) var(--space-2);
  background: var(--tier1-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
}
/* Focusable for the same reason .sm-tablewrap is: a plain overflow container
   is NOT keyboard-reachable in Chrome or Safari, so a keyboard user could
   not reach the columns that fall off the right edge at 375px. */
.sm-hm-scroll:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.sm-hm {
  display: flex;
  gap: var(--space-2);
  /* Shrink-wrap the columns so the flex row is exactly as wide as the grid;
     without this the scroll container reports the viewport width and the
     rightmost weeks are unreachable. */
  width: max-content;
}
.sm-hm-legendcol {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}
.sm-hm-monthspacer {
  height: calc(var(--text-xs) + 6px);
  display: block;
}
.sm-hm-daylabels {
  display: flex;
  flex-direction: column;
  gap: var(--sm-hm-gap);
}
.sm-hm-daylabel {
  height: var(--sm-hm-cell);
  line-height: var(--sm-hm-cell);
  font-size: var(--text-xs);
  color: var(--text-disabled);
  white-space: nowrap;
  padding-right: 2px;
}
.sm-hm-main { display: flex; flex-direction: column; }
.sm-hm-months {
  display: flex;
  gap: var(--sm-hm-gap);
  height: calc(var(--text-xs) + 6px);
}
.sm-hm-month {
  width: var(--sm-hm-cell);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  /* The label belongs to its column but is wider than one cell; letting it
     overflow keeps the columns aligned instead of stretching the grid. */
  overflow: visible;
}
.sm-hm-grid {
  display: flex;
  gap: var(--sm-hm-gap);
}
.sm-hm-col {
  display: flex;
  flex-direction: column;
  gap: var(--sm-hm-gap);
}
.sm-hm-cell {
  display: block;
  width: var(--sm-hm-cell);
  height: var(--sm-hm-cell);
  border-radius: 2px;
  background: var(--sm-hm-l0);
  flex: 0 0 auto;
}
.sm-hm-cell.is-l0 { background: var(--sm-hm-l0); }
.sm-hm-cell.is-l1 { background: var(--sm-hm-l1); }
.sm-hm-cell.is-l2 { background: var(--sm-hm-l2); }
.sm-hm-cell.is-l3 { background: var(--sm-hm-l3); }
.sm-hm-cell.is-l4 { background: var(--sm-hm-l4); }
/* Outside the selected range (week padding / after today). Nearly invisible
   ON PURPOSE — it is scaffolding, not a day you failed to work. */
.sm-hm-cell.is-out { background: var(--sm-hm-out); }

/* TODAY IS UNFINISHED, NOT MISSED. The ring is present in every state so the
   cell reads as "still fillable"; when today is still empty the ring is all
   it has, which is exactly the point. Ring via inset box-shadow rather than
   border so the cell keeps its token-sized box and stays aligned with its
   column. */
.sm-hm-cell.is-today {
  box-shadow: inset 0 0 0 2px var(--sm-hm-today);
  background: transparent;
}
/* ...but once there IS work today, the shade comes back UNDER the ring.
   Hiding the day's progress to make a point about it being unfinished would
   be the worse trade. */
.sm-hm-cell.is-today.is-l1 { background: var(--sm-hm-l1); }
.sm-hm-cell.is-today.is-l2 { background: var(--sm-hm-l2); }
.sm-hm-cell.is-today.is-l3 { background: var(--sm-hm-l3); }
.sm-hm-cell.is-today.is-l4 { background: var(--sm-hm-l4); }

.sm-hm-legend {
  display: flex;
  align-items: center;
  gap: var(--sm-hm-gap);
  margin-top: var(--space-2-5);
}
.sm-hm-legend-t {
  font-size: var(--text-xs);
  color: var(--text-disabled);
  margin: 0 var(--space-1);
}
/* A red-ringed square had no key. The ring is the one mark on the grid whose
   meaning is not "more or less" — without an entry here it was explained
   only by the title/aria-label, and title does not fire on touch. */
.sm-hm-legend-sep {
  width: 1px;
  align-self: stretch;
  background: var(--hairline);
  margin: 0 var(--space-2);
}

@media (max-width: 560px) {
  /* Tighter gutters on the heat-map container so more weeks land inside the
     first viewport before the reader has to scroll. The CELL SIZE IS
     DELIBERATELY UNCHANGED — the 15px desktop cell (C149) is kept at 375px
     rather than shrunk to win two more columns: the heat map is the
     dominant element by design, and the grid scrolls in its own container
     either way; nothing is truncated. (An earlier version of this comment
     claimed the cells shrink here. They never did — frontend agent finding
     6c.) */
  .sm-hm-scroll { padding: var(--space-2-5) var(--space-2-5) var(--space-2); }
}

/* ── Compact widget (ADM-DASH1) ──
   The admin dashboard's heat-map widgets: twelve weeks, smaller squares, no
   scroll region and no legend. The card around it carries the title and the
   headline. Sized off the same tokens, so the full calendar is untouched. */
.sm-hm--compact {
  --sm-hm-cell: 11px;
  --sm-hm-gap:  2px;
  gap: var(--space-1-5);
  max-width: 100%;
}
.sm-hm--compact .sm-hm-daylabel,
.sm-hm--compact .sm-hm-month { font-size: var(--text-xxs); }
.sm-hm--compact .sm-hm-monthspacer,
.sm-hm--compact .sm-hm-months { height: 14px; }
.sm-hm-compact-empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}