/* ---- The status vocabulary -------------------------------------------------
   One job: how this platform says what state a thing is in. The ID tag, the
   chip and the cell strip (style guide 7.4), and nothing else. Split out of
   `primitives.css`, which keeps the surfaces those statuses sit on.

   It is its own file because it is its own responsibility: this vocabulary is
   linked by the application shell, by the offline audit pack and by anything
   else that renders a status, and it was previously three chip families in
   three files, two of them defining `.chip` with opposite weights.

   Two rules hold the whole file together:

   1. **A status is a shape and a word before it is a colour.** Every chip
      carries a cell glyph from the sprite (`partials/nav_icons.html`), so a
      tenant accent, dark mode and colour vision all survive. The rule is that
      no two statuses a reader must tell apart differ by colour alone. Closed
      and satisfied are the one pair that share a shape, because the style
      guide draws closed as the satisfied cell muted (7.4): they are the same
      "nothing is owed here" read, and tone is the whole difference.
   2. **Blue is chrome and never a status.** There is no accent chip. The
      case state that used to be drawn in the accent is in progress, on the
      neutral ground, like every other in-progress thing.
   -------------------------------------------------------------------------- */

/* ---- 7.4 The ID tag -------------------------------------------------------
   Mono on a sunk ground, never coloured by status. */

.tag-id {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--ink-2);
  background: var(--surface-sunk);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- 7.4 The chip ---------------------------------------------------------
   One recipe. A pill, the cell glyph at the left, the word after it. The soft
   form is the default; `.chip--loud` is the filled one, for the attention
   list and a binding gap. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--neutral-soft);
  color: var(--slate);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: var(--fw-medium);
  /* A chip is one short label and holds its own line; CJK otherwise breaks
     between any two characters. */
  white-space: nowrap;
  word-break: keep-all;
}
.chip__glyph {
  flex: none;
  display: block;
  width: 12px;
  height: 12px;
}

/* Satisfied, and the assurance that a second person stood behind it. */
.chip-satisfied,
.chip-verified,
.chip-reviewed,
.chip-ok { background: var(--ok-soft); color: var(--ok); }

/* In progress, not started, not applicable and closed are the neutral ground;
   the word takes `--slate` because `--neutral-soft` has no text contrast of
   its own, and in progress takes `--ink-2` because it is the live one. */
.chip-in_progress,
.chip-case-working { background: var(--neutral-soft); color: var(--ink-2); }
.chip-not_started,
.chip-not_applicable,
.chip-closed,
.chip-case-closed,
.chip-kind,
.chip-quiet { background: var(--neutral-soft); color: var(--slate); }
/* An empty cell has to be seen to be read, so its outline is `--line-strong`
   rather than the slate its word takes. */
.chip-not_started .chip__glyph { color: var(--line-strong); }

/* Waiting on you: new, awaiting information, due soon, expiring, and
   "unreviewed", which is this product's name for "satisfied, but nobody but
   the person who attached it has read it". The style guide names unreviewed
   in both places: as an amber "waiting on you" in 5.1 and as a shape on the
   satisfied tone in 7.4. Here it is amber, because the chip is a badge beside
   the satisfied chip rather than the satisfied chip itself: it says a second
   pair of eyes is still owed, which is a thing waiting on a person. */
.chip-waiting,
.chip-unreviewed,
.chip-warn,
.chip-warning,
.chip-scheduled,
.chip-case-open,
.chip-case-waiting { background: var(--warn-soft); color: var(--warn); }

/* Wrong now: a gap, expired evidence, an elapsed clock. */
.chip-gap,
.chip-expired,
.chip-overdue,
.chip-crit { background: var(--crit-soft); color: var(--crit); }

.chip-waived { background: var(--waived-soft); color: var(--waived); }

/* The loud form, for the attention list and a gap that blocks a release. It
   is always written beside a status class, which is what gives it its ground. */
