/* Public status page stylesheet.
 * Developer notes: frontend/public-site/README.md (this file is published - keep internal detail out).
 */
:root {
  /* Re-hued to MNS's real brand green (brand assets) - each token
     keeps its original saturation/lightness, only the hue moves from the devportal-derived olive
     (~95deg) to the actual brand emerald (~146deg, brand/logo-light.svg's accent dot #4CBB7C). */
  --brand: #347650; --brand-dark: #204630; --brand-tint: #E8F2EC;
  --page: #F4F5F6; --surface: #FFFFFF; --surface-sunken: #FAFBFB; --hover: #F1F3F4;
  --ink: #16191C; --ink-muted: #5A6169; --line: #DCE0E4; --line-strong: #767F88;
  --op-ink: #0B6E4F; --op-tint: #E4F3EC; --op-bar: #35A074; --op-edge: #C2E2D2;
  --dg-ink: #8A5A00; --dg-tint: #FBF0DA; --dg-bar: #B37F14; --dg-edge: #F0DDAF; --dg-deep: #5E3D00;
  --po-ink: #A33C10; --po-tint: #FBE9E0; --po-bar: #C7551F; --po-edge: #F2CFBC;
  --mo-ink: #96150F; --mo-tint: #FBE3E1; --mo-bar: #96150F; --mo-edge: #F3C9C6; --mo-deep: #6E1009;
  --mt-ink: #1C4E8F; --mt-tint: #E4EDF9; --mt-bar: #2C6BB8; --mt-edge: #C9DBF3; --mt-deep: #14395F;
  --un-ink: #4A5560; --un-tint: #ECEEF1; --un-bar: #7E8891; --un-edge: #D8DDE2; --un-deep: #333C46;
  /* "Not a status" - the history strip's own no-data fill (the design), deliberately distinct from every --*-tint/--line-strong badge token:
     the design measured this as the one fill that must recede rather than compete with a real
     status, particularly major-outage's dark solid. */
  --nodata: #EFF1F3; --nodata-stripe: #B9C0C7;
  --focus: #1C4E8F;
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(22, 25, 28, .06);
  /* the design specifies this as the panel's own
     shadow, one step up from --sh-1's card shadow - not previously needed until this panel. */
  --sh-2: 0 4px 16px rgba(22, 25, 28, .10);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
*, *::before, *::after { box-sizing: border-box }
/* Found while building manage-form.js, but fixes a live bug on every page
   that toggles the "hidden" DOM property: the CSS cascade ranks any author-origin rule above the
   user agent's own "[hidden]{display:none}", regardless of specificity - so a class like .banner
   or .err that sets its own "display" (needed to lay out its icon+text once actually shown)
   silently wins over "hidden", and the element renders anyway, empty. watcher-form.js's own
   #wp-banner/#wp-tree-err/#wp-email-err/#wp-consent-err (all toggled via el.hidden, never a CSS
   class) already carry this bug on develop; confirmed live via getComputedStyle before writing
   this rule, not assumed. "!important" is the standard fix for exactly this interaction - the
   idiom exists because no ordinary specificity bump reliably out-ranks every future
   display-setting class this stylesheet gains. */
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 15px/1.6 var(--font) }
h1, h2, h3, h4, p, ul, ol, table { margin: 0 }
a { color: var(--brand); text-underline-offset: 2px }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px }
summary { list-style: none }
summary::-webkit-details-marker { display: none }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* skip link */
.skip { position: absolute; left: -9999px; top: 0; background: #fff; color: var(--ink); padding: 10px 14px;
  border: 2px solid var(--focus); border-radius: 0 0 var(--r-md) 0; z-index: 9; font-weight: 600 }
.skip:focus { left: 0 }

/* masthead
   Redesigned away from the flat --brand-dark band the design pages show. Three things were wrong
   with that band and each is fixed here:
     1. the white wordmark sat on mid-tone green (#204630) at 93x24 with a third of its own viewBox
        empty, so the letters rendered ~16px tall and low-contrast - the mark was the least legible
        thing in the masthead;
     2. the words "MNS Status" then repeated the wordmark in the same white at a similar size 10px
        to its right, so the two read as one run of text and the logo stopped registering as a logo;
     3. a green band directly above a verdict card that has to be able to turn red put two competing
        colour signals in the top 200px of the page.
   The ground is now near-black ink with an emerald bloom off the top-right corner and a green
   hairline rail along the bottom edge, which keeps the brand present while staying state-neutral;
   the wordmark is larger, alone, and separated from a single word ("Status") by a vertical rule.
   --brand-dark is unchanged and still used elsewhere - the re-hue in the design decision stands.

   Measured against the ink ground, same method as this file's header comment (WCAG 2.2 AA needs
   4.5:1 for normal text): white on #0C1A13 is 17.91:1, up from 10.61:1 on the old --brand-dark
   band - which is most of why the wordmark now reads. The .62-alpha subtitle composites to
   rgb(163,168,165) for 7.42:1, so it clears AA with room even though it is the marginal one.
   .mast__rule is 1.88:1 by design: it is a decorative hairline, aria-hidden, carrying no
   information and operating no control, so the 3:1 non-text rule does not apply to it. */
