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

:root {
  --font-fira: "Fira Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-noto: "Noto Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Dark, data-driven palette. Semantic token names are preserved so existing
     token-based components (cards, tables, forms, badges, modals) re-theme
     automatically. --color-white now denotes the elevated *surface*, not literal
     white; use --color-on-accent for foreground text sitting on a colored fill. */
  --color-primary: #519ACD;
  --color-primary-alt: #6DB3E3;
  --color-primary-light: #8FC8EC;

  --color-red: #FF6B5C;
  --color-red-dark: #FF4A37;
  --color-red-deep: #E2242B;

  --color-light: #EDEDEF;
  --color-dark: #E2E8F0;
  --color-white: #11161F;        /* elevated surface (cards, nav, inputs) */
  --color-off-white: #0B0F17;    /* page canvas */
  --color-on-accent: #FFFFFF;    /* text/icon on a colored fill */

  --color-canvas: #090C13;
  --color-surface-2: #0F141C;    /* nested / secondary surface */
  --color-inset: rgba(255, 255, 255, 0.035);   /* subtle inset panel on dark */

  --color-text: #E2E8F0;
  --color-text-secondary: #94A3B8;
  --color-text-muted: #64748B;
  --color-border: rgba(255, 255, 255, 0.07);
  --color-border-solid: #1E2632;
  --color-grid: rgba(255, 255, 255, 0.06);

  --color-accent-green: #34D399;
  --color-accent-amber: #F59E0B;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);

  --container: 1280px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-fira), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  background: var(--color-off-white);
  color: var(--color-text);
  line-height: 1.6;
  font-size: 16px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

body.dashboard {
  padding-left: 240px;
  background: var(--color-canvas);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(81, 154, 205, 0.06), transparent 60%),
    linear-gradient(to bottom, #090C13, #0B0F17);
  background-attachment: fixed;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--color-primary-alt); }

p { font-family: var(--font-noto); }

/* ===== Sidebar Nav ===== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  /* padding: 20px 14px; */
  background: var(--color-surface-2);
  border-right: 1px solid var(--color-border);
  z-index: 50;
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 4px;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 100;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-dark);
  transition: transform 0.15s ease, opacity 0.15s ease;
  border-radius: 1px;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-decoration: none;
  padding: 8px 11px;
  border-bottom: .5px solid var(--color-text-secondary);
  /* margin-bottom: 22px; */
}
.nav-brand:hover { color: var(--color-text); }

.nav-brand .nav-version {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-light);
  border: 1px solid var(--color-border-solid);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: auto;
  svg {
    margin-right: 3px;
  }
}

.nav-brand img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.nav-links {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  margin-left: 0;
}

.nav-links a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-light);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 3px 12px 5px 12px;
  border-bottom: .5px solid var(--color-text-secondary);
  transition: background 0.15s, color 0.15s;
}

/* Nav icons are inline <img> with currentColor (renders black in an <img>
   context), so re-tint them with a filter for the dark nav. */
.nav-links a img {
  filter: brightness(0) invert(0.6);
  transition: filter 0.15s;
}

.nav-links a:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  text-decoration: none;
}

.nav-links a:hover img { filter: brightness(0) invert(0.92); }

.nav-links a.active {
  background: rgba(81, 154, 205, 0.12);
  color: var(--color-primary-light);
}

.nav-links a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-primary);
}

.nav-links a.active img {
  filter: brightness(0) invert(0.62) sepia(1) saturate(3) hue-rotate(165deg);
}

.nav-links .nav-signout {
  margin-top: auto;
  background-color: var(--color-surface-2);
  border: none;
  border-top: .6px solid var(--color-text-secondary);
  color: var(--color-light);
  font-size: .9rem;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}

.nav-links .nav-signout:hover {
  background: var(--color-off-white);
  color: var(--color-dark);
}

/* ===== Layout (band-light section) ===== */
.container {
  max-width: var(--container);
  /* margin: 0 auto; */
  padding: .5rem;
}

/* ===== Typography ===== */
h1, h2, h3, h4 { color: var(--color-text); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.0625rem; font-weight: 600; color: var(--color-light); }

.brow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.3;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-red);
  margin-bottom: 1rem;
}

.page-title {
  font-family: var(--font-fira);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 1  .5rem;
  letter-spacing: -0.025em;
}

.section-title {
  font-family: var(--font-fira);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 24px 0 12px;
  letter-spacing: -0.02em;
}

.section-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3rem;
}

/* ===== Cards (marketing #outcomes style) ===== */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border-solid);
  border-top: 3px solid var(--color-primary);
  padding: 2rem;
  margin-bottom: 1.25rem;
  transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Destructive actions (e.g. Delete account) — red top-border to set them apart. */
.card.danger-zone {
  border-top-color: var(--color-red);
}

/* .card:hover {
  border-color: var(--color-primary-alt);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
} */

.card:nth-child(2) { border-top-color: var(--color-primary-alt); }
.card:nth-child(3) { border-top-color: var(--color-red); }
.card:nth-child(4) { border-top-color: var(--color-red-dark); }

.card h2 {
  font-size: 1.15rem;
  margin-bottom: 1rem;
}
.card h3 { margin-bottom: 0.5rem; }
.card p { font-size: 0.9375rem; color: var(--color-light); line-height: 1.7; }

.card-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
}

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

.card-row .label { color: var(--color-light); }
.card-row .value { font-weight: 500; color: var(--color-text); }

/* ===== Plan cards ===== */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.plan-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-solid);
  border-top: 3px solid var(--color-primary);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
  /* Flex column so the CTA anchors to the bottom; the grid stretches cards in a
     row to equal height, so the buttons line up across plans. */
  display: flex;
  flex-direction: column;
}
/* Push the action (button / actions row / checkout form) to the card bottom. */
.plan-card > :last-child { margin-top: auto; }
/* Keep CTA buttons their natural width + centered (not stretched full-width). */
.plan-card > .btn { align-self: center; }

.plan-card:nth-child(2) { border-top-color: var(--color-primary-alt); }
.plan-card:nth-child(3) { border-top-color: var(--color-red); }

/* .plan-card:hover {
  border-color: var(--color-primary-alt);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
} */

.plan-card.current {
  border-top-color: var(--color-accent-green);
  border-color: var(--color-accent-green);
}

.plan-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

