:root {
  /* Brand palette per repos/assets/guidelines/brand-guidelines.md */
  --color-pennon-red:     #DC2626; /* Pennon Red — primary brand */
  --color-crimson-deep:   #991B1B; /* Pressed / hover state */
  --color-ember:          #FF3B47; /* Arc on dark surfaces */

  --color-ink:            #0A0A0A; /* Center dot, headings, dark surface */
  --color-carbon:         #262626; /* Body text on light */
  --color-mist:           #737373; /* Secondary text, hairline borders */
  --color-surface-alt:    #F5F5F5; /* Subtle background, table rows */
  --color-paper:          #FFFFFF; /* Light surface base */

  --color-live:           #16A34A;
  --color-signal:         #2563EB;
  --color-caution:        #F59E0B;
  --color-inactive:       #737373;

  /* Aliases retained for existing component CSS — point them at the new tokens. */
  --color-primary:        var(--color-pennon-red);
  --color-primary-dark:   var(--color-crimson-deep);
  --color-primary-darker: var(--color-crimson-deep);
  --color-primary-soft:   var(--color-ember);

  --color-slate-100:      var(--color-surface-alt);
  --color-slate-300:      #D4D4D4;
  --color-slate-400:      #A3A3A3;
  --color-slate-500:      var(--color-mist);
  --color-slate-600:      #525252;
  --color-slate-700:      #404040;
  --color-slate-800:      #171717;
  --color-slate-900:      var(--color-ink);

  --color-bg:         var(--color-surface-alt);
  --color-surface:    var(--color-paper);
  --color-text:       var(--color-carbon);
  --color-text-muted: var(--color-mist);
  --color-border:     #E5E5E5;

  /* Radius scale (6 / 10 / 16 / 24) — cards default to 16, pills 999. */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --radius: var(--radius-sm);

  /* Two-step elevation. */
  --shadow-flat: none;
  --shadow-elevated: 0 8px 24px rgba(10, 10, 10, 0.06);

  --font-display: 'Geist', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color-scheme: light;
}

[x-cloak] {
  display: none !important;
}

/* Dark theme palette — mirrors the brand light palette by inverting surface/ink
   while keeping the Pennon Red accent. Activated by the inline head script in
   base.html when the user's cookie or OS setting resolves to "dark". */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-paper:        #0A0A0A;
  --color-surface-alt:  #171717;
  --color-ink:          #F5F5F5;
  --color-carbon:       #E5E5E5;
  --color-mist:         #A3A3A3;

  --color-bg:         #0A0A0A;
  --color-surface:    #171717;
  --color-text:       #E5E5E5;
  --color-text-muted: #A3A3A3;
  --color-border:     #262626;

  --color-slate-100:  #171717;
  --color-slate-300:  #404040;
  --color-slate-400:  #525252;
  --color-slate-500:  #737373;
  --color-slate-600:  #A3A3A3;
  --color-slate-700:  #D4D4D4;
  --color-slate-800:  #F5F5F5;
  --color-slate-900:  #FFFFFF;

  /* Slightly hotter primary on dark surfaces, per brand guideline (Ember). */
  --color-primary:        var(--color-ember);
  --color-primary-soft:   var(--color-pennon-red);

  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.55);
}

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

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

code, kbd, samp, pre, .mono { font-family: var(--font-mono); }

/* Eyebrow / small caps mono labels per brand guidelines. */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-mist);
}

/* ─── App shell with top header ─────────────────────────────────────── */

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 20;
  zoom: 1.2;
}
.topbar__inner {
  width: 100%;
  padding: 0 2rem;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.topbar__logo { display: inline-flex; align-items: center; }
.topbar__logo img { display: block; height: 36px; width: auto; }
.topbar__logo .brand-logo--dark { display: none; }
:root[data-theme="dark"] .topbar__logo .brand-logo--light { display: none; }
:root[data-theme="dark"] .topbar__logo .brand-logo--dark { display: block; }

.topbar__nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.topbar__link {
  color: var(--color-text);
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
}
.topbar__link:hover { background: var(--color-bg); }
.topbar__link.is-active { background: var(--color-bg); color: var(--color-primary); }
.topbar__link.is-disabled { color: var(--color-slate-400); cursor: not-allowed; }

.topbar__spacer { flex: 1; }

.topbar__user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.topbar__hello { padding: 0 0.25rem; }

/* ─── Topbar right-side icon actions + user menu ─────────────────────── */
.topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.topbar__icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  color: var(--color-carbon);
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.topbar__icon-link svg { display: block; }
.topbar__icon-link::-webkit-details-marker { display: none; }
.topbar__icon-link--button {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  padding: 0;
  margin: 0;
}
.topbar__icon-link:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-mist);
  color: var(--color-ink);
}
.topbar__icon-link.is-active {
  background: var(--color-surface-alt);
  border-color: var(--color-mist);
  color: var(--color-pennon-red);
}
.topbar__icon-link.is-disabled {
  color: var(--color-slate-400);
  background: var(--color-surface-alt);
  cursor: not-allowed;
}

.user-menu { position: relative; }
.user-menu__trigger { padding: 0; }
.user-menu__avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-pennon-red);
  color: var(--color-paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.user-menu[open] .user-menu__avatar {
  box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-pennon-red);
}
.user-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 240px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.35rem;
  box-shadow: var(--shadow-elevated);
  display: flex;
  flex-direction: column;
  z-index: 30;
}
.user-menu__sep,
.user-menu__section {
  margin-top: 0.25rem;
  border-style: solid;
  border-color: var(--color-border);
  border-width: 1px 0 0;
}
.user-menu__sep {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: 0;
  height: 0;
  align-self: stretch;
  background: none;
}
.user-menu__org-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.4rem 0 0.5rem;
}
.user-menu__org {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-xs);
  text-decoration: none;
}
.user-menu__org:hover { background: var(--color-surface-alt); }
.user-menu__org--current { background: var(--color-surface-alt); }
.user-menu__org-eyebrow {
  display: block;
  padding: 0 0.65rem 0.25rem;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-mist);
}
.user-menu__org-name {
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--color-text);
  letter-spacing: -0.005em;
}
.user-menu__org--current .user-menu__org-name {
  font-weight: 700;
  color: var(--color-ink);
}
.user-menu__icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--color-text-muted);
}
.user-menu__org--current .user-menu__icon,
.user-menu__org:hover .user-menu__icon,
.user-menu__item:hover .user-menu__icon { color: var(--color-ink); }
.user-menu__item--danger .user-menu__icon { color: var(--color-pennon-red); }
.user-menu__head {
  padding: 0.55rem 0.65rem 0.65rem;
}
.user-menu__name { font-weight: 600; font-size: 0.9rem; color: var(--color-ink); }
.user-menu__email { font-size: 0.8rem; color: var(--color-text-muted); }
.user-menu__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-xs);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
}
.user-menu__item:hover { background: var(--color-surface-alt); }
.user-menu__item--danger { color: var(--color-pennon-red); }

.user-menu__section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.55rem 0.65rem 0.65rem;
}
.user-menu__section-label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-mist);
}
.theme-switcher {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}
.theme-switcher__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: inherit;
  transition: background-color 120ms ease, color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.theme-switcher__btn:hover {
  background: var(--color-surface);
  color: var(--color-ink);
}
.theme-switcher__btn[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.theme-switcher__btn[aria-pressed="true"]:hover {
  /* Already in active state — keep the pill stable on hover. */
  background: var(--color-surface);
}
.theme-switcher__btn:focus { outline: none; }
.theme-switcher__btn:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 1px;
}
.theme-switcher__btn svg { width: 14px; height: 14px; }

/* Project picker — uses native <details> for a11y-friendly dropdown */
.project-picker { position: relative; }
.project-picker__trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  user-select: none;
}
.project-picker__trigger::-webkit-details-marker { display: none; }
.project-picker__trigger:hover { background: var(--color-bg); }
.project-picker[open] > .project-picker__trigger { background: var(--color-bg); }
.project-picker__current { font-weight: 600; color: var(--color-ink); }
.project-picker__caret {
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
}

.project-picker__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.35rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.project-picker__heading {
  padding: 0.4rem 0.6rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.project-picker__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
}
.project-picker__item:hover { background: var(--color-bg); }
.project-picker__item.is-current { background: rgba(220, 38, 38, 0.06); color: var(--color-primary-dark); font-weight: 600; }
.project-picker__check { width: 0.9rem; color: var(--color-primary); font-weight: 700; }
.project-picker__empty {
  padding: 0.5rem 0.6rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.project-picker__new {
  display: block;
  padding: 0.5rem 0.6rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.project-picker__new:hover { background: var(--color-bg); }

/* App shell main: full viewport width under the topbar (same rhythm as project/org landing).
   Inner layouts set their own max-width where a reading column is needed. */
.main-content {
  flex: 1;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 1.5rem 1.25rem 1rem;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1100px) {
  .main-content {
    padding: 1.5rem 1.5rem 1rem;
  }
}

/* ─── Dashboard activity feed ───────────────────────────────────────── */

.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.dashboard-subtitle {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-top: 0.15rem;
}

.activity-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.activity-item {
  display: flex;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.activity-item:last-child { border-bottom: none; }
.activity-item__icon {
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
  color: var(--color-primary);
  font-size: 0.7rem;
  line-height: 1.4rem;
}
.activity-item__body { flex: 1; min-width: 0; }
.activity-item__line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
}
.activity-item__user { font-weight: 600; }
.activity-item__action { color: var(--color-text-muted); }
.activity-item__feature {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
}
.activity-item__feature:hover { text-decoration: underline; }
.activity-item__project { color: var(--color-text-muted); font-size: 0.85rem; }
.activity-item__meta {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.activity-empty {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.activity-empty h2 { margin-bottom: 0.5rem; }
.activity-empty p { color: var(--color-text-muted); margin-bottom: 0.75rem; }

h1 { font-size: 1.5rem; margin-bottom: 1rem; }
h2 { font-size: 1.25rem; margin: 1.5rem 0 0.75rem; }

.auth-container, .onboarding-container {
  max-width: 480px;
  margin: 4rem auto;
  padding: 2rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

form p { margin-bottom: 1rem; }
form label { display: block; margin-bottom: 0.25rem; font-weight: 500; }
form input, form select, form textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.875rem;
}
form input[type="checkbox"],
form input[type="radio"] {
  width: auto;
  padding: 0;
  border: 0;
}
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.4;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] { flex: 0 0 auto; margin: 0; }

button, .btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.875rem;
  text-decoration: none;
}
button:hover, .btn:hover { background: var(--color-primary-dark); }

.btn-danger { background: #dc2626; }

.badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--color-border);
}
.badge--development,
.badge--live,
.badge--complete,
.badge--archived {
  border-radius: 4px;
  padding: 0.18rem 0.5rem;
  border: 1px solid transparent;
}
.badge--development { background: #f3e8ff; color: #6b21a8; border-color: #c084fc; }
.badge--live { background: #dbeafe; color: #1e40af; border-color: #60a5fa; }
.badge--complete { background: #dcfce7; color: #166534; border-color: #4ade80; }
.badge--archived { background: #d1d5db; color: #1f2937; border-color: #6b7280; }
:root[data-theme="dark"] .badge--development { background: rgba(168, 85, 247, 0.15); color: #d8b4fe; border-color: rgba(168, 85, 247, 0.45); }
:root[data-theme="dark"] .badge--live { background: rgba(59, 130, 246, 0.15); color: #93c5fd; border-color: rgba(59, 130, 246, 0.45); }
:root[data-theme="dark"] .badge--complete { background: rgba(34, 197, 94, 0.15); color: #86efac; border-color: rgba(34, 197, 94, 0.45); }
:root[data-theme="dark"] .badge--archived { background: rgba(115, 115, 115, 0.18); color: #a3a3a3; border-color: rgba(163, 163, 163, 0.5); }

.project-card, .feature-card {
  display: block;
  padding: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  text-decoration: none;
  color: var(--color-text);
}
.project-card:hover, .feature-card:hover { border-color: var(--color-primary); }

.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.plan-card {
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-align: center;
}
.plan-card .price { font-size: 1.5rem; font-weight: 700; margin: 0.5rem 0; }

/* ─── Plan selector / change-plan page ───────────────────────────────
 * Stacks plan tiles in groups (Current / Upgrade / Downgrade). Each tile
 * mirrors the billing-card layout (price rail + "What's included" grid)
 * so the change-plan page and the billing tab feel like one surface.
 * Alpine.js drives a single ``interval`` state that swaps every tile's
 * price + cadence + checkout URL between monthly and yearly.
 */
.plan-manage {
  max-width: min(1180px, 95vw);
  margin: 3rem auto 4rem;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}
[x-cloak] { display: none !important; }

.plan-manage__header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.plan-manage__eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
.plan-manage__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 1.85rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-ink);
  margin: 0;
}
.plan-manage__sub {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0.15rem 0 0;
}
.plan-manage__sub strong { color: var(--color-text); font-weight: 600; }

.plan-manage__empty {
  color: var(--color-text-muted);
  text-align: center;
  padding: 2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.plan-manage__group {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.plan-manage__group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.plan-manage__group-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 0;
}
.plan-manage__group-title--danger { color: var(--color-pennon-red); }

.plan-manage__toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.25rem;
}

/* Monthly/Yearly billing toggle. Two buttons inside a pill-shaped track,
   the active one gets a solid surface chip — mirrors the segmented
   control pattern in the reference design. */
.plan-manage__interval {
  display: inline-flex;
  padding: 0.25rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  gap: 0.15rem;
}
.plan-manage__interval-btn {
  background: transparent;
  border: none;
  padding: 0.4rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 120ms ease-out, color 120ms ease-out;
}
.plan-manage__interval-btn:hover { color: var(--color-text); background: transparent; }
.plan-manage__interval-btn.is-active {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.08);
}

.plan-manage__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.plan-manage__footer .btn { padding: 0.55rem 1.1rem; }

/* ─── Plan tile — one per plan, reused across groups. ─────────────── */
.plan-tile {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 1.5rem;
  align-items: stretch;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  position: relative;
  box-shadow: var(--shadow-elevated);
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out,
              transform 120ms ease-out;
}
/* Tiles in the upgrade/downgrade groups behave like radio buttons: hover
   lifts them slightly so the click affordance is obvious; focus lights up
   the same border treatment as the selected state for keyboard users. */
.plan-tile[role="radio"] { cursor: pointer; }
.plan-tile[role="radio"]:hover {
  border-color: var(--color-pennon-red);
  transform: translateY(-1px);
}
.plan-tile[role="radio"]:focus-visible {
  outline: none;
  border-color: var(--color-pennon-red);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15), var(--shadow-elevated);
}
.plan-tile--selected {
  border-color: var(--color-pennon-red);
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.05), transparent 70%);
  box-shadow: 0 0 0 2px var(--color-pennon-red), var(--shadow-elevated);
}
.plan-tile--current {
  border-color: var(--color-pennon-red);
  box-shadow: 0 0 0 1px var(--color-pennon-red), var(--shadow-elevated);
  cursor: default;
}
.plan-tile--current:hover { transform: none; }
.plan-tile--recommended::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-live);
}

.plan-tile__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.3rem;
  padding: 0.5rem 0.75rem;
  border-right: 1px solid var(--color-border);
}
.plan-tile__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  min-height: 1.2rem;
}
.plan-tile__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  line-height: 1;
}
.plan-tile__badge--current {
  background: var(--color-pennon-red);
  color: #fff;
}
.plan-tile__badge--recommended {
  background: var(--color-live);
  color: #fff;
}
.plan-tile__badge--preferred {
  background: rgba(220, 38, 38, 0.08);
  color: var(--color-pennon-red);
  border: 1px solid rgba(220, 38, 38, 0.25);
}

.plan-tile__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-pennon-red);
  margin: 0.4rem 0 0.25rem;
}
.plan-tile__price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
}
.plan-tile__price-amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.02em;
  color: var(--color-pennon-red);
  line-height: 1;
}
.plan-tile__price-cadence {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.plan-tile__cadence {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0.25rem 0 0;
}
.plan-tile__savings {
  color: var(--color-live);
  font-weight: 600;
}

.plan-tile__body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}
.plan-tile__eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
.plan-tile__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem 1.25rem;
}
.plan-tile__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--color-text);
}
.plan-tile__feature-icon {
  color: var(--color-live);
  flex: none;
  margin-top: 0.15rem;
}

/* "Click to select" / "Selected" hint sits at the bottom of the rail to
   reinforce the radio-style affordance without competing with the price. */
