/* dan-cp shared component classes — keyed off tokens.css.
 *
 * Anything visible across multiple templates lives here. Page-
 * specific overrides live in their own page CSS (e.g. login.css).
 *
 * Load order: tokens.css → components.css → page-specific.css
 *
 * Rules:
 *  - Reference tokens; never hardcode color/spacing.
 *  - No `!important` anywhere in this file (cascade discipline).
 *  - No floating labels. No marketing decoration.
 */

/* ===== Layout primitives ===================================== */

.app-shell {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.app-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-content {
  padding: var(--space-6) var(--space-8);
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .app-content { padding: var(--space-4); }
}

/* ===== Sidebar ============================================== */

.sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  background: var(--surface-1);
  border-right: 1px solid var(--surface-3);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
}

.sidebar-header {
  height: var(--topbar-height);
  padding: 0 var(--space-5);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--surface-3);
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}

.sidebar-nav {
  flex: 1 1 auto;
  padding: var(--space-4) var(--space-2);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background var(--transition-normal), color var(--transition-normal);
}
.sidebar-link:hover {
  background: var(--surface-2);
  color: var(--text-strong);
  text-decoration: none;
}
.sidebar-link[aria-current="page"],
.sidebar-link.is-active {
  background: var(--accent-soft);
  color: var(--text-strong);
}

.sidebar-footer {
  border-top: 1px solid var(--surface-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

/* ===== Topbar =============================================== */

.topbar {
  height: var(--topbar-height);
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--surface-3);
  background: var(--surface-1);
}

.topbar-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-strong);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ===== Buttons ============================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-normal),
              border-color var(--transition-normal),
              color var(--transition-normal),
              transform var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--block { width: 100%; }
.btn--lg    { padding: 12px 20px; font-size: var(--text-base); }
.btn--sm    { padding: 6px 12px; font-size: var(--text-sm); }

.btn-primary {
  background: var(--accent);
  color: var(--text-on-accent);
}
.btn-primary:hover  { background: var(--accent-hover); color: var(--text-on-accent); text-decoration: none; }
.btn-primary:active { background: var(--accent-active); transform: translateY(1px); }

.btn-secondary {
  background: var(--surface-2);
  color: var(--text-strong);
  border-color: var(--surface-3);
}
.btn-secondary:hover  { background: var(--surface-3); color: var(--text-strong); text-decoration: none; }
.btn-secondary:active { transform: translateY(1px); }

.btn-danger {
  background: var(--error);
  color: var(--text-on-accent);
}
.btn-danger:hover  { background: var(--error-dark); color: var(--text-on-accent); text-decoration: none; }
.btn-danger:active { transform: translateY(1px); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text-strong); text-decoration: none; }

/* ===== Form fields ========================================== */

.field {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-4);
}
.field-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  font-weight: 500;
}
.field-helper {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-subtle);
}
.field-error:not([hidden]) {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--error);
}
.field-actions {
  margin-top: var(--space-6);
}

.input {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-strong);
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-normal),
              box-shadow var(--transition-normal);
}
.input::placeholder { color: var(--text-subtle); }
.input:hover        { border-color: var(--text-muted); }
.input:focus        { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.input[aria-invalid="true"] { border-color: var(--error); }
.input--sm          { padding: 6px 12px; font-size: var(--text-sm); }
.input--dark        { background: var(--surface-0); }
.input.input-error  { border-color: var(--error); }

.btn.btn-loading {
  opacity: 0.75;
  cursor: wait;
}

/* ===== Card ================================================= */

.card {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
}

.card--compact { padding: var(--space-6); }
.card--bare    { background: transparent; border: none; box-shadow: none; padding: 0; }

/* ===== Badge / pill / chip =================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 10px;
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--surface-3);
}
.badge--accent  { background: var(--accent-soft);  color: var(--accent); border-color: transparent; }
.badge--success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge--warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.badge--error   { background: var(--error-soft);   color: var(--error);   border-color: transparent; }
.badge--info    { background: var(--info-soft);    color: var(--info);    border-color: transparent; }

/* ===== Alert / banner ======================================== */

.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--surface-3);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--text-sm);
}
.alert--error   { background: var(--error-soft);   border-color: var(--error);   color: var(--text-strong); }
.alert--success { background: var(--success-soft); border-color: var(--success); color: var(--text-strong); }
.alert--warning { background: var(--warning-soft); border-color: var(--warning); color: var(--text-strong); }
.alert--info    { background: var(--info-soft);    border-color: var(--info);    color: var(--text-strong); }

.alert__msg    { display: block; }
.alert__action {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--accent);
}
.alert__action:hover { color: var(--accent-hover); }

/* ===== Modal ================================================= */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--surface-overlay);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  z-index: 50;
}
.modal {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

/* ===== Empty state =========================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-muted);
}
.empty-state__title { font-size: var(--text-lg); color: var(--text-strong); margin-bottom: var(--space-2); }
.empty-state__body  { max-width: 360px; margin-bottom: var(--space-6); }

/* ===== Skeleton (loading) ==================================== */

.skeleton {
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== Tabs ================================================== */

.tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--surface-3);
}
.tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--transition-normal), border-color var(--transition-normal);
}
.tab:hover { color: var(--text-strong); }
.tab[aria-selected="true"],
.tab.is-active {
  color: var(--text-strong);
  border-bottom-color: var(--accent);
}

/* ===== Spinner (one canonical implementation) ================ */

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-rotate 600ms linear infinite;
  vertical-align: middle;
}
.spinner--lg { width: 24px; height: 24px; border-width: 3px; }
.spinner[hidden] { display: none; }
@keyframes spinner-rotate { to { transform: rotate(360deg); } }

/* ===== Page containers (semantic wrappers for content pages) ===== */

.page-container {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.page-container--narrow { max-width: 48rem; }

/* Breadcrumb tail segments — used by child templates filling the
   {% block breadcrumb %} in base.html. Pairs with .topbar-breadcrumb
   in app.css which owns the row layout. */
.topbar-breadcrumb__divider { color: var(--text-subtle); }
.topbar-breadcrumb__current { color: var(--text); }
.topbar-breadcrumb__link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
}
.topbar-breadcrumb__link:hover {
  color: var(--text);
  text-decoration: underline;
}

/* Generic display:none utility. Replaces the Tailwind `hidden`
   shim relied on by inline class-list toggles. */
.is-hidden { display: none; }

/* ===== Visually hidden / sr-only ============================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================
 * Venture detail page components (app/templates/venture_detail.html)
 * Page-scoped under .venture-detail to avoid global bleed.
 * Token-only — no hardcoded colors (only literal hex tints noted),
 * no !important, no Tailwind.
 * ============================================================== */