.chip--loud.chip-satisfied,
.chip--loud.chip-verified,
.chip--loud.chip-reviewed,
.chip--loud.chip-ok { background: var(--ok); color: var(--on-ok); }
.chip--loud.chip-waiting,
.chip--loud.chip-unreviewed,
.chip--loud.chip-warn,
.chip--loud.chip-warning,
.chip--loud.chip-scheduled,
.chip--loud.chip-case-open,
.chip--loud.chip-case-waiting { background: var(--warn); color: var(--on-warn); }
.chip--loud.chip-gap,
.chip--loud.chip-expired,
.chip--loud.chip-overdue,
.chip--loud.chip-crit { background: var(--crit); color: var(--on-crit); }
.chip--loud.chip-waived { background: var(--waived); color: var(--on-waived); }
.chip--loud.chip-in_progress,
.chip--loud.chip-case-working,
.chip--loud.chip-not_started,
.chip--loud.chip-not_applicable,
.chip--loud.chip-closed,
.chip--loud.chip-case-closed,
.chip--loud.chip-kind,
.chip--loud.chip-quiet { background: var(--neutral); color: var(--ink); }
.chip--loud .chip__glyph { color: inherit; }

/* ---- 7.4 The cell strip ---------------------------------------------------
   The progress control: one 10px cell per item, 3px gap, wrapping. Never a
   percentage bar inside the application. */

.cells {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  --cell-size: 10px;
}
.cells--lg { --cell-size: 22px; }

.cell {
  flex: none;
  width: var(--cell-size);
  height: var(--cell-size);
  border-radius: var(--radius-cell);
  background: var(--neutral-soft);
}
.cell--verified,
.cell--reviewed { background: var(--ok); }
/* The one state that is a fill and a hole: satisfied and read by a second
   person. The hole is the surface, so it works on any ground a strip sits on. */
.cell--reviewed {
  background:
    radial-gradient(circle at 50% 50%, var(--surface) 0 22%, transparent 22%),
    var(--ok);
}
.cell--unreviewed { background: var(--ok-hatch), var(--ok-soft); }
.cell--progress {
  background: linear-gradient(to right, var(--ink-2) 0 50%, transparent 50%);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.cell--todo {
  background: none;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.cell--na {
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--neutral) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    var(--neutral-soft);
  box-shadow: inset 0 0 0 1px var(--neutral);
}
.cell--waived {
  background: linear-gradient(to bottom right, transparent 0 50%, var(--waived) 50%);
  box-shadow: inset 0 0 0 1px var(--waived);
}
.cell--gap,
.cell--expired { background: var(--crit); }
.cell--waiting { background: var(--warn); }
.cell--closed { background: var(--neutral); }


/* ---- 7.4 The cell as a shape ----------------------------------------------
   The same vocabulary drawn as its glyph instead of as its fill, for the one
   size where a fill is not enough: the Clause 5 map draws a 22px square per
   requirement, and three of the states it uses (satisfied, expired and
   waiting on you) are solid grounds that would differ by colour alone at that
   size. The state class still names the state and gives it its colour; the
   sprite symbol inside carries the shape, exactly as it does on a chip.

   Written after the fills on purpose: every rule here weighs the same as the
   ground it replaces, so only source order takes that ground away. */

.cell--glyph {
  background: none;
  box-shadow: none;
  color: var(--neutral);
}
.cell--glyph > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.cell--glyph.cell--verified,
.cell--glyph.cell--reviewed,
.cell--glyph.cell--unreviewed { color: var(--ok); }
.cell--glyph.cell--progress { color: var(--ink-2); }
/* Seen to be used, like every empty outline in this system. */
.cell--glyph.cell--todo { color: var(--line-strong); }
.cell--glyph.cell--na,
.cell--glyph.cell--closed { color: var(--neutral); }
.cell--glyph.cell--waived { color: var(--waived); }
.cell--glyph.cell--gap,
.cell--glyph.cell--expired { color: var(--crit); }
.cell--glyph.cell--waiting { color: var(--warn); }