/* ============================================================
   covary-app.css — Dashboard & Auth UI
   Extends covary.css design tokens
   ============================================================ */

/* ── Layout ─────────────────────────────────────────────────── */
.app-body {
  min-height: 100vh;
  background: var(--bg);
}

.app-layout {
  display: flex;
  min-height: 100vh;  /* no nav — full height */
}

/* ── Sidebar ────────────────────────────────────────────────── */
.app-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0 0 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
}

/* ── Sidebar logo ── */
.sidebar__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  margin-bottom: 10px;
  transition: background var(--transition);
}
.sidebar__logo:hover { background: var(--bg-raised); }
.sidebar__logo img   { height: 28px; width: auto; }
.sidebar__logo-text  {
  font-weight: 700; font-size: 1.1rem;
  color: var(--accent); letter-spacing: -.01em;
}

/* ── User / account ── */
.sidebar__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem;
  flex-shrink: 0;
}
.sidebar__name  { font-weight: 600; font-size: .85rem; color: var(--text); }
.sidebar__email { font-size: .75rem; color: var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:130px; }

.sidebar__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
}

.sidebar__link {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: .9rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  width: 100%;
}

.sidebar__link:hover {
  background: var(--bg-raised);
  color: var(--text);
}

.sidebar__link--active {
  background: var(--accent-glow);
  color: var(--accent);
  font-weight: 600;
}

.sidebar__link--logout {
  color: var(--red);
}

.sidebar__bottom {
  padding: 16px 16px 0;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.sidebar__upgrade {
  background: linear-gradient(135deg, rgba(109,74,255,0.08), rgba(109,74,255,0.02));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
  font-size: .82rem;
  color: var(--text-muted);
}

.sidebar__upgrade p { margin-bottom: 8px; }

/* ── Main content ───────────────────────────────────────────── */
.app-main {
  flex: 1;
  min-width: 0;
  padding: 36px 40px;
  max-width: 100%;
}

.app-heading {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.app-sub {
  color: var(--text-muted);
  margin-bottom: 28px;
  font-size: .95rem;
}

.app-card {
  padding: 28px;
  margin-bottom: 24px;
}

/* ── Form elements ──────────────────────────────────────────── */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.req { color: var(--red); }

.form-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: .9rem;
  font-family: var(--font-body);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-input--sm {
  padding: 6px 10px;
  font-size: .84rem;
  width: auto;
}

.form-hint {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: 5px;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radio-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: .9rem;
}

.radio-opt input { margin-top: 3px; accent-color: var(--accent); }

.queue-info {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: .84rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.submit-error {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(214,69,69,0.08);
  border: 1px solid rgba(214,69,69,0.25);
  border-radius: var(--radius);
  color: var(--red);
  font-size: .88rem;
}

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge--info { background: rgba(37,99,235,0.10); color: #2563eb; }
.badge--warn { background: rgba(183,121,31,0.12); color: var(--yellow); }
.badge--ok   { background: rgba(22,163,74,0.12);  color: #16a34a; }
.badge--err  { background: rgba(214,69,69,0.10);  color: var(--red); }
.badge--paid { background: rgba(109,74,255,0.12); color: var(--accent); }

/* ── Data table ─────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.data-table th,
.data-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.data-table th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--bg-raised);
}

.data-table tr:hover td { background: rgba(109,74,255,0.03); }

.text-muted { color: var(--text-muted); }
.mono       { font-family: var(--font-mono); font-size: .82rem; }

/* ── Spinner ────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.spinner--sm { width: 14px; height: 14px; border-width: 2px; }

.spinner-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 28px 0;
  color: var(--text-muted);
  font-size: .9rem;
}

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

/* ── Toast ──────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--text);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: .9rem;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s;
  z-index: 9999;
  max-width: 360px;
}

.toast--show { opacity: 1; transform: translateY(0); }
.toast--error { background: var(--red); }

/* ── Results / Charts ───────────────────────────────────────── */
.results-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.results-tab {
  padding: 10px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--transition), border-color var(--transition);
}

.results-tab:hover { color: var(--accent); }

.results-tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.results-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.results-toolbar select { max-width: 340px; }

.result-summary {
  padding: 10px 16px;
  background: var(--bg-raised);
  border-radius: var(--radius);
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.results-empty {
  padding: 48px;
  text-align: center;
  color: var(--text-muted);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
}

.chart-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}

.chart-heading {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
}

.plotly-chart { width: 100%; }

.chart-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: .875rem;
}

.dend-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  overflow-x: auto;
  box-shadow: var(--shadow);
}

.dend-container svg { display: block; }

/* ── Auth pages ─────────────────────────────────────────────── */
.auth-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
  gap: 18px;
}

.auth-wrap {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px 28px;
  box-shadow: var(--shadow);
}

.auth-logo {
  display: block;
  text-align: center;
  margin-bottom: 28px;
}

.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.auth-tab {
  flex: 1;
  padding: 10px 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}

.auth-tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.auth-error {
  background: rgba(214,69,69,0.08);
  border: 1px solid rgba(214,69,69,0.25);
  border-radius: var(--radius);
  padding: 10px 14px;
  color: var(--red);
  font-size: .875rem;
  margin-bottom: 16px;
}

.auth-success {
  background: rgba(22,163,74,0.08);
  border: 1px solid rgba(22,163,74,0.25);
  border-radius: var(--radius);
  padding: 10px 14px;
  color: #16a34a;
  font-size: .875rem;
  margin-bottom: 16px;
}

.alert--success {
  background: rgba(22,163,74,0.08);
  border: 1px solid rgba(22,163,74,0.25);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: #16a34a;
  font-size: .9rem;
  margin-bottom: 20px;
  text-align: center;
}

.auth-link {
  text-align: center;
  font-size: .85rem;
  color: var(--text-muted);
  margin-top: 14px;
}

.auth-link a { color: var(--accent); }

.btn--full { width: 100%; }
.btn--sm   { padding: 6px 14px; font-size: .84rem; }

/* [old responsive block removed — see mobile pass below] */

/* ── Admin panel ─────────────────────────────────────────────── */
.admin-stats {
  margin-bottom: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  box-shadow: var(--shadow);
}

.stat-val {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-lbl {
  font-size: .78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.admin-panel {
  /* panels inside admin view */
}

/* User edit modal */
.admin-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* hidden attribute must win over display:flex */
.admin-modal[hidden] {
  display: none !important;
}

.admin-modal__box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 28px 20px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow);
}

.admin-modal__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--text);
}

