/* Faultline — geological color palette */
:root {
  --surface: #FAF8F5;
  --bedrock: #1E293B;
  --sediment: #64748B;
  --sandstone: #D4A574;
  --tremor: #F59E0B;
  --rupture: #DC2626;
  --dormant: #059669;
  --magma: #EA580C;
  --obsidian: #0F172A;
  --radius: 6px;
  --font-sans: Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--bedrock);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-main { flex: 1 0 auto; padding-bottom: 2.5rem; }

/* Site footer — keeps the last row of content off the browser edge. */
.site-footer {
  flex-shrink: 0;
  border-top: 1px solid #e5e2df;
  background: var(--surface);
  padding: 1rem 0 1.25rem;
  margin-top: 2rem;
}
.site-footer-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.72rem;
  color: var(--sediment);
  font-family: var(--font-mono);
  letter-spacing: 0.2px;
}
.site-footer-brand {
  color: var(--bedrock);
  font-weight: 600;
}
.site-footer-brand span {
  color: var(--rupture);
  margin: 0 0.05em;
}
.site-footer-mode {
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.6px;
  background: #eeeae4;
  color: var(--sediment);
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
}
.site-footer-version {
  font-size: 0.65rem;
  color: var(--sediment);
  opacity: 0.7;
}
.site-footer-spacer { flex: 1; }
.site-footer-link {
  color: var(--sediment);
  text-decoration: none;
}
.site-footer-link:hover {
  color: var(--bedrock);
  text-decoration: underline;
}

a { color: var(--bedrock); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout — container widened to 1440px so wide displays (1440/1920+)
   stop wasting half the viewport on side rails. Reading-width caps
   on prose-heavy elements (.settings-form, .dsn-text, .form-hint, etc.)
   keep text columns from sprawling, so this only widens the chrome
   and grid surfaces that benefit from the extra room. */
.container { max-width: 1440px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 1024px) {
  .container { padding: 0 2rem; }
}
@media (min-width: 1440px) {
  .container { padding: 0 3rem; }
}

/* Base card (fl-zim). Dashboard templates use `.card` as a default
   surface around tables, stat rows, and form blocks, but the
   stylesheet only defined variants (.project-card, .db-card,
   .section-card). Bare `<div class="card">` landed flat on the
   background, which read as "overflow" compared to the styled
   landing-page cards. Variants still add their own background /
   shadow — this rule only kicks in when no variant is present, so
   nothing that was already styled changes. */
.card {
  background: white;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  overflow-x: auto; /* horizontal scroll on wide tables inside cards */
}

.nav {
  background: var(--bedrock);
  color: var(--surface);
  padding: 0.65rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  position: relative;
}
.nav-brand {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--surface);
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.nav-brand span { color: var(--rupture); }
.nav-brand:hover { text-decoration: none; }
.nav-links {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex: 1;
}
.nav-links a {
  color: var(--surface);
  opacity: 0.75;
  font-size: 0.875rem;
  padding: 0.25rem 0;
}
.nav-links a:hover {
  opacity: 1;
  text-decoration: none;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

/* Cloud link — "faultline.live" pill with a pulsing dot so the
   affordance reads as "go to the hosted instance" rather than
   just another nav entry. Only rendered in local mode. */
.nav-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid rgba(250, 248, 245, 0.18);
  border-radius: 999px;
  color: var(--surface);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  transition: border-color 0.15s, background 0.15s;
}
.nav-live:hover {
  border-color: rgba(250, 248, 245, 0.45);
  background: rgba(250, 248, 245, 0.06);
  text-decoration: none;
}
.nav-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dormant);
  box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.55);
  animation: navLivePulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.nav-live-arrow {
  opacity: 0.55;
  font-size: 0.72rem;
}
@keyframes navLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(5, 150, 105, 0);   }
}

/* Account dropdown — <details>/<summary> so the whole thing works
   without JS. Clicking outside closes via JS that toggles the
   [open] attribute (see script at the bottom of the file). */
.nav-account {
  position: relative;
}
.nav-account > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.4rem 0.25rem 0.25rem;
  border-radius: 999px;
  cursor: pointer;
  color: var(--surface);
  font-size: 0.85rem;
  border: 1px solid transparent;
}
.nav-account > summary:hover {
  border-color: rgba(250, 248, 245, 0.2);
}
.nav-account > summary::-webkit-details-marker { display: none; }
.nav-account[open] > summary {
  background: rgba(250, 248, 245, 0.08);
  border-color: rgba(250, 248, 245, 0.25);
}
.nav-account-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sandstone), var(--magma));
  color: var(--obsidian);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-account-name {
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-account-caret {
  font-size: 0.6rem;
  opacity: 0.65;
  transition: transform 0.15s;
}
.nav-account[open] .nav-account-caret { transform: rotate(180deg); }

.nav-account-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  min-width: 220px;
  background: #fff;
  color: var(--bedrock);
  border: 1px solid #e5e2df;
  border-radius: var(--radius);
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06);
  padding: 0.35rem 0;
  z-index: 110;
}
.nav-account-header {
  padding: 0.65rem 0.9rem 0.8rem;
  border-bottom: 1px solid #f1eeeb;
  margin-bottom: 0.25rem;
}
.nav-account-header-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--bedrock);
}
.nav-account-header-email {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--sediment);
  margin-top: 0.15rem;
  word-break: break-all;
}
.nav-account-header-role {
  display: inline-block;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sediment);
  background: #f7f4f0;
  border: 1px solid #e5e2df;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}
.nav-account-section {
  padding: 0.55rem 0.9rem 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sediment);
}
.nav-account-item {
  display: block;
  padding: 0.45rem 0.9rem;
  font-size: 0.86rem;
  color: var(--bedrock);
}
.nav-account-item:hover {
  background: #f7f4f0;
  text-decoration: none;
  color: var(--magma);
}
.nav-account-divider {
  height: 1px;
  background: #f1eeeb;
  margin: 0.3rem 0;
}
.nav-account-logout {
  color: var(--rupture);
}
.nav-account-logout:hover {
  background: #fcf0f0;
  color: var(--rupture);
}

/* Hamburger — hidden on desktop; on mobile it replaces .nav-links
   with a dropdown panel. Checkbox hack keeps the toggle CSS-only. */
.nav-toggle { display: none; }
.nav-burger { display: none; }

