/* Project page - additional styles on top of dashboard.css */

.project-header {
  padding: 32px 6vw 36px;
}

.header-inner--project {
  display: block;
}

.breadcrumb {
  margin-bottom: 18px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.breadcrumb-spacer { flex: 1; }

.breadcrumb-link-right {
  color: white;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.03em;
  transition: background 0.15s ease;
}
.breadcrumb-link-right:hover { background: rgba(255, 255, 255, 0.28); }

.breadcrumb a {
  color: white;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: border-color 0.15s ease;
}
.breadcrumb a:hover { border-color: white; }

.breadcrumb-divider {
  margin: 0 10px;
  opacity: 0.5;
}

.project-header-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 32px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.project-code-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 6px 12px;
  border-radius: 8px;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}

.project-header h1 {
  font-size: clamp(28px, 3.5vw, 44px);
  margin: 0 0 14px;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.project-header .subtitle {
  margin: 0;
  font-size: 15px;
  color: #cbd5e1;
  line-height: 1.6;
}

/* score strip in header */

.score-strip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  padding: 16px 18px;
  backdrop-filter: blur(14px);
  display: grid;
  gap: 12px;
}

.score-strip-item {
  display: grid;
  grid-template-columns: 80px 1fr 36px;
  align-items: center;
  gap: 12px;
}

.score-strip-name {
  font-size: 13px;
  color: #dbeafe;
}

.score-strip-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  order: 3;
}

.score-strip-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
  order: 2;
}

/* The strip folds after the third model - it sits on the dark header, so
   the summary borrows the header's own light-on-dark palette. */
.strip-more {
  margin-top: 2px;
  display: grid;
  gap: 12px;
}
.strip-more > summary {
  font-size: 12px;
  font-weight: 600;
  color: #dbeafe;
  opacity: 0.85;
  padding: 4px 0;
}
.strip-more > summary:hover { opacity: 1; }

/* tabs */

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin: 24px 0 28px;
  flex-wrap: wrap;
}

.tab {
  border: none;
  background: transparent;
  padding: 14px 18px;
  font: inherit;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px 8px 0 0;
}

/* All tabs carry the underline element; we just slide/fade it in on
   the active tab so the indicator feels like it moves rather than
   pops. Existing :hover keeps the muted->text color change. */
.tab::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 3px;
  background: var(--blue);
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform var(--t-base) var(--ease-out),
              opacity var(--t-fast) var(--ease-out);
}

.tab:hover { color: var(--text); background: rgba(37, 99, 235, 0.04); }
.tab:hover::after { transform: scaleX(0.35); opacity: 0.35; }

.tab.is-active {
  color: var(--text);
}

.tab.is-active::after {
  transform: scaleX(1);
  opacity: 1;
}

.tab-count {
  font-family: var(--font-mono);
  font-size: 11px;
  background: #eef2ff;
  color: var(--blue);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid rgba(37, 99, 235, 0.12);
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}

.tab.is-active .tab-count {
  background: var(--blue);
  color: #ffffff;
  border-color: var(--blue);
}

.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fadeIn 0.25s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* layouts */

.two-col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

@media (max-width: 900px) {
  .project-header-grid,
  .two-col {
    grid-template-columns: 1fr;
  }
}

.prose {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}

.muted {
  color: var(--muted);
  font-size: 13px;
  margin-top: -4px;
  margin-bottom: 14px;
}

.empty {
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: 32px;
  background: #f8fafc;
  border-radius: 12px;
  margin: 0;
}

/* facts side panel */

.side-heading {
  margin-top: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}

.facts {
  margin: 0;
  display: grid;
  gap: 14px;
}

.facts dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.facts dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

/* research questions list */

.research-questions {
  padding-left: 24px;
  margin: 0;
  display: grid;
  gap: 10px;
}

.research-questions li {
  font-size: 15px;
  line-height: 1.55;
  padding-left: 6px;
}

.research-questions li::marker {
  font-family: var(--font-mono);
  color: var(--blue);
  font-weight: 700;
}

/* tasks */

.task-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 14px;
}

.task-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  background: #ffffff;
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}