.plan-tile__select-hint {
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.plan-tile__select-hint--on {
  color: var(--color-pennon-red);
  font-weight: 600;
}
.plan-tile__current-note {
  margin: 0.5rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.plan-manage__continue {
  min-width: 12rem;
  justify-content: center;
  padding: 0.7rem 1.5rem;
  font-weight: 600;
}
.plan-manage__continue.is-disabled,
.plan-manage__continue:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 880px) {
  .plan-tile {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.25rem;
  }
  .plan-tile__rail {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1rem;
  }
}

table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th, td { padding: 0.5rem; text-align: left; border-bottom: 1px solid var(--color-border); }

/* ─── Flash toasts ───────────────────────────────────────────────────
 * Pinned to the top-right of the viewport so a successful save
 * surfaces feedback without pushing the page content down. The stack
 * grows downward; new toasts appear at the bottom. Each toast is
 * dismissible via its close button and (for non-errors) auto-fades
 * after 5s — see base.html for the Alpine handlers. */
.toasts {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem 0.6rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  pointer-events: auto;
}
.toast__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--color-text-muted);
}
.toast__icon svg { width: 100%; height: 100%; display: block; }
.toast__body { flex: 1 1 auto; line-height: 1.4; font-size: 0.78rem; }
.toast__close {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-text-muted);
  opacity: 0.7;
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
}
.toast__close:hover,
.toast__close:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text);
  opacity: 1;
}
:root[data-theme="dark"] .toast__close:hover,
:root[data-theme="dark"] .toast__close:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}
.toast--success .toast__icon { color: #16a34a; }
.toast--error   .toast__icon { color: #dc2626; }
.toast--warning .toast__icon { color: #d97706; }
.toast--info    .toast__icon { color: #2563eb; }

.rule-card {
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  background: var(--color-surface);
}
.text-green-600 { color: #16a34a; }
.text-red-600 { color: #dc2626; }
.text-sm { font-size: 0.875rem; }


/* ─── Two-panel auth layout (sign in / sign up) ─────────────────────── */

.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background: var(--color-bg);
}

.auth-brand {
  /* The marketing panel is always dark, independent of the active theme,
     so re-pin the tokens it consumes back to their light-mode values. This
     keeps the gradient dark and the white lockup-dark.svg visible when the
     rest of the app switches to dark mode. */
  --color-paper:      #FFFFFF;
  --color-ink:        #0A0A0A;
  --color-mist:       #737373;
  --color-slate-300:  #D4D4D4;

  position: relative;
  color: var(--color-paper);
  padding: 4rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(255, 59, 71, 0.18) 0%, transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(255, 59, 71, 0.08) 0%, transparent 65%),
    var(--color-ink);
  overflow: hidden;
}
.auth-brand::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.auth-brand__inner { position: relative; max-width: 460px; margin: 0 auto; }
.auth-brand__logo {
  display: block;
  height: 88px;
  width: auto;
  margin-bottom: 2.5rem;
}
.auth-brand__tagline {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1.75rem;
  color: var(--color-paper);
}
.auth-brand__list {
  list-style: none;
  padding: 0;
  margin: 0 0 2.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.auth-brand__list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: var(--color-slate-300);
}
.auth-brand__list li::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 59, 71, 0.18);
  color: var(--color-ember);
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.auth-brand__trusted {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-mist);
}

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  padding: 2.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  border: 1px solid var(--color-border);
}
.auth-card h1 {
  font-size: 1.75rem;
  text-align: center;
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.error-page__code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}
.auth-card .auth-subtitle {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 1.75rem;
}
.auth-card form p { margin-bottom: 0.85rem; }
.auth-card form label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}
.auth-card form input {
  padding: 0.75rem 0.9rem;
  font-size: 0.95rem;
  border-radius: 8px;
  background: var(--color-surface);
}
.auth-card form input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.auth-card form .helptext, .auth-card form ul.errorlist { display: none; }
.auth-card .auth-submit {
  display: block;
  width: 100%;
  padding: 0.85rem;
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--color-primary);
  border-radius: 8px;
  margin-top: 0.5rem;
}
.auth-card .auth-submit:hover { background: var(--color-primary-dark); }
.auth-card .auth-meta {
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 1rem;
}
.auth-card .auth-meta a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}
.auth-card .auth-meta a:hover { text-decoration: underline; }
.auth-card .auth-divider {
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  margin: 1.25rem 0 1rem;
  position: relative;
}
.auth-card .auth-divider::before,
.auth-card .auth-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 1.5rem);
  height: 1px;
  background: var(--color-border);
}
.auth-card .auth-divider::before { left: 0; }
.auth-card .auth-divider::after  { right: 0; }
.auth-card .auth-errors {
  background: #fef2f2;
  color: #991b1b;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.auth-providers {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.auth-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.auth-provider:hover {
  background: var(--color-bg);
  border-color: #d1d5db;
}
.auth-provider svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-provider--github svg { color: #111; }

@media (max-width: 800px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-panel { padding: 2rem 1rem; }
}

/* ─── Settings layout (tabs + sections) ─────────────────────────────── */

.settings { width: 100%; }
.settings > h1 { margin-bottom: 1rem; }

.settings-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.75rem;
  overflow-x: auto;
}
.settings-tab {
  position: relative;
  padding: 0.65rem 1rem;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.settings-tab:hover { color: var(--color-text); }
.settings-tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}
.settings-tab__scope {
  /* The bracketed project name is contextual scope, not part of the tab
     label proper — keep it lighter and slightly smaller so the eye still
     parses "Project" as the primary word. */
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: 0.85em;
}
.settings-tab.is-active .settings-tab__scope {
  color: color-mix(in srgb, var(--color-primary) 70%, var(--color-text-muted));
}
.settings-tab.is-disabled {
  color: var(--color-text-muted);
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.settings-tab__badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.integration-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.integration-layout__content {
  flex: 1;
  min-width: 0;
}
.integration-sidebar {
  flex-shrink: 0;
  width: 190px;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-top: 0.125rem;
}
.integration-sidebar__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.integration-sidebar__item:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.integration-sidebar__item.is-active {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-primary);
  font-weight: 600;
}
.integration-sidebar__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: inherit;
}

.settings-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.settings-section__header { margin-bottom: 1rem; }
.settings-section__header h2 { margin: 0; }
.settings-section__header h3 { margin: 0; }
.settings-section__sub {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}
.settings-subsection {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.manage-card__action { display: flex; justify-content: flex-end; }

.manage-card__title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.self-targeting-summary {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
  gap: 1rem;
  align-items: stretch;
  margin-top: 0.4rem;
}
.self-targeting-summary .manage-card__subtitle { margin: 0; }
.self-targeting-summary .manage-info-panel { align-items: center; }
.manage-card__title-key {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--color-text-muted);
}
.manage-card__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.manage-card__updated {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.self-targeting-status-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius);
  text-align: center;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.2;
  min-height: 4.25rem;
}
.self-targeting-status-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  border: 1.25px solid currentColor;
}
.self-targeting-status-tile__label { font-size: 0.75rem; }
.self-targeting-status-tile--inactive {
  --status-color: #737373;
  color: var(--status-color);
  background: color-mix(in srgb, var(--status-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--status-color) 30%, transparent);
}
.self-targeting-status-tile--active {
  --status-color: #16A34A;
  color: var(--status-color);
  background: color-mix(in srgb, var(--status-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--status-color) 30%, transparent);
}
#self-targeting .self-targeting-status-tile--active,
.env-target-card .self-targeting-status-tile--active,
.env-target-card .self-targeting-status-tile--inactive {
  color: #ffffff;
  background: var(--status-color);
  border-color: var(--status-color);
}
/* Toggle switch sits inside the now-solid env-card tile. The track
   defaults to `currentColor` (white here), which would make a white
   track with a white thumb on the green/grey fill. Override with a
   translucent white so the track stays readable on the solid bg. */
.env-target-card .self-targeting-status-tile .targeting-switch__track {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.55);
}
.env-target-card .self-targeting-status-tile .targeting-switch__input:checked + .targeting-switch__track {
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(255, 255, 255, 0.75);
}
@media (max-width: 640px) {
  .self-targeting-summary { grid-template-columns: 1fr; }
}

/* Targeting toggle switch on env cards. The form wraps both the
   switch and the existing "Targeting ON/OFF" label so they sit on a
   single row inside the status tile. The switch's track inherits the
   tile's status colour via `currentColor`, so it tints green when
   targeting is on and grey when off. */