@media (max-width: 768px) {
  .nav-inner {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .nav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px; height: 36px;
    padding: 7px 8px;
    cursor: pointer;
    border-radius: var(--radius);
    order: 3;
    margin-left: auto;
  }
  .nav-burger span {
    display: block;
    height: 2px;
    background: var(--surface);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
    transform-origin: 50% 50%;
  }
  .nav-burger:hover { background: rgba(250, 248, 245, 0.08); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .nav-right {
    order: 4;
    margin-left: 0;
  }
  .nav-live-label { display: none; }
  .nav-live { padding: 0.3rem 0.45rem; }

  .nav-links {
    order: 5;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    display: none;
    padding: 0.25rem 0 0.5rem;
    border-top: 1px solid rgba(250, 248, 245, 0.12);
    margin-top: 0.5rem;
  }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-links a {
    padding: 0.6rem 0;
    opacity: 0.85;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(250, 248, 245, 0.06);
  }
  .nav-links a:last-child { border-bottom: none; }

  .nav-account-name { display: none; }
  .nav-account-menu {
    right: auto;
    left: 0;
    min-width: 240px;
  }
}

/* Filters */
.filters {
  display: flex; gap: 0.5rem; padding: 1rem 0;
  flex-wrap: wrap; align-items: center;
}
.filter-tab {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
  background: transparent;
  border: 1px solid transparent;
  color: var(--sediment);
  cursor: pointer;
}
.filter-tab:hover { background: #f1eeeb; }
.filter-tab.active { background: var(--bedrock); color: var(--surface); }
.filter-tab.filter-sm { font-size: 0.7rem; padding: 0.25rem 0.5rem; }
.filter-separator { width: 1px; height: 1rem; background: #e2e0dd; margin: 0 0.25rem; }
.sort-label { font-size: 0.7rem; color: var(--sediment); }
.project-platform-tag {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--sediment);
  margin-left: 0.5rem;
}

/* Issue cards */
.issue-list { display: flex; flex-direction: column; gap: 1px; background: #e5e2df; border-radius: var(--radius); overflow: hidden; }

.issue-card-row {
  display: grid;
  grid-template-columns: auto 1fr;
  background: white;
  align-items: start;
}
.issue-card-row:hover { background: #faf8f5; }

.bulk-checkbox {
  display: flex;
  align-items: center;
  padding: 0.75rem 0 0.75rem 0.75rem;
  cursor: pointer;
}
.bulk-checkbox input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--stratum, #5a544c);
}

.issue-card {
  background: transparent;
  padding: 0.75rem 1rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0 0.75rem;
  align-items: start;
  cursor: pointer;
  transition: background 0.1s;
}
.issue-card:hover { background: #faf8f5; }

.bulk-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background: #3d3831;
  color: #f5f3ef;
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: 0.8rem;
  position: sticky;
  top: 0;
  z-index: 10;
}
.bulk-select-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.bulk-select-info input[type="checkbox"] {
  accent-color: #f5f3ef;
}
.bulk-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.bulk-actions .btn-sm {
  padding: 0.25rem 0.6rem;
  font-size: 0.7rem;
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent;
  color: #f5f3ef;
  cursor: pointer;
  border-radius: 3px;
}
.bulk-actions .btn-sm:hover {
  background: rgba(255,255,255,0.1);
}
.bulk-actions .btn-resolve { border-color: #7caa6e; color: #a5d698; }
.bulk-actions .btn-resolve:hover { background: rgba(124,170,110,0.2); }
.bulk-actions .btn-ignore { border-color: #b8a67e; color: #d4c59d; }
.bulk-actions .btn-ignore:hover { background: rgba(184,166,126,0.2); }
.bulk-actions .btn-unresolve { border-color: #c4847a; color: #e0a79f; }
.bulk-actions .btn-unresolve:hover { background: rgba(196,132,122,0.2); }
.bulk-actions .btn-snooze { border-color: #8b8bf0; color: #a5a5f7; }
.bulk-actions .btn-snooze:hover { background: rgba(99,102,241,0.2); }
.bulk-actions .btn-unsnooze { border-color: #8b8bf0; color: #a5a5f7; }
.bulk-actions .btn-unsnooze:hover { background: rgba(99,102,241,0.2); }
.bulk-assign-select {
  padding: 0.2rem 0.4rem;
  font-size: 0.7rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #f5f3ef;
  border-radius: 3px;
  cursor: pointer;
}
.bulk-assign-select option { background: #3d3831; color: #f5f3ef; }

.issue-severity {
  font-size: 1.1rem;
  line-height: 1.4;
  width: 1.5rem;
  text-align: center;
}

.issue-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  word-break: break-word;
}
.issue-culprit {
  font-size: 0.75rem;
  color: var(--sediment);
  font-family: var(--font-mono);
}
.issue-meta {
  font-size: 0.7rem;
  color: var(--sediment);
  margin-top: 0.25rem;
}

.issue-stats {
  text-align: right;
  white-space: nowrap;
}
.issue-count {
  font-size: 0.8rem;
  font-weight: 600;
}
.issue-magnitude {
  font-size: 0.65rem;
  color: var(--sediment);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Lifecycle stage indicators on issue list */
.issue-lifecycle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  font-size: 0.7rem;
}
.lifecycle-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-weight: 500;
  white-space: nowrap;
}
.stage-detected { background: #f0e8df; color: #8a7a6a; }
.stage-picked-up { background: #e6f0ff; color: #3570b0; }
.stage-dispatched { background: #e0f5ec; color: #1a7a4a; }
.stage-escalated { background: #ffeedd; color: #b06020; }
.stage-resolved { background: #e0f5e4; color: #1a6a30; }
.stage-regressed { background: #fde8e8; color: #a03030; }
.stage-snoozed { background: #ededff; color: #6366f1; }
.lifecycle-actor {
  color: var(--sediment);
  font-family: var(--font-mono);
  font-size: 0.65rem;
}
.lifecycle-when {
  color: var(--sediment);
  font-size: 0.65rem;
}

/* Severity colors */
.severity-tremor { color: var(--tremor); }
.severity-quake { color: var(--rupture); }
.severity-rupture { color: var(--magma); }
.severity-dormant { color: var(--dormant); }
/* Resolution overlays — when an issue is fixed or has regressed,
   the status overrides the level-based tint so the row reads as
   "closed out" or "back from the dead" at a glance. */
.severity-fixed {
  color: var(--dormant);
  position: relative;
}
.severity-fixed::after {
  content: "✓";
  font-size: 0.72em;
  margin-left: 0.15em;
  color: var(--dormant);
}
.severity-regressed {
  color: var(--rupture);
  filter: drop-shadow(0 0 4px rgba(220, 38, 38, 0.45));
}

/* Small state pill next to the meta text on a recent-fault row.
   "fixed" picks up the dormant green; "regressed" the rupture
   red — mirrors the severity overlay so the two cues reinforce. */
.station-recent-state {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  margin-right: 0.4rem;
  border: 1px solid transparent;
}
.station-recent-state-fixed {
  color: var(--dormant);
  background: #e7f6ee;
  border-color: #c9e6d7;
}
.station-recent-state-regressed {
  color: var(--rupture);
  background: #fef0f0;
  border-color: #f2c7c7;
}

/* Status badges */
.badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.badge-active { background: #fef2f2; color: var(--rupture); }
.badge-fixing { background: #fef3c7; color: #92400e; }
.badge-resolved { background: #ecfdf5; color: var(--dormant); }
.badge-regressed { background: #fff7ed; color: var(--magma); }
.badge-snoozed { background: #f0f0ff; color: #6366f1; }
.badge-platform { background: #f0f4ff; color: #3b5998; }
.badge-assignee { background: #f0fdf4; color: #166534; }

/* Assignment widget */
.assignment-widget { padding: 0.75rem 0; border-bottom: 1px solid #e5e2df; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.assignment-current { color: var(--text-secondary); font-size: 0.9rem; }
.assign-select { padding: 0.25rem 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.85rem; background: #fff; }

/* Detail page */
.detail-header { padding: 1.5rem 0 1rem; border-bottom: 1px solid #e5e2df; }
.detail-title {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.detail-meta { display: flex; gap: 1.5rem; font-size: 0.8rem; color: var(--sediment); flex-wrap: wrap; }

.detail-body { padding: 1.5rem 0; }
.detail-section { margin-bottom: 2rem; }
.detail-section h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sediment);
  margin-bottom: 0.75rem;
}

/* Stack trace */
.stack-frame {
  background: var(--obsidian);
  color: #e2e8f0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.frame-header {
  padding: 0.5rem 0.75rem;
  background: rgba(255,255,255,0.05);
  color: var(--sandstone);
  font-size: 0.72rem;
}
.frame-code {
  padding: 0.5rem 0;
}
.frame-line {
  padding: 0 0.75rem;
  line-height: 1.6;
  white-space: pre;
}
.frame-line.active {
  background: rgba(220, 38, 38, 0.15);
  border-left: 3px solid var(--rupture);
}
.line-num {
  display: inline-block;
  width: 3rem;
  color: var(--sediment);
  text-align: right;
  margin-right: 1rem;
  user-select: none;
}

/* Raw JSON */
.raw-json {
  background: var(--obsidian);
  color: #e2e8f0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius);
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Events table (still used by containers / databases / service / other views) */
.events-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.events-table th {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 2px solid #e5e2df;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--sediment);
}
.events-table td {
  padding: 0.5rem;
  border-bottom: 1px solid #f0edea;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.events-table tr:hover { background: #faf8f5; }

/* Live-refresh indicator dot — signals that a section is self-updating
   via HTMX polling. Subtle pulse keeps it from being a distraction. */
.gt-section-live {
  display: inline-block;
  vertical-align: 0.15em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-left: 0.45rem;
  background: var(--dormant);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--dormant) 40%, transparent);
  animation: gt-section-live-pulse 2.4s ease-in-out infinite;
}
@keyframes gt-section-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dormant) 40%, transparent); opacity: 0.85; }
  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--dormant) 0%, transparent);  opacity: 1;    }
}
@media (prefers-reduced-motion: reduce) {
  .gt-section-live { animation: none; }
}

/* Section header count pill */
.section-count {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--sediment);
  background: #eeeae4;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  margin-left: 0.4rem;
  vertical-align: 0.15em;
  letter-spacing: 0.2px;
}

/* ---------- Events list (redesigned from table) ---------- */
.events-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #ece7e1;
}
.events-row {
  border-bottom: 1px solid #ece7e1;
}
.events-link {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto auto 80px;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0.5rem;
  font-size: 0.78rem;
  color: var(--bedrock);
  transition: background 0.1s ease;
}
.events-link:hover {
  background: #faf8f5;
  text-decoration: none;
}
.events-level {
  justify-self: start;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  background: #eeeae4;
  color: var(--sediment);
  border: 1px solid transparent;
}
.events-level--debug   { background: #eef2f7; color: var(--sediment); }
.events-level--info    { background: #e7efe9; color: #1f6b4b; }
.events-level--warning { background: #fef3c7; color: #92400e; }
.events-level--error   { background: #fee2e2; color: var(--rupture); }
.events-level--fatal   { background: var(--obsidian); color: #fff; }
.events-message {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--obsidian);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.events-badges {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  flex-shrink: 0;
}
.events-platform {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--sediment);
  text-transform: lowercase;
}
.events-time {
  font-size: 0.72rem;
  color: var(--sediment);
  white-space: nowrap;
  justify-self: end;
  font-variant-numeric: tabular-nums;
}
.events-id {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--sediment);
  justify-self: end;
  background: #f5f1eb;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}
.events-note {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--sediment);
  margin-left: 0.35rem;
}
@media (max-width: 720px) {
  .events-link {
    grid-template-columns: 55px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    row-gap: 0.2rem;
  }
  .events-badges { grid-column: 2 / 4; }
  .events-time   { grid-column: 3; grid-row: 1; }
  .events-id     { display: none; }
}

/* ---------- Lifecycle timeline (redesigned) ---------- */
.lifecycle-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.lifecycle-timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 0.85rem;
  bottom: 0.85rem;
  width: 2px;
  background: linear-gradient(to bottom, #e5e2df 0%, #e5e2df 100%);
  border-radius: 1px;
}
.lifecycle-entry {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0.75rem;
  padding: 0.55rem 0;
  position: relative;
}
.lifecycle-entry + .lifecycle-entry { border-top: 1px solid #f0edea; }
.lifecycle-node {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid #d6cfc6;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  margin-top: 0.15rem;
  box-shadow: 0 0 0 3px var(--surface);
  transition: border-color 0.15s ease;
}
.lifecycle-icon {
  font-size: 0.75rem;
  line-height: 1;
}
.lifecycle-node--detection       { border-color: var(--sediment); }
.lifecycle-node--bead_filed      { border-color: var(--sandstone); background: #fdf6ec; }
.lifecycle-node--slow_burn_bead  { border-color: var(--tremor); background: #fef3c7; }
.lifecycle-node--dispatched      { border-color: var(--sandstone); }
.lifecycle-node--notified        { border-color: var(--sandstone); }
.lifecycle-node--assigned        { border-color: var(--sandstone); }
.lifecycle-node--commit_detected { border-color: var(--dormant); background: #ecfdf4; }
.lifecycle-node--ci_green        { border-color: var(--dormant); background: #ecfdf4; }
.lifecycle-node--resolved        { border-color: var(--dormant); background: var(--dormant); }
.lifecycle-node--resolved .lifecycle-icon { filter: grayscale(0); }
.lifecycle-node--regression      { border-color: var(--rupture); background: #fee2e2; }
.lifecycle-node--fix_failed      { border-color: var(--rupture); background: #fee2e2; }
.lifecycle-node--escalation      { border-color: var(--magma); background: #ffedd5; }
.lifecycle-node--snoozed         { border-color: var(--sediment); background: #eef2f7; }
.lifecycle-node--unsnoozed       { border-color: var(--sediment); background: var(--surface); }
.lifecycle-node--ignored         { border-color: var(--sediment); }

.lifecycle-content { min-width: 0; }
.lifecycle-headline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
}
.lifecycle-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--obsidian);
  letter-spacing: -0.1px;
}
.lifecycle-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  letter-spacing: 0.2px;
  background: #eeeae4;
  color: var(--sediment);
  border: 1px solid #e0dbd3;
  text-transform: lowercase;
  line-height: 1.4;
}
.lifecycle-chip--trigger  { background: #f1f5f9; color: var(--bedrock); }
.lifecycle-chip--quiet    { background: #ecfdf4; color: #1f6b4b; border-color: #c8eed7; }
.lifecycle-chip--verified { background: var(--dormant); color: #fff; border-color: transparent; }
.lifecycle-time {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--sediment);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lifecycle-reason {
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--bedrock);
  line-height: 1.45;
}
.lifecycle-reason--solution {
  color: #1f6b4b;
  font-style: italic;
}
.lifecycle-meta {
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-size: 0.7rem;
  color: var(--sediment);
}
.lifecycle-meta-item { white-space: nowrap; }
.lifecycle-meta-item code,
.lifecycle-reason code {
  font-family: var(--font-mono);
  background: #f5f1eb;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  font-size: 0.68rem;
  color: var(--obsidian);
}
.lifecycle-meta .lifecycle-sha {
  background: #ecfdf4;
  color: #1f6b4b;
  border: 1px solid #c8eed7;
}

/* Page header */
.page-header { padding: 1.5rem 0 1rem; }
.page-header h2 { font-size: 1.2rem; font-weight: 700; }
.page-subtitle { font-size: 0.85rem; color: var(--sediment); margin-top: 0.25rem; }

/* Project grid. auto-fit (vs auto-fill) collapses empty tracks so a
   small project count fills the available width instead of pinning
   one card to the left and reserving phantom tracks across the rest
   of the row. min-width 280px (was 340px) so a 4–5 project tenant
   wraps into multiple rows on a 1408px content area instead of
   stretching every card across the full width. Bigger tenants get
   the natural 4–5-col grid. */
/* Project grid: 3 cards per row at desktop width, 2 at tablet,
   1 at mobile. Earlier rule was auto-fit minmax(280px, 1fr) which
   produced 4–5 cards per row on wide screens — cards became
   uselessly squat. Three is the right density: each card has room
   for the title, status pill, stat row, and tags without the
   project list reading as a giant directory. */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
  padding-bottom: 2rem;
}
@media (max-width: 720px) {
  .project-grid { grid-template-columns: minmax(0, 1fr); }
}
.project-card {
  background: white;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 0.15s, transform 0.15s;
  display: block;
  overflow: hidden;
}
.project-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transform: translateY(-2px);
  text-decoration: none;
}
.card-status-bar {
  height: 4px;
  width: 100%;
}
.bar-green { background: var(--dormant); }
.bar-yellow { background: var(--tremor); }
.bar-stale { background: var(--tremor); opacity: 0.6; }
.bar-red { background: var(--rupture); animation: pulse-bar 2s infinite; }
.bar-unmonitored { background: var(--sediment); }
@keyframes pulse-bar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.card-body { padding: 1rem 1.25rem; }
.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}
.project-name {
  font-size: 1rem;
  font-weight: 700;
}
.project-desc {
  font-size: 0.75rem;
  color: var(--sediment);
  margin-bottom: 0.625rem;
}
.project-running {
  font-size: 0.65rem;
  color: var(--dormant);
  font-weight: 600;
  white-space: nowrap;
}
.project-stopped {
  font-size: 0.65rem;
  color: var(--sediment);
  white-space: nowrap;
}
.sparkline-container { margin: 0.4rem 0; color: var(--sediment); }
.sparkline-container.sparkline-alert { color: var(--rupture); }
.sparkline { display: block; }
.stat-uptime-good { color: var(--dormant); }
.stat-uptime-warn { color: var(--tremor); }
.project-down {
  font-size: 0.65rem;
  color: var(--rupture);
  font-weight: 600;
  white-space: nowrap;
}

/* Live stream */
.live-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0 1rem;
}
.live-status {
  font-size: 0.75rem;
  font-weight: 600;
}
.live-connected { color: var(--dormant); }
.live-connecting { color: var(--tremor); }
.live-disconnected { color: var(--sediment); }
.live-count {
  font-size: 0.7rem;
  color: var(--sediment);
  font-family: var(--font-mono);
}
.live-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 80vh;
  overflow-y: auto;
}
.live-event {
  display: grid;
  grid-template-columns: 1.5rem 8rem 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid #f1eeeb;
  font-size: 0.8rem;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; background: #fffbeb; }
  to { opacity: 1; background: transparent; }
}
.live-event-icon { font-size: 0.85rem; text-align: center; }
.live-event-project {
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--bedrock);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-event-msg {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--sediment);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-event-time {
  font-size: 0.65rem;
  color: var(--sediment);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.project-remote {
  font-size: 0.65rem;
  color: var(--sandstone);
  font-weight: 600;
  white-space: nowrap;
}
.project-infra {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}
.infra-chip {
  font-size: 1rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: var(--radius);
  cursor: default;
  text-decoration: none;
}
a.infra-link {
  cursor: pointer;
  background: #e6f0ff;
  transition: background 0.15s;
}
a.infra-link:hover {
  background: #cce0ff;
}

/* Dolt chip on the faultline project card. Uses the same pulse-dot
   legend as the station hero so the chip's health reading lines up
   visually with what the project's own overview page would show. */
.infra-chip.infra-dolt {
  position: relative;
  background: #f5f3ef;
}
.infra-chip.infra-dolt .infra-chip-dot {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--sediment);
}
.infra-chip.infra-dolt-healthy .infra-chip-dot { background: var(--dormant); }
.infra-chip.infra-dolt-faults  .infra-chip-dot { background: var(--tremor); }
.infra-chip.infra-dolt-down    .infra-chip-dot { background: var(--rupture); }
.infra-chip.infra-dolt-silent  .infra-chip-dot { background: var(--sediment); }

/* Cloud-card infra chip with inline number (rig count). Widens past
   the 2rem icon-only default so "🛰 3" fits without crowding. */
.infra-chip:has(.infra-chip-label) {
  width: auto;
  padding: 0 0.5rem;
  gap: 0.25rem;
}
.infra-chip-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-strong, #1f2937);
}

/* Slug subhead on the cloud project card — sits in the .project-desc
   slot but reads as a slug, not free-form text. Slightly muted +
   monospace-leaning so the operator's eye lands on it as an identifier. */
.cloud-card-slug {
  color: var(--text-muted, #64748b);
  font-size: 0.8125rem;
}
.card-envs {
  display: flex;
  gap: 0.375rem;
  padding-top: 0.625rem;
  border-top: 1px solid #f1eeeb;
}
.env-badge {
  font-size: 0.6rem;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.env-production { background: #ecfdf5; color: var(--dormant); }
.env-staging { background: #fffbeb; color: #b45309; }
.env-development { background: #f1f5f9; color: var(--sediment); }

/* Problem & Resolution boxes */
.problem-box {
  background: #fef2f2;
  border-left: 3px solid var(--rupture);
  padding: 0.75rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.problem-type {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}
.problem-type code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: rgba(220,38,38,0.1);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  color: var(--rupture);
}
.problem-platform {
  font-size: 0.7rem;
  color: var(--sediment);
}
.problem-message {
  font-size: 0.85rem;
  font-weight: 500;
  word-break: break-word;
  margin-bottom: 0.25rem;
}
.problem-culprit {
  font-size: 0.75rem;
  color: var(--sediment);
}
.problem-culprit code {
  font-family: var(--font-mono);
  font-size: 0.7rem;
}
.problem-impact {
  font-size: 0.7rem;
  color: var(--sediment);
  margin-top: 0.375rem;
}
.resolution-box {
  background: #ecfdf5;
  border-left: 3px solid var(--dormant);
  padding: 0.75rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.resolution-box.regressed {
  background: #fff7ed;
  border-left-color: var(--magma);
}
.resolution-icon { font-size: 1rem; }
.resolution-text { font-size: 0.85rem; font-weight: 500; white-space: pre-line; }
.resolve-form textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  padding: 0.5rem;
  border: 1px solid #e5e2df;
  border-radius: var(--radius);
  resize: vertical;
}
.resolve-form textarea:focus {
  outline: none;
  border-color: var(--bedrock);
}
.resolve-form h3 { margin-bottom: 0.75rem; }
.resolve-form .form-group { margin-bottom: 0.75rem; }
.resolve-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--bedrock);
}
.resolution-bead {
  font-size: 0.7rem;
  color: var(--sediment);
  margin-top: 0.25rem;
}
.resolution-bead code {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  background: rgba(5,150,105,0.1);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}
.resolution-details {
  background: #f0f9ff;
  border-left: 3px solid var(--info, #3b82f6);
  padding: 0.75rem 1rem;
  border-radius: 0 4px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.bead-comments {
  background: #fef9e7;
  border-left: 3px solid #f59e0b;
  padding: 0.75rem 1rem;
  border-radius: 0 4px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.bead-comment {
  font-size: 0.85rem;
  color: var(--bedrock);
  white-space: pre-wrap;
  font-family: var(--font-mono);
  line-height: 1.5;
}
.bead-comments-footer {
  font-size: 0.7rem;
  color: var(--sediment);
  border-top: 1px solid rgba(245,158,11,0.2);
  padding-top: 0.5rem;
}
.bead-comments-footer code {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  background: rgba(245,158,11,0.15);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}
.resolution-detail-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sediment);
  margin-bottom: 0.15rem;
}
.resolution-detail-text {
  font-size: 0.85rem;
  white-space: pre-line;
}
.resolution-detail-text code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: rgba(59,130,246,0.1);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}
.project-stats {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 0.75rem;
}
.project-stat { display: flex; flex-direction: column; }
.stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1.2;
}
.stat-value.stat-alert { color: var(--tremor); }
.stat-value.stat-danger { color: var(--rupture); }
.stat-value.stat-muted {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--sediment);
}
.stat-label {
  font-size: 0.6rem;
  color: var(--sediment);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Auth pages */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 3rem;
  padding: 2rem;
  background: linear-gradient(135deg, var(--obsidian) 0%, var(--bedrock) 50%, #2d3a4f 100%);
}
.auth-hero {
  max-width: 420px;
  color: var(--surface);
}
.auth-logo {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: 0.75rem;
}
.auth-logo span { color: var(--rupture); }
.auth-tagline {
  font-size: 1.1rem;
  line-height: 1.5;
  color: #94a3b8;
  margin-bottom: 2rem;
}
.auth-features { display: flex; flex-direction: column; gap: 1rem; }
.auth-feature {
  display: flex; flex-direction: column; gap: 0.125rem;
}
.auth-feature strong { font-size: 0.85rem; color: var(--surface); }
.auth-feature span { font-size: 0.8rem; color: #94a3b8; }
.auth-card {
  background: white;
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  width: 100%;
  max-width: 380px;
  flex-shrink: 0;
}
.auth-card h1.auth-logo {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  color: var(--bedrock);
}
.auth-card h2 {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}
.auth-card h2 span { color: var(--rupture); }
.auth-card-sub { color: var(--sediment); font-size: 0.85rem; margin-bottom: 1.5rem; }
.auth-card p { color: var(--sediment); font-size: 0.85rem; margin-bottom: 1.5rem; }
.auth-version {
  margin-top: 1.25rem;
  font-size: 0.72rem;
  color: var(--sediment);
  opacity: 0.6;
  font-family: var(--font-mono);
  text-align: center;
}

@media (max-width: 768px) {
  .auth-page { flex-direction: column; gap: 2rem; }
  .auth-hero { text-align: center; }
  .auth-logo { font-size: 2rem; }
}

.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.form-group input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1cdc8;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-family: var(--font-sans);
}
.form-group input:focus { outline: 2px solid var(--bedrock); outline-offset: -1px; }

/* Buttons share the same visual height as form inputs/selects (font
   0.875rem, padding 0.5rem 0.75rem) so a button next to a dropdown
   reads as one control row instead of two mismatched widgets. The
   .btn-sm variant is now slightly smaller for tight contexts (table
   row actions) but still tall enough to read alongside form-inline
   controls. */
.btn {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  line-height: 1.4;
}
.btn-primary { background: var(--bedrock); color: var(--surface); }
.btn-primary:hover { background: var(--obsidian); }
.btn-dispatch { background: #e0f5ec; color: #1a7a4a; border: 1px solid #b0dfc8; }
.btn-dispatch:hover { background: #c8ebd8; }
.btn-notify { background: #e6f0ff; color: #3570b0; border: 1px solid #b0cee8; }
.btn-notify:hover { background: #cce0ff; }
.action-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.btn-sm {
  padding: 0.5rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  background: #f0ede8;
  color: var(--sediment);
  text-decoration: none;
}
.btn-sm:hover { background: #e5e2df; color: var(--bedrock); }
.btn-full { width: 100%; }

.alert { padding: 0.75rem; border-radius: var(--radius); font-size: 0.8rem; margin-bottom: 1rem; }
.alert-error { background: #fef2f2; color: var(--rupture); }

/* Settings form */
.settings-form { max-width: 32rem; }

/* Cloud-better banner at the top of the local-mode Integrations
   tab. Steers operators toward faultline.live for integrations that
   need always-on infrastructure. */
.settings-cloud-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: #f4f7fb;
  border: 1px solid #d6dfee;
  border-left: 3px solid #4a6fa5;
  border-radius: var(--radius);
  margin: 0 0 1.25rem;
}
.settings-cloud-banner-icon {
  font-size: 1.4rem;
  color: #4a6fa5;
  line-height: 1;
}
.settings-cloud-banner-body { flex: 1; min-width: 0; }
.settings-cloud-banner-body strong {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 0.3rem;
}
.settings-cloud-banner-body p {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  color: var(--sediment);
  line-height: 1.45;
}
.settings-cloud-banner-link {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4a6fa5;
}
.settings-cloud-banner-link:hover {
  color: var(--bedrock);
  text-decoration: none;
}

/* Cloud-better integration sections collapse via <details> so they
   don't crowd the local-DSN + Cloud-Relay sections that operators
   actually use day-to-day. Configured-on-this-project sections stay
   open by default (open?={...} in templ); fresh installs see a
   clean compact list of disclosure rows. */
.settings-cloud-better {
  margin: 0.6rem 0;
  padding: 0;
  border: 1px solid #ece7df;
  border-radius: var(--radius);
  background: white;
}
.settings-cloud-better > summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 0.6rem 0.85rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.settings-cloud-better > summary::-webkit-details-marker { display: none; }
.settings-cloud-better > summary::before {
  content: '▸';
  font-size: 0.7rem;
  color: var(--sediment);
  transition: transform 0.15s;
}
.settings-cloud-better[open] > summary::before { transform: rotate(90deg); }
.settings-cloud-better-title { font-weight: 600; }
.settings-cloud-better-hint {
  color: var(--sediment);
  font-size: 0.78rem;
  font-weight: 400;
}
.settings-cloud-better[open] > .settings-form,
.settings-cloud-better[open] > p,
.settings-cloud-better[open] > table {
  padding: 0 1rem 0.85rem;
}

.settings-form select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1cdc8;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-family: var(--font-sans);
  background: white;
}
.settings-form select:focus { outline: 2px solid var(--bedrock); outline-offset: -1px; }
.form-hint { display: block; font-size: 0.7rem; color: var(--sediment); margin-top: 0.2rem; }
.form-actions { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.form-actions .btn { text-decoration: none; text-align: center; }
.page-header-row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.75rem; }

/* Pagination */
.pagination { display: flex; gap: 0.5rem; padding: 1rem 0; justify-content: center; }
.pagination a, .pagination span {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
}
.pagination a { background: white; border: 1px solid #d1cdc8; }
.pagination a:hover { background: #f1eeeb; text-decoration: none; }
.pagination .current { background: var(--bedrock); color: var(--surface); }

/* Release badges */
.release-badge {
  display: inline-block;
  background: #e8e0d6;
  color: var(--bedrock);
  padding: 0.15em 0.5em;
  border-radius: 4px;
  font-size: 0.78rem;
  font-family: monospace;
  white-space: nowrap;
}
.release-badge.release-sm { font-size: 0.72rem; padding: 0.1em 0.4em; }
.project-release { margin: 0.3rem 0; }
.problem-releases { margin: 0.5rem 0; display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--sediment); }

/* Merge UI */
.merge-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #f0f4f8;
  border: 1px solid #ccd5de;
  border-radius: 6px;
}
.merge-icon { font-size: 1.3rem; }
.merge-text { font-weight: 500; }
.merge-text a { color: var(--bedrock); text-decoration: underline; }
.merge-detail { font-size: 0.82rem; color: var(--sediment); margin-top: 0.2rem; }
.merge-warning { font-size: 0.85rem; color: var(--sediment); margin-bottom: 0.75rem; padding: 0.5rem; background: #fff8e1; border-radius: 4px; border: 1px solid #ffe082; }
.merge-form { background: var(--surface); padding: 1rem; border-radius: 6px; border: 1px solid #e0d6cc; }
.merge-results {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #e0d6cc;
  border-radius: 4px;
  margin-top: 0.25rem;
}
.merge-results:empty { border: none; }
.merge-result-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0ebe4;
}
.merge-result-item:last-child { border-bottom: none; }
.merge-result-item:hover { background: #f5f0eb; }
.merge-result-title { font-size: 0.9rem; }
.merge-result-meta { font-size: 0.78rem; color: var(--sediment); }
.merge-result-empty { padding: 0.5rem 0.75rem; color: var(--sediment); font-size: 0.85rem; }
.merge-selected {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #e8f5e9;
  border-radius: 4px;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}
.merged-children { display: flex; flex-direction: column; gap: 0.4rem; }
.merged-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.6rem;
  background: #f5f0eb;
  border-radius: 4px;
}
.merged-child a { color: var(--bedrock); text-decoration: underline; }
.merged-child-count { font-size: 0.8rem; color: var(--sediment); }

/* Snooze */
.snooze-info { font-size: 0.85rem; color: var(--bedrock); }
.snooze-reason { margin-top: 0.25rem; color: var(--sediment); font-style: italic; }

/* Empty state */
.empty { text-align: center; padding: 3rem 1rem; color: var(--sediment); }
.empty p { font-size: 0.9rem; }

/* Onboarding card — shown on empty projects page and after creating a project */
.onboarding {
  max-width: 44rem;
  margin: 1rem 0 2rem;
}
.onboarding-header {
  margin-bottom: 1.5rem;
}
.onboarding-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bedrock);
}
.onboarding-header p {
  font-size: 0.85rem;
  color: var(--sediment);
  margin-top: 0.25rem;
}
.onboarding-tier {
  background: white;
  border: 1px solid #e8e3dc;
  border-left: 3px solid var(--sandstone);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.onboarding-tier-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sandstone);
  margin-bottom: 0.4rem;
}
.onboarding-tier h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bedrock);
  margin-bottom: 0.4rem;
}
.onboarding-tier p {
  font-size: 0.82rem;
  color: var(--bedrock);
  margin: 0.4rem 0;
}
.onboarding-tier code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: #f4f0ea;
  padding: 0.05em 0.3em;
  border-radius: 3px;
}
.onboarding-code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--obsidian);
  color: #e2e8f0;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin: 0.5rem 0;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.5;
}
.onboarding-hint {
  font-size: 0.75rem !important;
  color: var(--sediment) !important;
  margin-top: 0.5rem !important;
}
.onboarding-footer {
  text-align: center;
  padding: 0.75rem;
  font-size: 0.8rem;
  color: var(--sediment);
}
.onboarding-footer a {
  color: var(--bedrock);
  text-decoration: underline;
}
.onboarding-copyrow {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.onboarding-copyinput {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1cdc8;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: #f9f7f4;
  color: var(--bedrock);
}

/* Cloud-mode empty-state: two parallel paths (solo MCP vs fleet) so a new
   user picks an approach before they hit "+ New project". */
.onboarding-paths {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (min-width: 980px) {
  .onboarding-paths { grid-template-columns: 1fr 1fr; }
}
.onboarding-path {
  background: white;
  border: 1px solid #e8e3dc;
  border-top: 3px solid var(--sandstone);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
}
.onboarding-path-fleet { border-top-color: var(--magma); }
.onboarding-path-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sandstone);
  margin-bottom: 0.5rem;
}
.onboarding-path-fleet .onboarding-path-label { color: var(--magma); }
.onboarding-path h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bedrock);
  margin: 0 0 0.5rem;
}
.onboarding-path p {
  font-size: 0.82rem;
  color: var(--bedrock);
  margin: 0.4rem 0;
  line-height: 1.5;
}
.onboarding-path code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: #f4f0ea;
  padding: 0.05em 0.3em;
  border-radius: 3px;
}
.onboarding-steps {
  font-size: 0.82rem;
  color: var(--bedrock);
  margin: 0.4rem 0 0.4rem 1.1rem;
  padding: 0;
  line-height: 1.55;
}
.onboarding-steps li { margin-bottom: 0.25rem; }
.onboarding-step-text {
  font-size: 0.82rem;
  color: var(--bedrock);
  margin: 0.6rem 0 0.2rem;
}

/* Database monitoring cards */
.db-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.db-card {
  background: white;
  border-radius: var(--radius);
  border: 1px solid #e5e2df;
  overflow: hidden;
  transition: box-shadow 0.15s;
  text-decoration: none;
  color: var(--bedrock);
  display: block;
}
.db-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); text-decoration: none; }
.db-card-status-bar { height: 3px; }
.db-bar-dormant { background: var(--dormant); }
.db-bar-tremor { background: var(--tremor); }
.db-bar-rupture { background: var(--rupture); }
.db-bar-sediment { background: var(--sediment); }
.db-card-body { padding: 1rem; }
.db-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.db-card-name { font-weight: 600; font-size: 0.95rem; }
.db-status { font-size: 0.8rem; font-weight: 500; }
.db-status-dormant { color: var(--dormant); }
.db-status-tremor { color: var(--tremor); }
.db-status-rupture { color: var(--rupture); }
.db-status-sediment { color: var(--sediment); }
.db-card-meta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.5rem; }
.db-type-badge {
  display: inline-block;
  background: #e8e0d6;
  color: var(--bedrock);
  padding: 0.1em 0.5em;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: monospace;
}
.db-type-badge.db-type-system {
  background: var(--bedrock);
  color: var(--surface);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.db-check-ago { font-size: 0.75rem; color: var(--sediment); }
.db-card-stats { display: flex; gap: 1rem; }

/* Database detail page */
.db-detail-summary {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: white;
  border-radius: var(--radius);
  border: 1px solid #e5e2df;
}
.db-status-large { font-size: 1.3rem; font-weight: 600; }
.db-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
}
.db-detail-meta code { font-size: 0.8rem; background: #f5f0eb; padding: 0.1em 0.3em; border-radius: 3px; }

/* Check history timeline */
.check-timeline { margin-bottom: 1rem; }
.check-timeline-svg { width: 100%; height: 40px; border-radius: 4px; background: #f5f0eb; }
.check-message { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; color: var(--sediment); }

/* Badge variants */
.badge { display: inline-block; padding: 0.15em 0.5em; border-radius: 4px; font-size: 0.75rem; font-weight: 500; }
.badge-green { background: #e0f5ec; color: #1a7a4a; }
.badge-yellow { background: #fef3cd; color: #856404; }
.badge-red { background: #fde8e8; color: #c62828; }
.badge-muted { background: #f0ede8; color: var(--sediment); }

/* Dolt health page */
.dolt-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.dolt-health-card {
  background: white;
  border-radius: var(--radius);
  border: 1px solid #e5e2df;
  padding: 1.25rem;
  text-align: center;
}
.dolt-health-label { font-size: 0.8rem; color: var(--sediment); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
.dolt-health-value { font-size: 1.5rem; font-weight: 700; font-family: var(--font-mono); }
.dolt-good { color: var(--dormant); }
.dolt-warn { color: var(--tremor); }
.dolt-bad { color: var(--rupture); }

/* Container monitoring cards */
.ct-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.ct-card {
  background: white;
  border-radius: var(--radius);
  border: 1px solid #e5e2df;
  overflow: hidden;
  transition: box-shadow 0.15s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.ct-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); text-decoration: none; }
.ct-card-status-bar { height: 3px; }
.ct-bar-dormant { background: var(--dormant); }
.ct-bar-tremor { background: var(--tremor); }
.ct-bar-rupture { background: var(--rupture); }
.ct-bar-sediment { background: var(--sediment); }
.ct-card-body { padding: 1rem; }
.ct-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.ct-card-name { font-weight: 600; font-size: 0.95rem; }
.ct-status { font-size: 0.8rem; font-weight: 500; }
.ct-status-dormant { color: var(--dormant); }
.ct-status-tremor { color: var(--tremor); }
.ct-status-rupture { color: var(--rupture); }
.ct-status-sediment { color: var(--sediment); }
.ct-card-meta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.5rem; }
.ct-service-badge {
  display: inline-block;
  background: #e0e8f0;
  color: var(--bedrock);
  padding: 0.1em 0.5em;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}
.ct-image-tag {
  font-size: 0.75rem;
  color: var(--sediment);
  font-family: var(--font-mono);
}
.ct-card-stats { display: flex; gap: 1rem; }

/* Container detail page */
.ct-detail-summary {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: white;
  border-radius: var(--radius);
  border: 1px solid #e5e2df;
}
.ct-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
}
.ct-detail-meta code { font-size: 0.8rem; background: #f5f0eb; padding: 0.1em 0.3em; border-radius: 3px; }

/* Docker settings threshold form */
.threshold-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

/* Cloud-mode project index (fl-w94). */
.project-card-header { display: flex; align-items: center; justify-content: space-between; }
.project-card-tags { display: flex; gap: 0.375rem; margin-top: 0.5rem; }
.project-card-hint {
  margin-top: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: #f5f5f4;
  border-radius: var(--radius);
  font-size: 0.7rem;
  color: var(--sediment);
}
.badge-tiny { font-size: 0.6rem; vertical-align: middle; }
.stat-online { color: var(--dormant); }

/* Cloud-mode project detail two-column grid. Main column holds
   stats + tables, sidebar holds Connection (DSN), Slack status,
   and quick-link cards. Collapses to single column under 1024px
   so phones/tablets keep the original stacked flow. */
.cloud-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.cloud-detail-main { min-width: 0; }
.cloud-detail-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cloud-detail-side .card { margin-bottom: 0; }
.cloud-detail-side .card-body { padding: 1rem 1.1rem; }
.cloud-side-card-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--sediment);
  letter-spacing: 0.6px;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.cloud-side-card-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}
.cloud-side-card-row + .cloud-side-card-row { margin-top: 0.4rem; }
.cloud-side-meta {
  font-size: 0.72rem;
  color: var(--sediment);
  margin-top: 0.5rem;
  line-height: 1.45;
}
.cloud-side-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--bedrock);
  font-weight: 500;
  margin-top: 0.6rem;
}
.cloud-side-link:hover { color: var(--rupture); text-decoration: none; }
.cloud-side-link-arrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--sediment);
  transition: transform 0.15s, color 0.15s;
}
.cloud-side-link:hover .cloud-side-link-arrow {
  color: var(--rupture);
  transform: translateX(2px);
}
.cloud-side-dsn details > summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--bedrock);
  user-select: none;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.cloud-side-dsn details > summary::-webkit-details-marker { display: none; }
.cloud-side-dsn details > summary::after {
  content: '▾';
  font-size: 0.6rem;
  color: var(--sediment);
  transition: transform 0.15s;
}
.cloud-side-dsn details[open] > summary::after { transform: rotate(180deg); }
.cloud-side-dsn details > .dsn-block-inner {
  margin-top: 0.6rem;
}
.cloud-stale-prefix,
.cloud-stale-suffix {
  white-space: nowrap;
  font-size: 0.78rem;
  color: var(--bedrock);
}
.cloud-stale-input {
  width: 4rem;
  padding: 0.2rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  border: 1px solid #d6d2cc;
  border-radius: 4px;
  background: white;
}
.cloud-stale-input:focus {
  outline: none;
  border-color: var(--bedrock);
}

/* Collapsible Recent Events section on the project detail page.
   The events stream visually duplicates the Issues table (same
   shape, slightly different content) — keeping it collapsed by
   default lets Issues breathe. Disclosure triangle hidden so the
   summary reads as a regular section heading; counts in the
   summary so the operator sees activity without expanding. */
.cloud-events-details > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.cloud-events-details > summary::-webkit-details-marker {
  display: none;
}
.cloud-events-details > summary::before {
  content: "▸";
  font-size: 0.7rem;
  color: var(--sediment);
  transition: transform 0.15s ease;
  display: inline-block;
}
.cloud-events-details[open] > summary::before {
  transform: rotate(90deg);
}
.cloud-events-count {
  font-weight: 400;
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sediment);
}

/* Bulk-actions toolbar — contextual. Hidden until at least one row
   is checked (cloudBulkUpdateCount toggles .cloud-bulk-active on
   the form). When it appears it slots in above the table without
   shifting the page, then snaps shut on Cancel or after submission.
   "Select all" lives in the table header, not here — standard
   table-selection idiom; this surface is purely for "do something
   with what you've selected." */
.cloud-bulk-toolbar {
  display: none;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--surface-muted, #f8f6f1);
  border: 1px solid var(--surface-border, #e5e7eb);
  border-left: 3px solid var(--rupture, #dc2626);
  border-radius: var(--radius);
  font-size: 0.85rem;
}
.cloud-bulk-toolbar.cloud-bulk-active {
  display: flex;
}
.cloud-bulk-selected-count {
  color: var(--bedrock);
  font-weight: 600;
  font-size: 0.85rem;
}
.cloud-bulk-action {
  padding: 0.25rem 0.4rem;
  font-size: 0.85rem;
}
/* Per-row checkbox column — narrow, muted alignment with the row
   level/title content. No header label; the toolbar's "Select all"
   covers that affordance. */
.cloud-bulk-col {
  width: 1.6rem;
  text-align: center;
  padding-right: 0;
}
.cloud-bulk-checkbox {
  cursor: pointer;
}

/* Compact info strip above the issues table on the project detail
   page. Replaces the right-side sidebar that used to eat ~320px of
   table width. Cards become inline chips that wrap onto multiple
   lines on narrow viewports but stay on one row at desktop width. */
.cloud-detail-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 0 0 1.25rem;
  align-items: stretch;
}
.cloud-strip-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  border: 1px solid #ece7df;
  border-radius: var(--radius);
  padding: 0.55rem 0.85rem;
  font-size: 0.82rem;
  color: var(--bedrock);
  flex: 1 1 auto;
  min-width: 0;
}
.cloud-strip-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--sediment);
  font-weight: 700;
  white-space: nowrap;
}
.cloud-strip-value {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.cloud-strip-emoji {
  font-size: 0.95rem;
  line-height: 1;
}

/* Slack 4-square logo. Sized small enough to sit inline with the
   surrounding text on chips/badges; callers can override via a
   modifier class (.slack-icon-lg, .slack-icon-tiny) when a different
   scale fits better. */
.slack-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -2px;
}
.slack-icon-tiny { width: 0.75rem; height: 0.75rem; vertical-align: -1px; }
.slack-icon-lg   { width: 1.25rem; height: 1.25rem; vertical-align: -3px; }
.slack-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.cloud-strip-link {
  color: var(--bedrock);
  font-weight: 500;
}
.cloud-strip-link:hover {
  color: var(--rupture);
  text-decoration: none;
}

/* Connection chip uses <details> for the collapsible DSN body.
   Override the default disclosure marker with a small caret that
   matches the rest of the dashboard's iconography. */
.cloud-strip-dsn {
  display: block;
  padding: 0.4rem 0.85rem;
}
.cloud-strip-dsn > summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0;
}
.cloud-strip-dsn > summary::-webkit-details-marker { display: none; }
.cloud-strip-dsn > summary::after {
  content: '▾';
  font-size: 0.6rem;
  color: var(--sediment);
  transition: transform 0.15s;
}
.cloud-strip-dsn[open] > summary::after { transform: rotate(180deg); }
.cloud-strip-body {
  margin-top: 0.5rem;
}

/* Triage chip is a form, not a static block — needs the same chip
   chrome but with form fields laid out inline. */
.cloud-strip-triage {
  flex-wrap: wrap;
}
.cloud-strip-triage .btn {
  margin-left: auto;
}

/* Issue list filter bar — sits above the issues table on the project
   detail page. GET form with selects so server-side filtering keeps
   working without any JS state to sync. */
.cloud-issue-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.cloud-issue-filter-controls {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  align-items: flex-end;
}
.cloud-issue-filter label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.cloud-issue-filter-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--sediment);
  font-weight: 600;
}
.cloud-issue-filter select {
  font-size: 0.78rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid #d6d2cc;
  border-radius: 4px;
  background: white;
  color: var(--bedrock);
  font-family: var(--font-sans);
  min-width: 8.5rem;
}
.cloud-issue-filter select:focus {
  outline: none;
  border-color: var(--bedrock);
}
.cloud-issue-filter-summary {
  font-size: 0.75rem;
  color: var(--sediment);
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* Sort-toggle column header. Reuses the existing thead styling but
   styles the inline arrow smaller so it doesn't crowd the label. */
.cloud-issue-sort-link {
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.cloud-issue-sort-link:hover {
  color: var(--rupture);
  text-decoration: none;
}
.cloud-issue-sort-arrow {
  font-size: 0.65em;
  color: var(--sediment);
}
.cloud-issue-sort-link:hover .cloud-issue-sort-arrow {
  color: var(--rupture);
}

/* Pager footer below the issues table. */
.cloud-issue-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.85rem 0 0.25rem;
  font-size: 0.78rem;
  font-family: var(--font-mono);
}
.cloud-issue-pager-link {
  color: var(--bedrock);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.cloud-issue-pager-link:hover {
  background: #efeae3;
  text-decoration: none;
}
.cloud-issue-pager-disabled {
  color: var(--sediment);
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
}
.cloud-issue-pager-state {
  color: var(--sediment);
}

/* Snoozed rows render muted so a "snoozed" filter view reads as
   deferred work at a glance. The amber Snoozed badge already lives
   in the status column — this just adds a softer overall tone. */
.cloud-issue-row-snoozed td {
  color: var(--sediment);
  background: #fdfaf3;
}
.cloud-issue-row-snoozed .issue-title-link {
  color: var(--sediment);
}

/* Two-action issue row (Resolve + Snooze) needs a tighter inline
   stack so the buttons don't wrap onto two rows in narrow tables. */
.cloud-issue-row-actions {
  white-space: nowrap;
}
.cloud-issue-row-actions .inline-form {
  display: inline-flex;
}
.cloud-issue-row-actions .inline-form + .inline-form {
  margin-left: 0.35rem;
}
.cloud-issue-snooze-btn {
  color: var(--sediment);
}
.cloud-issue-snooze-btn:hover {
  color: var(--bedrock);
}
@media (min-width: 1024px) {
  .cloud-detail-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
  .cloud-detail-side {
    position: sticky;
    top: 4.5rem;
  }
}

.cloud-stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.cloud-stat-body { padding: 0.75rem 1rem; }
.cloud-stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--sediment);
  letter-spacing: 0.5px;
}
.cloud-stat-number { font-size: 1.5rem; font-weight: 700; margin-top: 0.125rem; }
.cloud-stat-text { font-size: 0.875rem; margin-top: 0.25rem; }
.cloud-stat-sub { font-size: 0.7rem; color: var(--sediment); margin-top: 0.125rem; }

.cloud-banner {
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  border-left: 3px solid;
}
.cloud-banner-warn {
  background: #f5f5f4;
  color: var(--sediment);
  border-left-color: #d1cdc8;
}
.cloud-banner-ok {
  background: #f0fdf4;
  color: var(--dormant);
  border-left-color: var(--dormant);
}

.dsn-block { margin-bottom: 1.5rem; }
.dsn-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--sediment);
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}
.cloud-slack-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
.section-card { margin-bottom: 1.5rem; }

/* Compact explanation list under tight dropdowns (e.g. Bug Routing).
 * Term-bold, definition-muted; saves the dropdown options from
 * carrying a paragraph of context inline. */
.routing-explanation {
  margin: 0 0 1rem 0;
  font-size: 0.85rem;
  color: var(--bedrock);
}
.routing-explanation dt {
  font-weight: 600;
  margin-top: 0.5rem;
}
.routing-explanation dt:first-of-type { margin-top: 0; }
.routing-explanation dd {
  margin: 0.15rem 0 0 0;
  color: var(--sediment);
}

/* Rig activity timeline (fl-hnn6) — one card per consuming rig on the
   issue detail page. Grid auto-fits so 1 / 2 / 3+ rigs all look right. */
.cloud-rig-activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.cloud-rig-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.cloud-rig-card-title {
  font-weight: 600;
  font-size: 0.95rem;
}
.cloud-rig-card-row {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}
.cloud-rig-card-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--sediment);
  letter-spacing: 0.5px;
  min-width: 70px;
}
.cloud-rig-timeline {
  margin-top: 0.5rem;
  border-top: 1px solid var(--rock);
  padding-top: 0.5rem;
}
.cloud-rig-stage {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  padding: 0.125rem 0;
}
.cloud-rig-stage-pending {
  color: var(--sediment);
  opacity: 0.55;
}
.cloud-rig-stage-done {
  color: var(--carbon);
}
.cloud-rig-stage-time {
  font-variant-numeric: tabular-nums;
}
.cloud-rig-card-foot {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  color: var(--sediment);
}
.cloud-rig-events {
  margin-top: 0.5rem;
  border-top: 1px solid var(--rock);
  padding-top: 0.5rem;
}
.cloud-rig-events-head {
  font-size: 0.7rem;
  color: var(--sediment);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cloud-rig-event {
  font-size: 0.8rem;
  padding: 0.125rem 0;
}
.cloud-rig-event + .cloud-rig-event {
  border-top: 1px dashed var(--rock);
  padding-top: 0.25rem;
  margin-top: 0.25rem;
}
.cloud-rig-event-head {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}
.cloud-rig-event-kind {
  flex-shrink: 0;
}
.cloud-rig-event-actor {
  color: var(--sediment);
  font-size: 0.75rem;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cloud-rig-event-time {
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.cloud-rig-event-message {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--carbon);
  word-wrap: break-word;
}
.cloud-rig-signoff-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rock);
}
.event-message {
  max-width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-platform { font-size: 0.8rem; }
.event-release { font-size: 0.75rem; color: var(--sediment); }
.event-when { font-size: 0.8rem; color: var(--sediment); }

/* Recent Events table on the cloud project detail page. All cells share
   one body font-size so the row reads as a unit; only the level pill
   and metadata columns shift to the muted color. Replaces the earlier
   patchwork of 0.75/0.8/default sizes that looked like a font soup. */
.cloud-events-table { font-size: 0.85rem; }
.cloud-events-table th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sediment);
  font-weight: 600;
}
.cloud-events-table td {
  vertical-align: middle;
  padding: 0.5rem 0.75rem;
}
.cloud-event-message {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--obsidian);
}
.cloud-event-platform,
.cloud-event-release,
.cloud-event-when {
  font-size: 0.8rem;
  color: var(--sediment);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Pill styling for the level cell — was unstyled before because the
   templ emitted .level-error et al but the stylesheet only had
   .events-level--error. Templ now emits both classes so this pill
   matches the events-list styling on the issue page. */
.events-level {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
  background: #eeeae4;
  color: var(--sediment);
}
.issue-title-cell {
  font-weight: 500;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.issue-title-link { color: inherit; text-decoration: none; font-weight: 600; }
.row-action-btn { font-size: 0.65rem; padding: 0.15rem 0.5rem; }
.inline-form { display: inline; }
.push-right { margin-left: auto; }

.cloud-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.form-sublabel { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.25rem; }
.cloud-visibility-select { font-size: 0.85rem; padding: 0.35rem 0.5rem; max-width: 200px; }
.inline-code {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  background: #f0ede8;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}
.danger-title { color: #ef4444; }
.danger-card { border-color: #fecaca; }
.cloud-danger-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* fl-mnb4 Phase 4 — "Pulling rigs" checkbox list. */
.pulling-rigs-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1rem 0;
  border: 1px solid var(--sediment-pale, #e5e1d8);
  border-radius: 6px;
  overflow: hidden;
}
.pulling-rig-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--sediment-pale, #e5e1d8);
}
.pulling-rig-row:last-child { border-bottom: none; }
.pulling-rig-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  flex: 1;
  font-size: 0.85rem;
}
.pulling-rig-identity { font-size: 0.85rem; }
.pulling-rigs-empty { font-style: italic; margin: 0.5rem 0; }
.pulling-rigs-add { margin: 0.5rem 0 0.75rem 0; font-size: 0.75rem; }

.rig-health {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: var(--sediment, #6b6356);
}
.rig-health-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #9ca3af; /* fallback grey */
  display: inline-block;
}
.rig-health-active .rig-health-dot   { background: #16a34a; } /* green:  <2min  */
.rig-health-stale .rig-health-dot    { background: #f59e0b; } /* yellow: 2-5min */
.rig-health-inactive .rig-health-dot { background: #dc2626; } /* red:    ≥5min  */
.rig-health-active   { color: #15803d; }
.rig-health-stale    { color: #b45309; }
.rig-health-inactive { color: #b91c1c; }

/* Cloud-mode issue detail (fl-w94). */
.issue-title-heading { margin-top: 0.25rem; }
.cloud-issue-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cloud-issue-meta-text { color: var(--sediment); font-size: 0.85rem; }
.cloud-issue-actions { margin-left: auto; display: flex; gap: 0.5rem; }
.cloud-event-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--sediment);
  margin-bottom: 1rem;
}
.cloud-event-id { font-family: var(--font-mono); font-size: 0.75rem; }
.cloud-event-block { margin-bottom: 1rem; }
.cloud-event-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--sediment);
  letter-spacing: 0.5px;
  margin-bottom: 0.375rem;
}
.cloud-event-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.cloud-event-chip { font-size: 0.7rem; }
.cloud-stack {
  background: #1e1e1e;
  color: #d4d4d4;
  border-radius: var(--radius);
  padding: 1rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.8;
}
.cloud-stack-frame { margin-bottom: 0.25rem; }
.cloud-stack-fn { color: #569cd6; }
.cloud-stack-sep { color: #808080; }
.cloud-stack-file { color: #ce9178; }
.cloud-stack-context { color: #6a9955; padding-left: 1.5rem; }
.cloud-event-raw { margin-top: 1rem; }
.cloud-event-raw summary { cursor: pointer; font-size: 0.8rem; color: var(--sediment); }
.cloud-event-raw-pre {
  background: #f5f5f4;
  padding: 1rem;
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 0.7rem;
  margin-top: 0.5rem;
  max-height: 400px;
}
.cloud-history-body { padding: 0; }

/* Event history list — name-first row layout that replaces the
   prior 4-column table on the cloud issue detail page. Each event
   reads as: timestamp + environment badge + release SHA on top, with
   the event id as muted secondary mono text beneath. Counter-numbered
   so an operator can refer to "event #3 in the history." */
.cloud-event-list {
  list-style: decimal-leading-zero inside;
  margin: 0;
  padding: 0;
}
.cloud-event-list-item {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--surface-border, #e5e7eb);
}
.cloud-event-list-item:last-child {
  border-bottom: none;
}
.cloud-event-list-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}
.cloud-event-list-time {
  font-weight: 500;
}
.cloud-event-list-release {
  font-size: 0.75rem;
  color: var(--sediment);
}
.cloud-event-list-secondary {
  margin-top: 0.15rem;
  margin-left: 1.75rem;
  font-size: 0.72rem;
  color: var(--sediment);
}

/* Resolution callout (root_cause / fix_explanation / fix_commit /
   resolved_at) shown when the polecat has marked the issue resolved
   via mark_resolved. On regressed issues the same card re-frames as
   the previous fix — see cloudIssueResolutionCard's status switch. */
.cloud-resolution-card .cloud-resolution-hint {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid var(--amber, #f59e0b);
  border-radius: 4px;
}
.cloud-resolution-block {
  margin-bottom: 0.85rem;
}
.cloud-resolution-block:last-child {
  margin-bottom: 0;
}
.cloud-resolution-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sediment);
  margin-bottom: 0.2rem;
}
.cloud-resolution-text {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Local-mode brand suffix to disambiguate from faultline.live (fl-w94). */
.nav-brand-suffix {
  font-size: 0.7rem;
  font-weight: 500;
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  background: var(--sediment, #6b7280);
  color: white;
  border-radius: 3px;
  vertical-align: middle;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Cloud pages — missing utilities ───────────────────────────── */

/* Section headings on cloud project/settings pages */
.section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sediment);
  margin: 1.75rem 0 0.75rem;
}
.section-title:first-child { margin-top: 0; }

/* Sort toggle that lives at the top-right of the timeline section
   (fl-7ww). Small, muted, looks-like-a-link affordance — operators
   triaging an issue glance up-right to flip direction without
   leaving the page. Same shape on both cloud and local renders. */
.detail-section-head,
.section-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.timeline-sort-toggle {
  font-size: 0.75rem;
  color: var(--sediment);
  text-decoration: none;
  white-space: nowrap;
}
.timeline-sort-toggle:hover {
  color: var(--text-strong, #1f2937);
  text-decoration: underline;
}
.timeline-sort-arrow {
  margin-left: 0.25rem;
  font-weight: 600;
}

/* Breadcrumb text under page title */
.breadcrumb {
  font-size: 0.8rem;
  color: var(--sediment);
  margin-top: 0.2rem;
}
.breadcrumb a { color: var(--sediment); text-decoration: underline dotted; }
.breadcrumb a:hover { color: var(--bedrock); text-decoration: underline; }

/* Flash / success messages */
.flash {
  padding: 0.625rem 1rem;
  border-radius: var(--radius);
  font-size: 0.85rem;
  margin-bottom: 1rem;
  border-left: 3px solid;
}
.flash-success {
  background: #f0fdf4;
  color: var(--dormant);
  border-left-color: var(--dormant);
}
.flash-error {
  background: #fef2f2;
  color: var(--rupture);
  border-left-color: var(--rupture);
}
/* Warning flash — amber, matching the stale-banner palette. Used by the
   cloud-origin issue shadow when a live fetch fails and we offer a
   bounce link to faultline.live (a degraded view, not a hard error). */
.flash-warning {
  background: #fff1d6;
  color: #8a5a0c;
  border-left-color: #e5c89a;
}
.flash-warning a { color: #8a5a0c; font-weight: 600; }

/* Cloud-origin issue shadow (fl-x3v8.3): the "Origin: cloud" strip that
   sits under the page header, pairing the label with the shared
   project-origin-cloud badge + optional stale pill. */
.cloud-origin-strip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.cloud-origin-label {
  font-size: 0.8rem;
  color: var(--sediment);
}

/* DSN copy widget */
.dsn-copy {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--obsidian);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  overflow-x: auto;
}
.dsn-text {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.copy-btn {
  flex-shrink: 0;
  background: rgba(255,255,255,0.1);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
}
.copy-btn:hover { background: rgba(255,255,255,0.18); }
.copy-btn.copied {
  background: var(--dormant);
  color: white;
  border-color: var(--dormant);
}

/* Slack workspace cards on /dashboard/account/slack — reuses
   .project-card scaffolding so connected workspaces read like
   project entities (status bar, emoji-led title, meta row), not
   a plain admin table. */
.slack-workspace-card .card-body { padding: 1rem 1.25rem; }
.slack-workspace-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.slack-workspace-emoji {
  font-size: 1.1rem;
  line-height: 1;
}
.slack-workspace-actions {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f0ede8;
  display: flex;
  justify-content: flex-end;
}
.slack-disconnect-btn {
  color: var(--sediment);
}
.slack-disconnect-btn:hover {
  color: var(--rupture);
  background: #fef2f2;
}

/* Project notifications table on /dashboard/account/slack — one row
   per project, channel mapping inline, action button on the right.
   Unconfigured rows get muted styling so the eye lands on configured
   (testable) channels first. */
.cloud-slack-mappings {
  width: 100%;
  border-collapse: collapse;
}
.cloud-slack-mappings th {
  text-align: left;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--sediment);
  font-weight: 600;
  padding: 0.65rem 1rem 0.4rem;
  border-bottom: 1px solid #f0ede8;
}
.cloud-slack-mappings td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid #f5f1ec;
  vertical-align: middle;
  font-size: 0.85rem;
}
.cloud-slack-mappings tr:last-child td { border-bottom: none; }
.cloud-slack-mapping-pending td { color: var(--sediment); }
.cloud-slack-mapping-project {
  color: var(--bedrock);
  font-weight: 600;
}
.cloud-slack-mapping-pending .cloud-slack-mapping-project {
  color: var(--bedrock);
  font-weight: 500;
}
.cloud-slack-mapping-channel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.cloud-slack-mapping-emoji {
  font-size: 0.95rem;
  line-height: 1;
}
.cloud-slack-mapping-empty {
  font-style: italic;
}
.cloud-slack-mapping-action {
  text-align: right;
  white-space: nowrap;
}

/* Project slug line under project name in cards */
.project-slug {
  font-size: 0.75rem;
  color: var(--sediment);
  font-family: var(--font-mono);
  margin-bottom: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* Account meta DL (name / email / role grid) */
.account-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.25rem;
  font-size: 0.875rem;
  align-items: baseline;
}
.account-meta dt {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--sediment);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

/* Profile avatar on account settings page */
.account-profile-avatar-row {
  margin-bottom: 1.25rem;
}
.account-profile-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sandstone), var(--magma));
  color: var(--obsidian);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Header action toolbar (Slack link row on projects page) */
.header-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* Inline create form (new project) */
.inline-create-form {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.inline-create-form .form-group {
  margin-bottom: 0;
  flex: 1;
  min-width: 180px;
}

/* ── Monitoring-station hero on the project detail page ─────────── */
/* The hero leans hard on typography: a single oversized display name
   carries the page, with an overline slug above and a meta rule-line
   below that packs status/version/platform/deploy into a quiet row
   of mono beats. Vitals below use outsized tabular numbers against
   tiny small-caps labels so the eye goes to the numbers first. */
.station { margin: 1.25rem 0 1rem; }

.station-hero {
  position: relative;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 10% 120%, rgba(234, 88, 12, 0.12), transparent 55%),
    linear-gradient(120deg, var(--obsidian) 0%, var(--bedrock) 65%, #263244 100%);
  color: var(--surface);
  padding: 1.1rem 1.5rem 0.9rem;
  /* overflow stays visible so the +Add dropdown can hang below the
     hero. The seismograph trace does its own bottom-corner clipping
     via border-radius on .station-trace. */
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 12px 28px -22px rgba(15, 23, 42, 0.55);
}

.station-hero-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}

.station-hero-lead { min-width: 0; flex: 1; }

/* Overline: tiny, wide-tracked, all-caps. Exists so the headline has
   something to contrast against — the page title then hits harder. */
.station-overline {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: rgba(250, 248, 245, 0.5);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
.station-overline a { color: rgba(250, 248, 245, 0.7); text-decoration: none; }
.station-overline a:hover { color: var(--surface); }
.station-overline .crumb-sep { color: rgba(250, 248, 245, 0.28); margin: 0 0.35em; }

.station-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.station-name {
  word-break: break-word;
  /* Subtle gradient off the surface color — keeps it legible on the
     obsidian band while giving the title a little shimmer against the
     radial magma accent behind it. */
  background: linear-gradient(180deg, var(--surface) 0%, #d9d4cc 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Meta line: the row of quiet beats beneath the title. Mono + tight. */
.station-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(250, 248, 245, 0.7);
  letter-spacing: 0.02em;
}
.station-meta-sep {
  color: rgba(250, 248, 245, 0.28);
}
.station-status-label {
  color: var(--surface);
  font-weight: 500;
  font-variant: small-caps;
  letter-spacing: 0.08em;
}
.station-version {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 0.12rem 0.5rem;
  border: 1px solid rgba(250, 248, 245, 0.18);
  border-radius: 999px;
  color: rgba(250, 248, 245, 0.82);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.station-platform, .station-deploy { color: rgba(250, 248, 245, 0.78); }

.station-pulse {
  --pulse-color: var(--sediment);
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: var(--pulse-color);
  box-shadow: 0 0 0 0 var(--pulse-color);
  animation: station-pulse 2.2s infinite cubic-bezier(0.4, 0, 0.6, 1);
  flex-shrink: 0;
  /* The pulse dot sits on the alphabetic baseline of the display type
     — visually it wants to land near the x-height of the first cap. */
  transform: translateY(-0.42em);
}
.station-pulse-healthy { --pulse-color: var(--dormant); }
.station-pulse-faults  { --pulse-color: var(--rupture); }
.station-pulse-silent  { --pulse-color: var(--sediment); animation: none; opacity: 0.55; }
.station-pulse-down    { --pulse-color: var(--magma); }

@keyframes station-pulse {
  0%   { box-shadow: 0 0 0 0 var(--pulse-color); }
  70%  { box-shadow: 0 0 0 0.55rem rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* Description: editorial, a little lighter than body copy, clamped
   so long descriptions don't stretch across the full hero. */
.station-description {
  margin-top: 0.6rem;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(250, 248, 245, 0.8);
  max-width: 60ch;
}

.station-url {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: rgba(250, 248, 245, 0.78);
  text-decoration: none;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(250, 248, 245, 0.16);
  border-radius: var(--radius);
  background: rgba(250, 248, 245, 0.04);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  max-width: 100%;
  letter-spacing: 0.01em;
}
.station-url:hover {
  background: rgba(250, 248, 245, 0.1);
  border-color: rgba(250, 248, 245, 0.35);
  color: var(--surface);
  text-decoration: none;
  transform: translateX(1px);
}
.station-url-arrow { color: var(--sandstone); font-weight: 600; }
.station-url-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Compact URL chips — replaces the big station-url block when a
   project has one or more URLs. Each chip shows a short label
   (local / cloud / site) and the hostname, so a multi-service
   project can surface several endpoints in one row without taking
   over the hero. */
.station-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}
.station-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.55rem 0.2rem 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(250, 248, 245, 0.8);
  background: rgba(250, 248, 245, 0.05);
  border: 1px solid rgba(250, 248, 245, 0.18);
  border-radius: 999px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  text-decoration: none;
  max-width: 100%;
}
.station-chip:hover {
  background: rgba(250, 248, 245, 0.1);
  border-color: rgba(250, 248, 245, 0.4);
  color: var(--surface);
  text-decoration: none;
}
.station-chip-label {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.55);
  background: rgba(250, 248, 245, 0.08);
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
}
.station-chip-host {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 28ch;
}
.station-chip-cloud .station-chip-label {
  color: #bfdbfe;
  background: rgba(147, 197, 253, 0.14);
}

/* Dedicated service page — light-theme version of the same chip
   pattern used in the project hero. Reused styles rather than
   re-declaring everything so the two surfaces read as a pair. */
.service-summary {
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid #e5e2df;
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
}
.service-summary-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.service-pulse {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #cbc6bf;
  box-shadow: 0 0 0 3px rgba(203, 198, 191, 0.2);
}
.service-pulse-healthy { background: var(--dormant); box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.18); }
.service-pulse-silent  { background: #cbc6bf; }
.service-pulse-down    { background: var(--rupture); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); }
.service-summary-title { font-size: 0.95rem; color: var(--bedrock); }
.service-summary-meta  { font-family: var(--font-mono); font-size: 0.75rem; color: var(--sediment); margin-top: 0.15rem; }

.service-block { margin-top: 1.25rem; }
.service-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.3rem;
}
.service-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem 0.25rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--bedrock);
  background: white;
  border: 1px solid #e5e2df;
  border-radius: 999px;
  transition: border-color 0.12s, color 0.12s;
  text-decoration: none;
}
.service-chip:hover { border-color: var(--sandstone); color: var(--magma); text-decoration: none; }
.service-chip-label {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sediment);
  background: #f4f1ed;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
}
.service-chip-host {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 32ch;
}
.service-chip-cloud .service-chip-label { color: #1e3a8a; background: #dbeafe; }

.station-hero-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  flex-shrink: 0;
}
.station-action {
  background: rgba(250, 248, 245, 0.08);
  border: 1px solid rgba(250, 248, 245, 0.16);
  color: var(--surface);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.station-action:hover {
  background: rgba(250, 248, 245, 0.18);
  border-color: rgba(250, 248, 245, 0.32);
  text-decoration: none;
}

/* Seismograph trace — subtle horizontal line with a single amplitude
   spike. Pure CSS; evokes the fault metaphor without animating. */
.station-trace {
  position: absolute;
  inset: auto 0 0 0;
  height: 42px;
  pointer-events: none;
  /* Round the bottom corners so the SVG doesn't extend beyond the
     hero's border radius now that the parent no longer clips. */
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
  background:
    linear-gradient(to top, rgba(250, 248, 245, 0.04), transparent 80%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'><path d='M0 20 L80 20 L100 20 L115 8 L125 33 L135 14 L150 20 L260 20 L275 4 L285 36 L300 20 L460 20 L478 14 L495 26 L510 20 L600 20' fill='none' stroke='%23EA580C' stroke-opacity='0.38' stroke-width='1.25'/></svg>") center/100% 100% no-repeat;
  opacity: 0.9;
}

/* Vitals strip: 4 cells under the hero. Big tabular numbers carry the
   row, small-caps labels sit above like kern marks. The stat is the
   hero of each cell — the label exists only to disambiguate. */
.station-vitals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: #e5e2df;
  border-radius: var(--radius);
  margin-top: 0.75rem;
  overflow: hidden;
  border: 1px solid #e5e2df;
}
.station-vital {
  background: white;
  padding: 0.65rem 0.85rem 0.55rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.station-vital dt {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--sediment);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  order: -1;
}
.station-vital-value {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--bedrock);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.station-vital-value.vital-alarm {
  color: var(--rupture);
  font-weight: 700;
}
.station-vital-value.vital-calm  { color: var(--dormant); }
.station-vital-value.vital-muted {
  color: var(--sediment);
  font-weight: 400;
  font-size: 0.95rem;
}

/* Tags row: env badges + component (now anchor) + integration chips. */
.station-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
  align-items: center;
}
.comp-chip {
  font-size: 0.72rem;
  padding: 0.2rem 0.6rem;
  background: #f1eeeb;
  color: var(--bedrock);
  border-radius: 999px;
  letter-spacing: 0.02em;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.comp-chip:hover {
  background: #e7e2dc;
  border-color: var(--sandstone);
  text-decoration: none;
}
.integ-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid #e5e2df;
  background: white;
  color: var(--bedrock);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.integ-chip .integ-glyph {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--sediment);
}
.integ-chip .integ-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--sediment);
  display: inline-block;
}
.integ-cloud-connected   { border-color: rgba(5, 150, 105, 0.25); }
.integ-cloud-connected   .integ-dot { background: var(--dormant); }
.integ-cloud-degraded    { border-color: rgba(245, 158, 11, 0.3); }
.integ-cloud-degraded    .integ-dot { background: var(--tremor); }
.integ-cloud-disconnected{ border-color: rgba(220, 38, 38, 0.3); }
.integ-cloud-disconnected .integ-dot { background: var(--rupture); }
.integ-webhook .integ-glyph { color: var(--sandstone); }
.integ-db      .integ-glyph { color: var(--bedrock); }

/* ── Systems cards: one per component + pinned Storage ────────────
   Each card is a navigation target: click anywhere to land on a
   page that drills into the system it represents. Small-caps label
   anchors the card semantically (STORAGE / FRONTEND / API); the
   big name carries the visual weight; a meta line pairs counts and
   status; a reason line (only on Storage, for now) surfaces the
   most recent non-ok check message so "degraded" isn't a mystery. */
.systems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.system-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  background: white;
  border: 1px solid #e5e2df;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--bedrock);
  transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.system-card:hover {
  text-decoration: none;
  border-color: var(--sandstone);
  box-shadow: 0 2px 0 rgba(212, 165, 116, 0.08);
  transform: translateY(-1px);
}
.system-card-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--sediment);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.system-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.1rem;
}
.system-card-name {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bedrock);
}
.system-card-pulse {
  --pulse-color: var(--sediment);
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--pulse-color);
  flex-shrink: 0;
}
.system-card-pulse-healthy { --pulse-color: var(--dormant); }
.system-card-pulse-faults  { --pulse-color: var(--rupture); }
.system-card-pulse-silent  { --pulse-color: var(--sediment); opacity: 0.55; }
.system-card-pulse-down    { --pulse-color: var(--magma); }
.system-card-meta {
  font-size: 0.78rem;
  color: var(--sediment);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}
