/* Electrolux Agentic PDLC — Review UI
   Polished enterprise console. No external dependencies. */

:root {
  /* ---- brand + palette ---- */
  --brand:        #003DA5;   /* Electrolux royal blue */
  --brand-strong: #002f80;
  --brand-tint:   #eef3fc;
  --brand-tint-2: #e0eafa;

  --ink:      #0f1b2d;
  --ink-2:    #33445c;
  --muted:    #6a7a8c;
  --faint:    #9aa7b5;

  --bg:         #f4f6fa;
  --surface:    #ffffff;
  --surface-2:  #f7f9fc;
  --surface-3:  #eef1f6;
  --line:       #e5eaf1;
  --line-strong:#d3dbe6;

  --ok:      #137a3f;  --ok-bg:      #e7f4ec;
  --pending: #9a6b00;  --pending-bg: #fbf1dd;
  --fail:    #c02626;  --fail-bg:    #fdecec;

  /* two source worlds a citation can point to */
  --design:    #5b4bc4;  --design-bg: #efecfb;   /* figma */
  --eng:       #0e7490;  --eng-bg:    #e5f4f8;    /* code  */

  /* ---- type scale ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs:  11.5px;
  --text-sm:  12.5px;
  --text-md:  14px;
  --text-base:15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 26px;
  --text-3xl: 34px;

  /* ---- spacing scale ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;

  /* ---- radius ---- */
  --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px;

  /* ---- shadows ---- */
  --shadow-sm: 0 1px 2px rgba(15, 27, 45, .06);
  --shadow-md: 0 4px 16px rgba(15, 27, 45, .08);
  --shadow-lg: 0 18px 50px rgba(15, 27, 45, .18);

  --measure: 760px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ================= SIGN-IN ================= */
.signin {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: var(--sp-6);
  background: linear-gradient(160deg, #eaf0fb 0%, #f4f6fa 55%, #eef3fc 100%);
}
.signin::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 78% 8%, rgba(0,61,165,.10), transparent 70%),
    radial-gradient(50% 50% at 12% 92%, rgba(0,61,165,.07), transparent 70%);
}
.signin-card {
  position: relative;
  width: 100%; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-7);
  animation: cardIn .28s cubic-bezier(.2,.7,.3,1);
}
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.signin-brand { display: flex; align-items: center; gap: 11px; margin-bottom: var(--sp-6); }
.signin-title { margin: 0 0 var(--sp-2); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -.02em; }
.signin-lead { margin: 0 0 var(--sp-6); color: var(--muted); font-size: var(--text-md); line-height: 1.55; }
.signin-label {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-3);
}
.persona-list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.persona {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-3) var(--sp-4); text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  transition: border-color .12s, background .12s, box-shadow .12s, transform .05s;
}
.persona:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-tint); box-shadow: var(--shadow-sm); }
.persona:active:not(:disabled) { transform: translateY(1px); }
.persona:disabled { opacity: .6; cursor: wait; }
.persona-avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand);
  display: grid; place-items: center; font-size: var(--text-sm); font-weight: 800; letter-spacing: .02em;
}
.persona-meta { min-width: 0; line-height: 1.25; }
.persona-meta b { display: block; font-size: var(--text-md); color: var(--ink); }
.persona-meta span { font-size: var(--text-sm); color: var(--muted); }
.persona-go { margin-left: auto; color: var(--faint); font-size: 18px; }
.persona-skel {
  height: 62px; border-radius: var(--r-lg);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
}
.signin-pass { margin-bottom: var(--sp-3); }
.signin-pass-label {
  display: block; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); margin-bottom: var(--sp-2);
}
.signin-status { min-height: 1.2em; font-size: var(--text-sm); color: var(--fail); }
.signin-status.is-info { color: var(--muted); }

/* ================= SHELL ================= */
.app { display: flex; height: 100vh; overflow: hidden; }

/* ---------- LEFT rail ---------- */
.rail {
  flex: 0 0 268px;
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-4);
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: var(--text-lg); letter-spacing: .5px;
  box-shadow: var(--shadow-sm);
}
.brand-text { line-height: 1.2; }
.brand-text b { display: block; font-size: var(--text-md); font-weight: 700; color: var(--ink); }
.brand-text span { font-size: var(--text-xs); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }

.rail-new { width: 100%; justify-content: center; gap: 6px; }
.rail-new-icon { font-size: 16px; line-height: 1; font-weight: 700; }