.plan-card .price {
  font-family: var(--font-fira);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.plan-card .price-note {
  color: var(--color-light);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.plan-card ul {
  list-style: none;
  text-align: left;
  margin-bottom: 1.25rem;
}

.plan-card ul li {
  padding: 6px 0;
  font-size: 0.9rem;
  color: var(--color-light);
}

.plan-card ul li::before {
  content: "\2713  ";
  color: var(--color-accent-green);
  font-weight: 700;
}

.plan-badge {
  display: inline-block;
  background: var(--color-accent-green);
  color: var(--color-on-accent);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.plan-status {
  text-align: left;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 1rem;
}

.plan-status-row {
  font-size: 0.85rem;
  color: var(--color-light);
  padding: 2px 0;
}

.plan-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, opacity 0.15s, transform 0.1s;
}

.btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-accent);
}
.btn-primary:hover { background: var(--color-primary-alt); color: var(--color-on-accent); }

.btn-success {
  background: var(--color-accent-green);
  color: var(--color-on-accent);
}
.btn-success:hover { background: var(--color-accent-green); opacity: 0.9; color: var(--color-on-accent); }

.btn-danger {
  background: var(--color-red);
  color: var(--color-on-accent);
}
.btn-danger:hover { background: var(--color-red-dark); color: var(--color-on-accent); }

.btn-outline {
  background: transparent;
  border: 1px solid var(--color-border-solid);
  color: var(--color-text);
}
.btn-outline:hover { background: var(--color-off-white); border-color: var(--color-primary-alt); color: var(--color-text); }

.btn-sm {
  padding: 0.4rem 0.875rem;
  font-size: 0.8rem;
}

/* ===== Tables ===== */
.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  color: var(--color-light);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px;
  border-bottom: 1px solid var(--color-border-solid);
}

td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
  color: var(--color-text);
}

/* tr:hover td { background: var(--color-off-white); } */

.member-cell { display: flex; align-items: center; gap: 10px; }

.member-cell img { width: 32px; height: 32px; border-radius: 50%; }

/* ===== Forms ===== */
.form-group { margin-bottom: 1rem; }

.form-group label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-light);
  margin-bottom: 6px;
  font-weight: 500;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select {
  background: var(--color-white);
  border: 1px solid var(--color-border-solid);
  color: var(--color-text);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  width: 100%;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus, select:focus {
  border-color: var(--color-primary-alt);
  box-shadow: 0 0 0 3px rgba(81, 154, 205, 0.15);
}

.form-inline {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.form-inline .form-group { flex: 1; margin-bottom: 0; }
.form-inline .btn { flex-shrink: 0; }

/* ===== Badges ===== */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-active   { background: rgba(34, 197, 94, 0.12); color: #15803d; }
.badge-trialing { background: rgba(41, 88, 130, 0.10); color: var(--color-primary); }
.badge-free     { background: rgba(142, 145, 150, 0.15); color: var(--color-light); }
.badge-canceled { background: rgba(226, 36, 43, 0.10); color: var(--color-red-dark); }
.badge-admin    { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.badge-member   { background: rgba(142, 145, 150, 0.15); color: var(--color-light); }
.badge-warning  { background: rgba(245, 158, 11, 0.15); color: #b45309; }

/* ===== Toggle switch ===== */
.toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  vertical-align: middle;
}

.toggle input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--color-border-solid);
  border-radius: 22px;
  transition: background 0.2s;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
  background: #cbd5e1;
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
  box-shadow: var(--shadow-sm);
}

.toggle input:checked + .toggle-slider {
  background: var(--color-primary);
}

.toggle input:checked + .toggle-slider::before {
  transform: translateX(18px);
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--color-white);
  border: 1px solid var(--color-border-solid);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  font-size: 0.9rem;
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  z-index: 1000;
  animation: slideIn 0.3s ease;
}

.toast-success { border-left: 3px solid var(--color-accent-green); }
.toast-error   { border-left: 3px solid var(--color-red); }
.toast-info    { border-left: 3px solid var(--color-primary); }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ===== Modal ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(53, 55, 58, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.15s ease;
}

.modal {
  background: var(--color-white);
  border: 1px solid var(--color-border-solid);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  max-width: 420px;
  width: 90%;
  box-shadow: var(--shadow-lg);
}

.modal h3 {
  font-size: 1.15rem;
  margin-bottom: 12px;
}

.modal p {
  color: var(--color-light);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ===== Login page ===== */
.login-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
  background: var(--color-canvas);
  background-image:
    radial-gradient(900px 500px at 50% -10%, rgba(81, 154, 205, 0.08), transparent 60%),
    linear-gradient(to bottom, #090C13, #0B0F17);
}

.login-box {
  text-align: center;
  max-width: 420px;
  width: 100%;
  padding: 2.5rem 2rem;
  background: var(--color-white);
  border: 1px solid var(--color-border-solid);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.login-box img {
  width: 64px;
  height: auto;
  margin-bottom: 1rem;
}

.login-box h1 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.login-box p {
  color: var(--color-light);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.btn-github {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #161B22;
  color: var(--color-on-accent);
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-solid);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
  width: 100%;
  justify-content: center;
}
.btn-github:hover { opacity: 0.9; color: var(--color-on-accent); text-decoration: none; }
.btn-github svg { width: 20px; height: 20px; }

.btn-google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-white);
  color: var(--color-text);
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid var(--color-border-solid);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
  width: 100%;
  justify-content: center;
}
.btn-google:hover { background: var(--color-off-white); color: var(--color-text); text-decoration: none; }
.btn-google svg { width: 20px; height: 20px; }

.login-form { text-align: left; margin-bottom: 1.25rem; }

.login-form label {
  display: block;
  color: var(--color-light);
  font-size: 0.85rem;
  margin-bottom: 6px;
  font-weight: 500;
}

.login-form input[type="email"],
.login-form input[type="password"] {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-solid);
  background: var(--color-white);
  color: var(--color-text);
  font-size: 0.95rem;
  margin-bottom: 0.875rem;
}

.login-form input:focus {
  outline: none;
  border-color: var(--color-primary-alt);
  box-shadow: 0 0 0 3px rgba(81, 154, 205, 0.15);
}

.btn-primary-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-on-accent);
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
  width: 100%;
}
.btn-primary-login:hover { background: var(--color-primary-alt); }

.btn-magic-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--color-primary);
  padding: 10px 28px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid var(--color-primary);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
  width: 100%;
}
.btn-magic-link:hover { background: rgba(41, 88, 130, 0.06); }

.btn-passkey {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--color-light);
  padding: 10px 28px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid var(--color-border-solid);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  width: 100%;
}
.btn-passkey:hover {
  background: var(--color-off-white);
  border-color: var(--color-primary-alt);
  color: var(--color-text);
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 1.25rem 0;
  color: var(--color-light);
  font-size: 0.8rem;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border-solid);
}

