/* ============================================================
   Compliance — the new look for Mock Survey (#/mock-survey),
   QAPI (#/qapi) and Audit Capture (#/audits).
   Loads after ivy-refresh.css and uses its tokens (--card, --line,
   --teal, --danger, --warn, --ok, --fg, --muted ...). The screens'
   own inline base styles are inserted before this file, so a rule
   here wins a tie. Every selector is scoped: .msv (Mock Survey),
   .qmx (QAPI), .ax (Audit Capture). The few colors the refresh does
   not name yet are tokens on :root below; the screen files carry none.
   ============================================================ */

:root {
  --cx-ij: #7A1A12;
  --cx-scrim: rgba(10, 24, 28, 0.10);
  --cx-shadow-drawer: -24px 0 48px -12px rgba(16, 32, 36, 0.24), -1px 0 0 rgba(16, 32, 36, 0.04);
  --cx-hero-wash: linear-gradient(135deg, #FFF6EE 0%, #FFFFFF 58%);
  --cx-hero-wash-danger: linear-gradient(135deg, #FDEDEB 0%, #FFFFFF 58%);
  --cx-hero-wash-ok: linear-gradient(135deg, #E9F6EF 0%, #FFFFFF 58%);
  --cx-hero-wash-neutral: linear-gradient(135deg, #EAF4F3 0%, #FFFFFF 58%);
}

/* ============================================================
   Shared primitives
   ============================================================ */
:is(.msv, .qmx, .ax) { color: var(--fg); }
:is(.msv, .qmx, .ax) :is(h3, h4) { font-family: var(--font-display); letter-spacing: -0.01em; }
.cx-ico { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -2px; }

/* ============================================================
   Mock Survey (.msv)
   ============================================================ */
.msv { --msv-card: var(--card); --msv-card-line: var(--line); --msv-line: var(--input-line); --msv-line-soft: var(--line-soft); --msv-sunken: var(--surface-sunk); --msv-ij: var(--cx-ij); gap: 20px; }

/* cards, headings */
.msv .msv-pad { padding: 18px 20px; }
.msv .msv-sec h3, .msv .msv-read h3 { font-family: var(--font-display); font-weight: 700; }
.msv .msv-sec h3 { font-size: var(--fs-lg); }
.msv .msv-eb { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .07em; color: var(--muted); }
.msv .msv-part { font-family: var(--font-display); font-size: var(--fs-sm); margin-top: 12px; }

/* buttons */
.msv .msv-btn:hover { background: var(--surface-hover); border-color: var(--input-line); }
.msv .msv-btn.primary { background: var(--teal); border-color: var(--teal); color: var(--on-solid); box-shadow: var(--shadow-sm); }
.msv .msv-btn.primary:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
.msv .msv-btn.soft { background: var(--teal-soft); border-color: transparent; color: var(--teal-deep); }
.msv .msv-btn.soft:hover { background: var(--teal-line); }
.msv .msv-btn.ghost { border-color: transparent; background: transparent; color: var(--teal); padding: 0 8px; }
.msv .msv-btn.ghost:hover { background: var(--teal-soft); }
.msv .msv-btn.ask { border-color: var(--teal-line); background: var(--teal-soft); color: var(--teal-deep); }
.msv .msv-chip.danger { box-shadow: inset 0 0 0 1px var(--danger-line); }
.msv .msv-chip.warn { box-shadow: inset 0 0 0 1px var(--warn-line); }
.msv .msv-chip.ok { box-shadow: inset 0 0 0 1px var(--ok-line); }
.msv .msv-chip.info { box-shadow: inset 0 0 0 1px var(--teal-line); color: var(--teal-deep); }
.msv .msv-chip.outline { box-shadow: inset 0 0 0 1px var(--input-line); }
.msv .msv-search { border-color: var(--input-line); border-radius: 8px; background: var(--card); }

/* tabs: an underline row, like the rest of the refresh */
.msv > .msv-noprint { grid-template-columns: minmax(0, 1fr); }
.msv > .msv-noprint > * { min-width: 0; }
.msv > .msv-noprint > .msv-tabs { border-bottom: 1px solid var(--line); gap: 4px 12px; align-items: flex-end; }
.msv .msv-tabs[role="tablist"] { position: relative; flex-wrap: nowrap; overflow-x: auto; min-width: 0; max-width: 100%; }
.msv .msv-tabs[role="tablist"]::-webkit-scrollbar { display: none; }
.msv .msv-tab .n { background: var(--surface-sunk); color: var(--fg-soft); font-size: var(--fs-xs); font-weight: 700; border-radius: 6px; padding: 1px 6px; }
.msv .msv-tab[aria-selected="true"] .n { background: var(--teal-soft); color: var(--teal-deep); }
.msv .msv-tab .n.late { background: var(--danger-soft); color: var(--danger-ink); }
.msv .msv-tab.skel { background: var(--surface-sunk); border-radius: 8px; margin-bottom: 6px; }
.msv .msv-links { padding-bottom: 6px; }
.msv .msv-by { margin: -8px 0 0; }

/* ---------- hero: the band on a four-step scale ---------- */
.msv .msv-g-read { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.msv .msv-hero { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; padding: 0; }
@media (min-width: 1101px) { .msv .msv-hero { grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); } }
.msv .msv-hero-main { padding: 22px 24px 20px; background: var(--cx-hero-wash-neutral); min-width: 0; }
.msv .msv-hero.tone-warn .msv-hero-main { background: var(--cx-hero-wash); }
.msv .msv-hero.tone-danger .msv-hero-main { background: var(--cx-hero-wash-danger); }
.msv .msv-hero.tone-ok .msv-hero-main { background: var(--cx-hero-wash-ok); }
.msv .msv-hero.is-empty .msv-hero-main { background: var(--card); }
.msv .msv-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.msv .msv-hero-rank { font-size: var(--fs-sm); font-weight: 650; color: var(--fg-soft); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.msv .msv-hero-band { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.msv .msv-hero-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); color: var(--muted); flex: none; }
.msv .msv-hero-ico .msv-ico { width: 24px; height: 24px; }
.msv .msv-hero.tone-danger .msv-hero-ico { color: var(--danger); border-color: var(--danger-line); }
.msv .msv-hero.tone-warn .msv-hero-ico { color: var(--warn); border-color: var(--warn-line); }
.msv .msv-hero.tone-ok .msv-hero-ico { color: var(--ok); border-color: var(--ok-line); }
.msv .msv-hero .msv-risk { background: transparent; padding: 0; border-radius: 0; font-family: var(--font-display); font-size: 40px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; }
.msv .msv-hero .msv-risk.danger { color: var(--danger-ink); }
.msv .msv-hero .msv-risk.warn { color: var(--warn-ink); }
.msv .msv-hero .msv-risk.ok { color: var(--ok-ink); }
.msv .msv-hero .msv-risk.neutral { color: var(--teal-deep); }
.msv .msv-hero .msv-risk-why { margin: 14px 0 0; max-width: 62ch; font-size: var(--fs-lg); font-weight: 500; color: var(--fg-soft); line-height: 1.5; }
.msv .msv-hero-record { margin-top: 12px; }
.msv .msv-hero-more { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 18px; }
.msv .msv-hero-more > details { margin-top: 0 !important; flex: 0 1 auto; min-width: 0; }
.msv .msv-hero-more > details[open] { flex-basis: 100%; }

.msv .msv-scale { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 640px; }
.msv .msv-scale li { display: grid; gap: 7px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); min-width: 0; }
.msv .msv-scale li i { height: 6px; border-radius: 999px; background: var(--surface-sunk); }
.msv .msv-scale li.s-low i { background: var(--ok-line); }
.msv .msv-scale li.s-watch i { background: var(--warn-line); }
.msv .msv-scale li.s-elevated i { background: var(--warn-line); }
.msv .msv-scale li.s-high i { background: var(--danger-line); }
.msv .msv-scale li.is-on i { height: 10px; margin-top: -2px; box-shadow: 0 0 0 2px var(--card); }
.msv .msv-scale li.s-low.is-on i { background: var(--ok); }
.msv .msv-scale li.s-watch.is-on i { background: var(--warn); }
.msv .msv-scale li.s-elevated.is-on i { background: var(--warn-ink); }
.msv .msv-scale li.s-high.is-on i { background: var(--danger); }
.msv .msv-scale li.is-on span { color: var(--fg); font-weight: 700; display: inline-flex; gap: 4px; align-items: center; }
.msv .msv-scale li.s-high.is-on span { color: var(--danger-ink); }
.msv .msv-scale li.s-elevated.is-on span, .msv .msv-scale li.s-watch.is-on span { color: var(--warn-ink); }
.msv .msv-scale li.s-low.is-on span { color: var(--ok-ink); }
.msv .msv-scale span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.msv .msv-hero-side { padding: 18px 20px; border-top: 1px solid var(--line); display: grid; gap: 14px; align-content: start; min-width: 0; }
@media (min-width: 1101px) { .msv .msv-hero-side { border-top: 0; border-left: 1px solid var(--line); } }
.msv .msv-hs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.msv .msv-hs { display: grid; gap: 2px; align-content: start; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font: inherit; color: inherit; min-width: 0; }
.msv button.msv-hs { cursor: pointer; transition: border-color 120ms, background 120ms; }
.msv button.msv-hs:hover { border-color: var(--teal-line); background: var(--surface-2); }
.msv .msv-hs.danger .v { color: var(--danger-ink); }
.msv .msv-hs.warn .v { color: var(--warn-ink); }
.msv .msv-hs .s { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msv .msv-hs-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }
.msv .msv-hs-foot > span:nth-child(2) { flex: 1 1 160px; min-width: 0; }
.msv .msv-hs-foot .msv-btn { height: var(--ctl-h-sm); min-height: var(--ctl-h-sm); font-size: var(--fs-sm); }
.msv .msv-hs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.msv .msv-hs-dot.warn { background: var(--warn); }
.msv .msv-hs-dot.danger { background: var(--danger); }

/* ---------- Do these 3 today ---------- */
.msv .msv-dotoday { padding: 0; overflow: hidden; }
.msv .msv-do-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); }
.msv .msv-do-head h3 { margin: 0 0 2px; font-size: var(--fs-xl); font-weight: 700; }
.msv .msv-do-prog { display: grid; gap: 7px; justify-items: end; min-width: 150px; }
.msv .msv-do-prog b { font-size: var(--fs-base); font-weight: 650; font-variant-numeric: tabular-nums; }
.msv .msv-do-prog .bar { width: 150px; height: 5px; border-radius: 999px; background: var(--surface-sunk); overflow: hidden; }
.msv .msv-do-prog .bar i { display: block; height: 100%; background: var(--teal); border-radius: 999px; }
.msv .msv-do-list { list-style: none; margin: 0; padding: 0; }
.msv .msv-do { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 20px 14px 22px; border-top: 1px solid var(--line-soft); }
.msv .msv-do:first-child { border-top: 0; }
.msv .msv-do::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--input-line); }
.msv .msv-do.r-ij::before, .msv .msv-do.r-harm::before { background: var(--danger); }
.msv .msv-do.r-potential::before { background: var(--warn); }
.msv .msv-do .msv-ltr { width: 34px; height: 34px; font-size: var(--fs-lead); border-radius: 9px; }
.msv .msv-do-main { min-width: 0; }
.msv .msv-do-main p { margin: 0; }
.msv .msv-do-main .t { font-size: var(--fs-lead); font-weight: 650; line-height: 1.35; }
.msv .msv-do-main .s { font-size: var(--fs-base); color: var(--fg-soft); margin-top: 2px; line-height: 1.4; }
.msv .msv-do-main .m { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); }
.msv .msv-do-main .m b { color: var(--fg); font-weight: 700; }
.msv .msv-do-main .m > span { display: inline-flex; gap: 5px; align-items: center; }
.msv .msv-do-main .due { color: var(--warn-ink); font-weight: 650; }
.msv .msv-do-who.warn { color: var(--warn-ink); font-weight: 600; }
.msv .msv-do-who.ok { color: var(--ok-ink); font-weight: 600; }
.msv .msv-do-who .late { color: var(--danger-ink); font-weight: 650; }
.msv .msv-do-act { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.msv .conf, .msv .msv-conf { display: inline-flex; gap: 5px; align-items: center; }
.msv .conf.strong .msv-ico, .msv .msv-conf.strong .msv-ico { color: var(--teal); }
.msv .conf.weak, .msv .msv-conf.weak { color: var(--warn-ink); }
.msv .conf.weak .msv-ico, .msv .msv-conf.weak .msv-ico { color: var(--warn); }
/* On a phone each task is one line and one tap: Open goes to the finding,
   where Assign a fix sits. The tag, due and owner stay in the finding. */
@media (max-width: 720px) {
  .msv .msv-do-list .msv-do { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; }
  .msv .msv-do-list .msv-do-main .s, .msv .msv-do-list .msv-do-main .m { display: none; }
  .msv .msv-do-list .msv-do-main .t { font-size: var(--fs-md); font-weight: 600; }
  .msv .msv-do-list .msv-do-act { grid-column: auto; }
  .msv .msv-do-list .msv-do-act > :not(.primary) { display: none; }
  .msv .msv-do-list .msv-do-act .msv-btn.primary { flex: none; width: var(--ctl-h); padding: 0; font-size: 0; gap: 0; }
  .msv .msv-do-list .msv-do-act .msv-btn.primary .msv-ico { width: 18px; height: 18px; }
  .msv .msv-do-head { padding: 12px 14px; flex-wrap: nowrap; align-items: center; }
  .msv .msv-do-head h3 { margin: 0; }
  .msv .msv-do-head .msv-cap { display: none; }
  .msv .msv-do-prog { min-width: 0; }
  .msv .msv-do-prog .bar { display: none; }
  .msv .msv-hs .s, .msv .msv-hs-foot { display: none; }
  .msv .msv-hs { padding: 8px 10px; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; }
  .msv .msv-hs .l { font-size: var(--fs-sm); line-height: 1.25; }
  .msv .msv-hs-grid { gap: 8px; }
  .msv .msv-hero-side { padding: 12px 16px 14px; }
  .msv .msv-hero-band { margin-top: 10px; }
  .msv .msv-hero .msv-risk-why { margin-top: 10px; font-size: var(--fs-lead); }
  .msv .msv-scale { margin-top: 14px; }
}
@media (max-width: 720px) {
  .msv .msv-do { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px 14px 18px; align-items: start; }
  .msv .msv-do-act { grid-column: 1 / -1; justify-content: flex-start; }
  .msv .msv-do-act .msv-btn { flex: 1 1 0; justify-content: center; }
  .msv .msv-do-head { padding: 14px 16px; }
  .msv .msv-do-prog { justify-items: start; }
}

/* ---------- the survey read ---------- */
.msv .msv-read { padding: 18px 20px; }
.msv .msv-read h3 { font-size: var(--fs-xl); line-height: 1.35; font-weight: 700; }
.msv .msv-rl { border-top-color: var(--line-soft); padding: 10px 0; }
.msv .msv-today { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 4px; }

/* ---------- likely citations ---------- */
.msv .msv-g-main { gap: 20px; }
.msv .msv-tools .msv-search { max-width: 360px; }
.msv .msv-grp { gap: 0; margin: 0 0 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); overflow: hidden; }
.msv .msv-gh { padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.msv .msv-gh .n { background: var(--surface-sunk); color: var(--fg-soft); border-radius: 6px; padding: 0 6px; font-size: var(--fs-xs); letter-spacing: 0; }
.msv .msv-it { border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: var(--card); overflow: visible; position: relative; }
.msv .msv-gh + .msv-it { border-top: 0; }
.msv .msv-it.harm, .msv .msv-it.ij { border-color: var(--line-soft); }
.msv .msv-it.is-open { box-shadow: inset 3px 0 0 var(--teal); background: var(--teal-soft); }
.msv .msv-head { position: relative; padding: 14px 44px 4px 16px; gap: 14px; }
.msv .msv-head::after { content: ""; position: absolute; right: 18px; top: 22px; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); opacity: .7; }
.msv .msv-it.is-open .msv-head::after { border-color: var(--teal); opacity: 1; }
.msv .msv-head:hover, .msv .msv-head:hover + .msv-sum { background: transparent; }
.msv .msv-it:hover { background: var(--surface-2); }
.msv .msv-it.is-open:hover { background: var(--teal-soft); }
.msv .msv-ltr { width: 34px; height: 34px; border-radius: 9px; font-size: var(--fs-lead); font-family: var(--font-display); }
.msv .msv-ltr.warn { background: var(--warn-soft); color: var(--warn-ink); box-shadow: inset 0 0 0 1px var(--warn-line); }
.msv .msv-ltr.neutral { background: var(--surface-sunk); color: var(--fg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.msv .msv-ltr.danger { background: var(--danger-soft); color: var(--danger-ink); box-shadow: inset 0 0 0 1px var(--danger-line); }
.msv .msv-ltr.ij { background: var(--cx-ij); color: var(--on-solid); }
.msv .msv-tp > span:first-child { color: var(--fg); font-weight: 700; font-size: var(--fs-base); }
.msv .msv-ti { font-size: var(--fs-lead); font-weight: 600; color: var(--fg-soft); }
.msv .msv-sum { padding: 0 44px 14px 64px; }
.msv .msv-quote { border-left-color: var(--line); color: var(--fg-soft); }
.msv .msv-ft { margin-top: 8px; }
@media (max-width: 720px) { .msv .msv-sum { padding-left: 16px; padding-right: 16px; } .msv .msv-head { padding-right: 36px; } .msv .msv-head::after { right: 14px; } }

/* the open finding: a drawer on wide screens, in place on a phone */
.msv .msv-body { background: var(--surface-2); border-top: 1px solid var(--line); }
.msv .msv-box { border-color: var(--line); border-radius: 10px; background: var(--card); }
.msv .msv-dr-head { display: flex; align-items: flex-start; gap: 12px; }
.msv .msv-dr-head .msv-dr-title, .msv .msv-dr-head > .msv-ltr { display: none; }
.msv .msv-dr-x { margin-left: auto; width: 34px; padding: 0; justify-content: center; color: var(--fg-soft); }
/* Wide screens: the open finding is a drawer on the right edge of the
   window, under the top bar, wide enough to read (up to 760px). It stays put
   while the list scrolls; the list stays clickable on the left. */
@media (min-width: 1101px) {
  .msv .msv-g-main { position: relative; }
  .msv .msv-g-main > section, .msv .msv-g-main [data-testid="ms-findings"], .msv .msv-g-main .msv-grp { position: static; }
  .msv .msv-g-main .msv-grp { overflow: visible; }
  .msv .msv-grp > .msv-gh { border-radius: var(--r-card) var(--r-card) 0 0; }
  .msv .msv-g-main .msv-it.is-open { position: static; }
  .msv .msv-it.is-open > .msv-body {
    position: fixed; top: var(--topbar-h, 60px); right: 0; bottom: 0; z-index: 1150;
    width: min(760px, 92vw); max-height: none; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    padding: 0 22px 28px; border: 0; border-left: 1px solid var(--line); border-radius: 0;
    background: var(--surface-2); box-shadow: var(--cx-shadow-drawer);
    animation: cx-drawer-in 180ms ease-out;
  }
  .msv .msv-it.is-open .msv-detail-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .msv .msv-dr-head { position: sticky; top: 0; z-index: 2; margin: 0 -22px; padding: 16px 22px 12px; background: var(--card); border-bottom: 1px solid var(--line); }
  .msv .msv-dr-head .msv-dr-title { display: block; flex: 1; min-width: 0; }
  .msv .msv-dr-head > .msv-ltr { display: grid; width: 38px; height: 38px; font-size: var(--fs-xl); }
  .msv .msv-dr-title .h { margin: 4px 0 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; }
  .msv .msv-dr-x { margin-left: 0; }
}
/* Phones: the open finding fills the screen, with its title and Close on top. */
@media (max-width: 720px) {
  .msv .msv-it.is-open > .msv-body {
    position: fixed; inset: 0; z-index: 1300; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    padding: 0 16px 32px; border: 0; background: var(--surface-2);
  }
  .msv .msv-dr-head { position: sticky; top: 0; z-index: 2; margin: 0 -16px; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
  .msv .msv-dr-head .msv-dr-title { display: block; flex: 1; min-width: 0; }
  .msv .msv-dr-head > .msv-ltr { display: grid; }
  .msv .msv-dr-title .h { margin: 4px 0 0; font-size: var(--fs-lead); font-weight: 700; line-height: 1.3; }
  .msv .msv-dr-x { margin-left: 0; flex: none; }
}
@keyframes cx-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .msv .msv-it.is-open > .msv-body { animation: none; } }

/* side rail, behind-the-read numbers */
.msv .msv-side { gap: 16px; }
.msv .msv-kpi .v, .msv .msv-vt .n, .msv .msv-big, .msv .msv-bc .sc { font-family: var(--font-display); font-weight: 750; font-variant-numeric: tabular-nums; }
.msv .msv-vt { border-color: var(--line); box-shadow: var(--shadow-sm); }
.msv .msv-kpi-btn:hover, .msv .msv-vt:hover { border-color: var(--teal-line); }
.msv .msv-bc { border-color: var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.msv .msv-lane { background: var(--surface-sunk); }
.msv .msv-fixcard { border-color: var(--line); box-shadow: var(--shadow-sm); }

@media (max-width: 720px) {
  .msv .msv-hero-main { padding: 18px 16px 16px; }
  .msv .msv-hero-side { padding: 16px; }
  .msv .msv-hero .msv-risk { font-size: 32px; }
  .msv .msv-hero-ico { width: 40px; height: 40px; }
  .msv .msv-scale { gap: 4px; }
  .msv .msv-scale li { font-size: var(--fs-xs); }
  .msv .msv-hs .v { font-size: var(--fs-3xl); }
  .msv .msv-pad, .msv .msv-read { padding: 16px; }
}
@media print { .msv .msv-hero-side { display: none; } .msv .msv-it.is-open > .msv-body { position: static; width: auto; box-shadow: none; } }

/* ============================================================
   QAPI (.qmx) — month checklist stepper, project cards with run
   charts, survey tags, topics and the meeting.
   ============================================================ */
.qmx { display: grid; gap: 18px; min-width: 0; }
.qmx * { box-sizing: border-box; }
.qmx h3 { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
.qmx h4 { margin: 0; }
.qmx .qm-meta { color: var(--muted); font-size: var(--fs-base); margin: 0; }
.qmx .qm-section { margin: 0; }
.qmx-pad { padding: 16px 20px; }
.qmx-sub { margin: 2px 0 0; font-size: var(--fs-base); color: var(--muted); }
.qmx-eb { margin: 0; font-size: var(--fs-xs); font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.qmx-sec { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 6px; }
.qmx-sec h3 { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qmx-count { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; color: var(--fg-soft); background: var(--surface-sunk); border-radius: 6px; padding: 1px 7px; }
.qmx-empty { padding: 14px 0; }
.qmx-chip { border: 1px solid transparent; font-family: var(--font-sans); }
.qmx-chip .cx-ico { width: 13px; height: 13px; }
.qmx-chip.danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-ink); }
.qmx-chip.warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-ink); }
.qmx-chip.ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-ink); }
.qmx-chip.neutral { background: var(--surface-sunk); border-color: var(--line); color: var(--fg-soft); }

