frontend/src/styles.css

:root {
  /* CAML (Culture & Morality Lab) palette, from the CCR logo: near-black
     strokes + teal similarity dots. --brand is a darkened logo teal so text
     and buttons keep AA contrast on white; --accent is the logo teal itself,
     used for non-text fills (bars, dots, highlights). */
  --brand-ink: #151515;
  --brand: #26736f;
  --brand-dark: #1d5a57;
  --accent: #339b98;
  --ink: #1d2129;
  --muted: #667085;
  --line: #e5e7eb;
  --bg: #f7f7f8;
  --card: #ffffff;
  --ok: #157f3d;
  --err: #b42318;
  --accent-soft: #e7f3f2;
  --control-height: 40px;
  /* modern surface language: one radius pair, layered shadows, one focus ring */
  --radius: 12px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 2px 6px rgba(16, 24, 40, 0.05), 0 12px 24px -16px rgba(16, 24, 40, 0.14);
  --shadow-lg: 0 24px 60px -12px rgba(16, 24, 40, 0.26);
  --ring: 0 0 0 3px rgba(51, 155, 152, 0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 14.5px;
  line-height: 1.5;
}

/* Grayscale antialiasing only on high-DPI screens, where it looks cleaner.
   On 1x displays it kills subpixel rendering and text goes fuzzy. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  body { -webkit-font-smoothing: antialiased; }
}

/* thin, unobtrusive scrollbars everywhere */
* { scrollbar-width: thin; scrollbar-color: #c3c9d1 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #c3c9d1; border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

.app { display: flex; flex-direction: column; min-height: 100vh; }

a { color: var(--brand); }

/* ---------- header ---------- */
.header {
  background: linear-gradient(180deg, #1b1b1c, var(--brand-ink));  /* logo ink */
  color: #fff;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.header .brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0.2px;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
}
.brand-logo { height: 28px; width: auto; display: block; }  /* sole brand mark - no wordmark */
.header .brand:hover { opacity: 0.88; }
.header .sub { flex: 1 1 280px; min-width: 0; font-size: 12.5px; opacity: 0.85; }

.layout { display: flex; flex: 1; min-width: 0; min-height: 0; }

/* ---------- sidebar ---------- */
.sidebar {
  width: 250px;
  background: var(--card);
  border-right: 1px solid var(--line);
  padding: 18px 14px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sidebar h2 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--muted); margin: 0 0 10px 4px;
  display: flex; align-items: center; gap: 8px;
}
.sidebar h2 .count {
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 0 8px; font-size: 10.5px; letter-spacing: 0; color: var(--muted);
}
.sidebar-filter {
  width: 100%; padding: 7px 10px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: 13px;
  background: #fff; color: var(--ink);
}
.sidebar-filter:focus { outline: none; border-color: var(--brand); }
.project-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px 4px;
}
.group-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted); margin: 10px 4px 5px;
}
div:first-child > .group-label { margin-top: 2px; }
.project-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; margin-bottom: 5px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; cursor: pointer; font: inherit; color: var(--ink);
}
.project-item:hover { background: var(--bg); }
.project-item.active { background: var(--accent-soft); border-color: var(--brand); font-weight: 600; }
.project-item .project-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-item .date { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.project-create {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.project-create > button { width: 100%; }

/* ---------- main ---------- */
.main { flex: 1; padding: 22px 28px; overflow-y: auto; min-width: 0; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.card h3 { margin: 0 0 4px; font-size: 15px; }
.card .hint { color: var(--muted); font-size: 12.5px; margin: 0 0 12px; }

.step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 700;
  margin-right: 8px; vertical-align: -3px;
}

/* ---------- controls ---------- */
button { white-space: nowrap; }

button.primary {
  background: var(--brand); color: #fff; border: none;
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px; border-radius: var(--radius-sm); font: inherit; font-weight: 600; cursor: pointer;
  line-height: 1.2;
  transition: background-color 0.15s ease;
}
button.primary:hover { background: var(--brand-dark); }
button.primary:active { transform: translateY(1px); }
button.primary:disabled { background: #c9ccd1; cursor: not-allowed; transform: none; }
a.google-btn {
  background: var(--brand); color: #fff; border: none;
  min-height: var(--control-height);
  display: flex; align-items: center; justify-content: center;
  padding: 0 18px; border-radius: var(--radius-sm); font: inherit; font-weight: 600;
  cursor: pointer; line-height: 1.2; text-decoration: none; width: 100%;
  box-sizing: border-box;
}
a.google-btn:hover { background: var(--brand-dark); }
button.ghost, a.ghost {
  background: none; border: 1px solid var(--line); color: var(--ink);
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px; border-radius: var(--radius-sm); font: inherit; cursor: pointer;
  line-height: 1.2; text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
button.ghost:hover, a.ghost:hover {
  border-color: var(--brand); color: var(--brand); background: var(--accent-soft);
}
button.ghost:active, a.ghost:active { transform: translateY(1px); }
button.linkish {
  background: none; border: none; color: var(--brand);
  font: inherit; cursor: pointer; padding: 0; text-decoration: underline;
}

input[type="text"], input[type="email"], input[type="password"], textarea, select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font: inherit; background: #fff; color: var(--ink);
}
input[type="text"], input[type="email"], input[type="password"], select { height: var(--control-height); }

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(51, 155, 152, 0.5);
  outline-offset: 2px;
}

/* File input: block-level with breathing room under its label, and a styled
   picker button so it matches the rest of the controls. */
input[type="file"] {
  display: block; max-width: 100%; margin-top: 6px; font-size: 13px; color: var(--muted);
}
input[type="file"]::file-selector-button {
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  padding: 7px 14px; border-radius: var(--radius-sm); font: inherit; font-size: 13px;
  cursor: pointer; margin-right: 10px;
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--brand); color: var(--brand);
}

/* Buttons inside a row of labeled fields align to the controls' baseline
   instead of stretching to the row's full height. */
.row > button { align-self: flex-end; margin-bottom: 1px; }
textarea { resize: vertical; }
label.field { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; }
label.field > * { margin-top: 4px; font-weight: 400; }
.field-hint { margin-top: 0; font-weight: 400; color: var(--muted); font-size: 12px; }

.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > * { min-width: 0; }
.row > .grow { flex: 1; min-width: min(220px, 100%); }
.language-control { min-width: 170px; }
.model-control { min-width: 260px; }
.run-settings {
  display: grid;
  grid-template-columns: minmax(160px, 230px) minmax(320px, 720px) max-content;
  justify-content: start;
  gap: 14px;
  align-items: end;
}
.run-settings .field { margin-bottom: 0; }
.run-button {
  min-width: 180px;
  height: var(--control-height);
}
.construct-row {
  display: grid;
  grid-template-columns: minmax(320px, 1120px) max-content;
  justify-content: start;
  align-items: end;
  gap: 14px;
}
.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.result-actions { justify-content: flex-end; }
.result-actions a { display: inline-flex; text-decoration: none; }

/* ---------- misc ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
}
.pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.75;
}
.pill.running::before { animation: pill-pulse 1.2s ease-in-out infinite; }
@keyframes pill-pulse {
  50% { opacity: 0.2; }
}
.pill.completed { background: #e6f4ea; color: var(--ok); }
.pill.running { background: #fff3e0; color: #b45309; }
.pill.queued { background: #eef2f7; color: var(--muted); }
.pill.failed { background: #fdecea; color: var(--err); }

.progress-track { background: var(--line); border-radius: 999px; height: 7px; overflow: hidden; }
.progress-fill {
  background: linear-gradient(90deg, var(--brand), var(--accent));
  height: 100%; transition: width 0.4s ease; border-radius: 999px;
}

.warnings {
  background: #fff8e6; border: 1px solid #f2dfa8; color: #7a5b00;
  border-radius: var(--radius-sm); padding: 10px 14px;
}

.error-banner {
  background: #fdecea; color: var(--err); border: 1px solid #f5c6c0;
  padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 13px;
}

.table-wrap { width: 100%; overflow-x: auto; }
table.docs { width: 100%; border-collapse: collapse; font-size: 13px; }
table.docs th {
  text-align: left; color: var(--muted); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 6px 8px; border-bottom: 1px solid var(--line);
}
table.docs td {
  padding: 8px; border-bottom: 1px solid #f0f1f3; vertical-align: top;
  overflow-wrap: anywhere;
}
table.docs tbody tr:last-child td { border-bottom: none; }
table.docs td.score { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
table.docs tbody tr:hover td { background: var(--bg); }

.stat-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.stat {
  flex: 1; min-width: 110px; background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px;
}
.stat .v { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat .k { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

.item-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.item-bar-label { flex: 1; font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; }
.item-bar-track { flex: 1.2; background: var(--bg); border-radius: 999px; height: 10px; }
.item-bar-fill { background: var(--accent); opacity: 0.85; height: 100%; border-radius: 999px; }
.item-bar-val { width: 52px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600; }

.construct-items { margin: 8px 0 0; padding-left: 20px; color: var(--muted); font-size: 12.5px; }
.construct-items li { margin-bottom: 2px; }

/* Anchor vectors (bipolar constructs): the opposite-pole picker + metric toggle. */
.anchor-toggle { margin-top: 14px; display: flex; flex-direction: column; gap: 3px; }
.anchor-panel {
  margin-top: 10px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg);
}
.anchor-metric {
  margin: 12px 0 0; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
}
.anchor-metric legend { padding: 0 4px; }
.check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13.5px; }
.check input { width: auto; height: auto; margin: 0; }