.login-links {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--color-light);
}
.login-links a { color: var(--color-primary); text-decoration: none; }
.login-links a:hover { text-decoration: underline; }

.login-oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

/* ===== Loading / empty states ===== */
.loading {
  text-align: center;
  padding: 0 15px;
  color: var(--color-light);
}

/* Page-content wrapper. The layout drops every dashboard view into this
   wrapper so the dash-top + page body sit in the same horizontal slot the
   /dashboard view has historically used (matching the inset / centering
   that the .loading wrapper provided during the loading state). */
.page-content {
  text-align: center;
  padding: 0 15px;
  color: var(--color-light);
}

.empty {
  text-align: center;
  padding: 2rem;
  color: var(--color-light);
}

/* ===== Responsive ===== */
@media (max-width: 770px) {
  body.dashboard {
    padding-left: 0;
  }

  .nav {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .hamburger { display: flex; }

  .nav-brand { margin-bottom: 0; padding: 0; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    flex: 0 0 auto;
    margin-left: 0;
    padding: 12px 16px 16px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    z-index: 99;
  }

  .nav-links.open { display: flex; }

  .nav-links a,
  .nav-links .nav-signout {
    font-size: 1rem;
    padding: 10px 12px;
    text-align: left;
    width: 100%;
  }

  .nav-links .nav-signout {
    margin-top: 8px;
    font-size: 0.85rem;
  }

  .container { padding: 3rem 1.25rem; }
}

@media (max-width: 600px) {
  .container { padding: 2.5rem 1rem; }
  .form-inline { flex-direction: column; }
  .plan-grid { grid-template-columns: 1fr; }
  .card { padding: 1.5rem; }
}

/* ===== Rodauth form compatibility ===== */
.login-box .form-group {
  margin-bottom: 0.875rem;
  text-align: left;
}

.login-box .form-label {
  display: block;
  color: var(--color-light);
  font-size: 0.85rem;
  margin-bottom: 6px;
  font-weight: 500;
}

.login-box .form-control {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-solid);
  background: var(--color-white);
  color: var(--color-text);
  font-size: 0.95rem;
}

.login-box .form-control:focus {
  outline: none;
  border-color: var(--color-primary-alt);
  box-shadow: 0 0 0 3px rgba(81, 154, 205, 0.15);
}

.login-box .form-control-plaintext {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-off-white);
  color: var(--color-light);
  font-size: 0.95rem;
}

.login-box .form-control.is-invalid {
  border-color: var(--color-red);
}

.login-box .invalid-feedback {
  color: var(--color-red-dark);
  font-size: 0.8rem;
  margin-top: 4px;
  display: block;
}

.login-box .btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-on-accent);
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s;
}
.login-box .btn.btn-primary:hover { background: var(--color-primary-alt); }

.login-box .mb-3 { margin-bottom: 0.875rem; }

.login-box ul {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  text-align: left;
}
.login-box ul li { padding: 4px 0; }
.login-box ul li a { color: var(--color-primary); text-decoration: none; }
.login-box ul li a:hover { text-decoration: underline; }

.login-box h2 {
  font-size: 1.05rem;
  color: var(--color-light);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.d-none { display: none; }

/* ===================================================================
   Data-driven dashboard (index overview)
   =================================================================== */

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

/* ── Top bar ── */
.dash-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  min-height: 35px;
}
/* A title + optional subtitle stack on the left of the bar. Wrapped so the
   horizontal flex layout (title | meta | actions) survives the subtitle
   adding a second line. */
.dash-top .top-heading {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.dash-top .top-title {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  text-align: left;
}
.dash-top .top-subtitle {
  font-family: var(--font-noto);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-light);
  line-height: 1.4;
}
.dash-top .top-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-light);
  letter-spacing: 0.03em;
}
.dash-top .top-meta::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--color-border-solid);
  margin: 0 14px -1px 4px;
}
.dash-top .top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--color-white);
  border: 1px solid var(--color-border-solid);
  border-radius: var(--radius-sm);
  color: var(--color-light);
  font-size: 0.95rem;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, color 0.15s;
}
.icon-btn:hover { border-color: var(--color-primary); color: var(--color-text); }
.icon-btn .dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-red);
  border: 1.5px solid var(--color-white);
}
.btn-run {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-primary);
  color: var(--color-on-accent);
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.btn-run:hover { background: var(--color-primary-alt); transform: translateY(-1px); }
.btn-run:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
/* Glyph inside the Run audit button — sized larger and nudged up so the
   ⇒ arrow lines up with the uppercase label. */
.btn-run .icon { font-size: 16px; margin-top: -3.5px; }

/* ── Reusable dark panel (flat — no colored top accent or hover lift) ── */
.panel {
  background: var(--color-white);
  border: 1px solid var(--color-border-solid);
  margin-bottom: 16px;
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
}
.panel-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-light);
}
.panel-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-light);
  letter-spacing: 0.03em;
}
.panel-body { padding: 16px 18px; color: var(--color-light); }

/* ── KPI strip ── */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.kpi-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-solid);
  padding: 16px 18px 18px;
  position: relative;
}
.kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.kpi-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-light);
}
.kpi-delta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-light);
}
.kpi-delta.up { color: var(--color-accent-green); }
.kpi-delta.down { color: var(--color-red); }
.kpi-value {
  font-family: var(--font-mono);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.kpi-value.alert { color: var(--color-red); }
.kpi-sublabel {
  font-size: 0.78rem;
  color: var(--color-light);
  margin-top: 8px;
}

/* ── Activity chart ── */
.chart-legend {
  display: flex;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-light);
}
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i {
  width: 14px; height: 0;
  border-top: 2px solid currentColor;
  display: inline-block;
}
/* Per-series legend modifiers — each maps a label to the colour the series
   is drawn in on the chart. Add a new one alongside the dataset. */
