:root {
  --bg: #f6f7fb;
  --panel: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;
  --blue: #2563eb;
  --purple: #7c3aed;
  --orange: #ea580c;
  --green: #059669;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 45px rgba(15, 23, 42, 0.06);
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.03), 0 6px 20px rgba(15, 23, 42, 0.04);
  --shadow-lift: 0 1px 2px rgba(15, 23, 42, 0.05), 0 22px 48px rgba(15, 23, 42, 0.10);
  --radius: 20px;
  --radius-sm: 12px;

  /* Page width in one place. Back to the original 1320: the wide results
     table it was widened for is gone, and at 1560 the model cards stretched. */
  --page-max: 1320px;
  --page-gutter: clamp(16px, 3vw, 6vw);

  /* Motion tokens - consistent timings/easing across the site. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms;
  --t-base: 220ms;
  --t-slow: 320ms;

  --font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background:
    radial-gradient(circle at top left, #e0ecff, transparent 34%),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Visible only when focused via keyboard; lets screen-reader and
   keyboard users jump past the global nav straight to page content. */
.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease-out);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ---------- proposal banner ---------- */

.proposal-banner {
  background: #fff8e1;
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  padding: 26px 30px;
  margin-bottom: 28px;
  position: relative;
}

.proposal-banner-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.proposal-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;
}

.proposal-banner h2 {
  margin: 0;
  font-size: 22px;
}

.proposal-text {
  font-size: 15px;
  line-height: 1.6;
  color: #422a08;
  margin: 0 0 14px;
}

.proposal-text code {
  background: rgba(245, 158, 11, 0.18);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
}

.proposal-options {
  margin: 0 0 14px;
  padding-left: 22px;
  display: grid;
  gap: 10px;
}

.proposal-options li {
  font-size: 14.5px;
  line-height: 1.55;
  color: #422a08;
}

.proposal-options strong {
  color: #92400e;
}

.proposal-ask {
  margin: 14px 0 0;
  padding: 14px 16px;
  background: rgba(245, 158, 11, 0.12);
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #422a08;
}

/* ---------- site nav (persistent across pages) ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--page-gutter);
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  font-size: 13.5px;
}
.site-nav-brand {
  font-family: var(--font-display, "Space Grotesk", "Inter", sans-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #f1f5f9;
  text-decoration: none;
  font-size: 14px;
}
.site-nav-brand strong { color: #c7d2fe; }
.site-nav-links {
  display: flex;
  gap: 4px;
}
.site-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #cbd5e1;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 500;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.site-nav-link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: center;
  transition: opacity var(--t-fast) var(--ease-out),
              transform var(--t-base) var(--ease-out);
  pointer-events: none;
}
.site-nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.site-nav-link:hover::after { opacity: 0.35; transform: scaleX(1); }
.site-nav-link:focus-visible {
  outline: 2px solid rgba(129, 140, 248, 0.85);
  outline-offset: 2px;
}
.site-nav-link.is-active {
  background: rgba(99, 102, 241, 0.22);
  color: #ffffff;
  box-shadow: inset 0 -2px 0 #818cf8;
}
.site-nav-link.is-active::after { opacity: 0; }
.site-nav-link .nav-ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.85;
}

/* ---------- language dropdown (sits inline with the nav links and
   reuses the .site-nav-link styling so it matches them) ---------- */
.site-nav-links { align-items: center; }
.lang-switch { position: relative; display: inline-flex; }

/* the trigger carries class .site-nav-link for the look; this just
   resets the <button> defaults so it reads as a nav link. */
.lang-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
}
.lang-caret { font-size: 9px; opacity: 0.7; }

.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 150px;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  z-index: 60;
}
.lang-menu[hidden] { display: none; }
.lang-menu li { margin: 0; }

.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: #e2e8f0;
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 8px 10px;
  cursor: pointer;
}
.lang-option:hover { background: rgba(255, 255, 255, 0.08); }
.lang-option.is-active {
  background: rgba(99, 102, 241, 0.25);
  color: #ffffff;
}