.targeting-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
}
.targeting-switch__toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.targeting-switch__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.targeting-switch__track {
  display: inline-block;
  position: relative;
  width: 1.9rem;
  height: 1.05rem;
  background: color-mix(in srgb, currentColor 20%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 999px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.targeting-switch__thumb {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 0.85rem;
  height: 0.85rem;
  background: #fff;
  border-radius: 999px;
  transform: translateY(-50%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: left 0.15s ease;
}
.targeting-switch__input:checked + .targeting-switch__track {
  background: currentColor;
  border-color: currentColor;
}
.targeting-switch__input:checked + .targeting-switch__track .targeting-switch__thumb {
  left: calc(100% - 0.85rem - 2px);
}
.targeting-switch__input:focus-visible + .targeting-switch__track {
  outline: 2px solid color-mix(in srgb, currentColor 60%, transparent);
  outline-offset: 2px;
}

/* Rules toolbar — separator under the env card status summary. The
   "+ Add Rule" button sits on the left end of a thin horizontal rule
   and the Show/Hide toggle sits on the right end, so the line passes
   between them and the row reads as a single section break with
   inline controls. The buttons are vertically centred on the line. */
.rules-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
.rules-toolbar__add,
.rules-toolbar__toggle {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  background: rgba(0, 0, 0, 0.05);
  justify-content: center;
}
.rules-toolbar__add:hover,
.rules-toolbar__toggle:hover {
  background: rgba(0, 0, 0, 0.1);
}
:root[data-theme="dark"] .rules-toolbar__add,
:root[data-theme="dark"] .rules-toolbar__toggle {
  background: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .rules-toolbar__add:hover,
:root[data-theme="dark"] .rules-toolbar__toggle:hover {
  background: rgba(255, 255, 255, 0.14);
}
.rules-toolbar__divider {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-border);
}
.rules-toolbar__toggle {
  min-width: 4rem;
}
.rules-panel {
  margin-top: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-subtle, color-mix(in srgb, var(--color-text) 3%, transparent));
}
.rules-panel__empty {
  margin: 0;
  color: var(--color-text-muted, #6b7280);
  font-size: 0.85rem;
}
/* Inline targeting-rule editor (lives inside .rules-panel). Rules
   render as stacked cards; condition rows + add-rule/add-condition
   forms reuse the standard btn/input look so they read as part of
   the surrounding manage page. */
.rules-panel__inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.rules-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rule-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface, #fff);
  padding: 0.75rem;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
}
.rule-card__order {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 0.75rem;
}
/* Stack the numbered/lock badge and the move-up/move-down icon buttons
   in a single column to the left of each rule card body. The buttons
   are tiny (btn--xs) so the column doesn't widen the card. */
.rule-card__order-stack {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  /* Match the badge's own top offset so the stack as a whole sits
     aligned with the row label baseline. The badge keeps its own
     margin-top, but every move button below it sits flush. */
}
/* Move-up / Move-down buttons share their visual chrome with the
   numbered order badge so the column reads as a single tower. We
   intentionally redeclare the badge styles here (rather than reusing
   `.rule-card__order` directly) to avoid inheriting the badge's top
   margin on each button. */
.rule-card__order-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  color: var(--color-text-muted, #6b7280);
  cursor: pointer;
  line-height: 0;
}
.rule-card__order-button:hover {
  background: color-mix(in srgb, var(--color-text) 14%, transparent);
  color: var(--color-text);
}
.rule-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rule-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rule-card__name {
  flex: 1 1 auto;
  font-size: 0.95rem;
}
.rule-card__name-form {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}
.rule-card__name-input {
  width: 100%;
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.4rem 0.55rem;
  min-height: 36px;
  line-height: 1.2;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 0.5);
  background: var(--color-surface, #fff);
  color: var(--color-text);
}
.rule-card__name-input:hover {
  border-color: var(--color-border);
}
.rule-card__name-input:focus {
  outline: none;
  border-color: var(--color-accent, #2563eb);
  background: var(--color-surface, #fff);
}
.rule-card__delete,
.condition-row__delete {
  margin-left: auto;
  padding: 0 0.5rem;
}
/* Override .btn--icon's muted colour so the delete button reads as
   destructive at rest, then fills red on hover (matches .btn--danger). */
.btn--icon.rule-card__delete {
  background: var(--color-danger, #b91c1c);
  color: #fff;
  border-color: var(--color-danger, #b91c1c);
}
.btn--icon.rule-card__delete:hover {
  background: var(--color-danger-hover, #991b1b);
  color: #fff;
  border-color: var(--color-danger-hover, #991b1b);
}
.rule-card__conditions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.condition-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  background: color-mix(in srgb, var(--color-text) 3%, transparent);
  border-radius: calc(var(--radius) * 0.5);
  font-size: 0.85rem;
}
.condition-row__text {
  flex: 1 1 auto;
}
.condition-row__text code {
  background: var(--color-surface, #fff);
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  font-size: 0.8rem;
}
.condition-row__text em {
  font-style: normal;
  color: var(--color-text-muted, #6b7280);
  font-size: 0.8rem;
  margin: 0 0.25rem;
}
.condition-add,
.rule-card__serve {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.condition-add select,
.condition-add input,
.rule-card__serve select {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 0.5);
  background: var(--color-surface, #fff);
  font-size: 0.85rem;
}
.condition-add__value,
.condition-add__key {
  flex: 1 1 8rem;
  min-width: 6rem;
}
.condition-add__property,
.condition-add__operator {
  flex: 0 0 auto;
}
.rule-card__serve-label {
  font-size: 0.85rem;
  color: var(--color-text-muted, #6b7280);
}
.rules-panel__add-rule {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px dashed var(--color-border);
  flex-wrap: wrap;
}
.rules-panel__rule-property {
  flex: 0 0 auto;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 0.5);
  background: var(--color-surface, #fff);
  font-size: 0.85rem;
}
.rules-panel__rule-name {
  flex: 1 1 auto;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 0.5);
  background: var(--color-surface, #fff);
  font-size: 0.9rem;
}

.self-targeting-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.self-targeting-status__dot {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}
.self-targeting-status--inactive {
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-text-muted) 26%, transparent);
}
.self-targeting-status--active {
  color: #16A34A;
  background: color-mix(in srgb, #16A34A 12%, transparent);
  border-color: color-mix(in srgb, #16A34A 30%, transparent);
}

/* Self-Targeting modal — brand-aligned redesign.
 * Eyebrow, identity banner, and per-env rows with env chips. */
.modal-card--self-targeting { max-width: 32rem; }
.modal-card__eyebrow {
  margin: 0 0 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.self-targeting-callout {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  background: var(--color-surface-alt, var(--color-surface));
}
.self-targeting-callout--warn { border-left-color: #F59E0B; }
.self-targeting-callout__title {
  margin: 0 0 0.25rem;
  font-weight: 600;
  font-size: 0.95rem;
}
.self-targeting-callout__body { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.self-targeting-callout__hint {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.self-targeting-spacer { height: 0.85rem; }
.self-targeting-section {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}
.self-targeting-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.self-targeting-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.self-targeting-section__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.self-targeting-section__link {
  font-size: 0.8rem;
  text-decoration: underline;
}
.self-targeting-section__body {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.self-targeting-section__hint {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-style: italic;
}
.self-targeting-section--disabled { opacity: 0.55; }
.self-targeting-section--disabled,
.self-targeting-section--disabled * { cursor: not-allowed; }
.self-targeting-identity-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: end;
}
.self-targeting-identity-form .form-field { margin: 0; }
.self-targeting-identity-form .form-input {
  width: 100%;
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
}

.self-targeting-list { list-style: none; margin: 0; padding: 0; }
.self-targeting-row {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 0;
}
.self-targeting-row + .self-targeting-row { border-top: 1px solid var(--color-border); }
.self-targeting-row__env {
  font-size: 0.9rem;
  color: var(--color-text);
}
.self-targeting-row .form-select { width: 100%; }
.data-table--overrides { table-layout: fixed; width: 100%; }
.data-table--overrides th:first-child,
.data-table--overrides td:first-child { width: 33.3333%; }
.override-line {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.1rem 0;
}
.override-line + .override-line { border-top: 1px dashed var(--color-border); }
.settings-subsection:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}
.settings-subheading {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.settings-empty {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  padding: 0.75rem 0;
}
.settings-form { max-width: 640px; }
.settings-form--split { max-width: none; }

.project-settings-grid {
  display: grid;
  grid-template-columns: minmax(420px, 500px) minmax(0, 1fr);
  gap: 2rem;
  align-items: stretch;
}
.project-settings-grid__main { display: flex; flex-direction: column; gap: 1.25rem; }
.project-settings-grid__aside { display: flex; flex-direction: column; min-width: 0; }
.project-settings-grid__aside .form-field--fill {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 0;
}
.project-settings-grid__aside textarea {
  flex: 1;
  width: 100%;
  min-height: 320px;
  max-width: none;
  resize: vertical;
}
@media (max-width: 880px) {
  .project-settings-grid { grid-template-columns: 1fr; }
  .project-settings-grid__aside textarea { min-height: 160px; }
}
.settings-form__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}
.settings-form__actions--end { justify-content: flex-end; }
.settings-stacked-form { display: flex; flex-direction: column; gap: 0.25rem; }
.settings-stacked-form .form-input { width: 100%; }
.settings-form__danger {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.btn-link {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.5rem 0.25rem;
}
.btn-link:hover { color: var(--color-text); }

.env-table { width: 100%; }
.env-table th, .env-table td { vertical-align: middle; }
.env-table code { font-size: 0.8rem; color: var(--color-text-muted); }

.audience-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.audience-card {
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}
.audience-card code { font-size: 0.8rem; color: var(--color-text-muted); margin-left: 0.5rem; }
.audience-card p { color: var(--color-text-muted); margin: 0.5rem 0; }

/* ─── Project landing (org / project home) ─────────────────────────── */
.project-landing {
  width: 100%;
  max-width: none;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.project-landing__layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  grid-template-rows: 1fr;
  gap: 1.5rem;
  align-items: start;
  min-height: 0;
}
@media (max-width: 960px) {
  .project-landing__layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-items: stretch;
  }
}
/* Feature Updates: cap to viewport so the list scrolls inside the panel (not the page). */
.project-landing__panel--main {
  width: 100%;
  min-height: 0;
  max-height: calc(100vh - 64px - 2.5rem - env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - 64px - 2.5rem - env(safe-area-inset-bottom, 0px));
}
.project-landing__panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-flat);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
:root[data-theme="dark"] .project-landing__panel {
  background: #12161a;
  border-color: #1e252c;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
}
.project-landing__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  flex-shrink: 0;
}
:root[data-theme="dark"] .project-landing__panel-head {
  background: #0f1318;
  border-color: #1e252c;
}
.project-landing__panel-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.project-landing__head-cta {
  white-space: nowrap;
}
.project-landing__panel-body {
  padding: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.project-landing__panel-body:not(.project-landing__panel-body--empty) {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.project-landing__panel-body--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 2rem 1rem 1.5rem;
  box-sizing: border-box;
}
.feature-update-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.feature-update-list__row {
  display: block;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--color-border);
}
:root[data-theme="dark"] .feature-update-list__row {
  border-color: #1e252c;
}
.feature-update-list__row:last-child {
  border-bottom: none;
}
.feature-update-list__col {
  min-width: 0;
  width: 100%;
}
.feature-update-list__line1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
}
/* First line: audit “what changed” — same system as .eyebrow (brand guidelines). */
.feature-update-list__change {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-mist);
  min-width: 0;
  padding-right: 0.5rem;
}
:root[data-theme="dark"] .feature-update-list__change {
  color: #94a3b8;
}
.feature-update-list__name {
  margin: 0.45rem 0 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink);
}
.feature-update-list__name + .feature-update-list__meta {
  margin-top: 0.5rem;
}
.feature-update-list__meta + .feature-update-list__meta {
  margin-top: 0.2rem;
}
.feature-update-list__meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.feature-update-list__manage {
  flex-shrink: 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-signal);
  text-decoration: none;
  white-space: nowrap;
}
.feature-update-list__manage:hover {
  text-decoration: underline;
}
:root[data-theme="dark"] .feature-update-list__manage {
  color: #60a5fa;
}
.project-landing__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 0;
  gap: 0.65rem;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  flex: 0 1 auto;
}
.project-landing__empty-icon {
  color: var(--color-text-muted);
  opacity: 0.85;
  margin-bottom: 0.25rem;
  flex-shrink: 0;
}
.project-landing__empty-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  align-self: center;
  text-align: center;
  max-width: 100%;
}
.project-landing__empty-sub {
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  align-self: center;
  text-align: center;
  max-width: 28rem;
}
.project-landing__empty-cta {
  margin-top: 0.75rem;
  align-self: center;
}
.project-landing__side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.project-landing__cta-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
}
:root[data-theme="dark"] .project-landing__cta-card {
  background: #12161a;
  border-color: #1e252c;
}
.project-landing__cta-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.project-landing__cta-desc {
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.project-landing__cta-btn {
  display: flex;
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

/* ─── App footer (app shell) ───────────────────────────────────────── */
.app-footer {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: 2rem 1.5rem 2.25rem;
}
:root[data-theme="dark"] .app-footer {
  background: #060809;
  border-color: #141a1f;
}
.app-footer__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.app-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.25rem;
}
.app-footer__link {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: none;
}
.app-footer__link:hover {
  color: var(--color-text);
}
.app-footer__copy {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ─── Generic list-page pattern (Features/Variables/Audiences/Metrics) */
.list-page { display: flex; flex-direction: column; gap: 1rem; }
.list-page__header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.list-page__title { display: flex; flex-direction: column; gap: 0.4rem; }
.list-page__title h1 { margin: 0; }
.list-page__sub { color: var(--color-text-muted); font-size: 0.9rem; margin: 0; }
.list-page__actions { display: flex; gap: 0.5rem; }
.list-page__filters {
  display: flex; gap: 0.75rem; flex-wrap: nowrap; align-items: flex-end;
  padding: 0.6rem 0.75rem; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius);
}
.filter-field { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 0; min-width: 0; }
.filter-field--grow { flex: 2 1 0; }
.filter-field__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); font-weight: 600; }
.filter-input, .filter-select {
  padding: 0.45rem 0.6rem; border: 1px solid var(--color-border);
  border-radius: 6px; font-size: 0.9rem; background: var(--color-bg);
  width: 100%; min-width: 0;
}
@media (max-width: 720px) {
  .list-page__filters { flex-wrap: wrap; }
  .filter-field { flex-basis: 100%; }
}

.btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.85rem; border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); text-decoration: none; font-size: 0.9rem; cursor: pointer; line-height: 1; transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out; }
.btn__icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.btn__icon > svg { display: block; }
.btn:hover { background: var(--color-surface-alt); border-color: var(--color-mist); color: var(--color-ink); }
.btn--primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-dark, var(--color-primary)); color: #fff; border-color: var(--color-primary-dark, var(--color-primary)); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--color-surface-alt); border-color: var(--color-mist); color: var(--color-ink); }
.btn--compact { padding: 0.35rem 0.7rem; font-size: 0.82rem; }
.btn--pill {
  padding: 0.45rem 1.15rem;
  font-size: 0.84rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  min-height: 2.35rem;
}
.btn--small { padding: 0.28rem 0.55rem; font-size: 0.78rem; }
.btn--inverse {
  background: #0a0a0a;
  color: #f5f5f5;
  border-color: #3f3f46;
  font-weight: 600;
}
.btn--inverse:hover { background: #18181b; color: #fff; }
.btn--danger {
  background: transparent;
  color: var(--color-danger, #b91c1c);
  border-color: var(--color-border);
}
.btn--danger:hover {
  background: var(--color-danger, #b91c1c);
  color: #fff;
  border-color: var(--color-danger, #b91c1c);
}
:root[data-theme="light"] .btn--inverse {
  background: #18181b;
  color: #fafafa;
  border-color: #3f3f46;
}
.btn.is-disabled, .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.view-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 6px;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.view-toggle__btn:hover { color: var(--color-text); }
.view-toggle__btn svg { display: block; width: 18px; height: 18px; stroke-width: 1.5; }
.view-toggle__btn.is-active {
  background: rgba(220, 38, 38, 0.12);
  color: var(--color-pennon-red);
}
.view-toggle__btn.is-active:hover { color: var(--color-pennon-red); }

.data-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.data-table th, .data-table td { padding: 0.65rem 0.85rem; text-align: left; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table th { background: var(--color-bg); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); font-weight: 600; }
.data-table code { font-size: 0.8rem; color: var(--color-text-muted); }
.data-table__actions { display: flex; gap: 0.6rem; justify-content: flex-end; }
.data-table__actions a { color: var(--color-text); text-decoration: none; font-size: 0.85rem; }
.data-table__actions a:hover { color: var(--color-primary); }
.data-table .numeric { text-align: right; font-variant-numeric: tabular-nums; }
.muted-hint { color: var(--color-slate-400); font-size: 0.85rem; cursor: not-allowed; }

.data-table__row--clickable { cursor: pointer; }
:root[data-theme="light"] .data-table__row--clickable:hover > td { background: var(--color-surface-alt); }
:root[data-theme="dark"] .data-table__row--clickable:hover > td { background: #262626; }
.data-table__row--clickable:hover > td { box-shadow: inset 0 1px 0 0 var(--color-primary), inset 0 -1px 0 0 var(--color-primary); }
.data-table__row--clickable:hover > td:first-child { box-shadow: inset 1px 1px 0 0 var(--color-primary), inset 0 -1px 0 0 var(--color-primary); }
.data-table__row--clickable:hover > td:last-child { box-shadow: inset -1px 1px 0 0 var(--color-primary), inset 0 -1px 0 0 var(--color-primary); }
.data-table__row--clickable:focus { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.data-table--features th.is-sortable > a {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  box-sizing: border-box;
  margin: -0.65rem -0.85rem;
  padding: 0.65rem 0.85rem;
}
.data-table--features th.is-sortable a:hover { color: var(--color-text); }
.data-table--features .sort-ind { font-size: 0.7rem; line-height: 1; color: var(--color-text-muted); }
.data-table--features .col-creator { width: 2.5rem; text-align: center; }
.data-table--features .col-creator .data-table__icon-head { display: inline-flex; color: var(--color-text-muted); }
.data-table--features .col-action { width: 2.25rem; text-align: center; }
.data-table--features .cell-stack { display: flex; flex-direction: column; gap: 0.15rem; }
.data-table--features .cell-name { color: var(--color-text); font-weight: 500; }
.data-table--features .cell-key { font-size: 0.72rem; color: var(--color-text-muted); }
.data-table--features .cell-datetime { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.2; }
.data-table--features .cell-datetime__time { color: var(--color-text-muted); }
.data-table--audiences {
  table-layout: fixed;
}
.data-table--audiences .col-name {
  width: 20%;
  min-width: 11rem;
}
.data-table--audiences .col-description {
  width: 42%;
  min-width: 22rem;
}
.data-table--audiences .col-modified {
  width: 9.5rem;
}
.data-table--audiences .audience-list__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  max-width: none;
}
.data-table--audiences .col-status-h { width: 3.75rem; min-width: 3.75rem; text-align: center; }
.data-table--audiences .col-status { width: 3.75rem; min-width: 3.75rem; text-align: center; vertical-align: middle; }
.data-table--audiences .audience-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.data-table--audiences .audience-status svg { width: 1.125rem; height: 1.125rem; }
.data-table--audiences .audience-status--active { color: #16a34a; }
.data-table--audiences .audience-status--inactive { color: var(--color-text-muted); }
.data-table--audiences .audience-list__last-updated {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}
.manage-card__subsection--audience-usage-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  padding: 1.5rem;
}
.audience-feature-usage-empty {
  margin: 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.45;
}
/* Empty-state card shown when an audience has no conditions yet — a
   centred icon, title, supporting copy, and a single primary CTA that
   seeds the first group via Alpine. Keeps the editor's overall card
   chrome (border, padding) provided by `.manage-card` and only fills
   the inner column. */
.audience-definition-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  padding: 2.5rem 1.5rem;
  min-height: 16rem;
}
.audience-definition-empty__icon {
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.audience-definition-empty__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.audience-definition-empty__copy {
  margin: 0 0 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 32rem;
}
.audience-definition-empty__cta {
  flex: 0 0 auto;
}

/* Audience definition editor — vertical stack of condition groups
   separated by an "OR" pill, with an "+ OR" separator at the bottom
   that adds a new group. The group/separator markup is custom (it sits
   inside a `<div class="rules-panel__list">`, not an `<ol>`) because
   each group needs to render both an OR row and a rule card, which an
   Alpine `<template x-for>` can't do as siblings of an `<li>`. */
.audience-definition-list { display: flex; flex-direction: column; gap: 0.75rem; }
.audience-definition-group { display: flex; flex-direction: column; gap: 0.75rem; }
.audience-definition-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}
.audience-definition-or__label {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
}
/* Group header row holds only the red delete button at the right —
   no Name input or other fields, since groups are unnamed. The trash
   icon mirrors the rule-card delete styling so the affordance reads as
   "destructive action on this group". */
.audience-definition-group__head { min-height: 0; }
.audience-definition-group__head .rule-card__row-actions { margin-left: auto; }
/* Tag-input control used in the audience definition editor and the
   targeting rule editor as the condition's value field. Renders as
   a chip list with a trailing free-text input — visually it
   replaces the previous single-line text input but with the same
   border/radius/font tokens. The component is implemented in
   ``static/js/tag_input.js`` and is shared between both editors. */
.tag-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-input, var(--color-surface));
  font-size: 0.875rem;
  min-height: 2.25rem;
  flex: 1 1 0;
  min-width: 0;
}
.tag-input--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.tag-input__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary, #3b82f6) 12%, transparent);
  color: var(--color-text);
  font-size: 0.8rem;
  line-height: 1.4;
  max-width: 16rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tag-input__chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag-input__chip-remove {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}
.tag-input__chip-remove:hover { background: rgba(0, 0, 0, 0.08); color: var(--color-text); }
:root[data-theme="dark"] .tag-input__chip-remove:hover { background: rgba(255, 255, 255, 0.12); }
.tag-input__draft {
  flex: 1 1 6rem;
  min-width: 4rem;
  border: 0;
  outline: none;
  padding: 0.2rem 0.25rem;
  background: transparent;
  font: inherit;
  color: inherit;
}
.tag-input__draft::placeholder { color: var(--color-text-muted); }
/* Audience groups have no per-row label, so span the definitions
   across the 6rem label track + the 1fr content track of the
   inherited ``.rule-card__row`` grid. Scoped to the audience editor
   so the targeting rule editor's labelled definition row is
   untouched. */
.audience-definition-list .rule-card__row--definition > .rule-card__definitions {
  grid-column: 1 / 3;
  min-width: 0;
}
.audience-definition-editor__or-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 0.5rem;
}
.audience-definition-editor__or-row .btn {
  flex: 0 0 auto;
}
.var-status { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.var-status--active { color: #16a34a; }
.var-status--archived { color: var(--color-text-muted); }
.creator-avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 0.72rem; font-weight: 600; }
.creator-avatar--none { background: var(--color-bg); color: var(--color-text-muted); border: 1px dashed var(--color-border); }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.env-pill { display: inline-flex; align-items: center; padding: 0.1rem 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--env-color) 18%, transparent); color: var(--env-color); border: 1px solid color-mix(in srgb, var(--env-color) 35%, transparent); font-size: 0.72rem; font-weight: 500; white-space: nowrap; }
.tag-chip { display: inline-flex; align-items: center; padding: 0.1rem 0.45rem; border-radius: 4px; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.72rem; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 6px; color: var(--color-text-muted); text-decoration: none; }
.icon-btn:hover { color: var(--color-primary); background: var(--color-bg); }
.tooltip-wrap { position: relative; display: inline-flex; align-items: center; }
.tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: #0a0a0a; color: #f5f5f5; border: 1px solid #3f3f46; border-radius: 6px; padding: 0.3rem 0.55rem; font-size: 0.72rem; line-height: 1.2; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); pointer-events: none; z-index: 30; }
.tooltip strong { font-weight: 600; }
/* Rich tooltip variant: allows wrapping, multi-line content with a
   title + description. Wider max-width so prose doesn't wrap awkwardly. */
.tooltip--rich {
  white-space: normal;
  width: max-content;
  max-width: 18rem;
  text-align: left;
  padding: 0.5rem 0.7rem;
  font-size: 0.75rem;
  line-height: 1.35;
}
.tooltip--rich .tooltip__title {
  display: block;
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.tooltip--rich .tooltip__body { display: block; opacity: 0.85; }
.tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: #0a0a0a; }
.tooltip--end { left: auto; right: 0; transform: none; }
.tooltip--end::after { left: auto; right: 0.55rem; transform: none; }
.tooltip--start { left: 0; right: auto; transform: none; }
.tooltip--start::after { left: 0.55rem; right: auto; transform: none; }
.tooltip--below { bottom: auto; top: calc(100% + 6px); }
.tooltip--below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #0a0a0a; }
:root[data-theme="light"] .tooltip--below::after { border-top-color: transparent; border-bottom-color: #ffffff; }
.tooltip-enter { transition: opacity 140ms ease-out, transform 140ms ease-out; }
.tooltip-enter-start { opacity: 0; transform: translateY(4px); }
.tooltip-enter-end { opacity: 1; transform: translateY(0); }
.tooltip-leave { transition: opacity 100ms ease-in, transform 100ms ease-in; }
.tooltip-leave-start { opacity: 1; transform: translateY(0); }
.tooltip-leave-end { opacity: 0; transform: translateY(4px); }
/* Centered tooltips need transform overrides during their slide so the X-axis
   centering is preserved. */
.tooltip:not(.tooltip--end):not(.tooltip--start).tooltip-enter-start { transform: translateX(-50%) translateY(4px); }
.tooltip:not(.tooltip--end):not(.tooltip--start).tooltip-enter-end,
.tooltip:not(.tooltip--end):not(.tooltip--start).tooltip-leave-start { transform: translateX(-50%) translateY(0); }
.tooltip:not(.tooltip--end):not(.tooltip--start).tooltip-leave-end { transform: translateX(-50%) translateY(4px); }
:root[data-theme="light"] .tooltip--end::after { border-top-color: #ffffff; }
:root[data-theme="light"] .tooltip--start::after { border-top-color: #ffffff; }
:root[data-theme="light"] .tooltip { background: #ffffff; color: #0a0a0a; border-color: #e5e5e5; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }
:root[data-theme="light"] .tooltip::after { border-top-color: #ffffff; }

.list-empty { padding: 2rem; background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; color: var(--color-text-muted); }

.pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; flex-wrap: wrap; }
.pagination__per-page { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.72rem; color: var(--color-text-muted); }
.pagination__per-page label { color: var(--color-text-muted); white-space: nowrap; font-size: 0.72rem; font-weight: 400; line-height: 1; display: inline-flex; align-items: center; }
.pagination__per-page select { padding: 0.15rem 0.35rem; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.78rem; width: auto; min-width: 3rem; }
.pagination__pages { list-style: none; display: flex; align-items: center; gap: 0.2rem; padding: 0; margin: 0; }
.pagination__pages li a, .pagination__pages li span { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; padding: 0.2rem 0.45rem; border: 1px solid var(--color-border); border-radius: 5px; font-size: 0.72rem; color: var(--color-text); text-decoration: none; background: var(--color-surface); }
.pagination__pages li a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination__pages li.is-current span { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-contrast, #fff); }
.pagination__pages li.is-disabled span { color: var(--color-slate-400); cursor: not-allowed; background: transparent; }

.kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 1100px) { .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kanban { grid-template-columns: 1fr; } }
.kanban__col { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); display: flex; flex-direction: column; }
.kanban__col-head { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--color-border); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); font-weight: 600; }
.kanban__col-head-right { display: inline-flex; align-items: center; gap: 0.4rem; }
.kanban__count { background: var(--color-surface); padding: 0 0.4rem; border-radius: 999px; font-size: 0.75rem; }
.kanban__sort-wrap { position: relative; }
.kanban__sort {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text-muted);
  background: var(--color-surface);
  user-select: none;
}
.kanban__sort::-webkit-details-marker { display: none; }
.kanban__sort:hover { color: var(--color-text); border-color: var(--color-primary); }
.kanban__sort-wrap[open] > .kanban__sort { color: var(--color-text); border-color: var(--color-primary); }
.kanban__sort-menu {
  position: absolute;
  top: calc(100% + 3px);
  right: 0;
  z-index: 20;
  min-width: 168px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.2rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.kanban__sort-option {
  text-align: left;
  background: transparent;
  border: none;
  padding: 0.35rem 0.55rem;
  border-radius: 4px;
  color: var(--color-text);
  font-size: 0.78rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  cursor: pointer;
}
.kanban__sort-option:hover { background: var(--color-surface-alt); }
:root[data-theme="dark"] .kanban__sort-option:hover { background: #262626; }
.kanban__sort-option.is-active { background: var(--color-primary); color: #fff; }
.kanban__sort-option.is-active:hover { background: var(--color-primary); color: #fff; }
.kanban__col-body { padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; min-height: 4rem; max-height: calc(7 * 5.25rem + 6 * 0.5rem + 1.2rem); overflow-y: auto; }
.kanban__card { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.6rem 0.7rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; text-decoration: none; color: var(--color-text); transition: background-color 120ms ease, border-color 120ms ease; }
:root[data-theme="light"] .kanban__card:hover { background: var(--color-surface-alt); border-color: var(--color-primary); }
:root[data-theme="dark"] .kanban__card:hover { background: #262626; border-color: var(--color-primary); }
.kanban__card-name { font-weight: 600; font-size: 0.92rem; color: var(--color-text); }
.kanban__card-meta { font-size: 0.78rem; color: var(--color-text-muted); }
.kanban__card code { font-size: 0.75rem; color: var(--color-text-muted); }
.kanban__empty { color: var(--color-slate-400); font-size: 0.85rem; margin: 0.4rem; }

/* ───────── Settings: forms + tables + project colour picker ───────── */

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

.form-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
.form-field label { font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field input[type="number"],
.form-field textarea,
.form-field select {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.92rem;
  font-family: inherit;
  width: 100%;
  max-width: 460px;
}
.form-field textarea { min-height: 4.5rem; resize: vertical; }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}
.form-error {
  margin: 0; color: #b91c1c; font-size: 0.82rem;
}
.form-hint {
  margin: 0; color: var(--color-text-muted); font-size: 0.82rem;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1rem;
}
.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .form-grid--2, .form-grid--3 { grid-template-columns: 1fr; }
}

.settings-row {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 0;
  border-top: 1px solid var(--color-border);
}
.settings-row:first-of-type { border-top: none; }
.settings-row--stacked { grid-template-columns: 180px 1fr auto; align-items: flex-start; }
.settings-row__label { font-weight: 600; color: var(--color-text); font-size: 0.9rem; }
.settings-row__value { color: var(--color-text); font-size: 0.92rem; }
.settings-row__hint { color: var(--color-text-muted); font-size: 0.82rem; margin: 0.2rem 0 0; }
.settings-row__action { justify-self: end; }
@media (max-width: 720px) {
  .settings-row, .settings-row--stacked {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
  .settings-row__action { justify-self: flex-start; }
}

.settings-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.settings-table th, .settings-table td {
  padding: 0.65rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
  vertical-align: middle;
}
.settings-table tbody tr:last-child td { border-bottom: none; }
.settings-table th {
  background: var(--color-bg);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: 600;
}
.settings-table__actions { display: flex; gap: 0.35rem; justify-content: flex-end; align-items: center; }
.settings-table__actions form { margin: 0; }
.btn-link--danger { color: #b91c1c; }
.btn-link--danger:hover { color: #7f1d1d; }

/* Compact icon-only action button used in dense table rows (e.g. the
   environments list). The title attribute carries the human label so users
   still get a tooltip on hover; aria-label keeps it accessible. */
.icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.icon-action:hover,
.icon-action:focus-visible {
  color: var(--color-text);
  background: var(--color-bg);
  border-color: var(--color-border);
  outline: none;
}
.icon-action svg { display: block; }
.icon-action--danger:hover,
.icon-action--danger:focus-visible {
  color: #b91c1c;
  border-color: color-mix(in srgb, #b91c1c 35%, var(--color-border));
  background: color-mix(in srgb, #b91c1c 8%, var(--color-surface));
}
/* Members table identity cell. Name is the primary line; email sits
   directly under it as a secondary, muted line so the row reads as a
   single identity rather than two competing fields. */
.member-cell__name {
  font-weight: 500;
  color: var(--color-text);
}
.member-cell__email {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
}

/* Role indicator pill used in the members table. The owner row gets a
   distinct treatment because owner is not a value of the membership role
   enum — it's a separate concept tracked on Organisation.owner_id. */
.role-pill {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.role-pill--owner {
  background: color-mix(in srgb, var(--color-pennon-red) 12%, var(--color-surface));
  color: var(--color-pennon-red);
  border-color: color-mix(in srgb, var(--color-pennon-red) 35%, var(--color-border));
}

.api-key {
  font-size: 0.78rem;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--color-text-muted);
  background: var(--color-bg);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}
.api-key--revealed {
  /* On the one render that exposes a freshly-issued key, lift it out of the
     muted treatment so the user actually notices and copies it. */
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-pennon-red) 8%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-pennon-red) 30%, var(--color-border));
  user-select: all;
}
.api-key--masked {
  letter-spacing: 0.15em;
  color: var(--color-slate-400);
  user-select: none;
}
.api-key__warning {
  display: block;
  margin-top: 0.2rem;
  color: var(--color-pennon-red);
  font-weight: 500;
}
.env-marker {
  display: inline-block;
  width: 0.55rem; height: 0.55rem;
  border-radius: 999px;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* Reusable swatch-grid colour picker (radio group). Used by the project
   colour picker (16 swatches) and the environment colour picker (32). */
.color-grid,
.project-color-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.5rem;
  max-width: 460px;
  margin: 0.25rem 0 0;
}
@media (max-width: 540px) {
  .color-grid,
  .project-color-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.color-swatch,
.project-color-swatch {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  aspect-ratio: 1;
}
.color-swatch input[type="radio"],
.project-color-swatch input[type="radio"] {
  position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer;
}
.color-swatch__chip,
.project-color-swatch__chip {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: var(--swatch);
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  transition: transform 0.08s ease;
}
.color-swatch:hover .color-swatch__chip,
.project-color-swatch:hover .project-color-swatch__chip { transform: scale(1.05); }
.color-swatch input[type="radio"]:checked + .color-swatch__chip,
.project-color-swatch input[type="radio"]:checked + .project-color-swatch__chip {
  border-color: var(--color-text);
  box-shadow: 0 0 0 2px var(--color-bg), inset 0 0 0 1px rgba(0,0,0,0.08);
}
.color-swatch input[type="radio"]:focus-visible + .color-swatch__chip,
.project-color-swatch input[type="radio"]:focus-visible + .project-color-swatch__chip {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Coloured dot used wherever we need to mark a project (settings header,
   topbar project picker, etc.) */
.project-color-dot {
  display: inline-block;
  width: 0.6rem; height: 0.6rem;
  border-radius: 999px;
  background: var(--swatch, var(--color-text-muted));
  vertical-align: middle;
  margin-right: 0.45rem;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

.settings-form--inline { max-width: none; margin-bottom: 1.25rem; }

/* ---- Restriction notices --------------------------------------------------
 * Visual treatment for "you can't do this because of your plan or role"
 * messages. Distinct from regular hints (.form-hint, .settings-row__hint) and
 * from transient .messages flashes — these are persistent, in-flow callouts
 * that explain *why* a control is missing or disabled. Two variants:
 *   .notice--upsell  — plan limit hit; CTA links to billing.
 *   .notice--locked  — role/permission gate; informational only.
 * Both render with an icon glyph, a strong title line, and supporting copy.
 */
.notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  align-items: start;
  padding: 0.85rem 1rem;
  margin: 0.75rem 0 1.25rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.45;
}
.notice__icon {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  flex: none;
  margin-top: 0.05rem;
}
.notice__title {
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: 0.01em;
}
.notice__body { color: var(--color-text-muted); }
.notice__body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.notice__body a:hover { color: var(--color-primary-dark); }
.notice__cta {
  margin-top: 0.5rem;
  grid-column: 2;
}
.notice__cta .btn { font-size: 0.85rem; padding: 0.4rem 0.85rem; }

.notice--upsell {
  border-color: color-mix(in srgb, var(--color-pennon-red) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-pennon-red) 6%, var(--color-surface));
}
.notice--upsell .notice__icon {
  background: var(--color-pennon-red);
  color: var(--color-paper);
}

.notice--locked {
  border-color: var(--color-border);
  background: var(--color-surface-alt);
}
.notice--locked .notice__icon {
  background: var(--color-slate-300);
  color: var(--color-ink);
}

.notice--caution {
  border-color: color-mix(in srgb, var(--color-caution) 45%, var(--color-border));
  background: color-mix(in srgb, var(--color-caution) 10%, var(--color-surface));
}
.notice--caution .notice__icon {
  background: var(--color-caution);
  color: var(--color-ink);
}

:root[data-theme="dark"] .notice--upsell {
  border-color: color-mix(in srgb, var(--color-ember) 45%, var(--color-border));
  background: color-mix(in srgb, var(--color-ember) 10%, var(--color-surface));
}
:root[data-theme="dark"] .notice--upsell .notice__icon {
  background: var(--color-ember);
  color: var(--color-ink);
}
:root[data-theme="dark"] .notice--locked .notice__icon {
  background: var(--color-slate-700);
  color: var(--color-ink);
}

/* ---- Environment chips ---------------------------------------------------
 * The "Environment chips" pattern from the brand guidelines (section 05 — UI
 * patterns): an uppercase JetBrains-Mono label on a tinted surface, where the
 * tint and ink are derived from the env's own colour. By default each
 * environment type lands on a brand-aligned hex (blue / amber / red — see
 * ``Environment.DEFAULT_COLORS_BY_TYPE``), but if a user customises the colour
 * the chip follows. The tint uses ``color-mix`` over a transparent base so the
 * chip stays readable on both light and dark surfaces without per-theme CSS.
 *
 * Usage (type label only, e.g. project settings):
 *   <span class="env-chip" style="--env-color: #DC2626">PRODUCTION</span>
 *
 * Pill + colour rail (feature workspace / overview): add ``env-chip--rail`` for the
 * locked environment chip pattern (tinted surface, mono uppercase, 10% rail). Set
 * ``--env-chip-bg`` on the root ``.env-chip`` element.
 */
.env-chip:not(:has(.env-chip__name)) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  --env-color: var(--color-text-muted);
  color: var(--env-color);
  background: color-mix(in srgb, var(--env-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--env-color) 26%, transparent);
}

.env-chip__dot {
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background: var(--env-color, currentColor);
  flex-shrink: 0;
}

:root[data-theme="dark"] .env-chip:not(:has(.env-chip__name)) {
  background: color-mix(in srgb, var(--env-color) 16%, transparent);
  border-color: color-mix(in srgb, var(--env-color) 38%, transparent);
}

/* ─── Billing settings tab ────────────────────────────────────────────
 * The current-plan card mirrors the marketing-site pricing layout: a
 * left-rail price block alongside a "What's included" feature list, with
 * a chrome row above for plan label, status, and the Change-plan CTA.
 * Uses brand surface tokens so it adapts to dark mode automatically.
 */
.billing-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-elevated);
}
.billing-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.5rem;
}
.billing-card__eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 0.4rem;
}
.billing-card__title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.billing-card__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 0;
}
/* Status badge beside the plan title — tells the owner how the org stays
   active (internal/comp, Free, paid subscription, or none) at a glance. */
.billing-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}
.billing-card__badge--internal {
  background: color-mix(in srgb, var(--color-signal) 12%, var(--color-surface));
  color: var(--color-signal);
  border-color: color-mix(in srgb, var(--color-signal) 35%, var(--color-border));
}
.billing-card__badge--active {
  background: color-mix(in srgb, var(--color-live) 12%, var(--color-surface));
  color: var(--color-live);
  border-color: color-mix(in srgb, var(--color-live) 32%, var(--color-border));
}
.billing-card__badge--inactive {
  background: color-mix(in srgb, var(--color-pennon-red) 12%, var(--color-surface));
  color: var(--color-pennon-red);
  border-color: color-mix(in srgb, var(--color-pennon-red) 35%, var(--color-border));
}
.billing-card__header-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.billing-card__meta-line {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.billing-card__meta-label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-right: 0.35rem;
}
.billing-card__meta-value {
  color: var(--color-text);
  font-weight: 600;
}

.billing-card__body {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
.billing-card__plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.04), transparent 70%);
  position: relative;
}
.billing-card__plan::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-pennon-red);
}
.billing-card__plan-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--color-pennon-red);
  margin: 0.25rem 0 0.5rem;
}
.billing-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.2rem;
}
.billing-card__price-amount {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-pennon-red);
  line-height: 1;
}
.billing-card__price-cadence {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.billing-card__price-note {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0.4rem 0 0;
}
.billing-card__included {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.billing-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.65rem 1.25rem;
}
.billing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--color-text);
  line-height: 1.45;
}
.billing-card__feature-icon {
  color: var(--color-live);
  flex: none;
  margin-top: 0.15rem;
}
.billing-card__empty {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 720px) {
  .billing-card__body { grid-template-columns: 1fr; }
}