.chart-legend .series-violations { color: var(--color-accent-amber); }
.chart { padding: 8px 6px 4px; position: relative; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid-line { stroke: var(--color-grid); stroke-width: 1; }
.chart .axis-label {
  fill: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
}

/* ── Dense data tables ── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-light);
  padding: 10px 18px;
  border-bottom: 1px solid var(--color-border-solid);
  white-space: nowrap;
}
.data-table td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-light);
  white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: none; }
/* .data-table tbody tr:hover td { background: var(--color-inset); } */
.data-table .col-name { color: var(--color-text); font-weight: 600; }
.data-table .num { text-align: right; font-family: var(--font-mono); }
.data-table .muted { color: var(--color-light); }
.data-table .branch { font-family: var(--font-mono); font-size: 0.78rem; }

/* Status text (mono, uppercase, color-coded) */
.st {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.st-clean  { color: var(--color-accent-green); }
.st-warn   { color: var(--color-accent-amber); }
.st-failed { color: var(--color-red); }
.st-yes    { color: var(--color-accent-green); }
.st-no     { color: var(--color-light); }
/* Low-severity findings sit beneath warn/failed and read as a soft muted
   chip, distinct from .st-no which is the "not present" sentinel. */
.st-low    { color: var(--color-light); }
.st-pending, .st-indexing { color: var(--color-primary-light); }

.table-scroll { overflow-x: auto; }

@media (max-width: 980px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .kpi-strip { grid-template-columns: 1fr; }
  .dash-top { flex-wrap: wrap; }
  .dash-top .top-actions { width: 100%; margin-left: 0; }
}

/* Feedback page tabs */
.feedback-intro {
  margin-bottom: 1.5rem;
  color: var(--color-light);
}

.feedback-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.feedback-tab {
  background: transparent;
  color: var(--color-light);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.feedback-tab:hover { color: var(--color-text); }
.feedback-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ── Convention management (shared across /dashboard and /dashboard/repositories) ── */
.convention-card { background: var(--color-white); border: 1px solid var(--color-border-solid); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.convention-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.convention-card-header h2 { margin: 0; font-size: 1.1rem; }
.convention-card-actions { display: flex; gap: 8px; }
.convention-card-help { font-family: var(--font-noto); font-size: 0.82rem; line-height: 1.5; color: var(--color-text-secondary); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); text-align: left; }
.convention-card-help strong { color: var(--color-text); font-weight: 600; }
.btn-convention { padding: 5px 12px; font-size: 0.85rem; border: 1px solid var(--color-border-solid); background: var(--color-white); color: var(--color-text); cursor: pointer; border-radius: var(--radius-sm); }
.btn-convention:hover { border-color: var(--color-primary); }
.btn-convention.btn-save { background: var(--color-primary); color: var(--color-on-accent); border-color: var(--color-primary); }
.btn-convention.btn-save:disabled { opacity: 0.5; cursor: not-allowed; }
.convention-empty { color: var(--color-light); font-size: 0.9rem; padding: 1rem; text-align: center; }
.convention-list { display: flex; flex-direction: column; gap: 6px; }
.convention-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--color-white); border: 1px solid var(--color-border-solid); border-radius: var(--radius-sm); }
.convention-row-main { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: start; }
.convention-text { min-width: 0; }
.convention-row.dismissed .convention-name,
.convention-row.dismissed .convention-description,
.convention-row.dismissed .convention-meta { text-decoration: line-through; color: var(--color-light); }
.convention-coverage-toggle { font: inherit; font-size: 0.72rem; color: var(--color-text-secondary); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; }
.convention-coverage-toggle:hover { color: var(--color-text); }
.convention-segments { display: flex; flex-direction: column; gap: 3px; padding: 6px 10px; border-left: 2px solid var(--color-red); background: var(--color-bg-subtle, #fafafa); border-radius: var(--radius-sm); }
.convention-segment-item { display: flex; gap: 10px; align-items: baseline; font-size: 0.74rem; color: var(--color-text-secondary); }
.convention-segment-item .seg-name { flex: 1; min-width: 0; }
.convention-segment-item .seg-type { font-family: var(--font-mono); font-size: 0.68rem; color: var(--color-text-muted); }
.convention-segment-item .seg-confidence { font-variant-numeric: tabular-nums; color: var(--color-text-muted); cursor: help; white-space: nowrap; }
.info-icon { font-size: 0.7em; opacity: 0.55; }
.convention-type-badge { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; color: var(--color-on-accent); text-transform: lowercase; padding: 2px 6px; border-radius: 3px; align-self: flex-start; background: var(--color-red);}
.convention-body { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.convention-name { font-weight: 600; color: var(--color-text); font-size: 0.9rem; }
.convention-description { font-size: 0.8rem; color: var(--color-light); margin-top: 2px; line-height: 1.4; text-align: left; }
.convention-meta { font-size: 0.72rem; color: var(--color-light); margin-top: 4px; }
.convention-score { font-family: var(--font-fira); font-weight: 700; font-size: 0.9rem; align-self: center; min-width: 36px; text-align: right; color: var(--color-light); }
.convention-score.positive { color: var(--color-accent-green); }
.convention-score.negative { color: var(--color-red); }
.convention-actions { display: flex; gap: 4px; align-self: center; flex-wrap: wrap; justify-content: flex-end; }
.convention-actions .action { padding: 4px 10px; font-size: 0.8rem; border: 1px solid var(--color-border-solid); background: var(--color-white); cursor: pointer; border-radius: 3px; white-space: nowrap; font-weight: 500; }
.convention-actions .action:hover { border-color: var(--color-primary); }
.convention-actions .vote-up { color: var(--color-accent-green); }
.convention-actions .vote-down { color: var(--color-red); }
.convention-actions .dismiss { color: var(--color-light); }
.convention-actions .revert { color: var(--color-primary); }
/* Active state: the user has staged this vote this session. Filled background so
   the staged choice is unambiguous; clicking again toggles back off. */
.convention-actions .vote-up.active { background: var(--color-accent-green); color: var(--color-on-accent); border-color: var(--color-accent-green); }
.convention-actions .vote-down.active { background: var(--color-red); color: var(--color-on-accent); border-color: var(--color-red); }
.convention-score-placeholder { min-width: 36px; }

/* ===================================================================
   Dashboard index — interactive bits (KPI popover, expandable audit
   rows, clickable repo rows, chart point hit-areas)
   =================================================================== */

/* ── Violations KPI popover ── */
.kpi-card.has-tip { cursor: pointer; }
.kpi-card.has-tip::after {
  content: "›";
  position: absolute;
  top: 12px; right: 14px;
  font-size: 1rem;
  color: var(--color-light);
  transform: rotate(90deg);
  transition: transform 0.15s, color 0.15s;
}
.kpi-card.has-tip:hover::after,
.kpi-card.has-tip.open::after { color: var(--color-primary-light); }
.kpi-card.has-tip.open::after { transform: rotate(-90deg); }

.kpi-tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-solid);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: none;
  z-index: 30;
  box-shadow: var(--shadow-md);
  max-height: 260px;
  overflow-y: auto;
}
.kpi-card.has-tip:hover .kpi-tip,
.kpi-card.has-tip.open .kpi-tip { display: block; }

.kpi-tip-title {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-light);
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}
.kpi-tip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s;
}
.kpi-tip-row:hover { background: var(--color-inset); }
.kpi-tip-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kpi-tip-meta {
  display: flex;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  flex-shrink: 0;
}
.kpi-tip-num {
  font-family: var(--font-mono);
  color: var(--color-red);
  font-weight: 600;
}