/* buttons in the refresh style */
.qmx .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ctl-h); padding: 0 var(--ctl-px); border-radius: var(--r-sm); font-size: var(--fs-base); font-weight: 600; white-space: nowrap; transition: background 120ms, border-color 120ms; box-sizing: border-box; }
.qmx .button .cx-ico { width: 14px; height: 14px; }
.qmx .button-primary { background: var(--teal); border: 1px solid var(--teal); color: var(--on-solid); box-shadow: var(--shadow-sm); }
.qmx .button-primary:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
.qmx .button-secondary { background: var(--card); border: 1px solid var(--input-line); color: var(--fg); }
.qmx .button-secondary:hover { background: var(--surface-hover); }
.qmx .button-ghost { background: transparent; border: 1px solid transparent; color: var(--teal); }
.qmx .button-ghost:hover { background: var(--teal-soft); }
.qmx .button[disabled] { opacity: .55; cursor: default; }
.qmx :is(input.qm-field, input.qm-number, textarea.qm-note) { border: 1px solid var(--input-line); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: var(--fs-base); background: var(--card); color: var(--fg); min-height: 36px; }
.qmx :is(input, textarea, button):focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* building chips as a segmented control */
.qmx .qm-chips { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-sunk); border-radius: 10px; margin: 0; justify-self: start; max-width: 100%; flex-wrap: wrap; }
.qmx .qm-chip { border: 0; background: transparent; border-radius: 8px; padding: 6px 14px; font: inherit; font-size: var(--fs-base); font-weight: 600; color: var(--fg-soft); cursor: pointer; min-height: 32px; }
.qmx .qm-chip:hover { color: var(--fg); }
.qmx .qm-chip.is-active { background: var(--card); color: var(--fg); box-shadow: var(--shadow-sm); }