.system-card-reason {
  font-size: 0.72rem;
  color: var(--magma);
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Env chips: pulse-bearing surface markers ─────────────────────
   One chip per observed environment on the project card + overview
   tags row. The dot inherits the same healthy/silent/down palette
   the station hero and system cards use so "production" reads the
   same way wherever it appears. Chips are anchors — clicking
   filters the project's issue list by that environment. */
.env-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: white;
  border: 1px solid #e5e2df;
  color: var(--bedrock);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}
.env-chip:hover {
  background: #f5f3ef;
  border-color: var(--sandstone);
  text-decoration: none;
}
.env-chip-dot {
  --dot-color: var(--sediment);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--dot-color);
  flex-shrink: 0;
}
.env-chip-healthy .env-chip-dot { --dot-color: var(--dormant); }
.env-chip-faults  .env-chip-dot { --dot-color: var(--rupture); }
.env-chip-silent  .env-chip-dot { --dot-color: var(--sediment); }
.env-chip-down    .env-chip-dot { --dot-color: var(--magma); }
.env-chip-name { font-family: var(--font-mono); }

/* ── "+ Add" dropdown in the hero action bar ──────────────────────
   Uses native <details>/<summary> so there's no JS dependency. The
   menu anchors to the <details> so it hangs below-right; the open
   state flips the summary caret subtly. Items are two-line (title
   + hint) to communicate what each add does. */
