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;
  /* the sidebar rail: a shade under the canvas, the way Claude and ChatGPT
     separate navigation from content without a border doing the work */
  --rail: #f1f1f3;
  --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; }

/* The dashboard is an app shell, not a document: it fills the viewport exactly
   and the two panes scroll inside it, so the sidebar's account row and the
   "New project" button stay put instead of drifting to the bottom of a long
   page. Below 820px the sidebar is a drawer and the page scrolls normally, so
   this must not apply there. */
@media (min-width: 821px) {
  .app-dashboard { height: 100vh; overflow: hidden; }
}

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

/* ---------- top line (landing page and /admin only) ----------
   Every screen used to wear a dark banner with the product's full name in it.
   The dashboard now has no top chrome at all - its sidebar is the chrome, as
   in Claude and ChatGPT - and the two views with no sidebar get this instead:
   light, quiet, and no tagline. */
.topline {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px;
  background: rgba(247, 247, 248, 0.82);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topline .brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo { height: 26px; width: auto; display: block; }

.topline-nav {
  margin-left: auto;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.top-link {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 13.5px; color: var(--muted);
  cursor: pointer; text-decoration: none; transition: color 0.15s ease;
}
.top-link:hover { color: var(--ink); }
.top-name { font-size: 13px; color: var(--muted); }
.top-btn {
  background: var(--brand); color: #fff; border: 0;
  padding: 8px 15px; border-radius: 9px;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  cursor: pointer; text-decoration: none;
  transition: background-color 0.15s ease;
}
.top-btn:hover { background: var(--brand-dark); }

/* A quiet square button for icons: the sidebar's collapse control and the one
   that brings it back. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; flex-shrink: 0;
  border: 0; border-radius: 8px; background: none;
  color: var(--muted); cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.icon-btn:hover { background: rgba(16, 24, 40, 0.07); color: var(--ink); }

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

/* ---------- collapsible sidebar ----------
   Closed, the sidebar slides out of the row on its own negative margin rather
   than animating to width 0: it keeps its 250px, so nothing inside reflows on
   the way out, and off-screen-left content adds no page scroll. */
.sidebar { transition: margin-left 0.18s ease; }
.layout.sidebar-closed .sidebar { margin-left: -250px; }

.sidebar-toggle {
  flex: 0 0 auto; order: -1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: rgba(255, 255, 255, 0.1); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 8px;
  cursor: pointer; transition: background-color 0.15s ease;
}
.sidebar-toggle:hover { background: rgba(255, 255, 255, 0.22); }

/* The backdrop exists only under 820px, where the sidebar is a drawer. */
.sidebar-backdrop { display: none; }

/* ---------- sidebar ---------- */
.sidebar {
  width: 250px;
  background: var(--rail);
  border-right: 1px solid var(--line);
  padding: 10px 12px 12px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 2px 2px 8px;
}
.brand-mini {
  display: inline-flex; align-items: center;
  border: 0; background: none; padding: 2px; cursor: pointer; border-radius: 8px;
}
.brand-mini img, .brand-mini-img { height: 22px; width: auto; display: block; }
.brand-mini:hover { background: rgba(16, 24, 40, 0.06); }

/* ---------- account chip + menu (sidebar foot) ----------
   Everything the banner used to carry now hangs off one chip, ChatGPT style:
   avatar, who you are, what kind of account it is, and a menu that opens
   upward with the guides, the lab-only pages, admin, and the way in or out. */
.sidebar-foot {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line);
}
.account { position: relative; }

.account-chip {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 8px; border: 0; border-radius: 10px;
  background: none; font: inherit; text-align: left; cursor: pointer;
  transition: background-color 0.15s ease;
}
.account-chip:hover { background: rgba(16, 24, 40, 0.06); }
.account-chip-id { min-width: 0; display: flex; flex-direction: column; }
.account-chip-id b,
.account-chip-sub {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-chip-id b { font-size: 13px; font-weight: 600; }
.account-chip-sub { font-size: 11.5px; color: var(--muted); }
.account-chip-caret { margin-left: auto; flex-shrink: 0; color: var(--muted); }

.avatar {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px;
}
.avatar-anon { background: #c7ccd3; color: #fff; font-weight: 600; }

.account-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 50;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 6px; animation: float-in 0.14s ease-out;
}
.account-menu-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.account-menu-id { min-width: 0; display: flex; flex-direction: column; }
.account-menu-id b { font-size: 13px; }
.account-menu-id > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-items { display: flex; flex-direction: column; }
.account-menu-end { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }

.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 8px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font: inherit; font-size: 13px;
  text-align: left; text-decoration: none; cursor: pointer;
  white-space: nowrap;  /* the base button rule, restated for the <a> items */
}
.menu-item:hover { background: var(--bg); }
.menu-icon { flex-shrink: 0; color: var(--muted); }
.menu-item:hover .menu-icon { color: var(--brand); }
.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;
  /* white on the tinted rail, so the field reads as a field */
  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 1 auto;
  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: rgba(16, 24, 40, 0.05); }
