/* Site-owned chrome + utility-page styling. Served at /static/shell.css under the
   strict CSP (style-src 'self'; script-src 'self'); injected into <head> by
   serving/shell.compose, and linked directly by the standalone utility pages
   (manage_access, recap, index, login, error).

   Palette + component looks are copied from the report's own CSS block
   (src/reporting/render/render.py) so the utility pages visually belong to the
   same product as the polished navy/indigo report. ALL styling lives here — no
   inline <style> or style="" anywhere (CSP-safe). */

/* ---------- Signal fonts (self-hosted; latin subset; font-src 'self') ---------- */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/space-grotesk-400.woff2) format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/space-grotesk-500.woff2) format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/space-grotesk-600.woff2) format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/space-grotesk-700.woff2) format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/inter-400.woff2) format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/inter-500.woff2) format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/inter-600.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/plex-mono-400.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/plex-mono-500.woff2) format('woff2'); }

/* ---------- Design tokens (Holzman "Signal" — mirrors the report's css.py) ---------- */
:root {
  --navy: #14171C;       /* dark heading band / heading text (ink) */
  --bg: #F7F8FB;         /* page background */
  --indigo: #EEF3FE;     /* soft blue accent (table header tint) */
  --ink: #4A515E;        /* body text */
  --muted: #8A92A0;      /* muted / secondary text */
  --border: #E7EAF1;     /* hairline borders */
  --accent: #1D4ED8;     /* Signal blue — links, active, h2 rule */
  --accent-soft: #EEF3FE;
  --spark: #BEF264;      /* lime signature spark (one per view) */
  --chrome-bg: #14171C;  /* floating dark report bar background */
  --chrome-border: #0b1015;
  --chrome-ink: #F7F8FB;
  --chrome-link: #9FC0FB;

  --card: #ffffff;
  --indigo-border: #DCE6FB;

  /* type / space scale */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, "SFMono-Regular", Menlo, monospace;
  --radius: 14px;
  --radius-sm: 9px;
  --gap: 16px;
  --gap-sm: 8px;
  --shadow: 0 1px 2px rgba(20, 23, 28, 0.05);
}

/* ---------- Site chrome (the floating dark report bar) ---------- */
/* Behavior/appearance preserved exactly — only literal colors swapped for tokens. */

.site-chrome {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0.5rem 1rem;
  background: var(--chrome-bg);
  color: var(--chrome-ink);
  font-family: var(--font);
  font-size: 14px;
  border-bottom: 1px solid var(--chrome-border);
}

.site-chrome__home {
  color: var(--chrome-link);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.site-chrome__home:hover { text-decoration: underline; }

.site-chrome__id { display: flex; align-items: center; gap: 0.4rem; }
.site-chrome__id label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  opacity: 0.7;
}
.site-chrome__id select { font: inherit; padding: 0.15rem 0.3rem; }

.site-chrome__label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  opacity: 0.7;
  margin-right: 0.4rem;
}

.site-chrome__report-id {
  font-family: var(--font-display);
  font-weight: 600;
}

.site-chrome__versions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.site-chrome__versions select {
  font: inherit;
  padding: 0.15rem 0.3rem;
}

.site-chrome__nav {
  margin-left: auto;
  display: flex;
  gap: 1rem;
}

.site-chrome__nav a {
  color: var(--chrome-link);
  text-decoration: none;
}

.site-chrome__nav a:hover {
  text-decoration: underline;
}

/* ---------- Page shell (standalone utility pages) ---------- */

.page-container {
  box-sizing: border-box;
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
  background: var(--bg);
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.5;
}

/* Ensure the page bg fills the viewport behind the centered container. */
body {
  margin: 0;
  background: var(--bg);
  font-family: var(--font);
  color: var(--ink);
}

/* A proper static page header (NOT the sticky dark bar): navy heading + muted subtext. */
.page-header {
  background: var(--navy);
  color: #ffffff;
  padding: 24px 28px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  border-bottom: 3px solid var(--spark);
}

.page-header h1 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.page-header p {
  margin: 0;
  font-size: 13px;
  opacity: 0.85;
}

/* Generic card surface for sections on utility pages. */
.page-container section {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: var(--gap);
  box-shadow: var(--shadow);
}

.page-container h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--navy);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 6px;
}

/* ---------- Manage-access page ---------- */