.mast { position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(78% 210% at 80% -32%, rgba(76, 187, 124, .42) 0%, rgba(76, 187, 124, .10) 46%, rgba(76, 187, 124, 0) 72%),
    linear-gradient(180deg, #0C1A13 0%, #091310 100%) }
/* Bottom rail - replaces the flat 3px --brand border. Solid brand green under the wordmark,
   fading out across the band so it reads as an accent rather than a second horizontal rule. */
.mast::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, #4CBB7C 0%, var(--brand) 32%, rgba(52, 118, 80, .10) 76%, rgba(52, 118, 80, 0) 100%) }
.mast__in { position: relative; max-width: 912px; margin: 0 auto; padding: 17px 16px; display: flex;
  align-items: center; gap: 14px; flex-wrap: wrap }
.mast__b { display: flex; align-items: center; gap: 14px; min-width: 0 }
.mast__b svg { width: 126px; height: 25px; display: block; flex: none; color: #fff }
.mast__rule { width: 1px; height: 27px; background: rgba(255, 255, 255, .20); flex: none }
.mast__t { font: 600 16px/1.25 var(--font); letter-spacing: -.008em }
.mast__t small { display: block; font: 400 11.5px/1.35 var(--font); color: rgba(255, 255, 255, .62);
  letter-spacing: 0; margin-top: 2px }
/* Below ~480px the three-part lockup still fits on one line once the wordmark steps down. */
@media (max-width: 479px) {
  .mast__in { padding: 14px 16px; gap: 11px }
  .mast__b { gap: 11px }
  .mast__b svg { width: 104px; height: 21px }
  .mast__rule { height: 24px }
  .mast__t { font-size: 15px }
}

.wrap { max-width: 912px; margin: 0 auto; padding: 24px 16px 64px }
@media (min-width: 880px) { .wrap { padding-left: 24px; padding-right: 24px } }

/* verdict */
.verdict { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--op-ink);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 22px 20px }
.verdict__r { display: flex; align-items: center; gap: 14px }
.verdict__ic { color: var(--op-ink); flex: none }
.verdict__ic svg { width: 38px; height: 38px; display: block }
.verdict__h { font: 700 30px/1.22 var(--font); letter-spacing: -.018em; color: var(--op-ink) }
@media (max-width: 479px) { .verdict__h { font-size: 22px } .verdict__ic svg { width: 28px; height: 28px } }
.verdict--dg { border-top-color: var(--dg-ink) } .verdict--dg .verdict__ic, .verdict--dg .verdict__h { color: var(--dg-ink) }
.verdict--po { border-top-color: var(--po-ink) } .verdict--po .verdict__ic, .verdict--po .verdict__h { color: var(--po-ink) }
.verdict--mo { border-top-color: var(--mo-ink) } .verdict--mo .verdict__ic, .verdict--mo .verdict__h { color: var(--mo-ink) }
.verdict--mt { border-top-color: var(--mt-ink) } .verdict--mt .verdict__ic, .verdict--mt .verdict__h { color: var(--mt-ink) }
.verdict--un { border-top-color: var(--un-ink) } .verdict--un .verdict__ic, .verdict--un .verdict__h { color: var(--un-ink) }

/* freshness - variant 1 (fresh) */
.fresh { display: flex; align-items: center; gap: 9px; font: 500 13.5px/1.5 var(--font); color: var(--ink-muted);
  flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line) }
.fresh__d { width: 9px; height: 9px; border-radius: 50%; background: var(--op-bar); border: 1px solid var(--op-ink); flex: none }
.fresh b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums }

/* freshness - variant 2 (stale) */
.stale { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; margin-top: 14px;
  background: var(--dg-tint); border: 1px solid var(--dg-edge); border-left: 4px solid var(--dg-ink);
  border-radius: var(--r-md); padding: 13px 15px }
.stale__ic { color: var(--dg-ink); padding-top: 1px }
.stale__ic svg { width: 20px; height: 20px; display: block }
.stale__t { font: 600 14.5px/1.45 var(--font); color: var(--dg-deep) }
.stale__b { font: 400 13px/1.6 var(--font); color: #6B4A0A; margin-top: 4px; max-width: 74ch }
.stale__m { font: 500 12.5px/1.5 var(--mono); font-variant-numeric: tabular-nums; color: var(--dg-deep); margin-top: 7px }

/* freshness - variant 3 (frozen / PROBER_SUSPECT). Unreachable today - see FreshnessView's Javadoc. */
.frozen { background: var(--surface); border: 1px solid var(--un-edge); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-1); margin-bottom: 20px }
.frozen__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px 20px;
  background: repeating-linear-gradient(135deg, #E7EAED 0 6px, #F1F3F5 6px 12px); border-bottom: 1px solid var(--un-edge) }
.frozen__ic { width: 42px; height: 42px; border-radius: 50%; background: var(--surface);
  border: 2px dashed var(--un-ink); color: var(--un-ink); display: flex; align-items: center; justify-content: center; flex: none }
.frozen__ic svg { width: 22px; height: 22px; display: block }
.frozen__k { font: 600 10.5px/1.4 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--un-deep) }
.frozen__t { font: 650 19px/1.35 var(--font); letter-spacing: -.008em; color: var(--un-deep); margin-top: 5px }
.frozen__b { font: 400 14px/1.65 var(--font); color: #3E4750; margin-top: 8px; max-width: 70ch }
.frozen__b strong { color: var(--un-deep) }
.frozen__facts { display: grid; gap: 0; grid-template-columns: 1fr; border-bottom: 1px solid var(--un-edge) }
@media (min-width: 620px) { .frozen__facts { grid-template-columns: repeat(3, 1fr) } }
.ff { padding: 13px 20px; border-bottom: 1px solid var(--un-edge) }
@media (min-width: 620px) { .ff { border-bottom: 0; border-right: 1px solid var(--un-edge) } .ff:last-child { border-right: 0 } }
.ff:last-child { border-bottom: 0 }
.ff__k { font: 600 10.5px/1.4 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted) }
.ff__v { font: 600 15px/1.4 var(--mono); font-variant-numeric: tabular-nums; margin-top: 3px }
.frozen__act { padding: 14px 20px; background: var(--surface-sunken); font: 400 13px/1.6 var(--font); color: var(--ink-muted) }
.frozen__act b { color: var(--ink); font-weight: 600 }