/* Folded score columns: the header cell and every body cell for one model
   carry the same marker, so hiding them keeps the columns aligned. */
table.is-folded [data-extra="yes"] { display: none; }

.columns-toggle .when-open { display: none; }
.columns-toggle.is-open .when-closed { display: none; }
.columns-toggle.is-open .when-open { display: inline; }

/* ---------- header ---------- */

header {
  padding: 42px var(--page-gutter) 28px;
  background: linear-gradient(135deg, #111827, #1e3a8a 56%, #312e81);
  color: white;
  position: relative;
  overflow: hidden;
}

header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px circle at 90% 0%, rgba(124, 58, 237, 0.25), transparent 55%),
    radial-gradient(600px circle at 10% 110%, rgba(37, 99, 235, 0.35), transparent 50%);
  pointer-events: none;
}

/* Finer second-layer highlight - a soft top-left sheen and a 1px inner
   line at the bottom. Keeps the gradient hero but lifts it just a touch. */
header::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px circle at 6% -10%, rgba(255, 255, 255, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 18%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.header-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 28px;
  align-items: end;
  position: relative;
  z-index: 1;
}

.eyebrow {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  backdrop-filter: blur(6px);
}

.eyebrow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.header-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #1e3a8a;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.header-nav-link:hover {
  transform: translateY(-1px);
  background: white;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}

h1 {
  margin: 18px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 64px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  font-weight: 600;
  text-wrap: balance;
}

.subtitle {
  color: #dbeafe;
  font-size: 18px;
  max-width: 760px;
  line-height: 1.6;
  font-weight: 400;
}

.meta-box {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  padding: 22px;
  backdrop-filter: blur(14px);
}

.meta-box strong {
  display: block;
  font-size: 12px;
  color: #bfdbfe;
  margin-bottom: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}

.meta-box span {
  display: block;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.5;
}

.meta-box span:last-child { margin-bottom: 0; }

/* ---------- main ---------- */

main {
  max-width: var(--page-max);
  /* Clean positive top margin - no negative offset into the header.
     The old `-24px auto` made main bleed up into the dark gradient,
     which clipped white inline buttons onto a dark background
     at smaller heading sizes. */
  margin: 28px auto 60px;
  padding: 0 var(--page-gutter);
  position: relative;
  z-index: 2;
}

section { margin-bottom: 34px; }

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* The overall cards, folded: nine model cards at the top of the page bury
   everything under them, so only the top three stay open. The summary sits
   where the fourth row of cards would be, so it has to read as part of the
   cards above it, not as a stray control above the next panel: it takes the
   card's padding, and the same section gap above it as it has below, so it
   sits midway between the three cards and the next panel. */
#overallCards {
  margin-bottom: 34px;
}
.cards-more {
  margin-bottom: 34px;
}
.cards-more > summary {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  padding: 14px 26px;
  background: var(--panel);
  border: 1px solid rgba(229, 231, 235, 0.9);
  border-radius: var(--radius);
}
.cards-more > summary:hover {
  border-color: rgba(203, 213, 225, 0.95);
}
.cards--more {
  margin-top: 18px;
  margin-bottom: 0;
}

/* Same fold inside each area card: three rows, then the rest. */
.area-more {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}
.area-more > summary {
  padding: 4px 0;
}

