/*
 * The console's one pill (ticket 001077, audit finding SC10). Every status pill, chip and badge in the
 * console has one shape and one of four tones, so the same state looks the same on every page.
 *
 *   Shape  one height (1.5rem), one radius (a full pill), one padding (0 0.65rem), the body face (never
 *          monospace), the 13px footnote size, weight 600, a solid 1px border, sentence case. A pill
 *          that carries a dot (`.pill__dot`, `.live-chip__dot`) keeps it as a child; the dot is not part
 *          of the shape. `.chip--lg` and `.briefing-rating__badge` are the one larger size.
 *   Tone   neutral (the default: a fact, a label, a kind), good (running, online, verified, signed in),
 *          warning (partial, paused, stale, high, self-reported), bad (offline, critical, a mismatch,
 *          a server error). Each tone sets three custom properties, `--pill-ink`, `--pill-line` and
 *          `--pill-fill`, and the shape reads them, so a tone rule below is a list of selectors and
 *          nothing else.
 *
 * This sheet loads last (index.html) and every shape and tone rule is prefixed with `:root`, which lifts it one class
 * above a bare pill rule and ties it with a two-class rule such as `.entities-table .chip`; the later
 * sheet then wins. That is how it overrides the pill rules still left in console.css, console-simple.css,
 * connectors.css, fleet.css and entities.css: those rules are dead now and wait for a later cleanup
 * (the ticket lists them). The old classes stay in the markup as the hooks the tone lists below select
 * on.
 *
 * Old class to tone (the same table is in ticket 001077's Result):
 *   neutral  .pill (no tone class), .pill.status-3xx, .pill.status-unknown, .pill.rstatus-2xx,
 *            .pill.rstatus-3xx, .pill.rstatus-unknown, .chip (no variant), .chip--agentic-medium,
 *            .chip--agentic-low, .chip--agentic-none, .chip--severity-medium, .chip--severity-low,
 *            .chip--severity-info, .chip--outcome, .chip--match-deterministic, .chip--match-probabilistic,
 *            .chip--observed, .chip--planted, .chip--credential-kind, .chip--never, .chip--removed,
 *            .prov (no variant), .prov--enriched, .prov--inferred, .ig-chip--analyst, .ig-chip--crawler,
 *            .ig-prov--analyst, .ig-prov--llm-inferred, .ig-verify (unknown), .fleet-chip (no variant),
 *            .fleet-chip--never, .fleet-chip--removed, .fleet-chip--service, .fleet-chip--check,
 *            .fleet-chip--sev-low, .live-chip (paused), .scenario-card__badge,
 *            .scenario-card__badge--recommended, .traffic-origin (all kinds), .session-tag,
 *            .agent-signal, .cred-type (all kinds)
 *   good     .pill.status-2xx, .chip--online, .fleet-chip--online, .ig-verify--verified,
 *            .live-chip--live, .scenario-card__badge--current
 *   warning  .pill.status-4xx, .pill.rstatus-4xx, .chip--agentic-confirmed, .chip--agentic-high,
 *            .chip--severity-high, .chip--paused, .chip--self-reported, .prov--self-reported,
 *            .ig-prov--self-reported, .fleet-chip--sev-medium, .live-chip--stale,
 *            .partial-badge__button
 *   bad      .pill.status-5xx, .pill.rstatus-5xx, .chip--severity-critical, .chip--offline,
 *            .fleet-chip--offline, .fleet-chip--sev-high, .ig-verify--mismatch
 *
 * Left alone on purpose, because they are controls and not status: .help-chip, .harbor__chip (the pixel
 * harbor's glass labels), .evidence-filter-chip (a removable filter), .home-status (a banner),
 * .settings-card__tag (a plain note), .ig-ref-more.
 */

:root {
  --pill-height: 1.5rem;
}

/* ---- Shape ----------------------------------------------------------------------------------- */

:root :is(
  .pill,
  .chip,
  .prov,
  .fleet-chip,
  .live-chip,
  .scenario-card__badge,
  .partial-badge__button
) {
  --pill-ink: var(--ink-dim);
  --pill-line: var(--border-strong);
  --pill-fill: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  box-sizing: border-box;
  min-height: var(--pill-height);
  margin-block: 0;
  padding: 0 0.65rem;
  border: 1px solid var(--pill-line);
  border-radius: 9999px;
  background: var(--pill-fill);
  color: var(--pill-ink);
  font: 600 var(--fs-2xs) / 1.2 var(--font-ui);
  letter-spacing: normal;
  text-transform: none;
}

/* The four that have no single-line rule of their own: the `.chip` and `.prov` base rules held it in
   investigations.css and went with them. `.pill`, `.fleet-chip` and `.live-chip` keep the nowrap they
   already carry in console.css and fleet.css (and the legend and readiness panel keep the wrap they ask
   for, so no white-space is set above). */
.chip,
.prov,
.partial-badge__button,
.scenario-card__badge {
  white-space: nowrap;
}

:root .partial-badge__button {
  appearance: none;
  cursor: pointer;
}

:root .partial-badge__button:hover,
:root .partial-badge__button[aria-expanded="true"] {
  border-color: var(--pill-ink);
}

/* The one larger size: the investigation header's conclusion chip and the briefing's rating. */
:root :is(.chip--lg, .briefing-rating__badge) {
  min-height: 2rem;
  padding: 0 0.9rem;
  font-size: var(--fs-sm);
}