/* section heads */
.sh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 32px 0 12px }
.sh h2 { font: 600 19px/1.35 var(--font); letter-spacing: -.006em }

/* open-incident cards (, the design) - one .inc
   card per open incident, stacked inside the .ob section wrapper */
.ob { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px }

/* severity chip (uppercase, rectangular) and lifecycle pill (sentence case, pill-shaped) -
   deliberately different shapes even though both sit in .inc__top, so the eye separates the two
   before reading either (incident-card.html's own Rule 2). Critical alone gets the filled dark
   treatment (Rule 3: exactly one visual escalation on the page). */
.chip { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-sm); font-weight: 600;
  white-space: nowrap; border: 1px solid transparent; font-size: 11.5px; line-height: 1; padding: 5px 8px 5px 6px;
  letter-spacing: .02em; text-transform: uppercase }
.chip svg { width: 13px; height: 13px; flex: none; display: block }
.sev-crit { color: #fff; background: var(--mo-ink); border-color: var(--mo-ink) }
.sev-maj { color: var(--mo-ink); background: var(--mo-tint); border-color: var(--mo-edge) }
.sev-min { color: var(--dg-ink); background: var(--dg-tint); border-color: var(--dg-edge) }
.sev-mnt { color: var(--mt-ink); background: var(--mt-tint); border-color: var(--mt-edge) }
.chip--rtro { color: var(--un-ink); background: var(--un-tint); border-color: var(--un-edge) }
.st { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-pill); font-weight: 600;
  font-size: 12px; line-height: 1; padding: 5px 10px 5px 7px; border: 1px solid transparent; white-space: nowrap;
  text-transform: none; letter-spacing: normal }
.st svg { width: 13px; height: 13px; flex: none; display: block }
.st-inv { color: var(--po-ink); background: var(--po-tint); border-color: var(--po-edge) }
.st-idn { color: var(--dg-ink); background: var(--dg-tint); border-color: var(--dg-edge) }
.st-mon { color: var(--mt-ink); background: var(--mt-tint); border-color: var(--mt-edge) }
.st-res { color: var(--op-ink); background: var(--op-tint); border-color: var(--op-edge) }

/* affected-component chip - a status dot plus the public display name (Rule 4: capped at four,
   then a "+n" chip - "a list of forty chips is not information") */
.affc { display: inline-flex; align-items: center; gap: 5px; font: 500 12px/1 var(--font); color: var(--ink-muted);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 8px; background: var(--surface-sunken);
  white-space: nowrap; max-width: 100% }
.affc i { width: 8px; height: 8px; border-radius: 2px; flex: none; display: block }
.affc span { overflow: hidden; text-overflow: ellipsis }
.i-op { background: var(--op-ink) } .i-dg { background: var(--dg-ink) } .i-po { background: var(--po-ink) }
.i-mo { background: var(--mo-ink) } .i-mt { background: var(--mt-ink) } .i-un { background: var(--un-ink) }

/* the incident card itself */
.inc { display: block; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line-strong);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 15px 16px; text-decoration: none; color: inherit }
.inc:hover { background: var(--hover) }
.inc--crit { border-left-color: var(--mo-ink) }
.inc--maj { border-left-color: var(--po-ink) }
.inc--min { border-left-color: var(--dg-ink) }
.inc--rtro { border-left-style: dashed; border-left-color: var(--un-ink) }
.inc__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.inc__ref { font: 500 11.5px/1 var(--mono); color: var(--ink-muted); letter-spacing: .02em }
.inc__ttl { display: block; font: 600 16.5px/1.4 var(--font); letter-spacing: -.004em; margin-top: 9px; overflow-wrap: anywhere }
.inc__aff { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px }
.inc__meta { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--line); font: 500 12.5px/1.5 var(--font); color: var(--ink-muted) }
.inc__meta b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums }
.inc__due { color: var(--po-ink); font-weight: 600 }
.inc__due--late { color: var(--mo-ink) }

@media (max-width: 639px) {
  /* incident-card.html's own 375px measurement: the metadata block stacks vertically below
     640px rather than wrapping as a row - it reads better in English (the design decision, 10 Aug 2026;
     the design was originally sized bilingually, these are simply generous now, not a retrofit
     risk). */
  .inc__meta { flex-direction: column; gap: 3px }
}

/* status badge - the atom of the page: shape + text + colour, always together (AC2) */
.sb { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); font-weight: 600;
  white-space: nowrap; border: 1px solid transparent; font-size: 12.5px; line-height: 1; padding: 5px 10px 5px 7px; max-width: 100% }