/* month checklist stepper */
.qmx-month { padding: 16px 20px 18px; }
.qmx-month-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; margin-bottom: 14px; }
.qmx-prog { display: grid; gap: 7px; justify-items: end; }
.qmx-prog b { font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.qmx-bar { width: 140px; height: 5px; background: var(--surface-sunk); border-radius: 999px; overflow: hidden; }
.qmx-bar i { display: block; height: 100%; background: var(--teal); border-radius: 999px; }
.qmx .qm-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.qmx .qm-check { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); text-align: left; font-weight: 400; min-width: 0; }
.qmx .qm-check.is-done { background: var(--surface-2); }
.qmx .qm-check.is-current { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.qmx .qm-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700; color: var(--fg-soft); border: 1.5px solid var(--input-line); background: var(--card); }
.qmx .qm-check.is-done .qm-dot { background: var(--teal); border-color: var(--teal); color: var(--on-solid); }
.qmx .qm-check.is-done .qm-dot .cx-ico { width: 13px; height: 13px; stroke-width: 3; }
.qmx .qm-check.is-current .qm-dot { border-color: var(--teal); color: var(--teal); }
.qmx .qm-step { display: grid; gap: 1px; min-width: 0; }
.qmx .qm-step b { font-size: var(--fs-base); font-weight: 650; color: var(--fg); }
.qmx .qm-step-st { font-size: var(--fs-xs); font-weight: 650; color: var(--warn-ink); }
.qmx .qm-check.is-done .qm-step-st { color: var(--ok-ink); }
.qmx .qm-step small { font-size: var(--fs-sm); color: var(--muted); line-height: 1.35; }
@media (max-width: 1100px) { .qmx .qm-checks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .qmx .qm-checks { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .qmx .qm-check { border: 0; border-radius: 0; padding: 9px 0; background: transparent; position: relative; }
  .qmx .qm-check.is-done { background: transparent; }
  .qmx .qm-check.is-current { box-shadow: none; }
  .qmx .qm-check.is-current .qm-step b { color: var(--teal-deep); }
  .qmx .qm-check + .qm-check::before { content: ""; position: absolute; left: 11px; top: -9px; height: 18px; width: 2px; background: var(--line); }
  .qmx .qm-step { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
  .qmx .qm-step small { grid-column: 1 / -1; }
  .qmx-prog { justify-items: start; }
}

/* status banners (cadence, plan, no project) */
.qmx-status { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.qmx-status:empty { display: none; }
.qmx .qmx-banner { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 14px; border-radius: 10px; font-size: var(--fs-base); font-weight: 600; box-shadow: none; border: 1px solid var(--line); background: var(--card); }
.qmx .qmx-banner .cx-ico { width: 17px; height: 17px; flex: none; }
.qmx .qmx-banner.tone-green { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-ink); }
.qmx .qmx-banner.tone-yellow { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-ink); }
.qmx .qmx-banner.tone-red { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-ink); }
.qmx .qmx-plan { padding: 14px 16px; border-left: 3px solid var(--danger); display: grid; gap: 8px; }
.qmx .qmx-plan h3 { display: flex; align-items: center; gap: 8px; color: var(--danger-ink); font-size: var(--fs-lead); }
.qmx .qmx-file { display: flex; gap: 6px; align-items: center; margin: 0; font-size: var(--fs-base); }
.qmx-plan-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.qmx-plan-form label { display: grid; gap: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--fg-soft); min-width: 0; flex: 1 1 200px; }