/* ── File upload / drop zone ─────────────────────────────────── */
.drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  background: var(--bg);
}

.drop-zone:hover,
.drop-zone.drop-active {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.drop-zone__icon {
  font-size: 2.4rem;
  margin-bottom: 10px;
  line-height: 1;
}

.drop-zone__text {
  font-size: .95rem;
  color: var(--text);
  margin-bottom: 6px;
}

.drop-zone__hint {
  font-size: .8rem;
  color: var(--text-muted);
}

.file-name-display {
  margin-top: 10px;
  font-size: .85rem;
  font-family: var(--font-mono);
  color: var(--accent);
  min-height: 1.2em;
}

/* ── URL example chips ───────────────────────────────────────── */
.url-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.url-eg {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 2px 10px;
  font-size: .76rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* ── Submit panel card flush with tabs ───────────────────────── */
.submit-panel.card {
  border-top-left-radius: 0 !important;
  border-top: none;
}

/* ── Embeddings panel layout ─────────────────────────────────── */
.emb-wrap {
  display: flex;
  gap: 0;
  align-items: flex-start;
}

.emb-chart {
  flex: 1;
  min-width: 0;
}

.emb-legend-panel {
  width: 200px;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 12px;
  max-height: 520px;
  overflow-y: auto;
}

.emb-legend-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
}

.colour-pick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.colour-swatch {
  width: 28px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.colour-pick-label {
  font-size: .82rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}

/* ── Confidence score bar ────────────────────────────────────── */
.conf-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Dendrogram zoom cursor ──────────────────────────────────── */
.dend-container svg {
  cursor: grab;
}
.dend-container svg:active {
  cursor: grabbing;
}



/* ── Sidebar account section ──────────────────────────────────── */
.sidebar__account {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--border);
  position: relative;
}

.sidebar__account-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), border-color var(--transition);
}
.sidebar__account-btn:hover {
  background: var(--bg-raised);
  border-color: var(--border);
}
.sidebar__account-btn svg {
  margin-left: auto;
  color: var(--text-muted);
  flex-shrink: 0;
}
.sidebar__account-info { flex: 1; min-width: 0; }

/* Account dropdown */
.sidebar__account-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 12px;
  right: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  z-index: 200;
  padding: 8px;
  animation: fadeUp .15s ease;
}

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

.account-menu__plan {
  padding: 6px 8px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.account-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  font-size: .875rem;
  color: var(--text);
  background: none;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition);
}
.account-menu__item:hover { background: var(--bg-raised); }
.account-menu__item--upgrade { color: var(--accent); font-weight: 600; }
.account-menu__item--danger  { color: var(--red); }
.account-menu__item svg { flex-shrink: 0; }

/* ── Sidebar nav links — updated for SVG icons ───────────────── */
.sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: .9rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  width: 100%;
}
.sidebar__link svg { flex-shrink: 0; }
.sidebar__link:hover { background: var(--bg-raised); color: var(--text); }
.sidebar__link--active { background: var(--accent-glow); color: var(--accent); font-weight: 600; }

/* ── App main — full height without nav ──────────────────────── */
.app-main {
  flex: 1;
  min-width: 0;
  padding: 36px 40px;
  max-width: 100%;
  overflow-y: auto;
  height: 100vh;
}

/* ── Analytics report section ────────────────────────────────── */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.analytics-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow);
}

.analytics-card__title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.analytics-card__value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 4px;
}

.analytics-card__sub {
  font-size: .8rem;
  color: var(--text-muted);
}

.cluster-table { margin-top: 0; }

/* ── Mobile sidebar ──────────────────────────────────────────── */


/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — full audit pass
   ══════════════════════════════════════════════════════════════ */

