/* status_strip + threat_meter — bespoke: brand tokens, the 4-dot threat
   indicator (AC-3 closed list), the inset dividers, and the sizes off
   Bootstrap's spacing scale (those resolve through the --sp- and
   --dur- token families in static/style.css). Layout and typography
   Bootstrap does express lives on the markup (status_strip.html,
   threat_meter.html) — including this block's centring + 4px top margin
   (`mx-auto mt-1`). */
.pm-status-strip {
    background: var(--pm-surface);
    max-width: var(--content-max);
    min-height: 88px;
}

/* Both widths stay literal, not tokens: they are the terms of the stacking
   breakpoint's arithmetic at the bottom of this file (380 + 220 + 220). */
.pm-ss-item {
    flex: 1;
    min-width: 220px;
}

/* Pseudo-element, not `border-right`: the divider is inset from the strip's
   top and bottom edges, which a border cannot do. */
.pm-ss-item:not(:last-child)::before {
    content: '';
    position: absolute;
    right: 0;
    top: var(--sp-xl);
    bottom: var(--sp-xl);
    width: 1px;
    background: var(--div);
}

/* Each item carries its own bottom segment (stopping short of the next item)
   rather than the strip carrying one continuous rule — otherwise the threat
   cell's coloured accent below reads as a line under the whole row. */
.pm-ss-item::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: var(--sp-2xs);
    height: 1px;
    background: var(--div);
    z-index: 1;
}

/* Never grows: `flex: 1` above sets flex-basis 0, which beats `width` on the
   main axis, so without this the lone threat cell stretches the full row. */
.pm-ss-threat {
    flex: 0 0 380px;
    gap: var(--sp-3xl);
}

/* Double the neighbouring cells' hairline, so the level colour reads as an
   accent rather than as the row's bottom rule. */
.pm-ss-threat::after { height: 2px; }

.pm-ss-threat.lv-low::after  { background: var(--green); }
.pm-ss-threat.lv-med::after  { background: var(--yellow); }
.pm-ss-threat.lv-high::after { background: var(--orange); }
.pm-ss-threat.lv-crit::after { background: var(--red); }

.pm-ss-lbl {
    font-size: var(--fs-2xs);
    color: var(--text2); /* A11Y: was --text3 (#9CA3AF fails AA); --text2 = #5A6478, 5.95:1 */
    margin-bottom: var(--sp-2xs);
}

.pm-tl-wrap { gap: var(--sp-3xl); }
.pm-tl-dots { gap: var(--sp-xs); }

/* Equal sides, not a shared size: the markup's `rounded-circle` needs them to
   match or the dots render as ellipses. */
.pm-tl-dot {
    width: 28px;
    height: 28px;
    background: var(--div);
    transition: background var(--dur-base);
}

.pm-tl-dot.on.lv-low  { background: var(--green); box-shadow: 0 0 0 var(--ring-w) var(--green-soft); }
.pm-tl-dot.on.lv-med  { background: var(--yellow); box-shadow: 0 0 0 var(--ring-w) var(--yellow-soft); }
.pm-tl-dot.on.lv-high { background: var(--orange); box-shadow: 0 0 0 var(--ring-w) var(--orange-soft); }
.pm-tl-dot.on.lv-crit { background: var(--red); box-shadow: 0 0 0 var(--ring-w) var(--red-soft); }

.pm-tl-active {
    font-family: var(--ff-serif);
}

/* WCAG 1.4.3/KB-0019: the three bare tokens below all fail AA on
   white (--green 3.39:1, --yellow 3.19:1, --orange 3.15:1) -- their -700
   variants (5.02:1, 5.02:1, 4.88:1) are the prescribed text tokens.
   --red already passes (4.83:1) and is left as-is. */
.pm-tl-active.lv-low  { color: var(--green-700); }
.pm-tl-active.lv-med  { color: var(--yellow-700); }
.pm-tl-active.lv-high { color: var(--orange-700); }
.pm-tl-active.lv-crit { color: var(--red); }

.pm-ss-narrative-row { margin-top: var(--sp-2xs); }

/* A11Y: colour comes from the shared soft-label contract in static/style.css
   (KB-0166), fed by --lbl-bg/--lbl-ink which status_strip.html sets inline via the
   soft_bg/label_ink filters — the static --yellow/--yellow-soft and --red/--red-soft
   pairs this replaced were borderline-to-failing AA. */
.pm-ss-badge {
    font-size: var(--fs-2xs);
    border-radius: var(--radius-sm);
}

/* 900px, not the demo's 760px: three cells need 380 + 220 + 220 = 820px of
   content box, so between ~760 and ~876px the row would wrap mid-strip and
   strand one cell on a second line. Stack instead. */
@media (max-width: 900px) {
    /* !important on both: max-width breakpoints have no Bootstrap responsive
       utility (its scale is min-width only), so the stacked padding has to
       outrank the px-4/py-3 utilities the markup carries at every width. */
    .pm-status-strip { padding: var(--sp-xs) var(--sp-2xl) !important; }
    .pm-ss-item, .pm-ss-threat { flex: none; width: 100%; padding: var(--sp-md) 0 !important; }
    /* Cells stack vertically here, so a right-hand divider is a stray mark. */
    .pm-ss-item:not(:last-child)::before { content: none; }
}