/* Tier chips — the CSS half of web/tiers.js.
 *
 * Every rule below is keyed by a confidence tier, and until now every one of
 * them existed three times: once in dash.css, once in lab.css and once in
 * validation.css, with the copies already out of step. The lab had no rule at
 * all for `scenario_only` or `extrapolated`, and the validation view coloured
 * `scenario_only` in the same amber it uses for `unverified`, so two rungs the
 * platform distinguishes in words looked identical on the page. It is styled
 * here now, once, and the four views load this sheet alongside their own.
 *
 * Colour never carries a tier on its own: the word is printed in every chip,
 * and the dot is drawn in the text colour rather than given a hue of its own.
 *
 * Token discipline. This file used to declare the whole tier palette six times
 * over — the light default, the system-dark media query, the explicit
 * data-theme="dark" toggle, and the same three again for an invented "AGN"
 * skin — 204 hand-typed hex values for nine rungs. Every one of them is gone.
 * The rungs are generated in tools/gen_brand.py from the company palette and
 * declared once in brand.css, which all four views load first, so a rung
 * cannot reach one theme and miss another and there is no second opinion about
 * what `validated` is coloured. Adding a rung is now one edit in the generator.
 *
 * The tier hues are semantic rather than decorative: green stands behind it,
 * teal is anchored on the operator, navy on somebody else, orange is a fitted
 * tail, grey is an absence of information, sand is a broken unit, red is
 * unusable. `scenario_only` stays deliberately hueless — a peril off the loss
 * books gets ink, not a colour.
 */


/* ---------------------------------------------------------- tier chip --- */
/* Colour never alone — the word is always present. */
.tier{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:3px;
  font-size:var(--t-micro); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap;
}
.tier::before{
  content:""; width:7px; height:7px; border-radius:50%; background:currentColor;
  flex:0 0 auto; box-sizing:border-box; position:relative;
}
/* The dot carries the state as a SHAPE, not only as a colour.
 *
 * `--t-unverified` and `--t-none` are the same ink -- 0.0 dE apart in both
 * themes -- and they mean different things: unverified is a figure nobody has
 * checked, no-data is no figure at all. The best achromatic pair that keeps
 * both chips above 6:1 separates them by 3.7 dE, and at this cap height 3.7 dE
 * is invisible. So the four states a reader has to tell apart get four forms,
 * and colour is left to do the work it can actually do.
 *
 *   filled   the platform has a figure and has checked it
 *   half     carried past the deepest return period the source publishes
 *   hollow   a figure exists and nobody has checked it
 *   struck   the source reconstructs and the figure is not credible
 *   dashed   there is no figure
 */
.tier.extrapolated::before{
  background:linear-gradient(90deg, currentColor 50%, transparent 50%);
  box-shadow:inset 0 0 0 1.4px currentColor;
}
.tier.unverified::before{
  background:transparent; box-shadow:inset 0 0 0 1.6px currentColor;
}
.tier.degenerate::before{
  background:transparent; box-shadow:inset 0 0 0 1.4px currentColor;
  overflow:visible;
}
.tier.degenerate::after{
  content:""; position:absolute; left:7px; top:calc(50% - 0.65px);
  width:9px; height:1.3px; background:currentColor; transform:rotate(-45deg);
  transform-origin:center; pointer-events:none;
}
.tier.degenerate{position:relative}
/* The bottom of the ladder leaves the circle family altogether. Validated and
   implausible were both filled dots, and in greyscale a dark green and a dark
   red are the same dot -- the only pair the shape check failed. A square is
   not a worse circle; it is a different kind of statement, which is what "do
   not use" is. */
.tier.implausible::before{border-radius:1.5px}
.tier.none::before{
  background:transparent; border:1.4px dashed currentColor; box-shadow:none;
}
/* A ring with something inside it: the event is real, the recurrence around
   it is not. A plain hollow ring was already taken by `unverified`, and the
   greyscale check reported the two as one mark until this line existed. */
.tier.scenario_only::before{
  background:radial-gradient(circle at 50% 50%,
             currentColor 0 1.3px, transparent 1.3px);
  box-shadow:inset 0 0 0 1.3px currentColor;
}
.tier.validated{color:var(--t-validated); background:var(--t-validated-bg)}
.tier.calibrated{color:var(--t-calibrated); background:var(--t-calibrated-bg)}
.tier.calibrated_external{color:var(--t-calibrated_external); background:var(--t-calibrated_external-bg)}
.tier.extrapolated{color:var(--t-extrapolated); background:var(--t-extrapolated-bg)}
.tier.unverified{color:var(--t-unverified); background:var(--t-unverified-bg)}
.tier.degenerate{color:var(--t-degenerate); background:var(--t-degenerate-bg)}
.tier.implausible{color:var(--t-implausible); background:var(--t-implausible-bg)}
.tier.scenario_only{color:var(--t-scenario_only); background:var(--t-scenario_only-bg)}
.tier.none{color:var(--t-none); background:var(--t-none-bg)}