/* ── Results toolbar ─────────────────────────────────────────── */
.results-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* ── Share link bar ──────────────────────────────────────────── */
.share-link-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.share-link-label { font-size:.82rem; color:var(--text-muted); white-space:nowrap; }
.share-link-input {
  flex: 1;
  min-width: 0;
  padding: 5px 10px;
  font-size:.82rem;
  font-family: var(--font-mono);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

/* ── Shared public page ──────────────────────────────────────── */
.shared-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 24px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-wrap: wrap;
}
.shared-topbar__logo {
  display: flex; align-items:center; gap:8px;
  text-decoration:none; color:var(--accent);
  font-weight:700; font-size:1rem; flex-shrink:0;
}
.shared-topbar__info {
  display: flex; align-items:center; gap:10px;
  flex: 1; min-width: 0; flex-wrap: wrap;
  font-size:.88rem;
}
.shared-badge {
  background: rgba(22,163,74,0.1);
  color: #16a34a;
  border: 1px solid rgba(22,163,74,0.25);
  border-radius: 99px;
  padding: 2px 10px;
  font-size:.75rem; font-weight:600; white-space:nowrap;
}
.shared-meta { color:var(--text-muted); font-size:.82rem; }
.shared-topbar__actions { margin-left:auto; flex-shrink:0; }
.shared-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}
.shared-summary {
  padding: 10px 16px;
  background: var(--bg-raised);
  border-radius: var(--radius);
  font-size:.875rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.shared-cta {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}
.shared-cta__box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  max-width: 560px;
  text-align: center;
  box-shadow: var(--shadow);
}
.shared-cta__box h3 { font-size:1.2rem; margin-bottom:10px; }
.shared-cta__box p  { color:var(--text-muted); margin-bottom:20px; font-size:.92rem; }

/* ── btn--active state for share toggle ──────────────────────── */
.btn--active {
  background: var(--accent-glow);
  color: var(--accent);
  border-color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════


/* ── Nav backdrop (mobile) ───────────────────────────────────── */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: 52px;
  background: rgba(0,0,0,0.35);
  z-index: 398;
  animation: fadeIn .18s ease;
}
@keyframes fadeIn { from {opacity:0} to {opacity:1} }

@media (max-width: 768px) {
  .nav-backdrop { display: block; }
  .nav-backdrop[hidden] { display: none !important; }
}

/* ── Sidebar mobile account section ─────────────────────────── */
.sidebar__mobile-account {
  display: none; /* shown only on mobile via @media */
}
.sidebar__mobile-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   HAMBURGER BUTTON (hidden on desktop, shown on mobile)
   ═══════════════════════════════════════════════════════════════ */