.station-add { position: relative; }
.station-add > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.station-add > summary::-webkit-details-marker { display: none; }
.station-add > summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
}
.station-add[open] > summary {
  background: rgba(250, 248, 245, 0.18);
  border-color: rgba(250, 248, 245, 0.32);
}
.station-add-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid #e5e2df;
  border-radius: var(--radius);
  box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.35);
  padding: 0.35rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.station-add-menu a {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.55rem 0.7rem;
  color: var(--bedrock);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.1s;
}
.station-add-menu a:hover { background: #f1eeeb; text-decoration: none; }
.station-add-title {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.station-add-hint {
  font-size: 0.72rem;
  color: var(--sediment);
}

/* ── Recent faults preview on the project overview page ───────── */
.station-recent { margin-top: 1rem; }
.station-recent-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.station-section-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bedrock);
  letter-spacing: -0.01em;
}
.station-recent-link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--sediment);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.station-recent-link:hover { color: var(--bedrock); text-decoration: none; }

.station-recent-empty {
  border: 1px dashed #e5e2df;
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  background: #fafaf9;
  color: var(--sediment);
  font-size: 0.85rem;
}

.station-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #e5e2df;
  border: 1px solid #e5e2df;
  border-radius: var(--radius);
  overflow: hidden;
}
.station-recent-issue {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.55rem 0.85rem;
  background: white;
  color: var(--bedrock);
  text-decoration: none;
  transition: background 0.1s;
}
.station-recent-issue:hover {
  background: #faf8f5;
  text-decoration: none;
}
.station-recent-severity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  width: 1rem;
}
.station-recent-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  color: var(--bedrock);
}
.station-recent-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--sediment);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .station-hero { padding: 0.95rem 1.1rem 0.85rem; }
  .station-title { font-size: 1.3rem; letter-spacing: -0.02em; gap: 0.45rem; }
  .station-hero-body { flex-direction: column; }
  .station-hero-actions { margin-top: 0.5rem; }
  .station-trace { height: 32px; }
  .station-vital-value { font-size: 0.95rem; }
  .station-add-menu { right: auto; left: 0; }
}