.rail-section { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.rail-heading {
  margin: 0 0 var(--sp-2) 2px;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.history { overflow-y: auto; margin: 0 -4px; padding: 0 4px; display: flex; flex-direction: column; gap: var(--sp-4); }
.history-group-label {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; color: var(--faint);
  text-transform: uppercase; margin: 0 0 6px 2px;
}
.history-group { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.history-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); cursor: pointer; text-align: left; width: 100%;
  transition: border-color .12s, background .12s;
}
.history-item:hover { border-color: var(--line-strong); background: #fff; }
.history-item.is-active { border-color: var(--brand); background: var(--brand-tint); }
.history-main { min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.history-name {
  display: block; font-size: var(--text-sm); font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.history-time { font-size: var(--text-xs); color: var(--muted); }
.history-row { display: flex; align-items: stretch; gap: 4px; }
.history-row > .history-item { flex: 1 1 auto; min-width: 0; }
.history-del {
  flex: 0 0 auto; width: 30px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--faint); cursor: pointer;
  font-size: 13px; opacity: 0;
  transition: opacity .12s, color .12s, background .12s, border-color .12s;
}
.history-row:hover .history-del, .history-del:focus-visible { opacity: 1; }
.history-del:hover { color: var(--fail); background: var(--fail-bg); border-color: #f3c0c0; }
.history-empty { padding: 8px 2px; font-size: var(--text-sm); color: var(--muted); }

.rail-foot { margin-top: auto; }
.account {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface-2);
}
.account-avatar {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: var(--text-xs); font-weight: 800;
}
.account-meta { min-width: 0; line-height: 1.25; flex: 1 1 auto; }
.account-meta b { display: block; font-size: var(--text-sm); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-meta span { font-size: var(--text-xs); color: var(--muted); }
.account-out {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font-size: 15px; line-height: 1; display: grid; place-items: center;
  transition: background .12s, color .12s, border-color .12s;
}
.account-out:hover { background: var(--fail-bg); color: var(--fail); border-color: #f2c6c6; }

/* ---------- CENTER thread ---------- */
.thread {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden; background: var(--bg);
}

/* view toggles driven by data-view on .app */
.hero { display: none; }
.app[data-view="empty"] .hero { display: flex; }
.app[data-view="empty"] .thread-head,
.app[data-view="empty"] .thread-body,
.app[data-view="empty"] .composer { display: none !important; }
.app[data-view="loading"] .hero,
.app[data-view="active"] .hero { display: none; }

/* ---- empty hero ---- */
.hero {
  flex: 1 1 auto; overflow-y: auto;
  align-items: center; justify-content: center; padding: var(--sp-8) var(--sp-6);
}
.hero-inner { width: 100%; max-width: 680px; text-align: center; }
.hero-eyebrow {
  margin: 0 0 var(--sp-4); font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand);
}
.hero-title { margin: 0 0 var(--sp-3); font-size: var(--text-3xl); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.hero-sub { margin: 0 auto var(--sp-6); max-width: 520px; color: var(--muted); font-size: var(--text-lg); line-height: 1.55; }
.hero-input {
  display: flex; gap: var(--sp-2); align-items: stretch; max-width: 560px; margin: 0 auto var(--sp-4);
}
.hero-input .field { flex: 1 1 auto; min-width: 0; text-align: left; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.chip {
  font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); cursor: pointer;
  padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: var(--r-full);
  background: var(--surface); transition: border-color .12s, background .12s, color .12s;
}
.chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.hero-status { margin: var(--sp-5) 0 0; min-height: 1.2em; font-size: var(--text-md); color: var(--fail); }

/* ---- intake-router HITL confirm (inline hero card) ---- */
.route-confirm {
  margin: var(--sp-5) auto 0; max-width: 560px; text-align: left;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--brand-tint-2); border-left: 3px solid var(--brand);
  border-radius: var(--r-lg); background: var(--brand-tint);
  box-shadow: var(--shadow-sm);
}
.route-confirm-msg {
  margin: 0 0 var(--sp-4); font-size: var(--text-md); line-height: 1.5;
  color: var(--ink); font-weight: 600;
}
.route-confirm-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.route-confirm-btn { flex: 0 1 auto; }

/* ---- active thread head ---- */
.thread-head { background: var(--surface); border-bottom: 1px solid var(--line); }
.thread-head-inner {
  max-width: var(--measure); margin: 0 auto; width: 100%;
  padding: var(--sp-5) var(--sp-6) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.thread-head-row { display: flex; align-items: center; gap: var(--sp-3); }
.thread-title {
  margin: 0; font-size: var(--text-xl); font-weight: 800; letter-spacing: -.02em; color: var(--ink);
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- gate strip (who approved) ---- */
.gates { display: flex; align-items: stretch; gap: var(--sp-2); flex-wrap: wrap; }
.gate {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface-2); min-width: 200px;
}
.gate-head { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.gate-actions { display: flex; gap: 6px; }
.gate-btn { flex: 1 1 0; padding: 5px 10px; font-size: var(--text-sm); }
.gate-icon {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--surface-3); color: var(--muted);
}
.gate-body { line-height: 1.25; min-width: 0; }
.gate-name { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.gate-sub { display: block; font-size: var(--text-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gate--ok    { border-color: #bfe3cc; background: var(--ok-bg); }
.gate--ok    .gate-icon { background: var(--ok); color: #fff; }
.gate--fail  { border-color: #f2c6c6; background: var(--fail-bg); }
.gate--fail  .gate-icon { background: var(--fail); color: #fff; }
.gate--pending .gate-icon { background: var(--pending-bg); color: var(--pending); }

/* ---- activity disclosure ---- */
.activity {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2);
}
.activity-summary {
  display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; list-style: none;
  padding: 9px 12px; font-size: var(--text-sm); font-weight: 700; color: var(--ink-2);
}
.activity-summary::-webkit-details-marker { display: none; }
.activity-summary::before {
  content: "▸"; color: var(--muted); font-size: 11px; transition: transform .12s;
}
.activity[open] .activity-summary::before { transform: rotate(90deg); }
.activity-count {
  margin-left: auto; padding: 1px 8px; border-radius: var(--r-full);
  background: var(--surface-3); color: var(--muted); font-size: var(--text-xs); font-weight: 700;
}
.activity-list { list-style: none; margin: 0; padding: 0 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.activity-row { display: flex; gap: var(--sp-2); font-size: var(--text-sm); color: var(--ink-2); line-height: 1.4; }
.activity-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; background: #c1cad6; }
.activity-dot.is-ok { background: var(--ok); }
.activity-dot.is-fail { background: var(--fail); }
.activity-actor { font-weight: 700; color: var(--ink); }
.activity-time { color: var(--faint); }
.activity-empty { padding: 0 12px 10px; font-size: var(--text-sm); color: var(--muted); }

/* ---- body ---- */
.thread-body { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-7) var(--sp-6); }

/* ---- loading skeleton ---- */
.skeleton { max-width: var(--measure); margin: 0 auto; }
.skel-status {
  display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-6);
  padding: 12px 14px; border: 1px solid var(--brand-tint-2); border-radius: var(--r-lg); background: var(--brand-tint);
}
.skel-status-text { font-size: var(--text-md); font-weight: 600; color: var(--brand-strong); }
.spinner {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--brand-tint-2); border-top-color: var(--brand);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.skel {
  border-radius: var(--r-sm); margin-bottom: 12px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.skel-h1 { height: 30px; width: 55%; margin-bottom: 20px; }
.skel-h2 { height: 22px; width: 40%; margin: 26px 0 14px; }
.skel-line { height: 13px; }
.skel-line.short { width: 62%; }
.skel-table { height: 150px; border-radius: var(--r-lg); margin-top: 18px; }

/* ---- live agent feed (streamed during generate) ---- */
.livefeed {
  list-style: none; margin: 0 0 var(--sp-4); padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 420px; overflow-y: auto;
}
.feed-row {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.feed-row.is-current { border-color: var(--brand-tint-2); background: var(--brand-tint); }
.feed-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  max-width: 190px; padding: 3px 9px; border-radius: var(--r-full);
  background: var(--brand-tint-2); color: var(--brand-strong);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feed-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.feed-row.is-current .feed-dot { background: var(--brand); animation: feedpulse 1s ease-in-out infinite; }
@keyframes feedpulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.feed-main { min-width: 0; flex: 1 1 auto; }
.feed-kind {
  display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
}
.feed-snip {
  font-size: var(--text-sm); color: var(--ink-2); line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.skel-error {
  max-width: var(--measure); margin: 0 auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3);
  padding: 16px 18px; border: 1px solid var(--fail); border-radius: var(--r-lg); background: var(--fail-bg);
}
.skel-error-title { font-size: var(--text-md); font-weight: 700; color: var(--fail); }
.skel-error-msg { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.5; }

/* ---------- rendered markdown ---------- */
.prose { max-width: var(--measure); margin: 0 auto; color: var(--ink); font-size: var(--text-base); line-height: 1.7; }
.prose > :first-child { margin-top: 0; }
.prose > .turn-agent:first-child > :first-child { margin-top: 0; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  line-height: 1.3; font-weight: 700; color: var(--ink); margin: 1.6em 0 .5em;
}
.prose h1 { font-size: 1.7rem; letter-spacing: -.02em; }
.prose h2 { font-size: 1.32rem; padding-bottom: .3em; border-bottom: 1px solid var(--line); }
.prose h3 { font-size: 1.12rem; }
.prose h4 { font-size: 1rem; }
.prose h5, .prose h6 { font-size: .9rem; color: var(--ink-2); }
.prose p { margin: 0 0 1em; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.4em; }
.prose li { margin: .3em 0; }
.prose li::marker { color: var(--muted); }
.prose strong { font-weight: 700; }
.prose em { font-style: italic; }
.prose a { color: var(--brand); }
.prose blockquote {
  margin: 0 0 1em; padding: .5em 1.1em;
  border-left: 3px solid var(--brand); background: var(--brand-tint);
  border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--ink-2);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code {
  font-family: var(--font-mono); font-size: .86em;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .08em .38em;
}
.prose pre {
  margin: 0 0 1em; padding: 14px 16px; overflow-x: auto;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.55;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.prose table {
  display: block; max-width: 100%; overflow-x: auto;
  border-collapse: collapse; margin: 0 0 1em; font-size: var(--text-md);
}
.prose th, .prose td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--surface-2); font-weight: 700; }
.prose tbody tr:nth-child(even) td { background: #fbfcfe; }

/* ---------- citation pills ---------- */
.cite {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: .82em; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  padding: .12em .5em; border-radius: var(--r-sm); border: 1px solid transparent;
  color: var(--eng); background: var(--eng-bg);
  transition: border-color .12s, background .12s;
}
.cite::before {
  content: ""; display: inline-block;
  width: .42em; height: .42em; border-radius: 50%;
  background: currentColor; margin-right: .42em; opacity: .75;
}
.cite:hover { border-color: currentColor; }
.cite.is-active { outline: 2px solid currentColor; outline-offset: 1px; }
.cite[data-ref^="figma"] { color: var(--design); background: var(--design-bg); }

/* ---------- requirement CARDS (PART 2) ---------- */
.reqview { max-width: var(--measure); margin: 0 auto; }
.reqset { display: flex; flex-direction: column; gap: var(--sp-7); }
.review-query {
  display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.review-query-label {
  flex: 0 0 auto; font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.review-query-text { font-size: var(--text-md); font-weight: 600; color: var(--ink); }

/* The ask, in order: the opening query and every follow-up sent back since. A
   follow-up is a course correction on the original, not a peer of it, so it is
   indented under it, tinted, and carries its own number and time. */
.review-queries { display: flex; flex-direction: column; gap: 6px; }
.review-query.is-followup {
  margin-left: var(--sp-4);
  background: var(--brand-tint);
  border-color: var(--line-strong);
  border-left: 3px solid var(--brand);
}
.review-query.is-followup .review-query-label { color: var(--brand); }
.review-query.is-followup .review-query-text { font-weight: 500; }
.review-query-when {
  flex: 0 0 auto; margin-left: auto;
  font-size: var(--text-xs); color: var(--muted); white-space: nowrap;
}
.reqbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--brand-tint);
}
.reqbar-label { font-size: var(--text-sm); font-weight: 700; color: var(--brand-strong); }
.reqbar .gate-publish-all { margin-left: auto; }

.reqgroup { display: flex; flex-direction: column; gap: var(--sp-3); }
.reqgroup-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line);
}
.reqgroup-title {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-2);
}
.reqgroup-count {
  padding: 1px 8px; border-radius: var(--r-full);
  background: var(--surface-3); color: var(--muted); font-size: var(--text-xs); font-weight: 700;
}

.reqcard {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: border-color .12s, box-shadow .12s;
}
.reqcard:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.reqcard-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.reqcard-key {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--ink);
  padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface-2);
}
.reqbadge {
  padding: 3px 9px; border-radius: var(--r-full);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em;
  background: var(--surface-3); color: var(--muted);
}
.reqbadge--functional      { background: var(--brand-tint);  color: var(--brand); }
.reqbadge--interaction     { background: var(--design-bg);   color: var(--design); }
.reqbadge--non-functional  { background: var(--eng-bg);      color: var(--eng); }
.reqbadge--performance     { background: var(--pending-bg);  color: var(--pending); }

/* High-level code-linkage chip (honest Level-0 delta signal) */
.reqcard-delta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--r-full);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;
}
.reqcard-delta::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .8;
}
.reqcard-delta--linked { background: var(--ok-bg);      color: var(--ok); }
.reqcard-delta--document,
.reqcard-delta--design { background: var(--pending-bg); color: var(--pending); }
.reqcard-delta--open   { background: var(--surface-3);  color: var(--muted); }
.delta-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 2px 0 6px; }
.delta-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.delta-legend-note { font-size: var(--text-sm); color: var(--muted); }

.reqcard-pubs { margin-left: auto; display: flex; gap: 6px; }
.reqcard-tag {
  padding: 2px 8px; border-radius: var(--r-full);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em;
}
.reqcard-tag.is-pub    { background: var(--ok-bg);      color: var(--ok); }
.reqcard-tag.is-edited { background: var(--pending-bg); color: var(--pending); }
.reqcard-text { margin: 0; color: var(--ink); font-size: var(--text-base); line-height: 1.6; }
.reqcard-cites { display: flex; flex-wrap: wrap; gap: 6px; }
/* ---------- quality on the artifact (A) ----------
   A chip answers "is this one weak" at a glance; the panel answers "what exactly and
   how do I fix it". The evaluator's fix text is the most useful thing it produces, so
   it is set as readable prose rather than hidden in a title attribute. */
.qchip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .03em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.qchip.is-pass     { background: var(--ok-bg);      color: var(--ok); }
.qchip.is-advisory { background: var(--pending-bg); color: var(--pending); }
.qchip.is-blocked  { background: #fbeee6;           color: #b8501e; }
.qchip.is-none     { background: var(--surface-2);  color: var(--muted); }

.qpanel-host { display: flex; flex-direction: column; gap: var(--sp-2); }
.qpanel-toggle {
  align-self: flex-start; border: 0; background: none; cursor: pointer;
  padding: 0; font: inherit; font-size: var(--text-sm); font-weight: 600;
  color: var(--pending); text-decoration: underline; text-underline-offset: 3px;
}
.qpanel-toggle::before { content: "▸ "; }
.qpanel-toggle.is-open::before { content: "▾ "; }
.qpanel {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--pending); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.qrow { display: flex; flex-direction: column; gap: 3px; }
.qrow-head { display: flex; align-items: baseline; gap: var(--sp-2); }
.qrow-name { font-weight: 700; font-size: var(--text-sm); }
.qrow-score {
  font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 1px 6px; border-radius: 3px;
}
.qrow-score.is-bad  { background: #fbeee6; color: #b8501e; }
.qrow-score.is-weak { background: var(--pending-bg); color: var(--pending); }
.qrow-why { margin: 0; font-size: var(--text-sm); color: var(--ink-2); line-height: 1.5; }
.qrow-fix { margin: 0; font-size: var(--text-sm); color: var(--ink); line-height: 1.5;
            display: flex; gap: 8px; align-items: baseline; }
.qrow-fix-label {
  flex: none; font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--brand);
}
.qrow-fix-text { flex: 1 1 auto; }
.qpanel-foot { padding-top: var(--sp-2); border-top: 1px solid var(--line); }

/* ===================== B: query-level quality =====================
   Requirements and stories stay in separate columns and are never averaged: one
   blended number hides which half needs work. Always visible — the first version
   hid this behind a toggle and nobody found it. */
.qq-host { display: block; }
.qq { display: flex; flex-direction: column; gap: var(--sp-3); }

.qq-health {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  border: 1px solid var(--line); font-size: var(--text-md);
}
.qq-health.is-ok   { background: var(--ok-bg);      border-color: var(--ok); }
.qq-health.is-miss { background: var(--pending-bg); border-color: var(--pending); }
.qq-health-icon { font-weight: 800; }
.qq-health.is-ok .qq-health-icon   { color: var(--ok); }
.qq-health.is-miss .qq-health-icon { color: var(--pending); }
.qq-health-text { flex: 1 1 auto; color: var(--ink); }
.qq-health-more {
  flex: none; border: 0; background: none; cursor: pointer; padding: 0; font: inherit;
  font-size: var(--text-xs); color: var(--muted); text-decoration: underline; text-underline-offset: 2px;
}
.qq-cov { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-3);
          border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.qq-cov-row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--text-sm); }
.qq-cov-name { color: var(--ink-2); }
.qq-cov-val  { font-variant-numeric: tabular-nums; color: var(--ink); }
.qq-cov-row.is-miss .qq-cov-val { color: var(--pending); font-weight: 600; }

.qq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.qq-col {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.qq-col-head { display: flex; align-items: baseline; gap: var(--sp-2); }
.qq-col-title { font-weight: 700; font-size: var(--text-md); }
.qq-col-count { font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.qq-mean { display: flex; align-items: baseline; gap: 8px; }
.qq-mean-v { font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.qq-mean-l { font-size: var(--text-xs); color: var(--muted); }

.qq-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--line); }
.qq-bar-seg.is-pass     { background: var(--ok); }
.qq-bar-seg.is-advisory { background: var(--pending); }
.qq-bar-seg.is-blocked  { background: #b8501e; }
.qq-legend { font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }

.qq-weak { display: flex; flex-direction: column; gap: 2px; padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.qq-weak-label, .qq-queue-label {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
}
.qq-weak-row { display: flex; justify-content: space-between; font-size: var(--text-sm); }
.qq-weak-name { color: var(--ink-2); }
.qq-weak-score { font-variant-numeric: tabular-nums; color: var(--ink); }
.qq-weak-score.is-weak { color: var(--pending); font-weight: 600; }
.qq-weak-score.is-bad  { color: #b8501e; font-weight: 700; }

.qq-queue { display: flex; flex-direction: column; gap: 3px; padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.qq-queue-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%; padding: 4px 8px; border: 1px solid transparent; border-radius: var(--r-sm, 4px);
  background: none; cursor: pointer; font: inherit; text-align: left;
}
.qq-queue-item:hover { background: var(--panel, #fff); border-color: var(--line); }
.qq-queue-key { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: var(--text-xs); color: var(--ink); }
.qq-foot { font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.qq-empty { margin: 0; color: var(--muted); font-size: var(--text-sm); }

@media (max-width: 760px) { .qq-cols { grid-template-columns: 1fr; } }

/* Feature overview — the way in to a long set. Reads as prose, sits above the
   grouping chips, and is deliberately quieter than a requirement statement. */
.review-overview {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.review-overview-label {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.review-overview-text {
  margin: 0; font-size: var(--text-md); line-height: 1.6;
  color: var(--ink); max-width: 74ch;
}

/* Numbered source. The cited lines are marked so a range can be checked at a
   glance; line numbers are unselectable so copying takes the code, not the gutter. */
.codeview {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); overflow: auto; max-height: 60vh;
}
.codeview-body { margin: 0; padding: 8px 0; font-size: 12.5px; line-height: 1.55; }
.codeline { display: flex; gap: 0; }
.codeline-n {
  flex: 0 0 auto; min-width: 56px; padding: 0 12px 0 10px;
  text-align: right; color: var(--muted);
  font-variant-numeric: tabular-nums;
  user-select: none; -webkit-user-select: none;
  border-right: 1px solid var(--line);
}
.codeline-t { flex: 1 1 auto; padding: 0 14px; white-space: pre; color: var(--ink); }
.codeline.is-cited { background: var(--brand-tint); }
.codeline.is-cited .codeline-n {
  color: var(--brand); font-weight: 700;
  border-right-color: var(--brand);
  box-shadow: inset 3px 0 0 var(--brand);
}

.source-textlink {
  display: inline-block; margin-top: var(--sp-2);
  font-size: var(--text-sm); color: var(--brand);
  text-decoration: underline; text-underline-offset: 2px;
}

/* A dependency that names another story links to it. Reads as a link, not a button, and
   the target flashes briefly so the jump is visible on a long board. */
.storylink {
  display: inline; padding: 0; border: 0; background: none;
  font: inherit; color: var(--brand); text-align: left;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.storylink:hover { text-decoration-thickness: 2px; }
.storylink:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
.storylink.is-missing { color: var(--muted); text-decoration: none; cursor: default; }
.reqcard.is-jumped {
  box-shadow: 0 0 0 2px var(--brand);
  transition: box-shadow .25s ease;
}

/* Requirement rationale — context under the statement. Quieter than the statement and
   than a reviewer comment: it explains the requirement, it is not part of it. */
.reqcard-why {
  margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.reqcard-why-label {
  flex: none;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.reqcard-why-text {
  flex: 1 1 260px; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: var(--text-md); color: var(--ink-2); line-height: 1.55;
}

.reqcard-note {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px; border-left: 3px solid var(--brand);
  background: var(--surface-2); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.reqcard-note-label {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.reqcard-note-text { font-size: var(--text-md); color: var(--ink-2); line-height: 1.5; }

.reqcard-foot { display: flex; flex-direction: column; gap: var(--sp-3); }
.reqcard-actions {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding-top: var(--sp-3); border-top: 1px solid var(--line);
}
.reqcard-actions-sp { flex: 1 1 auto; }
.reqcard-btn { padding: 6px 12px; font-size: var(--text-sm); }
.reqcard-panel {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.reqcard-textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
.reqcard-orig { margin: 0; font-size: var(--text-sm); color: var(--muted); line-height: 1.5; }
.reqcard-panel-foot { display: flex; align-items: center; gap: var(--sp-2); }
.reqcard-panel-status { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); color: var(--muted); }
.reqcard-panel-status.is-fail { color: var(--fail); font-weight: 600; }

/* ---------- published / committed cards (PART 2) ---------- */
.reqcard.is-published { background: var(--surface-2); border-color: var(--line); box-shadow: none; }
.reqcard.is-published:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.reqcard.is-published .reqcard-text { color: var(--ink-2); }
.reqcard.is-published .reqcard-key { background: var(--surface-3); }
a.reqcard-pub-link { text-decoration: none; cursor: pointer; }
a.reqcard-pub-link:hover { text-decoration: underline; }
.reqcard-resync {
  padding: 6px 10px; border-radius: var(--r-md);
  border: 1px solid #f0dfb0; background: var(--pending-bg);
  color: var(--pending); font-size: var(--text-sm); font-weight: 600;
}

/* set-level "Publish all to Jama/Jira" (docked on the matching gate) */
.gate-publish-all { width: 100%; padding: 6px 10px; font-size: var(--text-sm); }
.gate-publish-status { font-size: var(--text-xs); color: var(--muted); min-height: 1em; }
.gate-publish-status.is-ok { color: var(--ok); font-weight: 600; }
.gate-publish-status.is-fail { color: var(--fail); font-weight: 600; }

/* ---------- derived user STORY cards (PART 2) ---------- */
.storyset {
  display: flex; flex-direction: column; gap: var(--sp-4);
  margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 2px solid var(--line);
}
.storyset-head { display: flex; align-items: center; gap: var(--sp-2); }
.storyset-title {
  margin: 0; font-size: var(--text-md); font-weight: 800;
  letter-spacing: .01em; color: var(--ink);
}
.storyset-count {
  padding: 1px 8px; border-radius: var(--r-full);
  background: var(--surface-3); color: var(--muted); font-size: var(--text-xs); font-weight: 700;
}
.storyset-head-sp { flex: 1 1 auto; }
.storyset-generate { padding: 6px 14px; font-size: var(--text-sm); }
.storyset-hint { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.storyset-error { margin: 0; color: var(--fail); font-size: var(--text-sm); font-weight: 600; }
.storygroup { display: flex; flex-direction: column; gap: var(--sp-3); }
.storycard-trace {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: var(--text-xs);
}
.storycard-trace-label {
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--muted);
}
.storycard-trace-val { font-family: var(--font-mono); font-weight: 700; color: var(--ink-2); }
.storycard-narrative { font-style: italic; }

/* per-set publish result banner */
.publish-summary {
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin-bottom: var(--sp-5); padding: var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2);
}
.publish-summary-head { display: flex; align-items: center; gap: var(--sp-3); }
.publish-summary-title { flex: 1 1 auto; font-size: var(--text-md); font-weight: 700; color: var(--ink); }
.publish-summary-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.publish-summary-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); }
.publish-summary-key {
  flex: 0 0 auto; max-width: 45%;
  font-family: var(--font-mono); font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.publish-summary-val { color: var(--ink-2); min-width: 0; }
.publish-summary-row.is-ok .publish-summary-key { color: var(--ok); }
.publish-summary-row.is-fail .publish-summary-val { color: var(--fail); font-weight: 600; }

/* ---------- open questions (PART 2) ---------- */
.openq {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4); border: 1px solid #f0dfb0; border-radius: var(--r-lg);
  background: var(--pending-bg);
}
.openq-head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.openq-title { margin: 0; font-size: var(--text-md); font-weight: 800; color: var(--pending); letter-spacing: -.01em; }
.openq-hint { margin: 0; font-size: var(--text-sm); color: var(--muted); }
.openq-item {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.openq-text { margin: 0; font-size: var(--text-md); color: var(--ink); line-height: 1.55; }
.openq-answer { display: flex; gap: var(--sp-2); align-items: center; }
.openq-answer .field { flex: 1 1 auto; min-width: 0; }
.openq-input { width: 100%; }
.openq-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-1); }
.openq-status { font-size: var(--text-sm); color: var(--muted); }
.openq-status.is-fail { color: var(--fail); font-weight: 600; }

/* structured question card: why it matters / what the sources say / affected keys */
.openq-line { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--text-sm); line-height: 1.5; }
.openq-line-label {
  flex: 0 0 auto; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; font-size: var(--text-xs); color: var(--muted);
}
.openq-line-text { min-width: 0; color: var(--ink-2); }
.openq-affects { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.openq-affects-label {
  text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; font-size: var(--text-xs); color: var(--muted);
}
.openq-chip {
  padding: 2px 8px; border-radius: var(--r-full);
  background: var(--surface-3); color: var(--ink-2);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
}
.openq-options { display: flex; flex-direction: column; gap: 6px; }
.openq-opt {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: var(--text-md); color: var(--ink); cursor: pointer;
}
.openq-opt-text { min-width: 0; }
.openq-other { flex: 1 1 220px; min-width: 0; padding: 6px 10px; font-size: var(--text-sm); }
.openq-default { margin: 0; font-size: var(--text-sm); font-style: italic; color: var(--muted); line-height: 1.45; }

/* ---------- per-requirement refinement (PART 4) ---------- */
/* provenance flags in the card header — see MW.reqBadges (reqview.js) */
.reqcard-flag {
  padding: 2px 9px; border-radius: var(--r-full);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.reqcard-flag--refined  { background: var(--brand-tint); color: var(--brand); }
.reqcard-flag--override { background: var(--fail-bg);    color: var(--fail); }
.reqcard-flag--resync   { background: var(--pending-bg); color: var(--pending); }
.reqcard-flag--stale    { background: var(--surface-3);  color: var(--muted); }

/* the card the reviewer just refined, brought back under their eyes after the re-render */
.reqcard.is-focused { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint-2); }

/* "View changes" — version history with a word-level before/after */
.reqcard-changes { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.reqcard-changes-toggle { align-self: flex-start; }
.reqcard-history { width: 100%; display: flex; flex-direction: column; gap: var(--sp-2); }
.reqcard-hrow {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--sp-3); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.reqcard-hmeta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2);
  font-size: var(--text-xs);
}
.reqcard-hver { font-family: var(--font-mono); font-weight: 700; color: var(--brand); }
.reqcard-hwho { color: var(--ink-2); min-width: 0; }
.reqcard-hwhen { margin-left: auto; color: var(--muted); }
.reqcard-hnote { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--text-sm); }
.reqcard-hnote-label {
  flex: 0 0 auto; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; font-size: var(--text-xs); color: var(--muted);
}
.reqcard-hnote-text { min-width: 0; color: var(--ink-2); }
.reqcard-diff {
  margin: 0; font-size: var(--text-md); line-height: 1.75;
  color: var(--ink-2); overflow-wrap: break-word; word-break: break-word;
}
.reqcard-diff.is-empty { color: var(--muted); font-style: italic; }
.reqcard-diff-add {
  padding: 0 3px; border-radius: var(--r-sm);
  background: var(--ok-bg); color: var(--ok); font-weight: 600;
}
.reqcard-diff-del {
  padding: 0 3px; border-radius: var(--r-sm);
  background: var(--fail-bg); color: var(--fail); text-decoration: line-through;
}

/* CONFLICT — the agent pushed back because the comment contradicts the source */
.reqcard-conflict {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid #f0dfb0; border-left: 4px solid var(--pending);
  border-radius: var(--r-md); background: var(--pending-bg);
}
.reqcard-conflict-head { display: flex; align-items: center; gap: var(--sp-2); }
.reqcard-conflict-icon { flex: 0 0 auto; color: var(--pending); font-size: var(--text-lg); line-height: 1; }
.reqcard-conflict-title { font-size: var(--text-md); font-weight: 800; color: var(--pending); }
.reqcard-conflict-asked { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--text-sm); }
.reqcard-conflict-label {
  flex: 0 0 auto; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; font-size: var(--text-xs); color: var(--muted);
}
.reqcard-conflict-val { min-width: 0; color: var(--ink); font-weight: 600; }
.reqcard-conflict-body {
  margin: 0; white-space: pre-wrap; overflow-wrap: break-word;
  font-size: var(--text-md); line-height: 1.55; color: var(--ink-2);
}
/* overriding leaves the requirement no longer purely source-grounded — say so in red */
.reqcard-conflict-warn {
  margin: 0; padding: 7px 11px; border-radius: var(--r-sm);
  background: var(--fail-bg); color: var(--fail);
  font-size: var(--text-sm); font-weight: 600; line-height: 1.45;
}
.reqcard-conflict-note { width: 100%; padding: 8px 11px; font-size: var(--text-sm); }
.reqcard-conflict-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.reqcard-conflict-actions .reqcard-panel-status { flex: 1 1 140px; }
.reqcard-conflict-override { color: var(--fail); border-color: #f2c6c6; background: var(--surface); }
.reqcard-conflict-override:hover:not(:disabled) { background: var(--fail-bg); }

/* IMPACT — cross-artifact fallout, inline under the card that caused it */
.reqcard-impact {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-strong); border-left: 4px solid var(--brand);
  border-radius: var(--r-md); background: var(--surface-2);
}
.reqcard-impact-head { display: flex; align-items: center; gap: var(--sp-2); }
.reqcard-impact-title { font-size: var(--text-md); font-weight: 800; color: var(--ink); }
.reqcard-impact-sub { margin: 0; font-size: var(--text-sm); color: var(--muted); line-height: 1.5; }
.reqcard-impact-all {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.reqcard-impact-list { display: flex; flex-direction: column; gap: 6px; }
.reqcard-impact-row {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: 8px 11px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}
.reqcard-impact-row:hover { border-color: var(--line-strong); }
.reqcard-impact-check { flex: 0 0 auto; margin-top: 3px; }
.reqcard-impact-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reqcard-impact-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.reqcard-impact-key {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--ink);
  overflow-wrap: break-word; word-break: break-word;
}
.reqcard-impact-type {
  text-transform: uppercase; letter-spacing: .06em;
  font-size: var(--text-xs); font-weight: 700; color: var(--muted);
}
.reqcard-impact-sev {
  padding: 1px 8px; border-radius: var(--r-full);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em;
  background: var(--surface-3); color: var(--muted);   /* default for an unknown severity */
}
.reqcard-impact-sev--high   { background: var(--fail-bg);    color: var(--fail); }
.reqcard-impact-sev--medium { background: var(--pending-bg); color: var(--pending); }
.reqcard-impact-sev--low    { background: var(--surface-3);  color: var(--muted); }
.reqcard-impact-reason { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.45; }
.reqcard-impact-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.reqcard-impact-foot .reqcard-panel-status { flex: 1 1 120px; }

/* ---------- full INVEST story cards (PART 4) ---------- */
.storycard-idlabel {
  text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; font-size: var(--text-xs); color: var(--muted);
}
.storycard-title {
  margin: 0; font-size: var(--text-lg); font-weight: 800;
  letter-spacing: -.01em; line-height: 1.35; color: var(--ink);
}
.storycard-lines {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-3); background: var(--surface-2);
  border-left: 3px solid var(--brand); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.storycard-line { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--text-md); line-height: 1.55; }
.storycard-line-label { flex: 0 0 auto; min-width: 54px; font-weight: 700; color: var(--brand-strong); }
.storycard-line-text { min-width: 0; color: var(--ink); }
.storycard-sec { display: flex; flex-direction: column; gap: 4px; }
.storycard-sec-title {
  text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; font-size: var(--text-xs); color: var(--muted);
}
.storycard-list {
  margin: 0; padding-left: var(--sp-5);
  font-size: var(--text-md); line-height: 1.55; color: var(--ink-2);
}
.storycard-list li { margin-bottom: 3px; }
.storycard-list li:last-child { margin-bottom: 0; }
.storycard-list--num { list-style: decimal; }

/* ---------- figma-digest fallback label (PART 3) ---------- */
.source-digest-label {
  display: inline-block; margin-bottom: 6px; padding: 5px 11px;
  border: 1px solid #f0dfb0; border-radius: var(--r-full);
  background: var(--pending-bg); color: var(--pending);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em;
}
.source-digest-sub { margin: 0 0 var(--sp-4); font-size: var(--text-sm); color: var(--muted); line-height: 1.5; }
.source-digest-body { font-size: var(--text-md); line-height: 1.6; }
.source-digest-body > :first-child { margin-top: 0; }

/* ---------- docked composer ---------- */
.composer {
  padding: var(--sp-4) var(--sp-6);
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(15, 27, 45, .04);
}
.composer-inner {
  max-width: var(--measure); margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.verdict { display: flex; gap: var(--sp-2); align-items: center; min-height: 1.2em; }
.feedback { display: flex; gap: var(--sp-2); align-items: center; }
.feedback .field { flex: 1; min-width: 0; }
.status-line { margin-left: auto; font-size: var(--text-sm); color: var(--muted); text-align: right; }

/* ---- feedback turns in the thread ---- */
.turn-agent + .turn-feedback, .turn-feedback + .turn-agent { margin-top: var(--sp-5); }
.turn-agent + .turn-agent { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.turn-feedback {
  display: block; max-width: var(--measure); margin: var(--sp-5) auto;
  padding: 10px 14px; border: 1px solid var(--line-strong); border-left: 3px solid var(--brand);
  border-radius: var(--r-md); background: var(--surface-2);
}
.turn-feedback-label {
  display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.turn-feedback-text { color: var(--ink-2); font-size: var(--text-md); line-height: 1.5; white-space: pre-wrap; }

/* ---- admin-only affordances (role-aware) ---- */
.admin-only { display: none; }
.app[data-role="admin"] .admin-only { display: flex; }
.rail-admin {
  align-items: center; gap: 8px; width: 100%; margin-bottom: var(--sp-3);
  padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--ink-2); cursor: pointer; font: inherit;
  font-size: var(--text-sm); font-weight: 600; text-align: left;
}
.rail-admin:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
.rail-admin-icon { font-size: 15px; line-height: 1; }
.admin-note { margin: 0 0 var(--sp-3); font-size: var(--text-xs); color: var(--muted); }

/* ---------- admin config modal (admin-only) ---------- */
.admin-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--sp-6); }
/* Hold the page still while a dialog is open. `overscroll-behavior: contain` on each scroll
   container already stops the wheel chaining outward, so this is the second line rather than
   the first -- which matters, because a browser without :has() support simply keeps the
   behaviour the containment already gives it. */
body:has(.admin-modal:not([hidden])) { overflow: hidden; }
.admin-overlay { position: absolute; inset: 0; background: rgba(15, 27, 45, .42); }
.admin-dialog {
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: 720px; max-height: calc(100vh - 2 * var(--sp-6));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  animation: cardIn .22s cubic-bezier(.2,.7,.3,1);
}
.admin-head {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6) var(--sp-4); border-bottom: 1px solid var(--line);
}
.admin-head-text { flex: 1 1 auto; min-width: 0; }
.admin-title { margin: 0 0 4px; font-size: var(--text-xl); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.admin-desc { margin: 0; font-size: var(--text-sm); color: var(--muted); line-height: 1.5; }
.admin-head .source-close { flex: 0 0 auto; }
.admin-banner {
  margin: var(--sp-4) var(--sp-6) 0; padding: 9px 13px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--ink-2);
  font-size: var(--text-sm); font-weight: 600;
}
.admin-banner.is-ok   { border-color: #bfe3cc; background: var(--ok-bg);   color: var(--ok); }
.admin-banner.is-fail { border-color: #f2c6c6; background: var(--fail-bg); color: var(--fail); }
.admin-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.admin-empty { margin: 0; padding: var(--sp-4) 0; font-size: var(--text-md); color: var(--muted); }
.admin-agent {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface-2); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.admin-agent-head { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.admin-agent-name {
  margin: 0; flex: 1 1 auto; min-width: 0; font-family: var(--font-mono);
  font-size: var(--text-md); font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-agent-model { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.admin-agent-model > span { font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.admin-select { width: auto; min-width: 130px; padding: 7px 10px; font-size: var(--text-sm); cursor: pointer; }
.admin-textarea {
  width: 100%; min-height: 150px; resize: vertical; line-height: 1.55;
  font-family: var(--font-mono); font-size: 13px;
}
.admin-agent-foot { display: flex; align-items: center; gap: var(--sp-3); }
.admin-agent-status { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); color: var(--muted); }
.admin-agent-status.is-ok   { color: var(--ok); font-weight: 600; }
.admin-agent-status.is-fail { color: var(--fail); font-weight: 600; }
.admin-save { flex: 0 0 auto; }
.admin-foot {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--line);
}
.admin-foot-note { font-size: var(--text-xs); color: var(--muted); }
.admin-foot .btn-ghost { color: var(--fail); border-color: #f2c6c6; }
.admin-foot .btn-ghost:hover:not(:disabled) { background: var(--fail-bg); border-color: var(--fail); }
@media (max-width: 720px) {
  .admin-modal { padding: 0; }
  .admin-dialog { max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; border: 0; }
  .admin-agent-head { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .admin-dialog { animation: none; } }

/* ---------- RIGHT source panel ---------- */
.source {
  flex: 0 0 clamp(360px, 40%, 640px); min-width: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border-left: 1px solid var(--line);
}
.source:not([hidden]) { animation: sourceIn .18s ease; }
@keyframes sourceIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.source-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.source-title { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.source-close {
  width: 30px; height: 30px; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  font-size: 14px; line-height: 1; display: grid; place-items: center;
}
.source-close:hover { background: var(--surface-3); }
.source-body { flex: 1 1 auto; overflow: auto; padding: 16px 18px; }
.source-img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.source-frame { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.source-caption { margin-top: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.source-loading { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: var(--text-md); color: var(--muted); }
.source-empty-title { margin-bottom: 6px; font-weight: 700; color: var(--ink); }
.source-empty-msg { margin: 0 0 12px; font-size: var(--text-md); line-height: 1.55; color: var(--muted); }
.source-ref {
  display: inline-block; font-family: var(--font-mono); font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 4px 8px; color: var(--ink-2); word-break: break-all;
}
.source-body .link { display: inline-block; margin-top: 12px; }

/* ---------- pills + buttons + inputs ---------- */
.pill {
  display: inline-block; padding: 3px 8px; border-radius: var(--r-full);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.pill-ok      { background: var(--ok-bg);      color: var(--ok); }
.pill-fail    { background: var(--fail-bg);    color: var(--fail); }
.pill-pending { background: var(--pending-bg); color: var(--pending); }
.pill-neutral { background: var(--surface-3);  color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 600; font-size: var(--text-md); line-height: 1.1;
  border: 1px solid transparent; border-radius: var(--r-md); padding: 9px 16px; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-lg { padding: 12px 22px; font-size: var(--text-base); border-radius: var(--r-lg); }
.btn-brand   { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-brand:hover:not(:disabled)   { background: var(--brand-strong); }
.btn-approve { background: var(--ok); color: #fff; }
.btn-approve:hover:not(:disabled) { background: #0f6533; }
.btn-reject  { background: #fff; color: var(--fail); border-color: #f2c6c6; }
.btn-reject:hover:not(:disabled)  { background: var(--fail-bg); }
.btn-ghost   { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover:not(:disabled)   { background: var(--surface-3); }

.field {
  font: inherit; font-size: var(--text-md); width: 100%;
  padding: 10px 13px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: #fff; color: var(--ink);
  transition: border-color .12s, box-shadow .12s;
}
.field-lg { padding: 13px 16px; font-size: var(--text-lg); border-radius: var(--r-lg); }
.field::placeholder { color: var(--faint); }
.field:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }

.link { color: var(--brand); text-decoration: none; font-weight: 600; font-size: 13px; }
.link:hover { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .source {
    position: fixed; inset: 0; z-index: 60;
    flex-basis: auto; width: 100%; border-left: 0;
  }
  .source-frame { height: 78vh; }
}
@media (max-width: 720px) {
  .app { flex-direction: column; height: auto; min-height: 100vh; overflow: visible; }
  .rail {
    flex-basis: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px;
    border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 16px; overflow: visible;
  }
  .rail-new { width: auto; margin-left: auto; }
  .rail-section, .rail-foot { display: none; }
  .thread { overflow: visible; }
  .thread-body, .hero { overflow: visible; }
  .thread-head-inner, .thread-body, .composer, .hero { padding-left: 16px; padding-right: 16px; }
  .hero-title { font-size: var(--text-2xl); }
  .hero-input { flex-direction: column; }
  .status-line { margin-left: 0; text-align: left; }
  .signin-card { padding: var(--sp-6); }
  /* refinement panels: stack their action rows so nothing gets squeezed off-card */
  .reqcard-conflict, .reqcard-impact { padding: var(--sp-3); }
  .reqcard-conflict-actions, .reqcard-impact-foot { align-items: stretch; flex-direction: column; }
  .reqcard-conflict-actions .reqcard-panel-status,
  .reqcard-impact-foot .reqcard-panel-status { flex: 0 0 auto; }
  .reqcard-hwhen { margin-left: 0; }
  .storycard-line-label { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .source:not([hidden]), .signin-card { animation: none; }
  .btn, .field, .cite, .persona, .chip { transition: none; }
  .spinner { animation-duration: 2s; }
  .skel, .persona-skel { animation: none; }
}

/* ---------- projects & sources ---------- */
#projectsPanel .admin-dialog { max-width: 1160px; }
/* Reuses the admin modal shell (.admin-modal / .admin-dialog / .admin-banner) so the panel
   inherits its overlay, sizing and focus treatment; only the inner layout is new. */

.rail-projects {
  width: 100%;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 8px;
}

.proj-layout {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: var(--space-5, 20px);
  padding: var(--space-5, 20px);
  align-items: stretch;
  /* The grid holds the height; each column scrolls on its own.
     Two faults sat here. The layout had no scroll container at all, so at 1280x720 it grew to
     693px inside a 562px dialog -- the last controls, "Save destinations" among them, painted
     outside the white card and could not be reached, and the wheel passed straight through to
     the page behind. Scrolling the whole grid fixed reachability but scrolled the project list
     away with it, leaving an empty column and the detail sliding under a heading that no longer
     matched. Columns scroll separately so the list stays put while the detail moves. */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 760px) {
  .proj-layout { grid-template-columns: 1fr; }
}

.proj-side {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}

.proj-heading,
.proj-subhead {
  font-size: var(--text-xs, 11.5px);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin: 0 0 6px;
}

.proj-subhead { margin-top: 18px; display: flex; align-items: center; gap: 8px; }

.proj-count {
  background: var(--surface-3);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: var(--text-xs, 11.5px);
  color: var(--ink-2);
  letter-spacing: 0;
}

.proj-list { display: flex; flex-direction: column; gap: 4px; }

.proj-item {
  display: grid;
  gap: 1px;
  text-align: left;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.proj-item:hover { background: var(--surface-2); }
.proj-item.is-on { background: var(--brand-tint); border-color: var(--brand-tint-2); }
.proj-item-name { font-size: var(--text-sm, 12.5px); color: var(--ink); }
.proj-item-id { font-family: var(--font-mono); font-size: var(--text-xs, 11.5px); color: var(--muted); }
.proj-item-meta { font-size: var(--text-xs, 11.5px); color: var(--faint); }

.proj-new {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.proj-label {
  font-size: var(--text-xs, 11.5px);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
}

.proj-id { font-family: var(--font-mono); font-size: var(--text-sm, 12.5px); }
.proj-hint { margin: 0; font-size: var(--text-xs, 11.5px); color: var(--faint); line-height: 1.45; }

.proj-detail { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.proj-detail-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.proj-detail-head h3 { margin: 0; font-size: var(--text-lg, 15px); color: var(--ink); }
.proj-empty { color: var(--muted); font-size: var(--text-sm, 12.5px); margin: 6px 0; }

/* Drop target. The input is stretched over the whole zone rather than hidden, so a click
   anywhere opens the picker natively and keyboard focus lands somewhere real. */
.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 26px 18px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--surface-2);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}

.dropzone:hover,
.dropzone:focus-visible { border-color: var(--brand); background: var(--brand-tint); }
.dropzone.is-over { border-color: var(--brand); background: var(--brand-tint-2); }
.dropzone.is-busy { opacity: .6; pointer-events: none; }
.dropzone b { font-size: var(--text-sm, 12.5px); color: var(--ink); }
.dropzone span { font-size: var(--text-xs, 11.5px); color: var(--muted); }

.dropzone-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.ingest-feed {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-3);
  max-height: 168px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs, 11.5px);
  line-height: 1.6;
}

.ingest-line { margin: 0; color: var(--ink-2); }
.ingest-line.is-warn { color: var(--pending); }
.ingest-line.is-error { color: var(--fail); }
.ingest-line.is-done { color: var(--ok); }

.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

/* The filename is the thing the reader is looking for, so it keeps a floor of ~140px and the
   reason column gives way instead. A long extractor message ("Stream has ended unexpectedly")
   would otherwise squeeze the name down to "broken…", hiding which file actually failed. */
.doc-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, auto) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--surface-2);
}

.doc-row.is-bad { background: var(--fail-bg); }

.doc-name {
  font-size: var(--text-sm, 12.5px);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-meta {
  font-size: var(--text-xs, 11.5px);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.doc-row.is-bad .doc-meta { color: var(--fail); }

.doc-del {
  border: 0;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 5px;
  line-height: 1;
}

.doc-del:hover { color: var(--fail); background: var(--fail-bg); }

.admin-banner.is-ok   { background: var(--ok-bg);   color: var(--ok); }
.admin-banner.is-bad  { background: var(--fail-bg); color: var(--fail); }

/* Project selector on the hero. Sits under the feature input rather than beside it: the feature
   is what you type, the project is what you pick, and pairing them on one line made the input
   read as two halves of one field. */
.hero-project {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.hero-project label {
  font-size: var(--text-xs, 11.5px);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
}

.hero-project-select { max-width: 320px; }

.hero-project-note {
  font-size: var(--text-xs, 11.5px);
  color: var(--faint);
}

/* Which project a review was drafted for, shown beside its title. Without it a published set
   gives no clue which product's Jama project it went to. */
.thread-project {
  font-size: var(--text-xs, 11.5px);
  color: var(--eng);
  background: var(--eng-bg);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.proj-targets { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; }
.proj-targets-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.proj-targets .field { font-family: var(--font-mono); font-size: var(--text-sm, 12.5px); }

@media (max-width: 640px) {
  .proj-targets-grid { grid-template-columns: 1fr; }
}

/* ---------- extracted content reader ---------- */
/* What the agents actually read, and where a person can correct it. Monospace for the extracted
   text specifically: it is a machine's rendering of a document, and setting it in prose type
   invites reading it as if it were the document. */

.chunk-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.chunk-previews { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.chunk-preview { margin: 0; flex: 1 1 180px; max-width: 280px; min-width: 0; }
.chunk-preview.is-page { flex-basis: 100%; max-width: 100%; }
.chunk-preview img { display: block; width: 100%; max-height: 480px; object-fit: contain; background: white; border: 1px solid var(--line); border-radius: 6px; }
.chunk-preview figcaption { margin-top: 4px; color: var(--muted); font-size: var(--text-xs, 11.5px); }

.chunk {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  background: var(--surface);
}

.chunk.is-corrected { border-color: var(--ok); background: var(--ok-bg); }

.chunk-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.chunk-title { font-size: var(--text-sm, 12.5px); color: var(--ink); }
.chunk-flags { font-size: var(--text-xs, 11.5px); color: var(--faint); }

.chunk-badge {
  margin-left: auto;
  font-size: var(--text-xs, 11.5px);
  color: var(--ok);
  background: var(--surface);
  border: 1px solid var(--ok);
  border-radius: 999px;
  padding: 1px 8px;
}

.chunk-text {
  margin: 0 0 8px;
  padding: 9px 11px;
  background: var(--surface-2);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs, 11.5px);
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow-y: auto;
}

.chunk-caption {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0 0 8px;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--design-bg);
  color: var(--design);
  font-size: var(--text-xs, 11.5px);
  line-height: 1.55;
}

.chunk-fix { display: flex; flex-direction: column; gap: 5px; }
.chunk-input { font-size: var(--text-sm, 12.5px); resize: vertical; }
.chunk-actions { display: flex; align-items: center; gap: 10px; }
.chunk-by { font-size: var(--text-xs, 11.5px); color: var(--muted); }

.chunk-cite {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs, 11.5px);
  color: var(--faint);
  word-break: break-all;
}

/* The filename doubles as the way into the reader. */
.doc-open {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  text-align: left;
  color: var(--brand);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color .15s ease;
}

.doc-open:hover, .doc-open:focus-visible { text-decoration-color: currentColor; }

/* Trust tier. Prominent because it decides whether this document competes with the product's
   own material in every search, and it is assigned by a filename glob that cannot recognise a
   part number. */
.doc-class-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  margin-top: 10px;
  border-radius: 9px;
  background: var(--surface-2);
}

.doc-class-select { max-width: 180px; font-family: var(--font-mono); font-size: var(--text-sm, 12.5px); }
.doc-class-note { margin: 0; }

@media (max-width: 700px) {
  .doc-class-row { grid-template-columns: 1fr; }
}

/* ---------- review: the compact entry point left in the thread ---------- */
/* Leads with what passed. The old panel opened with the run's worst number, so a set where 37
   of 40 requirements passed announced itself as a failure. */

.review-entry { margin: 14px 0 4px; }

.review-entry-btn {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}

.review-entry-btn:hover { border-color: var(--brand); background: var(--brand-tint); }
.review-entry-btn.is-unscored { color: var(--muted); justify-content: center; }

.re-counts { display: flex; align-items: baseline; gap: 8px; }
.re-count { font-size: var(--text-sm, 12.5px); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.re-sep { color: var(--faint); }
.re-go { margin-left: auto; font-size: var(--text-sm, 12.5px); color: var(--brand); white-space: nowrap; }

/* ---------- the review page ---------- */

.rv-dialog { max-width: 1040px; width: 94vw; }
.rv-body { padding: var(--space-5, 20px); overflow-y: auto; overscroll-behavior: contain; }

.rv-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
  overflow-x: auto;
}

.rv-tab {
  border: 0;
  background: transparent;
  padding: 9px 14px;
  font: inherit;
  font-size: var(--text-sm, 12.5px);
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.rv-tab:hover { color: var(--ink); }
.rv-tab.is-on { color: var(--brand); border-bottom-color: var(--brand); }
.rv-tab-n {
  margin-left: 6px;
  background: var(--surface-3);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: var(--text-xs, 11.5px);
}

.rv-section-label {
  font-size: var(--text-xs, 11.5px);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin: 0 0 10px;
}

/* start, not stretch: the confidence card is short and was being pulled to the height of
   the gates list, leaving a block of dead space under the meter. */
.rv-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
@media (max-width: 820px) { .rv-hero { grid-template-columns: 1fr; } }

.rv-conf, .rv-gates {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--surface);
}

.rv-conf-label { font-size: var(--text-xs, 11.5px); color: var(--muted); }
.rv-conf-score { font-size: 46px; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--ink); }
.rv-conf-score sup { font-size: 18px; color: var(--muted); }
.rv-conf-score.is-ok { color: var(--ok); }
.rv-conf-score.is-warn { color: var(--pending); }
.rv-conf-score.is-bad { color: var(--fail); }
.rv-conf-verdict { font-size: var(--text-sm, 12.5px); margin-bottom: 14px; }
.rv-conf-verdict.is-ok { color: var(--ok); }
.rv-conf-verdict.is-warn { color: var(--pending); }
.rv-conf-verdict.is-bad { color: var(--fail); }

.rv-meter { position: relative; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.rv-meter-fill { height: 100%; border-radius: 999px; }
.rv-meter-fill.is-ok { background: var(--ok); }
.rv-meter-fill.is-warn { background: var(--pending); }
.rv-meter-fill.is-bad { background: var(--fail); }
.rv-tick { position: absolute; top: 0; width: 1px; height: 100%; background: var(--surface); }
.rv-ticks { display: flex; justify-content: space-between; margin-top: 5px; font-size: var(--text-xs, 11.5px); color: var(--faint); }

.rv-gates-head { font-size: var(--text-sm, 12.5px); color: var(--ink-2); margin-bottom: 9px; }
.rv-gate { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 6px 0; border-top: 1px solid var(--line); }
.rv-gate:first-of-type { border-top: 0; }
.rv-gate-icon { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; color: #fff; }
.rv-gate.is-ok .rv-gate-icon { background: var(--ok); }
.rv-gate.is-miss .rv-gate-icon { background: var(--pending); }
.rv-gate-label { font-size: var(--text-sm, 12.5px); color: var(--ink-2); }
.rv-gate-val { font-size: var(--text-sm, 12.5px); text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.rv-gate-pct { display: block; font-size: var(--text-xs, 11.5px); color: var(--faint); }

.rv-dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.rv-dim-group { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
.rv-dim-group h4 { margin: 0 0 10px; font-size: var(--text-sm, 12.5px); color: var(--ink); }
.rv-dim-group h4 span { color: var(--faint); font-weight: 400; }
.rv-dim { display: grid; grid-template-columns: 1fr 90px 28px; align-items: center; gap: 9px; padding: 4px 0; }
.rv-dim-name { font-size: var(--text-xs, 11.5px); color: var(--ink-2); }
.rv-dim-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.rv-dim-fill { display: block; height: 100%; }
.rv-dim-fill.is-ok { background: var(--ok); }
.rv-dim-fill.is-warn { background: var(--pending); }
.rv-dim-fill.is-bad { background: var(--fail); }
.rv-dim-val { font-size: var(--text-xs, 11.5px); text-align: right; font-variant-numeric: tabular-nums; }
.rv-dim-val.is-ok { color: var(--ok); }
.rv-dim-val.is-warn { color: var(--pending); }
.rv-dim-val.is-bad { color: var(--fail); }

/* Pass/advisory/blocked as one proportional bar: the shape says how the set is doing before
   any number is read. */
.rv-mix { display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.rv-mix-seg.is-ok { background: var(--ok); }
.rv-mix-seg.is-warn { background: var(--pending); }
.rv-mix-seg.is-bad { background: var(--fail); }
.rv-mix-key { display: flex; gap: 16px; margin: 7px 0 14px; font-size: var(--text-xs, 11.5px); }
.rv-mix-key .is-ok { color: var(--ok); }
.rv-mix-key .is-warn { color: var(--pending); }
.rv-mix-key .is-bad { color: var(--fail); }

.rv-rows { display: flex; flex-direction: column; gap: 2px; }
.rv-row { display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(0, auto) 42px; align-items: center; gap: 12px; padding: 8px 11px; border-radius: 9px; background: var(--surface-2); }
.rv-row.is-bad { background: var(--fail-bg); }
.rv-row.is-warn { background: var(--pending-bg); }
.rv-row-key { font-family: var(--font-mono); font-size: var(--text-xs, 11.5px); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.rv-row-title { font-size: var(--text-sm, 12.5px); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-row-weak { font-size: var(--text-xs, 11.5px); color: var(--fail); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-row-weak.is-clean { color: var(--faint); }
.rv-row-score { font-size: var(--text-sm, 12.5px); text-align: right; font-variant-numeric: tabular-nums; }
.rv-row-score.is-ok { color: var(--ok); }
.rv-row-score.is-warn { color: var(--pending); }
.rv-row-score.is-bad { color: var(--fail); }

@media (max-width: 760px) {
  .rv-row { grid-template-columns: 1fr auto; }
  .rv-row-title, .rv-row-weak { grid-column: 1 / -1; white-space: normal; }
}

.rv-gaps { display: flex; flex-direction: column; gap: 8px; }
.rv-gap { display: grid; grid-template-columns: auto 1fr; gap: 11px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.rv-gap.is-high { border-left: 3px solid var(--fail); }
.rv-gap.is-medium { border-left: 3px solid var(--pending); }
.rv-gap-sev { font-size: var(--text-xs, 11.5px); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rv-gap-kind { display: block; font-size: var(--text-xs, 11.5px); color: var(--faint); }
.rv-gap-title { display: block; font-size: var(--text-sm, 12.5px); color: var(--ink); }
.rv-gap-detail { display: block; font-size: var(--text-xs, 11.5px); color: var(--muted); margin-top: 2px; }

.rv-trend { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: var(--surface); color: var(--brand); }
.rv-trend-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.rv-trend-head h4 { margin: 0; font-size: var(--text-sm, 12.5px); color: var(--ink); }
.rv-trend-delta { font-size: var(--text-xs, 11.5px); }
.rv-trend-delta.is-up { color: var(--ok); }
.rv-trend-delta.is-down { color: var(--fail); }
.rv-trend-delta.is-flat { color: var(--muted); }
.rv-spark { width: 100%; height: 110px; display: block; overflow: visible; }
.rv-spark-rule { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.rv-spark-rule-label { fill: var(--faint); font-size: 9px; font-family: var(--font-sans); }
.rv-spark circle { fill: currentColor; }
.rv-trend-scale { display: flex; justify-content: space-between; font-size: var(--text-xs, 11.5px); color: var(--faint); font-variant-numeric: tabular-nums; }

.rv-empty { color: var(--muted); font-size: var(--text-sm, 12.5px); padding: 20px 0; margin: 0; line-height: 1.6; }
.rv-note { margin-top: 10px; font-size: var(--text-xs, 11.5px); color: var(--pending); line-height: 1.55; }
.rv-foot { margin-top: 16px; font-size: var(--text-xs, 11.5px); color: var(--faint); }

/* A score whose artifact has changed since it was computed. Deliberately not coloured like a
   verdict: it is not a judgement any more, it is a note that one is being recomputed. */
.qchip.is-stale {
  background: var(--surface-3);
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  text-decoration: line-through;
  text-decoration-color: var(--faint);
}

.qpanel-stale {
  margin: 6px 0 0;
  font-size: var(--text-xs, 11.5px);
  color: var(--muted);
  font-style: italic;
}

.rv-stale-note {
  margin: 0 0 14px;
  padding: 9px 13px;
  border-radius: 9px;
  background: var(--surface-3);
  border: 1px dashed var(--line-strong);
  color: var(--ink-2);
  font-size: var(--text-xs, 11.5px);
  line-height: 1.55;
}

.rv-row.is-stale { background: var(--surface-3); opacity: .8; }
.rv-row-weak.is-stale { color: var(--muted); font-style: italic; }
.rv-row-score.is-stale { color: var(--muted); text-decoration: line-through; }

/* ---------- review criteria (the rubric editor) ---------- */

.rb-meta {
  display: flex;
  gap: 16px;
  font-size: var(--text-xs, 11.5px);
  color: var(--muted);
  margin-bottom: 16px;
}

.rb-group {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px 17px;
  margin-bottom: 14px;
  background: var(--surface);
}

.rb-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rb-group-head h3 { margin: 0 0 8px; font-size: var(--text-sm, 12.5px); color: var(--ink); }

/* The running total, live. Weights must sum to 100 and the server refuses anything else --
   finding that out by submitting is a poor way to learn a rule. */
.rb-total {
  font-size: var(--text-xs, 11.5px);
  font-variant-numeric: tabular-nums;
  padding: 2px 9px;
  border-radius: 999px;
}
.rb-total.is-ok { background: var(--ok-bg); color: var(--ok); }
.rb-total.is-bad { background: var(--fail-bg); color: var(--fail); }

.rb-hint { margin: 0 0 11px; font-size: var(--text-xs, 11.5px); color: var(--muted); line-height: 1.55; }

.rb-thresholds { display: flex; gap: 18px; flex-wrap: wrap; }
.rb-thresholds label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--text-xs, 11.5px); color: var(--muted);
}
.rb-thresholds input { width: 110px; font-variant-numeric: tabular-nums; }

.rb-dim-head,
.rb-dim {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 84px 30px;
  gap: 8px;
  align-items: center;
}

.rb-dim-head {
  font-size: var(--text-xs, 11.5px);
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 0 2px 4px;
}

.rb-dim { padding: 7px 0; border-top: 1px solid var(--line); }
.rb-key { font-family: var(--font-mono); font-size: var(--text-xs, 11.5px); }
.rb-weight { text-align: right; font-variant-numeric: tabular-nums; }
.rb-guidance { grid-column: 1 / -1; resize: vertical; font-size: var(--text-xs, 11.5px); line-height: 1.5; }

.rb-del {
  border: 0; background: transparent; color: var(--faint);
  cursor: pointer; padding: 3px 5px; border-radius: 5px; line-height: 1;
}
.rb-del:hover { color: var(--fail); background: var(--fail-bg); }

.rb-add { margin-top: 10px; }
.rb-standards { width: 100%; font-family: var(--font-mono); font-size: var(--text-xs, 11.5px); line-height: 1.6; resize: vertical; }

/* Every reason the server would refuse, listed together -- fixing one should not reveal the
   next one at a time. */
.rb-problems {
  border: 1px solid #f2c6c6;
  background: var(--fail-bg);
  color: var(--fail);
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 12px;
  font-size: var(--text-sm, 12.5px);
}
.rb-problems ul { margin: 6px 0 0; padding-left: 18px; }
.rb-problems li { margin: 3px 0; }

.rb-warn {
  border: 1px solid #f0dcae;
  background: var(--pending-bg);
  color: var(--pending);
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 12px;
  font-size: var(--text-xs, 11.5px);
  line-height: 1.55;
}

.rb-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }

@media (max-width: 720px) {
  .rb-dim-head { display: none; }
  .rb-dim { grid-template-columns: 1fr 1fr; }
  .rb-weight, .rb-del { grid-column: auto; }
}

/* Repository ingestion. Deliberately a URL field and nothing else: a repository credential
   typed into a browser ends up in a request log and in the database, so the token lives in
   server-side config and the form cannot carry one. */
.repo-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.repo-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 8px; }
.repo-branch { font-family: var(--font-mono); font-size: var(--text-sm, 12.5px); }

.repo-warn {
  margin: 0;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--pending-bg);
  color: var(--pending);
  font-size: var(--text-xs, 11.5px);
  line-height: 1.55;
}

@media (max-width: 700px) {
  .repo-row { grid-template-columns: 1fr; }
}

/* Deleting a project. The button opens a confirmation; the typed id is what actually confirms.
   Kept visually quiet until then -- a destructive control that shouts is one people learn to
   click past. */
.proj-delete {
  margin-left: auto;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--text-xs, 11.5px);
  padding: 4px 10px;
  border-radius: 7px;
  cursor: pointer;
}

.proj-delete:hover { border-color: var(--fail); color: var(--fail); background: var(--fail-bg); }

.proj-danger {
  border: 1px solid #f2c6c6;
  background: var(--fail-bg);
  border-radius: 11px;
  padding: 13px 15px;
  margin-bottom: 14px;
}

.proj-danger b { color: var(--fail); font-size: var(--text-sm, 12.5px); }
.proj-danger p { margin: 5px 0 11px; font-size: var(--text-xs, 11.5px); color: var(--ink-2); line-height: 1.55; }
.proj-danger code { font-family: var(--font-mono); background: var(--surface); padding: 1px 5px; border-radius: 4px; }
.proj-danger-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.proj-danger-row .field { font-family: var(--font-mono); font-size: var(--text-sm, 12.5px); }

.btn-danger {
  background: var(--fail);
  color: #fff;
  border: 1px solid var(--fail);
}
.btn-danger:disabled { opacity: .45; cursor: not-allowed; }
.btn-danger:not(:disabled):hover { background: #a81f1f; }

@media (max-width: 640px) {
  .proj-danger-row { grid-template-columns: 1fr; }
}

/* An unscored set needs somewhere to go. The previous copy said "score it" and offered no
   control, which is an instruction without an action. */
.rv-unscored { padding: 22px 0; max-width: 52ch; }
.rv-unscored p { margin: 0 0 14px; font-size: var(--text-sm, 12.5px); color: var(--muted); line-height: 1.6; }
.rv-unscored-note { margin: 10px 0 0 !important; font-size: var(--text-xs, 11.5px) !important; color: var(--faint) !important; }

.story-coverage { margin: 8px 0 16px; overflow-wrap: anywhere; }
.story-coverage .storyset-error { white-space: pre-wrap; }

/* Per-action LLM accounting */
.llm-cost { margin: 12px 0; font-size: .88rem; color: #475569; }
.llm-cost summary { cursor: pointer; }
.llm-cost table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.llm-cost th, .llm-cost td { text-align: left; padding: 6px 10px; border-bottom: 1px solid #e2e8f0; }
.llm-cost-table { max-width: 100%; overflow-x: auto; }
.llm-cost-table table { overflow-wrap: normal; }
.llm-cost-table td { white-space: nowrap; }
.llm-cost-table:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.llm-cost h4 { margin: 12px 0 4px; overflow-wrap: anywhere; }
.llm-cost-total { padding: 12px 16px; border: 1px solid #e2e8f0; border-radius: 10px; }