/* ── Clickable rows (repos table, audit-log summary rows) ── */
.row-clickable { cursor: pointer; }

.row-flash td {
  background: rgba(81, 154, 205, 0.18) !important;
  transition: background 1.2s ease;
}

/* ── Audit-log expandable rows ── */
.caret-cell {
  width: 22px;
  padding-right: 0 !important;
  color: var(--color-light);
}
.caret {
  display: inline-block;
  width: 12px;
  color: var(--color-light);
  font-size: 0.85rem;
}

.audit-detail-row { display: none; }
.audit-detail-row.open { display: table-row; }
.audit-detail-row td {
  background: var(--color-inset);
  padding: 14px 22px 18px 46px;
  border-bottom: 1px solid var(--color-border);
}
.audit-detail-row:hover td { background: var(--color-inset); }

.detail-grid { display: grid; gap: 14px; }
.detail-head {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-light);
  margin-bottom: 6px;
}
.detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.detail-list li {
  padding: 5px 0;
  font-size: 0.85rem;
  color: var(--color-text);
  line-height: 1.5;
}
.detail-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 1px 6px;
  background: var(--color-inset);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-light);
}
.detail-empty {
  font-size: 0.85rem;
  color: var(--color-light);
  padding: 4px 0;
}
/* Audit-failed message in an expanded log row sits in the same slot as
   the empty/clean state but reads as an error. */
.detail-empty.error { color: var(--color-red); }

/* ── Audit log controls (status + repo filter, sortable headers) ── */

.audit-log-head {
  flex-wrap: wrap;
  row-gap: 10px;
}
.audit-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.audit-filter {
  width: auto;
  min-width: 140px;
  padding: 6px 28px 6px 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-solid);
  border-radius: var(--radius-sm);
  /* Custom caret — the native one is invisible on dark backgrounds in Safari. */
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
                    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.audit-filter:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(81, 154, 205, 0.15);
}

.data-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.12s, font-weight 0.12s;
}
.data-table th.sortable:hover { color: var(--color-text); }
.data-table th.sortable:hover .sort-ind:not(.active) {
  color: var(--color-light);
}
/* The header for the active sort key reads bolder + brighter so it's
   obvious at a glance which column is driving the order. */
.data-table th.sortable:has(.sort-ind.active) {
  color: var(--color-text);
  font-weight: 700;
}
.sort-ind {
  display: inline-block;
  width: 10px;
  font-size: 0.7rem;
  color: var(--color-light);
  margin-left: 4px;
  transition: color 0.12s;
}
.sort-ind.active {
  color: var(--color-primary-light);
  font-size: 0.6rem;
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  color: var(--color-primary-light);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.link-btn:hover { color: var(--color-primary); }

/* When the head wraps onto multiple rows, the "Next scheduled" meta should
   sit on its own line at the right edge for readability. */
@media (max-width: 720px) {
  .audit-log-head .panel-meta { width: 100%; text-align: left; }
  .audit-controls { margin-left: 0; flex-wrap: wrap; }
}

/* ── Chart hit-areas (transparent circles wrapping each point) ── */
.chart-hit { cursor: pointer; }
.chart-hit:hover { fill: rgba(245, 158, 11, 0.08); }

/* ── Chart hover modal ──
   `position: fixed` + attached to <body> so it renders above any ancestor
   (the .panel uses overflow:hidden which would otherwise clip the tip). */
.chart-tip {
  position: fixed;
  transform: translate(-50%, calc(-100% - 14px));
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-solid);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  min-width: 220px;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  z-index: 1000;
  font-size: 0.8rem;
  color: var(--color-text);
}
.chart-tip::after {
  content: "";
  position: absolute;
  bottom: -6px;
  /* --arrow-x is set by positionChartTip() so the arrow tracks the data
     point even when the tip is clamped against a viewport edge. */
  left: var(--arrow-x, 50%);
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-surface-2);
  filter: drop-shadow(0 1px 0 var(--color-border-solid));
}

/* Flipped variant: the chart sits near the top of the page, so when the
   point is high enough that there's no room above, render the tip below
   the point with the arrow pointing up. */
.chart-tip.below { transform: translate(-50%, 14px); }
.chart-tip.below::after {
  bottom: auto;
  top: -6px;
  border-top: none;
  border-bottom: 6px solid var(--color-surface-2);
  filter: drop-shadow(0 -1px 0 var(--color-border-solid));
}
.chart-tip-head {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text);
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}
.chart-tip-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 0;
}
.chart-tip-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-light);
}
.chart-tip-val {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text);
  text-align: right;
}
.chart-tip-val.alert { color: var(--color-red); font-weight: 600; }
.chart-tip-sev {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
}

/* ===================================================================
   Repositories page — list, detail, language bar, connections, commits
   (extracted from former inline <style> block in repositories.html.erb)
   =================================================================== */

/* ── Repo list grid ── */
.repo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.repo-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-solid);
  border-top: 3px solid var(--color-primary);
  padding: 1.5rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.repo-card:nth-child(2) { border-top-color: var(--color-primary-alt); }
.repo-card:nth-child(3) { border-top-color: var(--color-red); }
.repo-card:nth-child(4) { border-top-color: var(--color-red-dark); }
.repo-card:hover {
  border-color: var(--color-primary-alt);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.repo-card h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
}
.repo-meta {
  display: flex;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--color-light);
  margin-bottom: 12px;
}
.repo-meta span { display: flex; align-items: center; gap: 4px; }

/* ── Status dot (used on repo cards + headers) ── */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot.indexed  { background: var(--color-accent-green); }
.status-dot.indexing { background: var(--color-primary-alt); animation: status-dot-pulse 1.5s infinite; }
.status-dot.pending  { background: var(--color-accent-amber); }
.status-dot.failed   { background: var(--color-red); }
@keyframes status-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Repo detail header + stat cards ── */
.detail-back {
  font-size: 1rem;
  color: var(--color-primary-light);
  cursor: pointer;
  margin-bottom: 16px;
  display: flex;
  width: fit-content;
}
.detail-back:hover { color: var(--color-primary); }
.detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.5rem;
}
.detail-header h1 { font-size: 1.5rem; margin: 0; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-solid);
  border-top: 3px solid var(--color-primary);
  padding: 1rem;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