.project-item.active { background: var(--card); 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 ---------- */
/* 7px, not a round number: it puts the project name on the same line as the
   logo across the divider (measured, 5px out at 12px). */
.main { flex: 1; padding: 7px 28px 28px; overflow-y: auto; min-width: 0; }

/* Rendered only while the sidebar is collapsed: holding the row open the rest
   of the time left an empty strip above the project name, and set the heading
   out of line with the logo across the divider. */
.main-toolbar {
  display: flex; align-items: center; gap: 10px;
  height: 32px; margin-bottom: 6px;
}

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

/* ---------- 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; }
/* Delete control on a custom construct row. Reserved space (opacity, not
   display) so rows do not reflow on hover; always visible to keyboard focus. */
.picker-delete {
  flex-shrink: 0; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 15px; line-height: 1;
  padding: 0 2px; opacity: 0; transition: opacity 0.12s, color 0.12s;
}
.picker-option:hover .picker-delete, .picker-delete:focus-visible { opacity: 1; }
.picker-delete:hover, .picker-delete:focus-visible { color: var(--err); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ---------- 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; }

  .topline {
    padding: 10px 14px;
    gap: 10px;
  }
  .topline-nav { gap: 12px; }
  .top-link { font-size: 13px; }
  .top-name { display: none; }  /* the sidebar names the account; this is chrome */

  .layout { display: block; }
  /* The sidebar becomes a drawer over the workspace. It used to be a
     full-width block stacked above it, which put the project list between you
     and the thing you had just opened on every phone visit. */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 45;
    width: min(290px, 84vw);
    margin-left: 0;
    padding: 10px 12px 14px;
    background: var(--card);
    border-right: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .layout:not(.sidebar-closed) .sidebar { transform: translateX(0); }
  /* the desktop collapse rule must not also apply here */
  .layout.sidebar-closed .sidebar { margin-left: 0; }
  .project-list { margin-right: 0; }
  .project-create { border-top: 0; }

  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 44;
    background: rgba(20, 22, 26, 0.4);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }
  .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%;
  }
  /* ...except the project's own Archive/Delete pair, which read as a tall
     ragged column at the top of the page. They stay side by side. */
  .project-header .row { flex-direction: row; justify-content: flex-end; }
  .project-header .row > button { width: auto; align-self: auto; }
  .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) {
  .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; }
  /* Runs table on a phone: every column after Construct fell off the right
     edge, so Status and View results - the two things you open the table for -
     needed a sideways scroll (reported 2026-09-08). Each run becomes a stacked
     card: no horizontal scroll and nothing dropped. Cells label themselves from
     data-label, because the header row cannot apply once rows are blocks.

     Scoped to .runs-table, NOT every .docs table: the results tables have no
     data-label attributes and would stack with blank labels.
     Two things measured rather than guessed: the base rules are `table.docs td`,
     which outranks a bare `.docs td`; and the 820px block above sets
     `table.docs { min-width: 520px }` to force these tables to scroll, which
     kept the row 520px wide inside a 328px wrapper until it is reset here. */
  table.docs.runs-table { min-width: 0; width: 100%; max-width: 100%; }
  table.docs.runs-table thead { display: none; }
  table.docs.runs-table,
  table.docs.runs-table tbody,
  table.docs.runs-table tr,
  table.docs.runs-table td { display: block; }
  table.docs.runs-table tr {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 10px 12px; margin-bottom: 10px; max-width: 100%;
  }
  table.docs.runs-table tbody tr:hover td { background: none; }
  table.docs.runs-table td {
    padding: 3px 0; border-bottom: 0; text-align: left;
    max-width: 100%; overflow-wrap: anywhere;
  }
  table.docs.runs-table td::before {
    content: attr(data-label); display: inline-block; min-width: 88px;
    color: var(--muted); font-size: 11.5px; text-transform: uppercase;
    letter-spacing: 0.4px;
  }
  table.docs.runs-table td[data-label=""] { padding-top: 8px; }
  table.docs.runs-table td[data-label=""]::before { content: none; }

  /* Results tables on a phone (reported 2026-09-09, same complaint as the runs
     table). The 820px block sets `table.docs { min-width: 520px }` so wide
     tables scroll rather than squash - right for the admin tables, wrong for
     these two, which sit in a 328px card and so ALWAYS needed a sideways drag:
       - texts-table is Score + Text. Two columns fit once the text is allowed
         to wrap, so there is nothing to scroll to.
       - corr-table is the interrelations matrix. Two or three constructs now
         fit; a wider matrix still scrolls inside .table-wrap, which is what a
         matrix has to do on any screen.
     Score stays on one line so the numbers keep their column. */
  table.docs.texts-table,
  table.docs.corr-table { min-width: 0; }
  table.docs.texts-table th:first-child,
  table.docs.texts-table td.score { width: 52px; }
  table.docs.corr-table th,
  table.docs.corr-table td { padding: 6px 5px; }

  /* Disclosure rows (a selected construct in Step 2, a construct's section in
     multi-construct results). The meta line after the name is nowrap, so on a
     phone it ran past the right edge and took the WHOLE PAGE sideways with it -
     the multi-construct results page scrolled to 485px inside a 390px screen.
     It gets its own line under the name instead. */
  .construct-selected summary,
  .construct-results summary { flex-wrap: wrap; }
  .construct-selected summary .picker-meta,
  .construct-results summary .picker-meta {
    white-space: normal; margin-left: 0; flex: 1 1 100%;
  }
  .construct-selected summary .construct-remove { margin-left: auto; }
}