.sidebar__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius);
  flex-shrink: 0;
  transition: background var(--transition);
}
.sidebar__hamburger:hover { background: var(--bg-raised); }
.sidebar__hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease;
  transform-origin: center;
}
/* Animated X when open */
.sidebar__hamburger.hamburger--open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.sidebar__hamburger.hamburger--open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.sidebar__hamburger.hamburger--open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — single consolidated @media block
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Layout ─────────────────────────────────────────────────── */
  .app-layout {
    display: block;          /* not flex — sidebar is now fixed */
  }

  /* ── Sidebar: slim fixed top bar ────────────────────────────── */
  .app-sidebar {
    width: 100%;
    height: 52px;
    position: fixed;
    top: 0; left: 0; right: 0;
    flex-direction: row;
    align-items: center;
    padding: 0 8px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    z-index: 400;
    overflow: visible;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    background: var(--bg-card);
  }

  /* Logo stays visible in top bar */
  .sidebar__logo {
    padding: 10px 10px 10px 4px;
    border-bottom: none;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .sidebar__logo img   { height: 24px; }
  .sidebar__logo-text  { display: none; }

  /* Show hamburger, hide nav by default */
  .sidebar__hamburger { display: flex; margin-left: auto; }

  /* Nav: hidden by default, slides down when open */
  .sidebar__nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 52px;
    left: 0; right: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 399;
    padding: 8px 12px 12px;
    gap: 2px;
    /* Hidden state */
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .18s ease;
  }

  /* Open state — toggled by JS adding sidebar--open to .app-sidebar */
  .app-sidebar.sidebar--open .sidebar__nav {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Nav links full-width in dropdown */
  .sidebar__link {
    width: 100%;
    padding: 11px 14px;
    font-size: .9rem;
    border-radius: var(--radius);
    justify-content: flex-start;
    gap: 10px;
    border-bottom: none;
  }
  .sidebar__link--active {
    background: var(--accent-glow);
    color: var(--accent);
  }

  /* Account section in hamburger dropdown */
  .sidebar__account {
    display: none;   /* moved into hamburger nav on mobile */
  }

  /* Desktop account section hidden on mobile */
  .sidebar__account { display: none; }

  /* Mobile account section shown in hamburger dropdown */
  .sidebar__mobile-account {
    display: block;
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding-top: 4px;
  }

  /* Main content pushed below fixed topbar */
  .app-main {
    padding: 16px 12px;
    max-width: 100%;
    height: auto;
    overflow-y: visible;
    margin-top: 52px;
  }

  /* ── App headings ────────────────────────────────────────────── */
  .app-heading { font-size: 1.25rem; }
  .app-card    { padding: 14px 12px; }
  .app-sub     { font-size: .88rem; }

  /* ── Results toolbar ─────────────────────────────────────────── */
  .results-toolbar { gap: 6px; flex-wrap: wrap; }
  .results-toolbar select { width: 100%; max-width: 100%; }
  .results-toolbar .btn   { font-size: .76rem; padding: 5px 9px; }

  /* ── Tabs horizontal scroll ──────────────────────────────────── */
  .results-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .results-tabs::-webkit-scrollbar { display: none; }
  .results-tab {
    flex-shrink: 0;
    font-size: .78rem;
    padding: 8px 10px;
    white-space: nowrap;
  }

  /* ── Chart controls ──────────────────────────────────────────── */
  .chart-controls { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .chart-controls label { font-size: .8rem; }

  /* ── Plotly charts ───────────────────────────────────────────── */
  #embChart  { height: 340px !important; }
  #heatChart { min-height: 280px; }

  /* ── Embedding legend stacks below chart ─────────────────────── */
  .emb-wrap { flex-direction: column; }
  .emb-legend-panel {
    width: 100%;
    border-left: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    max-height: 160px;
    overflow-y: auto;
  }

  /* ── Tables: horizontal scroll ───────────────────────────────── */
  .data-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    font-size: .76rem;
    -webkit-overflow-scrolling: touch;
  }
  .data-table th, .data-table td { padding: 6px 10px; }

  /* ── Dendrogram: scrollable container ───────────────────────── */
  .dend-container { overflow-x: auto; overflow-y: auto; max-height: 440px; }

  /* ── Stats / analytics grids ─────────────────────────────────── */
  .stats-grid     { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .analytics-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-val, .analytics-card__value { font-size: 1.2rem; }
  .stat-lbl, .analytics-card__sub   { font-size: .7rem; }
  .analytics-card  { padding: 12px 10px; }

  /* ── Submit panels ───────────────────────────────────────────── */
  .submit-panel.card { padding: 14px 12px; }
  .drop-zone { padding: 22px 14px; }
  .drop-zone__text { font-size: .84rem; }
  .url-examples { gap: 4px; }
  .url-eg { font-size: .68rem; padding: 2px 7px; }

  /* ── Admin modal: full width ─────────────────────────────────── */
  .admin-modal__box { margin: 10px; max-width: calc(100vw - 20px); }

  /* ── Share link bar: stacked ─────────────────────────────────── */
  .share-link-bar   { flex-direction: column; align-items: stretch; }
  .share-link-input { width: 100%; }

  /* ── Shared public page ──────────────────────────────────────── */
  .shared-topbar { padding: 8px 10px; gap: 8px; }
  .shared-topbar__info strong { font-size: .83rem; }
  .shared-body   { padding: 14px 10px 28px; }
  .shared-cta__box { padding: 22px 14px; }

  /* ── Queue info ──────────────────────────────────────────────── */
  .queue-info { font-size: .8rem; gap: 6px; flex-wrap: wrap; }

  /* ── Form inputs: full width except in chart controls ────────── */
  .form-input--sm { width: 100% !important; }
  .chart-controls .form-input--sm { width: auto !important; max-width: 130px !important; }
}

@media (max-width: 420px) {
  .stats-grid     { grid-template-columns: 1fr 1fr; }
  .analytics-grid { grid-template-columns: 1fr; }
  .results-tab    { font-size: .72rem; padding: 7px 8px; }
  .app-heading    { font-size: 1.1rem; }
}

/* ── Capped-dataset warning in result summary ────────────────── */
.result-summary__warning {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius);
  font-size: .85rem;
  color: var(--text);
  line-height: 1.5;
}