.stat-card:nth-child(2) { border-top-color: var(--color-primary-alt); }
.stat-card:nth-child(3) { border-top-color: var(--color-red); }
.stat-card:nth-child(4) { border-top-color: var(--color-red-dark); }
.stat-value {
  font-family: var(--font-fira);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
}
.stat-label {
  font-size: 0.8rem;
  color: var(--color-light);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ── Domain cards (used in the desktop fallback list + mobile view) ── */
.domain-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.domain-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-solid);
  border-top: 3px solid var(--color-primary-alt);
  padding: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
.domain-card:hover { box-shadow: var(--shadow-sm); }
.domain-card h4 { font-size: 0.95rem; margin-bottom: 4px; color: var(--color-text); }
.domain-card p { font-size: 0.8rem; color: var(--color-light); margin-bottom: 8px; line-height: 1.4; }
.domain-stats { display: flex; gap: 12px; font-size: 0.8rem; color: var(--color-light); }
.domain-stats span { display: flex; align-items: center; gap: 3px; }

/* ── Language bar (stacked, colored segments) ── */
.lang-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-border-solid);
  margin-bottom: 8px;
}
.lang-bar-segment { height: 100%; transition: width 0.3s; }
.lang-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.8rem; color: var(--color-light); }
.lang-legend-item { display: flex; align-items: center; gap: 4px; }
.lang-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ── Connection rows ── */
.connection-list { display: flex; flex-direction: column; gap: 6px; }
.connection-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  padding: 8px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-border-solid);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.connection-weight { min-width: 40px; text-align: right; font-weight: 600; color: var(--color-primary); cursor: help; white-space: nowrap; }
.connection-arrow  { color: var(--color-light); }

/* ── Commit list ── */
.commit-list { display: flex; flex-direction: column; gap: 4px; }
.commit-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.85rem;
  padding: 8px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-border-solid);
  border-radius: var(--radius-sm);
}
.commit-sha   { font-family: var(--font-mono); color: var(--color-primary); flex-shrink: 0; }
.commit-msg   { color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.commit-date  { color: var(--color-light); font-size: 0.8rem; flex-shrink: 0; }
.commit-delta { color: var(--color-light); font-size: 0.8rem; flex-shrink: 0; }
.commit-delta .add { color: var(--color-accent-green); }
.commit-delta .del { color: var(--color-red-dark); }

.index-info { font-size: 0.85rem; color: var(--color-light); margin-top: 8px; }

/* ── Compact convention-drift card (on repo detail) ── */
.drift-mini {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--color-white);
  border: 1px solid var(--color-border-solid);
  border-left: 4px solid var(--color-border-solid);
  padding: 1rem 1.25rem;
}
.drift-mini-good { border-left-color: var(--color-accent-green); }
.drift-mini-warn { border-left-color: var(--color-accent-amber); }
.drift-mini-bad  { border-left-color: var(--color-red); }
.drift-mini-none { border-left-color: var(--color-border-solid); }
.drift-mini-score {
  font-family: var(--font-fira);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}