.sb span:last-child { overflow: hidden; text-overflow: ellipsis }
.sb svg { width: 14px; height: 14px; flex: none; display: block }
.sb--md { font-size: 14px; padding: 7px 12px 7px 9px }
.sb--md svg { width: 16px; height: 16px }
.s-op { color: var(--op-ink); background: var(--op-tint); border-color: var(--op-edge) }
.s-dg { color: var(--dg-ink); background: var(--dg-tint); border-color: var(--dg-edge) }
.s-po { color: var(--po-ink); background: var(--po-tint); border-color: var(--po-edge) }
.s-mo { color: var(--mo-ink); background: var(--mo-tint); border-color: var(--mo-edge) }
.s-mo--w { background: #fff }
.s-mt { color: var(--mt-ink); background: var(--mt-tint); border-color: var(--mt-edge) }
.s-mt--w { background: #fff }
.s-un { color: var(--un-ink); background: var(--un-tint); border-color: var(--un-edge) }
/* the "internal service issue" chip's own tone - deliberately reuses the
   neutral --un-* tokens (informational, not a severity) but is its own class, never s-un, so a
   future change to "Status unavailable"'s tone does not silently also change this chip's. This is
   not a seventh status (the design decision) - it always renders beside the real derived badge, never
   instead of it. */
.s-isi { color: var(--un-ink); background: var(--un-tint); border-color: var(--un-edge) }

/* system group */
.sys { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden }
.sys + .sys { margin-top: 12px }
.sys--bad { border-color: var(--mo-edge) }
.sys__head { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 14px 16px; cursor: pointer; min-height: 56px }
.sys__head:hover { background: var(--hover) }
.sys__tw { color: var(--line-strong); display: flex; align-items: center; justify-content: center }
.sys__tw svg { width: 18px; height: 18px; display: block; transition: transform .12s ease }
@media (prefers-reduced-motion: reduce) { .sys__tw svg { transition: none } }
.sys[open] .sys__tw svg { transform: rotate(90deg) }
.sys__t { min-width: 0 }
.sys__nm { font: 600 19px/1.3 var(--font); letter-spacing: -.006em; overflow-wrap: anywhere }
/* the fixed one-line sentence shown under the system name when the chip is
   present - same muted treatment as .crow__note, legible in greyscale on its own as plain text. */
.sys__note { font: 400 12.5px/1.45 var(--font); color: var(--ink-muted); margin-top: 2px }
.sys__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end }
.count { font: 500 12.5px/1.3 var(--font); color: var(--ink-muted); white-space: nowrap }
.count b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums }
.sys__body { border-top: 1px solid var(--line); background: var(--surface-sunken) }
.sys__seclbl { font: 600 10.5px/1.4 var(--font); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted); padding: 12px 16px 6px }
@media (max-width: 719px) {
  .sys__head { grid-template-columns: 20px minmax(0, 1fr); row-gap: 9px }
  .sys__nm { font-size: 17px }
  .sys__right { grid-column: 2 / -1; justify-content: flex-start }
}

/* component row - one <a> per component, one tab stop, 44px minimum (AC per component-row.html) */
.crow { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: center; padding: 11px 16px 11px 28px;
  text-decoration: none; color: inherit; border-top: 1px solid var(--line); background: var(--surface); min-height: 44px }
.crow:hover { background: var(--hover) }
/* the row's decorative 90-day mini-strip (aria-hidden - it compresses data
   already stated numerically beside it, ux.md &sect;11) and its adjacent 90-day figure. */
/* MNSCOM-1070 revises the closed design's 15 ticks at 3px (design/components/component-row.html)
   on two counts, both only visible once the strip carries real MNS data rather than the design's
   fully-populated mock:

   - Six days per tick made a single bad day paint a week, and 45px of strip carried too little to
     be worth the row's attention. Thirty ticks at 4px is three days each, and reads as a chart.
   - .b-nd's 135deg hatch has a 6px period, so at 3px wide it rendered as dithered static rather
     than as absent data - and with 78 of 90 days unmeasured that static WAS the strip. Inside a
     row, an unmeasured day collapses to a thin rule instead: the strip then states where our
     history begins rather than drawing days we never observed as full-height blocks. The hatch
     definition itself is untouched, since it is legible (and correct) on the 38px detail strip
     design/components/history-strip.html specifies. */
.crow__strip { display: flex; gap: 1.5px; align-items: center; height: 20px }
.crow__strip i { display: block; width: 4px; height: 20px; border-radius: 1.5px }
.crow__strip i.b-nd { height: 3px; border-radius: 1.5px; background: #E2E6EA }
.crow__up { display: flex; align-items: baseline; gap: 7px; white-space: nowrap }
.crow__up b { font: 600 14px/1.2 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink) }
/* The coverage window the figure was computed over, not a unit of it - so it is a caption beside
   the number rather than a same-weight suffix. */