/* ── Gas Town integration page ─────────────────────────────────── */
.gt-install {
  background: white;
  border: 1px solid #e5e2df;
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.gt-section-title {
  margin: 0 0 0.75rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--bedrock);
}
.gt-install-steps {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--bedrock);
}
.gt-install-steps > li {
  margin-bottom: 1rem;
}
.gt-install-steps > li:last-child {
  margin-bottom: 0;
}
.gt-install-steps .onboarding-code {
  margin-top: 0.5rem;
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
}
.gt-install-steps .form-hint {
  margin-top: 0;
}

.gt-install-inline {
  margin-top: 0.5rem;
}
.gt-install-lead {
  color: var(--sediment);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}
.gt-install-footnote {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--sediment);
}
.gt-install-details {
  margin-top: 1.5rem;
  border: 1px solid #e5e2df;
  border-radius: var(--radius);
  background: white;
}
.gt-install-details[open] {
  padding-bottom: 1rem;
}
.gt-install-summary {
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bedrock);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
}
.gt-install-summary::-webkit-details-marker { display: none; }
.gt-install-summary::before {
  content: "▸";
  font-size: 0.7rem;
  color: var(--sediment);
  transition: transform 0.15s;
}
details.gt-install-details[open] .gt-install-summary::before {
  transform: rotate(90deg);
}
.gt-install-details .gt-install-inline {
  padding: 0 1rem;
}
.gt-install-details .gt-install {
  border: none;
  border-top: 1px solid #f0ece8;
  border-radius: 0;
  margin-bottom: 0;
}