/* ─── Billing payment section ─────────────────────────────────────── */
.billing-payment__form {
  max-width: none;
  margin-bottom: 1.5rem;
}
.billing-payment__field { margin-bottom: 0.75rem; }
.billing-payment__input-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.billing-payment__input-row input[type="email"] {
  flex: 1;
  min-width: 0;
}
.billing-payment__input-row .btn {
  flex: none;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.billing-payment__label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 0.6rem;
}
.billing-payment__card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.billing-payment__card-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.billing-payment__card-line {
  margin: 0;
  font-weight: 600;
  color: var(--color-text);
}
.billing-payment__card-sub {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.billing-payment__card-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
@media (max-width: 720px) {
  .billing-payment__card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .billing-payment__card-actions { justify-self: flex-start; }
  .billing-payment__input-row { flex-direction: column; }
}

/* ─── Org discovery page (/orgs/) ─────────────────────────────────────── */
.org-discovery { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem 0; }
.org-discovery__hero {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  text-align: center;
}
.org-discovery__hero h1 { margin: 0 0 0.4rem; font-size: 1.6rem; }
.org-discovery__subtitle { margin: 0; color: var(--color-text-muted); }
.org-discovery__create {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem;
}
.org-discovery__create-trigger {
  display: block; width: 100%; text-align: center; cursor: pointer;
  list-style: none;
}
.org-discovery__create-trigger::-webkit-details-marker { display: none; }
.org-discovery__form {
  margin-top: 0.85rem;
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: 0.5rem 0.25rem 0.25rem;
}
.org-discovery__field { display: flex; flex-direction: column; gap: 0.3rem; }
.org-discovery__field label { font-size: 0.85rem; color: var(--color-text-muted); }
.org-discovery__field input {
  padding: 0.55rem 0.7rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-xs); background: var(--color-surface-alt);
  color: var(--color-ink); font: inherit;
}
.org-discovery__actions { display: flex; justify-content: flex-end; }
.org-discovery__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
}
.org-card {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 1rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  position: relative;
}
.org-card__name {
  font-size: 1.05rem; font-weight: 600; color: var(--color-ink);
  text-decoration: none;
}
.org-card__name:hover { color: var(--color-pennon-red); }
.org-card__role-pill {
  position: absolute; top: 0.7rem; right: 0.85rem;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  padding: 0.2rem 0.55rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
}
.org-card__meta { font-size: 0.85rem; color: var(--color-text-muted); }
.org-card__owner { color: var(--color-text); }

/* ─── Feature workspace (Overview / Manage / Data / Audit) ─────────── */
.feature-workspace {
  width: 100%;
  max-width: none;
  margin: 0;
}
.feature-workspace-head {
  position: sticky;
  top: 64px;
  z-index: 15;
  margin-top: -1.5rem;
  margin-left: -1.25rem;
  margin-right: -1.25rem;
  padding: 1.5rem 1.25rem 0;
  margin-bottom: 1.25rem;
  background: var(--color-bg);
}
@media (min-width: 1100px) {
  .feature-workspace-head {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
.feature-workspace-head__row--toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 0.65rem;
  min-width: 0;
}
.feature-workspace-head__left {
  display: flex;
  align-items: center;
  gap: 0.35rem 0.5rem;
  min-width: 0;
  flex: 1;
}
.feature-workspace-head__crumb {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.feature-workspace-head__crumb-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.5rem;
  height: 1.45rem;
  padding: 0;
  margin-right: 0.15rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  text-decoration: none;
}
.feature-workspace-head__crumb-back:hover {
  color: var(--color-text);
  border-color: color-mix(in srgb, var(--color-text-muted) 45%, var(--color-border));
  background: var(--color-surface);
}
.feature-workspace-head__crumb-back:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
}
.feature-workspace-head__crumb-back svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}
.feature-workspace-head__heading {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  min-width: 0;
}
.feature-workspace-head__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.feature-workspace-head__slug {
  margin-left: 0.45rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-muted);
}
.feature-workspace-head__meta-line {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.feature-workspace-head__saved-meta { margin: 0; }
@media (max-width: 960px) {
  .feature-workspace-head__row--toolbar {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .feature-workspace-head__meta-line {
    flex-basis: 100%;
    justify-content: flex-start;
    white-space: normal;
    flex-wrap: wrap;
  }
}

.feature-workspace-tabs-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.feature-workspace-tabs-row > .feature-workspace-tabs {
  border-bottom: none;
  flex: 1 1 auto;
  min-width: 0;
}
.feature-workspace-archived {
  flex: 0 0 auto;
  min-width: 16rem;
  padding: 0.1rem 0.75rem;
  margin-bottom: 0.4rem;
  background: rgba(115, 115, 115, 0.18);
  border-color: rgba(163, 163, 163, 0.5);
  color: var(--color-text);
  justify-content: flex-end;
  align-items: center;
  line-height: 1;
}
.feature-workspace-archived .manage-info-panel__text {
  font-weight: 600;
  text-align: right;
  font-size: 0.7rem;
  line-height: 1.1;
}
.feature-workspace-complete {
  flex: 0 0 auto;
  min-width: 16rem;
  padding: 0.1rem 0.75rem;
  margin-bottom: 0.4rem;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(22, 163, 74, 0.45);
  color: var(--color-text);
  justify-content: flex-end;
  align-items: center;
  line-height: 1;
}
.feature-workspace-complete .manage-info-panel__text {
  font-weight: 600;
  text-align: right;
  font-size: 0.7rem;
  line-height: 1.1;
  color: var(--color-text);
}
.manage-info-panel--bare {
  gap: 0;
}
.feature-workspace-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 0.15rem;
  border-bottom: 1px solid var(--color-border);
}
.feature-workspace-tabs__tab {
  position: relative;
  padding: 0.5rem 1rem 0.65rem;
  margin: 0 0 -1px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  background: transparent;
  transition: color 120ms ease-out, border-color 120ms ease-out, background 120ms ease-out;
}
.feature-workspace-tabs__tab:hover {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
}
.feature-workspace-tabs__tab:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
  z-index: 1;
}
.feature-workspace-tabs__tab.is-active {
  color: var(--color-ink);
  font-weight: 700;
  border-bottom-color: var(--color-primary);
}

.feature-workspace__grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .feature-workspace__grid { grid-template-columns: 1fr; }
}