/* projects */
.qmx-projects { display: grid; gap: 10px; }
.qmx-pips { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.qmx .qmx-pip { padding: 16px 18px 0; display: grid; gap: 10px; align-content: start; margin: 0; overflow: hidden; }
.qmx-pip-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qmx-pip-since { font-size: var(--fs-sm); color: var(--muted); }
.qmx-pip h4 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; }
.qmx-owner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -2px 0 0; font-size: var(--fs-base); color: var(--fg-soft); }
.qmx-owner a { color: var(--teal); font-weight: 600; }
.qmx-av { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--teal-soft); color: var(--teal-deep); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .02em; }
.qmx-measure { display: none; }
.qmx .qmx-goal { font-size: var(--fs-sm); }
.qmx .qmx-goal b { color: var(--fg-soft); font-weight: 650; }

.qmx-run { position: relative; padding: 4px 0 0; color: var(--teal); }
.qmx-run.tone-red { color: var(--danger); }
.qmx-run.tone-yellow { color: var(--warn); }
.qmx-run-plot { position: relative; height: 110px; }
.qmx-run-svg { display: block; width: 100%; height: 110px; overflow: visible; }
.qmx-run-svg .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.qmx-run-svg .med { stroke: var(--muted); stroke-width: 1.25; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: .8; }
.qmx-run-svg .area { fill: currentColor; opacity: .08; }
.qmx-run-svg .line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.qmx-run-svg .pt { fill: currentColor; stroke: var(--card); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.qmx-run-svg .pt.last { fill: var(--card); stroke: currentColor; stroke-width: 2.5; }
.qmx-run-last { position: absolute; transform: translate(-50%, -100%); margin-top: -7px; font-size: var(--fs-sm); font-weight: 750; color: var(--fg); background: var(--card); padding: 0 3px; border-radius: 4px; pointer-events: none; }
.qmx-run-med { position: absolute; left: 0; transform: translateY(-100%); margin-top: -2px; font-size: var(--fs-2xs); font-weight: 650; color: var(--muted); background: var(--card); padding: 0 4px 0 0; pointer-events: none; }
.qmx-run-x { display: grid; margin-top: 4px; }
.qmx-run-x span { display: grid; justify-items: center; font-size: var(--fs-xs); color: var(--muted); line-height: 1.3; }
.qmx-run-x b { font-size: var(--fs-xs); font-weight: 650; color: var(--fg-soft); font-variant-numeric: tabular-nums; }
.qmx-run-x span.is-now { color: var(--fg); font-weight: 700; }
.qmx-nochart { padding: 18px 12px; text-align: center; background: var(--surface-2); border: 1px dashed var(--input-line); border-radius: 10px; font-size: var(--fs-sm); }

.qmx-pip-month { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.qmx-num-row { gap: 8px; }
.qmx-num { flex: 1 1 120px; min-width: 0; }
.qmx .qmx-num .qm-number { width: 100%; font-weight: 650; font-variant-numeric: tabular-nums; }
.qmx .qmx-saved { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.qmx-note-l { display: grid; gap: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--fg-soft); }
.qmx .qm-note { max-width: none; resize: vertical; min-height: 52px; }
.qmx-pip-foot { margin: 2px -18px 0; padding: 10px 18px; background: var(--surface-2); border-top: 1px solid var(--line); }
.qmx-seg { flex-wrap: wrap; }
.qmx .qm-status:hover:not([disabled]) { color: var(--fg); }
.qmx .qm-status.red.is-on { color: var(--danger-ink); }
.qmx .qm-status.green.is-on { color: var(--ok-ink); }
.qmx .qm-status[disabled] { cursor: default; }
.qmx .qmx-pip.tone-red { border-top: 3px solid var(--danger); }
.qmx .qmx-pip.tone-yellow { border-top: 3px solid var(--warn); }
.qmx .qmx-pip.tone-green { border-top: 3px solid var(--ok); }

.qmx .qmx-form { padding: 16px 18px; display: grid; gap: 10px; }
.qmx-form-grid { display: grid; gap: 10px 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.qmx-form-grid label { display: grid; gap: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--fg-soft); }
.qmx-form-grid .qm-field { max-width: none; }

/* last month */
.qmx-lastlist { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.qmx-lastlist li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-base); }
.qmx-lastlist li:first-child { border-top: 0; }
.qmx-lastlist b { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* survey tags */
.qmx .qmx-tags { padding: 16px 0 6px; }
.qmx .qmx-tags > .qmx-sec, .qmx .qmx-tags > .qm-meta, .qmx .qmx-tags > .qm-error { padding: 0 20px; }
.qmx .qmx-tags > .qm-meta { margin-bottom: 8px; }
.qmx .qmx-tag { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 20px; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; margin: 0; background: transparent; }
.qmx .qmx-tag.is-open { box-shadow: inset 3px 0 0 var(--warn); }
.qmx-sev { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-base); background: var(--surface-sunk); color: var(--fg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.qmx-sev.warn { background: var(--warn-soft); color: var(--warn-ink); box-shadow: inset 0 0 0 1px var(--warn-line); }
.qmx-sev.danger { background: var(--danger-soft); color: var(--danger-ink); box-shadow: inset 0 0 0 1px var(--danger-line); }
.qmx-sev.ij { background: var(--cx-ij); color: var(--on-solid); box-shadow: none; }
.qmx-tag-main { min-width: 0; display: grid; gap: 3px; }
.qmx-tag-t { margin: 0; font-size: var(--fs-base); color: var(--fg-soft); }
.qmx-tag-t strong { color: var(--fg); font-weight: 700; margin-right: 4px; }
.qmx .qmx-tag .qm-meta { font-size: var(--fs-sm); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.qmx .qmx-tag .qm-meta .qm-status { height: auto; padding: 0; background: transparent; box-shadow: none; display: inline-flex; gap: 5px; align-items: center; font-weight: 650; cursor: default; }
.qmx .qmx-tag .qm-status.yellow { color: var(--warn-ink); }
.qmx .qmx-tag .qm-status.green { color: var(--ok-ink); }
.qmx .qmx-tag .qm-status.red { color: var(--danger-ink); }
.qmx-tag-act { flex-wrap: nowrap; }
.qmx-tag-act .button { height: var(--ctl-h-sm); padding: 0 var(--ctl-px-sm); border-radius: var(--r-sm); box-sizing: border-box; }
@media (max-width: 720px) {
  .qmx .qmx-tag { grid-template-columns: auto minmax(0, 1fr); padding: 12px 16px; }
  .qmx-tag-act { grid-column: 1 / -1; flex-wrap: wrap; }
  .qmx-tag-act .button { flex: 1 1 160px; }
  .qmx .qmx-tags > .qmx-sec, .qmx .qmx-tags > .qm-meta, .qmx .qmx-tags > .qm-error { padding: 0 16px; }
}

/* meeting */
.qmx .qm-up { color: var(--danger-ink); font-weight: 700; }
.qmx .qmx-meeting { padding: 16px 20px 18px; display: grid; gap: 10px; }
.qmx .qmx-signed { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--ok-soft); color: var(--ok-ink); font-weight: 650; font-size: var(--fs-base); border: 1px solid var(--ok-line); }
.qmx #qm-sign-form { display: grid; gap: 10px; }
.qmx .qmx-date, .qmx .qmx-gap { display: grid; gap: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--fg-soft); }
.qmx .qmx-date .qm-field { max-width: 220px; }
.qmx .qmx-gap .qm-field { max-width: none; }
.qmx-roles { display: grid; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.qmx .qm-role { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "av l sw" "av n sw"; gap: 2px 10px; align-items: center; padding: 9px 12px; margin: 0; max-width: none; border-top: 1px solid var(--line-soft); cursor: pointer; }
.qmx .qm-role:first-child { border-top: 0; }
.qmx .qm-role .qmx-av { grid-area: av; width: 30px; height: 30px; font-size: var(--fs-xs); background: var(--surface-sunk); color: var(--fg-soft); }
.qmx .qm-role.is-present .qmx-av { background: var(--teal-soft); color: var(--teal-deep); }
.qmx-role-l { grid-area: l; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.qmx-role-l em { font-style: normal; color: var(--teal-deep); font-weight: 650; margin-left: 4px; }
.qmx .qm-role .qm-field { grid-area: n; border-color: transparent; background: transparent; padding: 2px 6px; margin-left: -6px; min-height: 28px; font-weight: 600; font-size: var(--fs-base); max-width: none; width: 100%; }
.qmx .qm-role .qm-field:hover, .qmx .qm-role .qm-field:focus { border-color: var(--input-line); background: var(--card); }
.qmx-switch { grid-area: sw; position: relative; width: 36px; height: 20px; }
.qmx-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.qmx-switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--input-line); transition: background 120ms; }
.qmx-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-sm); transition: transform 120ms; }
.qmx-switch input:checked + i { background: var(--teal); }
.qmx-switch input:checked + i::after { transform: translateX(16px); }
.qmx-switch input:focus-visible + i { outline: 2px solid var(--teal); outline-offset: 2px; }
.qmx-sign-act .button-primary { flex: 1 1 auto; height: var(--ctl-h); font-size: var(--fs-md); }
.qmx-older { margin-top: -4px; }
.qmx-older a { color: var(--teal); font-weight: 600; }

