/* design_studio — deliberately small and self-contained.
 *
 * ⚠️ Nothing here styles `.rwe-fsp`. frame_spec_preview declares its own custom properties
 * on that class rather than on :root precisely so the two do not bleed into each other.
 * Adding a `.rwe-fsp *` rule here would break that contract from our side.
 *
 * ⚠️ No external font, no CDN, no remote asset — this page is served from a container with
 * no egress guarantees, and a blocked webfont is a page that renders wrong for the one
 * person who has to trust the preview.
 */
:root {
  --ds-bg: #f6f6f7;
  --ds-panel: #ffffff;
  --ds-ink: #16181d;
  --ds-sub: #6b7079;
  --ds-line: #e2e4e8;
  --ds-accent: #16181d;
  --ds-ok: #1a7f45;
  --ds-warn: #8a6100;
  --ds-fail: #b3261e;
  --ds-fail-bg: #fdeceb;
  --ds-warn-bg: #fff8e6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ds-bg);
  color: var(--ds-ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }

/* ── login ─────────────────────────────────────────────────────────────────── */
.ds-centered { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.ds-card {
  background: var(--ds-panel); border: 1px solid var(--ds-line); border-radius: 10px;
  padding: 28px 32px; width: 340px;
}
.ds-card h1 { margin: 0 0 4px; font-size: 18px; }
.ds-card label { display: block; margin: 14px 0 4px; font-size: 12px; color: var(--ds-sub); }
.ds-card input { width: 100%; }
.ds-card button { width: 100%; margin-top: 18px; }
.ds-foot { margin: 18px 0 0; font-size: 12px; color: var(--ds-sub); }
.ds-error { color: var(--ds-fail); font-size: 13px; margin: 8px 0 0; }

/* ── chrome ────────────────────────────────────────────────────────────────── */
.ds-top {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 20px; background: var(--ds-panel); border-bottom: 1px solid var(--ds-line);
}
.ds-sub { color: var(--ds-sub); font-size: 12px; }
.ds-top .ds-sub { margin-left: 10px; }
.ds-who { font-size: 12px; color: var(--ds-sub); }
.ds-wrap { max-width: 1180px; margin: 20px auto; padding: 0 20px; }

.ds-panel {
  background: var(--ds-panel); border: 1px solid var(--ds-line); border-radius: 10px;
  padding: 16px 18px; margin-bottom: 16px;
}

/* ── form ──────────────────────────────────────────────────────────────────── */
.ds-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.ds-row label { display: block; font-size: 12px; color: var(--ds-sub); }
.ds-grow { flex: 1 1 240px; }
.ds-opt { opacity: .7; }
input {
  display: block; width: 100%; margin-top: 4px; padding: 7px 9px; font-size: 13px;
  border: 1px solid var(--ds-line); border-radius: 6px; background: #fff; color: var(--ds-ink);
}
input:focus { outline: 2px solid var(--ds-accent); outline-offset: 1px; }
button {
  padding: 8px 14px; font-size: 13px; font-weight: 600; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--ds-accent); background: var(--ds-accent); color: #fff;
}
button:disabled { opacity: .4; cursor: not-allowed; }
.ds-ghost { background: #fff; color: var(--ds-ink); border-color: var(--ds-line); font-weight: 500; }
.ds-actions { align-items: center; }
.ds-status { font-size: 12px; color: var(--ds-sub); }
.ds-status.ds-ok { color: var(--ds-ok); }
.ds-status.ds-error { color: var(--ds-fail); }

.ds-headings { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ds-heading {
  background: #fff; color: var(--ds-ink); border: 1px solid var(--ds-line);
  font-weight: 500; font-size: 12px; padding: 5px 9px;
}
.ds-heading[data-level="1"] { font-weight: 700; }

/* ── banners: WHICH palette, and whether the assembly is real ──────────────── */
/* ⚠️ A banner, not a footnote. A frame built in HOUSE colours for a client who has their
   own derived palette looks identical to a correct one, so the only defence is that the
   page says which, at full width, above the work. */
.ds-banner {
  border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px;
  border: 1px solid var(--ds-line); background: var(--ds-panel);
}
.ds-banner-ok { background: #e7f4ec; border-color: #bcdcc8; color: var(--ds-ok); }
.ds-banner-warn { background: var(--ds-warn-bg); border-color: #f0dca6; color: var(--ds-warn); }
.ds-banner .ds-sub { display: block; margin-top: 4px; }

/* ── contrast panel ────────────────────────────────────────────────────────── */
.ds-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.ds-swatch {
  display: inline-block; width: 13px; height: 13px; border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .25); vertical-align: -2px; margin-right: 5px;
}
.ds-bg-chip { display: flex; align-items: center; gap: 6px; }
.ds-scroll { max-height: 340px; overflow: auto; margin-top: 8px; }
.ds-notes { margin-top: 8px; }
.ds-note { font-size: 12px; color: var(--ds-warn); margin: 2px 0; }
.ds-sev-pass td:first-child { color: var(--ds-ok); }
/* text on ART — measured against the frame background, which is not what the reader sees.
   Banded so it cannot be scrolled past as if it were just another green row. */
.ds-sev-art { background: var(--ds-warn-bg); }
.ds-sev-art td:first-child { color: var(--ds-warn); font-weight: 700; }
.ds-check { display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--ds-sub); white-space: nowrap; padding-bottom: 8px; }
.ds-check input { width: auto; margin: 0; display: inline-block; }
/* ⚠️ Beside the badge, not in a details pane. A caveat nobody sees is a caveat that does
   not exist, and this line is what stops a PASS being cited as proof. */
.ds-reach { margin-top: 10px; padding: 8px 11px; border-radius: 6px; font-size: 12px;
  background: var(--ds-warn-bg); border: 1px solid #f0dca6; color: var(--ds-warn); }
.ds-reach-ok { background: #e7f4ec; border-color: #bcdcc8; color: var(--ds-ok); }
#emitter-note ul { margin: 4px 0 0; padding-left: 18px; }
#emitter-note li { font-size: 12px; }
.ds-emitter { font-size: 12px; color: var(--ds-sub); margin-right: 8px; }
.ds-emitter select {
  margin-left: 4px; padding: 6px 8px; font-size: 13px; border-radius: 6px;
  border: 1px solid var(--ds-line); background: #fff; color: var(--ds-ink);
}
.ds-preview-head { justify-content: space-between; align-items: center; }
#svg-wrap { margin: 8px 0 14px; }
#svg-render { max-width: 100%; height: auto; border: 1px solid var(--ds-line); border-radius: 6px; }

/* ── verdict ───────────────────────────────────────────────────────────────── */
.ds-verdict-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.ds-badge { font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 999px; }
.ds-badge-ok { background: #e7f4ec; color: var(--ds-ok); }
.ds-badge-fail { background: var(--ds-fail-bg); color: var(--ds-fail); }
/* ⚠️ NOT-MEASURED IS ITS OWN COLOUR. studio.js has asked for this class since the paste
   gates shipped and the stylesheet never defined it, so an UNMEASURED verdict rendered in
   the same neutral pill as a pass — the one rounding this whole page exists to prevent. */
.ds-badge-warn { background: var(--ds-warn-bg); color: var(--ds-warn); }
/* ── cache coverage: how much of the email renders without a click ─────────────── */
#cache-cover { margin-top: 10px; }
#cache-cover .ds-badge { font-size: 12px; }
.ds-copy-wrap { text-align: right; }
.ds-blocked {
  margin-top: 12px; padding: 10px 12px; border-radius: 6px;
  background: var(--ds-fail-bg); color: var(--ds-fail); font-size: 13px;
}
.ds-details { margin-top: 12px; }
.ds-details summary { cursor: pointer; font-size: 12px; color: var(--ds-sub); }
.ds-advisory { font-size: 12px; color: var(--ds-sub); max-width: 78ch; }

.ds-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.ds-table th, .ds-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--ds-line); }
.ds-table th { color: var(--ds-sub); font-weight: 600; }
.ds-num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-block { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── the coherence review ─────────────────────────────────────────────────── */
/* ⚠️ The tweak column WRAPS. `.ds-block` truncates with an ellipsis, which is right for a
   deleted template string and wrong here: the tweak IS the deliverable of this panel and
   half a sentence is worse than none. */
.ds-wrapcell { max-width: 46ch; white-space: normal; }
.ds-table tr.ds-group td {
  background: var(--ds-line); font-size: 12px; padding-top: 8px; letter-spacing: .04em;
}
/* ⚠️ A check that examined nothing is painted like a failure, because it is one — a zero
   here is NOT RUN, never a pass. */
.ds-table tr.ds-notrun td { background: var(--ds-fail-bg); color: var(--ds-fail); }
.ds-sev-fail td:first-child { color: var(--ds-fail); font-weight: 700; }
.ds-sev-warn td:first-child { color: var(--ds-warn); font-weight: 600; }
.ds-sev-ungraded td:first-child { color: var(--ds-sub); }

/* ── preview ───────────────────────────────────────────────────────────────── */
/* The preview rail is real 1200px frames at 132px gaps. It scrolls inside its OWN
   container; the page body must never scroll horizontally. */
.ds-preview-panel { overflow-x: auto; }
#preview { min-height: 40px; }

.ds-degraded {
  background: var(--ds-warn-bg); border: 1px solid #f0dca6; color: var(--ds-warn);
  padding: 10px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 12px;
}
.ds-degraded div { margin-top: 4px; color: var(--ds-sub); }
.ds-frame { border-top: 1px solid var(--ds-line); padding-top: 10px; margin-top: 10px; }
.ds-frame h3 { margin: 0 0 2px; font-size: 14px; }
.ds-frame .ds-meta { margin: 0 0 6px; font-size: 12px; color: var(--ds-sub); }
.ds-frame ol { margin: 0; padding-left: 20px; font-size: 12px; }
.ds-frame li { margin-bottom: 3px; }
.ds-node { color: var(--ds-sub); font-family: ui-monospace, Menlo, monospace; }
.ds-copy { color: var(--ds-ink); }

/* heading picker: the table count that stops someone picking the section header */
.ds-count {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 999px;
  background: var(--ds-line); color: var(--ds-sub); font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* ⚠️ The T8 review styles were DELETED with the T8 refusal itself (2026-09-02). They
   dressed the "N master text layers would keep the master's own words" list and its
   "copy anyway" button. We no longer clone a master, so nothing can render them; leaving
   dead rules here is how a deleted feature quietly comes back. */