/* ------------------------------------------- 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) {
  .sidebar { transition: none; }
  .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; }
}

/* Anonymous "sign in to keep it" notice after saving a custom construct.
   Deliberately a hint, not a warning: the work succeeded, this is only about
   how long it lasts. */
.keep-notice {
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: var(--accent-soft); border: 1px solid var(--border);
}
.linklike {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--brand); text-decoration: underline; font: inherit;
}

/* ---------- sample corpora (Step 1) ----------
   The second branch of Step 1, not a panel bolted under it. An "or" rule
   separates it from the upload row, and it reuses the same .field label +
   control shape as the fields above, so it reads as part of the form. It
   previously sat in a grey slab inside the white card, which looked patched
   on. Always visible: collapsed behind a toggle the corpus was never named on
   screen, and neither the PI nor a lab member could find CAMEL (2026-09-08). */
.or-rule {
  display: flex; align-items: center; gap: 14px;
  margin: 18px 0 16px; color: var(--muted); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.8px;
}
.or-rule::before, .or-rule::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.samples { max-width: 640px; }
.samples-field { margin-bottom: 0; }
.samples-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.samples-row select { flex: 1; min-width: 0; }
.samples-row button { flex-shrink: 0; }
/* The "i" is sized to the control height and shares the field radius, so the
   row reads as three parts of one control rather than three unrelated shapes. */
button.info-button {
  width: var(--control-height); padding: 0; border-radius: var(--radius-sm);
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: 15px; color: var(--muted);
}
.samples-detail { margin: 8px 0 0; }

.modal-wide { max-width: 560px; }

/* Dataset mark in the corpus info dialog. Decorative (alt=""): the name is
   right beside it, so a screen reader announcing the logo would just repeat. */
.modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.modal-head h3 { margin: 0; }
.corpus-logo { height: 34px; width: auto; flex-shrink: 0; }

/* ---------- cite dialog ----------
   Google Scholar's Cite panel, in this app's language (Ali Hajian, 2026-09-09):
   a style name on the left, the reference on the right, the whole row a copy
   button. Rows are <button>s rather than a div with a click handler, so they
   are reachable by keyboard and announce themselves. */
.cite-modal { max-width: 620px; max-height: min(86vh, 900px); overflow-y: auto; }
.cite-modal .modal-head { justify-content: space-between; align-items: baseline; }
.cite-close {
  font-size: 15px; color: var(--muted); line-height: 1; text-decoration: none;
}
.cite-close:hover { color: var(--ink); }
/* The dialog takes focus on open so Escape and the arrow keys land somewhere
   sensible; that is a programmatic focus, not a keyboard one, so it should not
   paint a ring around the whole panel. Rows keep their own focus ring. */
.cite-modal:focus { outline: none; }

.cite-list { border-top: 1px solid var(--line); margin-top: 6px; }
.cite-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 52px;
  gap: 12px;
  align-items: start;
  width: 100%;
  padding: 11px 6px;
  border: 0; border-bottom: 1px solid var(--line);
  background: none; font: inherit; text-align: left; cursor: pointer;
  /* the base `button { white-space: nowrap }` would push the reference out
     of the dialog instead of wrapping it */
  white-space: normal;
}
.cite-row:hover { background: var(--bg); }
.cite-style {
  color: var(--muted); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.5px; text-align: right; padding-top: 2px;
}
.cite-text { font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.cite-copied {
  color: var(--ok); font-size: 11.5px; font-weight: 600; text-align: right;
  padding-top: 2px;
}

.cite-also {
  margin-top: 14px; padding: 10px 14px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.cite-also b { color: var(--ink); }
.cite-also ul { margin: 8px 0 0; padding-left: 18px; }
.cite-also li { margin-bottom: 6px; overflow-wrap: anywhere; }

.cite-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.cite-export { margin-top: 12px; }
.cite-export pre {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 10px;
  font-size: 11.5px; line-height: 1.5;
  max-height: 260px; overflow: auto;
  /* wrap rather than scroll sideways: these are long author lines, and a
     phone should not need two directions of scrolling to read them */
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Cite dialog on a phone. This block has to live AFTER the base .cite-* rules
   rather than in the 700px block above: same specificity, so whichever comes
   last in the file wins, and the overrides silently lost from up there
   (measured, not assumed). A 74px style column leaves the reference about
   110px wide at 360px, so the style name moves above the reference and
   "Copied" sits beside the style name. */
@media (max-width: 700px) {
  .cite-row { grid-template-columns: minmax(0, 1fr) 56px; gap: 2px 10px; }
  .cite-style { text-align: left; grid-column: 1; grid-row: 1; }
  .cite-copied { grid-column: 2; grid-row: 1; }
  .cite-text { grid-column: 1 / -1; }
  .cite-actions > button { flex: 1 1 100%; }
}