/* ── Covary V3 institutions / tier patch ───────────────────── */
.sidebar__logo--marks{gap:10px;align-items:center;min-height:42px}
.sidebar__logo--marks .brand-separator{width:1px;height:28px;background:rgba(148,163,184,.45);display:inline-block}
.institution-mark{height:32px;max-width:92px;object-fit:contain;border-radius:8px;background:rgba(255,255,255,.72);padding:3px;border:1px solid rgba(148,163,184,.25)}
.institution-mark--text{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border-radius:10px;font-weight:800;color:var(--accent);background:rgba(109,74,255,.10)}
.sidebar__institution{font-size:.72rem;color:var(--text-muted);line-height:1.25;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.history-headline{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.active-run-timer{margin-left:auto;min-width:210px;border:1px solid rgba(109,74,255,.18);background:rgba(109,74,255,.06);border-radius:16px;padding:12px 14px;text-align:right;box-shadow:var(--shadow-sm)}
.active-run-timer__label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:800}
.active-run-timer__value{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:1.35rem;font-weight:900;color:var(--text);line-height:1.15;margin-top:3px}
.active-run-timer__notice{font-size:.74rem;color:var(--text-muted);line-height:1.35;margin-top:5px;max-width:280px}
.job-privacy{margin-top:4px;font-size:.72rem;color:#16a34a;font-weight:700}
.job-privacy--private{color:var(--text-muted);font-weight:600}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.text-muted{color:var(--text-muted)}
.results-tab:disabled{opacity:.55;cursor:not-allowed}
@media (max-width:720px){
  .active-run-timer{width:100%;text-align:left;margin-left:0}
  .form-grid-2{grid-template-columns:1fr}
  .sidebar__logo--marks .institution-mark{max-width:72px}
}
.shared-institution-mark{display:flex;align-items:center;gap:12px;margin:14px 0 20px;padding:14px 16px;border:1px solid rgba(109,74,255,.16);background:rgba(109,74,255,.055);border-radius:16px;color:var(--text)}
.shared-institution-mark img{height:38px;max-width:110px;object-fit:contain;border-radius:8px;background:#fff;padding:4px;border:1px solid rgba(148,163,184,.25)}
.shared-institution-mark__label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:800;margin-bottom:2px}

.sidebar__institution-add{margin:8px 12px 0;border:1px dashed rgba(109,74,255,.35);background:rgba(109,74,255,.06);color:var(--accent);border-radius:12px;padding:8px 10px;font-weight:800;font-size:.78rem;cursor:pointer;text-align:center}
.sidebar__institution-add:hover{background:rgba(109,74,255,.11)}

/* ── Usage / tier feature panel ───────────────────────────── */
.usage-panel { margin-bottom: 20px; }
.usage-panel__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.usage-panel__head h3 { margin:0 0 4px; font-size:1rem; font-weight:700; }
.usage-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.usage-card { border:1px solid var(--border); border-radius:14px; padding:12px; background:rgba(255,255,255,.03); }
.usage-card span { display:block; color:var(--text-muted); font-size:.78rem; margin-bottom:4px; }
.usage-card strong { font-size:.98rem; }
.feature-compare { margin-top:14px; border-top:1px solid var(--border); padding-top:12px; }
.feature-compare summary { cursor:pointer; font-weight:700; color:var(--text); }
.feature-compare__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
.feature-compare__grid > div { border:1px solid var(--border); border-radius:14px; padding:12px; }
.feature-compare__grid strong { display:block; margin-bottom:6px; }
.feature-compare__grid span { color:var(--text-muted); font-size:.84rem; line-height:1.45; }
.institution-match-note { margin-top:8px; border:1px solid rgba(59,130,246,.25); background:rgba(59,130,246,.08); color:var(--text); padding:9px 10px; border-radius:12px; font-size:.84rem; }
@media (max-width: 900px) {
  .usage-cards, .feature-compare__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .usage-panel__head { flex-direction:column; }
  .usage-cards, .feature-compare__grid { grid-template-columns:1fr; }
}

/* ── Pro quote, citation, support, and app resource pages ───────────── */
.pro-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:18px;align-items:start}
.quote-status-card{display:flex;flex-direction:column;gap:10px}
.quote-status-row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border);padding-bottom:8px}
.quote-status-row span{color:var(--text-muted);font-size:.84rem}.quote-status-row strong{font-weight:800}.quote-note{background:rgba(109,74,255,.06);border:1px solid rgba(109,74,255,.14);border-radius:14px;padding:12px}.quote-note p{margin:6px 0 0;color:var(--text-muted);line-height:1.45}.pro-terms-card{margin-top:18px}.pro-terms-box{max-height:340px;overflow:auto;border:1px solid var(--border);border-radius:14px;padding:14px;background:rgba(255,255,255,.03)}.pro-terms-box p{margin:0 0 12px;color:var(--text-muted);line-height:1.55}.citation-list{display:grid;gap:12px}.citation-card{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;border:1px solid var(--border);background:var(--card);border-radius:16px;padding:14px}.citation-card>div{min-width:0}.citation-card p{margin:6px 0 0;color:var(--text-muted);line-height:1.5}.citation-card pre{margin:8px 0 0;color:var(--text-muted);line-height:1.45;white-space:pre-wrap;word-break:break-word;font-size:.86rem;background:rgba(148,163,184,.12);border:1px solid var(--border);border-radius:12px;padding:12px}.citation-card--bibtex{align-items:flex-start}.support-stack{display:grid;grid-template-columns:1fr;gap:18px}.support-links{display:flex;flex-direction:column;gap:10px}.support-links a{padding:10px 12px;border:1px solid var(--border);border-radius:12px;text-decoration:none;color:var(--accent);font-weight:700}.support-guide-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:0}.support-guide-grid p{color:var(--text-muted);line-height:1.55}.feature-compare--open{margin-top:18px}.feature-compare--open h3{margin-bottom:12px}
@media (max-width:900px){.pro-grid,.support-guide-grid{grid-template-columns:1fr}.citation-card{flex-direction:column}.quote-status-row{flex-direction:column;gap:2px}}


/* Expandable support guides */
.support-guide-grid--accordion {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.support-guide-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
}
.support-guide-card summary::-webkit-details-marker { display: none; }
.support-guide-card summary h3 { margin: 0; }
.support-guide-card summary span {
  color: var(--text-muted);
  font-size: .82rem;
  white-space: nowrap;
}
.support-guide-body {
  margin-top: 12px;
  color: var(--text-soft);
  line-height: 1.65;
}
.support-guide-body p { margin: 0 0 10px; }
.support-guide-body ul { margin: 8px 0 0 1.1rem; padding: 0; }
.support-guide-body li { margin: 6px 0; }
.support-guide-body code {
  font-size: .88em;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(148,163,184,.16);
}

/* ── Pro terms addendum / active Pro state ───────────────────── */
.pro-current-card h3 { margin: 12px 0 8px; }
.pro-current-card .btn { margin-top: 12px; }
.pro-terms-card h3 { margin-top: 8px; }
.pro-terms-box--formal { max-height: 430px; }
.pro-terms-box--formal p { font-size: .9rem; }
.pro-terms-box--formal strong { color: var(--text); }