.crow__uplbl { font: 500 11px/1.2 var(--font); color: var(--ink-muted) }
.crow--hit { background: var(--dg-tint) }
.crow--hit:hover { background: #F8EBD0 }
/* MAJOR_OUTAGE's own row emphasis - distinct from crow--hit's amber (the design's only
   crow--hit definition is DEGRADED). Same red tint as crow--root
   below, used until a dependency reference lets a MAJOR_OUTAGE row be told apart as root-cause
   vs dependent (see crow--root/crow--dep's own comment). */
.crow--mo { background: var(--mo-tint) }
.crow--mo:hover { background: #F8DAD7 }
/* crow--root (the root-cause row) and crow--dep (a row impaired only because of another
   component, the design) are intentionally never emitted by
   IndexPageModelFactory today - telling either apart from a plain crow--mo row needs a
   dependency reference PublicComponentResponse does not carry yet (see ComponentRowView's own
   Javadoc). Defined here so wiring that data through, in a later story, is a renderer change
   rather than a design one. */
.crow--root { background: var(--mo-tint) }
.crow--root:hover { background: #F8DAD7 }
.crow--dep { background: #FEF7F6 }
.crow--mnt { background: repeating-linear-gradient(45deg, #F5F9FE 0 6px, #FFFFFF 6px 12px) }
.crow--mnt:hover { background: var(--mt-tint) }
.crow__nm { font: 600 14.5px/1.35 var(--font); min-width: 0; overflow-wrap: anywhere }
@media (min-width: 640px) {
  /* Five tracks, not four - the fifth is the optional  chip. A row without it
     simply leaves that last track empty; the other four items keep their existing positions. */
  .crow { grid-template-columns: minmax(0, 1fr) auto auto auto auto; gap: 16px }
}
@media (max-width: 639px) { .crow { padding-left: 20px } }

/* real <ul>/<li> list semantics for the component rows (the backlog: "<li> containing one
   full-bleed <a>", "real <table>/<ul> semantics rather than nested divs") - reset the browser's
   default list box model so the switch from bare <a> siblings changes no visual layout. */
.crows { list-style: none; margin: 0; padding: 0 }

/* the six day-type fill forms for the per-row mini-strip and every legend
   swatch (ux.md &sect;2.5) - pattern carries the meaning, not just colour: a first pass using six
   solid colours measured as illegible without colour (degraded amber and no-data grey were
   near-identical), so each status is a distinct fill *form*: solid, horizontal hatch, base-fill,
   dark solid, 45deg hatch, 135deg hatch. Only the .b-* half of the original six-form rules
   comes back here - the single-letter .o../.n forms belonged to the big per-system
   strip (the design), which stays removed; reviving
   those alongside would be dead CSS for a strip this page no longer has. */
.b-op { background: var(--op-bar) }
.b-dg { background: repeating-linear-gradient(0deg, var(--dg-bar) 0 2px, #F3E4C2 2px 4px) }
.b-po { background: linear-gradient(to top, var(--po-bar) 0 55%, #F6D8C8 55% 100%) }
.b-mo { background: var(--mo-bar) }
.b-mt { background: repeating-linear-gradient(45deg, var(--mt-bar) 0 3px, #CFE0F4 3px 6px) }
.b-nd { background: repeating-linear-gradient(135deg, var(--nodata-stripe) 0 3px, var(--nodata) 3px 6px) }

/* prose pages (, : the methodology page) - capped at 720px for a <=68ch measure,
   narrower than .wrap's own 912px (ux.md &sect;8). */
.prose { max-width: 720px }
.prose .eyebrow { font: 600 11px/1.4 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted) }
.prose h1 { font: 650 27px/1.3 var(--font); letter-spacing: -.01em; margin: 6px 0 8px }
.prose h2 { font: 600 18px/1.4 var(--font); margin: 0 0 8px }
.prose .lede { color: var(--ink-muted); max-width: 68ch }
.prose section { margin-top: 28px }
.prose section p, .prose section ul { max-width: 68ch }
.prose section p + p, .prose section ul { margin-top: 10px }
.prose section p, .prose li { line-height: 1.65 }
.prose li + li { margin-top: 8px }
.prose code { font: 500 12.5px/1.4 var(--mono); background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 1px 5px }

/* footer - a sibling of <main class="wrap"> for landmark/contentinfo reasons, so it must restate
   .wrap's own centered-column geometry (max-width/margin/padding, including its 880px breakpoint)
   rather than inherit it as it did while nested inside <main>. */
.foot { max-width: 912px; margin: 44px auto 0; padding: 22px 16px 64px; border-top: 1px solid var(--line);
  font: 400 13px/1.7 var(--font); color: var(--ink-muted) }
@media (min-width: 880px) { .foot { padding-left: 24px; padding-right: 24px } }
.foot__nav { display: flex; gap: 8px 18px; flex-wrap: wrap; margin-bottom: 12px }
.foot__nav a { font-weight: 500 }
@media (max-width: 479px) { .foot__nav { flex-direction: column; gap: 12px } }
.foot p { max-width: 76ch }
.foot strong { color: var(--ink) }
.foot code { font: 500 12px/1.4 var(--mono); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 1px 5px }

/* the watcher panel (the design,
   watcher-form-validation.html), re-tokened onto this file's own --brand/--ink/--line etc rather
   than the design mockup's local placeholder values (see index.html's own comment on the panel
   markup for the full scope decisions). */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); overflow: hidden; margin-top: 20px; margin-bottom: 20px }
/* Collapsed by default (review feedback: sat too bulky open on a page whose main job is reporting
   live status) - the same <details>/<summary> collapse this file already uses per system group
   below, reusing that group's own .sys__tw/.sys__t/.sys__nm/.sys__note tokens for the header so
   this reads as the same interaction, not a second one. */
.panel > summary { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 16px 20px; cursor: pointer; min-height: 56px }
.panel > summary:hover { background: var(--hover) }
.panel[open] > summary { border-bottom: 1px solid var(--line) }
.panel[open] > summary .sys__tw svg { transform: rotate(90deg) }
.panel__collapse { padding-top: 4px }
.panel__bd { padding: 18px 20px 20px }

.tabs { display: flex; gap: 4px; padding: 16px 20px 0; border-bottom: 1px solid var(--line); margin-top: 14px }
.tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  font: 600 13.5px/1.4 var(--font); color: var(--ink-muted); padding: 9px 4px 10px; margin-bottom: -1px }
.tab:hover { color: var(--ink) }
.tab[aria-selected="true"] { color: var(--brand-dark); border-bottom-color: var(--brand) }

.fld { margin-top: 16px }
.fld:first-child { margin-top: 0 }
.lbl { display: block; font: 600 13px/1.4 var(--font); color: var(--ink); margin-bottom: 6px }
.req { color: var(--mo-ink) }
.inp, .sel { width: 100%; max-width: 420px; font: 400 14.5px/1.4 var(--font); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 9px 11px; min-height: 40px }
.inp:focus-visible, .sel:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
.inp[aria-invalid="true"], .sel[aria-invalid="true"] { border-color: var(--mo-ink) }
.hint { font: 400 12.5px/1.5 var(--font); color: var(--ink-muted); margin-top: 6px; max-width: 62ch }

/* Select all/Clear all/the live count (MNSCOM-1082) sit here, above .tree - never inside it, so
   they stay visible without scrolling the tree body (the tree is the scroll region at 280px on
   the sign-up panel; /manage's own tree has scrolling disabled inline but keeps the same header
   shape for consistency). */
.tree-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px;
  flex-wrap: wrap; margin-top: 4px }
.tree-tools__btns { display: flex; gap: 8px; flex-wrap: wrap }
.tree-tools__btn { min-height: 44px; padding: 10px 16px }
.tree-tools__count { margin: 0; white-space: nowrap }

.tree { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; max-height: 280px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px; background: var(--surface-sunken) }
.tree__g { display: flex; flex-direction: column; gap: 2px }
.tree__g + .tree__g { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line) }
.chk { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--r-sm);
  cursor: pointer; min-height: 36px }
.chk:hover { background: var(--hover) }
.chk input { flex: none; width: 17px; height: 17px }
.chk__t { font: 500 13.5px/1.4 var(--font); overflow-wrap: anywhere }
.chk--child { padding-left: 26px }
.chk--child .chk__t { font-weight: 400; color: var(--ink-muted) }

.consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 10px 12px;
  background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-md) }
.consent input { flex: none; width: 17px; height: 17px; margin-top: 1px }
.consent__t { font: 400 13px/1.55 var(--font); color: var(--ink-muted) }

.turn { display: flex; align-items: flex-start; gap: 9px; font: 400 12.5px/1.55 var(--font); color: var(--ink-muted) }
.turn i { flex: none; color: var(--op-ink); display: flex; margin-top: 1px }
.turn i svg { width: 16px; height: 16px; display: block }

.btnrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px }
/* the manage-form's own Save/Discard action row - a border-topped variant of
   .btnrow (never nested inside one) since it also carries the "N unsaved changes" hint text. */
.bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line) }
@media (max-width: 479px) { .bar .btn { width: 100%; text-align: center } }
.btn { appearance: none; cursor: pointer; font: 600 14px/1.3 var(--font); border-radius: var(--r-md);
  padding: 10px 18px; min-height: 40px; border: 1px solid transparent; white-space: nowrap }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