.access-msg {
  background: var(--indigo);
  border: 1px solid var(--indigo-border);
  border-radius: var(--radius-sm);
  color: var(--navy);
  padding: 12px 16px;
}

.access-msg p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

/* Inline forms (add-a-user, set-tier): tidy row of styled inputs + buttons. */
.access-add-form,
.access-tier-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin: 0;
}

.access-add-form label {
  font-size: 13px;
  color: var(--muted);
}

.access-add-form input[type="email"],
.access-tier-form select {
  font: inherit;
  font-size: 14px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--ink);
}

.access-add-form input[type="email"]:focus,
.access-tier-form select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Buttons: Signal blue primary across the access forms. */
.access-add-form button,
.access-tier-form button,
.access-users form button {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #ffffff;
  cursor: pointer;
}

.access-add-form button:hover,
.access-tier-form button:hover,
.access-users form button:hover {
  background: #1E40AF;
  border-color: #1E40AF;
}

/* Users table: clean bordered table, navy header row, zebra rows. */
.access-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 13px;
}

.access-table thead {
  background: var(--navy);
  color: #ffffff;
}

.access-table thead th {
  padding: 9px 10px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.access-table tbody tr {
  border-bottom: 1px solid var(--border);
}

.access-table tbody tr:nth-child(odd) {
  background: #FAFBFD;
}

.access-table tbody tr:hover {
  background: var(--indigo);
}

.access-table td {
  padding: 8px 10px;
  vertical-align: middle;
}

/* The in-cell tier form should sit tight inside its column. */
.access-table .access-tier-form {
  gap: 6px;
}

/* "you" marker on the admin's own row. */
.access-self {
  display: inline-block;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}

/* ---------- Recap page ---------- */

.recap {
  display: block;
}

.recap-note {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 18px;
}

.recap-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

/* Card-like list items. */
.recap-item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  padding: 12px 14px;
  background: var(--bg);
  border-left: 3px solid var(--navy);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--gap-sm);
}

.recap-title {
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
}

/* Dollar-impact emphasis. */
.recap-dollar {
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* Muted per-item summary line. */
.recap-summary {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.recap-empty {
  color: var(--muted);
  font-size: 13px;
  margin: 6px 0 0;
}

/* ---------- Recap redesign: stakes line, grouped flags, inline resolution (LEGACY UI 1a–1e) ---------- */
.recap-sub { color: var(--muted); font-size: 13px; font-family: var(--font-mono); }

.recap-stakes {
  background: var(--accent-soft);
  border: 1px solid var(--indigo-border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--ink);
}
.recap-stakes strong { color: var(--navy); font-variant-numeric: tabular-nums; }

.flag-group { margin: 0 0 22px; }
.flag-group__title {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--navy);
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}
.flag-group__count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 1px 9px;
}
.flag-group__explain { color: var(--ink); font-size: 13px; margin: 0 0 12px; max-width: 70ch; }
.flag-group--info { opacity: 0.9; }

.flag-list { list-style: none; padding: 0; margin: 0; }

.flag-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: var(--gap-sm);
  box-shadow: var(--shadow);
}
.flag-card--info { background: var(--bg); box-shadow: none; }
.flag-card.is-resolved { opacity: 0.6; border-color: var(--indigo-border); }