/* corporate rollup */
.qmx-bgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.qmx .qmx-bcard { display: grid; gap: 10px; align-content: start; width: 100%; margin: 0; padding: 16px 18px; text-align: left; font: inherit; color: inherit; cursor: pointer; border-top-width: 3px; transition: border-color 120ms, box-shadow 120ms; }
.qmx .qmx-bcard:hover { box-shadow: var(--shadow); }
.qmx .qmx-bcard.tone-red { border-top-color: var(--danger); }
.qmx .qmx-bcard.tone-yellow { border-top-color: var(--warn); }
.qmx .qmx-bcard.tone-green { border-top-color: var(--ok); }
.qmx-bcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.qmx-bcard-top h4 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; }
.qmx-bstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qmx-bstats > span { display: grid; gap: 0; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line-soft); font-size: var(--fs-xs); color: var(--muted); line-height: 1.3; }
.qmx-bstats b { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 750; color: var(--fg); }
.qmx-bstats > span.is-bad b { color: var(--danger-ink); }
.qmx-bstats .qm-up { color: inherit; }
.qmx-blines { display: grid; gap: 6px; }
.qmx-blines > span { display: flex; gap: 7px; align-items: flex-start; font-size: var(--fs-base); color: var(--fg-soft); }
.qmx-blines .cx-ico { margin-top: 2px; }
.qmx-blines .tone-red .cx-ico { color: var(--danger); }
.qmx-blines .tone-yellow .cx-ico { color: var(--warn); }
.qmx-blines .tone-green .cx-ico { color: var(--ok); }
.qmx .qmx-btopics { font-size: var(--fs-sm); padding-top: 8px; border-top: 1px solid var(--line-soft); }
.qmx-roll-act { margin-top: 12px; }