.gt-connections {
  margin-top: 1.5rem;
}
.gt-conn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.75rem;
}
.gt-conn-card {
  position: relative;
  background: white;
  border: 1px solid #e5e2df;
  border-radius: var(--radius);
  padding: 0.85rem 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.gt-conn-card:hover {
  border-color: var(--sandstone);
  box-shadow: 0 2px 0 rgba(212, 165, 116, 0.08);
}
/* Make the whole card clickable via a pseudo-element that covers
   the card and sits behind the project-name pill, which stays its
   own link. Tried nesting anchors first; that's invalid HTML and
   browsers drop the inner one. */
.gt-conn-rig::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  z-index: 1;
}
.gt-conn-card > *:not(.gt-conn-head) {
  position: relative;
  z-index: 0;
  pointer-events: none;
}
.gt-conn-project {
  position: relative;
  z-index: 2;
}
.gt-conn-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.gt-conn-rig {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  line-height: 1.15;
  text-decoration: none;
}
.gt-conn-rig-text {
  display: flex;
  flex-direction: column;
}
.gt-conn-kind-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  /* Top-hat is a single black path; soften it to match the body
     text color so it doesn't punch out against the card. Magic-hat
     ships its own gradient so the override is scoped per-class. */
  opacity: 0.85;
}
.gt-conn-kind-icon.gt-conn-town-gascity {
  opacity: 1;
}
.gt-conn-rig:hover {
  text-decoration: none;
}
.gt-conn-rig-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bedrock);
  letter-spacing: -0.005em;
}
.gt-conn-rig:hover .gt-conn-rig-name {
  color: var(--magma);
}
.gt-conn-town {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--sediment);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.15rem;
}
.gt-conn-town.gt-conn-town-gascity {
  color: var(--magma, #c2410c);
}
.gt-conn-project {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--sediment);
  text-decoration: none;
  padding: 0.2rem 0.55rem;
  border: 1px solid #e5e2df;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.12s, border-color 0.12s;
}
.gt-conn-project:hover {
  color: var(--bedrock);
  border-color: var(--sandstone);
  text-decoration: none;
}
.gt-conn-project-setup {
  color: var(--magma);
  border-color: #f0d5c0;
}
.gt-conn-project-setup:hover {
  color: var(--rupture);
  border-color: var(--magma);
}

.gt-conn-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem 0.75rem;
  margin: 0;
}
.gt-conn-stats > div {
  min-width: 0;
}
.gt-conn-stats dt {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sediment);
  margin-bottom: 0.1rem;
}
.gt-conn-stats dd {
  margin: 0;
  font-size: 0.82rem;
  color: var(--bedrock);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gt-conn-none {
  color: var(--sediment);
}

.gt-install-bullets {
  margin: 0 0 0.75rem 0;
  padding-left: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--bedrock);
}
.gt-install-bullets li {
  margin-bottom: 0.35rem;
}

/* Rig rows on the town detail page. Compact strip (not a full card)
   because the town page is already a list and each rig only carries
   a handful of stats. Shares .gt-conn-stats from the town-card grid
   so the label typography stays consistent across both surfaces. */
.gt-rig-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.gt-rig-row {
  background: white;
  border: 1px solid #e5e2df;
  border-radius: var(--radius);
  padding: 0.75rem 1rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.gt-rig-row:hover {
  border-color: var(--sandstone);
}
.gt-rig-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.gt-rig-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bedrock);
  letter-spacing: -0.005em;
}
.gt-rig-repo {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--sediment);
  margin-top: 0.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40ch;
}
.gt-rig-project {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.gt-rig-project a { color: var(--bedrock); text-decoration: none; }
.gt-rig-project a:hover { color: var(--magma); }

/* Inline link/unlink controls on each rig row. The connect form
   packs a select + primary button + "create project" secondary into
   the right-hand column; the unlink form is a single destructive
   button next to the linked project name. Both inherit the row's
   font-mono cascade, so input/button font-family is reset. */
.gt-rig-unlink-form,
.gt-rig-connect-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  flex-wrap: wrap;
}
.gt-rig-connect-form select {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  padding: 0.25rem 0.45rem;
  border-radius: 4px;
  border: 1px solid #e5e2df;
  background: white;
  color: var(--bedrock);
  max-width: 18ch;
}
.btn-outline {
  background: white;
  border: 1px solid #e5e2df;
  color: var(--bedrock);
}
.btn-outline:hover {
  border-color: var(--sandstone);
  color: var(--magma);
}
.btn-danger-outline {
  background: white;
  border: 1px solid #e5a0a0;
  color: #a33;
}
.btn-danger-outline:hover {
  background: #fdf3f3;
  border-color: #c66;
  color: #8a1c1c;
}
.btn-danger {
  background: #c0392b;
  border: 1px solid #a93226;
  color: white;
}
.btn-danger:hover {
  background: #a93226;
  color: white;
}
.danger-heading {
  color: #8a1c1c;
  margin-top: 0.5rem;
}

/* Settings tabs — horizontal nav at the top of a project's
   settings page. Tabs carry the current tab in the query string
   so reloads + bookmarks land where the operator was. Active tab
   reads as a pressed pill; Danger is tinted red so the click
   cost matches its blast radius. */