.feature-workspace__rail {
  position: sticky;
  top: 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.feature-workspace-rail__heading { margin: 0 0 1rem; }
.feature-workspace-rail__group { margin-bottom: 1.1rem; }
.feature-workspace-rail__subhead {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--color-text-muted); margin: 0 0 0.45rem;
}
.feature-workspace-rail__pills {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
/* Wrapper only — production chip uses same surface as sibling env chips. */
.feature-workspace-rail__env-band {
  margin: 0;
  padding: 0;
  background: transparent;
}
.feature-workspace-rail__link {
  font-size: 0.88rem; font-weight: 600; color: var(--color-signal);
  text-decoration: none;
}
.feature-workspace-rail__link:hover { text-decoration: underline; }
.feature-workspace-rail__muted {
  font-size: 0.88rem; color: var(--color-text-muted);
}

/* Environment pills: slim colour rail + label (Inter, sentence case). */
.env-chip:has(.env-chip__name) {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--color-border) 92%, var(--color-text-muted));
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--color-surface) 100%, transparent) 0%,
    color-mix(in srgb, var(--color-bg) 38%, var(--color-surface)) 100%
  );
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  overflow: hidden;
  vertical-align: middle;
  min-height: 1.38rem;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-ink) 5%, transparent);
}
:root[data-theme="dark"] .env-chip:has(.env-chip__name) {
  border-color: color-mix(in srgb, var(--color-border) 78%, transparent);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--color-surface) 96%, #000) 0%,
    color-mix(in srgb, var(--color-bg) 55%, var(--color-surface)) 100%
  );
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 6%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.35);
}
a.env-chip:has(.env-chip__name):hover {
  border-color: color-mix(in srgb, var(--color-text-muted) 45%, var(--color-border));
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--color-bg) 25%, var(--color-surface)) 0%,
    color-mix(in srgb, var(--color-bg) 55%, var(--color-surface)) 100%
  );
}
a.env-chip:has(.env-chip__name):focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
}
.env-chip--readonly:has(.env-chip__name) {
  cursor: default;
  pointer-events: none;
}
.env-chip:has(.env-chip__name) .env-chip__color {
  width: 3px;
  flex-shrink: 0;
  align-self: stretch;
  background: var(--env-chip-bg, var(--color-mist));
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--color-ink) 8%, transparent);
}
:root[data-theme="dark"] .env-chip:has(.env-chip__name) .env-chip__color {
  box-shadow: inset -1px 0 0 color-mix(in srgb, #fff 8%, transparent);
}
.env-chip__color--striped {
  display: flex;
  flex-direction: row;
  width: auto;
  min-width: 0.85rem;
  background: transparent;
  box-shadow: none;
}
.env-chip__stripe {
  flex: 1;
  align-self: stretch;
  min-width: 0;
}
.env-chip:has(.env-chip__name) .env-chip__name {
  padding: 0.22rem 0.55rem 0.22rem 0.42rem;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
  line-height: 1.2;
  color: color-mix(in srgb, var(--color-text) 94%, var(--color-ink));
}

/*
 * Environment chip (locked): tinted surface, mono uppercase label, 10% colour rail.
 * Use ``env-chip env-chip--rail`` (+ ``env-chip--readonly`` on non-link spans).
 * Full width in workspace rail and last-updated changelog env column only.
 */
.env-chip.env-chip--rail:has(.env-chip__name) {
  min-height: 1.375rem;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--color-border) 90%, var(--env-chip-bg, var(--color-mist)));
  border-radius: var(--radius-xs);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--env-chip-bg, var(--color-mist)) 16%, var(--color-surface)) 0%,
    color-mix(in srgb, var(--env-chip-bg, var(--color-mist)) 9%, var(--color-bg)) 100%
  );
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: none;
  overflow: hidden;
}
:root[data-theme="dark"] .env-chip.env-chip--rail:has(.env-chip__name) {
  border-color: color-mix(in srgb, var(--color-border) 65%, var(--env-chip-bg, var(--color-mist)));
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--env-chip-bg, var(--color-mist)) 22%, var(--color-surface)) 0%,
    color-mix(in srgb, var(--env-chip-bg, var(--color-mist)) 12%, var(--color-bg)) 100%
  );
}
a.env-chip.env-chip--rail:has(.env-chip__name):hover {
  border-color: color-mix(in srgb, var(--color-text-muted) 35%, var(--color-border));
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--env-chip-bg, var(--color-mist)) 22%, var(--color-bg)) 0%,
    color-mix(in srgb, var(--env-chip-bg, var(--color-mist)) 14%, var(--color-surface)) 100%
  );
}
a.env-chip.env-chip--rail:has(.env-chip__name):focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
  box-shadow: none;
}
.env-chip.env-chip--rail:has(.env-chip__name) .env-chip__color {
  flex: 0 0 10%;
  width: 10%;
  align-self: stretch;
  border-radius: 0;
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--color-ink) 8%, transparent);
  background: var(--env-chip-bg, var(--color-mist));
}
:root[data-theme="dark"] .env-chip.env-chip--rail:has(.env-chip__name) .env-chip__color {
  box-shadow: inset -1px 0 0 color-mix(in srgb, #fff 10%, transparent);
}
.env-chip.env-chip--rail:has(.env-chip__name) .env-chip__name {
  flex: 1;
  min-width: 0;
  justify-content: flex-start;
  padding: 0.2rem 0.45rem 0.2rem 0.38rem;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feature-workspace-rail__pills .env-chip.env-chip--rail:has(.env-chip__name),
.last-updated-changelog__env .env-chip.env-chip--rail:has(.env-chip__name) {
  width: 100%;
  flex-shrink: 0;
}
.overview-reach__total .env-chip.env-chip--rail {
  vertical-align: middle;
}
@media (max-width: 900px) {
  .env-chip.env-chip--rail:has(.env-chip__name) {
    font-size: 0.65625rem;
    min-height: 1.3rem;
  }
}

.env-chip.env-chip--all-teal:has(.env-chip__name) {
  border-color: color-mix(in srgb, #14b8a6 42%, var(--color-border));
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #14b8a6 22%, var(--color-surface)) 0%,
    color-mix(in srgb, #0f766e 14%, var(--color-surface)) 100%
  );
  color: #ecfdf5;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 12%, transparent),
    0 1px 2px color-mix(in srgb, #0f766e 35%, transparent);
}
:root[data-theme="dark"] .env-chip.env-chip--all-teal:has(.env-chip__name) {
  border-color: color-mix(in srgb, #2dd4bf 38%, transparent);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #14b8a6 28%, var(--color-surface)) 0%,
    color-mix(in srgb, #0d9488 18%, var(--color-surface)) 100%
  );
  color: #f0fdfa;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 8%, transparent),
    0 1px 3px rgba(0, 0, 0, 0.45);
}
.env-chip.env-chip--all-teal:has(.env-chip__name) .env-chip__color {
  width: 3px;
  background: linear-gradient(180deg, #115e59 0%, #0f766e 100%);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.15);
}
.env-chip.env-chip--all-teal:has(.env-chip__name) .env-chip__name {
  color: inherit;
}

.status-pill {
  display: inline-flex;
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
}
.status-pill--complete {
  background: rgba(34, 197, 94, 0.14);
  color: #22c55e;
}

.feature-manage-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
.feature-manage-head__title {
  font-size: 1.25rem; font-weight: 700; margin: 0;
}

.manage-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
}
.manage-card__head { margin-bottom: 0.75rem; }
.manage-card--grouped { padding: 0; }
.manage-card--destructive {
  background: #fef2f2;
  border-color: #fecaca;
}
:root[data-theme="dark"] .manage-card--destructive {
  background: rgba(185, 28, 28, 0.12);
  border-color: rgba(185, 28, 28, 0.4);
}
.manage-card__destructive-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.manage-card__destructive-copy { flex: 1 1 18rem; min-width: 0; }
.manage-card__destructive-copy .manage-card__title {
  color: var(--color-text);
  margin: 0 0 0.25rem;
}
.manage-card__destructive-text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}
.manage-card__destructive-action { flex: 0 0 auto; }
.manage-card__destructive-action .btn--danger {
  background: var(--color-danger, #b91c1c);
  color: #fff;
  border-color: var(--color-danger, #b91c1c);
}
.manage-card__destructive-action .btn--danger:hover {
  background: var(--color-danger-hover, #991b1b);
  color: #fff;
  border-color: var(--color-danger-hover, #991b1b);
}
.manage-card__subsection { padding: 1rem 1.15rem; }
.manage-card__subsection--actions {
  display: flex;
  justify-content: flex-end;
}
.manage-card__subsection-divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 0;
}
.manage-card__field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.manage-card__field {
  display: flex;
  flex-direction: column;
  flex: 1 1 12rem;
  min-width: 0;
}
.manage-card__field .manage-card__input,
.manage-card__field .manage-card__select {
  width: 100%;
}
.manage-card__form--details .manage-card__label,
#maintainers-heading,
#tags-heading,
#jira-tickets-heading {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.manage-card__input[readonly] {
  background: var(--color-surface-muted, rgba(0, 0, 0, 0.04));
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.manage-card__static {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 0.9rem;
  margin: 0 0 0.5rem;
}
.manage-card__static-row { display: contents; }
.manage-card__static dt { font-weight: 600; color: var(--color-text-muted); }
.manage-card__static dd { margin: 0; }
.manage-card__inline-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.manage-card__inline-row .multi-select { flex: 1 1 auto; min-width: 0; }
.multi-select { position: relative; }
.multi-select__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.65rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
}
.multi-select__toggle:hover { border-color: var(--color-text-muted); }
.multi-select.is-open .multi-select__toggle {
  border-color: var(--color-signal, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.multi-select__label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.multi-select__caret { flex: 0 0 auto; color: var(--color-text-muted); }
.multi-select__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 14rem;
  overflow-y: auto;
  padding: 0.35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.multi-select__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.multi-select__option:hover { background: rgba(37, 99, 235, 0.08); }
.multi-select__option input[type="checkbox"] { margin: 0; }
.multi-select__empty {
  margin: 0;
  padding: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.tag-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  padding: 0.3rem 0.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: text;
}
.tag-editor.is-focused {
  border-color: var(--color-signal, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.tag-editor__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.45rem;
  font-size: 0.82rem;
  background: rgba(37, 99, 235, 0.10);
  color: var(--color-text);
  border-radius: 999px;
}
.tag-editor__chip-label { line-height: 1.2; }
.tag-editor__chip-remove {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
}
.tag-editor__chip-remove:hover { background: rgba(0, 0, 0, 0.08); color: var(--color-text); }
.tag-editor__input {
  flex: 1 1 8rem;
  min-width: 6rem;
  border: 0;
  outline: none;
  background: transparent;
  padding: 0.15rem 0.25rem;
  font: inherit;
  color: var(--color-text);
}
.chip-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-height: 2.25rem;
  padding: 0.3rem 0.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: text;
}
.chip-picker.is-focused {
  border-color: var(--color-signal, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.chip-picker__add { position: relative; }
.chip-picker__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  background: transparent;
  border: 1px dashed var(--color-border);
  border-radius: 999px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  cursor: pointer;
}
.chip-picker__add-btn:hover:not(:disabled) {
  background: rgba(37, 99, 235, 0.10);
  color: var(--color-text);
  border-color: var(--color-text-muted);
}
.chip-picker__add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.chip-picker__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  width: 16rem;
  max-width: calc(100vw - 2rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0.4rem;
}
.chip-picker__search {
  width: 100%;
  padding: 0.35rem 0.5rem;
  margin-bottom: 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
}
.chip-picker__search:focus {
  border-color: var(--color-signal, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.chip-picker__list {
  max-height: 12rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.chip-picker__option {
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--color-text);
  cursor: pointer;
}
.chip-picker__option:hover { background: rgba(37, 99, 235, 0.10); }
.chip-picker__empty {
  margin: 0;
  padding: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.manage-card__head--split {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.5rem;
}
.manage-card__title { margin: 0; font-size: 1rem; font-weight: 700; }
.manage-card__subtitle {
  margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--color-text-muted);
}
.manage-card__kicker {
  font-size: 0.8rem; color: var(--color-text-muted);
}
.manage-info-panel {
  display: flex; gap: 0.65rem; align-items: flex-start;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  background: rgba(37, 99, 235, 0.10);
  border: 1px solid rgba(37, 99, 235, 0.30);
  color: var(--color-text);
}
.manage-info-panel__icon {
  flex: 0 0 auto;
  color: rgb(37, 99, 235);
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 0.1rem;
}
.manage-info-panel__text {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.4;
}
/*
 * Variables matrix: rows = variables, columns = feature-level variations.
 * First column is the variable rowhead; remaining columns are variations.
 * Use a horizontal scroll wrapper so wide matrices don't break the card.
 */
.variables-matrix {
  display: block;
  margin-top: 0.85rem;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.variables-matrix__head,
.variables-matrix__row,
.variables-matrix__group-head {
  display: grid;
  grid-template-columns: minmax(180px, 1.05fr) repeat(var(--matrix-cols, 2), minmax(160px, 1fr));
  align-items: stretch;
}
.variables-matrix__group-head {
  background: var(--color-surface-muted, rgba(0,0,0,0.03));
  border-bottom: 1px solid var(--color-border);
}
.variables-matrix__group-th {
  /* Anchor at column 2 (skipping the "Variables" rowhead column) and span
   * across all variation columns. */
  grid-column: 2 / span var(--matrix-cols, 2);
  padding: 0.4rem 0.85rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-left: 1px solid var(--color-border);
  display: flex; align-items: center;
}
.variables-matrix__head {
  background: var(--color-surface-muted, rgba(0,0,0,0.03));
  border-bottom: 1px solid var(--color-border);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.variables-matrix__th {
  padding: 0.55rem 0.85rem;
  display: flex; align-items: center;
  border-left: 1px solid var(--color-border);
}
.variables-matrix__th:first-child { border-left: 0; }
.variables-matrix__th--rowhead { font-weight: 600; }
.variables-matrix__variation-name {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  color: var(--color-text);
  font-weight: 600;
}
.variables-matrix__row {
  border-top: 1px solid var(--color-border);
}
.variables-matrix__row:first-child { border-top: 0; }
.variables-matrix__rowhead {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.65rem 0.85rem;
}
.variables-matrix__var-stack {
  display: flex; flex-direction: column; min-width: 0; line-height: 1.2;
}
.variables-matrix__var-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.85rem;
}
.variables-matrix__var-type {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
}
.variables-matrix__cell {
  padding: 0.65rem 0.85rem;
  display: flex; align-items: center;
  border-left: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text);
}
.variables-matrix__empty {
  padding: 1rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.variables-matrix__edit-btn {
  margin-left: auto;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}
.variables-matrix__row:hover .variables-matrix__edit-btn,
.variables-matrix__edit-btn:focus-visible {
  opacity: 1;
}
.variables-matrix__edit-btn:hover {
  background: var(--color-surface-muted, rgba(0,0,0,0.06));
  color: var(--color-text);
}
.variables-matrix__rowhead--editing {
  padding: 0.5rem 0.7rem;
}
.variables-matrix__rename-form {
  display: flex; flex-direction: column; gap: 0.4rem; width: 100%;
}
.variables-matrix__rename-input {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.85rem;
}
.variables-matrix__rename-error {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-danger, #b91c1c);
}
.variables-matrix__rename-actions {
  display: flex; gap: 0.4rem;
}
.variables-matrix__cell--muted {
  color: var(--color-text-muted);
}
.variables-matrix__th { gap: 0.4rem; justify-content: space-between; }
.variables-matrix__variation-edit-btn {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}
.variables-matrix__th:hover .variables-matrix__variation-edit-btn,
.variables-matrix__variation-edit-btn:focus-visible {
  opacity: 1;
}
.variables-matrix__variation-edit-btn:hover {
  background: var(--color-surface-muted, rgba(0,0,0,0.06));
  color: var(--color-text);
}
/* Variation editor */
.variation-editor {
  padding: 1rem 1.15rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.variation-editor__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
}
.variation-editor__title { margin: 0; font-size: 0.95rem; font-weight: 700; }
.variation-editor__head-actions { display: flex; gap: 0.4rem; }
.variation-editor__row {
  display: flex; flex-direction: column; gap: 0.25rem;
}
.variation-editor__label,
.variation-editor__values-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0;
}
.variation-editor__input {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.85rem;
  width: 100%;
}
.variation-editor__values {
  display: flex; flex-direction: column; gap: 0.45rem;
  border-top: 1px solid var(--color-border);
  padding-top: 0.65rem;
}
.variation-editor__value-row {
  display: grid;
  grid-template-columns: minmax(250px, 2fr) minmax(180px, 2fr);
  gap: 0.65rem;
  align-items: center;
}
.variation-editor__value-label {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.85rem;
}
.variation-editor__value-type {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}
.variation-editor__error {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-danger, #b91c1c);
}
/*
 * Modal overlay (rendered into #modal-host by HTMX).
 * Backdrop is full-screen; closing on backdrop-click is wired by the global
 * handler in app_base.html (anything with class modal-overlay clicked).
 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.modal-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 32rem;
  max-height: calc(100vh - 2rem);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal-card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
}
.modal-card__title { margin: 0; font-size: 1rem; font-weight: 700; }
.modal-card--danger .modal-card__head { gap: 0.65rem; justify-content: flex-start; }
.modal-card__head--danger { align-items: center; justify-content: flex-start; }
.modal-card__danger-icon {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.12);
  color: var(--color-danger, #b91c1c);
}
.modal-card__title-key {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}
.modal-card__foot .btn--danger {
  background: var(--color-danger, #b91c1c);
  color: #fff;
  border-color: var(--color-danger, #b91c1c);
}
.modal-card__foot .btn--danger:hover {
  background: color-mix(in srgb, var(--color-danger, #b91c1c) 85%, #000);
  border-color: color-mix(in srgb, var(--color-danger, #b91c1c) 85%, #000);
  color: #fff;
}
.modal-card__foot .btn--danger:disabled,
.modal-card__foot .btn--danger[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.modal-card__close {
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: inline-flex;
}
.modal-card__close:hover { color: var(--color-text); background: var(--color-surface-muted, rgba(0,0,0,0.06)); }
.modal-card__body {
  padding: 1rem 1.1rem;
  overflow: auto;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.modal-card__foot {
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--color-border);
  display: flex; gap: 0.5rem; justify-content: flex-end;
  align-items: center;
}
.modal-card__foot-left { margin-right: auto; }
.modal-form { display: contents; }
.modal-field { display: flex; flex-direction: column; gap: 0.25rem; }
.modal-field__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.modal-field__label--plain {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}
.modal-field__input,
.modal-field__select,
.modal-field__textarea {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
}
.modal-field__textarea {
  resize: vertical;
  min-height: 4.5rem;
  line-height: 1.4;
}
.modal-field__error {
  font-size: 0.75rem;
  color: var(--color-danger, #b91c1c);
}
.modal-field__hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.modal-card--wide { max-width: 60rem; }

/* Mark-as-Complete modal: variation picker matrix. Each variation
   is a column header (selectable card); each variable is a row
   showing the value it would resolve to under each variation.
   The selected column is highlighted with the primary tint to
   make the "this is what every env will serve" choice obvious. */
/* Mark-as-Complete modal sits inside a `modal-card--wide` shell but
   doesn't need the full 60rem — the matrix is a key column + N narrow
   value columns, so 42rem keeps everything readable without the
   dialog dominating the viewport. */
.modal-card--complete { max-width: 42rem; }

.complete-modal__matrix {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface);
  font-size: 0.75rem;
}
.complete-modal__head-row,
.complete-modal__sub-row,
.complete-modal__row {
  display: grid;
  /* grid-template-columns is set inline by the template — one wide name
     column followed by one value column per variation — because var()
     inside repeat() is not reliably resolved across browsers. */
  align-items: stretch;
}
/* Pin every grid item in the head row (label + variation cards) to
   the same explicit single-track height so the cards' selection
   highlight always reaches the bottom edge of the row. Using
   grid-template-rows (rather than min-height / grid-auto-rows + an
   intrinsic content row) prevents the row from over-growing past
   the cards and leaving a strip of unstretched space at the bottom. */
.complete-modal__head-row { grid-template-rows: 2.5rem; }
.complete-modal__head-label {
  display: flex; align-items: center;
  padding: 0.7rem 0.9rem;
  font-size: 0.75rem; color: var(--color-text-muted);
}
/* Variation cards behave as flush column cells: they span the grid
   track edge-to-edge with no border and no radius, matching the
   variable value cells underneath. The check icon + name sit inside
   the same horizontal padding the row-cells use. */
.complete-modal__variation-card {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 0.55rem;
  padding: 0.7rem 0.9rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  user-select: none;
  font-size: 0.75rem;
  color: var(--color-text);
  transition: background 0.12s ease;
}
.complete-modal__variation-card:hover { background: rgba(34, 197, 94, 0.06); }
.complete-modal__variation-card--active {
  background: rgba(34, 197, 94, 0.14);
}
.complete-modal__variation-radio {
  position: absolute; opacity: 0; pointer-events: none;
}
.complete-modal__variation-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem; border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: transparent;
}
.complete-modal__variation-card--active .complete-modal__variation-check {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.complete-modal__variation-name { font-weight: 600; }

.complete-modal__sub-row {
  background: var(--color-bg-muted, var(--color-bg));
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.complete-modal__sub-label,
.complete-modal__sub-cell {
  padding: 0.55rem 0.9rem;
}
/* The VALUE sub-row is purely a column header — keep it neutral so
   the green column highlight only appears on the variation card and
   the variable value cells underneath, never on the header strip. */

.complete-modal__row { border-top: 1px solid var(--color-border); }
.complete-modal__row:first-of-type { border-top: 0; }
.complete-modal__row-key {
  display: flex; flex-direction: column;
  padding: 0.7rem 0.9rem;
  gap: 0.15rem;
}
.complete-modal__row-key-name { font-weight: 600; color: var(--color-text); }
.complete-modal__row-key-type {
  font-size: 0.65rem;
  color: var(--color-text-muted);
}
.complete-modal__row-cell {
  padding: 0.7rem 0.9rem;
  display: flex; align-items: center;
  font-size: 0.75rem;
  color: var(--color-text);
}
.complete-modal__row-cell--active {
  background: rgba(34, 197, 94, 0.10);
}
.complete-modal__row-cell-empty { color: var(--color-text-muted); }
.complete-modal__row--empty {
  display: block;
  padding: 0.9rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}
.modal-card__head-actions {
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.modal-card__docs-link {
  gap: 0.35rem;
  padding: 0.42rem 1rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.8rem;
  font-weight: 500;
}
.modal-card__docs-link:hover {
  border-color: color-mix(in srgb, var(--color-text-muted) 45%, var(--color-border));
  color: var(--color-ink);
  background: var(--color-surface);
}
.modal-card__subtitle {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}
/* Prose variant: longer descriptive sentences shouldn't be uppercased
   eyebrow text. Larger size, normal case, comfortable line height. */
.modal-card__subtitle--prose {
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.45;
  margin-top: 0.25rem;
}
.modal-card__intro {
  margin: 0 0 0.85rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.modal-section-divider {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0.35rem 0 0.15rem;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.modal-section-divider::before,
.modal-section-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-border);
}
.modal-section-divider__label { flex: 0 0 auto; white-space: nowrap; }
.modal-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
}
.modal-table__head {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  background: var(--color-bg);
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
}
.modal-table__head--key { width: 65%; }
.modal-table__head--type { width: 35%; }
.modal-table__cell {
  padding: 0.4rem 0.5rem;
  vertical-align: middle;
}
.modal-field__input--cell,
.modal-field__select--cell {
  width: 100%;
  border-color: transparent;
  background: transparent;
  padding: 0.35rem 0.45rem;
  font-size: 0.85rem;
}
.modal-field__input--cell:focus,
.modal-field__select--cell:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
  border-radius: var(--radius-xs, 4px);
}
.feature-type-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.85rem;
}
.feature-type-card {
  position: relative;
  display: flex; flex-direction: column;
  text-align: left;
  padding: 1.1rem 1.1rem 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  font: inherit;
  min-height: 16rem;
}
.feature-type-card:hover,
.feature-type-card:focus-visible {
  background: var(--color-surface);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
  outline: none;
}
.feature-type-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  margin-bottom: 0.85rem;
  transition: background 120ms ease, color 120ms ease;
}
.feature-type-card:hover .feature-type-card__icon,
.feature-type-card:focus-visible .feature-type-card__icon {
  background: var(--color-primary);
  color: #fff;
}
.feature-type-card__title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
}
.feature-type-card__desc {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}
.feature-type-card__desc + .feature-type-card__desc { margin-top: 0.5rem; }
.feature-type-card__desc--example { flex: 1 1 auto; }
.feature-type-card__cta {
  margin-top: 0.85rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}
.feature-type-card:hover .feature-type-card__cta,
.feature-type-card:focus-visible .feature-type-card__cta {
  color: var(--color-primary);
}
.manage-card__callout {
  display: flex; gap: 0.65rem; align-items: flex-start;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(37, 99, 235, 0.35);
  color: var(--color-text);
  font-size: 0.88rem;
  line-height: 1.45;
  margin-bottom: 0.85rem;
}
.manage-card__callout p { margin: 0; }
.manage-card__callout-icon {
  flex: none; color: var(--color-signal);
  margin-top: 0.1rem;
}

.cleanup-table__head {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(80px, 0.6fr) minmax(180px, 1.4fr) auto;
  gap: 0.65rem;
  padding: 0.45rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.cleanup-table__row {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(80px, 0.6fr) minmax(180px, 1.4fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.75rem 0.65rem;
  border-bottom: 1px solid var(--color-border);
}
.cleanup-table__row:last-child { border-bottom: none; }
.cleanup-table--simple .cleanup-table__head,
.cleanup-table--simple .cleanup-table__row {
  grid-template-columns: minmax(140px, 1fr) minmax(80px, 0.8fr) auto;
}
.cleanup-table__key {
  display: flex; align-items: center; gap: 0.45rem; min-width: 0;
}
.cleanup-table__key-stack {
  display: flex; flex-direction: column; min-width: 0; line-height: 1.2;
}
.cleanup-table__key-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cleanup-table__key-meta {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
  text-transform: none;
  letter-spacing: 0;
}
.cleanup-table__icon-btn {
  flex: none; color: var(--color-text-muted); padding: 0.2rem;
  border-radius: 4px;
}
.cleanup-table__icon-btn:hover { color: var(--color-text); background: var(--color-bg); }
.cleanup-table__actions {
  display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end;
}
.cleanup-table__actions--narrow { min-width: 5rem; }
.cleanup-table__empty { padding: 1rem 0.65rem; color: var(--color-text-muted); margin: 0; }

.var-type-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex: none;
}
.var-type-dot--boolean { background: #22c55e; }
.var-type-dot--number { background: var(--color-signal); }
.var-type-dot--string { background: #a78bfa; }

.cleanup-steps {
  list-style: none; margin: 0; padding: 0;
  font-size: 0.86rem; color: var(--color-text);
}
.cleanup-steps li {
  display: flex; align-items: flex-start; gap: 0.4rem;
  margin-bottom: 0.35rem;
}
.cleanup-steps li:last-child { margin-bottom: 0; }
.cleanup-steps__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-text-muted);
  margin-top: 0.45rem; flex: none;
}
.cleanup-steps a { color: var(--color-signal); font-weight: 600; }

.env-target-card {
  border-left: 4px solid var(--env-accent, var(--color-border));
}
.env-target-card--dev { --env-accent: #22c55e; }
.env-target-card--sandbox { --env-accent: #f97316; }
.env-target-card--prod { --env-accent: #ef4444; }
.manage-card__target-head { margin-bottom: 0.65rem; }
.manage-card__target-body {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
}
.manage-card__hint {
  margin: 0; font-size: 0.85rem; color: var(--color-text-muted); flex: 1; min-width: 200px;
}
.manage-card__info-pill {
  display: flex; gap: 0.55rem; align-items: flex-start;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(37, 99, 235, 0.28);
  font-size: 0.82rem;
  line-height: 1.45;
  max-width: 520px;
}
.manage-card__info-pill svg { flex: none; color: var(--color-signal); margin-top: 0.12rem; }
.manage-card__info-pill p { margin: 0; }

.target-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  border: 1px solid transparent;
}
.target-pill--on {
  background: rgba(34, 197, 94, 0.16);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.35);
}
.target-pill--off {
  background: var(--color-bg);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.target-pill--link { text-decoration: none; cursor: pointer; }
.target-pill--link:hover { filter: brightness(1.08); }
.target-pill--locked { cursor: default; }

/* ─── Feature workspace · Audit tab ─────────────────────────────────
 * Cards-of-bundles layout per the brand UI: each card represents a
 * cluster of audit rows (same environment, <= 60s apart) and exposes
 * a View Details accordion that mirrors the overview card. The
 * filter row above re-uses the shape of the Data tab's filter bar so
 * the workspace tabs feel consistent.
 */
.feature-audit { display: flex; flex-direction: column; gap: 1.25rem; }

.feature-audit__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: end;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow-elevated);
}
.feature-audit__filter {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 220px;
  flex: 1 1 220px;
}
.feature-audit__filter--range { flex: 2 1 320px; }
.feature-audit__filter-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.feature-audit__select,
.feature-audit__date {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text);
  width: 100%;
}
.feature-audit__select:focus,
.feature-audit__date:focus {
  outline: none;
  border-color: var(--color-pennon-red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-pennon-red) 18%, transparent);
}
.feature-audit__date-pair {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.feature-audit__date-sep { color: var(--color-text-muted); }

.feature-audit__bundles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.feature-audit__bundle {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
}

.feature-audit__bundle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
}
.feature-audit__bundle-summary {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  flex: 1 1 auto;
}
.feature-audit__bundle-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-pennon-red) 14%, transparent);
  color: var(--color-pennon-red);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feature-audit__bundle-meta { min-width: 0; }
.feature-audit__bundle-title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.15rem;
  flex-wrap: wrap;
}
.feature-audit__bundle-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
}
.feature-audit__bundle-actor-line {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.feature-audit__bundle-when { color: var(--color-text-muted); }
.feature-audit__bundle-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.feature-audit__bundle-body {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  padding: 0.85rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.feature-audit__row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.feature-audit__row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.feature-audit__row-title {
  margin: 0;
  font-size: 0.82rem;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
}
.feature-audit__row-time {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.feature-audit__row-changes {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  color: var(--color-text);
  line-height: 1.5;
}
.feature-audit__row-changes li { margin: 0.1rem 0; }

.feature-audit__rule-card {
  margin-top: 0.35rem;
  padding: 0.6rem 0.8rem;
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
}
.feature-audit__rule-card-title {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
}
.feature-audit__rule-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.feature-audit__rule-card-k {
  display: inline-block;
  min-width: 80px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-right: 0.5rem;
}

.feature-audit__row-conditions {
  margin-top: 0.35rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface-alt);
  border-left: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.feature-audit__row-conditions-title {
  margin: 0 0 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.feature-audit__row-conditions-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  font-family: var(--font-mono);
  color: var(--color-text);
  line-height: 1.5;
}
.feature-audit__row-conditions-list li { margin: 0.1rem 0; }

.feature-audit__bundle-env-all {
  --env-chip-bg: var(--color-mist);
}

.feature-audit__empty {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
  color: var(--color-text-muted);
}
.feature-audit__empty p { margin: 0; }

:root[data-theme="dark"] .feature-audit__bundle,
:root[data-theme="dark"] .feature-audit__row,
:root[data-theme="dark"] .feature-audit__filters {
  background: var(--color-surface);
  border-color: var(--color-border);
}
:root[data-theme="dark"] .feature-audit__bundle-body {
  background: var(--color-bg);
}
:root[data-theme="dark"] .feature-audit__select,
:root[data-theme="dark"] .feature-audit__date {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}
:root[data-theme="dark"] .feature-audit__bundle-title {
  color: var(--color-text);
}
:root[data-theme="dark"] .feature-audit__bundle-actor-line,
:root[data-theme="dark"] .feature-audit__bundle-when,
:root[data-theme="dark"] .feature-audit__row-time,
:root[data-theme="dark"] .feature-audit__filter-label {
  color: var(--color-text-muted);
}
:root[data-theme="dark"] .feature-audit__bundle-avatar {
  background: color-mix(in srgb, var(--color-ember) 22%, transparent);
  color: var(--color-ember);
}
:root[data-theme="dark"] .feature-audit__rule-card {
  background: var(--color-bg);
  border-color: var(--color-border);
}

:root[data-theme="dark"] .feature-audit__row-conditions {
  background: var(--color-bg);
  border-color: var(--color-border);
}

.feature-data__title { margin: 0 0 0.75rem; }
.feature-data__copy { margin: 0 0 1rem; color: var(--color-text-muted); max-width: 60ch; line-height: 1.5; }

/* ─── Feature workspace · Data tab (Reach) ────────────────────────── */
.feature-reach__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: end;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}
.feature-reach__filter {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1 1 12rem;
  min-width: 10rem;
}
.feature-reach__filter-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}
.feature-reach__select {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  width: 100%;
}
.feature-reach__select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.feature-reach__filter--range { flex: 2 1 22rem; }
.feature-reach__date-pair {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.feature-reach__date { flex: 1 1 0; min-width: 0; }
.feature-reach__date-sep {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.feature-reach__filter--chart-type { flex: 0 0 auto; min-width: 0; }
.feature-reach__chart-type {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--color-bg);
}
.feature-reach__chart-type-btn {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  color: var(--color-text-muted);
  border-right: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background-color 120ms ease, color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.feature-reach__chart-type-btn:last-child { border-right: 0; }
.feature-reach__chart-type-btn:hover {
  background: var(--color-surface);
  color: var(--color-ink);
}
.feature-reach__chart-type-btn.is-active {
  background: var(--color-ink);
  color: var(--color-bg);
}
.feature-reach__chart-type-btn:focus { outline: none; }
.feature-reach__chart-type-btn:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: -2px;
}
.feature-reach__chart-type-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.feature-reach__bar { transition: opacity 120ms ease; }
.feature-reach__bar:hover { opacity: 0.85; }
.feature-reach__line { transition: opacity 120ms ease; }

.feature-reach__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.6rem;
}

.feature-reach__card { padding: 1.1rem 1.25rem 1.25rem; }
.feature-reach__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.feature-reach__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.feature-reach__totals-table {
  width: 100%;
  margin-top: 1.1rem;
  border-collapse: collapse;
}
.feature-reach__totals-th {
  text-align: left;
  padding: 0.6rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.feature-reach__totals-th--num { text-align: right; }
.feature-reach__totals-row + .feature-reach__totals-row .feature-reach__totals-td {
  border-top: 1px solid var(--color-border);
}
.feature-reach__totals-td {
  padding: 0.7rem 0.85rem;
  font-size: 0.9rem;
  color: var(--color-text);
  vertical-align: middle;
}
.feature-reach__totals-td .feature-reach__legend-swatch {
  margin-right: 0.5rem;
  vertical-align: middle;
}
.feature-reach__totals-td--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─── Feature overview tab (two-column workspace) ─────────────────── */
.feature-overview-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 1080px) {
  .feature-overview-shell {
    grid-template-columns: 1fr;
  }
}
.feature-overview-shell__main { min-width: 0; }
.feature-overview-shell__side { min-width: 0; }

.overview-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
}
.overview-panel__title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.overview-panel__title--inline { margin-bottom: 0.35rem; }

.overview-panel__header--details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.overview-panel__header--details .overview-panel__title {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.overview-details__manage-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  text-decoration: none;
}
.overview-details__manage-btn svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}
.overview-details__manage-btn:hover {
  color: var(--color-text);
  border-color: color-mix(in srgb, var(--color-text-muted) 45%, var(--color-border));
  background: var(--color-surface);
}
.overview-details__manage-btn:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
}