/* ── Pro Browser Visualizer ─────────────────────────────────── */
.local-viz-privacy{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:18px;
  border:1px solid rgba(34,197,94,.20);
  background:rgba(34,197,94,.055);
}
.local-viz-privacy h3{margin:10px 0 6px;font-size:1rem;font-weight:800}
.local-viz-privacy p{margin:0;color:var(--text-muted);line-height:1.55;max-width:880px}
.local-viz-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.local-viz-card h3{margin:0 0 8px;font-size:1rem;font-weight:800}
.local-viz-card .btn{margin-top:8px}
.local-viz-status{margin:0 0 14px;border-radius:14px;padding:11px 13px;font-size:.88rem;font-weight:700;border:1px solid var(--border);background:rgba(148,163,184,.08);color:var(--text)}
.local-viz-status--success{border-color:rgba(34,197,94,.25);background:rgba(34,197,94,.08);color:#047857}
.local-viz-status--error{border-color:rgba(239,68,68,.25);background:rgba(239,68,68,.08);color:#dc2626}
.local-viz-output{display:grid;gap:18px}
.local-viz-result__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.local-viz-result__head h3{margin:0 0 4px;font-size:1rem;font-weight:800}
.local-viz-canvas-wrap{width:100%;overflow:auto;border:1px solid var(--border);border-radius:16px;background:#fff;padding:10px}
.local-viz-canvas-wrap canvas{display:block;max-width:none;border-radius:10px}
.local-viz-summary{margin-top:16px;display:grid;gap:16px}
.local-viz-pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:4px}
.local-viz-pair-grid h4{font-size:.92rem;margin:0 0 8px;font-weight:800}
.data-table--compact th,.data-table--compact td{font-size:.78rem;padding:7px 8px}
@media (max-width: 980px){
  .local-viz-grid,.local-viz-pair-grid{grid-template-columns:1fr}
  .local-viz-canvas-wrap canvas{width:900px;height:auto}
}
@media (max-width: 560px){
  .local-viz-privacy{padding:14px}
  .local-viz-canvas-wrap{padding:6px;border-radius:12px}
  .local-viz-canvas-wrap canvas{width:760px;height:auto}
}

/* Coalescence Analysis + enriched local Browser Visualizer */
.coalescence-intro code,
.local-viz-section code { background:rgba(15,23,42,.06); border:1px solid var(--border); border-radius:7px; padding:1px 5px; font-size:.86em; }
.coalescence-controls { row-gap:10px; }
.coalescence-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start; }
.coalescence-cards { margin-bottom:14px; }
.coalescence-tables { align-items:start; }
.matrix-omitted { padding:26px 20px; border:1px dashed var(--border); border-radius:16px; background:rgba(148,163,184,.08); color:var(--text-muted); }
.local-viz-section { margin-top:22px; padding-top:18px; border-top:1px solid var(--border); }
.local-viz-section:first-of-type { margin-top:0; padding-top:0; border-top:0; }
.local-viz-section h3 { margin:0 0 10px; font-size:1rem; font-weight:800; }
.local-viz-canvas-wrap--short canvas { width:100%; max-width:1000px; height:auto; }
.local-coalescence-controls { margin:12px 0; }
.local-coalescence-output { margin-top:14px; display:grid; gap:16px; }
.local-dendrogram-wrap { overflow:auto; border-radius:16px; background:#fff; }

@media (max-width: 980px) {
  .coalescence-grid { grid-template-columns:1fr; }
}


/* ── Capped-result guidance + mobile optimization patch ─────── */
.inline-link{color:var(--accent);text-decoration:none;font-weight:800}
.inline-link:hover{text-decoration:underline}
.matrix-omitted--center{text-align:center;color:var(--text-muted)}
.btn--danger{color:#dc2626!important;border-color:rgba(220,38,38,.25)!important;background:rgba(220,38,38,.035)!important}
.btn--danger:hover{background:rgba(220,38,38,.08)!important}
.coalescence-dend-container,.local-dendrogram-wrap{-webkit-overflow-scrolling:touch;max-width:100%}
.coalescence-dend-container svg,.local-dendrogram-wrap svg{max-width:none}
@media (max-width: 760px){
  .coalescence-intro{font-size:.9rem;line-height:1.55}
  .coalescence-controls,.local-coalescence-controls{grid-template-columns:1fr!important}
  .coalescence-grid{gap:14px}
  .coalescence-grid .chart-section,.local-viz-section{padding:14px 12px!important;margin-top:14px!important}
  .coalescence-grid .plotly-chart{min-width:680px;min-height:360px}
  .coalescence-grid .chart-section:first-child{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .coalescence-dend-container{padding:12px;overflow:auto!important;max-height:520px}
  .local-viz-result__head{flex-direction:column;align-items:stretch}
  .local-viz-result__head .badge{align-self:flex-start}
  .local-viz-section h3,.chart-heading{font-size:.95rem}
  .local-viz-summary .usage-cards,.coalescence-cards.analytics-grid{grid-template-columns:1fr 1fr!important}
  .local-viz-canvas-wrap{max-width:100%;overflow:auto}
  .local-viz-canvas-wrap canvas{width:680px;height:auto}
  .local-viz-canvas-wrap--short canvas{width:640px;max-width:none}
  .local-viz-pair-grid{grid-template-columns:1fr!important}
  .local-dendrogram-wrap{overflow:auto;max-height:520px}
  .matrix-omitted{padding:18px 14px}
}
@media (max-width: 420px){
  .local-viz-summary .usage-cards,.coalescence-cards.analytics-grid{grid-template-columns:1fr!important}
  .coalescence-grid .plotly-chart{min-width:620px}
  .local-viz-canvas-wrap canvas{width:620px}
}

/* AI-ready result prompt helper */
.ai-result-helper {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid rgba(109,74,255,.16);
  background: linear-gradient(135deg, rgba(109,74,255,.08), rgba(255,255,255,.92));
}
.ai-result-helper__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ai-result-helper__head h2 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--text);
}
.ai-result-helper__details {
  margin-top: 14px;
}
.ai-result-helper__details summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--primary);
  list-style-position: inside;
}
.ai-result-helper__body {
  margin-top: 12px;
  display: grid;
  gap: 12px;
}
.ai-result-helper__body ol {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--muted);
  line-height: 1.65;
}
.ai-result-helper__textarea {
  min-height: 360px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .82rem;
  line-height: 1.55;
  white-space: pre;
}
@media (max-width: 680px) {
  .ai-result-helper { padding: 16px; }
  .ai-result-helper__head { display: block; }
  .ai-result-helper__head .btn { width: 100%; margin-top: 12px; }
  .ai-result-helper__textarea { min-height: 300px; font-size: .78rem; }
}