@media (max-width: 720px) {
  .qmx-month, .qmx .qmx-meeting, .qmx-pad { padding-left: 16px; padding-right: 16px; }
  .qmx .qmx-pip { padding: 14px 16px 0; }
  .qmx-pip-foot { margin: 2px -16px 0; padding: 10px 16px; }
  .qmx .qmx-tag { padding: 12px 16px; }
}

/* QAPI quality numbers, survey readiness, month picker, goal lines. */
.qmx-monthnav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qmx-monthnav b { font-size: var(--fs-lg); min-width: 9em; text-align: center; }
.qmx-monthnav .button { text-decoration: none; }
.qmx-monthnav-gap { display: inline-block; width: 64px; }
.qmx-ready-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.qmx-ready-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.qmx-ready-list li:first-child { border-top: 0; }
.qmx-ready-list li b { font-weight: 650; color: var(--fg); }
.qmx-ready-list li small { display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
.qmx-ready-ico .cx-ico { width: 18px; height: 18px; }
.qmx-ready-list li.is-ok .qmx-ready-ico { color: var(--ok); }
.qmx-ready-list li.is-miss .qmx-ready-ico { color: var(--danger); }
.qmx-ind-tag { font-size: var(--fs-2xs); font-weight: 700; color: var(--fg-soft); background: var(--surface-sunk); border-radius: 5px; padding: 1px 5px; vertical-align: middle; }
.qmx-ind-group { display: grid; gap: 8px; margin-top: 14px; }
.qmx-ind-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.qmx-ind { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card); display: grid; gap: 6px; align-content: start; min-width: 0; }
.qmx-ind.tone-red { border-color: var(--danger-line); box-shadow: inset 3px 0 0 var(--danger); }
.qmx-ind.tone-yellow { border-color: var(--warn-line); box-shadow: inset 3px 0 0 var(--warn); }
.qmx-ind.tone-gray { background: var(--surface-sunk); }
.qmx-ind-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.qmx-ind-t { margin: 0; font-weight: 650; font-size: var(--fs-base); color: var(--fg); }
.qmx-ind-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qmx-ind-v { margin: 0; font-variant-numeric: tabular-nums; }
.qmx-ind-v b { font-size: var(--fs-xl); font-weight: 750; color: var(--fg); }
.qmx-ind-v small { color: var(--muted); font-size: var(--fs-xs); }
.qmx .qmx-ind-meta, .qmx .qmx-ind-note { font-size: var(--fs-sm); }
.qmx .qmx-ind-note { color: var(--warn-ink); }
.qmx-ind-how summary { cursor: pointer; font-size: var(--fs-xs); color: var(--muted); }
.qmx-ind-how p { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--fg-soft); }
.qmx-spark { width: 120px; height: 32px; flex: none; color: var(--teal); overflow: visible; }
.qmx-ind.tone-red .qmx-spark { color: var(--danger); }
.qmx-ind.tone-yellow .qmx-spark { color: var(--warn); }
.qmx-spark path { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.qmx-spark .goal, .qmx-run-svg .goal { stroke: var(--ok); stroke-width: 1.25; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.qmx-run-goal { position: absolute; right: 0; transform: translateY(-100%); margin-top: -2px; font-size: var(--fs-2xs); font-weight: 650; color: var(--ok-ink); background: var(--card); padding: 0 0 0 4px; pointer-events: none; }
.qmx-link { border: 0; background: none; padding: 0; color: var(--teal); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.qmx-goal-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qmx-goal-form label { display: inline-flex; align-items: center; gap: 6px; }
.qmx-goal-form .qm-number { width: 90px; }
.qmx-why { display: grid; gap: 4px; padding: 8px 10px; border-radius: 8px; background: var(--surface-sunk); font-size: var(--fs-sm); }
.qmx-why p { margin: 0; color: var(--fg-soft); }
.qmx-why.is-missing { background: var(--warn-soft); }
.qmx-why .button { justify-self: start; }
.qmx-miss { color: var(--warn-ink); font-weight: 600; }
.qmx-details-form { display: grid; gap: 8px; }
.qmx-details-form label { display: grid; gap: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--fg-soft); }
.qmx .qmx-auto { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.qmx .qmx-auto .cx-ico { width: 14px; height: 14px; color: var(--ok); }
.qmx-watch-h { padding: 10px 20px 0; }
@media (max-width: 720px) {
  .qmx-watch-h { padding: 10px 16px 0; }
  .qmx-monthnav b { min-width: 0; }
}

/* ============================================================
   Audit Capture (.ax) — this week's audits with progress, a review
   queue with Accept / Needs more in place, and per-audit week strips.
   ============================================================ */
.ax-shell .audit-tabs { margin: 0 0 16px; }

.ax { display: grid; gap: 16px; min-width: 0; color: var(--fg); }
.ax * { box-sizing: border-box; }
.ax h3 { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; }
.ax-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 16px 18px 12px; }
.ax-queue > .ax-card-head { flex-wrap: nowrap; }
.ax-sub { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.ax-tag { background: var(--surface-sunk); border: 1px solid var(--line); color: var(--fg-soft); letter-spacing: .01em; text-transform: none; }
.ax-av { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--teal-soft); color: var(--teal-deep); font-size: var(--fs-xs); font-weight: 700; }
:is(.ax, .ax-modal) .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ctl-h); min-height: var(--ctl-h); padding: 0 var(--ctl-px); border-radius: var(--r-sm); font-size: var(--fs-base); font-weight: 600; white-space: nowrap; box-sizing: border-box; }
:is(.ax, .ax-modal) .button .cx-ico { width: 14px; height: 14px; }
:is(.ax, .ax-modal) .button:not(.button-secondary):not(.button-primary):not(.button-ghost) { background: var(--teal); border: 1px solid var(--teal); color: var(--on-solid); }
:is(.ax, .ax-modal) .button:not(.button-secondary):not(.button-primary):not(.button-ghost):hover { background: var(--teal-deep); }
:is(.ax, .ax-modal) .button.is-more:not(.button-secondary) { background: var(--teal-soft); border-color: transparent; color: var(--teal-deep); }
:is(.ax, .ax-modal) .button-primary { background: var(--teal); border: 1px solid var(--teal); color: var(--on-solid); }
:is(.ax, .ax-modal) .button-secondary { background: var(--card); border: 1px solid var(--input-line); color: var(--fg); }
:is(.ax, .ax-modal) .button-secondary:hover { background: var(--surface-hover); }
:is(.ax, .ax-modal) .button[disabled] { opacity: .55; }
.ax-chip { letter-spacing: 0; }
.ax-chip .cx-ico { width: 12px; height: 12px; }
.ax .ax-chip.ok { background: var(--ok-soft); color: var(--ok-ink); border: 1px solid var(--ok-line); }
.ax .ax-chip.warn { background: var(--warn-soft); color: var(--warn-ink); border: 1px solid var(--warn-line); }
.ax .ax-chip.danger { background: var(--danger-soft); color: var(--danger-ink); border: 1px solid var(--danger-line); }