.last-updated-card__heading {
  margin: 0 0 1rem;
}

.last-updated-card__main-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  min-width: 0;
}

.last-updated-card__cluster {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding-left: 0.65rem;
}

.last-updated-card__event {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  line-height: 1.4;
  text-transform: none;
}

.last-updated-card__actor {
  margin: 0.05rem 0 0;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-muted);
  line-height: 1.35;
  word-break: break-word;
}

.last-updated-card__when {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-text-muted) 58%, var(--color-surface));
  line-height: 1.35;
}

.last-updated-card__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 1rem;
  min-width: 8.5rem;
  margin-top: 0.15rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.last-updated-card__toggle:hover {
  border-color: color-mix(in srgb, var(--color-text-muted) 45%, var(--color-border));
  color: var(--color-ink);
  background: var(--color-surface);
}
.last-updated-card__toggle:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
}

.last-updated-card__toggle-label {
  white-space: nowrap;
}

.last-updated-card__expanded {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
}

.last-updated-changelog {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.last-updated-changelog__row {
  display: grid;
  grid-template-columns: minmax(7rem, 9.5rem) minmax(0, 1fr);
  gap: 0.65rem 1rem;
  align-items: start;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-border);
}
.last-updated-changelog__row:last-child {
  border-bottom: none;
}

.last-updated-changelog__env {
  padding-top: 0.12rem;
}

.last-updated-changelog__detail {
  padding-left: 0.85rem;
  border-left: 2px solid var(--changelog-env-color, var(--color-border));
  min-width: 0;
}

.last-updated-changelog__action {
  margin: 0 0 0.2rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.35;
}

.last-updated-changelog__changes {
  margin: 0.15rem 0 0;
  padding-left: 1.05rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.45;
  list-style: disc;
}

.last-updated-changelog__changes li {
  margin: 0.15rem 0;
}

.last-updated-rule-card {
  margin-top: 0.55rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: #7f1d1d;
  border: 1px solid rgba(127, 29, 29, 0.85);
  color: #fef2f2;
}

:root[data-theme="dark"] .last-updated-rule-card {
  background: #450a0a;
  border-color: rgba(248, 113, 113, 0.28);
  color: #fecaca;
}

.last-updated-rule-card__title {
  margin: 0 0 0.55rem;
  font-size: 0.88rem;
  font-weight: 700;
}

.last-updated-rule-card__list {
  margin: 0;
  padding-left: 1rem;
  font-size: 0.8rem;
  line-height: 1.55;
}

.last-updated-rule-card__k {
  font-weight: 700;
  margin-right: 0.35rem;
}

@media (max-width: 560px) {
  .last-updated-changelog__row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 0.5rem 0;
  }
  .last-updated-changelog__detail {
    padding-left: 0.65rem;
    margin-left: 0.15rem;
    border-left-width: 2px;
  }
}

.last-updated-card__empty {
  margin: 0;
}

@media (max-width: 640px) {
  .last-updated-card__main-row {
    flex-wrap: wrap;
  }
  .last-updated-card__toggle {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
}

.feature-summary-card {
  padding: 1.25rem 1.5rem 1.5rem;
}
.feature-summary-card__header {
  margin: 0 0 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.feature-summary-card__title-block {
  min-width: 0;
  flex: 1 1 auto;
}
.feature-summary-card__title-text {
  margin: 0;
}
.feature-summary-card__hint {
  margin: 0.35rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.feature-summary-card__hint em {
  font-style: italic;
}
.feature-summary-card__hint a {
  color: var(--color-signal);
  font-weight: 600;
  font-style: italic;
  text-decoration: none;
}
.feature-summary-card__hint a:hover {
  text-decoration: underline;
}
.feature-summary-card__hint-icon {
  flex: 0 0 auto;
  opacity: 0.85;
}
.feature-summary-card__header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}
.feature-summary-card__edit-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.feature-summary-card .feature-summary-card__btn-edit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  padding: 0;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.feature-summary-card .feature-summary-card__btn-edit-icon:hover {
  color: var(--color-text);
  border-color: color-mix(in srgb, var(--color-text-muted) 45%, var(--color-border));
  background: var(--color-surface);
}
.feature-summary-card .feature-summary-card__btn-edit-icon:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
}
.feature-summary-card .feature-summary-card__btn-edit-icon svg {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
}
.feature-summary-card__body {
  min-width: 0;
}
.feature-summary-card__view {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.feature-summary-card__view:has(.feature-summary-markdown) {
  min-height: 0;
  justify-content: flex-start;
}
.feature-summary-card__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.75rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: var(--shadow-flat);
  min-height: 260px;
}
.feature-summary-card__empty--readonly {
  border-style: dashed;
}
.feature-summary-card__icon {
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}
.feature-summary-card__empty-title {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.02em;
}
.feature-summary-card__empty-hint {
  margin: 0 0 1.35rem;
  max-width: none;
  width: 100%;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feature-summary-card__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
}
.feature-summary-markdown {
  width: 100%;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text);
  text-align: left;
}
.feature-summary-markdown :first-child {
  margin-top: 0;
}
.feature-summary-markdown :last-child {
  margin-bottom: 0;
}
.feature-summary-markdown h1,
.feature-summary-markdown h2,
.feature-summary-markdown h3 {
  margin: 1rem 0 0.5rem;
  font-weight: 700;
  color: var(--color-ink);
}
.feature-summary-markdown p {
  margin: 0.5rem 0;
}
.feature-summary-markdown ul,
.feature-summary-markdown ol {
  margin: 0.5rem 0;
  padding-left: 1.35rem;
}
.feature-summary-markdown ul {
  list-style: disc;
}
.feature-summary-markdown ol {
  list-style: decimal;
}
.feature-summary-markdown li {
  margin: 0.25rem 0;
}
.feature-summary-markdown li > ul,
.feature-summary-markdown li > ol {
  margin-top: 0.25rem;
}
.feature-summary-markdown blockquote {
  margin: 0.75rem 0;
  padding-left: 0.85rem;
  border-left: 3px solid var(--color-border);
  color: var(--color-text-muted);
}
.feature-summary-markdown pre {
  overflow-x: auto;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-xs);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.feature-summary-markdown code {
  font-family: var(--font-mono);
  font-size: 0.84em;
}
.feature-summary-markdown pre code {
  font-size: inherit;
}
.feature-summary-markdown a {
  color: var(--color-signal);
  font-weight: 600;
}
.feature-summary-card__actions-row {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-start;
}
.feature-summary-card__editor {
  padding-top: 0.25rem;
}
.feature-summary-editor {
  width: 100%;
  box-sizing: border-box;
  min-height: 220px;
  padding: 0.75rem 0.85rem;
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.45;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  resize: vertical;
}
.feature-summary-editor:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
}
.feature-summary-card__form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.feature-summary-card .feature-summary-card__btn-add.btn--primary,
.feature-summary-card .feature-summary-card__btn-save.btn--primary {
  font-weight: 600;
}
.feature-summary-card .feature-summary-card__btn-add.btn--primary:hover,
.feature-summary-card .feature-summary-card__btn-save.btn--primary:hover {
  filter: brightness(1.08);
  color: #fff;
}