/* Coalescence Analysis: force requested one-column stacked order */
.coalescence-output--stacked,
.local-coalescence-output {
  display: block !important;
}
.coalescence-stack-section,
.local-coalescence-stack-section {
  width: 100%;
  margin: 0 0 18px 0;
}
.coalescence-stack-section:last-child,
.local-coalescence-stack-section:last-child {
  margin-bottom: 0;
}
.coalescence-output--stacked .plotly-chart,
.local-coalescence-stack-section .local-viz-canvas-wrap,
.local-coalescence-stack-section .local-dendrogram-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.coalescence-cards--stacked {
  margin-bottom: 12px;
}
.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 760px) {
  .coalescence-stack-section,
  .local-coalescence-stack-section {
    padding: 14px 12px !important;
    margin-bottom: 14px;
  }
  .coalescence-output--stacked .plotly-chart {
    min-width: 620px;
  }
  .local-coalescence-stats.usage-cards,
  .coalescence-cards--stacked.analytics-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Storage / local visualizer refinements ─────────────────── */
.storage-info-card h3{margin:.55rem 0 .45rem;font-size:1.05rem;font-weight:800}
.storage-notes{margin:12px 0 0 1.1rem;padding:0;color:var(--text-muted);line-height:1.55}
.storage-notes li{margin:6px 0}
.local-viz-grid{grid-template-columns:1fr!important}
.local-viz-grid.is-disabled{opacity:.78}
.local-viz-grid.is-disabled input,.local-viz-grid.is-disabled button,.local-viz-grid.is-disabled select{cursor:not-allowed}
.local-viz-output,.local-viz-result--stacked,.local-viz-summary{display:grid!important;grid-template-columns:1fr!important;gap:18px!important}
.local-viz-section{display:block;width:100%}
.local-viz-pair-grid{grid-template-columns:1fr!important}
.local-viz-result--stacked .usage-cards{grid-template-columns:1fr!important}
.external-storage-notice h3{margin:.55rem 0 .45rem;font-size:1.05rem;font-weight:800}
@media (max-width:760px){
  .local-viz-canvas-wrap canvas{width:640px;max-width:none}
  .local-viz-result__head{display:grid;grid-template-columns:1fr;gap:8px}
}
.job-privacy--external{color:#92400e;background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.18)}


/* Pro benefits highlight in Usage & Limits */
.pro-benefits-highlight {
  margin-top: 18px;
  border: 1px solid rgba(99, 102, 241, 0.18);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(14, 165, 233, 0.06)), var(--card-bg, #fff);
}
.pro-benefits-highlight__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.pro-benefits-highlight__head h3 {
  margin: 0 0 4px;
}
.pro-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.pro-benefit-card {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.72);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pro-benefit-card strong {
  font-size: 0.96rem;
}
.pro-benefit-card span {
  color: var(--muted, #64748b);
  font-size: 0.92rem;
  line-height: 1.45;
}
.pro-benefits-highlight__cta {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
@media (max-width: 760px) {
  .pro-benefits-highlight__head {
    display: block;
  }
  .pro-benefits-highlight__head .badge {
    margin-bottom: 10px;
  }
  .pro-benefits-grid {
    grid-template-columns: 1fr;
  }
  .pro-benefit-card {
    padding: 12px;
  }
}

/* Download recovery helper */
.download-assist {
  position: relative;
  border: 1px solid rgba(245,158,11,.35);
  background: linear-gradient(135deg, rgba(255,251,235,.96), rgba(255,255,255,.98));
  color: var(--text-main, #111827);
  border-radius: 18px;
  padding: 16px 18px;
  margin: 0 0 18px;
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
}
.download-assist h4 { margin: 0 32px 8px 0; font-size: 1rem; font-weight: 800; }
.download-assist p { margin: 0 0 10px; color: var(--text-muted, #64748b); line-height: 1.55; }
.download-assist__actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.download-assist__close {
  position: absolute; top: 10px; right: 12px; border: 0; background: transparent;
  font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--text-muted, #64748b);
}

/* Login institution showcase */
.auth-institutions {
  width: min(1040px, calc(100vw - 32px));
  margin: 0 auto;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,23,42,.07);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 14px 34px rgba(15,23,42,.06);
}
.auth-institutions__head {
  display:block;
  text-align:center;
  max-width:820px;
  margin:0 auto 12px;
}
.auth-institutions__head h2 { font-size:1rem; margin:0 0 5px; font-weight:800; }
.auth-institutions__head p { margin:0; color:var(--text-muted,#64748b); font-size:.86rem; line-height:1.45; }
.auth-institutions__grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px;
  max-height:360px;
  overflow:auto;
  padding:2px;
}
.auth-institution-card {
  display:flex; align-items:center; gap:8px; min-height:54px; padding:8px 9px;
  border:1px solid rgba(15,23,42,.07); border-radius:15px; background:rgba(255,255,255,.88);
}
.auth-institution-card__logo {
  width:34px; height:34px; border-radius:11px; background:rgba(15,23,42,.04);
  display:grid; place-items:center; overflow:hidden; flex:0 0 auto; font-weight:800; font-size:.78rem;
}
.auth-institution-card__logo img { width:100%; height:100%; object-fit:contain; padding:5px; }
.auth-institution-card strong { display:block; font-size:.8rem; line-height:1.16; }
.auth-institution-card span { display:block; color:var(--text-muted,#64748b); font-size:.72rem; margin-top:2px; }
@media (max-width: 680px) {
  .auth-body { padding: 18px 12px; justify-content:flex-start; }
  .auth-institutions { width: calc(100vw - 24px); padding:13px; }
  .auth-institutions__grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:320px; }
}

/* Login two-panel institution layout refinement */
.auth-shell {
  width: min(1120px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: minmax(340px, 430px) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}
.auth-shell--single {
  width: min(430px, calc(100vw - 32px));
  display: block;
}
.auth-form-panel {
  display: flex;
  align-items: center;
  min-width: 0;
}
.auth-form-panel .auth-wrap {
  max-width: none;
  width: 100%;
  margin: 0;
}
.auth-institutions {
  width: 100%;
  margin: 0;
  background: transparent;
  border-radius: 24px;
  padding: 20px;
  min-height: 100%;
  overflow: hidden;
}
.auth-institutions__details {
  height: 100%;
}
.auth-institutions__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 850;
  letter-spacing: -.01em;
  color: var(--text);
}
.auth-institutions__summary::-webkit-details-marker { display: none; }
.auth-institutions__summary::after {
  content: '⌄';
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
  flex: 0 0 auto;
}
.auth-institutions__details[open] .auth-institutions__summary::after { transform: rotate(180deg); }
.auth-institutions__summary small {
  margin-left: auto;
  color: var(--text-muted);
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
}
.auth-institutions__details[open] .auth-institutions__summary { margin-bottom: 14px; }
.auth-institutions__head {
  text-align: left;
  max-width: none;
  margin: 0 0 14px;
}
.auth-institutions__head h2 {
  color: var(--text);
  font-size: 1.05rem;
  margin: 0 0 6px;
  font-weight: 900;
}
.auth-institutions__head p {
  color: var(--text-muted)
  font-size: .88rem;
  line-height: 1.55;
  margin: 0;
}
.auth-institutions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 10px;
  max-height: min(560px, calc(100vh - 260px));
  overflow: auto;
  padding: 2px 4px 2px 2px;
}
.auth-institution-card {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
.auth-institution-card__logo {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  color: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
  font-weight: 900;
  font-size: .78rem;
}
.auth-institution-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
  background: rgba(255,255,255,.94);
}
.auth-institution-card strong {
  color: var(--text-main);
  display: block;
  font-size: .8rem;
  line-height: 1.18;
}
.auth-institution-card span {
  display: block;
  color: var(--text);
  font-size: .72rem;
  margin-top: 3px;
}

@media (max-width: 900px) {
  .auth-body {
    justify-content: flex-start;
    padding: 18px 12px;
  }
  .auth-shell {
    width: min(520px, calc(100vw - 24px));
    display: block;
  }
  .auth-form-panel .auth-wrap {
    margin: 0 auto;
  }
  .auth-institutions {
    margin-top: 16px;
    min-height: 0;
    padding: 14px;
    border-radius: 20px;
  }
  .auth-institutions__details:not([open]) .auth-institutions__head,
  .auth-institutions__details:not([open]) .auth-institutions__grid {
    display: none;
  }
  .auth-institutions__details[open] .auth-institutions__summary { margin-bottom: 12px; }
  .auth-institutions__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 320px;
  }
  .auth-institution-card {
    align-items: flex-start;
    min-height: 64px;
    padding: 8px;
  }
}

@media (max-width: 380px) {
  .auth-institutions__grid { grid-template-columns: 1fr; }
}