.task-card:hover {
  border-color: #cbd5e1;
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.task-placeholder {
  background: repeating-linear-gradient(
    -45deg,
    #fafbfd,
    #fafbfd 12px,
    #f3f6fb 12px,
    #f3f6fb 24px
  );
  border-style: dashed;
}

.task-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.task-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.task-number {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  color: #64748b;
  font-weight: 600;
  margin-right: 8px;
  letter-spacing: 0;
}

.task-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.task-type-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  background: #eef2ff;
  color: var(--blue);
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.task-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.task-status-placeholder { background: #fef3c7; color: #92400e; }
.task-status-draft       { background: #ede9fe; color: #6d28d9; }
.task-status-active      { background: #d1fae5; color: #065f46; }
.task-status-archived    { background: #e5e7eb; color: #4b5563; }

.task-details {
  margin-top: 14px;
  font-size: 13px;
}

.task-details summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 600;
  font-size: 13px;
  user-select: none;
}

.task-details[open] summary {
  margin-bottom: 8px;
}

.task-prompt {
  background: #0f172a;
  color: #e2e8f0;
  padding: 14px 16px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-x: auto;
  margin: 8px 0 0;
}

/* discussion panel - when I want to flag a decision for the PI */

.discussion-panel {
  background: #fff8e1;
  border-color: #fde68a;
  margin-bottom: 18px;
}

.discussion-head {
  margin-bottom: 12px;
}

.discussion-tag {
  display: inline-block;
  background: #f59e0b;
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.discussion-panel p,
.discussion-panel li {
  font-size: 14.5px;
  line-height: 1.6;
  color: #422a08;
}

.discussion-panel p { margin: 0 0 12px; }

.discussion-panel ol {
  padding-left: 22px;
  margin: 0 0 12px;
}

.discussion-panel ol li { margin-bottom: 4px; }

/* collaborations */

.collab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.collab-card {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg, #ffffff, #f9fafb);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.collab-card:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: var(--shadow-soft);
}

.collab-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.collab-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 4px;
}

.collab-pi {
  font-size: 12px;
  color: var(--muted);
}

/* publications */

.pubs {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 12px;
}

.pubs li {
  font-size: 13.5px;
  line-height: 1.55;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  padding: 12px 14px;
  background: #fafbfd;
  border-radius: 10px;
}

.pub-ref {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--blue);
  font-size: 12.5px;
}

.pub-citation { color: #334155; }

/* nav */

.project-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  margin: 32px 0 0;
}

.nav-btn {
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  font-family: var(--font-display);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.project-nav > a:first-child { justify-self: start; }
.project-nav > a:last-child  { justify-self: end; }

.nav-btn:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}

.nav-btn-center {
  background: var(--text);
  color: white;
  border-color: var(--text);
}
.nav-btn-center:hover {
  border-color: var(--text);
  background: #0f172a;
}

/* ---------- task card with "open" button ---------- */

.task-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.task-head-text {
  flex: 1;
  min-width: 0;
}

.task-open-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 999px;
  background: white;
  color: var(--text, #1f2937);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.task-open-btn:hover {
  background: #f8fafc;
  border-color: #1e3a8a;
  color: #1e3a8a;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 6px 16px rgba(37, 99, 235, 0.14);
  transform: translateY(-1px);
}

.task-open-btn:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.55);
  outline-offset: 2px;
}

/* ---------- modal ---------- */

body.modal-open {
  overflow: hidden;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.modal-dialog {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: white;
  border-radius: 20px;
  padding: 32px 36px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.32);
  animation: modal-rise 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes modal-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line, #e5e7eb);
  background: white;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted, #6b7280);
  transition: background 0.15s, color 0.15s;
}

.modal-close:hover {
  background: #f1f5f9;
  color: var(--text, #1f2937);
}

.modal-loading {
  padding: 48px;
  text-align: center;
  color: var(--muted, #6b7280);
  font-size: 15px;
}

.modal-head {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}

.modal-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #6b7280);
  margin-bottom: 8px;
}

.modal-dialog h2 {
  margin: 0 0 12px;
  font-size: 26px;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.modal-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.task-copy-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.task-copy-link:hover {
  background: #e2e8f0;
  color: #1e293b;
}
.task-copy-link.is-copied {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.modal-section {
  margin-bottom: 28px;
}

.modal-section h3 {
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.modal-section .muted {
  margin: 0 0 12px;
  font-size: 14px;
}

/* Responses grid: 1 column mobile, 2 columns medium, 3 columns large */

.responses-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 720px) {
  .responses-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .responses-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.response-card {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #fafbfc);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.response-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line, #e5e7eb);
  background: white;
}

.response-model {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: white;
  letter-spacing: 0.02em;
}

.response-score {
  margin-left: auto;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text, #1f2937);
}

.response-score-empty {
  color: var(--muted, #6b7280);
  font-weight: 500;
  font-size: 16px;
  opacity: 0.6;
}

.response-body {
  padding: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text, #1f2937);
  /* Monospace + pre-wrap so space-aligned tables (e.g. "P(car):  0.30")
     line up visually. Most responses contain at least one tabular
     block - a proportional font reads cleaner for the prose lines but
     turns the tabular blocks into a misaligned mess, and the mess is
     more distracting than the slight chunkiness of monospace. */
  font-family: var(--font-mono);
  white-space: pre-wrap;
  word-wrap: break-word;
  flex: 1;
}

/* Inside a response card the empty-state should flow as inline text,
   not as a nested padded box (the global .empty rule above is for
   standalone empty states like full-section placeholders). */
.response-body .empty {
  color: var(--muted, #6b7280);
  font-style: italic;
  font-size: 13px;
  text-align: left;
  padding: 0;
  background: none;
  border-radius: 0;
  display: block;
}

/* The answer, verbatim, one segment per row with a rule between rows so ten
   estimates don't read as one wall of text. Above each row sits the measured
   count for that segment, so the reference is in the same cell as the answer
   and there is nothing to scroll to. */
.answer-lines { display: block; }
.answer-line {
  padding: 9px 0;
  border-bottom: 1px solid #eef2f2;
}
.answer-line:first-child { padding-top: 0; }
.answer-line:last-child { border-bottom: none; }
/* Our header row: segment, the measured count, and how far off. Not the
   model's words, so it is set apart - sans-serif, smaller, its own colours. */
.answer-truth {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-bottom: 4px;
  font-family: var(--font-sans, inherit);
  font-size: 12px;
}
.at-seg {
  font-weight: 600;
  color: #0f172a;
}
.at-measured {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: #065f46;
  background: #d1fae5;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.answer-text { display: block; }
mark.answer-num {
  background: #fef08a;
  color: inherit;
  padding: 0 3px;
  border-radius: 3px;
  font-weight: 700;
}

/* How far off. The chip's text is the meaning; colour reinforces it. */
.acc {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.acc--close { background: #d1fae5; color: #065f46; }
.acc--near  { background: #fef3c7; color: #92400e; }
.acc--off   { background: #fee2e2; color: #991b1b; }
.acc--none { background: #f1f5f9; color: #94a3b8; }

/* The "i" beside a derived number, and its one-paragraph explanation. */
.info-dot {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  background: #fff;
  color: #475569;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: super;
}
.info-dot:hover { border-color: #94a3b8; color: #1e293b; }
.info-pop {
  position: absolute;
  z-index: 1200;
  padding: 12px 14px;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.55;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.28);
}

/* Empty card state - dashed border, lighter fill, so the three cards
   read as 'awaiting evaluation' slots rather than filled gray boxes. */
.response-card--empty {
  background: #fafbfc;
  border-style: dashed;
  border-color: #d1d5db;
}
.response-card--empty .response-head {
  background: transparent;
  border-bottom: 1px dashed #d1d5db;
}
.response-card--empty .response-body {
  min-height: 0;
}

/* ============================================================
   MC comparison table
   ------------------------------------------------------------
   Shown only when the open task has format=multiple_choice.
   Layout mirrors the table the supervisor drew on the whiteboard
   (pic2.jpg):
     QID | Question | Options | Correct | Model_1 | Model_2 | ...
   Picks are coloured green/red against the correct answer so the
   per-question disagreement is readable at a glance.
   ============================================================ */

/* The one question all rows share, when the options are what varies. Sits
   between the summary line and the table, so it reads as the table's stem
   rather than as another muted note. */
.mc-stem {
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: var(--ink, #111827);
}

.mc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  background: white;
}

.mc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
}

.mc-table thead th {
  background: #f9fafb;
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #6b7280);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line, #e5e7eb);
  white-space: nowrap;
}

.mc-table thead th.mc-col-q { white-space: normal; min-width: 220px; }
.mc-table thead th.mc-col-opts { white-space: normal; min-width: 240px; }
.mc-table thead th.mc-col-correct,
.mc-table thead th.mc-col-model { text-align: center; }

.mc-model-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  letter-spacing: 0.02em;
  text-transform: none;
}

.mc-table tbody td {
  padding: 12px;
  vertical-align: top;
  border-bottom: 1px solid var(--line, #e5e7eb);
}

.mc-table tbody tr:last-child td {
  border-bottom: none;
}

.mc-cell-qid {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--muted, #6b7280);
  white-space: nowrap;
}

.mc-cell-q {
  color: var(--text, #1f2937);
  line-height: 1.45;
}

.mc-cell-opts ul.mc-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.mc-cell-opts li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  color: var(--text, #1f2937);
}

.mc-cell-opts li.is-correct {
  font-weight: 600;
}

.mc-cell-opts li.is-correct .mc-letter {
  background: #d1fae5;
  border-color: #34d399;
  color: #065f46;
}

.mc-letter {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #f3f4f6;
  border: 1px solid var(--line, #e5e7eb);
  color: var(--muted, #6b7280);
}

.mc-option-text { line-height: 1.4; }

.mc-cell-correct,
.mc-cell-pick,
.mc-cell-score { text-align: center; }

.mc-pick {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 15px;
  border: 1px solid transparent;
}

.mc-pick--correct {
  background: #ecfdf5;
  border-color: #34d399;
  color: #065f46;
}

.mc-pick--ok {
  background: #16a34a;
  color: white;
  border-color: #16a34a;
  box-shadow: 0 1px 0 rgba(22, 163, 74, 0.25);
}

.mc-pick--bad {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
  box-shadow: 0 1px 0 rgba(220, 38, 38, 0.25);
}

.mc-pick--missing {
  color: var(--muted, #6b7280);
  background: #f9fafb;
  border-color: var(--line, #e5e7eb);
  font-weight: 600;
}

.mc-table tfoot td {
  padding: 12px;
  background: #f9fafb;
  border-top: 1px solid var(--line, #e5e7eb);
  font-size: 13px;
}

.mc-foot-label {
  text-align: right;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #6b7280);
}

.mc-cell-score strong {
  display: block;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.mc-score-pct {
  display: block;
  font-size: 11px;
  color: var(--muted, #6b7280);
  margin-top: 2px;
}

.mc-raw-prompt {
  margin-top: 16px;
}

.mc-raw-prompt > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted, #6b7280);
  padding: 6px 0;
  user-select: none;
}

.mc-raw-prompt > summary:hover { color: var(--text, #1f2937); }

.mc-raw-prompt[open] > summary { margin-bottom: 8px; }

/* ---------- PI input (Phase 1 review + Phase 2 score scaffold) ---------- */

.pi-section { border-top: 1px solid #e2e8f0; padding-top: 18px; }

.pi-form {
  display: grid;
  gap: 12px;
  margin-top: 10px;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.pi-rubric {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.pi-axis {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
}

.pi-axis-name { font-weight: 600; color: #475569; }

.pi-rating {
  font: inherit;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  min-width: 64px;
}

.pi-comment {
  font: inherit;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  resize: vertical;
}

.pi-form-foot {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.pi-reviewer {
  font: inherit;
  flex: 1 1 240px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}

.pi-submit {
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: #2563eb;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  cursor: pointer;
}
.pi-submit:hover { background: #1d4ed8; }
.pi-submit:disabled { background: #94a3b8; cursor: default; }

.pi-form-msg { margin: 0; font-size: 13px; color: #15803d; }
.pi-form-msg.is-error { color: #b91c1c; }

.pi-reviews { margin-top: 16px; display: grid; gap: 10px; }
.pi-reviews-head { font-size: 12.5px; font-weight: 600; color: #64748b; }

.pi-review-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
}
.pi-review-top {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  margin-bottom: 6px;
}
.pi-review-who { font-weight: 600; color: #0f172a; }
.pi-review-when { color: #94a3b8; font-family: var(--font-mono, monospace); }
.pi-review-ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: #475569;
}
.pi-review-comment {
  margin-top: 8px;
  font-size: 13.5px;
  color: #1f2937;
  white-space: pre-wrap;
}

.pi-chip {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 11.5px;
  color: #1e40af;
  background: #dbeafe;
  border-radius: 6px;
  padding: 1px 6px;
}
.pi-chip--empty { color: #94a3b8; background: #f1f5f9; }

.pi-score-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 8px;
}
.pi-score-grid legend {
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
  padding: 0 6px;
}
.pi-score-grid.is-disabled { opacity: 0.6; }

/* Phase 2: compact, modern, single-form scoring table.
   Layout: model column + N axis columns + comment column.
   Each row is a model; submit-all button at the bottom. */
.pi-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.pi-section-head h3 { margin: 0; }
.pi-section-meta {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
}

.pi-score-table-form {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pi-score-table {
  display: grid;
  grid-template-columns:
    minmax(110px, 0.8fr)
    repeat(var(--axis-count, 4), minmax(56px, 0.5fr))
    minmax(160px, 1.6fr);
  gap: 1px;
  background: #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
.pi-score-row {
  display: contents;
}
.pi-score-cell {
  background: #fff;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #0f172a;
}
.pi-score-row--head .pi-score-cell {
  background: #f8fafc;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  font-weight: 600;
  padding: 8px 12px;
}
.pi-score-cell--axis {
  justify-content: center;
  text-align: center;
}
.pi-score-cell--comment {
  padding: 6px 10px;
}

.pi-model-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  background: var(--chip-color, #0f172a);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pi-rating-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 44px;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.pi-rating-select:hover { border-color: #94a3b8; }
.pi-rating-select:focus {
  outline: 0;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.pi-rating-select option:checked { font-weight: 700; }

.pi-comment-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: #0f172a;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.pi-comment-input:hover { border-color: #94a3b8; }
.pi-comment-input:focus {
  outline: 0;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.pi-score-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}
.pi-score-foot .pi-submit {
  padding: 8px 18px;
  background: #0f172a;
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.06s ease;
}
.pi-score-foot .pi-submit:hover { background: #1e293b; }
.pi-score-foot .pi-submit:active { transform: translateY(1px); }
.pi-score-foot .pi-submit:disabled { background: #94a3b8; cursor: default; transform: none; }
.pi-score-foot .pi-form-msg {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: #15803d;
}
.pi-score-foot .pi-form-msg.is-error { color: #b91c1c; }

/* Narrow screens: collapse the table into stacked per-model cards. */
@media (max-width: 720px) {
  .pi-score-table {
    grid-template-columns: 1fr;
    background: transparent;
    border: 0;
    gap: 12px;
  }
  .pi-score-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
  }
  .pi-score-row--head { display: none; }
  .pi-score-cell {
    background: transparent;
    padding: 4px 0;
    font-size: 13px;
  }
  .pi-score-cell--model { grid-column: 1 / -1; }
  .pi-score-cell--comment { grid-column: 1 / -1; }
}

.empty.small { font-size: 13px; }

/* ============================================================
   Project polish - additive only.
   ============================================================ */

/* Score-strip cards get a slightly crisper border + a quiet hover. */
.score-strip {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.score-strip-item {
  padding: 4px 0;
  transition: opacity var(--t-fast) var(--ease-out);
}

.score-strip-name {
  letter-spacing: 0.01em;
}

.score-strip-value {
  letter-spacing: -0.02em;
}

/* Response cards - subtle lift on hover, since they are also clickable
   surfaces visually. (No JS change; pure CSS hover.) */
.response-card {
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}

.response-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(203, 213, 225, 0.95);
}

/* Collab cards - keep existing hover but add a finer shadow. */
.collab-card {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

/* Nav buttons - smooth center button hover with subtle glow. */
.nav-btn-center:hover {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.1),
    0 10px 24px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}

/* Modal close - icon-style. */
.modal-close {
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.modal-close:hover {
  transform: rotate(90deg);
}

/* MC pick cells - softer pop on the correct/incorrect blocks via
   the existing shadow lines, no new color. */
.mc-pick {
  transition: transform var(--t-fast) var(--ease-out);
}
.mc-pick:hover { transform: scale(1.05); }

/* PI form submit - glow on hover, keep existing color. */
.pi-submit {
  transition: background var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.pi-submit:hover {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 8px 22px rgba(37, 99, 235, 0.25);
}

/* Breadcrumb right link - subtle lift on hover. */
.breadcrumb-link-right {
  transition: background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.breadcrumb-link-right:hover {
  transform: translateY(-1px);
}

/* Project code pill - a tasteful subtle inner highlight. */
.project-code-pill {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  letter-spacing: 0.04em;
}

/* Refined facts list - dt tracking. */
.facts dt {
  letter-spacing: 0.12em;
  font-size: 10.5px;
  font-weight: 700;
}

.side-heading {
  letter-spacing: 0.12em;
  font-size: 10.5px;
  font-weight: 700;
}

/* Modal eyebrow - matching tracking. */
.modal-eyebrow {
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 700;
}

/* mc-table head tracking. */
.mc-table thead th {
  letter-spacing: 0.12em;
  font-size: 10.5px;
  font-weight: 700;
}

/* mc-foot label tracking. */
.mc-foot-label {
  letter-spacing: 0.12em;
}

/* ============================================================
   Scenario-matrix view (C6 5-cities x 5-goals x 2-horizons task)
   ============================================================ */
.scenario-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.scenario-section[hidden] {
  display: none;
}

.scenario-leaderboard {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
}
.scenario-leaderboard-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.scenario-leaderboard-head strong {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1e293b;
}
.scenario-leaderboard-wrap {
  overflow-x: auto;
}
.scenario-leaderboard-table {
  border-collapse: collapse;
  font-size: 13px;
  min-width: 100%;
}
.scenario-leaderboard-table th,
.scenario-leaderboard-table td {
  border: 1px solid #e2e8f0;
  padding: 6px 10px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.scenario-leaderboard-table thead th {
  background: #f8fafc;
  font-weight: 600;
  color: #475569;
  text-transform: capitalize;
  font-size: 12px;
}
.scenario-leaderboard-table .sl-model-head {
  text-align: left;
}
.scenario-leaderboard-table .sl-overall-head {
  background: #eef2f7;
}
.scenario-leaderboard-table .sl-model-name {
  text-align: left;
  font-weight: 500;
  color: #1e293b;
  white-space: nowrap;
}
.scenario-leaderboard-table .sl-model-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.scenario-leaderboard-table .sl-overall-cell {
  background: #f8fafc;
  font-weight: 600;
}
.scenario-leaderboard-table .sl-winner {
  background: hsl(120, 55%, 88%);
  color: #14532d;
  font-weight: 700;
  outline: 1.5px solid hsl(120, 45%, 55%);
  outline-offset: -1.5px;
}

.scenario-grid-hint {
  margin: 4px 0 0;
}
.scenario-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.scenario-control {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.scenario-control span {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 700;
  color: #475569;
}
.scenario-control select {
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
}
.scenario-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #475569;
  margin-left: auto;
}
.scenario-legend-swatch {
  display: inline-block;
  width: 16px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(15, 23, 42, 0.1);
}
.scenario-legend-swatch--low  { background: hsl(0, 65%, 78%); }
.scenario-legend-swatch--mid  { background: hsl(53, 65%, 78%); }
.scenario-legend-swatch--high { background: hsl(120, 65%, 78%); }

.scenario-grid-wrap {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.scenario-grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
}
.scenario-grid th,
.scenario-grid td {
  border: 1px solid #e2e8f0;
  padding: 6px 8px;
  text-align: center;
  white-space: nowrap;
}
.scenario-grid thead th {
  background: #f1f5f9;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.scenario-grid .scenario-goal-head {
  text-transform: capitalize;
  border-bottom: 1px solid #e2e8f0;
}
.scenario-grid .scenario-year-head {
  font-weight: 500;
  color: #475569;
}
.scenario-grid .scenario-corner {
  background: #e2e8f0;
  text-align: left;
}
.scenario-grid .scenario-city-head {
  text-align: left;
  font-weight: 600;
  background: #f8fafc;
  position: sticky;
  left: 0;
  z-index: 1;
}
.scenario-cell {
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #1e293b;
  transition: outline-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  outline: 2px solid transparent;
  outline-offset: -2px;
  position: relative;
}
.scenario-cell:hover {
  outline-color: #1d3a6e;
  box-shadow: inset 0 0 0 2px rgba(29, 58, 110, 0.15);
  z-index: 1;
}
.scenario-cell.is-active {
  outline-color: #1d3a6e;
  outline-width: 3px;
}
.scenario-cell--empty {
  background: repeating-linear-gradient(
    45deg,
    #fafafa,
    #fafafa 5px,
    #f1f5f9 5px,
    #f1f5f9 10px
  );
  color: #94a3b8;
  cursor: default;
}
.scenario-cell--empty:hover {
  outline-color: transparent;
}

.scenario-cell-detail {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 14px 16px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.scenario-cell-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 15px;
}
.scenario-cell-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #475569;
  line-height: 1;
}
.scenario-cell-close:hover {
  color: #0f172a;
}

/* ---------- prompt / response browser inside the task modal ---------- */
.scenario-browser {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
}
.scenario-browser-head { margin-bottom: 12px; }
.scenario-browser-title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.scenario-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.scenario-picker-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.scenario-picker-field select {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #0f172a;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  min-width: 150px;
}
.scenario-picker-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.scenario-picker-step {
  width: 30px;
  height: 30px;
  font-size: 14px;
  line-height: 1;
  color: #1e293b;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
}
.scenario-picker-step:hover:not(:disabled) {
  border-color: #1d3a6e;
  color: #1d3a6e;
}
.scenario-picker-step:disabled {
  opacity: 0.4;
  cursor: default;
}
.scenario-picker-pos {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #64748b;
  min-width: 52px;
  text-align: center;
}

/* ---------- provenance note in the task-modal head ---------- */
.modal-provenance {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  padding: 8px 13px;
  background: #f8fafc;
  border-left: 3px solid #94a3b8;
  border-radius: 0 6px 6px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #475569;
}
/* display:flex above would otherwise beat the UA rule for [hidden], so an
   empty note renders as a bare grey strip on tasks with no runs yet. */
.modal-provenance[hidden] {
  display: none;
}
.modal-provenance-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1e293b;
  white-space: nowrap;
}
.modal-provenance--real {
  background: #f0fdf4;
  border-left-color: #16a34a;
  color: #14532d;
}
.modal-provenance--real .modal-provenance-tag { color: #15803d; }

/* ---------- download row in the task-modal head ---------- */
.modal-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}
/* At the end of the modal: exporting is what a reader does after reading,
   so it should not read as the screen's primary action. */
.modal-download--foot {
  margin-top: 22px;
}

/* The task prompt: open by default - it is what the models were asked - but
   foldable once read. */
.prompt-details > summary {
  padding: 9px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}
.prompt-details > summary:hover { background: #f1f5f9; }
.prompt-details[open] > summary { border-radius: 8px 8px 0 0; }
.prompt-details > .task-prompt {
  margin-top: 0;
  border-radius: 0 0 8px 8px;
}
.modal-download-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin-right: 2px;
}
.modal-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 12.5px;
  color: #1e293b;
  text-decoration: none;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}
.modal-download-btn:hover {
  border-color: #1d3a6e;
  color: #1d3a6e;
  background: #f1f5f9;
}
.modal-download-ext {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 5px;
  border-radius: 3px;
  background: #e2e8f0;
  color: #475569;
}
.modal-download-btn--primary {
  background: #1d3a6e;
  border-color: #1d3a6e;
  color: #fff;
}
.modal-download-btn--primary:hover {
  background: #16305c;
  border-color: #16305c;
  color: #fff;
}
.modal-download-btn--primary .modal-download-ext {
  background: rgba(255, 255, 255, 0.18);
  color: #e8eef8;
}

.scenario-response-card {
  margin-top: 12px;
}
.scenario-axis-strip {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: 12px;
}
.scenario-axis-strip th,
.scenario-axis-strip td {
  border: 1px solid #e2e8f0;
  padding: 4px 8px;
  text-transform: capitalize;
}
.scenario-axis-strip th {
  text-align: left;
  font-weight: 500;
  color: #475569;
  background: #f8fafc;
  width: 45%;
}
.scenario-axis-strip td {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* =============================================================
   Standalone scenario pages (index + per-cell detail)
   Visual language extends the matrix view modal: uppercase eyebrow,
   numbered section heads, monospace data, muted heatmap pastels.
   Class prefix `sc-` is the new system; the legacy
   `.scenarios-index-table`, `.scenario-page-card`, `.scenario-chip`,
   `.scenario-row-link`, `.scenario-row-open` classnames are kept
   on the elements so external scripts (playwright tests) still match.
   ============================================================= */

.sc-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 6vw 80px;
}

/* Shared eyebrow — the matrix view's uppercase tracker. */
.sc-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
}

/* ---------- INDEX: overview cards ---------- */

.sc-index-cards {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr 1fr;
  gap: 18px;
  margin: 0 0 26px;
}
@media (max-width: 980px) {
  .sc-index-cards { grid-template-columns: 1fr; }
}

.sc-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
}
.sc-card .area-title { margin: 0; }

.sc-card-figure {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 2px 0 -4px;
}
.sc-card-figure-num {
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sc-card-figure-den {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.sc-card-facts {
  margin: 4px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.sc-card-facts > div { display: flex; flex-direction: column; gap: 2px; }
.sc-card-facts dt {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 700;
}
.sc-card-facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: -0.015em;
}

.sc-model-rows,
.sc-axis-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}

.sc-model-row {
  display: grid;
  grid-template-columns: 84px 1fr 36px;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
}
.sc-model-row-name {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0f172a;
  position: relative;
  padding-left: 12px;
}
.sc-model-row-name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--model-color, #1d3a6e);
}
.sc-model-row-bar-track,
.sc-axis-row-bar-track {
  position: relative;
  display: block;
  width: 100%;
  height: 8px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.sc-model-row-bar-fill,
.sc-axis-row-bar-fill {
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: 999px;
}
.sc-model-row-value,
.sc-axis-row-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: #0f172a;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sc-axis-row {
  display: grid;
  grid-template-columns: 110px 1fr 36px;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
}
.sc-axis-row-name {
  font-size: 12.5px;
  color: #1e293b;
  text-transform: capitalize;
}

/* heatmap legend — sits in the table section heading on the index page. */
.sc-legend {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sc-legend-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.sc-legend-stops {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sc-legend-stop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #475569;
}
.sc-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

/* ---------- pilot note (inline-callout, NOT a banner) ---------- */
.sc-pilot-note {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 22px;
  padding: 9px 14px;
  background: #f8fafc;
  border-left: 3px solid #94a3b8;
  border-radius: 0 6px 6px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #475569;
}
.sc-pilot-note-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1e293b;
  white-space: nowrap;
}
/* Real data says so out loud - green rail; a half-real page stays amber. */
.sc-pilot-note--real {
  background: #f0fdf4;
  border-left-color: #16a34a;
  color: #14532d;
}
.sc-pilot-note-tag--real { color: #15803d; }

/* Exact model version behind a real response, next to the model chip. */
.sc-response-version {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
  white-space: nowrap;
}

/* ---------- section heads, used on both pages ---------- */
.sc-section {
  margin: 0 0 28px;
}
.sc-section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: baseline;
  margin-bottom: 14px;
}
.sc-section-num {
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #94a3b8;
  padding-top: 6px;
  white-space: nowrap;
}
.sc-section-title {
  grid-column: 2;
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.sc-section-sub {
  grid-column: 2;
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #64748b;
  max-width: 70ch;
}

/* head without a number column (used on the index table). */
.sc-section-head--plain {
  grid-template-columns: 1fr;
}
.sc-section-head--plain .sc-section-title,
.sc-section-head--plain .sc-section-sub {
  grid-column: 1;
}

/* ---------- INDEX: stacked per-city sections ---------- */

.sc-cities-intro { margin: 0 0 22px; }

.sc-cities-heading {
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 0;
}
.sc-cities-heading > div:first-child { flex: 1 1 320px; }
.sc-cities-heading h2 { margin: 0; }
.sc-cities-heading p.muted { margin: 6px 0 0; }

.sc-legends {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
@media (max-width: 720px) {
  .sc-legends { align-items: flex-start; }
}

.sc-legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.sc-city-stack {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.sc-city-block {
  padding: 28px 28px 28px 32px;
  scroll-margin-top: 80px;
  border-left: 4px solid var(--blue);
}
.sc-city-block-head {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.sc-city-block-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.1;
}

.sc-city-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.sc-table-wrap {
  background: #ffffff;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.sc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.sc-table thead th {
  text-align: left;
  padding: 12px 14px;
  background: #fbfcfe;
  border-bottom: 1px solid #e6e9ef;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
}
.sc-th-city { width: 110px; }
.sc-th-goal { width: 200px; }
.sc-th-year { width: 64px; }
.sc-th-model {
  width: 92px;
  text-align: left;
  white-space: nowrap;
}
.sc-th-model-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--model-color, #1d3a6e);
  margin-right: 7px;
  vertical-align: 1px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.10);
}
.sc-th-open { width: 32px; }

.sc-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f0f2f6;
  vertical-align: middle;
}
.sc-table tbody tr:last-child td { border-bottom: none; }

/* Group banding: every city block alternates a very faint tint. The
   city name appears only on the first row of the block — and a 1px
   rule above marks the city boundary. */
.sc-table .scenarios-index-row.is-group-odd  td { background: #ffffff; }
.sc-table .scenarios-index-row.is-group-even td { background: #fafbfd; }
.sc-table .scenarios-index-row.is-group-first:not(:first-child) td {
  border-top: 1px solid #dbe1ea;
}
.sc-table tbody tr:hover td { background: #f6f8fc; }

.sc-td-city { padding-top: 12px; padding-bottom: 12px; }
.sc-city {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0f172a;
  text-decoration: none;
}
.sc-city:hover { color: #1d3a6e; text-decoration: underline; }

.sc-goal-link {
  color: #1e293b;
  text-decoration: none;
}
.sc-goal-link:hover { color: #1d3a6e; text-decoration: underline; }

.sc-year {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #475569;
}

.sc-td-score { text-align: left; }
.sc-score {
  display: inline-block;
  min-width: 44px;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: #0f172a;
  text-align: center;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  border: 1px solid rgba(15, 23, 42, 0.06);
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.sc-score:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
}
.sc-score--empty {
  color: #cbd5e1;
  background: #f8fafc;
  border-color: #eef1f6;
  font-weight: 500;
}

.sc-td-open { text-align: right; padding-right: 18px; }
.sc-open {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: #94a3b8;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.sc-open:hover {
  background: #eef2ff;
  color: #1d3a6e;
}

/* ---------- DETAIL: title (structured tri-token) ---------- */
.sc-cell-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin: 18px 0 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 16px;
}
.sc-cell-title-city {
  text-transform: capitalize;
}
.sc-cell-title-goal {
  text-transform: capitalize;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}
.sc-cell-title-year {
  font-family: var(--font-mono);
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #bfdbfe;
  align-self: baseline;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}
.sc-cell-title-dot {
  color: rgba(199, 210, 254, 0.65);
  font-weight: 400;
}

/* ---------- DETAIL: rail (eyebrow + prev/next neighbour) ---------- */
.sc-cell-rail {
  background: #ffffff;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
  box-shadow: var(--shadow-soft);
}
.sc-cell-rail-left {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.sc-cell-key {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #64748b;
  letter-spacing: 0.02em;
}
.sc-cell-rail-nav {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.sc-rail-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid #e6e9ef;
  background: #fbfcfe;
  text-decoration: none;
  color: #1e293b;
  font-size: 12.5px;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
  max-width: 240px;
}
.sc-rail-step:hover {
  border-color: #c7d2fe;
  background: #ffffff;
  transform: translateY(-1px);
}
.sc-rail-step--right { flex-direction: row; }
.sc-rail-step-arrow {
  font-family: var(--font-mono);
  color: #94a3b8;
  font-size: 14px;
}
.sc-rail-step:hover .sc-rail-step-arrow { color: #1d3a6e; }
.sc-rail-step-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.sc-rail-step-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #94a3b8;
}
.sc-rail-step-value {
  font-size: 12.5px;
  font-weight: 500;
  color: #1e293b;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.sc-rail-step--inert {
  background: transparent;
  border-color: transparent;
  color: #cbd5e1;
  pointer-events: none;
}
.sc-rail-step--inert .sc-rail-step-label { color: #cbd5e1; }
@media (max-width: 720px) {
  .sc-cell-rail { grid-template-columns: 1fr; }
  .sc-cell-rail-nav { flex-wrap: wrap; }
}

/* ---------- DETAIL: prompt ---------- */
.sc-prompt {
  margin: 0;
  padding: 18px 20px;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
  border: 1px solid #1e293b;
}

/* ---------- DETAIL: response card ---------- */
.sc-responses {
  display: grid;
  gap: 16px;
  /* Side-by-side columns so the 3 models can be compared at a glance.
     Cards never get narrower than 280px; on narrow viewports they
     wrap to fewer columns automatically. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}
.sc-response {
  display: flex;
  flex-direction: column;
}
.sc-response {
  background: #ffffff;
  border: 1px solid #e6e9ef;
  border-left: 3px solid var(--model-color, #1d3a6e);
  border-radius: 14px;
  padding: 18px 20px 16px;
  box-shadow: var(--shadow-soft);
}
.sc-response-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f2f6;
}
.sc-response-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sc-response-model {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sc-response-mean {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sc-response-mean-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}
.sc-response-mean-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 6px 12px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.sc-response-mean-value--empty {
  background: #f8fafc;
  color: #cbd5e1;
}

.sc-response-body {
  margin: 0 0 14px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: #1e293b;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* the 5-axis bar chart — this is the design moment */
.sc-axes {
  margin-top: 4px;
  border-top: 1px solid #f0f2f6;
  padding-top: 12px;
  display: grid;
  gap: 6px;
}
.sc-axes-head,
.sc-axes-row {
  display: grid;
  /* Tighter columns: side-by-side response cards are narrower than a
     single full-width card, so axis labels get less room. */
  grid-template-columns: minmax(90px, 1.1fr) minmax(60px, 1.4fr) 36px;
  align-items: center;
  gap: 10px;
}
.sc-axes-head {
  margin-bottom: 4px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #e6e9ef;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}
.sc-axes-head-bar { text-align: left; }
.sc-axes-head-val { text-align: right; }
.sc-axes-row {
  padding: 4px 0;
}
.sc-axes-label {
  font-size: 12.5px;
  color: #1e293b;
  text-transform: capitalize;
  line-height: 1.3;
}
.sc-axes-bar {
  display: block;
  position: relative;
  width: 100%;
}
.sc-axes-bar-track {
  position: relative;
  display: block;
  width: 100%;
  height: 10px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.sc-axes-bar-track--empty {
  background: repeating-linear-gradient(
    -45deg,
    #f1f5f9 0 6px,
    #e6eaf0 6px 12px
  );
}
.sc-axes-bar-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
}
.sc-axes-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  text-align: right;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

/* On very narrow viewports, the auto-fit on .sc-responses already
   collapses to a single column; nothing extra needed here. */

/* ---------- DETAIL: compare ---------- */
.sc-compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  background: #ffffff;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--shadow-soft);
}
.sc-compare-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sc-compare-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f2f6;
}
.sc-compare-axis {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1d3a6e;
}
.sc-compare-fixed {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #94a3b8;
}
.sc-compare .sc-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #1e293b;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.sc-compare .sc-chip:hover {
  background: #ffffff;
  border-color: #c7d2fe;
  transform: translateY(-1px);
}
.sc-compare-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed #e6e9ef;
}
.sc-compare-foot-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #475569;
  text-decoration: none;
}
.sc-compare-foot-link:hover { color: #1d3a6e; }
@media (max-width: 820px) {
  .sc-compare { grid-template-columns: 1fr; }
  .sc-cell-title { font-size: 36px; }
}

/* Entry-point links between matrix view and pages view */
.task-open-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.task-open-alt-link {
  font-size: 12.5px;
  color: #475569;
  text-decoration: none;
  padding: 4px 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
}
.task-open-alt-link:hover {
  color: #1d3a6e;
  border-color: #1d3a6e;
  background: #f1f5f9;
}
.scenario-cell-open-page {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: #475569;
  text-decoration: none;
  padding: 4px 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
}
.scenario-cell-open-page:hover {
  color: #1d3a6e;
  border-color: #1d3a6e;
  background: #f1f5f9;
}


/* A task arrived at by deep link (#task-<slug>) from the lifecycle view.
   The ring fades but is not animated away: someone who followed the link
   should still see which card it meant after the page settles. */
.task-card.is-targeted {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* ---------- task detail rendered as the page, not as a popup ---------- */
/* Same markup the modal uses, so the ids and the JS are unchanged. What
   changes is that it sits in the page: no backdrop, no overlay positioning,
   no scroll lock. */

.task-detail-inline {
  margin-top: 22px;
}

.task-detail-inline .modal-dialog {
  position: static;
  width: auto;
  max-width: none;
  max-height: none;
  transform: none;
  margin: 0;
  overflow: visible;
}

/* ---------- project filter on the task list ---------- */
/* The project chips on each row link here. The project pages are gone, but
   "which tasks touch A4" is still a question, so the code became a filter. */

.tasks-filter-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.tasks-filter-note strong {
  font-family: var(--font-mono);
  color: var(--text);
}

.tasks-filter-clear {
  margin-left: 6px;
  font-size: 13px;
}

/* ---------- all cases of a large-ground-truth task ---------- */
/* Hundreds of rows, so the table scrolls inside its own box with a sticky
   header rather than making the page endless. */

.cases-head { margin-bottom: 12px; }

.cases-scroll {
  max-height: 560px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.cases-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.cases-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.cases-table thead tr:nth-child(2) th { top: 30px; }

.cases-alt {
  text-align: center;
  color: var(--text);
  border-left: 1px solid var(--line);
}

.cases-sub { font-weight: 400; }

.cases-table td,
.cases-table tbody th {
  padding: 6px 10px;
  border-bottom: 1px solid #f1f5f9;
  text-align: right;
  white-space: nowrap;
}

.cases-table tbody th.cases-id {
  text-align: left;
  color: var(--muted);
  font-family: var(--font-mono);
  font-weight: 400;
}

/* The alternative the traveller actually took, tinted across its columns. */
.cases-cell--picked { background: #eff4ff; }

.cases-chosen { text-align: left; }

.cases-pick {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eff4ff;
  color: var(--blue);
  font-weight: 600;
  font-size: 11.5px;
}