.overview-reach__panel-head {
  margin: 0 0 0.5rem;
}
.overview-reach__panel-title {
  margin: 0;
}
.overview-reach__head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
@media (max-width: 720px) {
  .overview-reach__head {
    flex-wrap: wrap;
  }
}
.overview-reach__filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: center;
  flex: 1;
  min-width: 0;
}
@media (max-width: 720px) {
  .overview-reach__filters {
    flex-wrap: wrap;
    flex: 1 1 100%;
  }
}
.overview-reach__filter-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.overview-reach__actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}
.overview-reach__audit-toggle-btn {
  font-weight: 500;
  color: var(--color-text);
}
.overview-reach__audit-toggle-btn::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 0;
  margin-right: 0.4rem;
  border-top: 2px dashed color-mix(in srgb, var(--color-signal) 70%, transparent);
  vertical-align: middle;
}
.overview-reach__audit-toggle-btn.is-active {
  background: color-mix(in srgb, var(--color-signal) 8%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-signal) 35%, var(--color-border));
  color: var(--color-ink);
}
.overview-reach__audit-toggle-btn:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
}
.overview-reach__select {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  max-width: 100%;
}
.overview-reach__select--env {
  width: 11rem;
}
.overview-reach__select--period {
  width: 9rem;
}
.overview-reach__select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.overview-reach__audit-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-signal);
  text-decoration: none;
}
.overview-reach__audit-link:hover { text-decoration: underline; }
.overview-reach__chart-title {
  margin: 0 0 0.35rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--color-ink);
  letter-spacing: -0.02em;
}
.overview-reach__total {
  margin: 0 0 0.65rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.overview-reach__chart-shell {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-flat);
  padding: 0.65rem 0.5rem 0.75rem;
  margin-top: 0;
}
.overview-reach__svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 360;
}
.overview-reach__grid-line {
  stroke: var(--color-border);
  stroke-width: 1;
}
.overview-reach__axis-label {
  fill: var(--color-text-muted);
  font-size: 10px;
  font-family: inherit;
}
.overview-reach__y-axis,
.overview-reach__x-axis {
  stroke: var(--color-border);
  stroke-width: 1;
}
.overview-reach__tick-label {
  fill: var(--color-text-muted);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 500;
}
.overview-reach__line--on {
  stroke: var(--color-signal);
}
.overview-reach__line--off {
  stroke: #0d9488;
}
:root[data-theme="dark"] .overview-reach__line--off {
  stroke: #5eead4;
}
.overview-reach__line--defaulted {
  stroke: var(--color-caution);
}
.overview-reach__marker--on {
  fill: color-mix(in srgb, var(--color-signal) 65%, var(--color-surface));
  stroke: var(--color-signal);
  stroke-width: 1;
}
.overview-reach__audit-line {
  stroke: color-mix(in srgb, var(--color-signal) 50%, transparent);
  stroke-width: 1;
  stroke-dasharray: 5 5;
  pointer-events: none;
  transition: stroke 120ms ease-out, stroke-width 120ms ease-out;
}
.overview-reach__audit {
  cursor: pointer;
  outline: none;
}
.overview-reach__audit:hover .overview-reach__audit-line,
.overview-reach__audit:focus-visible .overview-reach__audit-line {
  stroke: var(--color-signal);
  stroke-width: 1.5;
}
.overview-reach__audit-hit {
  cursor: pointer;
}
.overview-reach__tooltip {
  position: absolute;
  z-index: 5;
  min-width: 180px;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(10,10,10,.06);
  font-size: 0.68rem;
  color: var(--color-text);
  transform: translate(-50%, calc(-100% - 8px));
  pointer-events: none;
}
:root[data-theme="dark"] .overview-reach__tooltip {
  background: #3a3a3f;
  border-color: #6a6a72;
  color: #fafafa;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
}
.overview-reach__tooltip-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.3rem;
  font-weight: 600;
  color: var(--color-ink);
}
.overview-reach__tooltip-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-signal);
}
.overview-reach__tooltip-title {
  font-size: 0.68rem;
  font-weight: 600;
}
.overview-reach__tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.1rem 0;
}
.overview-reach__tooltip-meta {
  margin-left: 0.25rem;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.74rem;
}
.overview-reach__tooltip-list {
  list-style: disc;
  padding-left: 1rem;
  margin: 0.1rem 0 0;
  color: var(--color-text);
  font-size: 0.68rem;
  line-height: 1.5;
}
.overview-reach__tooltip-list-item {
  padding: 0.05rem 0;
}
.overview-reach__tooltip-note {
  margin: 0.4rem 0 0;
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.74rem;
}
:root[data-theme="dark"] .overview-reach__tooltip-header,
:root[data-theme="dark"] .overview-reach__tooltip-title {
  color: #fafafa;
}
:root[data-theme="dark"] .overview-reach__tooltip-list,
:root[data-theme="dark"] .overview-reach__tooltip-list-item {
  color: #ededed;
}
:root[data-theme="dark"] .overview-reach__tooltip-meta,
:root[data-theme="dark"] .overview-reach__tooltip-note {
  color: #c4c4c8;
}
.overview-reach__audit-pill {
  pointer-events: none;
}
.overview-reach__audit-pill-bg {
  fill: var(--color-surface);
  stroke: color-mix(in srgb, var(--color-signal) 45%, var(--color-border));
  stroke-width: 1;
}
:root[data-theme="dark"] .overview-reach__audit-pill-bg {
  fill: color-mix(in srgb, var(--color-signal) 18%, var(--color-surface));
  stroke: color-mix(in srgb, var(--color-signal) 55%, transparent);
}
.overview-reach__audit-pill-text {
  fill: var(--color-ink);
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 600;
}
:root[data-theme="dark"] .overview-reach__audit-pill-text {
  fill: #fafafa;
}
.overview-reach__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}
.overview-reach__legend-item {
  background: transparent;
  border: 1px solid transparent;
  padding: 0.2rem 0.55rem;
  color: var(--color-ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  border-radius: 999px;
  transition: background-color 120ms ease, border-color 120ms ease,
              color 120ms ease, opacity 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.overview-reach__legend-item:hover {
  background: var(--color-surface);
}
/* Active (series visible) — subtle pill highlight so it's obvious which
   series are on. The swatch already carries the per-series colour. */
.overview-reach__legend-item:not(.is-off) {
  background: var(--color-surface);
  border-color: var(--color-border);
}
/* Inactive (series hidden) — clearly muted with strikethrough on the label
   so it reads as off, not just "low contrast". */
.overview-reach__legend-item.is-off {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.7;
}
.overview-reach__legend-item.is-off .overview-reach__legend-swatch {
  opacity: 0.35;
  filter: grayscale(0.6);
}
/* Suppress the chunky default focus ring left after a mouse click; keep a
   visible outline for keyboard navigation only. */
.overview-reach__legend-item:focus { outline: none; }
.overview-reach__legend-item:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
}
.overview-reach__legend-swatch {
  width: 14px;
  height: 3px;
  border-radius: 1px;
  flex-shrink: 0;
}
.overview-reach__legend-swatch--on {
  background: var(--color-signal);
}
.overview-reach__legend-swatch--off {
  background: #0d9488;
}
:root[data-theme="dark"] .overview-reach__legend-swatch--off {
  background: #5eead4;
}
.overview-reach__legend-swatch--defaulted {
  background: var(--color-caution);
}
.overview-reach__audit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.overview-reach__footnote-sep {
  opacity: 0.45;
  margin: 0 0.3rem;
}
.overview-reach__footnote {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.overview-reach__footnote a {
  color: var(--color-signal);
  font-weight: 600;
  text-decoration: none;
}
.overview-reach__footnote a:hover { text-decoration: underline; }

/* Feature overview — Variables table (after Reach) */
.overview-panel--variables.overview-variables-panel {
  background: var(--color-surface);
  border-color: var(--color-border);
  padding: 1rem 1.1rem 0.85rem;
}
.overview-variables-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.overview-variables-panel__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}
.overview-variables-panel__expand {
  /* Outer header uses .overview-details__manage-btn for sizing; keep class for focus overrides */
  border-radius: var(--radius-xs);
}
.overview-variables-panel__table-scroll {
  overflow-x: auto;
  margin: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}
.overview-variables-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.overview-variables-table__th {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.62rem;
  font-weight: 650;
  color: var(--color-text-muted);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 88%, var(--color-surface));
}
.overview-variables-table__th--tags,
.overview-variables-table__th--desc {
  width: 18%;
}
.overview-variables-table__th--details {
  text-align: right;
  width: 3.25rem;
}
.overview-variables-table__row {
  transition: background-color 0.12s ease;
}
.overview-variables-table__row:hover {
  background: color-mix(in srgb, var(--color-text-muted) 6%, transparent);
}
.overview-variables-table__td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text);
}
.overview-variables-table__row:last-child .overview-variables-table__td {
  border-bottom: none;
}
.overview-variables-table__name-cell {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
.overview-variables-table__type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--color-surface);
}
.overview-variables-table__type-badge--boolean {
  background: radial-gradient(circle at 30% 30%, #4ade80, #15803d);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}
.overview-variables-table__type-badge--number {
  background: radial-gradient(circle at 30% 30%, #60a5fa, #1d4ed8);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}
.overview-variables-table__type-badge--string {
  background: radial-gradient(circle at 30% 30%, #fbbf24, #b45309);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}
.overview-variables-table__name-stack {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.overview-variables-table__slug {
  font-weight: 650;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overview-variables-table__slug:hover {
  color: var(--color-signal);
  text-decoration: underline;
}
.overview-variables-table__slug:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
  border-radius: 2px;
}
.overview-variables-table__type-label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.overview-variables-table__placeholder {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}
.overview-variables-table__detail-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  margin-left: auto;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 600;
}
.overview-variables-table__detail-link:hover {
  color: var(--color-text);
  border-color: color-mix(in srgb, var(--color-text-muted) 45%, var(--color-border));
  background: var(--color-surface);
}
.overview-variables-table__detail-link:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
}
.overview-variables-table__td--details {
  text-align: right;
}
.overview-variables-table__empty {
  padding: 1.25rem 0.75rem !important;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.84rem;
}

/* Feature overview — Resources sidebar (matches Feature Details panel chrome) */

.overview-resources-panel__toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-shrink: 0;
}
.overview-resources-panel__save-header:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.overview-resources-panel__add-btn {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.overview-resources-panel__row-inner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
}
.overview-resources-panel__edit-form {
  width: 100%;
  padding: 0.15rem 0;
}
.overview-resources-panel__empty {
  padding: 0.35rem 0 0.15rem;
  text-align: center;
}
.overview-resources-panel__empty-icon {
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: center;
}
.overview-resources-panel__empty-title {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--color-ink);
}
.overview-resources-panel__empty-hint {
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  line-height: 1.45;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}
.overview-resources-panel__empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
}
.overview-resources-panel__empty-cta-plus {
  font-size: 1.05rem;
  line-height: 1;
}
.overview-resources-panel__form {
  padding: 0.35rem 0 0.15rem;
  border-top: 1px solid var(--color-border);
  margin-top: 0.35rem;
}
.overview-resources-panel__label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0.55rem 0 0.35rem;
}
.overview-resources-panel__label:first-of-type {
  margin-top: 0;
}
.overview-resources-panel__input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
}
.overview-resources-panel__input::placeholder {
  color: var(--color-text-muted);
}
.overview-resources-panel__input:focus {
  outline: none;
  border-color: var(--color-signal);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-signal) 35%, transparent);
}
.overview-resources-panel__error {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  color: var(--color-danger, #dc2626);
}
.overview-resources-panel__fetch-preview {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.45rem;
}
.overview-resources-panel__favicon {
  border-radius: var(--radius-xs);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}
.overview-resources-panel__fetch-host {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.overview-resources-panel__form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  margin-top: 0.85rem;
}
.overview-resources-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.overview-resources-panel__row {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-border);
}
.overview-resources-panel__row:last-child {
  border-bottom: none;
}
.overview-resources-panel__row-favicon {
  flex-shrink: 0;
  border-radius: var(--radius-xs);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  object-fit: contain;
}
.overview-resources-panel__row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.overview-resources-panel__row-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-signal);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overview-resources-panel__row-title:hover {
  text-decoration: underline;
  color: var(--color-text);
}
.overview-resources-panel__row-host {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overview-resources-panel__row-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}
.overview-resources-panel__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}
.overview-resources-panel__icon-btn svg {
  display: block;
  width: 16px;
  height: 16px;
}
.overview-resources-panel__icon-btn:hover {
  color: var(--color-text);
  border-color: var(--color-border);
  background: var(--color-bg);
}
.overview-resources-panel__icon-btn:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
}
.overview-resources-panel__icon-btn--danger:hover {
  color: var(--color-danger, #dc2626);
  border-color: color-mix(in srgb, var(--color-danger, #dc2626) 35%, var(--color-border));
}

.overview-details { margin: 0; }
.overview-details__row {
  display: grid;
  grid-template-columns: minmax(100px, 38%) 1fr;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.86rem;
}
.overview-details__row:last-child { border-bottom: none; }
.overview-details__row--stack {
  grid-template-columns: 1fr;
  gap: 0.35rem 0;
}
.overview-details dt {
  margin: 0;
  color: var(--color-text-muted);
  font-weight: 500;
}
.overview-details dd {
  margin: 0;
  color: var(--color-text);
}
.overview-details__muted { color: var(--color-text-muted); }
.overview-details__var-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.overview-maintainer {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.overview-maintainer__avatar {
  width: 1.0625rem;
  height: 1.0625rem;
  border-radius: 50%;
  background: var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--color-text);
}
.overview-maintainers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.overview-maintainers-list__item {
  margin: 0;
}
.overview-maintainers-empty {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  font-style: italic;
  color: var(--color-text-muted);
}
.overview-maintainers-empty a {
  color: var(--color-signal);
  font-weight: 600;
  text-decoration: none;
  font-style: italic;
}
.overview-maintainers-empty a:hover {
  text-decoration: underline;
}
.overview-tags-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.overview-tags-list__item {
  margin: 0;
}
.overview-tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--color-text);
  background: var(--color-surface-alt, #eef0f3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.manage-card__select--multi {
  width: 100%;
  max-width: min(100%, 28rem);
  min-height: 8rem;
  padding: 0.35rem 0.45rem;
  font-size: 0.86rem;
  border: 1px solid var(--color-border);
  border-radius: 0.35rem;
  background: var(--color-surface, #fff);
  color: var(--color-text);
}
.manage-card__form--status {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.manage-card__form--status .manage-card__form-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}
.manage-card__form--status .manage-card__select {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  font-size: 0.86rem;
  border: 1px solid var(--color-border);
  border-radius: 0.35rem;
  background: var(--color-surface, #fff);
  color: var(--color-text);
}
.manage-card__form--status .btn {
  flex: 0 0 auto;
}
.manage-card__form--status .btn--primary:disabled,
.manage-card__form--status .btn--primary[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.manage-section__title-row {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.manage-section__title-row .badge {
  padding: 0.1rem 0.7rem;
  font-size: 0.72rem;
  line-height: 1.2;
}
.manage-card__form--maintainers .manage-card__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
}
.manage-card__hint--field {
  margin: 0.35rem 0 0.75rem;
  font-size: 0.78rem;
}

.overview-resources__list {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.overview-resources__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.86rem;
}
.overview-resources__link {
  color: var(--color-signal);
  font-weight: 600;
  text-decoration: none;
  word-break: break-word;
  min-width: 0;
}
.overview-resources__link:hover {
  text-decoration: underline;
}
.overview-resources__delete-form {
  margin: 0;
  flex-shrink: 0;
}
.overview-resources__remove-btn {
  padding: 0.2rem 0.45rem;
  font-size: 0.78rem;
}
.overview-resources__empty {
  margin: 0 0 0.75rem;
  font-size: 0.86rem;
}
.overview-resources__add-form {
  margin-top: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}
.overview-resources__fields {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}
.overview-resources__field {
  width: 100%;
  padding: 0.38rem 0.5rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.82rem;
}
.overview-resources__field:focus {
  outline: 2px solid var(--color-signal);
  outline-offset: 1px;
}
@media (min-width: 480px) {
  .overview-resources__fields {
    flex-direction: row;
    align-items: stretch;
  }
  .overview-resources__fields .overview-resources__field {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 720px) {
  .cleanup-table__head, .cleanup-table__row {
    grid-template-columns: 1fr;
  }
  .cleanup-table__actions { justify-content: flex-start; }
}

/* ──────────────────────────────────────────────────────────────────────
   Manage Feature — left vertical nav layout (Iteration 1).
   Two-column layout: sticky left nav + scrolling right pane. Sections in
   the right pane are anchor targets (#variables, #users-and-targeting,
   #self-targeting, #targeting-<env_slug>, #status, #settings); the nav
   highlights the active section as the user scrolls (Alpine + IO).
   ────────────────────────────────────────────────────────────────────── */
.feature-manage-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 900px) {
  .feature-manage-layout { grid-template-columns: 1fr; }
}

.feature-manage-nav {
  position: sticky;
  top: 188px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 0.65rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.88rem;
}
.feature-manage-nav__item {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.25;
}
.feature-manage-nav__item:hover { background: var(--color-surface-muted, rgba(0,0,0,0.04)); }
.feature-manage-nav__item.is-active {
  background: var(--color-surface-muted, rgba(37,99,235,0.12));
  color: var(--color-signal, #2563EB);
  font-weight: 600;
}
.feature-manage-nav__item--top { font-weight: 600; }
.feature-manage-nav__item--child {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-muted);
  padding-left: 1.4rem;
}
.feature-manage-nav__item--child.is-active { color: var(--color-signal, #2563EB); }
.feature-manage-nav__item--swatch::before {
  content: '';
  display: inline-block;
  width: 0.55rem; height: 0.55rem;
  border-radius: 999px;
  background: var(--env-color, var(--color-text-muted));
  flex: none;
  margin-left: -0.85rem;
  margin-right: 0.35rem;
}
.feature-manage-nav__children {
  display: flex; flex-direction: column; gap: 0.05rem;
  margin: 0.1rem 0 0.4rem;
}
/* The env-chip lives inside the nav link, so suppress the legacy ::before swatch
 * to avoid showing two colour markers, and let the chip fill the link width. */
.feature-manage-nav__item--swatch:has(.env-chip)::before { display: none; }
.feature-manage-nav__item--swatch:has(.env-chip) {
  padding-left: 1.4rem;
  padding-right: 0.4rem;
}
.feature-manage-nav__item--swatch .env-chip.env-chip--rail {
  display: flex;
  width: 100%;
  min-height: 1.6rem;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.feature-manage-nav__item--swatch .env-chip.env-chip--rail .env-chip__name {
  text-transform: none;
  letter-spacing: 0;
  font-weight: inherit;
  padding: 0.25rem 0.6rem;
}

.feature-manage-pane { min-width: 0; }
.feature-manage-pane--readonly button:disabled,
.feature-manage-pane--readonly button[aria-disabled="true"],
.feature-manage-pane--readonly input:disabled,
.feature-manage-pane--readonly select:disabled,
.feature-manage-pane--readonly textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed !important;
  pointer-events: none;
}
.feature-manage-pane--readonly .targeting-switch__toggle,
.feature-manage-pane--readonly .self-targeting-status-tile {
  opacity: 0.7;
}
.manage-section { margin-bottom: 1.5rem; scroll-margin-top: 200px; }
.manage-section__head { margin: 0 0 0.6rem; }
.manage-section__title {
  margin: 0; font-size: 1.05rem; font-weight: 700;
  color: var(--color-text);
}
.manage-card[id] { scroll-margin-top: 200px; }

/* Manage Feature — section header with right-aligned action buttons. */
.manage-section__head--actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.manage-section__actions {
  display: flex; align-items: center; gap: 0.5rem;
}
.manage-section__actions .btn__icon {
  display: inline-block; margin-right: 0.2rem; font-weight: 600;
}
.btn--icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
}
.btn--icon:hover { color: var(--color-text); background: var(--color-surface-muted, rgba(0,0,0,0.04)); }

/* ---------------------------------------------------------------- */
/* Redesigned rule-card layout (rules_panel.html).
   Each card body is a vertical stack of labelled rows. */
.rule-card__row {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  align-items: start;
  gap: 0.6rem;
  padding: 0.4rem 0;
}
.rule-card__row + .rule-card__row {
  border-top: 1px dashed color-mix(in srgb, var(--color-text) 8%, transparent);
}
.rule-card__row-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted, #6b7280);
  padding-top: 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rule-card__row-form {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  min-width: 0;
}
/* The schedule-mode dropdown lives inside a `.rule-card__row-form` div
   (rather than a real <form>) so it doesn't auto-submit when toggled.
   The global `form input, form select` rule then doesn't apply, so we
   re-apply the same width/padding/border treatment here to keep the
   field visually identical to the other row selects. */
.rule-card__row-form > select,
.rule-card__row-form > input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.875rem;
}
.rule-card__row-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
/* Non-destructive row-action icon buttons (create-audience, copy-to-env)
   sit on the rule card and need a touch more contrast than the default
   transparent .btn--icon look. The delete button is excluded — it has
   its own red treatment. */
.rule-card__row-actions .btn--icon:not(.rule-card__delete) {
  background: rgba(0, 0, 0, 0.05);
}
.rule-card__row-actions .btn--icon:not(.rule-card__delete):hover {
  background: rgba(0, 0, 0, 0.1);
}
:root[data-theme="dark"] .rule-card__row-actions .btn--icon:not(.rule-card__delete) {
  background: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .rule-card__row-actions .btn--icon:not(.rule-card__delete):hover {
  background: rgba(255, 255, 255, 0.14);
}
/* Section-anchor copy-link buttons (rendered by
   features/_section_anchor_button.html as `[data-anchor-link]`) get the
   same tinted treatment as the rule-card row-action buttons so they
   read as active controls rather than blending into the page. */
.btn--icon[data-anchor-link] {
  background: rgba(0, 0, 0, 0.05);
}
.btn--icon[data-anchor-link]:hover {
  background: rgba(0, 0, 0, 0.1);
}
:root[data-theme="dark"] .btn--icon[data-anchor-link] {
  background: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .btn--icon[data-anchor-link]:hover {
  background: rgba(255, 255, 255, 0.14);
}
.rule-card__row--name .rule-card__name-input { width: 100%; }
.rule-card__definitions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.rule-card__definition {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.rule-card__definition-form {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
/* Keep the property/operator/value triplet on a single row. The two
   selects size to their content but may shrink, and the value input
   absorbs the remaining space. min-width: 0 lets all three shrink
   below their intrinsic width inside the flex row. */
.rule-card__definition-form > .form-select {
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
}
.rule-card__definition-form > .form-input {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}
.rule-card__and {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-muted, #6b7280);
  padding: 0;
  flex: 0 0 100%;
  text-align: left;
}
/* Per-definition delete: same subtle tinted background AND glyph
   colour as the other row-action icon buttons (create-audience,
   copy-to-env). Inherits .btn--icon's `var(--color-text-muted)`. */
.btn--icon.rule-card__definition-delete {
  background: rgba(0, 0, 0, 0.05);
  flex: 0 0 auto;
}
.btn--icon.rule-card__definition-delete:hover {
  background: rgba(0, 0, 0, 0.1);
}
:root[data-theme="dark"] .btn--icon.rule-card__definition-delete {
  background: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .btn--icon.rule-card__definition-delete:hover {
  background: rgba(255, 255, 255, 0.14);
}
.rule-card__add-definition { margin-top: 0.1rem; }
/* "+ Add Definition" trigger uses the same subtle tinted background
   as the row-action icon buttons so it reads as part of the same
   action group, instead of the default surface-coloured button. */
.rule-card__add-definition .btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: var(--color-border);
}
.rule-card__add-definition .btn:hover {
  background: rgba(0, 0, 0, 0.1);
}
:root[data-theme="dark"] .rule-card__add-definition .btn {
  background: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .rule-card__add-definition .btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
/* Copy-rule-to-environment modal: multi-select list of destination
   envs. Each row is a label wrapping a checkbox so the whole row is
   a hit target. The form submits once via the modal footer's
   "Copy rule to selected environments" button. */
.copy-rule-form { display: flex; flex-direction: column; gap: 0.5rem; }
.copy-rule-env-list {
  border: 0;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.copy-rule-env-list__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 0.5);
  background: var(--color-surface);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 120ms ease-out, border-color 120ms ease-out;
}
.copy-rule-env-list__item:hover {
  background: var(--color-surface-alt);
}
.copy-rule-env-list__item:has(.copy-rule-env-list__checkbox:checked) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}
.copy-rule-env-list__checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.copy-rule-env-list__name { font-weight: 600; flex: 1 1 auto; }
.copy-rule-env-list__type {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.copy-rule-env-list__empty {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  padding: 0.5rem 0;
  margin: 0;
}
.rule-card__splits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.4rem;
}
.rule-card__split {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
  border-radius: calc(var(--radius) * 0.5);
  font-size: 0.85rem;
}
.rule-card__split-label { font-family: var(--font-mono, monospace); }
.form-input--narrow { width: 4rem; text-align: right; }
.rule-card__bucket {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.5rem;
  /* Pull the bucket div leftward by the row label column + gap so the
     "RANDOMIZE USING" label aligns under the SERVE row label rather
     than indented inside the form's content column. The label column
     auto-sizes to its text so longer labels are not clipped. */
  margin-left: calc(-6rem - 0.6rem);
}
.rule-card__bucket-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.rule-card__bucket .form-select {
  flex: 0 1 auto;
  min-width: 8rem;
}
/* Separator <li> placed between the last real rule and the Default
   Rule placeholder card. Mirrors the rules-toolbar horizontal divider
   so the panel reads as: rules → divider → "after these, the default
   applies" card. Strips list-marker styling and adds vertical breathing
   room so the line sits clear of the cards above and below. */
.rules-panel__list .rules-panel__separator {
  list-style: none;
  height: 1px;
  background: var(--color-border);
  margin: 0.75rem 0;
  padding: 0;
}
/* Inline-add variant of the separator: a flex row with two thin lines
   flanking a centred "+ Add Rule" button. The base `.separator` rule
   above paints a 1px strip; we override here so the row can host real
   children with vertical padding. */
.rules-panel__list .rules-panel__separator--inline-add {
  height: auto;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0;
}
.rules-panel__separator-line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-border);
}
.rules-panel__inline-add-form {
  margin: 0;
  flex: 0 0 auto;
}

/* "Default Rule" card rendered at the end of every rules list. It uses
   the same chrome (background + border) as a real rule card so it
   reads as part of the list, but it is non-interactive and shows a
   single explanatory message about the in-code default. */
.rule-card.rule-card--placeholder {
  border-style: dashed;
}
.rule-card__default {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.25rem 0;
}
.rule-card__default-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
}
.rule-card__default-desc {
  font-size: 0.85rem;
  color: var(--color-text-muted, #6b7280);
}
/* The default-rule row spans the full body width — no separate label
   column, since the title acts as the label. */
.rule-card__row--default {
  grid-template-columns: 1fr;
}
.rule-card__schedule-fields {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.4rem;
}
.rule-card__schedule-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.rule-card__schedule-label {
  color: var(--color-text-muted, #6b7280);
  font-size: 0.8rem;
}
[x-cloak] { display: none !important; }

/* Audience-from-rule modal */
.audience-from-rule-form { display: flex; flex-direction: column; gap: 0.75rem; }
.audience-from-rule-replace .targeting-switch {
  cursor: pointer;
  /* The switch's track inherits `currentColor`, so colouring the
     wrapper green makes the toggle read as a positive/affirmative
     action when checked. The label text overrides back to the
     default body colour below so prose stays readable. */
  color: var(--color-live, #16A34A);
}
.audience-from-rule-replace__label {
  font-size: 0.85rem;
  color: var(--color-text);
}


/* --- Manage > Code Sample section ----------------------------------
   Three side-by-side selectors (Environment, SDK Language, Variable)
   above a brand-themed monospace code block with copy + docs buttons
   in the top-right corner. Surface colours, borders, and the syntax
   highlighting all theme through the design tokens, so the panel
   flips with the user's light/dark preference rather than being a
   permanent slate-900 block. */
.code-sample-card { padding: 1rem; }
.code-sample-card__controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
@media (max-width: 640px) {
  .code-sample-card__controls { grid-template-columns: 1fr; }
}
.code-sample-control {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.code-sample-control__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.code-sample-control__select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.875rem;
}
.code-sample-control__select:focus {
  outline: 2px solid var(--color-pennon-red);
  outline-offset: 2px;
}
.code-sample-card__body {
  position: relative;
  border-radius: 0.6rem;
  overflow: hidden;
  /* `--color-surface-alt` already flips with the theme — `#F5F5F5` in
     light mode (Surface), `#171717` in dark mode (a step darker than
     the surrounding manage-card so the panel reads as "terminal
     output"). Don't override this in dark mode: `--color-ink` is the
     *inverted* ink token in dark mode (near-white), which would
     repaint the panel light-on-light. */
  background: var(--color-surface-alt);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.code-sample-card__toolbar {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.25rem;
  z-index: 1;
}
.code-sample-card__copy {
  color: var(--color-text-muted);
  background: transparent;
}
.code-sample-card__copy:hover {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.06);
}
:root[data-theme="dark"] .code-sample-card__copy:hover {
  background: rgba(255, 255, 255, 0.08);
}
.code-sample-card__output {
  margin: 0;
  padding: 1rem 1.1rem;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.55;
  background: transparent;
  color: inherit;
  white-space: pre;
  overflow-x: auto;
  min-height: 8rem;
}
.code-sample-card__output code {
  font-family: inherit;
  background: transparent;
  padding: 0;
}

/* --- highlight.js theme (brand-aligned) ----------------------------
   We don't pull a highlight.js stylesheet from a CDN — instead we
   override the .hljs-* hooks with our own palette so syntax colours
   come from the same tokens as the rest of the app. Each colour has
   a light-mode default and a dark-mode override. */
.hljs { background: transparent; color: inherit; }
.hljs-comment,
.hljs-quote { color: var(--color-mist); font-style: italic; }
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-strong { color: var(--color-pennon-red); font-weight: 600; }
.hljs-string,
.hljs-attr,
.hljs-symbol,
.hljs-bullet,
.hljs-addition { color: var(--color-live); }
.hljs-number,
.hljs-meta,
.hljs-link { color: var(--color-caution); }
.hljs-title,
.hljs-title.class_,
.hljs-title.function_,
.hljs-built_in { color: var(--color-signal); }
.hljs-variable,
.hljs-template-variable,
.hljs-attribute,
.hljs-params { color: var(--color-text); }
.hljs-deletion { color: var(--color-pennon-red); }
:root[data-theme="dark"] .hljs-keyword,
:root[data-theme="dark"] .hljs-selector-tag,
:root[data-theme="dark"] .hljs-literal,
:root[data-theme="dark"] .hljs-section,
:root[data-theme="dark"] .hljs-doctag,
:root[data-theme="dark"] .hljs-type,
:root[data-theme="dark"] .hljs-name,
:root[data-theme="dark"] .hljs-strong { color: var(--color-ember); }
:root[data-theme="dark"] .hljs-string,
:root[data-theme="dark"] .hljs-attr,
:root[data-theme="dark"] .hljs-symbol,
:root[data-theme="dark"] .hljs-bullet,
:root[data-theme="dark"] .hljs-addition { color: #4ADE80; }
:root[data-theme="dark"] .hljs-title,
:root[data-theme="dark"] .hljs-title.class_,
:root[data-theme="dark"] .hljs-title.function_,
:root[data-theme="dark"] .hljs-built_in { color: #60A5FA; }
:root[data-theme="dark"] .hljs-number,
:root[data-theme="dark"] .hljs-meta,
:root[data-theme="dark"] .hljs-link { color: #FBBF24; }

/* --- Code References panel (Manage Feature) ------------------------
   Repo-first layout: one card per connected repository, each listing
   the referenced files and the exact scanned lines (deep-linked to
   the provider, pinned to the scanned commit). Brand tokens only. */
.code-refs { padding: 1rem 1.15rem; }
.code-refs__meta {
  margin: 0 0 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
}

.code-refs__advisory {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 0.72rem;
  line-height: 1.45;
}
.code-refs__advisory-text { margin: 0; }
.code-refs__advisory-icon {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 0.05rem;
}
.code-refs__advisory--stale {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.32);
}
.code-refs__advisory--stale .code-refs__advisory-icon { color: var(--color-caution); }
.code-refs__advisory--remove {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.30);
}
.code-refs__advisory--remove .code-refs__advisory-icon { color: var(--color-pennon-red); }

.code-refs__repos {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.code-refs-repo {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.code-refs-repo__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.code-refs-repo__provider {
  display: inline-flex;
  color: var(--color-text-muted);
  flex: 0 0 auto;
}
.code-refs-repo__provider svg { width: 15px; height: 15px; }
.code-refs-repo__name {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}
.code-refs-repo__name:hover { color: var(--color-pennon-red); }
.code-refs-repo__commit {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.02rem 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}
.code-refs-repo__commit:hover {
  color: var(--color-text);
  border-color: var(--color-slate-400);
}
.code-refs-repo__counts {
  margin-left: auto;
  display: inline-flex;
  gap: 0.3rem;
}

.code-refs-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.code-refs-pill--live {
  color: #15803D;
  background: rgba(22, 163, 74, 0.14);
  border-color: rgba(22, 163, 74, 0.4);
}
.code-refs-pill--stale {
  color: #92400E;
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.5);
}
:root[data-theme="dark"] .code-refs-pill--live {
  color: #86efac;
  background: rgba(22, 163, 74, 0.16);
  border-color: rgba(22, 163, 74, 0.45);
}
:root[data-theme="dark"] .code-refs-pill--stale {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.45);
}

.code-refs-files {
  list-style: none;
  margin: 0;
  padding: 0;
}
.code-refs-files > li { list-style: none; }
.code-refs-file {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
.code-refs-file:last-child { border-bottom: none; }
.code-refs-file.is-stale { opacity: 0.72; }
.code-refs-file__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.code-refs-file__path {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text);
  text-decoration: none;
  word-break: break-all;
}
a.code-refs-file__path:hover {
  color: var(--color-pennon-red);
  text-decoration: underline;
}

.flag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.05rem 0.4rem 0.05rem 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}
.flag-pill__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-live);
  flex: 0 0 auto;
}
.code-refs-file.is-stale .flag-pill__dot { background: var(--color-inactive); }
.flag-pill__key {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--color-text);
}

/* Lines nested under their file: indented with a hairline rail so the
   hierarchy (repo › file › lines) reads at a glance. */
.code-refs-lines {
  list-style: none;
  margin: 0.4rem 0 0.1rem;
  padding: 0;
  margin-left: 0.5rem;
  border-left: 2px solid var(--color-border);
}
.code-refs-lines > li { list-style: none; }
.code-refs-line {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.1rem 0 0.1rem 0.7rem;
}
.code-refs-line__no {
  flex: 0 0 auto;
  min-width: 2rem;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--color-text-muted);
  text-decoration: none;
}
a.code-refs-line__no { color: var(--color-signal); }
a.code-refs-line__no:hover {
  color: var(--color-pennon-red);
  text-decoration: underline;
}
.code-refs-line__snippet {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--color-text);
  background: transparent;
  padding: 0;
  white-space: pre;
  overflow-x: auto;
  min-width: 0;
}

/* --- Code References: "Set up" card (org settings) ----------------- */
.cr-setup {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.25rem;
}
.cr-setup__eyebrow {
  margin: 0 0 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cr-setup__title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cr-setup__lead {
  margin: 0 0 1rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow-x: auto;
}

/* Collapsible setup steps (hidden by default via <details>). */
.cr-setup__steps { margin: 0; }
.cr-setup__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-text);
  user-select: none;
}
.cr-setup__summary::-webkit-details-marker { display: none; }
.cr-setup__summary:hover { color: var(--color-pennon-red); }
.cr-setup__chevron {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}
.cr-setup__steps[open] .cr-setup__chevron { transform: rotate(90deg); }
.cr-setup__steps[open] .cr-setup__summary { margin-bottom: 1.1rem; }

.cr-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.cr-steps > li { list-style: none; }
.cr-step {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}
.cr-step__num {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-pennon-red);
  background: rgba(220, 38, 38, 0.10);
  border: 1px solid rgba(220, 38, 38, 0.25);
}
.cr-step__body { flex: 1 1 auto; min-width: 0; }
.cr-step__title {
  margin: 0 0 0.2rem;
  font-size: 0.82rem;
  font-weight: 600;
}
.cr-step__text {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--color-text);
}
.cr-step__text code,
.cr-step__text .mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.04rem 0.3rem;
  border-radius: var(--radius-xs);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.cr-code {
  margin-top: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-alt);
}
.cr-code__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.cr-code__name {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.cr-code__bar .env-chip { margin-left: auto; }
.cr-code__pre {
  margin: 0;
  padding: 0.75rem 0.95rem;
  overflow-x: auto;
  background: transparent;
  line-height: 1;
}
.cr-code__pre code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1;
  color: var(--color-text);
  background: transparent;
  padding: 0;
  white-space: pre;
}