.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.5rem 0 1.25rem;
  border-bottom: 1px solid #e5e2df;
  padding-bottom: 0;
}
.settings-tab {
  padding: 0.55rem 0.95rem;
  font-size: 0.88rem;
  color: var(--sediment);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.settings-tab:hover {
  color: var(--bedrock);
  text-decoration: none;
  background: #f7f4f0;
}
.settings-tab.is-active {
  color: var(--bedrock);
  border-bottom-color: var(--rupture);
  font-weight: 600;
}
.settings-tab-danger {
  color: #a33;
  margin-left: auto;
}
.settings-tab-danger:hover {
  color: #8a1c1c;
  background: #fdf3f3;
}
.settings-tab-danger.is-active {
  color: #8a1c1c;
  border-bottom-color: #8a1c1c;
}

/* Alert rule list — compact summary rows with an inline editor
   that expands on click. Disabled rules get a muted treatment so
   the "what's actually firing" subset reads at a glance. */
.alert-rule-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.alert-rule {
  background: white;
  border: 1px solid #e5e2df;
  border-radius: var(--radius);
}
.alert-rule.is-disabled {
  background: #faf8f5;
  color: var(--sediment);
}
.alert-rule.is-disabled .alert-rule-name {
  color: var(--sediment);
}
.alert-rule > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.6rem 0.9rem;
  display: grid;
  grid-template-columns: minmax(14ch, auto) 1fr auto;
  align-items: center;
  gap: 0.85rem;
}
.alert-rule > summary::-webkit-details-marker { display: none; }
.alert-rule[open] > summary {
  border-bottom: 1px solid #f1eeeb;
}
.alert-rule-name {
  font-weight: 600;
  color: var(--bedrock);
}
.alert-rule-meta {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--sediment);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alert-rule-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.alert-rule-chevron {
  color: var(--sediment);
  font-size: 0.75rem;
  transition: transform 0.15s;
}
.alert-rule[open] .alert-rule-chevron {
  transform: rotate(180deg);
}
.alert-rule-form {
  padding: 0.9rem 0.9rem 1rem;
  margin: 0;
}
.alert-rule-new {
  margin-top: 0.5rem;
}
.alert-rule-new > summary {
  list-style: none;
  display: inline-block;
}
.alert-rule-new > summary::-webkit-details-marker { display: none; }
.alert-rule-new[open] > summary { margin-bottom: 0.75rem; }
.alert-history-failed { background: #fef0f0; }
.alert-history-failed:hover { background: #fde5e5; }

/* Inline row that pairs "+ Add alert rule" with "File missing
   beads" so the two entry points live side-by-side without
   forcing operators to scroll. */
.alert-rule-actions-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* Per-action label text hidden by default; JS picks the matching
   one based on the current action select. Keeps all four labels
   in the markup so templ doesn't have to know about action
   semantics. */
[data-target-label-bead],
[data-target-label-slack],
[data-target-label-webhook],
[data-target-label-email] {
  display: none;
}

/* Two-column form row for threshold + window — they're a pair,
   shouldn't stack full-width unless the viewport is narrow. */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .alert-rule > summary {
    grid-template-columns: 1fr auto;
  }
  .alert-rule-meta {
    grid-column: 1 / -1;
    white-space: normal;
  }
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--bedrock);
}

/* Slack section on the Integrations tab — dedicated setup flow
   backed by the same webhook_url + webhook_type fields the generic
   notification form uses. We gave it its own visual treatment so
   first-time operators can spot the Slack-specific path without
   learning that "Slack = webhook URL + type dropdown." */
.slack-section {
  padding: 0.25rem 0 0.25rem;
}
.slack-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.slack-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: #f1f9f5;
  border: 1px solid #c9e6d7;
  border-radius: var(--radius);
}
.slack-state-url {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--bedrock);
}
.slack-state-url .form-sublabel {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sediment);
  margin-bottom: 0.15rem;
}
.slack-state-actions { margin: 0; }
.slack-connect-form { margin-top: 0.25rem; }
.slack-advanced {
  margin-top: 0.9rem;
  padding: 0.65rem 0.9rem;
  background: #fafaf8;
  border: 1px solid #e5e2df;
  border-radius: var(--radius);
}
.slack-advanced > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--bedrock);
  font-size: 0.88rem;
}

/* Activate page — faultline.live project picker. Each row is a
   form so clicking Claim submits just that DSN. Kept as a list
   rather than a table so the rows breathe + the claim button
   stays aligned right. */
.activate-cloud-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.5rem 0;
}
.activate-cloud-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  background: white;
  border: 1px solid #e5e2df;
  border-radius: var(--radius);
  margin: 0;
}
.activate-cloud-row:hover {
  border-color: var(--sandstone);
}
.activate-cloud-identity {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.activate-cloud-name {
  font-weight: 600;
  color: var(--bedrock);
}
.activate-cloud-slug {
  font-size: 0.72rem;
  color: var(--sediment);
}
.activate-cloud-slug code {
  font-family: var(--font-mono);
  background: transparent;
  padding: 0;
}
.activate-cloud-row-claimed {
  background: #faf8f5;
  border-style: dashed;
}
.activate-cloud-row-claimed:hover {
  border-color: #e5e2df;
}
.activate-cloud-claimed {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  font-size: 0.8rem;
}
.activate-cloud-claimed-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sediment);
}
.activate-cloud-claimed a {
  color: var(--bedrock);
  text-decoration: none;
  font-weight: 600;
}
.activate-cloud-claimed a:hover {
  color: var(--magma);
}

/* Admin shell — two-column layout wrapping the admin/settings
   pages (Admin overview, Teams, System, Accounts, Profile, Slack).
   The rail is sticky on desktop so the section nav stays in view
   while the operator scrolls; on mobile it collapses into a bar
   that expands to reveal the same links. Everything else on the
   site keeps its full width — only admin surfaces pay the rail
   cost. */
.admin-shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
  margin-top: 0.5rem;
  align-items: start;
}
.admin-rail {
  position: sticky;
  top: 4.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.9rem 0.75rem 0.9rem 0;
  border-right: 1px solid #e5e2df;
  align-self: stretch;
}
.admin-rail-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.admin-rail-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sediment);
  padding: 0.25rem 0.6rem 0.35rem;
}
.admin-rail-link {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.88rem;
  color: var(--bedrock);
  border-left: 2px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.admin-rail-link:hover {
  background: #f4f1ed;
  text-decoration: none;
}
.admin-rail-link.is-active {
  background: #f7f4f0;
  border-left-color: var(--rupture);
  font-weight: 600;
}
.admin-content { min-width: 0; }

/* Mobile rail — collapse to a one-line bar that toggles the
   group open. Checkbox-hack mirrors the hamburger pattern so the
   whole thing stays JS-free. */
.admin-rail-toggle { display: none; }
.admin-rail-bar { display: none; }

@media (max-width: 768px) {
  .admin-shell {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .admin-rail-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    background: white;
    border: 1px solid #e5e2df;
    border-radius: var(--radius);
    font-size: 0.88rem;
    color: var(--bedrock);
    cursor: pointer;
    user-select: none;
  }
  .admin-rail-bar-caret {
    font-size: 0.7rem;
    color: var(--sediment);
    transition: transform 0.15s;
  }
  .admin-rail-toggle:checked ~ .admin-rail-bar .admin-rail-bar-caret {
    transform: rotate(180deg);
  }
  .admin-rail {
    display: none;
    position: static;
    border-right: none;
    border: 1px solid #e5e2df;
    border-radius: var(--radius);
    padding: 0.75rem;
    background: white;
  }
  .admin-rail-toggle:checked ~ .admin-rail { display: flex; }
}

/* Admin overview — destination tiles on /dashboard/admin. One
   row per surface with the title on the left, a compact count /
   status pill on the right, and a one-line description below. */
.admin-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.admin-index-card {
  display: block;
  padding: 0.85rem 1rem 0.95rem;
  background: white;
  border: 1px solid #e5e2df;
  border-radius: var(--radius);
  color: var(--bedrock);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.admin-index-card:hover {
  border-color: var(--sandstone);
  box-shadow: 0 2px 0 rgba(212, 165, 116, 0.08);
  text-decoration: none;
}
.admin-index-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.admin-index-card-title {
  font-size: 1rem;
  font-weight: 600;
}
.admin-index-card-stat {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--sediment);
  background: #f7f4f0;
  border: 1px solid #e5e2df;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  text-transform: lowercase;
}
.admin-index-card-desc {
  font-size: 0.82rem;
  color: var(--sediment);
  margin-top: 0.35rem;
  line-height: 1.45;
}

.nav-account-admin {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-account-admin-arrow {
  color: var(--sediment);
  font-size: 0.85rem;
}

/* Fleet strip — one-line health rollup at the top of the
   dashboard. Three counter pills that mirror the card status
   colors so the strip and the grid speak the same visual language.
   Optional "unbeaded" pill only appears when Gas Town has work
   that hasn't been filed as a bead yet. */
.fleet-strip {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding: 0.85rem 1rem;
  background: white;
  border: 1px solid #e5e2df;
  border-radius: var(--radius);
  margin: 0.5rem 0 1rem;
  flex-wrap: wrap;
}
.fleet-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--sediment);
  letter-spacing: 0.02em;
}
.fleet-stat-num {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--bedrock);
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
  line-height: 1;
}
.fleet-stat-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
}
.fleet-stat-sub {
  font-size: 0.7rem;
  color: var(--rupture);
  margin-left: 0.15rem;
}
.fleet-stat-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  align-self: center;
  display: inline-block;
}
.fleet-stat-healthy .fleet-stat-dot  { background: var(--dormant); }
.fleet-stat-faults .fleet-stat-dot   { background: var(--rupture); }
.fleet-stat-silent .fleet-stat-dot   { background: #cbc6bf; }
.fleet-stat-unbeaded {
  margin-left: auto;
  padding-left: 0.85rem;
  border-left: 1px solid #e5e2df;
}
.fleet-stat-unbeaded .fleet-stat-num { color: var(--magma); }

.fleet-allclear {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: #f1f9f5;
  border: 1px solid #c9e6d7;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  color: #115e3f;
  font-size: 0.85rem;
}
.fleet-allclear-icon { color: var(--dormant); font-size: 0.7rem; }

/* Needs attention — cross-project list of unresolved / regressed
   issues, newest first. One click per row lands straight on the
   issue detail page so the index stays a dispatch surface rather
   than a read-only summary. */
.attention {
  margin-bottom: 1.25rem;
}
.section-heading {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0 0 0.55rem 0;
  font-size: 0.95rem;
  color: var(--bedrock);
}
.section-heading-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--sediment);
  background: #f1eeeb;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
}
.section-heading-muted {
  color: var(--sediment);
  font-weight: 500;
  margin-top: 0.5rem;
}
.attention-list {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid #e5e2df;
  border-radius: var(--radius);
  overflow: hidden;
}
.attention-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.9rem;
  border-top: 1px solid #f1eeeb;
  color: var(--bedrock);
  transition: background 0.1s;
}
.attention-row:first-child { border-top: none; }
.attention-row:hover {
  background: #faf8f5;
  text-decoration: none;
}
.attention-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
}
.attention-level-error { background: #fef0f0; color: var(--rupture); }
.attention-level-warn  { background: #fef5e1; color: var(--tremor); }
.attention-level-muted { background: #f1eeeb; color: var(--sediment); }
.attention-title {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.attention-project {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: lowercase;
  color: var(--sediment);
  padding: 0.15rem 0.55rem;
  border: 1px solid #e5e2df;
  border-radius: 999px;
  white-space: nowrap;
}
.attention-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--sediment);
  white-space: nowrap;
}
.attention-tag {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.attention-tag-regressed { background: #fef0f0; color: var(--rupture); border-color: #f2c7c7; }
.attention-tag-unbeaded  { background: #fff5e6; color: var(--magma);  border-color: #f0d8b4; }
.attention-count { color: var(--bedrock); opacity: 0.6; }

.projects-section { margin-top: 1.5rem; }

@media (max-width: 640px) {
  .attention-row {
    grid-template-columns: 22px 1fr;
    grid-template-rows: auto auto;
    gap: 0.45rem 0.65rem;
    padding: 0.75rem 0.8rem;
  }
  .attention-project {
    grid-column: 2; grid-row: 2;
    justify-self: start;
  }
  .attention-meta {
    grid-column: 1 / -1; grid-row: 3;
  }
}

/* Gas Town top-hat badge on project cards + the dedicated
   settings section on the project overview. Small chip first,
   full section second. */
.project-tophat {
  display: inline-block;
  margin-right: 0.35rem;
  font-size: 0.9em;
  vertical-align: baseline;
  filter: grayscale(0);
  cursor: help;
}

.gastown-settings {
  background: white;
  border: 1px solid #e5e2df;
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin-bottom: 1.5rem;
}
.gastown-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.gastown-settings-head h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.gastown-tophat {
  font-size: 1em;
}
.gastown-settings-link {
  font-size: 0.78rem;
  color: var(--sediment);
}
.gastown-settings-link:hover { color: var(--magma); text-decoration: none; }
.gastown-settings-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.gastown-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.gastown-settings-cell { min-width: 0; }
.gastown-settings-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sediment);
  margin-bottom: 0.2rem;
}
.gastown-settings-value {
  font-size: 0.88rem;
  color: var(--bedrock);
  overflow-wrap: anywhere;
}
.gastown-settings-value a { color: var(--bedrock); }
.gastown-settings-value a:hover { color: var(--magma); }
.gastown-settings-value code {
  font-family: var(--font-mono);
  background: transparent;
  padding: 0;
}
.gastown-roles {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid #f1eeeb;
}
.gastown-role-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 0.75rem;
  align-items: baseline;
  font-size: 0.85rem;
}
.gastown-role-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sediment);
}
.gastown-role-value { min-width: 0; }
.gastown-role-count {
  display: inline-block;
  min-width: 1.6rem;
  padding: 0 0.4rem;
  margin-right: 0.5rem;
  text-align: center;
  background: #f7f4f0;
  border: 1px solid #e5e2df;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--bedrock);
}
.gastown-role-names {
  color: var(--bedrock);
}

/* Silent projects — had activity once, gone quiet, no health
   probe running. Shares the dashed-border card pattern with
   pending-card but in a grey register rather than amber, because
   "maybe dead" is a different concern from "not yet activated." */
.silent-projects {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px dashed #e5e2df;
}
.silent-heading {
  margin: 0 0 0.35rem 0;
  font-size: 0.95rem;
  color: var(--bedrock);
}
.silent-card {
  display: block;
  background: #f7f6f3;
  border: 1px dashed #d4cfc6;
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  text-decoration: none;
  color: var(--bedrock);
  transition: border-color 0.12s, background 0.12s;
}
.silent-card:hover {
  border-color: var(--sediment);
  background: #ebe9e4;
  text-decoration: none;
}
.silent-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.silent-card-name {
  font-weight: 600;
  font-size: 1rem;
}
.silent-card-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sediment);
  background: white;
  border: 1px solid #d4cfc6;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}
.silent-card-desc {
  font-size: 0.8rem;
  color: var(--sediment);
  margin-top: 0.25rem;
}
.silent-card-action {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--sediment);
}

/* Pending projects — freshly created, no events yet. Separate
   section below the active grid so operators can see what still
   needs wiring without the empty cards polluting the main view. */