.flag-card__head { display: flex; align-items: center; gap: var(--gap-sm); flex-wrap: wrap; }
.flag-card__sku {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.flag-card__month { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

.sev { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
       letter-spacing: 0.06em; padding: 1px 7px; border-radius: 999px; font-weight: 600; }
.sev--high { background: #FCE8EC; color: #C4314B; }
.sev--medium, .sev--med { background: #FEF3E2; color: #B5731B; }
.sev--low, .sev--info { background: var(--accent-soft); color: var(--accent); }

.flag-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.resolve-action { display: flex; align-items: center; gap: 6px; }
.resolve-input {
  font: inherit;
  font-size: 13px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 9rem;
}
.resolve-input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.resolve-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.resolve-btn:hover { filter: brightness(1.07); }
.resolve-btn:disabled { opacity: 0.5; cursor: default; }
.resolve-action--secondary .resolve-btn {
  background: #fff; color: var(--ink); border-color: var(--border); font-weight: 500;
}
.resolve-action--secondary .resolve-btn:hover { background: var(--bg); filter: none; }

.flag-card__result { font-size: 13px; margin-top: 8px; }
.flag-card__result.is-ok { color: #0E7C4A; }
.flag-card__result.is-err { color: #C4314B; }

/* ---------- Open-feedback cards (LEGACY UI #2) ---------- */
.fb-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: var(--gap-sm);
  box-shadow: var(--shadow);
}
.fb-card.is-resolved { opacity: 0.55; }
.fb-card__head { display: flex; align-items: center; gap: var(--gap-sm); flex-wrap: wrap; }
.fb-state { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
            letter-spacing: 0.06em; padding: 2px 9px; border-radius: 999px; font-weight: 600; }
.fb-state--input { background: #FEF3E2; color: #B5731B; }     /* needs your decision */
.fb-state--ok    { background: #E6F6EE; color: #0E7C4A; }     /* approved/applying */
.fb-state--auto  { background: var(--accent-soft); color: var(--accent); }  /* system reviewing */
.fb-assignee { font-size: 12px; color: var(--ink); font-weight: 600; }
.fb-card__body { color: var(--ink); font-size: 14px; margin: 8px 0; }
.fb-card__suggestion { color: var(--ink); font-size: 13.5px; margin: 8px 0; padding: 8px 10px;
  background: #EFF4FF; border-left: 3px solid #1D4ED8; border-radius: 4px; }
.fb-sugg-label { font-weight: 600; color: #1D4ED8; }
.fb-card__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.fb-assign-group { display: inline-flex; align-items: center; gap: 6px; }
.fb-assign-label { font-size: 12px; color: var(--muted); }
.fb-assign {
  font: inherit; font-size: 12px; padding: 4px 10px;
  border: 1px solid var(--border); background: #fff; color: var(--ink);
  border-radius: 999px; cursor: pointer;
}
.fb-assign:hover { background: var(--bg); border-color: var(--accent); color: var(--accent); }
.fb-assign--clear { color: var(--muted); }
.fb-card__result { font-size: 13px; margin-top: 8px; }
.fb-card__result.is-ok { color: #0E7C4A; }
.fb-card__result.is-err { color: #C4314B; }

/* ---------- Category mapping inline edit (LEGACY UI #3) ---------- */
.cat-actions { white-space: nowrap; }
.cat-actions button { margin-right: 4px; }
.cat-input { width: 12rem; }
.cat-result { font-size: 12px; margin-left: 6px; }
.cat-result.is-ok { color: #0E7C4A; }
.cat-result.is-err { color: #C4314B; }

/* ---------- Index (report list) ---------- */

.index-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.index-list li {
  border-bottom: 1px solid var(--border);
}

.index-list li:last-child {
  border-bottom: none;
}

.index-list a {
  display: block;
  padding: 12px 14px;
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.index-list a:hover {
  background: var(--indigo);
}

.index-empty {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

/* Folder view (home page): Monthly / Weekly folders, newest report first. */
.report-folders { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 8px; }
.report-folder {
  flex: 1 1 300px; min-width: 280px; border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px; background: #fff;
}
.report-folder__title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: 16px; border: 0; padding: 0;
}
.report-folder__icon { font-size: 18px; }
.report-folder__count {
  margin-left: auto; font-size: 12px; color: var(--muted);
  background: var(--surface, #f1f5f9); border-radius: 999px; padding: 1px 9px;
}
.report-folder__list { list-style: none; margin: 0; padding: 0; }
.report-folder__item {
  display: block; padding: 9px 10px; border-radius: 6px; text-decoration: none;
  color: var(--ink, #14171C); font-weight: 500; font-size: 14px;
}
.report-folder__item:hover { background: #EFF4FF; color: #1D4ED8; }
.report-folder__list li + li { border-top: 1px solid var(--border); }

/* ---------- Login ---------- */

.signin {
  text-align: center;
}

.signin-note {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 16px;
}

.signin-button {
  display: inline-block;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #ffffff;
  text-decoration: none;
}

.signin-button:hover {
  background: #1E40AF;
}

/* ---------- Error ---------- */

.error-body {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}

/* ---------- Anchor scrolling under the sticky chrome (LEGACY-130 follow-up) ----------
   The engine report sets html{scroll-padding-top:12px} for the standalone (chrome-less)
   document. Once the site injects the ~42px sticky .site-chrome on top, every in-page
   anchor (TOC links AND action-item → opportunity jumps) landed UNDER the bar. This
   link is injected after the engine's inline <style>, so it wins: clear the chrome. */
html {
  scroll-padding-top: 64px;
}

/* ---------- Sticky-element compensation for the injected chrome (LEGACY UI #4) ----------
   The frozen report blob pins its own sticky elements to the standalone viewport top:
   the movers table headers at top:0 and the right-hand TOC at top:24px. Once the site
   injects the ~48px sticky .site-chrome above them, both slid UNDER the dark bar (the
   chrome is z-index:1000, so it painted over the column headers and the TOC's top rows).
   These rules — injected after the engine's inline <style>, so they win — push each
   sticky element below the chrome. !important guards against the engine stylesheet's
   equal-specificity rule that follows this link in document order. */
.movers-table thead { top: 50px !important; }
aside.toc-sidebar { top: 58px !important; max-height: calc(100vh - 72px) !important; }

/* ---------- "Data under review" banner → recap link (resolver-only, JS-enhanced) ----------
   The banner lives in the frozen report blob (byte-identical). For resolvers,
   state_bootstrap.js wraps it in an <a> to the recap page; these rules style that
   link state without touching the stored bytes. */
a.dq-banner-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.dq-banner-link .dq-banner {
  transition: filter 0.12s ease, box-shadow 0.12s ease;
}
a.dq-banner-link:hover .dq-banner,
a.dq-banner-link:focus-visible .dq-banner {
  filter: brightness(0.97);
  box-shadow: 0 1px 6px rgba(20, 23, 28, 0.12);
}
a.dq-banner-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
/* A quiet "Review →" affordance appended to the banner text by the enhancer. */
.dq-banner__cta {
  font-weight: 700;
  margin-left: 6px;
  white-space: nowrap;
}

/* ---------- Feedback widget: floating trigger + Signal modal (LEGACY-138 restyle) ---------- */

/* Floating trigger, bottom-right, out of the content flow. */
.sig-feedback-trigger {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border: 1px solid var(--chrome-border);
  border-radius: 999px;
  background: var(--navy);
  color: var(--chrome-ink);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(20, 23, 28, 0.22);
  transition: transform 0.1s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.sig-feedback-trigger:hover {
  background: #1f242c;
  box-shadow: 0 6px 18px rgba(20, 23, 28, 0.28);
}
.sig-feedback-trigger:active {
  transform: translateY(1px);
}
.sig-feedback-trigger:focus-visible {
  outline: 2px solid var(--spark);
  outline-offset: 2px;
}

/* Per-action-item inline trigger (injected by feedback-widget.js). */
.ai-feedback {
  margin-left: 8px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.ai-feedback:hover {
  background: var(--indigo);
  border-color: var(--indigo-border);
  color: var(--accent);
}
.ai-feedback:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Modal overlay + card. */
.sig-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 23, 28, 0.55);
  backdrop-filter: blur(2px);
  animation: sig-fade-in 0.12s ease;
}
.sig-modal-overlay[hidden] {
  display: none;
}
@keyframes sig-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.sig-modal {
  width: 100%;
  max-width: 460px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(20, 23, 28, 0.32);
  padding: 22px 22px 20px;
  font-family: var(--font);
  color: var(--ink);
  animation: sig-modal-in 0.14s ease;
}
@keyframes sig-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sig-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.sig-modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.2px;
}
.sig-modal__close {
  flex: none;
  width: 30px;
  height: 30px;
  margin: -4px -4px 0 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.sig-modal__close:hover {
  background: var(--bg);
  color: var(--ink);
}
.sig-modal__sub {
  margin: 6px 0 16px;
  font-size: 13px;
  color: var(--muted);
}
.sig-modal__sub .sig-modal__scope {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 7px;
  border-radius: 999px;
}
.sig-modal__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.sig-modal__textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  resize: vertical;
  min-height: 96px;
}
.sig-modal__textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.sig-modal__error {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #C4314B;
}
.sig-modal__error[hidden] {
  display: none;
}
.sig-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.sig-btn {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
}
.sig-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.sig-btn--primary:hover {
  background: #1E40AF;
  border-color: #1E40AF;
}
.sig-btn--primary:disabled {
  opacity: 0.6;
  cursor: default;
}
.sig-btn--ghost {
  background: #fff;
  border-color: var(--border);
  color: var(--ink);
}
.sig-btn--ghost:hover {
  background: var(--bg);
}
.sig-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
