/* Hindsight dashboard — shared boringSQL design tokens (see ../../CLAUDE.md).
   Auth + layout chrome only; the feed styles arrive with Commit 8. */
:root {
  --color-navy:        #2B3444;
  --color-navy-light:  #3D4654;
  --color-accent:      #FDD100;
  --color-accent-soft: #FFFBEB;

  --color-bg:            #faf6f1;
  --color-surface:       #FFFFFF;
  --color-ink:           #1a1a1a;
  --color-ink-secondary: #666666;
  --color-ink-muted:     #8896A8;
  --color-border:        rgba(0, 0, 0, 0.1);

  --color-link: #2F5B8A;

  --color-success:    #2ECC40;
  --color-success-bg: #F0FDF4;
  --color-error:      #DC3545;
  --color-error-bg:   #FEF2F2;
  --color-warning:    #F59E0B;
  --color-warning-bg: #FFFBEB;

  --font-sans: 'Inter', -apple-system, sans-serif;
  --font-mono: "SF Mono", "Fira Code", Consolas, monospace;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

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

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

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

code { font-family: var(--font-mono); font-size: 0.9em; }

.app__container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px 96px;
}

/* ---------- header ---------- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0 18px;
  border-bottom: 1px solid var(--color-border);
}

.header__wordmark {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.header__wordmark:hover { text-decoration: none; }
.header__wordmark .wordmark__hind { color: var(--color-navy); }
.header__wordmark .wordmark__sight {
  color: var(--color-ink);
  background: linear-gradient(transparent 62%, var(--color-accent) 62%, var(--color-accent) 92%, transparent 92%);
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---------- workspace switcher + account ----------
   Native <details> disclosure: the menus work with zero JS, so logout and
   tokens stay reachable even if scripts fail to load. */
.menu-host { position: relative; }
.menu-host > summary { list-style: none; cursor: pointer; }
.menu-host > summary::-webkit-details-marker { display: none; }
.menu-host > summary::marker { content: ""; }

.workspace-switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-ink);
}
.workspace-switcher__btn:hover { border-color: var(--color-ink-muted); }
.workspace-switcher__caret { color: var(--color-ink-muted); font-size: 0.75rem; }

.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 20;
}
.menu--right { left: auto; right: 0; }
.menu__current { font-weight: 600; padding: 6px 10px 2px; }
.menu__hint, .menu__email {
  font-size: 0.8rem;
  color: var(--color-ink-muted);
  padding: 0 10px 6px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 4px;
}
.menu__link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--color-ink-secondary);
}
.menu__link:hover { background: var(--color-bg); color: var(--color-ink); text-decoration: none; }
.menu__link--button {
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}

/* ---------- buttons ---------- */
.btn {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: 9px 18px;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn--primary {
  background: var(--color-navy);
  color: #fff;
  width: 100%;
}
.btn--primary:hover { background: var(--color-navy-light); }
.btn--ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-ink-secondary);
  padding: 6px 13px;
  font-size: 0.9rem;
}
.btn--ghost:hover { border-color: var(--color-ink-muted); color: var(--color-ink); }

/* ---------- flashes ---------- */
.flashes { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.flash {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-ink-muted);
  font-size: 0.92rem;
}
.flash--success { background: var(--color-success-bg); border-left-color: var(--color-success); }
.flash--error   { background: var(--color-error-bg);   border-left-color: var(--color-error); }
.flash--warning { background: var(--color-warning-bg); border-left-color: var(--color-warning); }
.flash--info    { background: var(--color-accent-soft); border-left-color: var(--color-accent); }

/* ---------- auth ---------- */
.auth {
  max-width: 380px;
  margin: 64px auto 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px 32px 32px;
}
.auth__title { font-size: 1.4rem; font-weight: 700; margin-bottom: 22px; }
.auth__note { color: var(--color-ink-secondary); }
.auth__note + .auth__note { margin-top: 10px; }
.auth__note--muted { color: var(--color-ink-muted); }
.auth__form { display: flex; flex-direction: column; gap: 16px; }
/* the reset strips <p> margins, so a button/form right after a note would jam
   against it (e.g. the verify-email confirm page). */