.meta-footer {
  font-size: 12px; color: var(--muted); background: var(--bg);
  border-radius: var(--radius-sm); padding: 10px 14px; margin-top: 14px;
  font-variant-numeric: tabular-nums;
}
.meta-footer code { font-size: 11.5px; }

.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mt { margin-top: 12px; }

/* ---------- header nav + auth ---------- */
.header-nav {
  margin-left: auto; display: flex; align-items: center; gap: 14px; color: #fff;
  flex-wrap: wrap;
}
.header-link {
  background: none; border: none; padding: 0;
  color: rgba(255, 255, 255, 0.82); font: inherit; font-size: 13px;
  cursor: pointer; text-decoration: none; transition: color 0.15s ease;
}
.header-link:hover { color: #fff; text-decoration: underline; }
.header-link.current { color: #fff; font-weight: 600; }
.header-btn {
  background: rgba(255, 255, 255, 0.12); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  padding: 5px 14px; border-radius: 7px; font: inherit; font-size: 13px; cursor: pointer;
  text-decoration: none; transition: background-color 0.15s ease;
}
.header-btn:hover { background: rgba(255, 255, 255, 0.22); }

/* ---------- project header + actions ---------- */
.project-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.project-title { font-size: 17px; font-weight: 650; margin-right: 10px; }
button.danger { color: var(--err); border-color: #f0c4be; }
button.danger:hover { color: var(--err); border-color: var(--err); }
button.danger-solid { background: var(--err); }
button.danger-solid:hover { background: #93261b; }
button.danger-solid:disabled { background: #c9ccd1; }

/* ---------- construct picker (searchable, grouped) ---------- */
.picker { position: relative; }
.picker-display {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; font: inherit; color: var(--ink); cursor: pointer; text-align: left;
}
.picker-display:hover { border-color: var(--brand); }
.picker-display .picker-caret { margin-left: auto; color: var(--muted); font-size: 11px; }
.picker-search {
  width: 100%; padding: 8px 12px; border: 1px solid var(--brand);
  border-radius: var(--radius-sm); font: inherit; background: #fff;
}
.picker-search:focus { outline: none; box-shadow: 0 0 0 3px rgba(51, 155, 152, 0.15); }
.picker-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  width: 100%; max-width: 640px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 340px; overflow-y: auto; padding: 4px 0 6px;
  animation: float-in 0.14s ease-out;
}
@keyframes float-in {
  from { opacity: 0; transform: translateY(-4px); }
}
.picker-group {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted); padding: 8px 12px 3px; position: sticky; top: 0;
  background: var(--card);
}
.picker-option {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 6px 12px; cursor: pointer; font-size: 13.5px;
}
.picker-option:hover, .picker-option.active { background: var(--accent-soft); }
.picker-option.selected .picker-name { font-weight: 650; color: var(--brand); }
.picker-name { min-width: 0; }
.picker-meta { flex-shrink: 0; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.picker-empty { padding: 12px; margin: 0; }

/* ---------- modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(20, 22, 26, 0.4);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 40; padding: 16px;
}
.modal {
  background: var(--card); border-radius: 14px; padding: 26px 28px 24px;
  width: 100%; max-width: 460px; box-shadow: var(--shadow-lg);
  animation: modal-in 0.16s ease-out;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
}
.modal h3 { margin: 0 0 8px; font-size: 18px; }

/* Auth modal: roomier fields and clearer separation between sections. */
.modal .hint { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 4px; }
.modal form.mt { margin-top: 18px; }
.modal label.field { margin-bottom: 16px; }
.modal label.field:last-of-type { margin-bottom: 20px; }
.modal .row { gap: 10px; }
.modal .row > .primary { flex: 1; }
.modal p.small.muted.mt {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.6;
}

@media (max-width: 820px) {
  body { font-size: 14px; }

  .header {
    padding: 12px 16px;
    align-items: flex-start;
    gap: 2px 12px;
  }
  .header .brand { font-size: 16px; }
  .header-nav { gap: 10px 14px; }
  .header .sub {
    flex: 1 1 210px;
    font-size: 12px;
    line-height: 1.35;
  }

  .layout { display: block; }
  .sidebar {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 14px;
  }
  .project-list {
    max-height: 220px;
    margin-right: 0;
    flex: none;
  }
  .project-create { border-top: 0; }
  .main {
    width: 100%;
    padding: 16px 14px 28px;
    overflow: visible;
  }
  .card {
    padding: 16px;
    margin-bottom: 14px;
  }

  .row,
  .run-settings,
  .construct-row,
  .results-toolbar,
  .result-actions {
    gap: 10px;
  }
  .row,
  .results-toolbar,
  .result-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .run-settings,
  .construct-row {
    grid-template-columns: 1fr;
  }
  .row > .grow,
  .construct-row > .grow,
  .language-control,
  .model-control {
    width: 100%;
    min-width: 0;
  }
  .main .row > button,
  .main .row > a,
  .main .row > a > button,
  .results-toolbar > button {
    align-self: stretch;
    margin-bottom: 0;
    width: 100%;
  }
  .run-button {
    width: 100%;
    min-width: 0;
  }

  .stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { min-width: 0; }
  .item-bar-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    gap: 6px 10px;
  }
  .item-bar-track { grid-column: 1 / -1; width: 100%; }
  .item-bar-val { width: auto; }
  table.docs { min-width: 520px; }
}

@media (max-width: 460px) {
  .header .sub { flex-basis: 100%; }
  .stat-grid { grid-template-columns: 1fr; }
}

/* ---------- empty state (no projects yet) ---------- */
.empty-state {
  text-align: center;
  max-width: 560px;
  margin: 48px auto 0;
  padding: 36px 28px 28px;
}
.empty-state h3 { font-size: 17px; }
.empty-state .hint { font-size: 13px; }
.empty-actions {
  display: flex; gap: 16px; align-items: center; justify-content: center;
  flex-wrap: wrap; margin: 18px 0 16px;
}

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

/* ------------------------------------------------------------- welcome */
.welcome { padding-top: 1.2rem; }
.welcome-hero {
  padding: 26px 28px;
  background: linear-gradient(135deg, #ffffff 55%, var(--accent-soft));
}
.welcome-hero h2 { margin: 0 0 .6rem; font-size: 1.5rem; }
.welcome-hero p { max-width: 62ch; }
.welcome-cta {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  margin: 1.1rem 0 .6rem;
}
.welcome-cta .ghost-link { font-size: .95rem; }
.welcome-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
}
.welcome-step h3 { margin: .2rem 0 .3rem; }
.step-n {
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--brand); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 700px) {
  .welcome-steps { grid-template-columns: 1fr; }
}

/* ------------------------------------------- multi-construct runs */
.construct-selected {
  margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 12px; background: #fff;
}
.construct-selected summary,
.construct-results summary {
  cursor: pointer; display: flex; align-items: baseline; gap: 8px;
  list-style: none;
}
.construct-selected summary::-webkit-details-marker,
.construct-results summary::-webkit-details-marker { display: none; }
.construct-selected summary::before,
.construct-results summary::before {
  content: "\25B8"; color: var(--muted); font-size: 11px;
  transition: transform 0.15s ease; align-self: center;
}
details[open] > summary::before { transform: rotate(90deg); }
.construct-selected-name { font-weight: 600; font-size: 13.5px; }
.construct-remove { margin-left: auto; flex-shrink: 0; }
.construct-results summary .picker-meta { margin-left: 6px; }
.construct-results h4 { margin: 14px 0 4px; font-size: 13.5px; }

/* New-construct panel: a contained sub-card so the form reads as one unit,
   visually separate from the picker above it. */
.new-construct {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px 16px;
  margin-top: 12px;
  background: var(--bg);
}
.new-construct-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
/* The three item sources as radio-cards - one glance, one choice, and only
   the chosen path's fields render below (tester feedback: the flat form with
   every path's controls stacked read as clutter). */
.source-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}
.source-card {
  text-align: left;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: border-color .12s, background .12s;
}
.source-card:hover { border-color: var(--accent); }
.source-card.active { border-color: var(--brand); background: var(--accent-soft); }
.source-card b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.source-card span { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; }
/* Controls + button on one baseline (the plain .row leaves the button 10px
   low because label.field carries a bottom margin). */
.field-row { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; }
.field-row .field { margin-bottom: 0; }
.field-row > .small { align-self: center; margin: 0 0 8px; }

/* "Drafted by <model>" line + hover/focus info bubble in the AI construct
   path. The model name is read live from the API (auth.generation), so the UI
   never hardcodes it. */
.ai-modeline {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 0 10px;
}
.infotip {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: none; background: none; cursor: help;
  font: inherit; line-height: 1;
}
.infotip-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent-soft); color: var(--brand);
  border: 1px solid var(--brand); font-size: 11px; font-weight: 700;
  font-style: normal;
}
.infotip:hover .infotip-icon,
.infotip:focus-visible .infotip-icon { background: var(--brand); color: #fff; }
.infotip:focus-visible { outline: none; }
.infotip:focus-visible .infotip-icon { box-shadow: var(--ring); }
.infotip-pop {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 40;
  width: 300px; max-width: 78vw;
  padding: 10px 12px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-size: 12px; line-height: 1.45; text-align: left;
  /* reset the base `button { white-space: nowrap }` so the bubble text wraps
     inside its fixed width instead of overflowing the box */
  white-space: normal; overflow-wrap: anywhere;
  opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity .12s, transform .12s, visibility .12s;
  pointer-events: none;
}
.infotip:hover .infotip-pop,
.infotip:focus-within .infotip-pop {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.infotip-pop b { display: block; margin-bottom: 4px; color: var(--brand-ink); }
.infotip-pop ul { margin: 0; padding-left: 16px; }
.infotip-pop li { margin: 2px 0; color: var(--ink); }
.infotip-pop a { display: inline-block; margin-top: 6px; color: var(--brand); font-weight: 600; }

/* Site identity footer: present on every page (see App.jsx). Deliberately
   plain text rather than an icon row, because its job is to be readable by
   whatever is looking, including clients that never run the JS bundle. */
.site-footer {
  max-width: 920px;
  margin: 40px auto 0;
  padding: 18px 1rem 28px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}
.site-footer p { margin: 0 0 6px; }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer strong { color: var(--ink); }
.site-footer a { color: var(--brand); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .infotip-pop { transition: none; }
  .picker-panel, .modal { animation: none; }
  .pill.running::before { animation: none; }
  .construct-selected summary::before,
  .construct-results summary::before { transition: none; }
  button.primary:active, button.ghost:active, a.ghost:active { transform: none; }
}