.drift-mini-good .drift-mini-score { color: var(--color-accent-green); }
.drift-mini-warn .drift-mini-score { color: var(--color-accent-amber); }
.drift-mini-bad  .drift-mini-score { color: var(--color-red); }
.drift-mini-none .drift-mini-score { color: var(--color-light); font-size: 1.2rem; }
.drift-mini-body { flex: 1; }
.drift-mini-sub  { font-size: 0.9rem; color: var(--color-text); margin-bottom: 8px; }
.drift-spark { display: flex; align-items: flex-end; gap: 3px; height: 28px; margin-bottom: 10px; }
.drift-spark-bar { flex: 1; background: var(--color-primary-alt); border-radius: 1px; min-height: 2px; }
.drift-mini-top { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.drift-mini-chip {
  font-size: 0.78rem;
  color: var(--color-light);
  background: var(--color-inset);
  padding: 3px 8px;
  border-radius: 10px;
}
.drift-mini-chip .drift-delta { font-family: var(--font-fira); font-weight: 700; }
.drift-delta.up   { color: var(--color-red); }
.drift-delta.down { color: var(--color-accent-green); }
.drift-mini-link  { font-size: 0.85rem; color: var(--color-primary); font-weight: 600; text-decoration: none; }
.drift-mini-link:hover { text-decoration: underline; }

/* ===================================================================
   Domain Network visualization (on repo detail)
   Custom HTML+SVG layout: greyed-out stacked boxes on the left;
   selecting one slides it to the right (red), animates white connection
   lines out to its connected domains, then colors those by weight
   (turquoise / yellow / green). See initDomainNetwork in repositories.html.erb.
   =================================================================== */
.domain-network {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  margin-bottom: 1.5rem;
}
.domain-network-graph {
  background: var(--color-canvas);
  border: 1px solid var(--color-border-solid);
  border-radius: var(--radius-md);
  height: 560px;
  position: relative;
  overflow: hidden;
}
.domain-network-panel {
  background: var(--color-white);
  border: 1px solid var(--color-border-solid);
  border-radius: var(--radius-md);
  padding: 16px;
  overflow-y: auto;
  /* Match the graph area's height so the panel always fills the domain view,
     even when it only shows the "click a domain" empty state. */
  height: 560px;
}
.domain-network-fallback { display: none; }

.domain-stack { position: absolute; inset: 0; }
.domain-svg   { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.domain-box {
  position: absolute;
  height: 48px;
  padding: 4px 16px;
  background: #a3a8b8;
  color: #1e293b;
  font-family: var(--font-noto);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 500;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
  overflow: hidden;
  user-select: none;
  box-sizing: border-box;
  transition:
    left 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    top  0.5s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.35s ease,
    color 0.35s ease;
}
/* Clamp long domain names to 2 lines with an ellipsis instead of wrapping past
   the fixed 48px box height (full name is on the box's title attribute). */
.domain-box-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.domain-box:hover:not(.selected) { background: #b6bbc9; }
/* Resize-time position updates snap rather than animate, otherwise every
   window-resize tick triggers a 500ms slide. Re-enabled the next frame. */
.domain-box.no-transition { transition: none !important; }
.domain-box.selected      { background: #ff6b5c; color: #ffffff; }
.domain-box.weight-light  { background: #5ce1e6; color: #0b1118; }
.domain-box.weight-medium { background: #ffde59; color: #0b1118; }
.domain-box.weight-heavy  { background: #7ed957; color: #0b1118; }

.domain-line {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
}
.domain-line-dot {
  fill: var(--color-canvas);
  stroke: #ffffff;
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.domain-line-dot.shown { opacity: 1; }

.domain-panel-header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.domain-panel-header h3 { font-size: 1.05rem; margin: 0; color: var(--color-text); }
.domain-panel-slug { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-light); }
.domain-panel-description { font-size: 0.85rem; color: var(--color-light); line-height: 1.5; margin-bottom: 12px; }
.domain-panel-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-solid);
}
.domain-panel-stat-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.85rem; }
.domain-panel-stat-row .stat-label {
  color: var(--color-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
  font-weight: 600;
  flex-shrink: 0;
}
.domain-panel-stat-row .stat-value { color: var(--color-text); font-family: var(--font-fira); text-align: right; word-break: break-word; }
.domain-panel-section h4 { font-size: 0.9rem; margin: 0 0 8px; color: var(--color-text); }
.domain-panel-section h4 .muted { color: var(--color-light); font-weight: 400; font-size: 0.8rem; }

.domain-panel-connections { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.domain-panel-connections li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: var(--color-inset);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}
.domain-panel-connections .connection-dot { width: 10px; height: 10px; border-radius: 50%; }
.domain-panel-connections .connection-name { color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.domain-panel-connections .connection-weight { font-weight: 700; font-family: var(--font-fira); }
.domain-panel-connections .connection-meta,
.domain-panel-connections .connection-reason { grid-column: 2 / 4; font-size: 0.72rem; color: var(--color-light); }
.domain-panel-connections .connection-reason { font-style: italic; }

.domain-panel-empty { color: var(--color-light); font-size: 0.85rem; padding: 24px 12px; text-align: center; }

/* Medium widths: collapse the side panel under the graph so the graph
   gets the full container width to render in. Box widths are scaled in
   JS (effectiveMaxW) so the layout always fits. */
@media (max-width: 1199px) {
  .domain-network { grid-template-columns: 1fr; }
  .domain-network-panel { max-height: 420px; }
}
/* Mobile: graph is too cramped to be useful — replace with a fallback
   list that surfaces the same information (domains + connections). */
@media (max-width: 599px) {
  .domain-network { display: none; }
  .domain-network-fallback { display: block; }
}
.domain-network-fallback .domain-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-solid);
  border-top: 3px solid var(--color-primary-alt);
  padding: 14px 16px;
  border-radius: var(--radius-md);
}
.domain-network-fallback .mobile-connections {
  list-style: none;
  padding: 10px 0 0;
  margin: 10px 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.domain-network-fallback .mobile-conn {
  font-family: var(--font-noto);
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--color-inset);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.domain-network-fallback .mobile-conn.weight-light  { background: rgba( 92, 225, 230, 0.18); color: #5ce1e6; }
.domain-network-fallback .mobile-conn.weight-medium { background: rgba(255, 222,  89, 0.16); color: #ffde59; }
.domain-network-fallback .mobile-conn.weight-heavy  { background: rgba(126, 217,  87, 0.16); color: #7ed957; }
.domain-network-fallback .mobile-conn .pct { font-weight: 700; opacity: 0.85; cursor: help; }

/* ===================================================================
   Conventions page — drift index, drift list, affirmed-but-drifting
   (extracted from former inline <style> block in conventions.html.erb)
   =================================================================== */

.drift-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; }
.drift-scope-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-light);
}
#drift-scope {
  padding: 8px 12px;
  border: 1px solid var(--color-border-solid);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-size: 0.9rem;
  color: var(--color-text);
  min-width: 240px;
}

.drift-index-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-solid);
  border-top: 4px solid var(--color-border-solid);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 24px;
}
.drift-index-card.good { border-top-color: var(--color-accent-green); }
.drift-index-card.warn { border-top-color: var(--color-accent-amber); }
.drift-index-card.bad  { border-top-color: var(--color-red); }
.drift-index-card.none { border-top-color: var(--color-border-solid); }
.drift-score-num {
  font-family: var(--font-fira);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}
.drift-index-card.good .drift-score-num { color: var(--color-accent-green); }
.drift-index-card.warn .drift-score-num { color: var(--color-accent-amber); }
.drift-index-card.bad  .drift-score-num { color: var(--color-red); }
.drift-index-card.none .drift-score-num { color: var(--color-light); font-size: 1.4rem; }
.drift-index-meta .drift-index-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-light);
}
.drift-index-meta .drift-index-sub { font-size: 1rem; color: var(--color-text); margin-top: 4px; }

.drift-chart-wrap {
  background: var(--color-white);
  border: 1px solid var(--color-border-solid);
  padding: 1rem;
  margin-bottom: 1.5rem;
  height: 280px;
}

.drift-list { display: flex; flex-direction: column; gap: 8px; }
.drift-row  { background: var(--color-white); border: 1px solid var(--color-border-solid); padding: 12px 16px; }
.drift-row-head { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.drift-row-seg  { font-weight: 600; color: var(--color-text); flex: 1; text-align: left; }
.drift-row-type {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-light);
  background: var(--color-inset);
  padding: 2px 8px;
  border-radius: 10px;
}
.drift-row-count { font-size: 0.85rem; color: var(--color-light); }
.drift-delta { font-weight: 700; font-family: var(--font-fira); font-size: 0.9rem; }
.drift-occ { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--color-border-solid); display: none; }
.drift-occ.open { display: block; }
.drift-occ-item { font-size: 0.82rem; color: var(--color-light); padding: 4px 0; }
.drift-occ-item .sev {
  font-size: 0.68rem;
  text-transform: uppercase;
  font-weight: 700;
  margin-right: 6px;
}
.drift-occ-item .sev.error   { color: var(--color-red); }
.drift-occ-item .sev.warning { color: var(--color-accent-amber); }
.drift-occ-item .sev.info    { color: var(--color-primary-alt); }

.affirmed-card {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-left: 4px solid var(--color-accent-amber);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.affirmed-card h3 { font-size: 1rem; margin: 0 0 4px; color: var(--color-accent-amber); }
.affirmed-card .affirmed-lede { font-size: 0.85rem; color: var(--color-accent-amber); margin-bottom: 12px; }
.affirmed-item { padding: 8px 0; border-top: 1px solid rgba(245, 158, 11, 0.22); }
.affirmed-item:first-of-type { border-top: none; }
.affirmed-item .name  { font-weight: 600; color: var(--color-text); }
.affirmed-item .desc  { font-size: 0.83rem; color: var(--color-light); margin-top: 2px; }
.affirmed-item .votes { font-size: 0.78rem; color: var(--color-accent-amber); font-weight: 600; }

.drift-footer {
  margin: 2.5rem auto 0px auto;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-solid);
  font-size: 0.85rem;
  color: var(--color-light);
  font-style: italic;
  max-width: 640px;
}

