/* =============================================================================
   GNPS Dashboard — visual design system
   Pure CSS, system fonts only, no external assets. Light theme via custom
   properties; structured so a [data-theme="dark"] block could be added later.
   ============================================================================= */

:root {
  /* ---- Neutral palette ---- */
  --gray-50:  #f7f8fa;
  --gray-100: #eef0f4;
  --gray-150: #e6e9ef;
  --gray-200: #dde1e9;
  --gray-300: #c7cdd9;
  --gray-400: #9aa3b2;
  --gray-500: #6b7280;
  --gray-600: #4b5363;
  --gray-700: #353c4a;
  --gray-800: #232936;
  --gray-900: #161b24;

  /* ---- Single accent (indigo) ---- */
  --accent:        #4f46e5;
  --accent-hover:  #4338ca;
  --accent-active: #3730a3;
  --accent-soft:   #eef0fe;
  --accent-ring:   color-mix(in srgb, var(--accent) 28%, transparent);

  /* ---- Semantic ---- */
  --success: #15803d;
  --success-soft: #e7f6ec;
  --warning: #b45309;
  --danger:  #b42318;
  --danger-soft: #fdecec;

  /* ---- Surfaces & semantics ---- */
  --bg:           var(--gray-50);
  --surface:      #ffffff;
  --surface-soft: var(--gray-50);
  --border:       color-mix(in srgb, var(--gray-300) 55%, transparent);
  --border-strong: var(--gray-300);
  --hairline:     color-mix(in srgb, var(--gray-400) 30%, transparent);

  --text:       var(--gray-900);
  --text-soft:  var(--gray-600);
  --text-faint: var(--gray-500);
  --text-muted: var(--gray-400);

  /* ---- Spacing scale (8px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius:    9px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 1px rgba(16, 24, 40, 0.03);
  --shadow:    0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px -4px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 8px 28px -8px rgba(16, 24, 40, 0.18);

  --control-h: 36px;

  /* ---- Typography ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  font-family: var(--font-sans);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hidden { display: none !important; }

/* =============================================================================
   Top bar
   ============================================================================= */
.topbar {
  display: grid;
  /* brand | nav | usi+status | actions */
  grid-template-columns: auto auto 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) var(--sp-5);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
}

.brand { display: flex; align-items: center; gap: var(--sp-2); }
.brand-mark {
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-active));
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  box-shadow: var(--shadow-sm);
}
.brand-title { font-weight: 650; font-size: 16px; color: var(--text); letter-spacing: -0.01em; }

/* Active-USI + status pill */
.topbar-usi {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  justify-content: center;
}
.topbar-usi-text {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-soft);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  max-width: min(48vw, 640px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text-soft);
  white-space: nowrap;
}
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-muted);
  flex: none;
}
.status-pill[data-state="ready"] { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 24%, transparent); }
.status-pill[data-state="ready"] .status-dot { background: var(--success); }
.status-pill[data-state="loading"] { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 24%, transparent); }
.status-pill[data-state="loading"] .status-dot { background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }
.status-pill[data-state="error"] { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 24%, transparent); }
.status-pill[data-state="error"] .status-dot { background: var(--danger); }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.topbar-actions { display: flex; align-items: center; gap: var(--sp-2); }
.copy-status {
  font-size: 12px; color: var(--text-soft);
  min-width: 0; transition: opacity 0.2s;
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
   Controls — fields, inputs, selects, buttons, toggles
   ============================================================================= */
.field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.field.grow { flex: 1; }
.field-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-faint);
  font-weight: 650;
}

textarea,
input[type="text"],
.select {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  height: var(--control-h);
  width: 100%;
  transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
}
textarea {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  padding: 8px 10px;
  height: auto;
  resize: vertical;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }

textarea:hover, input[type="text"]:hover, .select:hover { border-color: var(--gray-400); }
textarea:focus, input:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
textarea:focus-visible, input:focus-visible { outline: none; }