.auth__note + .auth__form { margin-top: 24px; }
.auth__alt {
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--color-ink-secondary);
  text-align: center;
}

.field { display: flex; flex-direction: column; gap: 5px; }
.field__label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-muted);
}
.field__input {
  font-family: inherit;
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-ink);
}
.field__input:focus {
  outline: none;
  border-color: var(--color-navy);
  background: var(--color-surface);
}
.field__error { font-size: 0.82rem; color: var(--color-error); }
.field__hint { font-size: 0.82rem; color: var(--color-ink-muted); }
.field__input--error { border-color: var(--color-error); }
.field__input--error:focus { border-color: var(--color-error); }

/* ---------- error page ---------- */
.error-page {
  margin: 64px auto 0;
  max-width: 520px;
  text-align: center;
}
.error-page h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 10px; }
.error-page p { color: var(--color-ink-secondary); }

/* ---------- settings / tokens ---------- */
.settings { margin: 40px auto 0; max-width: 640px; }
.settings__title { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
.settings__intro { color: var(--color-ink-secondary); margin-bottom: 28px; }
.settings__empty { color: var(--color-ink-muted); margin-top: 24px; }

.settings__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.settings__form + .settings__form { margin-top: 16px; }
/* min-width: 0 lets fields shrink below their input's intrinsic width, so the
   submit button wraps inside the card instead of overflowing it */
.settings__form .field { flex: 1 1 180px; min-width: 0; }
.settings__form .field__input { width: 100%; }
.settings__form .btn--primary { width: auto; white-space: nowrap; }
.settings__form-title {
  flex-basis: 100%;
  font-weight: 600;
  font-size: 0.95rem;
}
.settings__form-hint {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--color-ink-muted);
  margin-left: 8px;
}

/* Data-policy / workspace: a vertical form. In column direction the row
   variant's flex-basis would become a min-height, so reset it and stretch
   fields to the card width instead. */
.settings__form--stack { flex-direction: column; align-items: flex-start; gap: 10px; }
.settings__form--stack .field { flex: 0 0 auto; width: 100%; }
.toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle__input { width: 16px; height: 16px; accent-color: var(--color-navy); cursor: pointer; }
.toggle__label { font-weight: 600; }
.settings__hint { color: var(--color-ink-secondary); font-size: 0.9rem; margin: 0; }
.settings__hint code { font-family: var(--font-mono); }
.settings__caveats { margin: 18px 0 0; padding-left: 18px; color: var(--color-ink-muted); font-size: 0.85rem; line-height: 1.6; }
.settings__caveats li { margin-bottom: 6px; }
.settings__caveats code { font-family: var(--font-mono); }

/* freshly minted token, shown once */
.token-reveal {
  margin-bottom: 24px;
  padding: 16px 18px;
  background: var(--color-accent-soft);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
}
.token-reveal__label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-muted);
  margin-bottom: 8px;
}
.token-reveal__value {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  word-break: break-all;
  color: var(--color-ink);
}

.token-list { list-style: none; margin-top: 28px; }
.token-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}
.token-list__main { display: flex; flex-direction: column; gap: 2px; }
.token-list__name { font-weight: 600; }
.token-list__name--revoked { color: var(--color-ink-muted); text-decoration: line-through; }
.token-list__meta { font-size: 0.82rem; color: var(--color-ink-muted); }

.badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-error-bg);
  border-left: 2px solid var(--color-error);
  color: var(--color-ink-secondary);
}
.badge--revoked { background: var(--color-error-bg); border-left-color: var(--color-error); }
/* token scope: yellow = full/brand default, blue = read-only mcp */
.badge--scope-full { background: var(--color-accent-soft); border-left-color: var(--color-accent); text-transform: none; }
.badge--scope-read { background: #f0f4ff; border-left-color: #2F5B8A; text-transform: none; }

/* ---------- oauth consent ---------- */
/* A standalone decision moment: a narrow centered card, approve emphasized and
   deny secondary on one row (the shared .btn--primary is width:100%, so scope
   the widths here like the settings forms do). */
.consent {
  max-width: 480px;
  margin: 56px auto 0;
  padding: 26px 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.consent__title { font-size: 1.5rem; font-weight: 700; margin-bottom: 14px; }
.consent__intro { line-height: 1.6; margin-bottom: 12px; }
.consent__meta { color: var(--color-ink-secondary); font-size: 0.9rem; line-height: 1.6; margin-bottom: 4px; }
.consent__meta code { font-family: var(--font-mono); }
.consent__form { margin-top: 22px; }
.consent__actions { display: flex; align-items: stretch; gap: 12px; }
.consent__actions .btn--primary { width: auto; flex: 1; }
/* match the primary's height so the row is even (ghost is otherwise shorter) */
.consent__actions .btn--ghost { padding: 9px 18px; font-size: 0.95rem; }

/* ---------- filter row ---------- */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border);
}
.filter__chip {
  padding: 5px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink-secondary);
  cursor: pointer;
  transition: all .12s ease;
}
.filter__chip:hover { border-color: var(--color-ink-muted); color: var(--color-ink); }
.filter__chip--active {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}
.filter__count { color: inherit; opacity: .55; margin-left: 4px; font-size: 0.8rem; }

/* ---------- feed ---------- */
.feed { padding-top: 8px; }

.feed__day {
  margin: 28px 0 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-ink-muted);
}

.feed__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 20px 14px;
  margin-top: 12px;
}