/* ===================================================================
   Cross-view utility + component classes (replaces repeated inline
   style="..." attributes across account, repositories, login, plans,
   team views). Add new ones here rather than re-introducing inline.
   =================================================================== */

/* Bare color utilities — match the token names so the intent is obvious. */
.text-muted      { color: var(--color-light); }
.text-secondary  { color: var(--color-light); }

/* Small muted helper text appended inline next to content (counts, dates). */
.text-meta-sm { font-size: 0.8rem; color: var(--color-light); }

/* Branch-context line sits above the cutoff banner / next block — give it room below. */
.branch-context { margin-bottom: 12px; }

/* Hint paragraph between a label and its input/control. */
.help-text { font-size: 0.85rem; color: var(--color-light); margin-bottom: 12px; }

/* Inline primary action link sized to sit next to body text. */
.action-link    { font-size: 0.85rem; color: var(--color-primary); }
.action-link-sm { font-size: 0.8rem;  color: var(--color-primary); }

/* Card row variant that vertically centers its items (e.g. notification
   prefs row with a label stack + toggle). */
.card-row.aligned { align-items: center; }

/* Footer line below the recent-audits list on the Account page. */
.next-audit-footer { padding: 8px 12px; font-size: 0.8rem; color: var(--color-light); }

/* Slim spacing utilities used by inline action links and labels. */
.ml-sm   { margin-left: 8px; }
.ml-auto { margin-left: auto; }
.mt-sm   { margin-top: 12px; }
.mt-md   { margin-top: 16px; }
.mt-auto { margin-top: auto; }
.mb-2    { margin: 0 0 8px; }
.w-full  { width: 100%; }
.center  { text-align: center; }

/* Bare color utilities for severity-ish text bits. */
.text-warning { color: var(--color-accent-amber); }
.text-danger  { color: var(--color-red); }

/* Form label commonly used for inline label/input pairs in the dashboard. */
.form-label-block { display: block; font-weight: 600; margin-bottom: 4px; }

/* Small bordered input (used for the cutoff-date picker etc.). */
.input-sm { padding: 6px 8px; border: 1px solid var(--color-border-solid); border-radius: 4px; }

/* Bigger status-dot variant for the detail header. */
.status-dot.status-dot-lg { width: 12px; height: 12px; }

/* Muted-colored help text (the help-text variant uses text-secondary). */
.help-text-muted { font-size: 0.85rem; color: var(--color-light); margin-bottom: 8px; }

/* Warning list used inside destructive-action modals (remove repo, etc.). */
.modal-warning-list {
  color: var(--color-light);
  font-size: 0.9rem;
  margin: 12px 0 16px 20px;
  line-height: 1.8;
}

/* A .card laid out as a horizontal flex row (used for the seats summary). */
.card-flex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* Small inline select used in row-level edit controls (e.g. role dropdown). */
.select-sm { width: auto; padding: 4px 8px; font-size: 0.8rem; }

/* Account-page section divider — separates auth, billing, notification groups. */
.section-divider {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-solid);
}

/* Banner row used on login + a few page-level result messages. */
.banner { margin-bottom: 20px; font-size: 0.9rem; }
.banner-success { color: var(--color-accent-green); }
.banner-warning { color: var(--color-accent-amber); }
.banner-error   { color: var(--color-red); }

/* Login page — the magic-link form is toggled visible via JS. */
.magic-link-form { margin-top: 16px; }

/* Index-cutoff indicators on repo cards / detail page. */
.cutoff-chip {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 8px;
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-accent-amber);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}
.cutoff-warning {
  margin: 16px 0;
  padding: 14px 18px;
  background: rgba(245, 158, 11, 0.1);
  border: 2px solid #f59e0b;
  border-radius: 6px;
  color: var(--color-accent-amber);
}
.cutoff-warning-inner { display: flex; align-items: flex-start; gap: 10px; }
.cutoff-warning-icon  { font-size: 1.3rem; line-height: 1; }
.cutoff-warning-body  { flex: 1; }
.cutoff-warning-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.cutoff-warning-desc  { font-size: 0.9rem; line-height: 1.5; }
.cutoff-warning-note  { font-size: 0.85rem; margin-top: 8px; color: var(--color-accent-amber); }

/* Rebuild-from-cutoff destructive action box. */
.danger-box {
  margin-top: 16px;
  padding: 12px;
  background: rgba(255, 74, 55, 0.08);
  border: 1px solid rgba(255, 74, 55, 0.3);
  border-radius: 4px;
}
.danger-box .danger-title { font-weight: 600; margin-bottom: 4px; }
.danger-box .danger-note  { font-size: 0.85rem; color: var(--color-red); margin-bottom: 8px; }

/* Org-selector label + dropdown on the repositories list view. */
.org-selector { margin-bottom: 16px; }
.org-selector-label {
  font-size: 0.85rem;
  color: var(--color-light);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 8px;
}
.org-selector-select {
  font-size: 0.95rem;
  padding: 6px 10px;
  border: 1px solid var(--color-border-solid);
  border-radius: 4px;
  background: var(--color-white);
  color: var(--color-text);
  min-width: 240px;
}

/* Pagination controls under the repositories list. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  font-size: 0.9rem;
  color: var(--color-light);
}

/* ── Light theme for admin authoring pages (blog CMS) ──────────────────────
   Set via `content_for(:body_class) { "admin-light" }`. The dark fixed nav
   stays; only the content area becomes a white "sheet" for comfortable editing
   (the EasyMDE markdown editor's default light theme then renders correctly). */
body.dashboard.admin-light {
  background: #ffffff;
  background-image: none;
}
body.admin-light .container,
body.admin-light .page-content {
  --color-canvas: #ffffff;
  --color-white: #ffffff;
  --color-off-white: #ffffff;
  --color-surface-2: #f4f4f5;
  --color-text: #18181b;
  --color-text-secondary: #52525b;
  --color-text-muted: #71717a;
  --color-light: #3f3f46;
  --color-border-solid: #e4e4e7;
  --color-inset: #f4f4f5;
  background: #ffffff;
  color: #18181b;
}
body.admin-light .page-content { text-align: left; }
body.admin-light .page-content a { color: var(--color-primary); }