/* ══════════════════════════════════════════════════════════════════════
   Repo Standards — governance layer for apps.runmai.app/repos
   Same Work Hub design language as repos.css (ax-card / ops-* / rm-*).
   Tokens are declared with fallbacks on every var() because this sheet
   styles BOTH the in-page view (inside .repos-page) and the detail-modal
   pane (inside .rm-backdrop, which is appended to <body>) — the v3.1
   lesson: a body-mounted overlay can't rely on page-scoped tokens.
   ══════════════════════════════════════════════════════════════════════ */

/* ── sidebar count badge ── */
.sd-navcnt.is-bad{ color:#dc2626 !important; font-weight:800; }

/* ── notes + plan banner ── */
.sd-note code{ font-family:ui-monospace,Consolas,monospace; font-size:11px;
  background:var(--border-s,#f4f4f4); padding:1px 5px; border-radius:5px; color:var(--ink2,#525252); }
.sd-planbar{ display:flex; gap:9px; align-items:flex-start; font-size:12.5px; line-height:1.5;
  color:#3730a3; background:#eef2ff; border:1px solid #e0e7ff; border-radius:12px;
  padding:11px 14px; margin:0 2px 16px; }
.sd-planbar b{ font-weight:800; }

/* ── two-column layout ── */
.sd-cols{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:18px; align-items:start; }
@media(max-width:1100px){ .sd-cols{ grid-template-columns:1fr; } }
.sd-panel{ background:var(--surf,#fff); border:1px solid var(--border,#e0e0e0); border-radius:16px;
  padding:14px 14px 16px; box-shadow:0 1px 3px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.04); }
.sd-panel .ops-sec-h{ display:flex; align-items:center; gap:9px; margin:2px 2px 12px; }
.sd-n{ font-size:10.5px; font-weight:800; letter-spacing:0; text-transform:none;
  background:var(--border-s,#f4f4f4); color:var(--ink3,#8d8d8d); padding:2px 8px; border-radius:8px; }
.sd-clear{ margin-left:auto; border:0; background:none; color:var(--c-blue,#649954); font:inherit;
  font-size:11.5px; font-weight:700; text-transform:none; letter-spacing:0; cursor:pointer; }

/* ── the standard: grouped check rows ── */
.sd-grp{ font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  color:var(--ink3,#8d8d8d); margin:14px 4px 6px; }
.sd-grp:first-of-type{ margin-top:2px; }
.sd-crow{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:none;
  border:1px solid transparent; border-radius:10px; padding:8px 9px; font:inherit; cursor:pointer;
  color:var(--ink,#161616); }
.sd-crow:hover{ background:var(--border-s,#f4f4f4); }
.sd-crow.is-open{ background:var(--border-s,#f4f4f4); border-color:var(--border,#e0e0e0); }
.sd-sev{ flex:0 0 auto; font-size:9.5px; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  padding:2px 7px; border-radius:6px; }
.sd-cname{ flex:1; min-width:0; font-size:12.5px; font-weight:600; line-height:1.3; }
.sd-scope{ display:inline-block; font-style:normal; font-size:9.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.3px; color:var(--ink3,#8d8d8d); background:var(--border-s,#f4f4f4);
  padding:1px 6px; border-radius:5px; margin-left:6px; vertical-align:1px; }
.sd-bar{ flex:0 0 62px; height:6px; border-radius:4px; background:var(--border-s,#f4f4f4); overflow:hidden; }
.sd-bar i{ display:block; height:100%; border-radius:4px; }
.sd-bar.is-empty{ opacity:.5; }
.sd-chip{ flex:0 0 auto; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:7px;
  background:var(--border-s,#f4f4f4); color:var(--ink2,#525252); white-space:nowrap; }
.sd-chip--sm{ font-size:10px; font-weight:700; padding:1px 7px; }
.sd-caret{ flex:0 0 auto; color:var(--ink4,#c6c6c6); font-size:11px; width:10px; text-align:center; }

.sd-cbody{ padding:2px 10px 14px 12px; margin:0 2px 6px; border-left:2px solid var(--border-s,#f4f4f4); }
.sd-why{ font-size:12.5px; color:var(--ink2,#525252); line-height:1.55; margin:6px 0 10px; }
.sd-blocked{ font-size:12px; color:#3730a3; background:#eef2ff; border-radius:9px; padding:9px 11px;
  line-height:1.5; margin-bottom:10px; }
.sd-ok{ font-size:12.5px; color:#166534; background:#f0fdf4; border-radius:9px; padding:10px 12px; }

.sd-faillist{ display:flex; flex-direction:column; border:1px solid var(--border-s,#f4f4f4);
  border-radius:11px; overflow:hidden; margin-bottom:10px; }
.sd-failrow{ display:flex; align-items:center; gap:9px; padding:8px 11px; text-decoration:none;
  color:inherit; border-top:1px solid var(--border-s,#f4f4f4); }
.sd-failrow:first-child{ border-top:0; }
.sd-failrow:hover{ background:#f8fafc; }
.sd-failrow b{ font-size:12px; font-weight:700; color:var(--ink,#161616); white-space:nowrap; }
.sd-slug{ font-size:10.5px; font-family:ui-monospace,Consolas,monospace; color:var(--ink3,#8d8d8d);
  font-style:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sd-detail{ margin-left:auto; font-size:10.5px; color:var(--ink3,#8d8d8d); text-align:right; }
.sd-go{ flex:0 0 auto; font-size:10.5px; font-weight:700; color:var(--c-blue,#649954); }
.sd-more{ border:0; border-top:1px solid var(--border-s,#f4f4f4); background:#fbfdfb; width:100%;
  font:inherit; font-size:11px; font-weight:700; color:var(--c-blue,#649954); padding:8px 0; cursor:pointer; }
.sd-more:hover{ background:var(--border-s,#f4f4f4); }

/* ── fix command blocks ── */
.sd-fix{ display:flex; align-items:center; gap:8px; background:#0f172a; border-radius:10px;
  padding:8px 10px; margin-top:8px; overflow:hidden; }
.sd-fix code{ flex:1; min-width:0; font-family:ui-monospace,Consolas,monospace; font-size:11px;
  color:#cbd5e1; line-height:1.5; overflow-x:auto; white-space:pre; scrollbar-width:thin; }
.sd-fixlbl{ flex:0 0 auto; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
  color:#64748b; }
.sd-fix.is-all{ background:#111827; border:1px solid #1f2937; }
.sd-copy{ flex:0 0 auto; border:0; background:#1e293b; color:#e2e8f0; font:inherit; font-size:10.5px;
  font-weight:700; padding:4px 10px; border-radius:7px; cursor:pointer; }
.sd-copy:hover{ background:#334155; }

/* ── repo rows ── */
.sd-rrow{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none;
  border:1px solid transparent; border-radius:11px; padding:8px 9px; font:inherit; cursor:pointer;
  color:var(--ink,#161616); }
.sd-rrow:hover{ background:var(--border-s,#f4f4f4); }
.sd-rrow.is-open{ background:var(--border-s,#f4f4f4); border-color:var(--border,#e0e0e0); }
.sd-grade{ flex:0 0 auto; width:26px; height:26px; border-radius:8px; color:#fff; display:grid;
  place-items:center; font-size:12.5px; font-weight:900; }
.sd-rmain{ flex:1; min-width:0; }
.sd-rname{ display:flex; align-items:baseline; gap:7px; font-size:12.5px; font-weight:700; }
.sd-rchips{ display:flex; gap:5px; flex-wrap:wrap; margin-top:4px; }
.sd-status{ flex:0 0 auto; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.3px;
  padding:2px 8px; border-radius:7px; }
.sd-score{ flex:0 0 34px; text-align:right; font-size:11.5px; font-weight:800; color:var(--ink3,#8d8d8d);
  font-variant-numeric:tabular-nums; }
.sd-rbody{ padding:4px 10px 14px 12px; margin:0 2px 6px; border-left:2px solid var(--border-s,#f4f4f4); }

/* ── findings (shared by row + modal pane) ── */
.sd-sec{ margin-bottom:14px; }
.sd-sec h4{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  color:var(--ink2,#525252); margin:10px 2px 8px; }
.sd-find{ border:1px solid var(--border-s,#f4f4f4); border-left:3px solid var(--_s,#dc2626);
  border-radius:10px; padding:9px 11px; margin-bottom:8px; background:var(--surf,#fff); }
.sd-findhd{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sd-findhd b{ font-size:12.5px; font-weight:700; }
.sd-findhd .sd-detail{ margin-left:0; font-size:11px; }
.sd-passline{ font-size:11px; color:var(--ink3,#8d8d8d); padding-top:2px; }

/* ── detail-modal pane ── */
.rm-tab .tn.is-bad{ background:#fee2e2; color:#b91c1c; }
.rm-tab .tn.is-good{ background:#dcfce7; color:#166534; }
.sd-pane .sd-panehd{ display:flex; align-items:center; gap:11px; }
.sd-pane .sd-panehd .sd-grade{ width:34px; height:34px; border-radius:10px; font-size:15px; }
.sd-pane .sd-panehd b{ display:block; font-size:13.5px; font-weight:800; }
/* > div > span only — a bare descendant selector here outranks .sd-grade
   (2 classes + type beats 1 class) and would flatten the grade badge. */
.sd-pane .sd-panehd > div > span{ display:block; font-size:11px; color:var(--ink3,#8d8d8d); margin-top:2px; }
.sd-pane .rm-empty code{ font-family:ui-monospace,Consolas,monospace; font-size:11px; }

/* ── version row: declared vs what's actually live ── */
.sd-vrow{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:0 0 14px; }
.sd-vpill{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  padding:4px 10px; border-radius:8px; text-decoration:none; border:1px solid var(--border-s,#f4f4f4);
  background:var(--border-s,#f4f4f4); color:var(--ink2,#525252); }
.sd-vpill i{ font-style:normal; font-size:10px; font-weight:600; opacity:.75; }
.sd-vpill code{ font-family:ui-monospace,Consolas,monospace; font-size:10.5px; }
.sd-vpill.is-dec{ background:#eef6ff; border-color:#dbeafe; color:#1d4ed8; }
.sd-vpill.is-live{ background:#f0fdf4; border-color:#bbf7d0; color:#166534; }
.sd-vpill.is-live:hover{ border-color:#16a34a; }
.sd-vpill.is-none{ background:transparent; border-style:dashed; color:var(--ink3,#8d8d8d); font-weight:600; }
.sd-vmeta{ font-size:10.5px; color:var(--ink3,#8d8d8d); }

/* ── tabs inside the Repo Standards view ── */
.sd-tabs{ display:flex; gap:2px; margin:0 2px 16px; border-bottom:1px solid var(--border-s,#f4f4f4); }
.sd-tab{ position:relative; border:0; background:none; cursor:pointer; font:inherit; font-size:13px;
  font-weight:700; color:var(--ink3,#8d8d8d); padding:9px 14px 11px; display:inline-flex; align-items:center; gap:7px; }
.sd-tab:hover{ color:var(--ink,#161616); }
.sd-tab.is-on{ color:var(--ink,#161616); }
.sd-tab.is-on::after{ content:''; position:absolute; left:8px; right:8px; bottom:-1px; height:2.5px;
  border-radius:2px; background:var(--c-blue,#649954); }
.sd-tab .tn{ font-size:10.5px; font-weight:800; background:#fee2e2; color:#b91c1c; padding:1px 7px;
  border-radius:8px; font-variant-numeric:tabular-nums; }
.sd-wide{ margin-bottom:0; }

/* ── the grammar strip ── */
.sd-grammar{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:14px 2px 4px; }
.sd-seg{ position:relative; font-family:ui-monospace,Consolas,monospace; font-size:13px; font-weight:700;
  background:var(--border-s,#f4f4f4); color:var(--ink2,#525252); border:1px dashed var(--border,#e0e0e0);
  padding:7px 13px; border-radius:9px; }
.sd-seg.is-req{ background:color-mix(in srgb,var(--c-blue,#649954) 10%,transparent);
  border-style:solid; border-color:color-mix(in srgb,var(--c-blue,#649954) 35%,transparent); color:var(--c-blue,#649954); }
.sd-seg sup{ font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; opacity:.7; margin-left:4px; }
.sd-dash{ font-family:ui-monospace,Consolas,monospace; color:var(--ink4,#c6c6c6); font-style:normal; font-weight:700; }

.sd-segcards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:12px; margin-top:6px; }
.sd-segcard{ border:1px solid var(--border-s,#f4f4f4); border-radius:12px; padding:11px 12px; background:var(--surf,#fff); }
.sd-segcard.is-req{ border-left:3px solid var(--c-blue,#649954); }
.sd-segcard-h{ display:flex; align-items:center; gap:8px; }
.sd-segcard-h b{ font-family:ui-monospace,Consolas,monospace; font-size:12.5px; }
.sd-segcard p{ font-size:11.5px; color:var(--ink2,#525252); line-height:1.5; margin:6px 0 8px; }
.sd-vals{ display:flex; flex-wrap:wrap; gap:5px; }
.sd-val{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  color:var(--ink2,#525252); background:var(--border-s,#f4f4f4); padding:2px 8px; border-radius:7px; cursor:help; }
.sd-val code{ font-family:ui-monospace,Consolas,monospace; font-size:10.5px; font-weight:800; color:var(--ink,#161616); }
.sd-val.is-open{ font-style:italic; cursor:default; }

.sd-ex{ display:flex; flex-direction:column; border:1px solid var(--border-s,#f4f4f4); border-radius:12px; overflow:hidden; }
.sd-exrow{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-top:1px solid var(--border-s,#f4f4f4); }
.sd-exrow:first-child{ border-top:0; }
.sd-exrow code{ font-family:ui-monospace,Consolas,monospace; font-size:11.5px; font-weight:700;
  color:var(--c-blue,#649954); flex:0 0 auto; }
.sd-exrow span{ flex:1; min-width:0; font-size:11.5px; color:var(--ink2,#525252); }
.sd-exrow .sd-copy{ background:var(--border-s,#f4f4f4); color:var(--ink2,#525252); }
.sd-exrow .sd-copy:hover{ background:var(--border,#e0e0e0); }

.sd-failrow.is-static{ cursor:default; }
.sd-failrow.is-static:hover{ background:transparent; }
.sd-arrow{ color:var(--ink4,#c6c6c6); font-weight:700; }
.sd-sugg{ font-family:ui-monospace,Consolas,monospace; font-size:11px; font-weight:700; color:#166534;
  background:#f0fdf4; padding:2px 7px; border-radius:6px; }
.sd-failrow.is-static .sd-chip{ margin-left:auto; }
.sd-exempt{ font-size:11px; color:var(--ink3,#8d8d8d); margin-top:10px; line-height:1.9; }
.sd-exempt code{ font-family:ui-monospace,Consolas,monospace; font-size:10.5px; background:var(--border-s,#f4f4f4);
  padding:2px 6px; border-radius:5px; cursor:help; }

.sd-fams{ display:flex; flex-direction:column; gap:9px; }
.sd-fam{ border:1px solid var(--border-s,#f4f4f4); border-radius:11px; padding:9px 11px; }
.sd-fam-h{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; margin-bottom:7px; }
.sd-fammem{ display:inline-flex; align-items:center; gap:6px; margin:0 6px 4px 0; font-size:11px; }
.sd-fammem code{ font-family:ui-monospace,Consolas,monospace; font-size:10.5px; color:var(--ink2,#525252);
  background:var(--border-s,#f4f4f4); padding:2px 7px; border-radius:6px; }
.sd-fammem i{ font-style:normal; font-size:10px; font-weight:700; color:#3f7a4b; }

/* ── guides ── */
.sd-step{ display:flex; gap:11px; align-items:flex-start; margin:0 0 14px; }
.sd-stepn{ flex:0 0 auto; width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--c-blue,#649954) 14%,transparent); color:var(--c-blue,#649954);
  font-size:11px; font-weight:900; }
.sd-step > div{ flex:1; min-width:0; }
.sd-step b{ font-size:12.5px; font-weight:700; }
.sd-step p{ font-size:11.5px; color:var(--ink2,#525252); line-height:1.5; margin:3px 0 0; }
.sd-step .sd-fix{ margin-top:7px; }
.sd-links{ display:flex; flex-direction:column; gap:8px; }
.sd-links a{ display:block; border:1px solid var(--border-s,#f4f4f4); border-radius:11px; padding:10px 12px;
  text-decoration:none; color:inherit; transition:border-color .14s, transform .14s; }
.sd-links a:hover{ border-color:var(--c-blue,#649954); transform:translateY(-1px); }
.sd-links b{ display:block; font-family:ui-monospace,Consolas,monospace; font-size:12px; color:var(--c-blue,#649954); }
.sd-links span{ display:block; font-size:11.5px; color:var(--ink2,#525252); line-height:1.5; margin-top:3px; }

/* ── card flag: the standard, visible where you browse ── */
.sd-cardflag{ flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; font-size:10px;
  font-weight:800; padding:2px 7px; border-radius:7px; letter-spacing:.2px; cursor:help; }
.sd-cardflag b{ font-weight:900; }

/* ══ a fix you can actually run ═══════════════════════════════════════════
   The policy's `fix` strings carry holes — `--description "<one line>"`,
   `--add-topic <topic>` — so standards.js now fills them from the repo's own
   title, tagline and types. Three states, and they must look different:
     .sd-fix               a command. Paste it, it runs.
     .sd-fix[data-lbl]     the same, with a note saying where the value
                           came from — because a command somebody else wrote
                           for you deserves a source.
     .sd-todo              NOT a command. A job for a human (add a README,
                           decide on a rename). Never dressed as a paste.
   ══════════════════════════════════════════════════════════════════════ */
.sd-fix[data-lbl]{ flex-wrap:wrap; align-items:flex-start; }
.sd-fix[data-lbl] .sd-fixlbl{ flex:1 1 100%; margin-bottom:2px; color:#7c8ba1; text-transform:none;
  font-size:10px; letter-spacing:.2px; font-style:italic; }
.sd-fix[data-lbl] code{ flex:1 1 auto; }

.sd-todo{ margin-top:8px; font-size:11.5px; line-height:1.55; color:#4a5952;
  background:#f8fafc; border:1px dashed #dde4e0; border-radius:9px; padding:8px 10px; }
.sd-todo b{ color:#26332c; font-weight:800; }

/* one paste for the whole repo — the answer to "how do I fix this thing" */
.sd-fixall{ margin-top:12px; background:#111827; border:1px solid #1f2937; border-radius:10px;
  padding:10px 12px; display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; }
.sd-fixall .sd-fixlbl{ flex:1 1 100%; color:#94a3b8; }
.sd-fixall code{ flex:1 1 auto; min-width:0; font-family:ui-monospace,Consolas,monospace; font-size:11px;
  color:#cbd5e1; line-height:1.6; white-space:pre-wrap; word-break:break-all; }

/* where each kind of change is actually made — asked here, answered here */
.sd-editnote{ margin-top:12px; border:1px solid var(--border-s,#f4f4f4); border-radius:10px;
  padding:11px 13px; background:var(--surf-2,#f8fafc); }
.sd-editnote b{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:#3f4b44; }
.sd-editnote ul{ margin:7px 0 0; padding-left:16px; }
.sd-editnote li{ font-size:11.5px; line-height:1.6; color:#4a5952; margin-bottom:4px; }
.sd-editnote li b{ font-size:11.5px; text-transform:none; letter-spacing:0; color:#26332c; }
.sd-editnote code{ background:#eef2f0; padding:1px 5px; border-radius:4px; font-size:10.5px;
  font-family:ui-monospace,Consolas,monospace; color:#33413a; }

/* ══════════════════════════════════════════════════════════════════════════
   THE SEAL — a compliance attestation, not a letter in a coloured square
   ══════════════════════════════════════════════════════════════════════════
   "the A compliant, we need to get some brand around that, make it feel very
   security, like cyber security, compliant because you put that A on everything.
   It should just be some type of logo and maybe our VisionOne tech team or
   something compliant."
   So it is dressed as one: a dark instrument panel, a hairline grid, an issuing
   authority in letter-spaced small caps, the standard's real version string set
   in mono like a certificate reference, a shield carrying the grade, and the
   score as a meter rather than a number floating on its own.
   ⚠️ The tone comes from the STATUS, but the headline always states the open
   count too — the whole point of the rework is that "Compliant" and "nothing to
   do" are different claims and the old badge conflated them. */
.sd-seal{ position:relative; display:flex; align-items:center; gap:16px; overflow:hidden;
  padding:16px 18px; margin-bottom:16px; border-radius:14px; color:#e8f2ec;
  background:linear-gradient(135deg,#101e18 0%,#16281f 46%,#0e1a14 100%);
  border:1px solid #24382d; box-shadow:0 10px 30px rgba(6,16,11,.22), inset 0 1px 0 rgba(255,255,255,.05); }
/* the hairline grid: instrumentation, not decoration — it is what makes the panel
   read as a readout rather than a coloured banner */
.sd-seal-grid{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:radial-gradient(120% 130% at 100% 0%, #000 12%, transparent 72%);
  -webkit-mask-image:radial-gradient(120% 130% at 100% 0%, #000 12%, transparent 72%); }

/* the shield: the grade lives INSIDE the mark, which is what makes it a seal */
.sd-seal-mark{ position:relative; flex:0 0 auto; width:58px; height:58px; display:grid; place-items:center;
  color:#4ade80; filter:drop-shadow(0 3px 10px rgba(0,0,0,.4)); }
.sd-seal-mark svg{ position:absolute; inset:0; width:100%; height:100%; }
.sd-seal-mark b{ position:relative; font-size:23px; font-weight:800; letter-spacing:-.5px; color:#fff;
  line-height:1; margin-top:-2px; }
.sd-seal.is-at-risk .sd-seal-mark{ color:#fbbf24; }
.sd-seal.is-violation .sd-seal-mark{ color:#f87171; }
.sd-seal.is-unknown .sd-seal-mark{ color:#94a3b8; }
/* an advisory-only repo: the grade stands, so the shield stays green and the
   AMBER goes on the state line where the open item actually is */
.sd-seal.is-compliant.has-open .sd-seal-mark{ color:#86efac; }

.sd-seal-txt{ position:relative; min-width:0; flex:1 1 auto; }
.sd-seal-auth{ display:block; font-size:9px; font-weight:800; letter-spacing:1.3px;
  text-transform:uppercase; color:#7fb894; }
.sd-seal-head{ display:block; font-size:15.5px; font-weight:800; letter-spacing:-.2px; color:#fff;
  margin-top:4px; }
.sd-seal-std{ display:block; font-size:11px; color:#a8c4b5; margin-top:3px; line-height:1.5; }
.sd-seal-std code{ font-family:ui-monospace,Consolas,monospace; font-size:10.5px; color:#cfe6d8;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius:4px; padding:1px 5px; }
.sd-seal-meter{ display:block; height:4px; margin-top:9px; border-radius:2px; overflow:hidden;
  background:rgba(255,255,255,.12); max-width:320px; }
.sd-seal-meter i{ display:block; height:100%; border-radius:2px;
  background:linear-gradient(90deg,#22c55e,#4ade80); }
.sd-seal.is-at-risk .sd-seal-meter i{ background:linear-gradient(90deg,#d97706,#fbbf24); }
.sd-seal.is-violation .sd-seal-meter i{ background:linear-gradient(90deg,#dc2626,#f87171); }

/* WHEN it was measured, and the way to measure it again — the thing the old
   badge had no answer for at all */
.sd-seal-state{ position:relative; flex:0 0 auto; display:flex; flex-direction:column;
  align-items:flex-end; gap:8px; }
.sd-seal-when{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700;
  letter-spacing:.2px; color:#a8c4b5; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); border-radius:6px; padding:4px 9px; white-space:nowrap; }
.sd-seal-when.is-live{ color:#86efac; border-color:rgba(134,239,172,.3); }
.sd-seal-when.is-snapshot{ color:#fcd34d; border-color:rgba(252,211,77,.28); }
.sd-seal-when.is-error{ color:#fca5a5; border-color:rgba(252,165,165,.28); }
.sd-pulse{ width:7px; height:7px; border-radius:50%; background:#4ade80; flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(74,222,128,.18); animation:sdPulse 2.4s ease-in-out infinite; }
@keyframes sdPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
.sd-spin{ width:9px; height:9px; flex:0 0 auto; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.25); border-top-color:#e8f2ec;
  animation:sdSpin .7s linear infinite; }
@keyframes sdSpin{ to{ transform:rotate(360deg) } }
.sd-recheck{ font:800 11.5px var(--f,'Inter',system-ui,sans-serif); cursor:pointer; white-space:nowrap;
  color:#0f1d16; background:#a7f3c4; border:1px solid #7fe0a8; border-radius:7px; padding:6px 12px;
  transition:filter .14s, opacity .14s; }
.sd-recheck:hover{ filter:brightness(1.06); }
.sd-recheck[disabled]{ opacity:.5; cursor:default; }

@media (max-width:700px){
  .sd-seal{ flex-wrap:wrap; gap:12px; }
  .sd-seal-state{ align-items:flex-start; width:100%; flex-direction:row; }
}

/* ══ A FINDING, OPENED ══════════════════════════════════════════════════════
   "The one finding, I'm just kind of confused. There's nothing even to click on
   to explain it or change any of this."
   The head is a button now, and under it: why the rule exists (the standard's own
   words, which the scan has always emitted and nothing rendered), what was
   measured here, what closes it, and where the rule itself is edited. */
.sd-findhd{ width:100%; display:flex; align-items:center; gap:8px; flex-wrap:wrap; text-align:left;
  background:none; border:0; padding:0; font:inherit; cursor:pointer; }
.sd-findhd:hover b{ color:var(--c-blue,#2f6fb0); }
.sd-findcar{ margin-left:auto; font-size:10px; color:var(--ink3,#8d8d8d); flex:0 0 auto; }
.sd-find.is-open{ background:#fbfdfb; }
.sd-sechint{ font-style:normal; font-size:10.5px; font-weight:600; color:var(--ink3,#8d8d8d);
  margin-left:8px; text-transform:none; letter-spacing:0; }
.sd-findbody{ margin-top:11px; padding-top:11px; border-top:1px dashed var(--border,#e6ece8); }
.sd-fq{ margin-bottom:11px; }
.sd-fq > span{ display:block; font-size:9px; font-weight:800; text-transform:uppercase;
  letter-spacing:.7px; color:var(--ink3,#8d8d8d); margin-bottom:4px; }
.sd-fq p{ font-size:11.5px; line-height:1.6; color:#3f4b44; }
.sd-fq p i{ color:var(--ink3,#8d8d8d); font-style:normal; }
.sd-fq p code{ font-family:ui-monospace,Consolas,monospace; font-size:10.5px; background:#f1f5f3;
  border-radius:4px; padding:1px 5px; }
.sd-byhand{ font-size:11.5px; line-height:1.6; color:#3f4b44; background:#f7faf8;
  border:1px solid var(--border-s,#f4f4f4); border-radius:7px; padding:9px 11px; }
/* the actions: squared, in a row, and every one of them does something from HERE */
.sd-acts{ display:flex; flex-wrap:wrap; gap:7px; padding-top:3px; }
.sd-act{ display:inline-flex; align-items:center; font:800 11.5px var(--f,'Inter',system-ui,sans-serif);
  cursor:pointer; text-decoration:none; color:var(--ink2,#4a5952); background:#fff;
  border:1px solid var(--border,#e6ece8); border-radius:7px; padding:6px 11px;
  transition:border-color .14s, color .14s; }
.sd-act:hover{ border-color:var(--c-blue,#2f6fb0); color:var(--c-blue,#2f6fb0); }
.sd-act.is-go{ background:var(--c-blue,#2f6fb0); border-color:var(--c-blue,#2f6fb0); color:#fff; }
.sd-act.is-go:hover{ filter:brightness(1.08); color:#fff; }

/* the tab badge: ✓ only when NOTHING is open; an advisory-only count is amber,
   because it is worth doing and it is not a failure */
.rm-tab .tn.is-note{ background:#fdf3e3; color:#8a4d0a; }