.card,
.panel {
  background: var(--panel);
  border: 1px solid rgba(229, 231, 235, 0.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card {
  padding: 26px;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}

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

.model-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.model-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.badge {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* color set inline from config/models.yaml */
}

.score {
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 700;
  letter-spacing: -0.055em;
  margin: 4px 0 6px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.small {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 400;
}

.bar {
  width: 100%;
  height: 10px;
  background: #eef2ff;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 16px;
}

.fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  /* background color set inline from config/models.yaml */
}

/* ---------- panels ---------- */

.panel { padding: 26px; }

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

h3 {
  margin: 4px 0 14px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.area-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.area-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  background: linear-gradient(180deg, #ffffff, #f9fafb);
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}

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

.area-title {
  font-size: 10.5px;
  color: var(--muted);
  margin-bottom: 6px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

.mini-score {
  display: grid;
  grid-template-columns: 88px 1fr 42px;
  gap: 10px;
  align-items: center;
  margin: 10px 0;
  font-size: 14px;
}

.mini-score strong {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

.mini-bar {
  height: 8px;
  background: #edf2f7;
  border-radius: 999px;
  overflow: hidden;
}

/* ---------- filters ---------- */

.filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

input,
select {
  border: 1px solid var(--line);
  background: #ffffff;
  border-radius: 12px;
  padding: 10px 14px;
  font: inherit;
  color: var(--text);
  min-width: 220px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ---------- table ---------- */

.table-wrap {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th {
  text-align: left;
  padding: 14px 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 700;
}

td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

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

tbody tr {
  transition: background-color 0.12s ease;
}

tbody tr:hover { background: #fafbfd; }

.project-id {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  background: #eef2ff;
  padding: 3px 8px;
  border-radius: 8px;
  display: inline-block;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.project-id-link,
.project-title-link {
  text-decoration: none;
  color: inherit;
}

.project-id-link:hover .project-id {
  background: var(--blue);
  color: white;
}

.project-title-link:hover .project-title {
  color: var(--blue);
}

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

.project-meta {
  color: var(--muted);
  font-size: 12px;
}

.score-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
}

.winner {
  font-weight: 700;
  color: var(--green);
}

footer {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 24px var(--page-gutter) 60px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

footer code {
  background: #eef2ff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .header-inner,
  .cards,
  .area-grid {
    grid-template-columns: 1fr;
  }
  main { margin-top: 20px; }
  table { min-width: 900px; }
  .table-wrap { overflow-x: auto; }
}

/* ---------- entrance animation ---------- */

@media (prefers-reduced-motion: no-preference) {
  .card,
  .area-card,
  section.panel {
    animation: rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  .cards .card:nth-child(1) { animation-delay: 0.05s; }
  .cards .card:nth-child(2) { animation-delay: 0.12s; }
  .cards .card:nth-child(3) { animation-delay: 0.19s; }
  .area-grid .area-card:nth-child(1) { animation-delay: 0.10s; }
  .area-grid .area-card:nth-child(2) { animation-delay: 0.16s; }
  .area-grid .area-card:nth-child(3) { animation-delay: 0.22s; }
}

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

/* ---------- inline buttons (reset layout, column picker) ---------- */
.ui-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.ui-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.ui-btn:active {
  transform: scale(0.98);
}

.ui-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.ui-btn.is-loading .ui-btn-icon {
  animation: spin 0.8s linear infinite;
}

.ui-btn-icon {
  display: inline-block;
  font-size: 11px;
}

.ui-btn-ghost {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- project network (D3 force-directed graph) ---------- */

.graph-panel {
  /* The section-heading flexes its children, so the right-aligned
     controls naturally sit next to the title. */
}

.graph-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.graph-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.graph-toggle input {
  /* Reset input padding from the .filters block - we just want a checkbox. */
  min-width: 0;
  padding: 0;
  margin: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
  cursor: pointer;
}

.graph-wrap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: 8px;
  background: #f8fafc;
}

.graph-svg {
  display: block;
  width: 100%;
  height: 560px;
  cursor: grab;
}

.graph-svg:active { cursor: grabbing; }

.graph-bg { pointer-events: none; }

/* edges */
.graph-edge {
  fill: none;
  transition: opacity 0.2s ease, stroke-width 0.2s ease;
}

.graph-edge--collab {
  stroke: #c7d2fe;
  stroke-width: 1;
  opacity: 0.55;
}

.graph-edge--task {
  stroke: #1e293b;
  stroke-width: 1.6;
  stroke-dasharray: 6 4;
  opacity: 0.85;
  animation: graph-flow 18s linear infinite;
}

@keyframes graph-flow {
  to { stroke-dashoffset: -200; }
}

.graph-edge.is-dim { opacity: 0.08; }
.graph-edge.is-highlight {
  stroke-width: 2.4;
  opacity: 1;
}

/* nodes */
.graph-node {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.graph-node circle,
.graph-node rect {
  transition: filter 0.2s ease, stroke-width 0.2s ease;
}

.graph-node:hover circle,
.graph-node:hover rect,
.graph-node.is-highlight circle,
.graph-node.is-highlight rect {
  filter: url(#graph-shadow);
  stroke-width: 3;
}

.graph-node.is-dim { opacity: 0.18; }

.graph-node-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  fill: white;
  pointer-events: none;
  letter-spacing: 0.02em;
}

.graph-task-shape { /* diamond fill set inline */ }

/* legend */
.graph-legend {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text);
  box-shadow: var(--shadow-soft);
  pointer-events: none;
}

.graph-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.graph-legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1.5px solid white;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.15);
}

.graph-legend-dot--task {
  background: #0f172a;
  border-radius: 3px;
  transform: rotate(45deg);
}

/* tooltip */
.graph-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 280px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.15);
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.graph-tooltip[hidden] {
  display: none;
}

.graph-tt-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.graph-tt-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.graph-tt-meta {
  color: var(--muted);
  font-size: 11.5px;
}

.graph-tt-score {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text);
}

.graph-wrap--project .graph-svg { height: 420px; }

/* ---------- area labels above the dashboard graph clusters ---------- */

.graph-area-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0.75;
}

/* ---------- tasks matrix (mirrors prof's whiteboard table) ---------- */

.tasks-matrix {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}

.tasks-matrix-head,
.tasks-matrix-row {
  display: grid;
  grid-template-columns: 2.2fr 0.9fr 2fr;
  gap: 18px;
  align-items: center;
}

.tasks-matrix-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
  padding: 0 16px 10px;
  border-bottom: 1px solid var(--line);
}

.tasks-matrix-row {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.tasks-matrix-row:hover {
  background: #fafbfd;
  border-color: var(--line);
}

.tasks-matrix-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 6px;
}

.tasks-matrix-sub {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.tasks-matrix-owner {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
}
.tasks-matrix-owner:hover { color: var(--blue); }

.tasks-matrix-projects {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.project-chip {
  --chip-color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 4px 9px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: white;
  text-decoration: none;
  background: var(--chip-color);
  border: 1px solid rgba(15, 23, 42, 0.08);
  letter-spacing: 0.02em;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.project-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

/* Format pills - tinted by answer shape, mirroring prof's MC / Numeric /
   Short text column on the whiteboard. */
.format-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* display:inline-block above beats the UA rule for [hidden], so a task
   with no format would still show an empty pill. */
.format-pill[hidden] { display: none; }

.format-pill--multiple_choice { background: #dbeafe; color: #1d4ed8; }
.format-pill--numeric         { background: #fed7aa; color: #9a3412; }
.format-pill--short_text      { background: #ede9fe; color: #6d28d9; }
.format-pill--scenario_matrix { background: #fce7f3; color: #be185d; }
.format-pill--unknown         { background: #f1f5f9; color: var(--muted); }

@media (max-width: 720px) {
  .tasks-matrix-head { display: none; }
  .tasks-matrix-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.graph-node--center {
  /* Center pin in the per-project mini-graph: keep it crisp, no hover dim. */
}

.graph-node--center .graph-node-label {
  font-size: 13px !important;
}

@media (max-width: 980px) {
  .graph-svg { height: 460px; }
  .graph-wrap--project .graph-svg { height: 380px; }
  .graph-legend {
    position: static;
    margin: 10px;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ============================================================
   Polish pass - additive only. Subtle decor, focus rings, and
   inline-icon hooks. Designed not to fight any existing rule;
   colors stay inside the existing palette.
   ============================================================ */

/* Inline icon helper - sits next to h2/h3 section titles when a
   template adds <span class="heading-ico">…svg…</span>. */
.heading-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  color: var(--blue);
  vertical-align: -3px;
  opacity: 0.85;
}

h2 .heading-ico,
h3 .heading-ico { color: var(--blue); }

/* Section heading title rows can host an icon naturally. */
.section-heading h2,
.section-heading h3 {
  display: inline-flex;
  align-items: center;
}

/* Primary CTA-style elements - subtle glow on hover. Applies to
   buttons that opt in. */
#simulateBtn,
.cta-glow {
  position: relative;
}

#simulateBtn:hover:not([disabled]),
.cta-glow:hover {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 8px 22px rgba(37, 99, 235, 0.18);
  border-color: rgba(37, 99, 235, 0.35);
}

/* Universal focus-visible ring. Uses the existing blue. */
a:focus-visible,
button:focus-visible,
[role="tab"]:focus-visible,
summary:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.55);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Score-pill - a touch of weight and a refined rest state. */
.score-pill {
  border: 1px solid rgba(15, 23, 42, 0.04);
}

/* Project-id chip - softer transition. */
.project-id {
  transition: background-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}

/* Refined divider above footer */
footer {
  border-top: 1px solid var(--line);
  margin-top: 24px;
}

/* Subtitle line-height already generous - just tighten the meta-box
   eyebrow tracking to match the rest of the system. */
.meta-box strong {
  letter-spacing: 0.12em;
  font-size: 10.5px;
  font-weight: 700;
}

/* h2 - balance long titles, slightly tighter tracking. */
h2 {
  letter-spacing: -0.028em;
  text-wrap: balance;
}

/* Graph edge soft glow on highlight (additive - existing rule
   already raises stroke width and opacity). */
.graph-edge.is-highlight {
  filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.35));
}

/* Refined entrance - section panels and tasks rise. The existing
   `rise` keyframe is reused; we just extend coverage and slow the
   timing a touch for a calmer first paint. */
@media (prefers-reduced-motion: no-preference) {
  .proposal-banner {
    animation: rise 0.5s var(--ease-out) backwards;
    animation-delay: 0.02s;
  }
  .panel,
  section.panel {
    animation-duration: 0.55s;
  }
}

/* Reduced motion: kill the bridge flow + graph dasharray drift, keep
   the rest of the UI static. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .graph-edge--task,
  .tasks-bridge-path.is-active { animation: none !important; }
}

/* Download block for the spreadsheet export. Lives here rather than in
   project.css because every page loads dashboard.css and every page that
   shows results offers the export. */
.sc-download {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 28px;
  align-items: center;
  margin: 0 0 26px;
  padding: 16px 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.sc-download-title {
  margin: 0 0 4px;
  font-family: var(--font-display, inherit);
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}
.sc-download-sub {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #475569;
  max-width: 62ch;
}
.sc-download-sub code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: #eef2f7;
  padding: 1px 4px;
  border-radius: 3px;
}
.sc-download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  /* Wrap onto two rows rather than squeezing the explanation into a column. */
  max-width: 560px;
}
.sc-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: #1e293b;
  text-decoration: none;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  white-space: nowrap;
}
.sc-download-btn:hover {
  border-color: #1d3a6e;
  color: #1d3a6e;
  background: #f1f5f9;
}
.sc-download-btn-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;
}
.sc-download-btn--primary {
  background: #1d3a6e;
  border-color: #1d3a6e;
  color: #fff;
}
.sc-download-btn--primary:hover {
  background: #16305c;
  border-color: #16305c;
  color: #fff;
}
.sc-download-btn--primary .sc-download-btn-ext {
  background: rgba(255, 255, 255, 0.18);
  color: #e8eef8;
}
.sc-download-btn--muted { color: #64748b; }
@media (max-width: 900px) {
  .sc-download { grid-template-columns: 1fr; }
  .sc-download-actions { justify-content: flex-start; }
}

/* ---------- mobility planning lifecycle ---------- */
/* A plain list of the eight planning steps with their tasks. Deliberately
   undecorated for now: the content is still moving, and a drawing of the
   cycle is a separate job for later. */

/* The heading pairs a title with a one-line explanation; .section-heading is
   a baseline flex row, so stack them. */
.lc-panel .section-heading > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 62ch;
}

.lc-coverage {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}

.lc-coverage strong {
  color: var(--text);
}

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

.lc-item {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.lc-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.lc-item:last-child {
  padding-bottom: 0;
}

.lc-item-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.lc-item-titles {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.lc-item-num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.lc-item--planned .lc-item-num,
.lc-item-num--open {
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--muted);
}

.lc-item-title {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
}

.lc-item--planned .lc-item-title,
.lc-item--open .lc-item-title {
  color: var(--muted);
}

.lc-item-note {
  margin: 0 0 0 32px;
  font-size: 13.5px;
  color: var(--muted);
}

.lc-open-list {
  list-style: none;
  margin: 0 0 0 32px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.lc-open-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--muted);
}

/* ----- the task tree inside a step ----- */

.lc-groups,
.lc-subgroups,
.lc-tasks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lc-groups {
  margin-left: 32px;
}

/* Each nesting level indents and carries a rule, so a three-level branch
   (group -> subgroup -> task) stays readable without numbering. */
.lc-subgroups,
.lc-tasks {
  margin-top: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.lc-group {
  margin-top: 8px;
}

.lc-group:first-child {
  margin-top: 0;
}

.lc-group-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.lc-group--d2 > .lc-group-title,
.lc-group--d3 > .lc-group-title {
  font-weight: 500;
  color: var(--muted);
}

.lc-task {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 3px 0;
  font-size: 13.5px;
}

.lc-task-link {
  color: var(--blue);
  text-decoration: none;
}

.lc-task-link:hover {
  text-decoration: underline;
}

/* ---------- results, one row per task ---------- */
/* Reuses .panel, .section-heading, .small, .score-pill and .format-pill.
   A grid rather than a table: four columns, and one row that spans two of
   them for the prepared-tasks line. */

.res-panel .section-heading > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 72ch;
}

.res-count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}

.res-count strong {
  color: var(--text);
}

.res-rows {
  display: flex;
  flex-direction: column;
}

.res-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 210px 90px;
  align-items: center;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.res-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.res-row--head {
  padding: 12px 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A task where every model came out below the naive answer. A tint, not a
   warning icon: it is a result, not a fault in the page. */
.res-row--warn {
  background: #fffbfb;
}

.res-task {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 14.5px;
}

.res-task a {
  color: var(--blue);
  font-weight: 500;
  text-decoration: none;
}

.res-task a:hover {
  text-decoration: underline;
}

.res-metric {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
}

.res-best {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.res-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.res-best-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.res-num {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* Same four columns as a run task, so the rows line up. Dimmed, because
   nothing has been asked yet. */
.res-row--prepared {
  opacity: 0.62;
}

.res-row--prepared .res-task a {
  color: var(--text);
}

.res-row--prepared .res-task {
  font-weight: 500;
}

.res-prepared-note {
  font-size: 13.5px;
  color: var(--muted);
}

/* One scale across every row. Below zero means worse than the task's naive
   baseline, which is a finding rather than a rounding detail. */
.score-pill--neg {
  background: #fef2f2;
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.18);
}

.score-pill--mid {
  background: #f8fafc;
  color: var(--text);
}

.score-pill--good {
  background: #eff4ff;
  color: var(--blue);
  border-color: rgba(37, 99, 235, 0.18);
}

@media (max-width: 900px) {
  .res-row,
  .res-row--prepared {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .res-row--head {
    display: none;
  }
  .res-num {
    text-align: left;
  }
}