/* ------------------------------------------------- console confidence --- */
/* The hazard console wears the same vocabulary on three soft pills rather than
   on the uppercase table chip: the confidence badge in the rail, the coverage
   list in the sheet and the per-peril mark in a site report. Their geometry
   stays in style.css with the rest of the console's chrome; only the rules
   keyed by tier name live here, grouped so that adding a rung is one edit in
   one file rather than three edits in three places — which is how
   `calibrated_external` came to have no styling at all.
   The pill palette used to be one set of literal pastels with no dark variant,
   so a reader in dark mode got a pale wash floating on a near-black map. It is
   now on tokens like the chip above, and for the same reason: light keeps the
   values it always had, and dark inverts the construction rather than dimming
   the pastel — a deep tint of the rung's own hue carrying light ink, so the
   pill still reads as a pill against the surface it sits on and the word stays
   legible at 8.5px. `none` alone stays on --sunk/--muted: it marks an absence
   rather than a rung, and those two already follow the theme. */
.confbadge.validated,
.conf .cb.validated,
.srperil .pb.validated{background:var(--t-validated_pill-bg); color:var(--t-validated_pill)}
.confbadge.calibrated,
.conf .cb.calibrated,
.srperil .pb.calibrated{background:var(--t-calibrated_pill-bg); color:var(--t-calibrated_pill)}
.confbadge.calibrated_external,
.conf .cb.calibrated_external,
.srperil .pb.calibrated_external{background:var(--t-calibrated_external_pill-bg); color:var(--t-calibrated_external_pill)}
.confbadge.extrapolated,
.conf .cb.extrapolated,
.srperil .pb.extrapolated{background:var(--t-extrapolated_pill-bg); color:var(--t-extrapolated_pill)}
.confbadge.unverified,
.conf .cb.unverified,
.srperil .pb.unverified{background:var(--t-unverified_pill-bg); color:var(--t-unverified_pill)}
.confbadge.degenerate,
.conf .cb.degenerate,
.srperil .pb.degenerate{background:var(--t-degenerate_pill-bg); color:var(--t-degenerate_pill)}
.confbadge.implausible,
.conf .cb.implausible,
.srperil .pb.implausible{background:var(--t-implausible_pill-bg); color:var(--t-implausible_pill)}
.confbadge.scenario_only,
.conf .cb.scenario_only,
.srperil .pb.scenario_only{background:var(--t-scenario_only_pill-bg); color:var(--t-scenario_only_pill)}
.confbadge.none,
.conf .cb.none,
.srperil .pb.none{background:var(--sunk); color:var(--muted)}

/* --------------------------------------------------------- the guard ---- */
/* Raised by checkTiers() in web/tiers.js when the engine reports a tier or a
   basis this client cannot word. The whole point is that it is visible, so it
   depends on nothing beyond the two tokens every view defines and one of its
   own. */
.tierwarn{
  position:relative; z-index:9999; padding:9px 16px;
  background:var(--surface); color:var(--ink);
  border-bottom:1px solid var(--t-implausible);
  border-left:4px solid var(--t-implausible);
  font-size:var(--t-sm); line-height:1.45;
}


/* ------------------------------------------------- the basis marks ------ */
/* What web/tiers.js `basisClass` returns. It lived in dash.css, where only the
   dashboard could reach it; the console's return-period selector now marks its
   own fitted steps with the same word from the same function, and two sheets
   carrying the same rule is two rules that will stop matching. One copy, in
   the sheet that already carries the vocabulary's colours, loaded by all four
   views before their own. A figure carried past the modelled grid must not sit
   beside one the source actually published looking like it. */
.bmark{
  display:inline-block; margin-left:6px; padding:1px 5px; border-radius:3px;
  font-family:var(--mono); font-size:var(--t-micro); font-weight:700; font-style:normal;
  letter-spacing:.08em;
  text-transform:uppercase; vertical-align:1.5px; font-variant-numeric:tabular-nums}
.bmark.extrapolated{color:var(--t-extrapolated); background:var(--t-extrapolated-bg)}
.bmark.interpolated{color:var(--ink-3); background:var(--sunk)}