/* A compact group chip cuts a long name with an ellipsis, which a flex container cannot do. */
:root .chip.ig-ref--compact {
  display: inline-block;
  line-height: calc(var(--pill-height) - 2px);
  padding-block: 0;
}

/* The live dot follows the pill's ink. */
:root .live-chip__dot {
  background: currentColor;
}

:root .live-chip--live .live-chip__dot {
  animation: pill-pulse 2.4s ease-out infinite;
}

@keyframes pill-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent);
  }
  70% {
    box-shadow: 0 0 0 7px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* The investigation header's meta strip (views/investigation.js) puts the severity word in a bare
   `.chip--severity-*` span, not a full chip: it takes its tone's ink (High amber, Critical red, the rest
   neutral) and nothing else. */
:root [class^="chip--severity-"] {
  color: var(--pill-ink, var(--ink-dim));
}

/* A group member's verdict inside a page chip (js/group_chips.js) is a word in the chip, not a pill of
   its own: it takes its tone's ink and nothing else. */
:root .ig-ref__verify {
  color: var(--pill-ink, var(--ink-dim));
  font-weight: 600;
}

/* ---- Sentence case ---------------------------------------------------------------------------- */

/* The provenance and verdict words arrive in capitals from entity_format.js and intrusion_group_format.js
   (OBSERVED, SELF-REPORTED, CASE OFFICER PIN, VERIFIED, MISMATCH, UNVERIFIED). Fold them here: lower case
   with a capital first letter. `::first-letter` needs a block container, hence inline-block. LLM-INFERRED
   is left as written, because it holds an acronym. */
:root :is(
  .chip--observed,
  .chip--self-reported,
  .ig-prov--self-reported,
  .ig-prov--analyst,
  .ig-verify
) {
  display: inline-block;
  padding-block: 0;
  line-height: calc(var(--pill-height) - 2px);
  text-transform: lowercase;
}

:root :is(
  .chip--observed,
  .chip--self-reported,
  .ig-prov--self-reported,
  .ig-prov--analyst,
  .ig-verify
)::first-letter {
  text-transform: capitalize;
}

/* ---- Tones ------------------------------------------------------------------------------------ */

/* Neutral is the shape's default; the variants that used to carry a colour of their own need no rule. */

:root :is(
  .pill.status-2xx,
  .chip--online,
  .fleet-chip--online,
  .ig-verify--verified,
  .live-chip--live,
  .scenario-card__badge--current
) {
  --pill-ink: var(--st-2xx);
  --pill-line: color-mix(in srgb, var(--st-2xx) 45%, transparent);
  --pill-fill: color-mix(in srgb, var(--st-2xx) 10%, transparent);
}

:root :is(
  .pill.status-4xx,
  .pill.rstatus-4xx,
  .chip--agentic-confirmed,
  .chip--agentic-high,
  .chip--severity-high,
  .chip--paused,
  .chip--self-reported,
  .prov--self-reported,
  .ig-prov--self-reported,
  .fleet-chip--sev-medium,
  .live-chip--stale,
  .partial-badge__button
) {
  --pill-ink: var(--st-4xx);
  --pill-line: color-mix(in srgb, var(--st-4xx) 45%, transparent);
  --pill-fill: color-mix(in srgb, var(--st-4xx) 10%, transparent);
}

:root :is(
  .pill.status-5xx,
  .pill.rstatus-5xx,
  .chip--severity-critical,
  .chip--offline,
  .fleet-chip--offline,
  .fleet-chip--sev-high,
  .ig-verify--mismatch
) {
  --pill-ink: var(--st-5xx);
  --pill-line: color-mix(in srgb, var(--st-5xx) 45%, transparent);
  --pill-fill: color-mix(in srgb, var(--st-5xx) 10%, transparent);
}

/* ---- The Partial chip (js/partial_badge.js, js/evidence_toolbar.js) ----------------------------- */

/* One chip per page: the strip's. A view draws its own badge for the same read (the list header, the
   count line, a detail card, each Meeting Site card) and also announces its sentences to the strip, which
   lists them under its chip, so while the strip is on screen the view's badge is hidden. The strip sits in
   the page head (js/page_head.js moves it there), so the gate is `:has()`, not a sibling. A page whose
   strip is not on screen keeps the view's own badge, since no other chip says it. Whether the strip is on
   screen is not its `hidden` attribute alone: console-simple.css hides it with `display: none` on the Case
   Files and Rings lists, and depth.css hides it at its home on the five pages that move it into their head
   (the same list as depth.css's rule), so those pages count it as on screen only once `is-in-head` is set.
   The AI agents 7-day list puts a "Last 7 days" label in its head instead of the strip: its badge stays. */
body:not([data-route="case-files"], [data-route="rings"], [data-route="investigate"], [data-route="meeting-sites"], [data-route="reports"], [data-route="war-room"], [data-route="overview"]:not(.is-board)):has(#evidence-summary:not([hidden])) .partial-badge:not(.partial-badge--page),
body:is([data-route="investigate"], [data-route="meeting-sites"], [data-route="reports"], [data-route="war-room"], [data-route="overview"]:not(.is-board)):has(#evidence-summary.is-in-head:not([hidden])) .partial-badge:not(.partial-badge--page) {
  display: none;
}

/* The one-line caption beside the strip's chip: what is partial and what would complete it. */
.partial-badge__caption {
  margin-left: 0.5rem;
  color: var(--ink-dim);
  font: var(--type-footnote);
}

.partial-badge__caption:empty {
  display: none;
}