/* Select with custom chevron */
.select-wrap { position: relative; display: inline-flex; }
.select-wrap::after {
  content: "";
  position: absolute;
  right: 11px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -3px;
  border-right: 1.5px solid var(--text-faint);
  border-bottom: 1.5px solid var(--text-faint);
  transform: rotate(45deg);
  pointer-events: none;
}
.select {
  -webkit-appearance: none; appearance: none;
  padding-right: 30px;
  width: auto;
  cursor: pointer;
  font-weight: 550;
}

/* Buttons */
.btn {
  font: inherit;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  height: var(--control-h);
  padding: 0 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.13s, border-color 0.13s, box-shadow 0.13s, transform 0.05s;
}
.btn:hover { background: var(--gray-100); border-color: var(--gray-400); }
.btn:active { transform: translateY(0.5px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }

.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-soft); }
.btn-ghost:hover { background: var(--gray-100); color: var(--text); }

.btn-small { height: 30px; padding: 0 12px; font-size: 12.5px; }

/* Segmented toggle */
.segmented {
  display: inline-flex;
  background: var(--gray-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}
.seg-btn {
  font: inherit;
  font-weight: 600;
  font-size: 12.5px;
  border: none;
  background: transparent;
  color: var(--text-soft);
  padding: 0 12px;
  height: 28px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.13s, color 0.13s, box-shadow 0.13s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.is-active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.seg-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-ring); }

/* Toggle switch */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  position: relative;
  width: 34px; height: 20px;
  background: var(--gray-300);
  border-radius: var(--radius-pill);
  transition: background 0.16s;
  flex: none;
}
.switch-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.16s;
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(14px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--accent-ring); }
.switch-label { font-size: 12.5px; color: var(--text-soft); font-weight: 550; }

/* =============================================================================
   Progress bar
   ============================================================================= */