.feed__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
.feed__title {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* badges on the left, snapshot meta pushed to the right; wraps only if even
   this row overflows */
.feed__sub {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.feed__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--color-success);
  align-self: center;
  flex: none;
}
.feed__dot--planner  { background: #2F5B8A; }
.feed__dot--activity { background: #9a6fb0; }

.feed__db { font-weight: 600; font-size: 1rem; color: var(--color-ink); }
.feed__db em { font-style: normal; color: var(--color-ink-muted); font-weight: 400; }

.feed__kinds { display: inline-flex; gap: 6px; }
.kind {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25em 0.6em;
  background: var(--color-accent-soft);
  color: var(--color-ink);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--color-accent);
}
.kind--planner  { background: #EFF4FA; border-left-color: #2F5B8A; }
.kind--activity { background: #F5EFF8; border-left-color: #9a6fb0; }

.feed__meta {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.digest {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-ink-secondary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 8px;
  cursor: pointer;
}
.digest:hover { border-color: var(--color-ink-muted); }
.digest::after { content: " ⧉"; opacity: .45; font-size: 0.75rem; }

/* ---------- empty state ---------- */
.feed__empty {
  margin-top: 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  text-align: center;
}
.feed__empty-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.feed__empty p { color: var(--color-ink-secondary); }
.feed__empty code {
  font-family: var(--font-mono);
  background: var(--color-bg);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ---------- load more ---------- */
.feed__more {
  display: block;
  margin: 36px auto 0;
  padding: 9px 28px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink-secondary);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}
.feed__more:hover { border-color: var(--color-ink-muted); color: var(--color-ink); }

/* ---------- findings (engine-written hindsights) ---------- */
/* table-like grid so severities and change-types align into columns:
   [ severity ] [ class ] [ change_type  object / detail ] */
.findings {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  gap: 8px 12px;
  align-items: baseline;
  margin-top: 14px;
}
.finding { display: contents; }

.finding__sev {
  min-width: 64px;
  text-align: center;
  align-self: baseline;
}
.finding__sev--none { min-width: 64px; }

/* the change-type column needs a placeholder when a row has no class badge so
   the main column still aligns under the findings that do carry one */
.finding__class--none { padding: 0; border: 0; }

.finding__main { min-width: 0; }
.finding__type {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--color-ink-secondary);
  margin-right: 6px;
}
.finding__obj {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink);
  word-break: break-word;
}
.finding__detail {
  display: block;
  font-size: 0.85rem;
  color: var(--color-ink-secondary);
  margin-top: 1px;
}
/* a verified cause from the correlation pass — set apart from the measured detail
   with a navy marker, since it's a checked attribution, not raw measurement */
.finding__cause {
  display: block;
  font-size: 0.82rem;
  color: var(--color-navy);
  margin-top: 2px;
  padding-left: 8px;
  border-left: 2px solid var(--color-navy);
}
/* the recommended remedy — mono (it's a command to copy), on a soft brand-tinted
   block with the yellow accent border, set apart from prose as the actionable bit */
.finding__action {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-ink);
  background: var(--color-accent-soft);
  border-left: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  margin-top: 4px;
  padding: 4px 8px;
  white-space: pre-wrap;
  word-break: break-word;
}
/* a hedged temporal link to the schema change around this finding's onset — the blue link
   color (info/adjacency), distinct from the navy verified cause and the yellow remedy */
.finding__related {
  display: block;
  font-size: 0.82rem;
  color: var(--color-ink-secondary);
  margin-top: 2px;
  padding-left: 8px;
  border-left: 2px solid var(--color-link);
}
.finding__related-label { color: var(--color-ink-muted); }
.finding__related-link { color: var(--color-link); }
.finding__related-note { color: var(--color-ink-muted); }
/* a candidate fix in flight (index added after onset): green left-border signals resolving */
.finding__related--fix { border-left-color: var(--color-success); }
/* glance-level "awaiting verification" pill at the head of a finding still open while a
   fix lands; green (resolving) to set it apart from the severity dot it sits beside */
.finding__fix-pending {
  background: var(--color-success-bg);
  border-left-color: var(--color-success);
  color: var(--color-ink-secondary);
  margin-right: 6px;
}
/* the "worsened" pill: an open finding whose severity rose this window — warning
   palette (news, not a new class of problem; the severity dot already carries urgency) */
.finding__worsened {
  background: var(--color-warning-bg);
  border-left-color: var(--color-warning);
  color: var(--color-ink-secondary);
  margin-right: 6px;
}
/* the severity-step line under the detail ("severity rose from medium to high on ...") */
.finding__escalated {
  display: block;
  font-size: 0.82rem;
  color: var(--color-ink-secondary);
  margin-top: 2px;
  padding-left: 8px;
  border-left: 2px solid var(--color-warning);
}
/* the reverse of finding__related, on a change card: the findings this change preceded */
.change__preceded .finding__main {
  font-size: 0.82rem;
  color: var(--color-ink-secondary);
}
.change__preceded-label { color: var(--color-ink-muted); }
.change__preceded-link { color: var(--color-link); }

/* ---------- weekly digest ---------- */
.digest-page { max-width: 800px; margin: 0 auto; }
.digest-page__header { margin-bottom: 28px; }
.digest-page__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-ink);
  margin: 6px 0 0;
}
.digest-page__since { color: var(--color-ink-muted); font-size: 0.9rem; margin: 2px 0 0; }
.digest__section { margin-bottom: 28px; }
/* the section head carries the brand's yellow highlighter stripe on cream */
.digest__head {
  display: inline;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-navy);
  padding: 0 2px;
  background-image: linear-gradient(transparent 58%, var(--color-accent) 58%);
}
.digest__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.digest__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.digest__item--affected { align-items: flex-start; }
.digest__affected-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.digest__affected-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.digest__label { color: var(--color-link); font-weight: 600; }
.digest__when { color: var(--color-ink-muted); font-size: 0.8rem; }
.digest__detail { color: var(--color-ink-secondary); font-size: 0.85rem; }
.digest__changes {
  list-style: none;
  margin: 5px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: max-content max-content 1fr; /* kind | verb | object, aligned across rows */
  column-gap: 12px;
  row-gap: 3px;
  font-size: 0.85rem;
}
.digest__change { display: contents; } /* let the three cells join the parent grid so columns line up */
.digest__change-kind { color: var(--color-ink-muted); }
.digest__change-verb { font-weight: 600; color: var(--color-ink-secondary); }
.digest__change-verb--drop { color: var(--color-error); } /* a removed column/constraint is the breaking half — make it pop */
.digest__change-obj { min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.digest__change-name { color: var(--color-ink); }

/* ---------- note thread (human hindsights) ---------- */
.feed__hindsights {
  margin: 16px 0 0 4px;
  padding-left: 16px;
  border-left: 2px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.feed__timeline-link {
  font-size: 0.8rem;
  color: var(--color-link);
  text-decoration: none;
  margin-left: 8px;
  opacity: 0.75;
}
.feed__timeline-link:hover { opacity: 1; }

.hindsight {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.hindsight__body { flex: 1; min-width: 0; }
.hindsight__actions {
  display: flex;
  gap: 8px;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.hindsight__edit summary { cursor: pointer; color: var(--color-ink-muted); }
.hindsight__delete {
  border: none; background: none; color: var(--color-error);
  cursor: pointer; font-size: inherit; padding: 0;
}
.hindsight__placeholder { color: var(--color-ink-muted); font-style: italic; }

/* badge — severity pills (finding rows) and finding-category labels */
.badge { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: .05em;
         text-transform: uppercase; padding: 2px 6px; border-radius: var(--radius-sm);
         border-left: 2px solid; }
.badge--high     { background: var(--color-error-bg);   color: var(--color-error);   border-color: var(--color-error); }
.badge--medium   { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning); }
.badge--low      { background: #f0f4ff; color: #2F5B8A; border-color: #2F5B8A; }
.badge--info     { background: #f5f5f5; color: var(--color-ink-muted); border-color: var(--color-ink-muted); }
.badge--category { background: var(--color-accent-soft); color: var(--color-navy); border-color: var(--color-navy); }
.badge--growth   { border-color: var(--color-warning); }
.badge--regression { border-color: var(--color-error); }
.badge--bloat    { border-color: #9a6fb0; }
.badge--vacuum   { border-color: #9a6fb0; }
.badge--freeze   { border-color: var(--color-error); }
.badge--stats    { border-color: #2F5B8A; }
.badge--index    { border-color: #9a6fb0; }
.badge--critical { background: var(--color-error); color: #fff; border-color: var(--color-error); }
.badge--partitioned { background: #f5f5f5; color: var(--color-ink-muted); border-color: var(--color-ink-muted); text-transform: none; }
.badge--partition { background: var(--color-accent-soft); color: var(--color-navy); border-color: #2F5B8A; text-transform: none; }
/* systemic: neutral, de-emphasized — a roll-up line, not a brand/category badge */
.badge--systemic { background: #f5f5f5; color: var(--color-ink-muted); border-color: var(--color-ink-muted); }
/* resolved: the success pill in the severity slot of a resolution event — good news,
   so the success palette, mirroring the fix-pending badge it often follows */
.badge--resolved { background: var(--color-success-bg); color: var(--color-ink-secondary); border-color: var(--color-success); }

/* per-table bundle: the table name heads the group, its signals indent under it
   so a churning table reads as one insight instead of repeated object names.
   .finding is display:contents (no box), so spacing goes on the row's children. */
.finding--group-head .finding__sev,
.finding--group-head .finding__main { margin-top: 6px; }
.finding--group-head .finding__obj { font-size: 0.88rem; }
.finding--group-signal .finding__main {
  padding-left: 12px;
  border-left: 2px solid var(--color-border);
}
.finding--systemic .finding__detail { font-style: italic; }
/* resolution events read calm: muted line, the green badge alone carries the state */
.finding--resolved .finding__detail--resolved { color: var(--color-ink-secondary); }
.finding--resolved .finding__obj { color: var(--color-ink-secondary); }
/* flood expander: one summary line; expanded, a plain list of affected-table
   links — names + links only, never nested finding rows. */
.finding__flood > summary { cursor: pointer; list-style-position: outside; }
.finding__members {
  list-style: none;
  margin: 6px 0 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.82rem;
}
.finding__members a { text-decoration: none; color: var(--color-link); }
.finding__members a:hover { text-decoration: underline; }
.finding__members code { font-family: var(--font-mono); }
.finding__members li { display: flex; align-items: center; gap: 6px; }
/* per-member bucket tags, so the flat list maps onto the roll-up sentence: open = the
   large+persistent set to open, explain = a heavy small-table scan (likely missing join
   index), fix = a candidate fix in flight. 2px left-border carries the meaning (brand idiom). */
.finding__member-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  border-left: 2px solid;
}
.finding__member-tag--open    { background: var(--color-error-bg);   color: var(--color-error);         border-left-color: var(--color-error); }
.finding__member-tag--explain { background: #f0f4ff;                 color: #2F5B8A;                    border-left-color: #2F5B8A; }
.finding__member-tag--fix     { background: var(--color-success-bg); color: var(--color-ink-secondary); border-left-color: var(--color-success); }
/* a finding's object name links to its table page; the link is invisible until hover. */
.finding__obj-link { text-decoration: none; color: inherit; }
.finding__obj-link:hover .finding__obj { text-decoration: underline; }

/* ---------- timeline page ---------- */
.timeline { max-width: 800px; margin: 0 auto; padding: 0 20px 60px; }
.timeline__header { padding: 40px 0 24px; border-bottom: 1px solid var(--color-border); margin-bottom: 32px; }
.timeline__title { font-size: 1.5rem; font-weight: 700; margin: 0 0 6px; }
.timeline__project { color: var(--color-ink-muted); font-weight: 400; }
.timeline__db { font-style: normal; }
.timeline__sub { color: var(--color-ink-muted); font-size: 0.9rem; margin: 0; }
.timeline__empty { color: var(--color-ink-muted); }
.timeline__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.timeline__entry {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}
.timeline__time { text-align: right; }
.timeline__day { display: block; font-weight: 600; font-size: 0.9rem; color: var(--color-navy); }
.timeline__ts { display: block; font-size: 0.78rem; color: var(--color-ink-muted); margin-top: 2px; }
.timeline__card { min-width: 0; }
.timeline__quiet { font-size: 0.875rem; color: var(--color-ink-muted); font-style: italic; }
.timeline__insights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.timeline__insights .findings { margin-top: 0; }

/* ---------- footer ---------- */
.footer {
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}
.footer p { margin: 2px 0; }
.footer strong { color: var(--color-ink-secondary); }

/* ---------- per-table object page (header facts + open findings) ---------- */
.table-page { max-width: 800px; margin: 0 auto; padding: 0 20px 60px; }
.table-page__header { padding: 36px 0 8px; margin-bottom: 28px; }

/* breadcrumb on its own line, calm and small; the slash is fainter than the names */
.table-page__crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; color: var(--color-ink-muted); margin-bottom: 12px;
}
.table-page__crumb-project { color: var(--color-ink-secondary); }
.table-page__crumb-sep { color: var(--color-ink-muted); opacity: 0.5; }

/* the object is the headline: schema dimmed so the table name carries the weight */
.table-page__identity { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.table-page__title { margin: 0; line-height: 1.15; }
.table-page__obj {
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700;
  color: var(--color-ink); word-break: break-word;
}
.table-page__schema { color: var(--color-ink-muted); font-weight: 600; }

/* partition relationships: a child's "partition of <parent>" line under the header, and a
   parent's capped partition list. The list stays calm (one row per child) and the section
   count carries the full total + summed size since the list itself is capped. */
.table-page__partition-of { margin: -10px 0 22px; color: var(--color-ink-secondary); font-size: 0.95rem; }
.table-page__partition-of code { font-family: var(--font-mono); }
.table-page__bound { margin-left: 8px; color: var(--color-ink-muted); font-size: 0.85rem; }
.table-page__section-count { margin-left: 8px; color: var(--color-ink-muted); font-weight: 400; font-size: 0.9rem; }
.table-page__partition-key { margin: -10px 0 14px; color: var(--color-ink-secondary); font-size: 0.9rem; }
.table-page__partition-key code { font-family: var(--font-mono); }
.table-page__partitions { list-style: none; margin: 0 0 22px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.table-page__partition { display: flex; flex-direction: column; gap: 4px; padding: 11px 16px; border-bottom: 1px solid var(--color-border); }
.table-page__partition:last-child { border-bottom: none; }
.table-page__partition-top { display: flex; align-items: baseline; gap: 12px; }
.table-page__partition-name { font-family: var(--font-mono); flex: 1 1 auto; word-break: break-word; }
.table-page__partition-size { color: var(--color-ink-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; }
/* The bound is the meaningful part of a range/list partition, so it gets its own line at
   full width and wraps rather than truncating. */
.table-page__partition-bound { display: block; color: var(--color-ink-muted); font-size: 0.85rem; font-family: var(--font-mono); word-break: break-word; }
.table-page__partitions-more { color: var(--color-ink-muted); font-size: 0.9rem; margin: -12px 0 22px; }

/* Partition activity: recent create/drop lifecycle grouped by day, the only place a dropped
   partition (gone from the live list and database_tables) stays visible. Names are shown short
   (parent prefix stripped) as compact chips so a whole rotation reads at a glance. */
.table-page__subsection { font-size: 0.95rem; font-weight: 600; color: var(--color-ink-secondary); margin: 4px 0 10px; }
.partition-activity { list-style: none; margin: 0 0 22px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.partition-activity__day { padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.partition-activity__day:last-child { border-bottom: none; }
.partition-activity__date { font-size: 0.8rem; font-weight: 600; color: var(--color-ink-secondary); margin-bottom: 8px; }
.partition-activity__line { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.partition-activity__line:last-child { margin-bottom: 0; }
.partition-activity__label { flex: 0 0 auto; font-size: 0.65rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-sm); border-left: 2px solid; white-space: nowrap; font-variant-numeric: tabular-nums; }
.partition-activity__label--dropped { color: var(--color-error); background: var(--color-error-bg); border-left-color: var(--color-error); }
.partition-activity__label--created { color: var(--color-ink-secondary); background: var(--color-accent-soft); border-left-color: var(--color-accent); }
.partition-activity__names { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.partition-activity__name { font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-ink); }
.partition-activity__more { color: var(--color-ink-muted); font-size: 0.8rem; white-space: nowrap; }

/* snapshot facts grouped into a calm white stat panel (cards-on-cream idiom). A fixed
   3-column grid so the compact stats (size / live / dead) share the first row and the two
   wide timestamps (last vacuum / last analyze) sit together on the second. Column count is
   deterministic, so per-row dividers key off nth-child(3n+1) — the first cell of each row —
   and never leave a stray divider when the row wraps or a fact is omitted. */
.table-page__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 0; margin: 0;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 20px 24px;
}
.table-page__fact {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  padding-left: 24px; border-left: 1px solid var(--color-border);
}
.table-page__fact:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.table-page__fact dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink-muted); }
.table-page__fact dd { margin: 0; font-family: var(--font-mono); font-size: 0.9rem; color: var(--color-ink); white-space: nowrap; }
.table-page__section { font-size: 0.95rem; font-weight: 700; margin: 0 0 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.table-page__section-link { font-size: 0.8rem; font-weight: 500; color: var(--color-link); text-decoration: none; }
.table-page__section-link:hover { text-decoration: underline; }
.table-page__empty { color: var(--color-ink-muted); }

/* header nav: small links to the table's statistics page and the db-wide change log */
.table-page__nav { display: flex; gap: 18px; margin: 0 0 18px; }
.table-page__nav a { font-size: 0.85rem; color: var(--color-link); text-decoration: none; }
.table-page__nav a:hover { text-decoration: underline; }
.table-page__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.table-page__item {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  align-items: baseline;
}
.table-page__badges { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.table-page__finding { min-width: 0; }
.table-page__sub { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; color: var(--color-ink); word-break: break-word; }
.table-page__detail { display: block; font-size: 0.85rem; color: var(--color-ink-secondary); margin-top: 2px; }
.table-page__section--muted { margin-top: 28px; color: var(--color-ink-muted); }
.table-page__dismissed { margin-top: 28px; }
.table-page__dismissed > summary { margin-top: 0; cursor: pointer; list-style: revert; }

/* a snoozed/dismissed row is muted: it stays legible but reads as "set aside" */
.table-page__item--muted { opacity: 0.6; }

/* the empty open-issues state gets vertical room so it doesn't crowd the next section */
.table-page__empty { padding: 6px 0 10px; }

/* schema history is a major section break: a rule + generous top gap sets it apart from
   the findings sections above, then it reuses the feed's day-headed cards + findings grid
   (.feed__day, .feed__item, .findings), scoped here with a little more air between cards. */
.table-page__section--history {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}
.table-page__feed { padding-top: 0; }
.table-page__feed .feed__day { margin: 30px 0 10px; }
.table-page__feed .feed__day:first-child { margin-top: 12px; }
.table-page__feed .feed__item { margin-top: 14px; }

/* per-finding verdict controls (dismiss / snooze / unsnooze) */
.finding__verdict { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.finding__verdict-form { display: flex; align-items: center; gap: 6px; }
.finding__snooze-days {
  font-size: 0.75rem; font-family: var(--font-sans); color: var(--color-ink-secondary);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 2px 4px; background: var(--color-surface);
}
.finding__verdict-btn {
  font-size: 0.75rem; font-weight: 600; font-family: var(--font-sans);
  color: var(--color-ink-secondary); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 3px 10px; cursor: pointer;
}
.finding__verdict-btn:hover { border-color: var(--color-navy); color: var(--color-navy); }
.finding__verdict-btn--dismiss:hover { border-color: var(--color-error); color: var(--color-error); }
.finding__verdict-note { font-size: 0.75rem; color: var(--color-ink-muted); }

/* the change log adds a sub-object code (column/index) alongside the type+object */
.finding__sub { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--color-ink); }

/* ---------- per-table trend tiles (folded into the table page) ---------- */
/* a responsive grid of metric tiles, each a label + latest value + inline sparkline */
.stats__metrics {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px; margin: 0 0 28px;
}
.stats__metric {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 14px 16px;
}
.stats__metric-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.stats__metric-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-ink-muted); }
.stats__metric-latest { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; color: var(--color-ink); }
.stats__spark { display: block; width: 100%; height: 36px; margin: 10px 0 4px; overflow: visible; }
.stats__spark-line { fill: none; stroke: var(--color-link); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.stats__spark-dot { fill: var(--color-accent); stroke: var(--color-navy); stroke-width: 0.5; }
.stats__spark--empty { height: 36px; display: flex; align-items: center; font-size: 0.78rem; color: var(--color-ink-muted); }
.stats__metric-range { font-family: var(--font-mono); font-size: 0.74rem; color: var(--color-ink-muted); }

/* ---------- change log ---------- */
.changelog__filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.changelog__chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.changelog__chip-row .filter__chip { text-decoration: none; }
.changelog__truncated { margin-top: 18px; font-size: 0.82rem; color: var(--color-ink-muted); text-align: center; }

/* storage-parameter diff rows: mono for the values (data), muted for the origin note.
   Grid rather than a table so a long param name can't push the arrow off-column. */
.params {
  display: grid;
  grid-template-columns: max-content max-content max-content max-content 1fr;
  gap: 1px 8px;
  margin: 4px 0 0;
  font-size: 0.82rem;
}
.params__row { display: contents; }
.params__name {
  font-family: var(--font-mono);
  color: var(--color-ink);
}
.params__from,
.params__to {
  font-family: var(--font-mono);
  text-align: right;
}
.params__from { color: var(--color-ink-secondary); }
.params__to { color: var(--color-ink); font-weight: 600; }
.params__arrow { color: var(--color-ink-muted); }
.params__origin {
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}
@media (max-width: 640px) {
  .params { grid-template-columns: 1fr; gap: 0; }
  .params__row { display: block; margin-bottom: 4px; }
  .params__from, .params__to { text-align: left; }
  .params__origin { margin-left: 6px; }
}