.venture-detail {
  max-width: 64rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ---------- Stack / row primitives -------------------------- */
.venture-detail .vd-stack         { display: flex; flex-direction: column; }
.venture-detail .vd-stack--2      { gap: var(--space-2); }
.venture-detail .vd-stack--3      { gap: var(--space-3); }
.venture-detail .vd-stack--4      { gap: var(--space-4); }
.venture-detail .vd-stack--5      { gap: var(--space-5); }
.venture-detail .vd-stack--6      { gap: var(--space-6); }

.venture-detail .vd-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.venture-detail .vd-row-start {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.venture-detail .vd-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.venture-detail .vd-row--2  { gap: var(--space-2); }
.venture-detail .vd-row--4  { gap: var(--space-4); }
.venture-detail .vd-row--wrap { flex-wrap: wrap; }
.venture-detail .vd-row-end {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* ---------- Card surfaces ----------------------------------- */
.venture-detail .vd-card {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.venture-detail .vd-card--lg     { padding: var(--space-6); }
.venture-detail .vd-card--center { text-align: center; }
.venture-detail .vd-card--accent { border-color: var(--accent); border-width: 2px; }
.venture-detail .vd-card--success-soft { border-color: var(--success); }
.venture-detail .vd-card--warning-soft { border-color: var(--warning); }
.venture-detail .vd-card--inset {
  background: var(--surface-2);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.venture-detail .vd-card--nested {
  background: var(--surface-0);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

/* ---------- Grids ------------------------------------------- */
.venture-detail .vd-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
.venture-detail .vd-grid--gap-3 { gap: var(--space-3); }

@media (min-width: 640px) {
  .venture-detail .vd-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .venture-detail .vd-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .venture-detail .vd-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .venture-detail .vd-grid--5 { grid-template-columns: repeat(5, 1fr); }
}
.venture-detail .vd-grid--2-mobile { grid-template-columns: repeat(2, 1fr); }

/* ---------- Typography utilities ---------------------------- */
.venture-detail .vd-eyebrow {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
.venture-detail .vd-eyebrow--small  { font-weight: 600; }
.venture-detail .vd-h1 {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
}
.venture-detail .vd-h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
}
.venture-detail .vd-body-sm  { font-size: var(--text-sm); color: var(--text); margin: 0; }
.venture-detail .vd-body-xs  { font-size: var(--text-xs); color: var(--text-muted); margin: 0; }

.venture-detail .vd-text-strong  { color: var(--text-strong); }
.venture-detail .vd-text-body    { color: var(--text); }
.venture-detail .vd-text-muted   { color: var(--text-muted); }
.venture-detail .vd-text-subtle  { color: var(--text-subtle); }
.venture-detail .vd-text-success { color: var(--success); }
.venture-detail .vd-text-warning { color: var(--warning); }
.venture-detail .vd-text-error   { color: var(--error); }
.venture-detail .vd-text-info    { color: var(--info); }
.venture-detail .vd-text-accent  { color: var(--accent); }
.venture-detail .vd-text-mono    { font-family: var(--font-mono); }

/* ---------- BEM typography helpers (replace inline styles) -- */
.venture-detail__numeric { font-variant-numeric: tabular-nums; }
.venture-detail__prose   { line-height: 1.6; }
.venture-detail__bold    { font-weight: 600; }

/* ---------- Margin / padding helpers ------------------------ */
.venture-detail .vd-spc-t-1 { margin-top: var(--space-1); }
.venture-detail .vd-spc-t-2 { margin-top: var(--space-2); }
.venture-detail .vd-spc-t-3 { margin-top: var(--space-3); }
.venture-detail .vd-spc-t-4 { margin-top: var(--space-4); }
.venture-detail .vd-spc-t-6 { margin-top: var(--space-6); }
.venture-detail .vd-spc-b-1 { margin-bottom: var(--space-1); }
.venture-detail .vd-spc-b-2 { margin-bottom: var(--space-2); }
.venture-detail .vd-spc-b-3 { margin-bottom: var(--space-3); }
.venture-detail .vd-spc-b-4 { margin-bottom: var(--space-4); }
.venture-detail .vd-spc-b-6 { margin-bottom: var(--space-6); }
.venture-detail .vd-spc-l-2 { margin-left: var(--space-2); }
.venture-detail .vd-spc-l-3 { margin-left: var(--space-3); }
.venture-detail .vd-pad-3 { padding: var(--space-3); }
.venture-detail .vd-pad-4 { padding: var(--space-4); }
.venture-detail .vd-pad-6 { padding: var(--space-6); }
.venture-detail .vd-pad-y-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.venture-detail .vd-pad-y-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.venture-detail .vd-pad-y-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.venture-detail .vd-pad-y-8 { padding-top: 32px; padding-bottom: 32px; }
.venture-detail .vd-pad-t-4 { padding-top: var(--space-4); border-top: 1px solid var(--surface-3); }

/* ---------- Phase pill (header + memo recommendation) -------- */
.venture-detail .vd-phase-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}
.venture-detail .vd-phase-pill--research { background: var(--phase-research-bg); color: var(--phase-research-text); }
.venture-detail .vd-phase-pill--validate { background: var(--phase-validate-bg); color: var(--phase-validate-text); }
.venture-detail .vd-phase-pill--build    { background: var(--phase-build-bg);    color: var(--phase-build-text); }
.venture-detail .vd-phase-pill--launch   { background: var(--phase-launch-bg);   color: var(--phase-launch-text); }
.venture-detail .vd-phase-pill--monitor  { background: var(--phase-monitor-bg);  color: var(--phase-monitor-text); }
.venture-detail .vd-phase-pill--killed   { background: var(--phase-killed-bg);   color: var(--phase-killed-text); }
.venture-detail .vd-phase-pill--neutral  { background: var(--surface-2);         color: var(--text-muted); }
.venture-detail .vd-phase-pill--success  { background: var(--success-soft);      color: var(--success); }

/* ---------- Status pill (smaller) --------------------------- */
.venture-detail .vd-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
}
.venture-detail .vd-status-pill--success { background: var(--success-soft); color: var(--success); }
.venture-detail .vd-status-pill--warning { background: var(--warning-soft); color: var(--warning); }
.venture-detail .vd-status-pill--error   { background: var(--error-soft);   color: var(--error); }
.venture-detail .vd-status-pill--info    { background: var(--info-soft);    color: var(--info); }
.venture-detail .vd-status-pill--neutral { background: var(--surface-2);    color: var(--text-muted); }

.venture-detail .vd-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text-muted);
}
.venture-detail .vd-tag--bare { padding: 0; background: transparent; }

/* ---------- Live-site banner --------------------------------- */
.venture-detail .vd-live-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-3);
  background: var(--surface-1);
  text-decoration: none;
  transition: border-color var(--transition-normal);
}
.venture-detail .vd-live-banner:hover { border-color: var(--text-muted); }
.venture-detail .vd-live-banner--live {
  background: linear-gradient(to right, var(--success-soft), var(--success-lighter));
  border-color: var(--success);
}
.venture-detail .vd-live-banner--live:hover { border-color: var(--success); }
.venture-detail .vd-live-banner__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.venture-detail .vd-live-banner__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}
.venture-detail .vd-live-banner__avatar--live { background: var(--success-dark); }
.venture-detail .vd-live-banner__avatar--idle { background: var(--surface-3); }
.venture-detail .vd-live-banner__icon { width: 20px; height: 20px; color: var(--text-on-accent); }
.venture-detail .vd-live-banner__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-on-accent);
}
.venture-detail .vd-live-banner__cta--live { background: var(--success-dark); }
.venture-detail .vd-live-banner__cta--live:hover { background: var(--success); }
.venture-detail .vd-live-banner__cta--idle { background: var(--surface-2); color: var(--text); }
.venture-detail .vd-live-banner__cta-icon { width: 16px; height: 16px; }
.venture-detail .vd-live-banner__url { color: var(--text-strong); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Phase timeline ----------------------------------- */
.venture-detail .vd-timeline {
  display: flex;
  align-items: center;
  width: 100%;
  overflow-x: auto;
  padding-bottom: var(--space-1);
}
.venture-detail .vd-timeline__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  min-width: 80px;
}
.venture-detail .vd-timeline__circle {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  border: 2px solid var(--surface-3);
  background: var(--surface-1);
  color: var(--text-subtle);
}
.venture-detail .vd-timeline__circle--done    { border-color: var(--text-subtle); background: var(--surface-3); color: var(--text-muted); }
.venture-detail .vd-timeline__circle--current.vd-phase-research { border-color: var(--phase-research-text); background: var(--phase-research-bg); color: var(--phase-research-text); }
.venture-detail .vd-timeline__circle--current.vd-phase-validate { border-color: var(--phase-validate-text); background: var(--phase-validate-bg); color: var(--phase-validate-text); }
.venture-detail .vd-timeline__circle--current.vd-phase-build    { border-color: var(--phase-build-text);    background: var(--phase-build-bg);    color: var(--phase-build-text); }
.venture-detail .vd-timeline__circle--current.vd-phase-launch   { border-color: var(--phase-launch-text);   background: var(--phase-launch-bg);   color: var(--phase-launch-text); }
.venture-detail .vd-timeline__circle--current.vd-phase-monitor  { border-color: var(--phase-monitor-text);  background: var(--phase-monitor-bg);  color: var(--phase-monitor-text); }
.venture-detail .vd-timeline__circle--current.vd-phase-killed   { border-color: var(--phase-killed-text);   background: var(--phase-killed-bg);   color: var(--phase-killed-text); }
.venture-detail .vd-timeline__icon { width: 14px; height: 14px; }
.venture-detail .vd-timeline__label {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  text-align: center;
  line-height: 1.25;
  color: var(--text-subtle);
}
.venture-detail .vd-timeline__label--done   { color: var(--text-muted); }
.venture-detail .vd-timeline__label.vd-phase-research { color: var(--phase-research-text); }
.venture-detail .vd-timeline__label.vd-phase-validate { color: var(--phase-validate-text); }
.venture-detail .vd-timeline__label.vd-phase-build    { color: var(--phase-build-text); }
.venture-detail .vd-timeline__label.vd-phase-launch   { color: var(--phase-launch-text); }
.venture-detail .vd-timeline__label.vd-phase-monitor  { color: var(--phase-monitor-text); }
.venture-detail .vd-timeline__label.vd-phase-killed   { color: var(--phase-killed-text); }
.venture-detail .vd-timeline__connector {
  flex: 1;
  height: 2px;
  margin-top: -12px;
  background: var(--surface-3);
}
.venture-detail .vd-timeline__connector--done { background: var(--text-subtle); }

/* ---------- Buttons (decision row) --------------------------- */
.venture-detail .vd-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background var(--transition-normal);
  color: var(--text-on-accent);
  text-decoration: none;
}
.venture-detail .vd-btn--success { background: var(--success-dark); }
.venture-detail .vd-btn--success:hover { background: var(--success); }
.venture-detail .vd-btn--warning { background: var(--warning); }
.venture-detail .vd-btn--warning:hover { background: var(--warning); opacity: 0.8; }
.venture-detail .vd-btn--danger  { background: var(--error-dark); }
.venture-detail .vd-btn--danger:hover { background: var(--error); }
.venture-detail .vd-btn--primary { background: var(--accent); }
.venture-detail .vd-btn--primary:hover { background: var(--accent-hover); }
.venture-detail .vd-btn--primary:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.venture-detail .vd-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.venture-detail .vd-btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}
.venture-detail .vd-btn--ghost-success { background: var(--success-soft); color: var(--success); }
.venture-detail .vd-btn--ghost-success:hover { background: var(--success-soft); opacity: 0.8; }
.venture-detail .vd-btn--ghost-danger  { background: var(--error-soft); color: var(--error); }
.venture-detail .vd-btn--ghost-danger:hover  { background: var(--error-soft); opacity: 0.8; }
.venture-detail .vd-btn--ghost-info    { background: var(--info-soft); color: var(--info); }
.venture-detail .vd-btn--ghost-info:hover    { background: var(--info-soft); opacity: 0.8; }

/* ---------- Inputs ------------------------------------------- */
.venture-detail .vd-input {
  width: 100%;
  background: var(--surface-0);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-md);
  padding: 6px var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-strong);
  transition: border-color var(--transition-normal);
}
.venture-detail .vd-input:focus { outline: none; border-color: var(--accent); }
.venture-detail .vd-input::placeholder { color: var(--text-subtle); }

.venture-detail .vd-textarea {
  width: 100%;
  background: var(--surface-0);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-strong);
  font-family: inherit;
  resize: vertical;
}
.venture-detail .vd-textarea:focus { outline: none; border-color: var(--warning); }
.venture-detail .vd-textarea::placeholder { color: var(--text-subtle); }

.venture-detail .vd-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

/* ---------- Stat tiles --------------------------------------- */
.venture-detail .vd-stat {
  text-align: center;
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.venture-detail .vd-stat__label {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin: 0 0 var(--space-1);
}
.venture-detail .vd-stat__value {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
}
.venture-detail .vd-stat__value--xl { font-size: var(--text-xl); }

/* ---------- Progress bars ------------------------------------ */
.venture-detail .vd-bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.venture-detail .vd-bar--xs { height: 4px; }
.venture-detail .vd-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}
.venture-detail .vd-bar__fill--success { background: var(--success); }
.venture-detail .vd-bar__fill--warning { background: var(--warning); }
.venture-detail .vd-bar__fill--error   { background: var(--error); }
.venture-detail .vd-bar__fill--neutral { background: var(--text-subtle); }

/* ---------- Tables ------------------------------------------- */
.venture-detail .vd-table-wrap { overflow-x: auto; }
.venture-detail .vd-table { width: 100%; font-size: var(--text-xs); border-collapse: collapse; }
.venture-detail .vd-table thead tr { text-align: left; border-bottom: 1px solid var(--surface-3); }
.venture-detail .vd-table th {
  padding: 0 var(--space-3) var(--space-2) 0;
  color: var(--text-subtle);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.venture-detail .vd-table th:not(:first-child) { padding-left: var(--space-3); }
.venture-detail .vd-table td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  vertical-align: top;
}
.venture-detail .vd-table td:not(:first-child) { padding-left: var(--space-3); }
.venture-detail .vd-table tbody tr + tr { border-top: 1px solid var(--surface-3); }

/* ---------- Hypothesis row ----------------------------------- */
.venture-detail .vd-hyp {
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.venture-detail .vd-hyp__toggle {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  transition: background var(--transition-normal);
}
.venture-detail .vd-hyp__toggle:hover { background: var(--surface-2); }
.venture-detail .vd-hyp__panel {
  border-top: 1px solid var(--surface-3);
  background: var(--surface-0);
}
.venture-detail .vd-hyp__panel-inner {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ---------- Chevron rotation -------------------------------- */
.venture-detail .vd-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-subtle);
  transition: transform var(--transition-normal);
}

/* ---------- Misc -------------------------------------------- */
.venture-detail .vd-link {
  color: var(--info);
  text-decoration: none;
  transition: color var(--transition-normal);
}
.venture-detail .vd-link:hover { color: var(--info); opacity: 0.8; }

.venture-detail .vd-divider-top {
  padding-top: var(--space-4);
  border-top: 1px solid var(--surface-3);
}

.venture-detail .vd-text-center { text-align: center; }
.venture-detail .vd-italic { font-style: italic; }

.venture-detail .vd-icon-sm    { width: 14px; height: 14px; flex-shrink: 0; }
.venture-detail .vd-icon-md    { width: 16px; height: 16px; flex-shrink: 0; }
.venture-detail .vd-icon-error    { color: var(--error); }
.venture-detail .vd-icon-accent   { color: var(--accent); }
.venture-detail .vd-icon-info     { color: var(--info); }
.venture-detail .vd-icon-warning  { color: var(--warning); }

.venture-detail .vd-chart { position: relative; }
.venture-detail .vd-chart--sm { height: 200px; }
.venture-detail .vd-chart--md { height: 220px; }

.venture-detail .vd-back-link {
  font-size: var(--text-sm);
  color: var(--text-subtle);
  text-decoration: none;
  transition: color var(--transition-normal);
}
.venture-detail .vd-back-link:hover { color: var(--text); }

.venture-detail .vd-evidence-link {
  display: block;
  margin-top: var(--space-1);
  color: var(--info);
  text-decoration: none;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.venture-detail .vd-evidence-link:hover { color: var(--info); opacity: 0.8; }

.venture-detail .vd-evidence-summary { color: var(--text); max-width: 24rem; }

.venture-detail .vd-min-w-0 { min-width: 0; flex: 1; }
.venture-detail .vd-flex-shrink-0 { flex-shrink: 0; }

.venture-detail .vd-summary-toggle {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  cursor: pointer;
  transition: color var(--transition-normal);
}
.venture-detail .vd-summary-toggle:hover { color: var(--text-muted); }

.venture-detail .vd-hidden { display: none; }


/* ---------- Alignment helpers (replaces inline align-items) ---- */
.venture-detail .vd-align-start { align-items: flex-start; }
.venture-detail .vd-align-end   { align-items: flex-end; }
.venture-detail .vd-noshrink    { flex-shrink: 0; }

/* ---------- Constitution form banners ----------------------- */
.venture-detail .vd-banner--success {
  border-radius: var(--radius-lg);
  background: var(--success-soft);
  border: 1px solid var(--success);
  color: var(--success);
  font-size: var(--text-sm);
}
.venture-detail .vd-banner--error {
  border-radius: var(--radius-lg);
  background: var(--error-soft);
  border: 1px solid var(--error);
  color: var(--error);
  font-size: var(--text-sm);
}

/* ---------- Reduced motion ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .venture-detail .vd-bar__fill,
  .venture-detail .vd-btn,
  .venture-detail .vd-input,
  .venture-detail .vd-textarea,
  .venture-detail .vd-link,
  .venture-detail .vd-chevron,
  .venture-detail .vd-live-banner,
  .venture-detail .vd-hyp__toggle,
  .venture-detail .vd-back-link {
    transition: none;
  }
}

/* ================================================================
 * SEO pages (app/templates/seo*.html)
 * Page-scoped under .seo-page to avoid global bleed.
 * Token-only — no hardcoded colors, no !important, no Tailwind.
 * Pairs with existing .seo-token-bar / .seo-site-card / .seo-badge*
 * rules in app.css (the legacy hooks remain unchanged).
 * ============================================================== */

.seo-page {
  max-width: 64rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ---------- Layout primitives -------------------------------- */
.seo-page .seo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.seo-page .seo-row--start {
  align-items: flex-start;
  gap: var(--space-3);
}
.seo-page .seo-row--end {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.seo-page .seo-row--inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.seo-page .seo-row--inline-3 { gap: var(--space-3); }
.seo-page .seo-row--inline-4 { gap: var(--space-4); align-items: flex-end; }
.seo-page .seo-min-w-0 { min-width: 0; flex: 1 1 auto; }
.seo-page .seo-noshrink { flex-shrink: 0; }
.seo-page .seo-spacer { margin-left: auto; }
.seo-page .seo-truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seo-page .seo-truncate--sm { max-width: 24rem; }

/* ---------- Sections / stacks --------------------------------- */
.seo-page .seo-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.seo-page .seo-stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.seo-page .seo-stack-3 { display: flex; flex-direction: column; gap: var(--space-3); }
.seo-page .seo-stack-4 { display: flex; flex-direction: column; gap: var(--space-4); }
.seo-page .seo-stack-5 { display: flex; flex-direction: column; gap: var(--space-5); }
.seo-page .seo-stack-tight { display: flex; flex-direction: column; gap: 6px; }

/* ---------- Card surfaces ------------------------------------ */
.seo-page .seo-card {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.seo-page .seo-card--no-pad { padding: 0; overflow: hidden; }
.seo-page .seo-card--compact { padding: var(--space-4); }
.seo-page .seo-card--empty {
  padding: var(--space-12) var(--space-5);
  text-align: center;
}

/* ---------- Typography --------------------------------------- */
.seo-page .seo-h1 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
}
.seo-page .seo-h1__count {
  margin-left: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-subtle);
}
.seo-page .seo-h2 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
.seo-page .seo-eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
.seo-page .seo-eyebrow--label {
  font-weight: 500;
  color: var(--text-subtle);
}
.seo-page .seo-eyebrow--field {
  display: block;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.seo-page .seo-text-sm    { font-size: var(--text-sm); color: var(--text); margin: 0; }
.seo-page .seo-text-xs    { font-size: var(--text-xs); color: var(--text-muted); margin: 0; }
.seo-page .seo-text-strong { color: var(--text-strong); }
.seo-page .seo-text-muted  { color: var(--text-muted); }
.seo-page .seo-text-subtle { color: var(--text-subtle); }
.seo-page .seo-text-success { color: var(--success); }
.seo-page .seo-text-warning { color: var(--warning); }
.seo-page .seo-text-info    { color: var(--info); }
.seo-page .seo-text-mono    { font-family: var(--font-mono); font-weight: 600; }
.seo-page .seo-hint {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin: 0;
}
.seo-page .seo-hint code {
  color: var(--text-subtle);
  font-family: var(--font-mono);
}
.seo-page .seo-link {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-normal);
}
.seo-page .seo-link:hover {
  color: var(--text-strong);
  text-decoration: none;
}
.seo-page .seo-link--inline {
  color: var(--info);
}
.seo-page .seo-link--inline:hover {
  color: var(--info);
  opacity: 0.85;
}

/* ---------- Top-mover stat ----------------------------------- */
.seo-page .seo-stat__value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
}
.seo-page .seo-stat__label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 2px 0 0;
}

/* ---------- Pills / tags / badges ---------------------------- */
.seo-page .seo-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--surface-3);
}
.seo-page .seo-count-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
}
.seo-page .seo-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
}
.seo-page .seo-pill--info    { background: var(--info-soft);    color: var(--info); }
.seo-page .seo-pill--success { background: var(--success-soft); color: var(--success); }
.seo-page .seo-pill--warning { background: var(--warning-soft); color: var(--warning); }
.seo-page .seo-pill--error   { background: var(--error-soft);   color: var(--error); }
.seo-page .seo-pill--neutral { background: var(--surface-2);    color: var(--text-muted); }

.seo-page .seo-status-on {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid var(--success);
}
.seo-page .seo-status-off {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text-subtle);
  border: 1px solid var(--surface-3);
}

/* ---------- Token meter (cap %) — <progress> element ---------- */
.seo-page .seo-meter {
  display: block;
  width: 100%;
  height: 12px;
  border: none;
  border-radius: var(--radius-full);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}
/* Webkit: track (background) */
.seo-page .seo-meter::-webkit-progress-bar {
  background: var(--surface-2);
  border-radius: var(--radius-full);
}
/* Webkit: fill */
.seo-page .seo-meter::-webkit-progress-value {
  border-radius: var(--radius-full);
  transition: width 600ms ease;
  background: var(--info);
}
/* Firefox fill */
.seo-page .seo-meter::-moz-progress-bar {
  border-radius: var(--radius-full);
  transition: width 600ms ease;
  background: var(--info);
}
/* Color modifier overrides */
.seo-page .seo-meter--ok::-webkit-progress-value    { background: var(--info); }
.seo-page .seo-meter--warn::-webkit-progress-value  { background: var(--warning); }
.seo-page .seo-meter--alert::-webkit-progress-value { background: var(--error); }
.seo-page .seo-meter--ok::-moz-progress-bar    { background: var(--info); }
.seo-page .seo-meter--warn::-moz-progress-bar  { background: var(--warning); }
.seo-page .seo-meter--alert::-moz-progress-bar { background: var(--error); }

/* ---------- Divider ------------------------------------------ */
.seo-page .seo-divider {
  border-top: 1px solid var(--surface-3);
}
.seo-page .seo-section-divider {
  padding-top: var(--space-2);
  border-top: 1px solid var(--surface-3);
}

/* ---------- House author block ------------------------------- */
.seo-page .seo-house-author {
  padding-top: var(--space-2);
  border-top: 1px solid var(--surface-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.seo-page .seo-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--surface-3);
}
.seo-page .seo-avatar--placeholder {
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
}
.seo-page .seo-avatar__icon { width: 16px; height: 16px; }

/* ---------- Form fields -------------------------------------- */
.seo-page .seo-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.seo-page .seo-input,
.seo-page .seo-textarea,
.seo-page .seo-select {
  width: 100%;
  background: var(--surface-0);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-md);
  padding: 6px var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-strong);
  font-family: inherit;
  transition: border-color var(--transition-normal),
              box-shadow var(--transition-normal);
}
.seo-page .seo-input::placeholder,
.seo-page .seo-textarea::placeholder {
  color: var(--text-subtle);
}
.seo-page .seo-input:focus,
.seo-page .seo-textarea:focus,
.seo-page .seo-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.seo-page .seo-input--w-narrow  { width: 11rem; }
.seo-page .seo-input--w-xs      { width: 5rem; }
.seo-page .seo-input--has-prefix { padding-left: 28px; }
.seo-page .seo-textarea--mono   { font-family: var(--font-mono); resize: vertical; }
.seo-page .seo-textarea--fixed  { resize: none; }
.seo-page .seo-input-group {
  position: relative;
  width: 11rem;
}
.seo-page .seo-input-group__prefix {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-subtle);
  font-size: var(--text-sm);
  pointer-events: none;
}
.seo-page .seo-input::-webkit-outer-spin-button,
.seo-page .seo-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.seo-page input[type="number"].seo-input {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* ---------- Toggle switch ------------------------------------ */
.seo-page .seo-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.seo-page .seo-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.seo-page .seo-toggle__track {
  position: relative;
  width: 40px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  cursor: pointer;
  transition: background var(--transition-normal);
  display: inline-block;
}
.seo-page .seo-toggle__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--text-on-accent);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal);
}
.seo-page .seo-toggle__input:checked + .seo-toggle__track {
  background: var(--accent);
}
.seo-page .seo-toggle__input:checked + .seo-toggle__track::after {
  transform: translateX(20px);
}
.seo-page .seo-toggle__input:focus-visible + .seo-toggle__track {
  box-shadow: var(--shadow-focus);
}
.seo-page .seo-toggle__label {
  font-size: var(--text-sm);
  color: var(--text-subtle);
}
.seo-page .seo-toggle__label--on {
  color: var(--text);
}

/* ---------- Buttons ------------------------------------------ */
.seo-page .seo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition-normal),
              color var(--transition-normal),
              border-color var(--transition-normal);
  text-decoration: none;
  white-space: nowrap;
}
.seo-page .seo-btn:hover { text-decoration: none; }
.seo-page .seo-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.seo-page .seo-btn--sm { padding: 4px 10px; }
.seo-page .seo-btn--md { padding: 8px var(--space-4); font-size: var(--text-sm); }
.seo-page .seo-btn--lg { padding: 10px var(--space-4); font-size: var(--text-sm); }

.seo-page .seo-btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
}
.seo-page .seo-btn--primary:hover { background: var(--accent-hover); }
.seo-page .seo-btn--approve {
  background: var(--success-soft);
  color: var(--success);
}
.seo-page .seo-btn--approve:hover {
  background: var(--success-soft);
  color: var(--success);
  border-color: var(--success);
}
.seo-page .seo-btn--reject {
  background: var(--error-soft);
  color: var(--error);
}
.seo-page .seo-btn--reject:hover {
  background: var(--error-soft);
  color: var(--error);
  border-color: var(--error);
}
.seo-page .seo-btn--edit {
  background: var(--info-soft);
  color: var(--info);
}
.seo-page .seo-btn--edit:hover {
  background: var(--info-soft);
  color: var(--info);
  border-color: var(--info);
}
.seo-page .seo-btn--apply {
  background: var(--info-soft);
  color: var(--info);
  padding: 8px var(--space-4);
  font-size: var(--text-sm);
}
.seo-page .seo-btn--apply:hover {
  background: var(--info-soft);
  color: var(--info);
  border-color: var(--info);
}
.seo-page .seo-btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--surface-3);
}
.seo-page .seo-btn--ghost:hover {
  color: var(--text-strong);
  border-color: var(--text-muted);
}
.seo-page .seo-btn--link {
  background: transparent;
  border: none;
  padding: 0;
  font-size: var(--text-xs);
  color: var(--text-subtle);
}
.seo-page .seo-btn--link:hover {
  color: var(--text-strong);
}
.seo-page .seo-btn--link-warn {
  color: var(--warning);
}
.seo-page .seo-btn--link-warn:hover {
  color: var(--warning);
  opacity: 0.85;
}
.seo-page .seo-btn--link-go {
  color: var(--text-subtle);
}
.seo-page .seo-btn--link-go:hover {
  color: var(--success);
}

/* ---------- Tables ------------------------------------------- */
.seo-page .seo-table-wrap { overflow-x: auto; }
.seo-page .seo-table {
  width: 100%;
  font-size: var(--text-sm);
  border-collapse: collapse;
}
.seo-page .seo-table thead tr {
  text-align: left;
  border-bottom: 1px solid var(--surface-3);
}
.seo-page .seo-table th {
  padding: var(--space-3) var(--space-5);
  color: var(--text-subtle);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.seo-page .seo-table td {
  padding: var(--space-4) var(--space-5);
  color: var(--text);
  vertical-align: middle;
}
.seo-page .seo-table tbody tr + tr { border-top: 1px solid var(--surface-3); }
.seo-page .seo-table tbody tr {
  transition: background var(--transition-normal);
}
.seo-page .seo-table tbody tr:hover {
  background: var(--surface-2);
}
.seo-page .seo-table__cell-strong  { color: var(--text-strong); font-weight: 500; }
.seo-page .seo-table__cell-muted   { color: var(--text-muted); }
.seo-page .seo-table__cell-subtle  { color: var(--text-subtle); }
.seo-page .seo-table__cell-nowrap  { white-space: nowrap; }

.seo-page .seo-mobile-list {
  display: flex;
  flex-direction: column;
}
.seo-page .seo-mobile-list > * + * {
  border-top: 1px solid var(--surface-3);
}
.seo-page .seo-mobile-row {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Inline helpers (avoid inline style attributes in templates) */
.seo-page .seo-mt-tiny  { margin-top: 2px; }
.seo-page .seo-mb-4     { margin-bottom: var(--space-4); }
.seo-page .seo-card__bar {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--surface-3);
}

/* ---------- Show/hide breakpoints ---------------------------- */
.seo-page .seo-md-only { display: none; }
@media (min-width: 768px) {
  .seo-page .seo-md-only { display: block; }
  .seo-page .seo-mobile-only { display: none; }
}

/* ---------- Site card --------------------------------------- */
.seo-page .seo-site-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .seo-page .seo-site-grid { grid-template-columns: repeat(2, 1fr); }
}

.seo-page .seo-site-card {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.seo-page .seo-site-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.seo-page .seo-site-card__icon-wrap {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--surface-3);
}
.seo-page .seo-site-card__icon-wrap--auto {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.seo-page .seo-site-card__icon-wrap--managed {
  background: var(--info-soft);
  border-color: var(--info);
}
.seo-page .seo-site-card__icon { width: 16px; height: 16px; }
.seo-page .seo-site-card__icon--auto    { color: var(--accent); }
.seo-page .seo-site-card__icon--managed { color: var(--info); }
.seo-page .seo-site-card__body {
  flex: 1 1 auto;
  min-width: 0;
}
.seo-page .seo-site-card__title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-strong);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seo-page .seo-site-card__sub {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin: 0;
}
.seo-page .seo-site-card__rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--text-subtle);
}
.seo-page .seo-site-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.seo-page .seo-site-card__row-value {
  color: var(--text);
  font-weight: 500;
}
.seo-page .seo-site-card__row-value--cap {
  text-transform: capitalize;
}
.seo-page .seo-site-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.seo-page .seo-site-card__connected {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--success);
}
.seo-page .seo-site-card__connected-icon { width: 12px; height: 12px; }
.seo-page .seo-site-card__footer {
  padding-top: var(--space-2);
  border-top: 1px solid var(--surface-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.seo-page .seo-site-card__dot { color: var(--text-subtle); }

/* ---------- Charts ------------------------------------------- */
.seo-page .seo-chart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .seo-page .seo-chart-grid { grid-template-columns: repeat(2, 1fr); }
}
.seo-page .seo-chart {
  position: relative;
  height: 256px;
}
@media (min-width: 768px) {
  .seo-page .seo-chart { height: 288px; }
}
.seo-page .seo-chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin: 0;
}

/* ---------- Empty state -------------------------------------- */
.seo-page .seo-empty {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-5);
  text-align: center;
}
.seo-page .seo-empty__icon {
  width: 40px;
  height: 40px;
  color: var(--text-subtle);
  margin: 0 auto var(--space-4);
}
.seo-page .seo-empty__icon--sm {
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-2);
}
.seo-page .seo-empty__title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  margin: 0;
}
.seo-page .seo-empty__body {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin: 4px 0 0;
}

/* ---------- Grids -------------------------------------------- */
.seo-page .seo-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.seo-page .seo-grid-2--lg-gap {
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .seo-page .seo-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Reduced motion ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .seo-page .seo-meter::-webkit-progress-value,
  .seo-page .seo-meter::-moz-progress-bar,
  .seo-page .seo-toggle__track,
  .seo-page .seo-toggle__track::after,
  .seo-page .seo-input,
  .seo-page .seo-textarea,
  .seo-page .seo-select,
  .seo-page .seo-btn,
  .seo-page .seo-link,
  .seo-page .seo-table tbody tr {
    transition: none;
  }
}

/* ================================================================
 * Capital ledger page (app/templates/capital.html)
 * Page-scoped under .capital-page to avoid global bleed.
 * Token-only — no hardcoded colors (except literal RGBA tints for
 * category badges), no !important, no Tailwind.
 * ============================================================== */

.capital-page {
  max-width: 64rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.capital-page .capital-hero {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.capital-page .capital-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .capital-page .capital-hero__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.capital-page .capital-hero__identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.capital-page .capital-hero__eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--text-subtle);
  margin: 0;
}
.capital-page .capital-hero__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-strong);
  line-height: var(--leading-tight);
  margin: 0;
}
.capital-page .capital-hero__copy {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}
.capital-page .capital-hero__count {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 4px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-muted);
}
.capital-page .capital-hero__panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-3);
  background: var(--surface-1);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.capital-page .capital-hero__panel-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-subtle);
  margin: 0;
}
.capital-page .capital-hero__metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
}
@media (min-width: 640px) {
  .capital-page .capital-hero__metrics { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .capital-page .capital-hero__metrics { grid-template-columns: 1fr; }
}
@media (min-width: 1024px) {
  .capital-page .capital-hero__metrics { grid-template-columns: repeat(3, 1fr); }
}
.capital-page .capital-hero__metric {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: border-color var(--transition-normal);
}
.capital-page .capital-hero__metric:hover { border-color: var(--text-subtle); }
.capital-page .capital-hero__metric:focus-within {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.capital-page .capital-hero__metric-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-subtle);
}
.capital-page .capital-hero__metric-value {
  margin-top: var(--space-1);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-strong);
}
.capital-page .capital-hero__metric-value--good { color: var(--success); }
.capital-page .capital-hero__metric-value--bad  { color: var(--error); }
.capital-page .capital-hero__metric-suffix {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-subtle);
}

.capital-page .capital-card {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.capital-page .capital-card__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--space-4);
}
.capital-page .capital-chart-wrap {
  position: relative;
  min-height: 200px;
}
.capital-page .capital-chart-wrap canvas { width: 100%; }
.capital-page .capital-chart-error {
  text-align: center;
  color: var(--text-subtle);
  font-size: var(--text-sm);
  padding-top: var(--space-10);
}

.capital-page .capital-table-card {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.capital-page .capital-table-wrap { overflow-x: auto; }
.capital-page .capital-table {
  width: 100%;
  font-size: var(--text-sm);
  border-collapse: collapse;
  min-width: 100%;
}
.capital-page .capital-table thead tr {
  border-bottom: 1px solid var(--surface-3);
  text-align: left;
}
.capital-page .capital-table th {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-subtle);
  font-weight: 500;
}
.capital-page .capital-table .capital-table__th--amount { text-align: right; }
.capital-page .capital-table td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
}
.capital-page .capital-table tbody tr {
  border-bottom: 1px solid var(--surface-3);
  transition: background-color var(--transition-fast);
}
.capital-page .capital-table tbody tr:last-child { border-bottom: 0; }
.capital-page .capital-table tbody tr:hover { background: var(--surface-2); }
.capital-page .capital-table__cell--date {
  color: var(--text-muted);
  white-space: nowrap;
}
.capital-page .capital-table__cell--desc {
  color: var(--text);
  max-width: 24rem;
}
.capital-page .capital-table__desc-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.capital-page .capital-table__cell--venture {
  color: var(--text-subtle);
  font-size: var(--text-xs);
}
.capital-page .capital-table__cell--amount {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 500;
  white-space: nowrap;
}
.capital-page .capital-table__amount--good { color: var(--success); }
.capital-page .capital-table__amount--bad  { color: var(--error); }

.capital-page .capital-category {
  display: inline-flex;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text);
}
.capital-page .capital-category[data-category="ad"]      { background: var(--phase-research-bg); color: var(--info); }
.capital-page .capital-category[data-category="domain"]  { background: var(--phase-build-bg); color: var(--phase-build-text); }
.capital-page .capital-category[data-category="tooling"] { background: var(--success-soft); color: var(--success); }
.capital-page .capital-category[data-category="hosting"] { background: var(--warning-soft); color: var(--warning); }

.capital-page .capital-empty {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  text-align: center;
}
.capital-page .capital-empty__icon {
  width: 32px;
  height: 32px;
  color: var(--text-subtle);
  margin: 0 auto var(--space-3);
}
.capital-page .capital-empty__title {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}
.capital-page .capital-empty__body {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin: var(--space-1) 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .capital-page .capital-hero__metric,
  .capital-page .capital-table tbody tr {
    transition: none;
  }
}

/* ================================================================
 * Security dashboard page (app/templates/security.html)
 * Page-scoped under .security-page to avoid global bleed.
 * Token-only — no hardcoded colors (except a single literal RGBA
 * tint for the "high" severity badge that has no token equivalent),
 * no !important, no Tailwind.
 * ============================================================== */

.security-page {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.security-page .security-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.security-page .security-header__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
}
.security-page .security-header__sub {
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

.security-page .security-card {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.security-page .security-card--spacious { gap: var(--space-4); }

.security-page .security-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.security-page .security-card__heading {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
.security-page .security-card__count {
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-muted);
}

.security-page .security-meter__pct {
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  font-weight: 600;
}
.security-page .security-meter__pct--ok    { color: var(--success); }
.security-page .security-meter__pct--warn  { color: var(--warning); }
.security-page .security-meter__pct--alert { color: var(--error); }
.security-page .security-meter__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-6);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.security-page .security-meter__stat-value {
  color: var(--text-strong);
  font-weight: 500;
  font-family: var(--font-mono);
}
.security-page .security-meter__bar {
  width: 100%;
  height: 10px;
  background: var(--surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.security-page .security-meter__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}
.security-page .security-meter__fill--ok    { background: var(--info); }
.security-page .security-meter__fill--warn  { background: var(--warning); }
.security-page .security-meter__fill--alert { background: var(--error); }

.security-page .security-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 1024px) {
  .security-page .security-layout {
    grid-template-columns: 2fr 1fr;
    gap: var(--space-6);
  }
}
.security-page .security-layout__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.security-page .security-layout__aside { min-width: 0; }

.security-page .security-section__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.security-page .security-section__heading {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.security-page .security-posture {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .security-page .security-posture { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  .security-page .security-posture { grid-template-columns: repeat(3, 1fr); }
}

.security-page .security-site {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  overflow: hidden;
}
.security-page .security-site__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.security-page .security-site__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-strong);
  word-break: break-word;
  margin: 0;
}
.security-page .security-site__domain {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  word-break: break-word;
  margin: 0;
}
.security-page .security-site__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.security-page .security-site__last-scan {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  white-space: nowrap;
}

.security-page .security-status {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  border: 1px solid var(--surface-3);
  background: var(--surface-2);
  color: var(--text-subtle);
}
.security-page .security-status--red    { background: var(--error-soft);   color: var(--error);   border-color: var(--error); }
.security-page .security-status--yellow { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.security-page .security-status--green  { background: var(--success-soft); color: var(--success); border-color: var(--success); }

.security-page .security-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.security-page .security-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  border: 1px solid var(--surface-3);
  background: var(--surface-2);
  color: var(--text-subtle);
}
.security-page .security-chip--red    { background: var(--error-soft);   color: var(--error);   border-color: var(--error); }
.security-page .security-chip--yellow { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.security-page .security-chip--green  { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.security-page .security-chip__icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.security-page .security-empty {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-5);
  text-align: center;
}
.security-page .security-empty__icon {
  width: 32px;
  height: 32px;
  color: var(--text-subtle);
  margin: 0 auto var(--space-2);
}
.security-page .security-empty__icon--sm {
  width: 28px;
  height: 28px;
}
.security-page .security-empty__title {
  font-size: var(--text-sm);
  color: var(--text-subtle);
  margin: 0;
}
.security-page .security-empty__body {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin: var(--space-1) 0 0;
}

.security-page .security-server-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-3);
  background: var(--surface-2);
  color: var(--text-subtle);
}
.security-page .security-server-pill--healthy  { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.security-page .security-server-pill--degraded { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.security-page .security-server-pill--critical { background: var(--error-soft);   color: var(--error);   border-color: var(--error); }
.security-page .security-server-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--text-subtle);
  flex-shrink: 0;
}
.security-page .security-server-pill--healthy  .security-server-pill__dot { background: var(--success); }
.security-page .security-server-pill--degraded .security-server-pill__dot { background: var(--warning); }
.security-page .security-server-pill--critical .security-server-pill__dot { background: var(--error); }

.security-page .security-server-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: 0;
}
@media (min-width: 768px) {
  .security-page .security-server-stats { grid-template-columns: repeat(4, 1fr); }
}
.security-page .security-server-stat {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  min-width: 0;
}
.security-page .security-server-stat__label {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin: 0 0 var(--space-1);
}
.security-page .security-server-stat__value {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}
.security-page .security-server__last {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin: 0;
}
.security-page .security-server__last-value { color: var(--text-muted); }
.security-page .security-server--empty {
  padding: var(--space-6) 0;
  text-align: center;
}

.security-page .security-advisory-heading {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-3);
}
.security-page .security-advisory-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.security-page .security-advisory {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  overflow: hidden;
}
.security-page .security-advisory__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.security-page .security-sev {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  flex-shrink: 0;
  border: 1px solid var(--surface-3);
  background: var(--surface-2);
  color: var(--text-muted);
}
.security-page .security-sev--critical { background: var(--error-soft);   color: var(--error);   border-color: var(--error); }
.security-page .security-sev--high     { background: var(--severity-high-soft); color: var(--severity-high); border-color: var(--severity-high); }
.security-page .security-sev--medium   { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.security-page .security-sev--low      { background: var(--info-soft);    color: var(--info);    border-color: var(--info); }
.security-page .security-advisory__source {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.security-page .security-advisory__title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  line-height: var(--leading-tight);
  word-break: break-word;
  margin: 0;
}
.security-page .security-advisory__summary {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  line-height: var(--leading-relaxed);
  word-break: break-word;
  margin: 0;
}
.security-page .security-advisory__time {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .security-page .security-meter__fill { transition: none; }
}

/* ===== Standalone error / login-required page =============== */

.error-page {
  width: 100%;
  max-width: 28rem;
  padding: var(--space-4);
  text-align: center;
}
.error-page--narrow { max-width: 22rem; }

.error-page__icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}
.error-page__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.error-page__icon-svg { width: 32px; height: 32px; }

.error-page__code {
  display: block;
  font-size: 6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--surface-3);
  user-select: none;
  margin: 0 0 var(--space-4);
}

.error-page__title {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 var(--space-2);
}

.error-page__message {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 0 var(--space-8);
}

.error-page__detail {
  margin-top: var(--space-3);
  margin-bottom: 0;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--text-subtle);
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  overflow-wrap: anywhere;
}

.error-page__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
}
@media (min-width: 480px) {
  .error-page__actions--row { flex-direction: row; }
}

.error-page__action-icon {
  width: 16px;
  height: 16px;
}

.error-page__footer {
  margin-top: var(--space-8);
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

.error-page__nav {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--surface-3);
}

.error-page__nav-label {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin: 0 0 var(--space-3);
}

.error-page__nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.error-page__nav-link {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.error-page__nav-link:hover {
  color: var(--text-strong);
  text-decoration: underline;
}

/* ===== Insights partial (3-up pattern cards) ================ */

.insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .insights-grid { grid-template-columns: repeat(3, 1fr); }
}

.insights-card {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.insights-card__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-3);
}

.insights-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.insights-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.insights-row__label {
  font-size: var(--text-sm);
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insights-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--surface-3);
}
.insights-badge--info     { background: var(--info-soft);    color: var(--info);    border-color: transparent; }
.insights-badge--success  { background: var(--success-soft); color: var(--success); border-color: transparent; }
.insights-badge--accent   { background: var(--accent-soft);  color: var(--accent);  border-color: transparent; }

.insights-empty {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin: 0;
}

/* ================================================================
 * Shared page-level utilities
 * ============================================================== */

.page-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
}

/* Icon size utilities (used alongside inline SVGs) */
.icon-sm { width: 1rem;   height: 1rem;  flex-shrink: 0; }
.icon-md { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.icon-lg { width: 2rem;   height: 2rem;  flex-shrink: 0; }

/* ================================================================
 * Ventures list page (app/templates/ventures.html)
 * ============================================================== */

.ventures-page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.ventures-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .ventures-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .ventures-grid { grid-template-columns: repeat(3, 1fr); }
}

.venture-card {
  display: block;
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  transition: border-color var(--transition-normal);
}

.venture-card:hover {
  border-color: var(--text-muted);
  text-decoration: none;
}

.venture-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.venture-card__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  margin: 0;
}

.venture-card__phase {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}

.venture-card__phase--research { background: var(--phase-research-bg); color: var(--phase-research-text); }
.venture-card__phase--validate { background: var(--phase-validate-bg); color: var(--phase-validate-text); }
.venture-card__phase--build    { background: var(--phase-build-bg);    color: var(--phase-build-text); }
.venture-card__phase--launch   { background: var(--phase-launch-bg);   color: var(--phase-launch-text); }
.venture-card__phase--monitor  { background: var(--phase-monitor-bg);  color: var(--phase-monitor-text); }
.venture-card__phase--killed   { background: var(--phase-killed-bg);   color: var(--phase-killed-text); }
.venture-card__phase--frozen   { background: var(--surface-2);         color: var(--text-muted); }
.venture-card__phase--neutral  { background: var(--surface-2);         color: var(--text-muted); }

.venture-card__desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.venture-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

/* Ventures empty state */
.ventures-empty {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ventures-empty__icon {
  color: var(--text-subtle);
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--space-3);
}

.ventures-empty__text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 0 var(--space-1) 0;
}

.ventures-empty__hint {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin: 0 0 var(--space-4) 0;
}

/* ================================================================
 * Config / Settings page (app/templates/config.html)
 * ============================================================== */

/* Make cards in the config page use flex-column layout so children
   stack with a consistent gap (replaces Tailwind space-y-4). */
.config-page .card--compact {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.config-section__heading {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}

.config-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .config-grid { grid-template-columns: repeat(2, 1fr); }
}

.config-label {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-subtle);
  margin-bottom: var(--space-1);
}

.config-value {
  color: var(--text-strong);
  font-size: var(--text-sm);
  margin: 0;
}

.config-value--mono { font-family: var(--font-mono); }

.config-hint {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin: 0;
}

.config-key-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.config-key-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
}

.config-key-name { color: var(--text-muted); }

/* ================================================================
 * SEO Templates — partials/todays_seo_activity.html and
 *                 partials/seo_site_settings.html
 *
 * Unscoped BEM classes (do NOT live under .seo-page) because these
 * partials may be embedded outside the SEO routes (e.g.
 * todays_seo_activity is included from dashboard.html). Token-only,
 * ZERO !important, ZERO hardcoded hex values.
 * ============================================================== */

/* ----- todays_seo_activity partial ----------------------------- */

.seo-activity {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.seo-activity__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.seo-activity__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-strong);
}

.seo-activity__timestamp {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  flex-shrink: 0;
}

.seo-activity__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
@media (min-width: 640px) {
  .seo-activity__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.seo-activity__stat {
  background: var(--surface-0);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  min-width: 0;
}

.seo-activity__stat-value {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-strong);
}
.seo-activity__stat-value--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-activity__stat-label {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.seo-activity__meter-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.seo-activity__meter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.seo-activity__meter-row--footer { padding-top: 2px; }

.seo-activity__meter-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.seo-activity__meter-label--noshrink { flex-shrink: 0; }

.seo-activity__meter-footnote {
  font-size: var(--text-xs);
  color: var(--text-subtle);
}
.seo-activity__meter-footnote--noshrink { flex-shrink: 0; }

.seo-activity__progress {
  display: block;
  width: 100%;
  height: 6px;
  border: none;
  border-radius: var(--radius-full);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-3);
}
.seo-activity__progress::-webkit-progress-bar {
  background: var(--surface-3);
  border-radius: var(--radius-full);
}
.seo-activity__progress::-webkit-progress-value {
  background: var(--accent);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}
.seo-activity__progress::-moz-progress-bar {
  background: var(--accent);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

/* ----- seo_site_settings partial ------------------------------- */

.seo-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.seo-settings__group-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--surface-3);
}
.seo-settings__group-header--site { padding-top: var(--space-2); }

.seo-settings__group-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-strong);
}
.seo-settings__group-subtitle {
  margin: 2px 0 0;
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

.seo-settings__form {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.seo-settings__form-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.seo-settings__form-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.seo-settings__form-intro {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

.seo-settings__form-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.seo-settings__form-body--tight { gap: var(--space-3); }

.seo-settings__status {
  font-size: var(--text-xs);
  color: var(--text-subtle);
}
.seo-settings__status--success { color: var(--success); }
.seo-settings__status--error   { color: var(--error); }

.seo-settings__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.seo-settings__field-info {
  min-width: 0;
}

.seo-settings__field-label {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text);
}

.seo-settings__field-help {
  margin: 2px 0 0;
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

.seo-settings__field-block-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.seo-settings__field-hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

.seo-settings__label-aux {
  color: var(--text-subtle);
  font-weight: 400;
}

.seo-settings__stored-tag {
  margin-left: 6px;
  color: var(--success);
  font-weight: 400;
}

.seo-settings__grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .seo-settings__grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.seo-settings__divider {
  padding-top: var(--space-3);
  border-top: 1px solid var(--surface-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.seo-settings__inline-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.seo-settings__inline-unit {
  font-size: var(--text-sm);
  color: var(--text-subtle);
}

/* Inputs / textareas / selects */
.seo-settings__input,
.seo-settings__textarea,
.seo-settings__select {
  width: 100%;
  background: var(--surface-0);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-strong);
  font-family: inherit;
  transition: border-color var(--transition-normal),
              box-shadow var(--transition-normal);
}
.seo-settings__input::placeholder,
.seo-settings__textarea::placeholder {
  color: var(--text-subtle);
}
.seo-settings__input:focus,
.seo-settings__textarea:focus,
.seo-settings__select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.seo-settings__input--mono,
.seo-settings__textarea--mono {
  font-family: var(--font-mono);
}
.seo-settings__textarea {
  resize: none;
}
.seo-settings__textarea--mono { resize: vertical; }
.seo-settings__input--has-prefix {
  padding-left: 28px;
}
.seo-settings__input--xs {
  width: 6rem;
}
.seo-settings__input--narrow {
  width: 100%;
}
@media (min-width: 640px) {
  .seo-settings__input--narrow { width: 8rem; }
}

/* Dollar-prefix input group */
.seo-settings__input-group {
  position: relative;
  width: 100%;
}
@media (min-width: 640px) {
  .seo-settings__input-group { width: 12rem; }
}
.seo-settings__input-prefix {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-sm);
  color: var(--text-subtle);
  pointer-events: none;
}

/* Toggle pill button */
.seo-settings__toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.seo-settings__toggle {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 20px;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--transition-normal);
  padding: 0;
}
.seo-settings__toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.seo-settings__toggle--on  { background: var(--accent); }
.seo-settings__toggle--off { background: var(--surface-3); }

.seo-settings__toggle-thumb {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--text-on-accent);
  box-shadow: var(--shadow-sm);
  transition: left var(--transition-normal);
}
.seo-settings__toggle-thumb--on  { left: 20px; }
.seo-settings__toggle-thumb--off { left: 2px; }

/* Submit button */
.seo-settings__submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-normal);
}
.seo-settings__submit:hover { background: var(--accent-hover); }
.seo-settings__submit:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* GSC connection indicator */
.seo-settings__connection-status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.seo-settings__connection-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
}
.seo-settings__connection-indicator--on  { color: var(--success); }
.seo-settings__connection-indicator--off { color: var(--text-subtle); }

.seo-settings__connection-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
}
.seo-settings__connection-dot--on  { background: var(--success); }
.seo-settings__connection-dot--off { background: var(--surface-3); }

/* === Moved from app/templates/components.html inline <style> === */

.components-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.components-page__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.components-page__title {
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--text-strong);
    margin: 0;
}
.components-page__lede {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
}
.components-page__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.components-page__section-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-strong);
    margin: 0;
}
.components-page__section-lede {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
}
.components-page__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}
.components-page__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 640px) {
    .components-page__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===== Research blocks cap ================================== */

.research-cap {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.research-cap__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.research-cap__label {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.research-cap__count-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.research-cap__count {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-strong);
}
.research-cap__count--at-cap { color: var(--error); }

.research-cap__denom {
  font-size: var(--text-sm);
  color: var(--text-subtle);
}

.research-cap__message {
  font-size: var(--text-sm);
  margin: 0 0 var(--space-3);
  color: var(--text-subtle);
}
.research-cap__message--at-cap { color: var(--warning); }

/* Native <progress> element */
.research-cap__progress {
  display: block;
  width: 100%;
  height: 8px;
  border: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-3);
}
.research-cap__progress::-webkit-progress-bar {
  background: var(--surface-3);
  border-radius: var(--radius-sm);
}
.research-cap__progress::-webkit-progress-value {
  background: var(--info);
  border-radius: var(--radius-sm);
  transition: width var(--transition-normal);
}
.research-cap__progress::-moz-progress-bar {
  background: var(--info);
  border-radius: var(--radius-sm);
}
.research-cap__progress--at-cap::-webkit-progress-value { background: var(--error); }
.research-cap__progress--at-cap::-moz-progress-bar      { background: var(--error); }

/* Block rows */
.research-cap__block-row {
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-muted);
  border-top: 1px solid var(--surface-3);
  padding-top: var(--space-2);
}

.research-cap__block-minutes { color: var(--text-subtle); }

/* Add button */
.research-cap__add-btn {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--surface-3);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition-normal), color var(--transition-normal);
}
.research-cap__add-btn:hover:not(:disabled) {
  border-color: var(--text-muted);
  color: var(--text-strong);
}
.research-cap__add-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.research-cap__add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Health page spinner opacity layers */
.spinner-opacity-25 { opacity: 0.25; }
.spinner-opacity-75 { opacity: 0.75; }

/* ----- Venture Detail ----- */
.vd-fw-medium {
  font-weight: var(--font-weight-medium);
}
.vd-ml-auto {
  margin-left: auto;
}
.vd-debate-section-label {
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-1);
}

/* ----- Venture Detail: inline-style replacements (META-REVIEW-136.3) ----- */
.venture-detail__truncate {
  overflow: hidden;
  text-overflow: ellipsis;
}
.venture-detail__metadata-grid {
  row-gap: var(--space-2);
  column-gap: var(--space-8);
}
.venture-detail__btn-reset {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  color: inherit;
}

/* ----- Health Dashboard Widget (migrated from app/static/style.css, META-REVIEW-248) ----- */

.dashboard-health {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.dashboard-health__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.dashboard-health__label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  flex-shrink: 0;
}

.dashboard-health__value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

/* Mobile: reflow label/value into a vertical stack on narrow screens. */
@media (max-width: 639px) {
  .dashboard-health__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
}

/* ================================================================
 * Health Page (app/templates/health.html)
 * ============================================================== */

/* ----- Page wrapper ----- */
.health-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ----- Page header ----- */
.health-page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.health-page__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
}

.health-page__header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.health-page__timestamp {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.health-page__refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-normal), color var(--transition-normal);
}

.health-page__refresh-btn:hover {
  border-color: var(--text-muted);
  color: var(--text-strong);
}

.health-page__refresh-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.health-page__spinner {
  width: 1rem;
  height: 1rem;
  animation: spin 0.75s linear infinite;
}

.health-page__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

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

/* ----- Cards ----- */
.health-page__card {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.health-page__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.health-page__card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
}

.health-page__card-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-full);
}

/* ----- Metrics (usage bars) ----- */
.health-page__metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.health-page__metric-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.health-page__metric-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.health-page__metric-value {
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}

.health-page__metric-value--success { color: var(--success); }
.health-page__metric-value--warning { color: var(--warning); }
.health-page__metric-value--error   { color: var(--error); }

.health-page__metric-secondary {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-subtle);
  margin-left: var(--space-1);
}

.health-page__metric-message {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
}

.health-page__metric-message--warning { color: var(--warning); }
.health-page__metric-message--error   { color: var(--error); }

/* ----- Progress bars ----- */
.health-page__bar-track {
  height: 6px;
  background: var(--surface-3);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.health-page__bar-fill {
  display: block;
  width: 100%;
  height: 6px;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--radius-full);
  overflow: hidden;
  /* Firefox track (background) and fill (accent-color) */
  background: var(--surface-3);
  accent-color: var(--accent);
}

.health-page__bar-fill::-webkit-progress-bar {
  background: var(--surface-3);
  border-radius: var(--radius-full);
}

.health-page__bar-fill::-webkit-progress-value {
  background: var(--accent);
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
}

.health-page__bar-fill::-moz-progress-bar {
  background: var(--accent);
  border-radius: var(--radius-full);
}

.health-page__bar-fill--success { accent-color: var(--success); }
.health-page__bar-fill--success::-webkit-progress-value { background: var(--success); }
.health-page__bar-fill--success::-moz-progress-bar      { background: var(--success); }

.health-page__bar-fill--warning { accent-color: var(--warning); }
.health-page__bar-fill--warning::-webkit-progress-value { background: var(--warning); }
.health-page__bar-fill--warning::-moz-progress-bar      { background: var(--warning); }

.health-page__bar-fill--error { accent-color: var(--error); }
.health-page__bar-fill--error::-webkit-progress-value { background: var(--error); }
.health-page__bar-fill--error::-moz-progress-bar      { background: var(--error); }

/* ----- Engine activity list ----- */
.health-page__activity-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.health-page__activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--surface-3);
}

.health-page__activity-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.health-page__activity-status {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--success);
  flex-shrink: 0;
  margin-top: 6px;
}

.health-page__activity-content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.health-page__activity-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.health-page__activity-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-strong);
}

.health-page__activity-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
}

.health-page__activity-summary {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health-page__activity-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 2px;
}

.health-page__activity-date {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.health-page__activity-hm {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

/* ----- Warnings ----- */
.health-page__warnings {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.health-page__warning-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-md);
}

.health-page__warning-item--warning {
  border-color: var(--warning);
  background: var(--warning-soft);
}

.health-page__warning-item--error {
  border-color: var(--error);
  background: var(--error-soft);
}

.health-page__warning-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--text-muted);
  margin-top: 2px;
}

.health-page__warning-item--warning .health-page__warning-icon { color: var(--warning); }
.health-page__warning-item--error   .health-page__warning-icon { color: var(--error); }

.health-page__warning-content {
  flex: 1 1 0;
  min-width: 0;
}

.health-page__warning-message {
  font-size: var(--text-sm);
  color: var(--text);
  margin: 0;
}

.health-page__warning-timestamp {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin: var(--space-1) 0 0;
}

/* ----- Usage history table ----- */
.health-page__table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-md);
}

.health-page__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.health-page__table-header-row {
  border-bottom: 1px solid var(--surface-3);
}

.health-page__table-header {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
  background: var(--surface-2);
}

.health-page__table-body { }

.health-page__table-row {
  border-bottom: 1px solid var(--surface-3);
}

.health-page__table-row:last-child {
  border-bottom: none;
}

.health-page__table-row:hover {
  background: var(--surface-2);
}

.health-page__table-cell {
  padding: var(--space-2) var(--space-4);
  color: var(--text);
  white-space: nowrap;
}

.health-page__table-cell--mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.health-page__table-cell--success { color: var(--success); }
.health-page__table-cell--warning { color: var(--warning); }
.health-page__table-cell--error   { color: var(--error); }

/* ----- Empty states ----- */
.health-page__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.health-page__empty-icon {
  width: 2rem;
  height: 2rem;
  color: var(--text-subtle);
}

.health-page__empty-title {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

.health-page__empty-body {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin: 0;
}

/* ----- Mobile overrides ----- */
@media (max-width: 639px) {
  .health-page__card {
    padding: var(--space-4);
  }

  .health-page__header-actions {
    flex-wrap: wrap;
  }

  .health-page__activity-summary {
    white-space: normal;
  }
}