.global-progress {
  background: var(--accent-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  padding: var(--sp-2) var(--sp-5);
}
.progress-row { display: flex; align-items: center; gap: var(--sp-3); }
.progress-label {
  font-weight: 600; color: var(--accent-active);
  font-size: 12.5px;
  min-width: 0; max-width: 50vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.progress-track {
  flex: 1;
  height: 7px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}
.progress-pct {
  font-variant-numeric: tabular-nums;
  color: var(--accent-active);
  font-weight: 650;
  min-width: 40px; text-align: right; font-size: 12.5px;
}

/* =============================================================================
   Page layout
   ============================================================================= */
.page {
  max-width: 1480px;
  margin: 0 auto;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.grid {
  display: grid;
  gap: var(--sp-4);
  align-items: start;
}
/* Paired rows: one card normally, two side by side when a second USI is loaded.
   The maps sit beside each other so they can be compared directly; the XIC and
   spectrum panels flow full-width beneath them. */
.pair-row {
  grid-template-columns: 1fr;
  margin-bottom: var(--sp-4);
}

/* Main working area. One USI: map left, XIC + spectrum right (the original
   dashboard's arrangement). Two USIs: the maps claim the full width so they can
   be compared, and the right column drops beneath them. */
.main-row {
  grid-template-columns: 1.15fr 1fr;
  margin-bottom: var(--sp-4);
}
.main-row.has-second { grid-template-columns: 1fr; }
/* The maps row is itself a grid; inside main-row it must not add its own gap. */
.main-row > .pair-row { margin-bottom: 0; }
.pair-row.has-second {
  grid-template-columns: 1fr 1fr;
}

/* Side-by-side maps: the left card carries the toolbar (markers, detail,
   contrast, colormap, polarity, feature finding), the right does not, so the
   right card ends up shorter and its map's bottom edge floats above the
   left's. Stretch both cards to the row height and let the right map grow into
   the difference, so the two plots share a bottom edge and read as a pair. */
#maps-row.has-second { align-items: stretch; }
#maps-row.has-second > .card { display: flex; flex-direction: column; }
#maps-row.has-second > .card > .heatmap-wrap { flex: 1 1 auto; min-height: 440px; height: auto; }
#maps-row.has-second > .card > .heatmap-wrap > canvas { height: 100%; }
.col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

/* Full-width file summary; stats in a single row. */
.summary-full { margin-bottom: var(--sp-4); }
.summary-full .summary { grid-template-columns: repeat(6, 1fr); }
/* Two summaries side by side get 3 stats per row each so they stay readable. */
.pair-row.has-second .summary { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1100px) {
  /* Too narrow for side-by-side; stack everything. */
  .pair-row.has-second { grid-template-columns: 1fr; }
  .main-row { grid-template-columns: 1fr; }
  .summary-full .summary { grid-template-columns: repeat(3, 1fr); }
  .pair-row.has-second .summary { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
  .page { padding: var(--sp-4); }
  .topbar { grid-template-columns: auto 1fr; }
  .topbar-usi { justify-content: flex-end; }
  .topbar-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* =============================================================================
   Cards
   ============================================================================= */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4);
  transition: box-shadow 0.18s;
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.card-title {
  font-size: 13.5px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.01em;
}
.card-tools { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.usi-tag {
  font-weight: 500;
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  word-break: break-all;
  max-width: 100%;
}

/* ---- Input card ---- */
.input-card { padding: var(--sp-4) var(--sp-5); }
.input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.input-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.input-hint { font-size: 12.5px; color: var(--text-faint); }
@media (max-width: 720px) {
  .input-grid { grid-template-columns: 1fr; }
  .input-hint { display: none; }
}

/* =============================================================================
   Empty state
   ============================================================================= */
.empty-state {
  text-align: center;
  padding: var(--sp-7) var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.empty-icon {
  color: var(--accent);
  background: var(--accent-soft);
  width: 76px; height: 76px;
  border-radius: var(--radius-lg);
  display: grid; place-items: center;
  margin-bottom: var(--sp-2);
}
.empty-title { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.empty-text { font-size: 14px; color: var(--text-soft); margin: 0; max-width: 460px; }
.example-links {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  justify-content: center; margin-top: var(--sp-2);
}
.example-chip {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, transform 0.05s;
}
.example-chip:hover { background: var(--accent-soft); border-color: var(--accent); }
.example-chip:active { transform: translateY(0.5px); }
.example-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

/* =============================================================================
   Summary stats
   ============================================================================= */
.summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3) var(--sp-4);
  margin: 0;
}
.summary > div {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
}
.summary dt {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-faint); font-weight: 650;
}
.summary dd {
  margin: 0; font-weight: 700; font-size: 15px; color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* =============================================================================
   Canvas wrappers
   ============================================================================= */
.canvas-wrap {
  position: relative;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.canvas-wrap canvas { display: block; width: 100%; height: 100%; }
/* Touch: a horizontal drag on a chromatogram/spectrum zooms (we take it), a
   vertical one still scrolls the page. The heatmap's box zoom is 2-D, so it
   takes every gesture; scroll past it via the page margins. */
.canvas-wrap canvas { touch-action: pan-y; }
.heatmap-wrap canvas { touch-action: none; }
.heatmap-wrap { height: 440px; }
.canvas-wrap.small { height: 210px; }
.canvas-wrap.medium { height: 300px; }
.heatmap-wrap canvas { cursor: crosshair; }

.canvas-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-4);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: blur(1px);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 500;
}
.canvas-msg.error {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger-soft) 90%, transparent);
}
.canvas-msg.loading::before {
  content: "";
  width: 14px; height: 14px;
  margin-right: 9px;
  border: 2px solid var(--accent-ring);
  border-top-color: var(--accent);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hint { font-size: 12px; color: var(--text-faint); margin: var(--sp-2) 0 0; }

/* =============================================================================
   XIC controls
   ============================================================================= */
.xic-controls {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
/* In the two-column layout the XIC lives in the narrower right column, so the
   m/z list takes its own full-width row and the numeric fields flow beneath it
   rather than squeezing the labels onto three lines each. */
.xic-controls .grow { flex: 1 1 100%; min-width: 0; }
.field-group { display: flex; gap: var(--sp-2); align-items: flex-end; flex-wrap: wrap; }
.tol-field { width: 88px; }
/* These two hold words, not numbers, so they need more room than a tol field. */
#xic-integration-field { width: 132px; }
#xic-grouping-field { width: 96px; }
/* Long labels must not force the control wider than its field. */
.xic-controls .field-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tol-field .select { width: 100%; }
.tol-field .select-wrap { width: 100%; }
@media (max-width: 560px) {
  .xic-controls { flex-direction: column; align-items: stretch; }
  .field-group { flex-wrap: wrap; }
  .tol-field { flex: 1; min-width: 80px; }
}

/* =============================================================================
   MS2
   ============================================================================= */
.ms2-meta {
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: var(--sp-3);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.ms2-meta b { color: var(--text); font-weight: 700; }
.linkouts { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.linkouts a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  transition: background 0.13s, border-color 0.13s;
}
.linkouts a:hover { background: var(--accent-soft); border-color: var(--accent); }
.linkouts a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

.comment-card { padding: var(--sp-3) var(--sp-4); }

/* =============================================================================
   Toast
   ============================================================================= */
.toast-stack {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  z-index: 50;
  max-width: min(360px, calc(100vw - 32px));
}
.toast {
  background: var(--gray-900);
  color: #fff;
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  font-size: 13px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  animation: toast-in 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.toast.toast-out { animation: toast-out 0.2s ease forwards; }
.toast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); margin-top: 5px; flex: none; }
.toast-error .toast-dot { background: #f97066; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* =============================================================================
   Footer
   ============================================================================= */
.footer {
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Multi-file: the "showing" picker appears in the map card head only when more
   than one file is loaded, and the XIC grouping control alongside it. */
.file-select-wrap { max-width: 260px; }
.file-select-wrap .select { font-size: 12px; }
.xic-grouping-field { min-width: 90px; }

/* Examples, grouped by repository, on the empty state. */
.examples { display: flex; flex-direction: column; gap: var(--sp-4); text-align: left; }
.example-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.example-group-title {
  width: 100%;
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-500);
}

/* =============================================================================
   Branding: top bar, footer, citation, privacy modal
   ============================================================================= */

/* The logo source files are ~1600px wide. Without a size they render at natural
   size and blow the layout apart, which is exactly what a stale cached
   stylesheet used to cause. The <img> tags now carry width/height attributes as
   well, so the correct size survives even with no CSS at all. */
img { max-width: 100%; height: auto; }

/* Running build, shown next to the brand. Deliberately quiet: useful when
   someone reports a bug, invisible the rest of the time. */
.brand-version {
  font-size: 10.5px; color: var(--gray-400);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding-left: 8px; white-space: nowrap;
}
.brand-version.stale { color: #b45309; font-weight: 600; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-logo { height: 26px; width: auto; display: block; }
.brand-title {
  font-size: 14px; font-weight: 600; color: var(--gray-700);
  padding-left: 10px; border-left: 1px solid var(--gray-300);
}

.topnav { display: flex; gap: var(--sp-4); }
.topnav a {
  font-size: 13px; color: var(--gray-600); text-decoration: none; white-space: nowrap;
}
.topnav a:hover { color: var(--indigo-600, #4f46e5); text-decoration: underline; }

/* --- Footer --- */
.footer {
  margin-top: var(--sp-6);
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  padding: var(--sp-5) var(--sp-5) 0;
  /* the earlier .footer rule centres text; the branded footer is left-aligned */
  text-align: left;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1.2fr;
  gap: var(--sp-6);
  max-width: 1600px; margin: 0 auto;
}
.footer-title {
  margin: 0 0 var(--sp-2);
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gray-500);
}
.cite-text { margin: 0 0 6px; font-size: 12px; color: var(--gray-600); }
/* The author list is long; keep it readable but visually secondary. */
.cite-ref {
  margin: 0 0 8px; font-size: 11.5px; line-height: 1.55; color: var(--gray-600);
  max-width: 68ch;
}
.cite-ref strong { color: var(--gray-800); }
.cite-links { margin: 0; font-size: 12px; }
.cite-links a, .linklike {
  color: var(--indigo-600, #4f46e5); text-decoration: none;
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
}
.cite-links a:hover, .linklike:hover { text-decoration: underline; }
.cite-links .sep { color: var(--gray-400); margin: 0 6px; }

.footer-links, .footer-people { margin: 0; padding: 0; list-style: none; }
.footer-links li, .footer-people li { font-size: 12px; line-height: 1.9; color: var(--gray-600); }
.footer-links a { color: var(--gray-700); text-decoration: none; }
.footer-links a:hover { color: var(--indigo-600, #4f46e5); text-decoration: underline; }
.footer-more { margin-top: 6px; }
.footer-more summary {
  font-size: 12px; color: var(--gray-500); cursor: pointer; list-style: revert;
}
.footer-more summary:hover { color: var(--gray-700); }

.footer-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: 1600px; margin: var(--sp-5) auto 0;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--gray-200);
}
.footer-logo { height: 22px; width: auto; opacity: .75; }
.footer-meta { font-size: 12px; color: var(--gray-500); }
.footer-privacy + .footer-privacy { margin-left: var(--sp-4); }
.footer-privacy { margin-left: auto; font-size: 12px; color: var(--gray-500); text-decoration: none; }
.footer-privacy:hover { color: var(--gray-700); text-decoration: underline; }

/* --- Privacy modal --- */
.modal {
  border: 1px solid var(--gray-200); border-radius: 10px;
  padding: var(--sp-5); max-width: 560px; color: var(--gray-700);
  box-shadow: 0 20px 50px rgba(22,27,36,.18);
}
.modal::backdrop { background: rgba(22,27,36,.35); }
.modal h2 { margin: 0 0 var(--sp-3); font-size: 16px; }
.modal p { font-size: 13px; line-height: 1.6; }
.modal ol { font-size: 13px; line-height: 1.7; padding-left: 1.2em; }

/* --- Wide plot modals (full-size MS/MS, averaged MS/MS) --- */
.modal-wide {
  max-width: min(1400px, 96vw); width: min(1400px, 96vw);
  max-height: 94vh; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
}
.modal-wide:not([open]) { display: none; }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.modal-head h2 { margin: 0; }
.modal-wide .ms2-meta { margin-bottom: 0; }
.modal-wide .hint { margin: 0; }
.canvas-wrap.modal-plot { height: min(48vh, 520px); flex: none; }
.peak-table-tools { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.peak-search {
  height: 30px; padding: 0 10px; font: inherit; font-size: 12.5px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 200px;
}
.peak-table-wrap { margin-top: 0; flex: 1 1 auto; min-height: 120px; max-height: none; }
.peak-table-wrap th.sortable { cursor: pointer; user-select: none; }
.peak-table-wrap th.sortable:hover { color: var(--text); }
.peak-table-wrap th .sort-arrow { display: inline-block; width: 1em; color: var(--accent); }
.peak-table-wrap tbody tr.is-selected { background: var(--indigo-50, #eef2ff); }

@media (max-width: 1280px) {
  /* Drop the nav before the top bar is forced to wrap; the same links are all
     repeated in the footer, so nothing becomes unreachable. */
  .topnav { display: none; }
  .topbar { grid-template-columns: auto 1fr auto; }
}
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .brand-title { display: none; }
}

/* XIC integration table */
.card-note { font-size: 11.5px; color: var(--gray-500); }
.table-wrap { max-height: 260px; overflow: auto; margin-top: var(--sp-3); border: 1px solid var(--gray-200); border-radius: 6px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table thead th {
  position: sticky; top: 0; background: var(--gray-50);
  text-align: left; font-weight: 600; color: var(--gray-600);
  padding: 6px 10px; border-bottom: 1px solid var(--gray-200); white-space: nowrap;
}
.data-table td { padding: 5px 10px; border-bottom: 1px solid var(--gray-100); color: var(--gray-700); }
.data-table tbody tr:hover { background: var(--gray-50); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Feature table: taller than the integration table, and rows are clickable. */
.features-table-wrap { max-height: 340px; }
.features-table-wrap tbody tr { cursor: pointer; }
.features-table-wrap tbody tr.is-selected { background: var(--indigo-50, #eef2ff); }
.features-table-wrap tbody tr.is-selected td { font-weight: 600; }

/* MS/MS library search (Spectrum card) */
.lib-search { margin-top: var(--sp-3); }
.lib-search-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.lib-opt { font-size: 12px; color: var(--gray-600); display: inline-flex; align-items: center; gap: 4px; }
.lib-opt input[type="text"] { width: 48px; font-size: 12px; padding: 2px 4px; border: 1px solid var(--gray-300); border-radius: 4px; }
.lib-results { margin-top: var(--sp-3); overflow-x: auto; }
.lib-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.lib-table th, .lib-table td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
.lib-table th { color: var(--gray-500); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; }
.lib-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.lib-table td.name { white-space: normal; min-width: 160px; }

/* Local-file page */
.dropzone { border: 2px dashed var(--gray-300); border-radius: 10px; padding: var(--sp-5) var(--sp-4); text-align: center; cursor: pointer; background: var(--gray-50); transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone:focus, .dropzone.is-over { border-color: var(--accent); background: #eef2ff; outline: none; }
.dropzone-title { margin: 0 0 var(--sp-2); font-weight: 600; }
.dropzone-title .link { color: var(--accent); text-decoration: underline; }
.dropzone-hint { margin: 0; font-size: 12px; color: var(--gray-500); max-width: 640px; margin-inline: auto; }
.dropzone-status { margin: var(--sp-3) 0 0; font-size: 13px; color: var(--gray-700); min-height: 1.2em; }
.dropzone-status.error { color: var(--danger, #b91c1c); }
body[data-mode="local"] #usi-card, body[data-mode="local"] #example-links, body[data-mode="local"] .share-row { display: none !important; }

/* SVG export: a quiet corner button on every plot, shown on hover/focus. */
.svg-export-btn {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  height: 22px; padding: 0 8px; font: 600 11px/1 inherit; font-family: inherit;
  color: var(--text-soft); background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
  opacity: 0; transition: opacity 0.12s, color 0.12s, border-color 0.12s;
}
.canvas-wrap:hover .svg-export-btn, .svg-export-btn:focus-visible { opacity: 1; }
.svg-export-btn:hover { color: var(--accent); border-color: var(--accent); }

/* File-summary download link, styled as a small button. */
a.summary-download { display: inline-flex; align-items: center; text-decoration: none; flex: none; }

/* Loaded-files list in the summary card (multi-file only), collapsed by default. */
.file-list-details { margin-top: var(--sp-3); }
.file-list-details > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-soft);
  list-style: none; display: flex; align-items: center; gap: 6px; user-select: none;
}
.file-list-details > summary::-webkit-details-marker { display: none; }
.file-list-details > summary::before {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.12s; margin-left: 2px;
}
.file-list-details[open] > summary::before { transform: rotate(45deg); }
.file-list-details > summary:hover { color: var(--text); }
.file-list-wrap { max-height: 260px; margin-top: var(--sp-2); }
.file-list td.name { font-family: var(--font-mono); font-size: 11.5px; word-break: break-all; }
.file-list td.actions { white-space: nowrap; text-align: right; }
.file-list td.actions a { color: var(--accent); font-weight: 600; text-decoration: none; }
.file-list td.actions a:hover { text-decoration: underline; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }