/* SPDX-License-Identifier: MIT
 *
 * tint-card.css — THE STAT TILE AND ITS ROW (templates/components/stat_tile.html), SL_05B Part C:
 * hire4real's static/css/components/tint-card.css (1,105 lines at ad75133), ported in full for
 * the parts that ARE the tile. Their file also carries their scanner hero, their `plens` panel
 * machinery and a rank-ramp; those are hire4real-only surfaces (the plan's OUT OF SCOPE), and a
 * rank ramp is a verdict, so none of it comes across.
 *
 * FOUR PARTS, as theirs: the FIGURE (R16, tabular-nums, large), the LABEL (bold, wraps - R81c:
 * the label carries the scope, so it never ellipsizes), the DENOMINATOR line (R48: clamp-exempt,
 * because it carries what the figure is out of and when) and the INFO affordance bottom-left
 * (R52, info-icon.css). WRAP, NEVER ELLIPSIS (R81b): a figure cut to "#3 of 7,2…" is a number
 * with its denominator amputated, and that is a correctness bug, not a cosmetic one.
 *
 * COLOUR IS OURS. Their four tints were verdicts painted on a number (good, bad, a warning) and
 * their employer cards were red for denied and green for certified. Here a tile with a SERIES is
 * its series' tint with the series hue as the left rule (SL_03A Part G); a tile with no series -
 * a count, a headcount, a coverage figure - is the neutral surface with an ink rule, never an
 * accent borrowed from a neighbour. No amber either: a figure that fell is a number with an arrow
 * (metric-card.css), and the reader draws the conclusion. Every value is a token or a token alias
 * (design-tokens.css); scripts/lint_colorlaw.sh is red on a literal here.
 *
 * GEOMETRY IS PARITY TO THE 2026-10-01 SNAPSHOT (docs/parity/hire4real-2026-10-01/, measured
 * from employer-clip-top.png, scaled from its 1,000-px capture to 1,440): tiles 156 px wide with
 * a 0.5rem gap, six across in a 976-px row, equal heights within a row (167 px for row one there).
 */

/* The row. daisyUI's `stats` is the vocabulary; the grid is theirs. */
.stats.tile-grid {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(6, minmax(0, 9.75rem));   /* 156 px: the snapshot's track */
  gap: 0.5rem;
  align-items: stretch;                                    /* equal heights within a row */
  margin: 1.25rem 0 0.5rem;
  padding: 0;
  list-style: none;
}

/* Six across, then three: below 64rem the row is three columns, phones included. */
@media (max-width: 64rem) {
  .stats.tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The tile. Specificity matches daisyUI's `.stat`, and this sheet loads after site.css, so the
 * tile is a flex column rather than daisyUI's inline grid, and its parts may wrap. */
.tint-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;          /* a long label wraps instead of pushing the column */
  width: auto;
  padding: 0.6rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-2);
  background: var(--surface-2);
}

/* A tile with a series: its tint, and its hue as the left rule. */
.tint-card--series[data-series="lca"]  { background: var(--series-lca-tint);  border-left-color: var(--series-lca); }
.tint-card--series[data-series="perm"] { background: var(--series-perm-tint); border-left-color: var(--series-perm); }
.tint-card--series[data-series="warn"] { background: var(--series-warn-tint); border-left-color: var(--series-warn); }

/* R16 - the figure leads. R81b - it wraps at spaces, never ellipsizes, never breaks a number. */
.tint-card__big {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--ink);
  white-space: normal;
  overflow-wrap: normal;
}

/* R81c - the label is bold and wraps; it names the scope, so none of it may be cut. */
.tint-card__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--ink);
  white-space: normal;
  overflow-wrap: break-word;
}

/* R48 - THE DENOMINATOR LINE. Muted and small, and clamp-exempt: it carries what the figure is
 * out of and when, and a stylesheet does not get to decide how much of that a reader sees. */
.tint-card__sub {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--ink-2);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* R52 - the info affordance, bottom-left, with the figure's provenance tier beside it (Part E):
 * the foot row takes whatever room the row of tiles leaves below. */
.stat-tile__foot {
  margin-top: auto;
  padding-top: 0.15rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.35rem;
}

/* A narrow tile still holds a seven-character figure (228,000) without spilling into its
 * neighbour: the figure steps down where three columns share a phone. */
@media (max-width: 30rem) {
  .tint-card { padding: 0.5rem 0.55rem; }
  .tint-card__big { font-size: 1.1rem; }
}