.cr-setup__foot { margin-top: 1.5rem; }
.cr-setup__foot .manage-info-panel__text { font-size: 0.74rem; }

.cr-upgrade {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.cr-upgrade__icon {
  flex: 0 0 auto;
  color: var(--color-pennon-red);
  display: inline-flex;
  margin-top: 0.1rem;
}
.cr-upgrade__body { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.cr-upgrade__text { margin: 0; font-size: 0.85rem; line-height: 1.55; }

/* --- Jira: connected-site card (org settings) --------------------- */
.jira-connected {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.jira-connected__logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  color: #166534;
  background: #dcfce7;
  border: 1px solid #4ade80;
}
:root[data-theme="dark"] .jira-connected__logo {
  color: #86efac;
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.45);
}
.jira-connected__body { flex: 1 1 auto; min-width: 0; }
.jira-connected__top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.15rem;
}
.jira-connected__label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.jira-connected__status {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #4ade80;
  border-radius: var(--radius-pill);
  padding: 0.05rem 0.5rem;
}
:root[data-theme="dark"] .jira-connected__status {
  color: #86efac;
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.45);
}
.jira-connected__site {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  word-break: break-all;
}
.jira-connected__site:hover { color: var(--color-pennon-red); }
.jira-connected__site svg { flex: 0 0 auto; color: var(--color-text-muted); }
.jira-connected__site--plain { color: var(--color-text-muted); font-weight: 500; }
.jira-connected__action { margin: 0; flex: 0 0 auto; }
.settings-table--jira .form-select { min-width: 16rem; }