/* KPI strip */
.ax .ax-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; margin: 0; text-align: left; overflow: hidden; }
.ax .ax-kpi { display: grid; gap: 2px; align-content: start; border-left: 1px solid var(--line); min-width: 0; }
.ax .ax-kpi:first-child { border-left: 0; }
.ax .ax-kpi strong { color: var(--fg); }
.ax .ax-kpi strong small { font-size: var(--fs-md); color: var(--muted); font-weight: 600; }
.ax .ax-kpi > span:not(.ax-kpi-l):not(.ax-bar) { font-size: var(--fs-sm); color: var(--muted); }
.ax .ax-kpi.is-bad strong { color: var(--danger-ink); }
.ax .audit-summary .audit-week strong { font-size: var(--fs-xl); padding: 5px 0 3px; }
.ax-bar { display: block; height: 5px; margin-top: 6px; border-radius: 999px; background: var(--surface-sunk); overflow: hidden; }
.ax-bar i { display: block; height: 100%; background: var(--teal); border-radius: 999px; }

/* department chips */
.ax .audit-chip-row { margin: 0; gap: 6px; }

/* this week + rail */
.ax-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1101px) { .ax-grid.has-rail { grid-template-columns: minmax(0, 1fr) 340px; } }
.ax .audit-list { gap: 0; }
.ax .audit-card.ax-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pip main state" "pip main act"; gap: 6px 14px; align-items: start; padding: 14px 18px; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; box-shadow: none; background: transparent; }
.ax .audit-card.ax-row.audit-overdue { box-shadow: inset 3px 0 0 var(--danger); }
.ax .audit-card.ax-row.audit-owed { box-shadow: inset 3px 0 0 var(--warn); }
.ax .audit-card.audit-submitted, .ax .audit-card.audit-overdue, .ax .audit-card.audit-owed { border-left: 0; }
.ax-pip { grid-area: pip; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed var(--input-line); color: var(--muted); margin-top: 2px; }
.ax-pip .cx-ico { width: 15px; height: 15px; }
.ax-pip.is-done { background: var(--teal); border: 0; color: var(--on-solid); }
.ax-pip.is-done .cx-ico { stroke-width: 3; }
.ax-pip.is-late { border: 1.5px solid var(--danger-line); background: var(--danger-soft); color: var(--danger); }
.ax .ax-row-main { grid-area: main; display: grid; gap: 4px; min-width: 0; }
.ax .ax-row-main .eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-xs); letter-spacing: .02em; text-transform: none; color: var(--muted); font-weight: 600; }
.ax .ax-row-main h3 { margin: 0; font-size: var(--fs-lead); font-weight: 650; font-family: var(--font-sans); letter-spacing: 0; }
.ax .ax-row .audit-card-meta { margin: 0; gap: 4px 12px; font-size: var(--fs-sm); }
.ax .audit-photo-req { display: inline-flex; gap: 4px; align-items: center; color: var(--danger-ink); }
.ax-missed { color: var(--muted); }
.ax-missed.is-bad { display: inline-flex; gap: 4px; align-items: center; color: var(--danger-ink); font-weight: 600; }
.ax-row-state { grid-area: state; display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.ax-rv { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.ax-rv.is-wait { color: var(--info-ink); }
.ax-rv.is-ok { color: var(--ok-ink); }
.ax-rv.is-more { color: var(--warn-ink); }
.ax-count { font-size: var(--fs-sm); color: var(--muted); }
.ax .ax-row .audit-card-actions { grid-area: act; justify-content: flex-end; flex-wrap: wrap; gap: 8px; align-items: center; }
.ax .ax-row .audit-card-actions .button { min-height: var(--ctl-h); }
.ax .ax-week .ax-empty { margin: 0 18px 18px; }
@media (max-width: 720px) {
  .ax .audit-card.ax-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pip main" "pip state" "act act"; padding: 14px 16px; }
  .ax-row-state { justify-content: flex-start; }
  .ax .ax-row .audit-card-actions { justify-content: stretch; }
  .ax .ax-row .audit-card-actions .button { flex: 1 1 0; min-height: var(--ctl-h-lg); }
  .ax .ax-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax .ax-kpi:nth-child(3) { border-left: 0; }
  .ax .ax-kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ax-card-head { padding: 14px 16px 10px; }
}

/* review queue */
.ax-queue { padding-bottom: 6px; }
.ax-n { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--surface-sunk); color: var(--fg-soft); font-size: var(--fs-sm); font-weight: 700; }
.ax-n.is-on { background: var(--teal); color: var(--on-solid); }
.ax-q { display: grid; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line-soft); }
.ax-q-head { display: flex; align-items: center; gap: 10px; }
.ax-q-who { flex: 1; min-width: 0; }
.ax-q-t { margin: 0; font-size: var(--fs-base); font-weight: 650; line-height: 1.3; }
.ax-q-s { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.ax-q-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ax-trunc { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-thumb { width: 34px; height: 40px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); display: inline-grid; place-items: center; color: var(--muted); cursor: pointer; flex: none; }
.ax-thumb:hover { border-color: var(--teal-line); color: var(--teal); }
.ax-thumb.is-static { cursor: default; }
.ax-q-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ax-q-act .button { width: 100%; }
.ax-empty .cx-ico { color: var(--ok); }

/* tracker: per-audit week strips */
.ax .ax-tracker { padding: 0 0 8px; }
.ax-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-sm); color: var(--muted); align-items: center; }
.ax-legend span { display: inline-flex; gap: 6px; align-items: center; }
.ax-legend i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line); }
.ax-legend .l-acc { background: var(--ok-soft); border-color: var(--ok-line); }
.ax-legend .l-sub { background: var(--info-soft); border-color: var(--info-line); }
.ax-legend .l-more { background: var(--warn-soft); border-color: var(--warn-line); }
.ax-legend .l-miss { background: var(--danger-soft); border-color: var(--danger-line); }
.ax-legend .l-open { background: var(--card); border-style: dashed; border-color: var(--input-line); }
.ax-strips { display: grid; }
.ax-strip { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 8px 16px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line-soft); }
.ax-strip-name { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: center; min-width: 0; }
.ax-strip-t { font-size: var(--fs-base); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-strip-r { grid-column: 2; font-size: var(--fs-sm); color: var(--muted); }
.ax-strip-r.tone-ok { color: var(--ok-ink); }
.ax-strip-r.tone-warn { color: var(--warn-ink); }
.ax-strip-r.tone-bad { color: var(--danger-ink); font-weight: 600; }
.ax-cells { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.ax .audit-cell { width: auto; height: auto; min-height: 46px; display: grid; place-items: center; align-content: center; gap: 1px; padding: 4px 2px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: inherit; cursor: pointer; min-width: 0; }
.ax .audit-cell b { font-size: var(--fs-md); font-weight: 800; line-height: 1.1; }
.ax .audit-cell b sup { font-size: var(--fs-3xs); margin-left: 1px; }
.ax .audit-cell em { font-style: normal; font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ax .audit-cell:hover { border-color: var(--teal); }
.ax .audit-cell-submitted.is-accepted { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-ink); }
.ax .audit-cell-submitted.is-unreviewed { background: var(--info-soft); border-color: var(--info-line); color: var(--info-ink); }
.ax .audit-cell-submitted.is-more { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-ink); }
.ax .audit-cell-overdue { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-ink); }
.ax .audit-cell-owed { background: var(--card); border-style: dashed; border-color: var(--input-line); color: var(--muted); }
.ax .audit-cell.is-now { box-shadow: 0 0 0 2px var(--fg); border-color: transparent; }
.ax .audit-cell.is-now em { color: var(--fg); }
@media (max-width: 720px) {
  .ax-strip { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
  .ax-cells { gap: 4px; }
  .ax .audit-cell { min-height: 42px; border-radius: 6px; }
  .ax .audit-cell em { font-size: var(--fs-2xs); }
  .ax .audit-cell .l-long { display: none; }
  .ax .audit-cell .l-short { display: inline; }
}
.ax .audit-cell .l-short { display: none; }

/* the per-cell photo modal */
.ax-modal { display: grid; gap: 10px; }
.ax-modal-sub { margin: 0; }
.ax-sub-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--card); }
.ax-sub-top { display: flex; align-items: center; gap: 10px; }
.ax-sub-who { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ax-sub-state { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ax-sub-act { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ax-sub-rev { margin-top: 6px; }
.ax-modal .ax-del { color: var(--danger); border-color: var(--danger); }
.ax-modal-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ax-modal .cx-ico { width: 14px; height: 14px; }

/* the send-back note: shown on the audit card and in the photo window, and
   the small box Needs more opens to write it */
.ax-rv-note { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn-ink); font-size: var(--fs-sm); line-height: 1.45; overflow-wrap: anywhere; }
.ax-rv-note .cx-ico { margin-top: 2px; }
.ax-rv-note b { font-weight: 650; }
.ax-rv-note i { font-style: normal; color: var(--muted); }
.ax-modal .ax-rv-note { margin-top: 8px; }
.ax-q-act.is-note, .ax-sub-act.is-note { display: block; }
.ax-more { display: grid; gap: 6px; width: 100%; }
.ax-more-l { font-size: var(--fs-sm); font-weight: 650; color: var(--fg); }
.ax-more-in { width: 100%; box-sizing: border-box; min-height: 56px; resize: vertical; padding: 8px 10px; border: 1px solid var(--input-line); border-radius: 8px; background: var(--card); color: var(--fg); font: inherit; font-size: var(--fs-base); }
.ax-more-in:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.ax-more-h { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.ax-more-err { margin: 0; font-size: var(--fs-sm); color: var(--danger-ink); font-weight: 600; }
.ax-more-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Audit Capture: the capture flow (#/audits?capture=1) ----------
   Only what is still owed, one audit per row, a big camera button. The
   employee home's "Capture an audit" card opens it. */
.ax-cap .ax-week { max-width: 760px; }
.ax-cap-how { margin: 0 18px 12px; padding: 10px 14px 10px 32px; border-radius: 10px; background: var(--teal-soft); color: var(--fg-soft); font-size: var(--fs-base); line-height: 1.5; }
.ax-cap-how b { color: var(--fg); }
.ax-cap .audit-capture-btn { min-height: 48px; font-size: var(--fs-lead); font-weight: 650; }
.ax-cap .audit-capture-btn .cx-ico { width: 18px; height: 18px; }
.ax-cap-foot { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 18px 16px; border-top: 1px solid var(--line-soft); }
.ax-cap-foot .button { min-height: var(--ctl-h-lg); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.ax-shell.is-capture .ax-cap .ax-empty .cx-ico { color: var(--ok); }
@media (max-width: 720px) {
  .ax-cap-how { margin: 0 16px 12px; }
  .ax-cap .ax-row .audit-card-actions .audit-capture-btn { flex: 1 1 100%; min-height: 52px; }
  .ax-cap-foot { padding: 12px 16px 16px; }
  .ax-cap-foot .button { flex: 1 1 0; }
}
/* The employee portal strips the shell's padding; the capture flow keeps a 16px gutter. */
body.hr-employee-locked #app-root:has(.ax-shell.is-capture) { padding: 16px 16px 32px !important; }

/* ---------- Settings: Backfill audit history (Owner only, audit-backfill.js) ---------- */
.abf .abf-sub { margin: 0 0 12px; max-width: 70ch; font-size: var(--fs-base); color: var(--muted); line-height: 1.5; }
.abf .abf-owner { margin-left: 10px; font-size: var(--fs-sm); color: var(--muted); }
.abf-dlg { display: grid; gap: 10px; }
.abf-dlg p { margin: 0; line-height: 1.5; }
.abf-dlg .abf-count, .abf-dlg .abf-done { font-size: var(--fs-lead); font-weight: 650; color: var(--fg); }
.abf-dlg .abf-note, .abf-dlg .abf-wait { font-size: var(--fs-base); color: var(--muted); }
.abf-dlg .abf-err { color: var(--danger-ink); }
.abf-dlg .abf-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.abf-dlg .abf-row .pt-btn { text-decoration: none; }

/* ---- Past surveys card (past-surveys.js) + one-time job status lines ---- */
.psv-status { margin: 0 0 12px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; max-width: 70ch; }
.psv-status:empty { display: none; }
.psv-status[data-state="done"] { color: var(--ok-ink, var(--fg)); }
.psv-status[data-state="failed"], .psv-status[data-state="retry"] { color: var(--danger-ink); }

/* ---- "CMS data last refreshed" (cms-freshness.js) on Surveys and Mock Survey ---- */
.cmsf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 12px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }
.cmsf .cmsf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.cmsf.is-ok .cmsf-dot { background: var(--ok); }
.cmsf.is-warn .cmsf-dot { background: var(--warn); }
.cmsf .cmsf-word { font-weight: 650; color: var(--fg); }
.cmsf.is-warn .cmsf-word, .cmsf.is-warn .cmsf-txt { color: var(--warn-ink, var(--fg)); }
.cmsf .cmsf-btn { margin-left: 4px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg); font: inherit; font-weight: 600; cursor: pointer; }
.cmsf .cmsf-btn:hover { border-color: var(--teal); color: var(--teal); }
.cmsf .cmsf-btn:disabled { opacity: .6; cursor: progress; }
.cmsf .cmsf-note { flex-basis: 100%; font-size: var(--fs-sm); }
.lsv-head .cmsf { margin: 6px 0 0; }