.pending-projects {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px dashed #e5e2df;
}
.pending-heading {
  margin: 0 0 0.35rem 0;
  font-size: 0.95rem;
  color: var(--bedrock);
}
.pending-hint {
  margin: 0 0 0.75rem 0;
  font-size: 0.85rem;
  color: var(--sediment);
  max-width: 70ch;
}
.pending-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.6rem;
}
.pending-card {
  display: block;
  background: #fffbf5;
  border: 1px dashed #e5c89a;
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  text-decoration: none;
  color: var(--bedrock);
  transition: border-color 0.12s, background 0.12s;
}
.pending-card:hover {
  border-color: var(--sandstone);
  background: #fff6e8;
  text-decoration: none;
}
.pending-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.pending-card-name {
  font-weight: 600;
  font-size: 1rem;
}
.pending-card-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a37500;
  background: #fff1d6;
  border: 1px solid #e5c89a;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}
.pending-card-desc {
  font-size: 0.8rem;
  color: var(--sediment);
  margin-top: 0.25rem;
}
.pending-card-action {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--sediment);
}

/* Cloud-shadow section on the dashboard index. Mirrors the silent /
   pending visual vocabulary (dashed border, compact card-row) but
   tinted blue-grey instead of amber to read as "different origin"
   at a glance, not "needs attention." Operator clicks a card and
   opens that project on faultline.live in a new tab — local doesn't
   render cloud-only detail pages yet. */
.cloud-card {
  background: #f4f8fb;
  border: 1px dashed #b8c9d6;
}
.cloud-card:hover {
  border-color: #93afc1;
  background: #eaf2f8;
}
.cloud-card .pending-card-badge {
  color: #34607d;
  background: #dcebf3;
  border-color: #b8c9d6;
}
.project-origin-badge {
  display: inline-block;
  margin-left: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  vertical-align: middle;
}
.project-origin-local {
  color: var(--sediment);
  background: #f0eee9;
  border: 1px solid #d8d3c5;
}
.project-origin-cloud {
  color: #34607d;
  background: #dcebf3;
  border: 1px solid #b8c9d6;
}
.project-origin-banner {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  vertical-align: middle;
}
.project-origin-stale {
  color: #8a5a0c;
  background: #fff1d6;
  border: 1px solid #e5c89a;
}

/* LLM setup prompt — copy-pasteable block the operator hands to a
   coding assistant. pre tag keeps newlines intact; the button is
   absolutely positioned top-right so the prompt body stays
   full-width. */
.llm-prompt {
  position: relative;
  margin-top: 0.5rem;
}
.llm-prompt-body {
  background: #1f1b17;
  color: #f5ecd9;
  border: 1px solid #2d2823;
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%;
  margin: 0;
}
.llm-prompt-copy {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
}
.llm-prompt-details {
  margin-top: 0.75rem;
  padding: 0.75rem 0.9rem;
  background: #fafaf8;
  border: 1px solid #e5e2df;
  border-radius: var(--radius);
}
.llm-prompt-details > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--bedrock);
  font-size: 0.9rem;
}
.llm-prompt-details[open] > summary {
  margin-bottom: 0.5rem;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ─── Landing page (light mode) ────────────────────────────────────────── */
.landing-body {
  background: #ffffff;
  color: #0f172a;
  display: block;
}

/* Nav */
.landing-hero {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}
.landing-nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.landing-wordmark {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f172a;
  text-decoration: none;
  letter-spacing: -0.5px;
}
.landing-wordmark span { color: var(--rupture); }
.landing-wordmark-sm { font-size: 0.95rem; }
/* Drawer holds MCP / GitHub / Docs / Sign in. On desktop it's an
   inline horizontal row (the original .landing-nav-links shape).
   On mobile it collapses behind a CSS-only burger toggle defined
   below. The "Get started" CTA stays outside the drawer so the
   primary conversion action remains visible at all widths. */
.landing-nav-drawer {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
  justify-content: flex-end;
}
.landing-nav-drawer a {
  color: #475569;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.15s;
}
.landing-nav-drawer a:hover { color: #0f172a; text-decoration: none; }
.landing-nav-signin {
  color: #475569 !important;
}
.landing-nav-cta {
  background: var(--rupture);
  color: #fff !important;
  padding: 0.45rem 1rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 1.25rem;
  white-space: nowrap;
}
.landing-nav-cta:hover { background: #b91c1c; }
/* Burger checkbox — hidden visually but drives the drawer's
   open/closed state via :checked + sibling combinator. Hidden by
   default; the mobile media query below shows it. */
.landing-nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.landing-nav-burger {
  display: none;
  width: 32px;
  height: 32px;
  cursor: pointer;
  position: relative;
  padding: 0;
}
.landing-nav-burger span {
  display: block;
  position: absolute;
  left: 6px;
  right: 6px;
  height: 2px;
  background: #0f172a;
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s, top 0.2s;
}
.landing-nav-burger span:nth-child(1) { top: 9px; }
.landing-nav-burger span:nth-child(2) { top: 15px; }
.landing-nav-burger span:nth-child(3) { top: 21px; }
/* Burger → X transition when the drawer is open. The middle bar
   fades out; the outer two cross. */
.landing-nav-toggle:checked ~ .landing-nav-burger span:nth-child(1) {
  top: 15px;
  transform: rotate(45deg);
}
.landing-nav-toggle:checked ~ .landing-nav-burger span:nth-child(2) {
  opacity: 0;
}
.landing-nav-toggle:checked ~ .landing-nav-burger span:nth-child(3) {
  top: 15px;
  transform: rotate(-45deg);
}
@media (max-width: 768px) {
  .landing-nav {
    padding: 1rem 1.25rem;
    flex-wrap: wrap;
  }
  .landing-nav-burger {
    display: block;
    order: 3;
    margin-left: auto;
  }
  .landing-nav-cta {
    order: 2;
    margin-left: auto;
    padding: 0.4rem 0.85rem;
    font-size: 0.825rem;
  }
  /* Drawer collapses to full-width below the nav row. The
     :checked combinator on the toggle expands it. Animation keeps
     it from snapping in/out abruptly. */
  .landing-nav-drawer {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, margin-top 0.25s ease;
    margin-top: 0;
  }
  .landing-nav-toggle:checked ~ .landing-nav-drawer {
    max-height: 360px;
    margin-top: 0.85rem;
    border-top: 1px solid #e2e8f0;
    padding-top: 0.5rem;
  }
  .landing-nav-drawer a {
    padding: 0.65rem 0.25rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.95rem;
  }
  .landing-nav-drawer a:last-child { border-bottom: none; }
  /* Reduce hero padding so the headline doesn't dominate the
     viewport on phone screens. */
  .landing-hero-content {
    padding: 3rem 1.25rem 2.5rem;
  }
  .landing-container {
    padding: 0 1.25rem;
  }
  .landing-section {
    padding: 3rem 0;
  }
  .landing-ctas {
    gap: 0.75rem;
  }
  .landing-cta-primary {
    width: 100%;
    text-align: center;
  }
  .landing-cta-secondary {
    width: 100%;
    text-align: center;
  }
  .landing-footer-inner {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
  .landing-footer-nav {
    flex-wrap: wrap;
    gap: 1rem;
  }
}

/* Hero */
.landing-hero-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 2rem 4rem;
}
.landing-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--dormant);
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 3px;
  padding: 0.25rem 0.6rem;
  margin-bottom: 1.5rem;
}
.landing-headline {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.08;
  color: #0f172a;
  letter-spacing: -1.5px;
  margin-bottom: 1.5rem;
}
.landing-sub {
  font-size: 1.125rem;
  color: #475569;
  line-height: 1.7;
  max-width: 540px;
  margin-bottom: 2.5rem;
}
.landing-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.landing-cta-primary {
  background: var(--rupture);
  color: #fff;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.15s;
}
.landing-cta-primary:hover { background: #b91c1c; text-decoration: none; }
.landing-cta-secondary {
  color: #475569;
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.15s;
}
.landing-cta-secondary:hover { color: #0f172a; text-decoration: none; }

/* Seismograph separator */
.landing-seismo {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin-top: 2rem;
}
.landing-seismo svg {
  width: 100%;
  height: 56px;
  display: block;
}

/* Sections */
.landing-section {
  padding: 5rem 0;
  background: #f8fafc;
}
.landing-dark-section {
  background: #ffffff;
}
.landing-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}
.landing-section-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.5px;
  margin-bottom: 0.75rem;
}
.landing-section-sub {
  color: #475569;
  font-size: 1.05rem;
  margin-bottom: 2.5rem;
}
.landing-center { text-align: center; }

/* Feature cards */
.landing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.landing-feature-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: calc(var(--radius) * 2);
  padding: 1.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.landing-feature-icon {
  width: 40px;
  height: 40px;
  background: #fef2f2;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--rupture);
}
.landing-feature-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.5rem;
}
.landing-feature-card p {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.65;
}

/* The loop — split layout */
.landing-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
@media (max-width: 768px) {
  .landing-split { grid-template-columns: 1fr; gap: 2.5rem; }
}
.landing-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.landing-steps li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.step-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--rupture);
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 3px;
  padding: 0.2rem 0.4rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.landing-steps li > div {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.5;
}
.landing-steps li strong { color: #0f172a; }

/* Code blocks */
.landing-code-block {
  background: #020617;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: calc(var(--radius) * 1.5);
  overflow: hidden;
}
.landing-code-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1rem;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.landing-code-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.landing-code-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #64748b;
  margin-left: 0.4rem;
}
.landing-code {
  padding: 1.25rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.7;
  color: #e2e8f0;
  overflow-x: auto;
}
.lc-kw { color: #c084fc; }
.lc-str { color: #86efac; }
.lc-num { color: #fbbf24; }
.lc-cmt { color: #475569; }

/* Stack grid */
.landing-stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: #e2e8f0;
  border: 1px solid #e2e8f0;
  border-radius: calc(var(--radius) * 2);
  overflow: hidden;
}
.landing-stack-item {
  background: #ffffff;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.landing-stack-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
}
.landing-stack-value {
  font-size: 0.875rem;
  color: #1e293b;
  font-weight: 500;
}

/* Inline help dropdowns inside settings-card sections. Used by
   the Sentry-pull / GitHub / future-integration sections to embed
   step-by-step setup instructions next to the form so operators
   don't have to context-switch to docs. */
.settings-help {
  margin: 0.75rem 0 1rem;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  background: #f8fafc;
  padding: 0.75rem 1rem;
}
.settings-help summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
  padding: 0.25rem 0;
}
.settings-help summary:hover {
  color: var(--rupture);
}
.settings-help[open] summary {
  margin-bottom: 0.5rem;
}
.settings-help ol,
.settings-help p {
  margin: 0.5rem 0;
}
.settings-help ol {
  padding-left: 1.5rem;
}
.settings-help li {
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.55;
}

/* MCP download grid */
.mcp-download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.mcp-download-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.mcp-download-card:hover {
  border-color: var(--rupture);
  text-decoration: none;
  transform: translateY(-1px);
}
.mcp-download-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
}
.mcp-download-slug {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #64748b;
}

/* MCP tools list (item 4 on /mcp page) */
.landing-tools {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.landing-tools li {
  font-size: 0.95rem;
  color: #475569;
  padding-left: 1rem;
  border-left: 2px solid #e2e8f0;
}
.landing-tools li strong {
  font-family: var(--font-mono);
  color: var(--rupture);
  margin-right: 0.5rem;
}

/* Two-path comparison cards on the home page */
.landing-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}
@media (max-width: 768px) {
  .landing-paths { grid-template-columns: 1fr; }
}
.landing-path-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: calc(var(--radius) * 2);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.landing-path-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.landing-path-card .landing-path-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--rupture);
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 3px;
  padding: 0.2rem 0.5rem;
  align-self: flex-start;
}
.landing-path-card p {
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}
.landing-path-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.landing-path-card ul li {
  font-size: 0.9rem;
  color: #475569;
  padding-left: 1.1rem;
  position: relative;
}
.landing-path-card ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--rupture);
  font-weight: 700;
}
.landing-path-card .landing-path-cta {
  margin-top: auto;
  padding-top: 0.75rem;
}

/* CTA band */
.landing-cta-band {
  background: var(--rupture);
  padding: 4rem 0;
}
.landing-cta-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.landing-cta-band h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}
.landing-cta-band p {
  color: rgba(255,255,255,0.75);
  margin-top: 0.35rem;
}
.landing-cta-band .landing-cta-primary {
  background: #fff;
  color: var(--rupture);
}
.landing-cta-band .landing-cta-primary:hover { background: #f1f5f9; }
.landing-cta-band .landing-cta-secondary { color: rgba(255,255,255,0.8); }
.landing-cta-band .landing-cta-secondary:hover { color: #fff; }

/* Footer */
.landing-footer {
  background: #f8fafc;
  padding: 2rem 0;
  border-top: 1px solid #e2e8f0;
}
.landing-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.landing-footer-nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.landing-footer-nav a {
  font-size: 0.85rem;
  color: #64748b;
  text-decoration: none;
}
.landing-footer-nav a:hover { color: #0f172a; text-decoration: none; }
.landing-footer-copy {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #94a3b8;
}

/* ─── Mobile rules: cloud project detail page ─────────────────────
   Below 720px the page-header buttons (Connections / Webhooks /
   Settings) drop under the title; the info-strip chips collapse to
   one chip per row; the issues + recent-events tables become
   horizontally scrollable so columns don't truncate or wrap into
   each other; and the rig-health table hides the lower-priority
   columns (regression %, last sync) so the lifecycle counts stay
   visible without horizontal scroll. */
@media (max-width: 720px) {
  .page-header-row {
    flex-direction: column;
    align-items: stretch;
  }
  .page-header-row .action-buttons {
    justify-content: flex-start;
  }
  .cloud-detail-strip {
    flex-direction: column;
    gap: 0.5rem;
  }
  .cloud-strip-chip {
    flex: 1 1 auto;
    width: 100%;
  }
  /* Tables wrap their parent .card so we let the card scroll
     horizontally rather than break each column individually. */
  .card.section-card,
  .cloud-events-card {
    overflow-x: auto;
  }
  .data-table,
  .cloud-events-table {
    min-width: 540px;
  }
  /* Stat cards need a smaller minmax so 2-up fits a phone screen. */
  .cloud-stat-cards {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
  }
  /* Rig activity grid was minmax(280px, 1fr); on a 360px viewport
     that wastes margin. Drop to 240px so two cards fit a tablet
     and one card fills a phone. */
  .cloud-rig-activity-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  /* Allow long event messages to wrap on mobile rather than being
     ellipsis-cut at a fixed 360px — vertical space is cheap on a
     phone, horizontal is not. */
  .cloud-event-message {
    white-space: normal;
    max-width: none;
  }
}

/* Webhooks list (fl-4t10) — name-first row layout + collapsed add form. */
.webhook-row-name {
  font-weight: 500;
  text-decoration: none;
}
.webhook-row-name:hover {
  text-decoration: underline;
}
.webhook-row-url {
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--sediment);
  word-break: break-all;
}
/* Make <details> summary read like a primary action button. The
   default disclosure triangle is suppressed so the summary visually
   matches other .btn-primary elements; the <details> container
   handles the actual show/hide. Card chrome wraps the open form
   so it inherits section-card padding once expanded. */
details.webhook-add-toggle {
  margin-top: 0.75rem;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
details.webhook-add-toggle > summary.webhook-add-summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
details.webhook-add-toggle > summary.webhook-add-summary::-webkit-details-marker {
  display: none;
}
details.webhook-add-toggle[open] > .card-body {
  margin-top: 0.75rem;
  background: white;
  border: 1px solid var(--surface-border, #e5e7eb);
  border-radius: var(--radius, 6px);
  padding: 1.25rem;
}