/*
 * The Contractor Submission Review status strip's own rules (ISH-1365).
 *
 * ── Why a file, and why so little in it ─────────────────────────────────────
 *
 * The strip IS `css/kpi-card.css` — the app's shared segment component, on ten pages. Everything
 * about its surface, dividers, type and colour comes from there and must keep coming from there;
 * that file's header is explicit that a consumer overriding a `--kpi-*` variable is the escape
 * hatch and restating its rules is the drift it exists to end.
 *
 * What this file adds is the one thing no other consumer needs: on this page each segment is a
 * **control**. It filters the queue. So the markup is a `<button>` rather than a `<div>`, and a
 * button arrives carrying user-agent chrome — a border, a background, centred text, a system font
 * — that has to come back off before `.kpi-card`'s own look shows through.
 *
 * ⚠️ **Nothing here restates a `.kpi-*` rule.** Every declaration below is either a UA reset or a
 * state `css/kpi-card.css` has no opinion about (picked, zero). If you find yourself writing a
 * padding or a font-size that file already sets, the segment has stopped being a KPI card and the
 * question is whether it should be.
 *
 * ⚠️ Link it AFTER `css/kpi-card.css`, which is the same order that file asks every consumer for.
 */

/* ── The UA reset ────────────────────────────────────────────────────────────
 *
 * ⚠️ `text-align: left` and `font: inherit` are both load-bearing. A <button> centres its content
 * and switches to the system UI font, so without these the strip's five segments render centred
 * in a different typeface from every other KPI strip in the app — which reads as a broken page
 * rather than as a control. */
.kpi-grid .kpi-card[data-segment] {
  display: block;
  width: 100%;
  margin: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  /* ⚠️ **No `border` reset here, and that is the fix for a bug this file shipped with.**
     `.kpi-card` already writes `border: none; border-left: 1px solid var(--kpi-divider)` — the
     hairline that splits the strip into segments. A `border: 0` here is MORE specific
     (`.kpi-grid .kpi-card[data-segment]` beats `.kpi-card` whatever the link order), so it took
     the dividers out with the button chrome and the strip rendered as one undivided slab.
     Measured in the browser before the fix: `border-left-width: 0px`. The UA border is already
     gone by that same rule; there is nothing left to reset.

     Same for `border-radius`, which `.kpi-card` sets to 0 itself. */
  background: none;
  cursor: pointer;
}

.kpi-grid .kpi-card[data-segment]:hover {
  background: #fafafa;
}

/* ⚠️ A visible focus ring, and `:focus-visible` rather than `:focus`. Five segments in the tab
 * order with no ring is a keyboard user pressing blind; a ring on every mouse click is noise. */
.kpi-grid .kpi-card[data-segment]:focus-visible {
  outline: 2px solid var(--red, #a62626);
  outline-offset: -2px;
}

/* ── Picked ──────────────────────────────────────────────────────────────────
 *
 * ⚠️ **Three signals, not one.** The underline is the shape, the tinted ground is the area and
 * the red label is the text — because this state also has to survive `aria-pressed` being the
 * only thing a screen reader gets, and because a single 3px rule at the bottom of a segment is
 * easy to miss in a five-across strip. Colour alone would be the failure this repo has already
 * written up twice for chips. */
.kpi-grid .kpi-card[data-segment].is-picked {
  position: relative;
  background: #fef7f7;
}

.kpi-grid .kpi-card[data-segment].is-picked::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--red, #a62626);
}

.kpi-grid .kpi-card[data-segment].is-picked .kpi-label {
  color: var(--red, #a62626);
}

/* ── Zero ────────────────────────────────────────────────────────────────────
 *
 * ⚠️ **Receding, never hidden.** "No platform matches are waiting" is an answer, and it is most
 * of why the strip earns its place beside a queue whose own headings only appear where a row
 * exists. But at full weight the eye counts five things where two have work in them.
 *
 * ⚠️ `--text-label`'s value is passed as the fallback rather than left to the page: this file is
 * linked by one page today, and that token is one of the handful css/tokens.css lists as still
 * genuinely drifted per page. */
.kpi-grid .kpi-card[data-segment].is-zero .kpi-value {
  color: var(--text-label, #9b9b9b);
  font-weight: 600;
}

.kpi-grid .kpi-card[data-segment].is-zero .kpi-label {
  color: #a8a8a8;
}

/* A zero segment is still clickable — picking it is how you confirm the bucket really is empty
 * rather than filtered away — so it keeps the hover and the picked treatment. Nothing to write. */

/* ── Eight segments across (ISH-1386) ─────────────────────────────────────────
 *
 * The strip went from five rungs to eight: the off-platform lane, and "Nothing outstanding" split
 * back into Ready to go and Denied. `--kpi-cols` is set in the markup from `SEGMENTS.length`
 * (js/contractor-review-status.js) so the column count cannot drift from the segment count —
 * nothing here restates it.
 *
 * ⚠️ **The two breakpoints in css/kpi-card.css need nothing added.** They override
 * `grid-template-columns` to 3 and then 1 and reset their own borders with `nth-child(3n + 1)` and
 * `nth-child(n + 4)`, which are written against those counts rather than against `--kpi-cols` —
 * that file's header says so explicitly. Eight cards wrap to three rows at 3-up and the rules hold.
 * Above 900px eight cards sit in eight columns, one row, so the `:first-child` assumption holds
 * too. ⚠️ If a ninth segment is ever added, re-read that header before assuming the same.
 *
 * ⚠️ **The label floor is the only thing this needs, and it is not cosmetic.** At eight across a
 * segment is ~160px at a 1440px window, where "IDENTIFY THE CONTRACTOR" takes two lines and
 * "DENIED" takes one. `.kpi-content` is a flex COLUMN, so a one-line label lifts its number a whole
 * line above its neighbours' and the row of figures reads as a zigzag. Reserving two lines makes
 * every value start at the same y. Measured at 1280/1440/1920 — two lines is the worst case at all
 * three; the 3-up and 1-up wraps are wider per segment, so the floor is inert there and harmless.
 */
.kpi-grid .kpi-card[data-segment] .kpi-label {
  /* 2 lines at 0.625rem/1.25 — stated as a min so a one-line label still occupies two. */
  min-height: 1.5625rem;
  line-height: 1.25;
}

/* ⚠️ Narrower side padding than `.kpi-card`'s 0.85rem, which is the one rule here that DOES
   override the shared file — declared rather than inherited because eight segments is the first
   consumer narrow enough for it to matter. At 0.85rem a side, the gutters eat 13.6rem of the strip
   and "IDENTIFY THE CONTRACTOR" breaks after "IDENTIFY" instead of after "THE". The vertical
   padding is left alone: it sets the strip's height, which is shared with every other page. */
.kpi-grid .kpi-card[data-segment] {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}