.btn--p { background: var(--brand); color: #fff }
.btn--p:hover { background: var(--brand-dark) }
.btn--p:disabled { background: var(--line-strong); cursor: not-allowed }
.btn--s { background: var(--surface); color: var(--ink); border-color: var(--line-strong) }
.btn--s:hover { background: var(--hover) }
.btn--sm { padding: 7px 14px; min-height: 34px; font-size: 13px }

.feed { display: flex; align-items: center; font: 500 12.5px/1.5 var(--mono); background: var(--surface-sunken);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; overflow-x: auto }
.feed + .feed { margin-top: 8px }
.feed code { white-space: nowrap }

/* validation (the design): the bare-stroke i-bang glyph is
   deliberately never wrapped in a filled container the way every status badge above is - so a
   form error can never be mistaken for a status glyph at a glance. */
.err { display: flex; align-items: center; gap: 6px; font: 500 12.5px/1.5 var(--font); color: var(--mo-ink);
  margin-top: 6px }
.err svg { width: 15px; height: 15px; flex: none; display: block; color: var(--mo-ink) }
.summ { background: var(--mo-tint); border: 1px solid var(--mo-edge); border-left: 4px solid var(--mo-ink);
  border-radius: var(--r-md); padding: 13px 15px; margin-bottom: 16px }
.summ__t { display: flex; align-items: center; gap: 8px; font: 600 14px/1.4 var(--font); color: #6E1009 }
.summ__t svg { width: 16px; height: 16px; flex: none; color: var(--mo-ink) }
.summ ol { margin: 8px 0 0 0; padding-left: 34px; font: 400 13px/1.6 var(--font); color: #6E1009 }
.summ a { color: #6E1009; font-weight: 600 }
.banner { display: flex; align-items: flex-start; gap: 9px; font: 400 13px/1.55 var(--font);
  border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 16px }
.banner svg { width: 16px; height: 16px; flex: none; margin-top: 1px }
.banner--err { background: var(--mo-tint); border: 1px solid var(--mo-edge); color: #6E1009 }
.banner--err svg { color: var(--mo-ink) }

/* double-opt-in state cards - .st-wait/.st-ok reuse the neutral/operational tones already
   established by .s-mt/.s-op rather than inventing a fourth tone family for what is, at heart,
   still just "pending" vs "confirmed". */
.state { text-align: center; padding: 28px 20px; max-width: 480px; margin: 0 auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1) }
.state__ic { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px }
.state__ic svg { width: 26px; height: 26px; display: block }
.st-wait .state__ic { background: var(--mt-tint); color: var(--mt-ink) }
.st-ok .state__ic { background: var(--op-tint); color: var(--op-ink) }
.state__t { font: 650 18px/1.35 var(--font); letter-spacing: -.006em }
.state__b { font: 400 13.5px/1.6 var(--font); color: var(--ink-muted); margin-top: 8px; max-width: 46ch;
  margin-left: auto; margin-right: auto }
.state__f { font: 400 12px/1.55 var(--font); color: var(--ink-muted); margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line) }

/* the /manage page (the design). Re-tokened
   onto this file's own --op-*/--mo-*/--mt-*/--un-* etc rather than the design mockup's local
   placeholder values, the same convention the watcher panel block above already follows. Two more
   state tones join .st-wait/.st-ok above: .st-bye (removed, neutral) and .st-key (link replaced,
   informational) - deliberately reusing --un-*/--mt-* rather than a fifth tone family, the same
   "still just pending vs confirmed" reasoning that block's own comment gives. */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1) }
.pad { padding: 18px }
.grouperr { border: 1px solid var(--mo-ink); border-left-width: 3px }

.saved { display: flex; align-items: flex-start; gap: 10px; background: var(--op-tint); border: 1px solid var(--op-edge);
  border-left: 4px solid var(--op-ink); border-radius: var(--r-md); padding: 13px 15px; font: 400 13.5px/1.6 var(--font);
  color: #08543C; margin-bottom: 16px }
.saved svg { width: 18px; height: 18px; flex: none; display: block; margin-top: 2px }
.saved b { font-weight: 650 }

.btn--d { background: var(--surface); border-color: var(--mo-edge); color: var(--mo-ink) }
.btn--d:hover { background: var(--mo-tint) }
.btn--dd { background: var(--mo-ink); border-color: var(--mo-deep); color: #fff }
.btn--dd:hover { background: var(--mo-deep) }

.danger { border: 1px solid var(--mo-edge); border-radius: var(--r-lg); background: #FFFCFC; overflow: hidden }
.danger__h { padding: 13px 16px; border-bottom: 1px solid var(--mo-edge); background: var(--mo-tint) }
.danger__t { font: 650 15px/1.35 var(--font); color: var(--mo-deep) }
.danger__b { padding: 16px }
.dlist { margin: 0; padding-left: 20px; font: 400 13.5px/1.75 var(--font); color: var(--ink-muted) }
.dlist b { color: var(--ink); font-weight: 600 }
.confirm { margin-top: 16px; border: 1px solid var(--mo-ink); border-left: 4px solid var(--mo-ink);
  border-radius: var(--r-md); padding: 14px 15px; background: var(--surface) }
.confirm__t { font: 650 14px/1.4 var(--font); color: var(--mo-deep) }

.st-bye .state__ic { background: var(--un-tint); border: 1px solid var(--un-edge); color: var(--un-ink) }
.st-key .state__ic { background: var(--mt-tint); border: 1px solid var(--mt-edge); color: var(--mt-ink) }
.st-gone .state__ic { background: var(--dg-tint); border: 1px solid var(--dg-edge); color: var(--dg-ink) }

/* Incident permalink page: the timeline, the timezone note and the non-clickable card variant.
   Ported verbatim from the closed design (the incident-timeline component preview), whose CSS had
   only ever existed inside that preview's own <style> block - so the first shipped version of the
   page rendered a bare numbered <ol>. Tokens are the ones already defined above; nothing new. */
.inc--page { border-left-width: 4px }
.inc--page:hover { background: var(--surface) }

.tl { list-style: none; padding: 0; margin: 18px 0 0; position: relative }
.tl::before { content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 2px; background: var(--line) }
.tl__i { position: relative; padding: 0 0 22px 46px }
.tl__i:last-child { padding-bottom: 0 }
.tl__mk { position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--surface);
  border: 2px solid var(--line) }
.tl__mk svg { width: 16px; height: 16px; display: block }
.tl__hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-height: 32px }
.tl__k { font: 600 15.5px/1.4 var(--font) }
.tl__t { font: 500 12.5px/1.4 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-muted) }
.tl__body { font: 400 14.5px/1.65 var(--font); margin-top: 7px; max-width: 68ch }
.tl__by { font: 500 12px/1.4 var(--font); color: var(--ink-muted); margin-top: 9px;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center }
/* US-021 (MNSCOM-994): the "Edited HH:mm — reason" marker - ported from
   design/components/incident-timeline.html, this app's own closed design for this element. */
.tl__edit { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px 6px; background: var(--surface-sunken) }
.k-res .tl__mk { border-color: var(--op-edge); background: var(--op-tint); color: var(--op-ink) }
.k-res .tl__k { color: var(--op-ink) }
.k-mon .tl__mk { border-color: var(--mt-edge); background: var(--mt-tint); color: var(--mt-ink) }
.k-mon .tl__k { color: var(--mt-ink) }
.k-idn .tl__mk { border-color: var(--dg-edge); background: var(--dg-tint); color: var(--dg-ink) }
.k-idn .tl__k { color: var(--dg-ink) }
.k-inv .tl__mk { border-color: var(--po-edge); background: var(--po-tint); color: var(--po-ink) }
.k-inv .tl__k { color: var(--po-ink) }
/* Neutral marker for an operator's free-text update, which carries no lifecycle template key.
   Dashed, like the design's own "measured, not written" treatment. */
.k-upd .tl__mk { border-color: var(--un-edge); background: var(--un-tint); color: var(--un-ink); border-style: dashed }
.k-upd .tl__k { color: var(--un-ink) }

/* Stacks state above timestamp below 640px rather than shrinking either (ux.md 7, 9). */
@media (max-width: 640px) {
  .tl__hd { display: block }
  .tl__t { display: block; margin-top: 2px }
}

.tz { background: var(--mt-tint); border: 1px solid var(--mt-edge); border-radius: var(--r-md);
  padding: 11px 13px; font-size: 13px; margin-top: 16px }

/* ---------- MAINTENANCE BANNER (US-024/MNSCOM-972) ----------
   Ported from design/components/maintenance-banner.html. Blue rather than amber throughout: a
   scheduled window is not a warning, and colouring it like one trains readers to ignore the colour
   that does mean something is wrong. .mw--emg is the single exception, and it is the only thing in
   this file that makes a maintenance banner amber.
   Colour is never the only signal - the kicker states the variant in words, and the progress meter
   carries its own text caption and aria-label. */
.mwb { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px }
.mw { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px;
  background: var(--mt-tint); border: 1px solid var(--mt-edge); border-left: 4px solid var(--mt-ink);
  border-radius: var(--r-lg); padding: 15px 16px }
.mw__ic { color: var(--mt-ink); display: flex; align-items: flex-start; padding-top: 1px }
.mw__ic svg { width: 22px; height: 22px; display: block }
.mw__t { min-width: 0 }
.mw__kick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.mw__k { font: 600 10.5px/1.4 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--mt-deep) }
.mw__ref { font: 500 11.5px/1 var(--mono); color: var(--mt-deep); opacity: .75 }
.mw__ttl { font: 600 16.5px/1.4 var(--font); color: var(--mt-deep); margin-top: 7px; overflow-wrap: anywhere }
.mw__when { font: 600 14px/1.5 var(--mono); font-variant-numeric: tabular-nums; color: var(--mt-deep); margin-top: 7px }
.mw__aff { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px }
.mw__disc { font: 400 12.5px/1.6 var(--font); color: #274A6E; margin-top: 11px }
.mw__foot { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; margin-top: 12px;
  padding-top: 11px; border-top: 1px solid var(--mt-edge); font: 500 12.5px/1.5 var(--font); color: #274A6E }
.mw__foot a { color: var(--mt-deep); font-weight: 600 }

/* In-progress: a white ground rather than a blue wash, so that during the window the banner reads
   as the page's active state rather than as an announcement about the future. */
.mw--live { background: var(--surface); border-left-color: var(--mt-ink); box-shadow: var(--sh-1) }
.mw--live .mw__disc { color: var(--ink-muted) }
.mw--live .mw__foot { border-top-color: var(--line); color: var(--ink-muted) }
.mw--live .affc { background: var(--mt-tint) }
.mw__live { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1 var(--font);
  letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--mt-ink);
  border-radius: var(--r-sm); padding: 5px 8px }
.mw__live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; display: block; flex: none }

/* Emergency: announced with less notice than policy requires. Amber, and labelled as such - being
   visibly honest about short-notice work beats quietly relabelling it as an incident. */
.mw--emg { background: var(--dg-tint); border-color: var(--dg-edge); border-left-color: var(--dg-ink) }
.mw--emg .mw__ic { color: var(--dg-ink) }
.mw--emg .mw__k, .mw--emg .mw__ttl, .mw--emg .mw__when { color: #5E3D00 }
.mw--emg .mw__disc, .mw--emg .mw__foot { color: #6B4A0A }
.mw--emg .mw__foot { border-top-color: var(--dg-edge) }
.mw--emg .affc { color: #5E3D00; border-color: var(--dg-edge) }
.mw--emg .affc i { background: var(--dg-ink) }

/* Progress meter, measured against the SCHEDULED end. An overrunning window reads 100 %, never
   137 % - the overrun is stated in words in the caption instead of by a bar off its own scale. */
.mw__prog { margin-top: 11px }
.mw__progt { display: flex; justify-content: space-between; font: 500 11.5px/1.4 var(--mono);
  font-variant-numeric: tabular-nums; color: var(--ink-muted); margin-bottom: 5px }
.mw__bar { height: 8px; border-radius: var(--r-pill); background: var(--mt-tint);
  border: 1px solid var(--mt-edge); overflow: hidden }
.mw__fill { height: 100%; background: repeating-linear-gradient(45deg, var(--mt-bar) 0 4px, #8FB6E2 4px 8px) }
.mw__cap { font: 500 11.5px/1.4 var(--mono); font-variant-numeric: tabular-nums;
  color: var(--ink-muted); margin-top: 5px }

@media (max-width: 640px) {
  .mw { grid-template-columns: minmax(0, 1fr) }
  .mw__ic { display: none }
}

/* ---------- MAINTENANCE PERMALINK PAGE (US-024/MNSCOM-972) ----------
   The page reuses the .mw banner from the index as its header - it already states every fact about
   the window, so nothing below repeats them. An earlier pass added a separate facts list under the
   banner and printed the when-line, status, components and announcement a second time. Only the
   prose and the after-the-fact timestamps are page-specific. */

/* Prose under the banner. The site reset zeroes p margins and .prose's own spacing rule only
   applies to "section p + p", so without a real rule here the operator's three paragraphs render
   as one block - which is exactly how the what-happens / what-you-cannot-do / what-to-do structure
   was being lost on the published page. 66ch is the comfortable measure at this size. */
.mwp { margin-top: 30px }
.mwp h2 { font: 600 17px/1.4 var(--font); margin: 0 0 12px }
.mwp p { max-width: 66ch; font: 400 15px/1.75 var(--font); color: var(--ink); margin: 0 }
.mwp p + p { margin-top: 15px }

/* After-the-fact timestamps. A definition list rather than prose: two values a reader looks up
   rather than reads, and dl/dt/dd makes the pairing structural so a screen reader announces
   "Started: ..." rather than two loose runs of text. */
.mwf { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px;
  margin: 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); max-width: 66ch }
.mwf dt { font: 600 12px/1.5 var(--font); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-muted) }
.mwf dd { margin: 0; font: 500 14px/1.55 var(--font); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere }

@media (max-width: 560px) {
  .mwf { grid-template-columns: minmax(0, 1fr); gap: 2px 0 }
  .mwf dd { margin-bottom: 10px }
  .mwf dd:last-child { margin-bottom: 0 }
}
}