/* sign.abundera.ai, Portal Styles */

:root {
  --z-base: 1;
  --z-sidebar: 50;
  --z-topbar: 60;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
  --z-overlay-full: 10000;
  --z-overlay-nav: 10001;
}

/* Portal layout: sidebar + main content */
.dashboard {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.dashboard-sidebar {
  width: 260px;
  background: var(--color-surface-1);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: var(--z-sidebar);
  transition: transform 0.3s var(--ease-out);
}

.dashboard-sidebar__header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.dashboard-sidebar__logo {
  color: var(--color-text);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px — 4px grid (was 6px) */
}

.dashboard-sidebar__logo span {
  color: var(--color-accent-blue);
}

/* Primary "Send for signature" CTA — pinned between logo and nav list */
.dashboard-sidebar__cta-wrap {
  padding: 0.875rem 1rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.dashboard-sidebar__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 1rem;
  background: var(--color-accent-blue, #60a5fa);
  color: #0a0f1a;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm, 6px);
  transition: opacity 0.15s ease, transform 0.1s ease;
  box-sizing: border-box;
}

.dashboard-sidebar__cta:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Light theme: WCAG 1.4.3 contrast fixes. --color-accent-blue's dark value
   (#60a5fa) pairs fine with #0a0f1a text (7.53:1), but light theme's
   --color-accent-blue (#2563eb) is a much darker blue — #0a0f1a on it is
   only 3.7:1. White text clears 4.5:1 on the light-theme blue (5.17:1) while
   dark theme's #0a0f1a text is untouched. Two-block pattern matches the
   established light-theme override style (see style.css). */
:root[data-theme="light"] .dashboard-sidebar__cta {
  color: #fff;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .dashboard-sidebar__cta {
    color: #fff;
  }
}

.dashboard-sidebar__cta:active {
  opacity: 1;
  transform: translateY(0);
}

.dashboard-sidebar__cta svg {
  flex-shrink: 0;
}

.dashboard-sidebar__nav {
  flex: 1;
  padding: 1rem 0;
  overflow-y: auto;
}

.dashboard-sidebar__section {
  padding: 0 0.75rem;
  margin-bottom: 0.5rem;
}

.dashboard-sidebar__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  padding: 0.5rem 0.75rem;
}

/* Labeled nav groups (research-backed IA): breathing room between groups;
   the label already carries its own padding. */
.dashboard-sidebar__group { margin-bottom: 0.625rem; }
.dashboard-sidebar__group:last-child { margin-bottom: 0; }

.dashboard-sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 4px grid (was 10px) */
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
}

.dashboard-sidebar__link:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
}

.dashboard-sidebar__link--import {
  border: 1px dashed rgba(96, 165, 250, 0.35);
  border-radius: 6px;
  margin-top: 0.25rem;
}

.dashboard-sidebar__link--active {
  background: rgba(96, 165, 250, 0.1);
  color: var(--color-accent-blue);
}

.dashboard-sidebar__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}

.dashboard-sidebar__link--active .dashboard-sidebar__icon {
  opacity: 1;
}

/* Prominent, actionable pending-negotiation banner — high-priority, persistent,
   dismissible (notification-UX research). Amber-accented so it reads as
   "needs you" without alarming red. */
.neg-attention-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 4px 10px 4px 4px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  box-shadow: 0 1px 2px rgba(146, 64, 14, 0.06);
}
.neg-attention-banner__main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #92400e;
  font-size: 0.875rem;
  text-decoration: none;
}
.neg-attention-banner__main:hover { background: rgba(217, 119, 6, 0.08); }
.neg-attention-banner__icon { display: inline-flex; color: #d97706; flex-shrink: 0; }
.neg-attention-banner__text { flex: 1; min-width: 0; }
.neg-attention-banner__text strong { font-weight: 800; }
.neg-attention-banner__arrow { flex-shrink: 0; font-weight: 800; color: #d97706; }
.neg-attention-banner__dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #b45309;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.6;
}
.neg-attention-banner__dismiss:hover { opacity: 1; }

.nav-neg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 0.6875rem;
  font-weight: 700;
  background: var(--color-warning-amber);
  color: #fff;
  margin-left: auto;
  line-height: 1;
}

.dashboard-sidebar__footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
}

.dashboard-sidebar__lang {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: var(--color-text-muted);
}

/* The language picker is now the shared <abundera-lang-select> custom element
   wrapping the <select>. Make the wrapper fill the sidebar row so the inner
   control spans the full width (it was a bare full-width <select> before). */
.dashboard-sidebar__lang abundera-lang-select {
  flex: 1;
  min-width: 0;
  display: block;
}

.dashboard-sidebar__lang-select {
  width: 100%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-family: var(--font-sans);
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.dashboard-sidebar__lang-select:focus {
  outline: none;
  border-color: var(--color-accent-blue);
}

/* The dashboard runs color-scheme: light, so native <select> option popups get a
   white background. The sidebar is dark-themed (light option text), which made
   the open workspace + language dropdown lists render white-on-white. Force a
   dark option background with light text so the lists are readable. */
.dashboard-sidebar__lang-select option,
.dashboard-content select option,
.modal-overlay select option,
.filter-select option,
select.filter-input option {
  background-color: var(--color-surface-2);
  color: var(--color-text);
}

.dashboard-sidebar__user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dashboard-sidebar__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

.dashboard-sidebar__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.dashboard-sidebar__user-info {
  flex: 1;
  min-width: 0;
}

.dashboard-sidebar__user-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-sidebar__user-email {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Main content area */
.dashboard-main {
  flex: 1;
  /* Without this a wide child (e.g. a fixed-width <select>) makes this flex
     item grow past the viewport and clips content on the right. */
  min-width: 0;
  margin-left: 260px;
  min-height: 100vh;
  transition: margin-left 0.3s var(--ease-out);
}

/* Desktop nav collapse — see nav.js setupNavCollapse(). The icon-only topbar
   button toggles html.dashboard-nav-collapsed, sliding the sidebar off so
   .dashboard-main reclaims the full width (e.g. the negotiation two-pane).
   Desktop-only: ≤768px the off-canvas hamburger (.dashboard-sidebar--open)
   governs the sidebar, and this must not override it. */
.dashboard-nav-collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.dashboard-nav-collapse:hover {
  color: var(--color-text);
  border-color: var(--color-accent-blue);
}
.dashboard-nav-collapse svg { width: 18px; height: 18px; }

@media (min-width: 769px) {
  html.dashboard-nav-collapsed .dashboard-sidebar { transform: translateX(-100%); }
  html.dashboard-nav-collapsed .dashboard-main { margin-left: 0; }
}

.dashboard-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Reserve the injected controls' height (36px theme toggle/bell arrive
     after nav render) so the header row never grows post-paint (CLS). */
  min-height: calc(36px + 2rem);
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-translucent);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
}

.dashboard-topbar__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
}

.dashboard-topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Equalize topbar button heights: an outline button (1px border, e.g.
   Create-with-AI) renders 2px taller than a borderless primary button (e.g.
   + Create Template) at auto height, so they don't line up. min-height grows
   the shorter one to match without clipping. Verified on staging: both render
   44px with tops aligned (deltaHeight 0, deltaTop 0). */
.dashboard-topbar__actions .btn--sm {
  min-height: 44px;
}

.dashboard-content {
  padding: 2rem;
  max-width: 1200px;
}

/* Mobile sidebar toggle */
.dashboard-mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  padding: 6px;
}

.dashboard-mobile-toggle svg {
  width: 24px;
  height: 24px;
}

/* Tier badge */
.tier-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tier-badge--starter {
  background: rgba(161, 161, 170, 0.15);
  color: var(--color-text-muted);
  border: 1px solid rgba(161, 161, 170, 0.2);
}

.tier-badge--professional {
  background: rgba(96, 165, 250, 0.15);
  color: var(--color-accent-blue);
  border: 1px solid rgba(96, 165, 250, 0.2);
}

.tier-badge--business {
  background: rgba(167, 139, 250, 0.15);
  color: var(--color-accent-purple);
  border: 1px solid rgba(167, 139, 250, 0.2);
}

/* Dashboard stat cards */
.stats-grid {
  display: grid;
  /* Six cards: a fixed 3-column grid fills 3x2. auto-fit produced 4+2 with a
     hole at typical content widths. Media queries below step to 2 / 1. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

/* ── Loading skeleton ───────────────────────────────────────── */
.env-skeleton {
  animation: env-pulse 1.5s ease-in-out infinite;
}

.env-skeleton__row td {
  padding: 0.875rem 1rem;
}

.env-skeleton__bar {
  height: 14px;
  border-radius: 4px;
  background: var(--color-surface-3);
}

.env-skeleton__bar--short {
  width: 60%;
}

.env-skeleton__bar--med {
  width: 40%;
}

.env-skeleton__bar--xs {
  width: 30%;
}

@keyframes env-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.dash-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.dash-section-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}

.dash-section-head__link {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-accent-blue);
  text-decoration: none;
}

.dash-section-head__link:hover {
  text-decoration: underline;
}

/* Recent-row subject links: real anchors with table-cell presentation. */
.dash-recent-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.stat-card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: border-color 0.2s;
}

.stat-card:hover {
  border-color: var(--color-border-hover);
}

.stat-card__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.stat-card__value {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.stat-card__sub {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
  /* Reserve the line box: sub-text arrives async and card growth is layout
     shift (CLS). Cards without a sub keep the same height — grid rows align. */
  min-height: 1.25em;
}

.stat-card__sub--up {
  color: var(--color-success-up);
}

.stat-card__sub--down {
  color: var(--color-error-down);
}

.stat-card__sub--neutral {
  color: var(--color-text-muted);
}

.stat-card__value--action {
  color: var(--color-warning-amber);
}

/* Dashboard alert banner */
.dashboard-alert {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px — on the 4px spacing grid (was 10px) */
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}

.dashboard-alert--warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--color-warning);
}

/* WCAG AA: amber-500 text on the light translucent-amber banner is ~2:1.
   Light theme drops to amber-800 (~7:1 on the effective background). */
:root[data-theme="light"] .dashboard-alert--warning {
  color: #92400e;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .dashboard-alert--warning {
    color: #92400e;
  }
}

.dashboard-alert__icon {
  font-size: 1.125rem;
  flex-shrink: 0;
}

.dashboard-alert__link {
  margin-left: auto;
  color: var(--color-accent-blue);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.dashboard-alert__link:hover {
  text-decoration: underline;
}

/* Dashboard empty state */
.dashboard-empty {
  text-align: center;
  padding: 4rem 2rem;
  max-width: 480px;
  margin: 2rem auto;
}

.dashboard-empty__icon {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.dashboard-empty__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.dashboard-empty__desc {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.dashboard-empty__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.dashboard-empty__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  background: var(--color-surface-1);
}

.dashboard-empty__btn:hover {
  border-color: var(--color-border-hover);
  color: var(--color-text);
}

.dashboard-empty__btn--primary {
  background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-purple));
  border: none;
  color: #fff;
}

.dashboard-empty__btn--primary:hover {
  opacity: 0.9;
  color: #fff;
}

/* Usage meter */
.usage-meter {
  margin-bottom: 2rem;
}

.usage-meter__bar {
  height: 8px;
  background: var(--color-surface-3);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.usage-meter__fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--color-accent-blue), var(--color-accent-purple));
  transition: width 0.5s var(--ease-out);
}

.usage-meter__fill--warning {
  background: linear-gradient(90deg, var(--color-warning), var(--color-warning-amber));
}

.usage-meter__fill--danger {
  background: linear-gradient(90deg, var(--color-error), var(--color-error-down));
}

.usage-meter__text {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* Data table */
.data-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-1);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.data-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.data-table td {
  padding: 0.75rem 1rem;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.data-table__empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-muted);
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.pagination__buttons {
  display: flex;
  gap: 0.5rem;
}

.pagination__btn {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.15s;
}

.pagination__btn:hover:not(:disabled) {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.pagination__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Quick action cards */
.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.action-card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.action-card:hover {
  border-color: var(--color-accent-blue);
  transform: translateY(-1px);
  color: var(--color-text);
}

.action-card__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.action-card__text {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Upgrade prompt */
.upgrade-prompt {
  background: rgba(96, 165, 250, 0.06);
  border: 1px solid rgba(96, 165, 250, 0.15);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.upgrade-prompt__text {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.upgrade-prompt__text strong {
  color: var(--color-accent-blue);
}

/* Portal buttons (smaller than landing page) */
/* Mirrors style.css's .btn--sm. Kept here too because dashboard.css redefines
   .btn UNLAYERED (loads after style.css), which would otherwise override the
   layered .btn--sm from style.css on dashboard pages. Parallels the .btn split. */
.btn--sm {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

/* Canonical copy-button feedback (see /js/lib/clipboard-button.js): the check
   icon reads as success-green, the X as error-red. Icon-only, no text/layout
   shift. The standard copy affordance across the dashboard. */
.is-copied {
  color: var(--color-success, #22c55e) !important;
}
.is-copy-failed {
  color: var(--color-danger, #ef4444) !important;
}

.btn--danger {
  background: rgba(248, 113, 113, 0.1);
  color: var(--color-error);
  border: 1px solid rgba(248, 113, 113, 0.2);
}

/* Light theme: the error red on the pink tint is under AA — 700-weight. */
:root[data-theme="light"] .btn--danger { color: #b91c1c; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .btn--danger { color: #b91c1c; }
}

/* Small muted metadata text — the ONE utility for row by-lines and titles
   (recipients sweep 2026-07-14; replaces per-page inline styles). */
.text-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Signing-groups: member-list disclosure toggle (was fully inline-styled and
   NAMELESS — axe button-name; the label is set in JS via aria-label). */
.sg-toggle-members {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.125rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
}

.sg-toggle-members .sg-chevron {
  transition: transform 0.2s;
}

.sg-member-count-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.sg-member-count {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.btn--danger:hover {
  background: rgba(248, 113, 113, 0.2);
}

/* Canonical primary (accent) button. Replaces the hand-rolled inline
   `style="background:var(--color-accent-blue);color:#fff;..."` that was copied
   across every modal's confirm/save button — those had no hover or focus-visible
   state and drifted. Every dashboard primary action should use
   `.btn .btn--accent` (with .btn--sm for modal footers). */
.btn--accent {
  background: var(--color-accent-fill, var(--color-accent-blue));
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.btn--accent:hover {
  filter: brightness(1.08);
}

.btn--accent:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

.btn--accent:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Modal overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.modal-overlay--open {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.modal__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Signing-link details modal — label/value rows */
.link-detail__list {
  margin: 0.75rem 0 0;
  display: flex;
  flex-direction: column;
}
.link-detail__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}
.link-detail__row:last-child {
  border-bottom: none;
}
.link-detail__row dt {
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.link-detail__row dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
  word-break: break-all;
}

/* Field inspector rows (replaces window.prompt for positional field editing) */
.inspector-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px — 4px grid (was 6px) */
  margin-bottom: 1rem;
}

.inspector-row label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.inspector-row .form-control {
  width: 100%;
}

/* Filters bar */
/* ── Sliding code-language tabs ─────────────────────────────────────────
   With 12 languages the tab row overflows: it scrolls horizontally
   (scrollbar hidden) and chevrons appear only on the overflowing side.
   Injected by /js/lib/code-lang-tabs.js. */
.code-tabs-wrap {
  position: relative;
}
.code-tabs--scroll {
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  white-space: nowrap;
  flex-wrap: nowrap;
}
.code-tabs--scroll::-webkit-scrollbar { display: none; }
.code-tabs--scroll .code-tab { flex: none; }
.code-tabs-chevron {
  position: absolute;
  top: 0;
  bottom: 1px;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  color: var(--color-text-muted);
  background: linear-gradient(90deg, var(--color-bg, #0b0c0e) 55%, transparent);
  z-index: 1;
}
.code-tabs-chevron:hover { color: var(--color-text); }
.code-tabs-chevron--left { left: 0; }
.code-tabs-chevron--right {
  right: 0;
  background: linear-gradient(270deg, var(--color-bg, #0b0c0e) 55%, transparent);
}
.code-tabs-chevron[hidden] { display: none; }

/* ── Canonical dashboard field chrome ───────────────────────────────────
   ONE source for every page (operator: styles must be consistent). The same
   base/hover/focus values apply to: bare text-like inputs + textareas in
   dashboard content and modals (rules below), .filter-input/.filter-select,
   and the .branding-section composites (which wrap chromeless inners). */
.dashboard-content input[type="text"],
.dashboard-content input:not([type]),
.dashboard-content input[type="url"],
.dashboard-content input[type="email"],
.dashboard-content input[type="number"],
.dashboard-content input[type="password"],
.dashboard-content input[type="search"],
.dashboard-content input[type="date"],
.dashboard-content textarea,
.modal-overlay input[type="text"],
.modal-overlay input:not([type]),
.modal-overlay input[type="url"],
.modal-overlay input[type="email"],
.modal-overlay input[type="number"],
.modal-overlay input[type="password"],
.modal-overlay textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  font-family: var(--font-sans);
  color: var(--color-text);
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.dashboard-content input[type="text"]:hover,
.dashboard-content input:not([type]):hover,
.dashboard-content input[type="url"]:hover,
.dashboard-content input[type="email"]:hover,
.dashboard-content input[type="number"]:hover,
.dashboard-content input[type="password"]:hover,
.dashboard-content input[type="search"]:hover,
.dashboard-content input[type="date"]:hover,
.dashboard-content textarea:hover,
.modal-overlay input:hover,
.modal-overlay textarea:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.dashboard-content input[type="text"]:focus,
.dashboard-content input:not([type]):focus,
.dashboard-content input[type="url"]:focus,
.dashboard-content input[type="email"]:focus,
.dashboard-content input[type="number"]:focus,
.dashboard-content input[type="password"]:focus,
.dashboard-content input[type="search"]:focus,
.dashboard-content input[type="date"]:focus,
.dashboard-content textarea:focus,
.modal-overlay input:focus,
.modal-overlay textarea:focus {
  outline: none;
  border-color: var(--color-accent-blue);
  background: rgba(96, 165, 250, 0.05);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}

/* Native date/time picker indicators (the calendar / clock glyph) were
   rendering near-black against the dark input surface: the dashboard forces
   color-scheme:light so <select> option popups stay readable, but that also
   makes the date indicator dark and nearly invisible. Give the date/time
   inputs their OWN dark color-scheme so the indicator renders light + visible
   cross-browser (Chrome + Firefox), without touching <select> popups. Covers
   every date control on every dashboard page — filters, prefill, presend.

   `.doc-field` is EXCLUDED: those live inside a contract preview, which
   simulates paper and is always light (document.css pins the surface). Without
   this exclusion, a bare `input[type=date]` rule beats the ancestor pin on the
   element itself, and preview date/time fields render as grey boxes with white
   text — the same defect the pin exists to prevent. */
input[type="date"]:not(.doc-field),
input[type="time"]:not(.doc-field),
input[type="datetime-local"]:not(.doc-field),
input[type="month"]:not(.doc-field),
input[type="week"]:not(.doc-field) {
  color-scheme: dark;
}

/* In LIGHT theme the inputs sit on light surfaces, so the dark color-scheme
   above would paint a white indicator on a white input — invisible (the
   signing-link prefill date bug). Match the indicator to the theme polarity. */
:root[data-theme="light"] input[type="date"]:not(.doc-field),
:root[data-theme="light"] input[type="time"]:not(.doc-field),
:root[data-theme="light"] input[type="datetime-local"]:not(.doc-field),
:root[data-theme="light"] input[type="month"]:not(.doc-field),
:root[data-theme="light"] input[type="week"]:not(.doc-field) {
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) input[type="date"]:not(.doc-field),
  :root:not([data-theme]) input[type="time"]:not(.doc-field),
  :root:not([data-theme]) input[type="datetime-local"]:not(.doc-field),
  :root:not([data-theme]) input[type="month"]:not(.doc-field),
  :root:not([data-theme]) input[type="week"]:not(.doc-field) {
    color-scheme: light;
  }
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0.75;
  cursor: pointer;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}

.filter-input {
  padding: 0.625rem 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  font-size: 0.875rem;
  font-family: var(--font-sans);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.filter-input:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.filter-input:focus {
  outline: none;
  border-color: var(--color-accent-blue);
  background: rgba(96, 165, 250, 0.05);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}

.filter-select {
  padding: 0.625rem 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  font-size: 0.875rem;
  font-family: var(--font-sans);
  cursor: pointer;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
}

.empty-state__icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.4;
}

.empty-state__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.empty-state__desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Toast notifications */
.dashboard-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: var(--z-toast);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}

.dashboard-toast--visible {
  transform: translateY(0);
  opacity: 1;
}

.dashboard-toast--success {
  border-color: rgba(52, 211, 153, 0.3);
}

.dashboard-toast--error {
  border-color: rgba(248, 113, 113, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .dashboard-sidebar {
    transform: translateX(-100%);
    width: 280px;
  }

  .dashboard-nav-collapse {
    display: none;
  }

  .dashboard-sidebar--open {
    transform: translateX(0);
  }

  .dashboard-main {
    margin-left: 0;
  }

  .dashboard-mobile-toggle {
    display: block;
  }

  /* Topbar: tighten padding and let the actions (tier badge, bell, page CTA
     like the templates "+ New template" button) wrap to a second line instead
     of pushing the row past the viewport (375px overflow on /templates). */
  .dashboard-topbar {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    padding: 0.75rem 1rem;
  }

  /* Let the actions cluster (page CTA + theme toggle + bell + tier badge) wrap
     within the viewport instead of pushing the tier badge off-screen — adding
     the 36px theme toggle tipped /templates 37px past 375px. */
  .dashboard-topbar__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .dashboard-content {
    padding: 1.25rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .actions-grid {
    grid-template-columns: 1fr;
  }

  .upgrade-prompt {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Templates Page, Enhanced grid, list, preview modal, pagination
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Filters ─── */

.tpl-filters {
  margin-bottom: 1.5rem;
}

.tpl-filters__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tpl-filters__search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.tpl-filters__search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  pointer-events: none;
}

.tpl-filters__search {
  padding-left: 2.25rem !important;
  width: 100%;
}

.tpl-filters__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.tpl-filters__count {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.tpl-filters__clear {
  background: none;
  border: none;
  color: var(--color-accent-blue);
  font-size: 0.8125rem;
  font-family: var(--font-sans);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tpl-filters__clear:hover {
  color: var(--color-text);
}

/* ─── View Toggle ─── */

.tpl-view-toggle {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tpl-view-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 34px;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.tpl-view-toggle__btn + .tpl-view-toggle__btn {
  border-left: 1px solid var(--color-border);
}

.tpl-view-toggle__btn svg {
  width: 16px;
  height: 16px;
}

.tpl-view-toggle__btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
}

.tpl-view-toggle__btn--active {
  background: rgba(96, 165, 250, 0.1);
  color: var(--color-accent-blue);
}

/* ─── My Templates Toggle ─── */

.tpl-mine-toggle {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: var(--font-sans);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tpl-mine-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
}

.tpl-mine-toggle[aria-pressed="true"] {
  background: rgba(96, 165, 250, 0.1);
  color: var(--color-accent-blue);
  border-color: rgba(96, 165, 250, 0.3);
}

/* ─── Grid View ─── */

.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

/* ─── Template Card ─── */

.tpl-card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
}

.tpl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  border-color: var(--color-border-hover);
}

/* Mini paper thumbnail, always white paper look */
.tpl-card__thumb {
  background: #e8e8e8;
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color-scheme: light;
}

.tpl-card__thumb-lines {
  width: 60px;
  height: 72px;
  background: #fff;
  border: 1px solid #d4d4d8;
  border-radius: 3px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.tpl-card__thumb-line {
  height: 3px;
  background: #d4d4d8;
  border-radius: 999px; /* hairline pill (was 1px — off the radius tokens) */
}

.tpl-card__thumb-line--title {
  height: 4px;
  background: #a1a1aa;
  margin-bottom: 2px;
}

.tpl-card__body {
  padding: 1rem 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tpl-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.tpl-card__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.375rem;
  line-height: 1.35;
}

.tpl-card__desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.tpl-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.tpl-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.tpl-card__meta-item svg {
  opacity: 0.6;
}

.tpl-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* 8px — 4px grid (was 6px) */
  margin-top: auto;
}

.tpl-card__tag {
  display: inline-block;
  font-size: 0.6875rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.tpl-card__tag--more {
  color: var(--color-accent-blue);
  background: rgba(96, 165, 250, 0.08);
}

/* Card action bar */
.tpl-card__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.015);
}

.tpl-card__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.tpl-card__action-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
}

.tpl-card__action-btn--danger:hover {
  background: rgba(248, 113, 113, 0.12);
  color: var(--color-error);
}

/* Customize-with-AI action: subtle accent so the AI affordance reads at a glance */
.tpl-card__action-btn--ai {
  color: var(--color-accent-blue);
}
.tpl-card__action-btn--ai:hover {
  background: color-mix(in srgb, var(--color-accent-blue) 12%, transparent);
  color: var(--color-accent-blue);
}

/* ─── Category Badge ─── */

.tpl-category-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
}

.tpl-category-badge--sm {
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
  margin-right: 0.375rem;
  vertical-align: middle;
}

/* ─── List View ─── */

.tpl-list {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  /* Same pattern as .data-table-wrap: the table itself (name/desc/tags columns
     are white-space:nowrap) is routinely wider than the container at both
     desktop and mobile widths. overflow:hidden silently clipped the Tags/Used/
     Actions columns off-screen with no way to reach them; overflow-x:auto lets
     the row scroll into view instead. */
  overflow-x: auto;
  background: var(--color-surface-1);
}

.tpl-list__table {
  width: 100%;
}

.tpl-list__row {
  cursor: pointer;
  transition: background 0.15s;
}

.tpl-list__row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.tpl-list__name {
  white-space: nowrap;
}

.tpl-list__name strong {
  color: var(--color-text);
}

.tpl-list__desc {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tpl-list__signers {
  text-align: center;
  white-space: nowrap;
}

.tpl-list__tags {
  display: flex;
  gap: 0.25rem;
  flex-wrap: nowrap;
}

.tpl-list__actions {
  display: flex;
  gap: 0.25rem; /* 4px grid (was 2px) */
  white-space: nowrap;
}

/* ─── Pagination ─── */

.tpl-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.25rem;
  padding: 0.75rem 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tpl-pagination__buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px — 4px grid (was 6px) */
}

.tpl-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.pagination__btn--active {
  background: rgba(96, 165, 250, 0.15);
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
  font-weight: 600;
}

/* ─── Preview Modal ─── */

.tpl-preview-modal {
  max-width: 960px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.tpl-preview-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.tpl-preview-modal__header .modal__title {
  margin-bottom: 0.375rem;
}

.tpl-preview-modal__close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s;
}

.tpl-preview-modal__close:hover {
  color: var(--color-text);
}

.tpl-preview-modal__desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.tpl-preview-modal__content {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 1rem;
  min-height: 200px;
  max-height: none;
  background: #e0e0e0;
  border-radius: var(--radius-sm);
}

.tpl-preview-modal__loading,
.tpl-preview-modal__no-content {
  padding: 2rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* Meta sections in preview */
.tpl-preview-modal__meta {
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
  max-height: 40vh;
  overflow-y: auto;
  flex-shrink: 0;
}

.tpl-preview-modal__section {
  margin-bottom: 0.75rem;
}

.tpl-preview-modal__section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.tpl-preview-modal__fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px — 4px grid (was 6px) */
}

.tpl-preview-modal__fields--collapsed {
  display: none;
}

.tpl-preview-modal__section-title--toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.tpl-preview-modal__section-title--toggle:hover {
  color: var(--color-text);
}

.tpl-preview-modal__toggle-icon {
  transition: transform 0.2s ease;
}

.tpl-preview-modal__section-title--open .tpl-preview-modal__toggle-icon {
  transform: rotate(180deg);
}

.tpl-preview-modal__field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}

.tpl-preview-modal__field-name {
  color: var(--color-text);
  font-weight: 500;
}

.tpl-preview-modal__field-type {
  font-size: 0.6875rem;
  padding: 0.1rem 0.375rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.tpl-preview-modal__field-req {
  font-size: 0.6875rem;
  padding: 0.1rem 0.375rem;
  border-radius: 3px;
  background: rgba(251, 191, 36, 0.12);
  color: var(--color-warning);
  font-weight: 600;
}

.tpl-preview-modal__roles,
.tpl-preview-modal__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* 8px — 4px grid (was 6px) */
}

/* ─── Templates Page, Responsive ─── */

@media (max-width: 768px) {
  .tpl-grid {
    grid-template-columns: 1fr;
  }

  .tpl-filters__row {
    flex-direction: column;
    align-items: stretch;
  }

  .tpl-filters__search-wrap {
    min-width: 100%;
  }

  .tpl-view-toggle {
    align-self: flex-end;
  }

  .tpl-preview-modal {
    width: 100%;
    max-width: 100%;
    max-height: 95vh;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-top: auto;
  }

  .tpl-list__desc,
  .tpl-list__tags {
    display: none;
  }

  .tpl-pagination {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ====================================================================
   Template Editor, split-pane markdown editor with live preview
   ==================================================================== */

/* Wide content for editor page, fills available height */
.dashboard-content--wide {
  max-width: none;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 64px);
  height: calc(100vh - 64px);
  box-sizing: border-box;
  overflow-y: auto;
}

/* --- Editor header --- */
.editor-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.editor-name-input {
  flex: 1;
  min-width: 200px;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: inherit;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text);
  padding: 0.375rem 0;
  transition: border-color 0.15s;
}

.editor-name-input:focus {
  outline: none;
  border-bottom-color: var(--color-accent-blue);
}

.editor-name-input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.5;
  font-weight: 400;
}

.editor-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* --- Settings panel (collapsible) --- */
.editor-settings {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  animation: editorSlideDown 0.2s ease;
}

.editor-settings.hidden {
  display: none;
}

@keyframes editorSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.editor-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 120px;
  gap: 1rem;
}

.editor-settings-full {
  grid-column: 1 / -1;
}

.editor-settings label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 0.375rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.editor-settings .form-control {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-family: inherit;
  background: var(--color-surface-2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: border-color 0.15s;
}

.editor-settings .form-control:focus {
  outline: none;
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12);
}

.editor-settings textarea.form-control {
  resize: vertical;
  min-height: 2.5rem;
}

/* --- Chips (roles & tags) --- */
.editor-chips-section {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.editor-chips-group {
  flex: 1;
  min-width: 0;
}

.editor-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* 8px — 4px grid (was 6px) */
  margin-bottom: 0.5rem;
  min-height: 1.75rem;
}

.editor-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* 8px — 4px grid (was 6px) */
  padding: 0.25rem 0.5rem 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-accent-blue);
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 6px;
}

.editor-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1;
  padding: 0;
  transition: color 0.15s;
}

.editor-chip-remove:hover {
  color: var(--color-error-down);
}

.editor-chips-empty {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  opacity: 0.6;
}

.editor-add-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.editor-add-row .form-control-sm {
  flex: 1;
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  font-family: inherit;
  background: var(--color-surface-2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
}

.editor-add-row .form-control-sm:focus {
  outline: none;
  border-color: var(--color-accent-blue);
}

/* --- Editor body: split panes --- */
.editor-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  flex: 1;
  min-height: 400px;
}

.editor-pane-left {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 400px;
}

.editor-pane-right {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 400px;
}

/* Editor view toggle */
.editor-view-toggle {
  display: flex;
  gap: 4px; /* 4px grid (was 2px) */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px;
  background: var(--color-surface-2, rgba(255,255,255,0.04));
}

.editor-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background 0.15s, color 0.15s;
}

.editor-view-btn:hover {
  background: var(--color-surface-3, rgba(255,255,255,0.08));
  color: var(--color-text);
}

.editor-view-btn--active {
  background: var(--color-accent-blue) !important;
  color: #fff !important;
}

/* Editor body layout variants */
.editor-body--editor-only {
  grid-template-columns: 1fr;
}

.editor-body--editor-only .editor-pane-right {
  display: none;
}

.editor-body--preview-only {
  grid-template-columns: 1fr;
}

.editor-body--preview-only .editor-pane-left {
  display: none;
}

.editor-body--pdf {
  grid-template-columns: 1fr;
}

/* Import inline drop zone */
.import-inline {
  margin-bottom: 1.25rem;
}

.import-dropzone--inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  border: 2px dashed var(--color-border, #e2e8f0);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(96,165,250,0.04) 0%, rgba(139,92,246,0.04) 100%);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}

.import-dropzone--inline:hover,
.import-dropzone--inline.import-dropzone--active {
  border-color: var(--color-accent-blue);
  background: linear-gradient(135deg, rgba(96,165,250,0.08) 0%, rgba(139,92,246,0.08) 100%);
}

.import-dropzone--inline__text {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 4px grid (was 2px) */
}

.import-dropzone--inline__text strong {
  font-size: 0.9375rem;
  color: var(--color-text);
}

.import-dropzone--inline__text span {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.import-dropzone--inline__hint {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted, var(--color-text-secondary));
  opacity: 0.7;
}

/* Pulsing highlight when scrolled-to from sidebar */
@keyframes import-zone-pulse {
  0%, 100% { border-color: var(--color-accent-blue); box-shadow: 0 0 0 0 rgba(96,165,250,0.3); }
  50% { border-color: var(--color-accent-blue); box-shadow: 0 0 0 6px rgba(96,165,250,0); }
}

.import-dropzone--inline.import-dropzone--highlight {
  border-color: var(--color-accent-blue);
  animation: import-zone-pulse 0.8s ease 2;
}

/* --- Toolbar --- */
.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2, rgba(255, 255, 255, 0.02));
  flex-wrap: wrap;
}

.editor-tb-group {
  display: flex;
  align-items: center;
  gap: 0.25rem; /* 4px grid (was 2px) */
  flex-wrap: wrap;
}

.editor-tb-sep {
  width: 1px;
  height: 20px;
  background: var(--color-border);
  margin: 0 0.375rem;
}

.editor-tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-text-secondary);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px; /* radius token (was 5px) */
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}

.editor-tb-btn:hover {
  background: var(--color-surface-2, rgba(255, 255, 255, 0.06));
  border-color: var(--color-border);
  color: var(--color-text);
}

.editor-tb-btn.active {
  background: rgba(96, 165, 250, 0.1);
  border-color: rgba(96, 165, 250, 0.3);
  color: var(--color-accent-blue);
}

.editor-tb-bold { font-weight: 800; }
.editor-tb-italic { font-style: italic; }
.editor-tb-field { color: var(--color-accent-blue); }
.editor-tb-field:hover { color: var(--color-primary-hover); }
.editor-tb-sig { color: var(--color-warning-amber); }
.editor-tb-sig:hover { color: var(--color-warning); }
.editor-tb-clause { color: var(--color-success); }
.editor-tb-clause:hover { color: var(--color-success); }

/* --- Clause library in insert panel --- */
.clause-library-list { display: flex; flex-direction: column; gap: 8px; /* 4px grid (was 6px) */ }
.clause-library-item {
  padding: 8px 10px;
  border: 1px solid var(--color-border, #334155);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.clause-library-item:hover {
  background: rgba(52, 211, 153, 0.08);
  border-color: var(--color-success);
}
.clause-library-item__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary, #e4e4e7);
}
.clause-library-item__category {
  font-size: 0.6875rem;
  color: var(--color-success);
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 2px;
}
.clause-library-item__preview {
  font-size: 0.75rem;
  color: var(--color-text-secondary, #a1a1aa);
  margin-top: 4px;
  line-height: 1.4;
}
.clause-library-loading, .clause-library-empty {
  text-align: center;
  padding: 12px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary, #a1a1aa);
}

/* --- Insert panel (inline field form) --- */
.editor-insert-panel {
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-border);
  background: rgba(96, 165, 250, 0.03);
  animation: editorSlideDown 0.15s ease;
}

.editor-insert-panel.hidden {
  display: none;
}

.editor-insert-fields {
  display: flex;
  gap: 0.75rem;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 0.625rem;
}

.editor-insert-fields .form-group {
  flex: 1;
  min-width: 120px;
}

.editor-insert-fields label {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.editor-insert-fields .form-control {
  width: 100%;
  padding: 0.4375rem 0.625rem;
  font-size: 0.8125rem;
  font-family: inherit;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
}

.editor-insert-fields .form-control:focus {
  outline: none;
  border-color: var(--color-accent-blue);
}

.editor-insert-check {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px — 4px grid (was 6px) */
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
  cursor: pointer;
}

.editor-insert-check input {
  accent-color: var(--color-accent-blue);
}

.editor-insert-actions {
  display: flex;
  gap: 0.5rem;
}

.editor-insert-options-wide {
  flex: 2;
}

/* --- Field validation error banner --- */
.editor-validation-banner {
  padding: 0.5rem 0.875rem;
  background: rgba(248, 113, 113, 0.08);
  border-bottom: 1px solid rgba(248, 113, 113, 0.25);
  font-size: 0.8125rem;
  color: #f87171;
  animation: editorSlideDown 0.15s ease;
}

.editor-validation-banner[hidden] {
  display: none;
}

.editor-validation-banner strong {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.editor-validation-banner__list {
  margin: 0;
  padding-left: 1.25rem;
}

.editor-validation-banner__list li {
  margin-bottom: 0.125rem;
}

/* --- Auto-detect fields prompt banner --- */
.editor-detect-prompt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.875rem;
  background: rgba(96, 165, 250, 0.08);
  border-bottom: 1px solid rgba(96, 165, 250, 0.2);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  animation: editorSlideDown 0.15s ease;
}

.editor-detect-prompt[hidden] {
  display: none;
}

.editor-detect-prompt__msg {
  flex: 1;
}

.editor-detect-prompt__actions {
  display: flex;
  gap: 0.5rem;
}

/* --- Auto-detect toolbar button --- */
.editor-tb-detect {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem; /* 4px grid (was 4.8px) */
}

/* --- Iconified toolbar buttons (cryptic text abbreviations → SVG glyphs) --- */
.editor-tb-btn .tb-ico {
  width: 15px;
  height: 15px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.editor-tb-btn:has(.tb-ico) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Textarea --- */
.editor-textarea {
  flex: 1;
  width: 100%;
  padding: 1rem;
  font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-text);
  background: transparent;
  border: none;
  resize: none;
  outline: none;
  tab-size: 4;
  -moz-tab-size: 4;
}

.editor-textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.4;
}

/* --- Status bar (live counts + autosave indicator) --- */
.editor-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.375rem 0.875rem;
  border-top: 1px solid var(--color-border, rgba(148, 163, 184, 0.18));
  background: rgba(148, 163, 184, 0.06);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  min-height: 1.75rem;
}

.editor-statusbar__counts {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.editor-statusbar__draft {
  white-space: nowrap;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* --- Draft restore banner (offered on load when an unsaved draft exists) --- */
.editor-draft-restore {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.875rem;
  background: rgba(251, 191, 36, 0.1);
  border-bottom: 1px solid rgba(251, 191, 36, 0.3);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  animation: editorSlideDown 0.15s ease;
}

.editor-draft-restore[hidden] {
  display: none;
}

.editor-draft-restore__msg {
  flex: 1;
}

.editor-draft-restore__actions {
  display: flex;
  gap: 0.5rem;
}

.editor-pane-left--pdf {
  display: none;
}

.pdf-editor-bar {
  display: flex;
  gap: 0.5rem; /* 8px — 4px grid (was 6px) */
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.pdf-editor-hint {
  font-size: 0.75rem;
  color: #475569;
  margin-bottom: 0.75rem;
}

.pdf-editor-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.pdf-editor-page {
  background: #fff;
  border: 1px solid #cbd5e1;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.16);
}

.pdf-editor-page canvas {
  display: block;
}

.pdf-editor-field {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid #1d4ed8;
  border-radius: 4px;
  background: rgba(37, 99, 235, 0.22);
  /* White separator ring + drop shadow so the box stays visible against any
     page content (dark text, images, dark scans) instead of blending in. */
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.85),
    0 2px 8px rgba(15, 23, 42, 0.3);
  cursor: move;
  overflow: hidden;
}

/* The field name rides in a solid chip so it stays legible regardless of what
   is underneath: white-on-blue is ~8.6:1 (WCAG AAA), vs the old navy-on-12%-
   tint that vanished against a white PDF. */
.pdf-editor-field > span {
  max-width: 100%;
  padding: 1px 6px;
  background: #1d4ed8;
  color: #fff;
  font: 700 11px/1.4 Inter, system-ui, sans-serif;
  letter-spacing: 0.01em;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.pdf-editor-field:hover {
  background: rgba(37, 99, 235, 0.32);
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.95),
    0 4px 12px rgba(15, 23, 42, 0.4);
}

.pdf-editor-field--selected {
  border-color: #b45309;
  background: rgba(245, 158, 11, 0.24);
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.95),
    0 0 0 3px rgba(245, 158, 11, 0.55),
    0 4px 12px rgba(15, 23, 42, 0.4);
}

.pdf-editor-field--selected > span {
  background: #b45309;
}

/* Drag-and-drop: toolbox field buttons are draggable onto a page. Styled as
   high-contrast accent chips so they stay clearly visible on the dark editor
   chrome (the base .btn--outline alone disappears against the dark header). */
.draggable-field-btn {
  cursor: grab;
  border: 1px dashed var(--color-accent-purple, #a78bfa) !important;
  background: rgba(167, 139, 250, 0.16) !important;
  color: var(--color-text, #e8edf5) !important;
  font-weight: 600;
}

.draggable-field-btn:hover {
  background: rgba(167, 139, 250, 0.3) !important;
  border-color: var(--color-accent-purple, #a78bfa) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.draggable-field-btn:active {
  cursor: grabbing;
}

/* Active drop target while a field is dragged over a rendered PDF page. */
.pdf-editor-page--dragover {
  outline: 2px dashed var(--color-accent-purple, #a78bfa);
  outline-offset: -2px;
  box-shadow:
    0 4px 16px rgba(15, 23, 42, 0.16),
    0 0 0 4px rgba(167, 139, 250, 0.18);
}

/* --- Preview pane --- */
.editor-preview-header {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px — 4px grid (was 6px) */
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2, rgba(255, 255, 255, 0.02));
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.editor-preview-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background: #e0e0e0;
}

/* Live preview pane hosts the canonical .doc-preview (scaled real pages) */
.editor-preview-scroll .doc-preview__pages .document-page {
  margin: 0 auto 16px;
}

.sign-empty-preview {
  text-align: center;
  color: #94a3b8;
  padding: 3rem 1rem;
}

/* --- Cursor sync highlight --- */
/* Applied when editor caret is near this preview element. Fades out after
   ~1.2 s (set by syncPreviewCursor timer). The transition covers both the
   add (fast, 0.15 s) and remove (slower, 0.8 s) phases because CSS
   transitions run in both directions; the class removal triggers the fade. */
.editor-cursor-block {
  border-left: 3px solid var(--color-accent-blue);
  background: rgba(96, 165, 250, 0.09);
  padding-left: 0.75rem;
  border-radius: 2px;
  transition: border-color 0.8s ease-out, background 0.8s ease-out,
              padding-left 0.15s;
}
/* Elements that previously had the class fade out gracefully; we use
   the transition on the element itself so removal is smooth. */
.editor-preview-scroll [data-src-line] {
  transition: border-left 0.8s ease-out, background 0.8s ease-out;
}

/* --- Button variants for editor --- */
.btn--xs {
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
}

/* --- Responsive editor --- */
@media (max-width: 900px) {
  .editor-body {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .editor-pane-left {
    min-height: 50vh;
  }

  .editor-pane-right {
    min-height: 50vh;
  }

  .editor-settings-grid {
    grid-template-columns: 1fr 1fr;
  }

  .editor-chips-section {
    flex-direction: column;
    gap: 1rem;
  }
}

@media (max-width: 640px) {
  .editor-header {
    gap: 0.5rem;
  }

  .editor-name-input {
    font-size: 1rem;
    min-width: 0;
  }

  .editor-settings-grid {
    grid-template-columns: 1fr;
  }

  .editor-toolbar {
    gap: 0.25rem; /* 4px grid (was 2px) */
    padding: 0.375rem;
  }

  .editor-tb-btn {
    padding: 0.25rem 0.375rem;
    font-size: 0.625rem;
  }

  .editor-header-actions {
    width: 100%;
    justify-content: flex-end;
  }

}

/* --- Signer Preview Overlay --- */

.preview-overlay[hidden] {
  display: none !important;
}

.preview-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay-full);
  background: #f8fafc;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.preview-overlay__chrome {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.preview-overlay .preview-document-wrap {
  flex: 1;
  max-width: calc(8.5in + 64px);
  margin: 0 auto;
  padding: 32px 32px 120px;
  width: 100%;
  box-sizing: border-box;
}

.preview-overlay .signing-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-overlay-nav);
}

/* Signature blocks in preview: show placeholder lines */
.preview-overlay .signature-block {
  border: 2px dashed #94a3b8;
  border-radius: 6px;
  padding: 1.25rem;
  margin: 1rem 0;
  text-align: center;
  color: #64748b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.875rem;
  background: rgba(148, 163, 184, 0.05);
}

.preview-overlay .signature-block::before {
  content: attr(data-role) ", Click to Sign";
  text-transform: capitalize;
}

/* Field placeholders in preview: show as fillable inputs */
.preview-overlay .doc-field-placeholder {
  display: inline-block;
  min-width: 120px;
  border-bottom: 2px solid #3b82f6;
  padding: 2px 6px;
  color: #64748b;
  font-size: 0.85em;
  background: rgba(59, 130, 246, 0.04);
}

.preview-overlay .doc-field-placeholder::after {
  content: attr(data-field);
  text-transform: capitalize;
}

.preview-overlay .doc-field-placeholder[data-type="checkbox"] {
  min-width: auto;
  width: 18px;
  height: 18px;
  border: 2px solid #3b82f6;
  border-bottom: 2px solid #3b82f6;
  border-radius: 3px;
  vertical-align: middle;
  padding: 0;
}

.preview-overlay .doc-field-placeholder[data-type="checkbox"]::after {
  content: "";
}

/* Stickers */
.preview-overlay .sticker {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 6px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  vertical-align: middle;
}

.preview-overlay .sticker--fill {
  background: #dbeafe;
  color: #1e40af;
}

.preview-overlay .sticker--date {
  background: #fef3c7;
  color: #92400e;
}

.preview-overlay .sticker--check {
  background: #d1fae5;
  color: #065f46;
}

.preview-overlay .sticker--sig {
  background: #ede9fe;
  color: #5b21b6;
}

/* Autodate in preview */
.preview-overlay .doc-autodate {
  display: inline-block;
  min-width: 100px;
  border-bottom: 2px dashed #94a3b8;
  color: #94a3b8;
  font-style: italic;
  font-size: 0.9em;
  padding: 1px 4px;
}

.preview-overlay .doc-autodate::after {
  content: "(auto-filled on signing)";
}

/* --- Document Import --- */

.import-dropzone {
  border: 2px dashed var(--color-border, #e2e8f0);
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.import-dropzone:hover,
.import-dropzone--active {
  border-color: var(--color-accent-blue);
  background: rgba(96, 165, 250, 0.04);
}

.import-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-border, #e2e8f0);
  border-top-color: var(--color-accent-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

.import-progress-bar {
  height: 4px;
  background: var(--color-border, #e2e8f0);
  border-radius: 2px;
  overflow: hidden;
  max-width: 280px;
  margin: 0 auto;
}

.import-progress-fill {
  height: 100%;
  background: var(--color-accent-blue);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ── Branding Page ─────────────────────────────────────────────────── */

.upgrade-prompt {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(96,165,250,0.08) 0%, rgba(167,139,250,0.08) 100%);
  border: 1px solid rgba(96,165,250,0.2);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}
.upgrade-prompt__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-purple));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.upgrade-prompt__text {
  flex: 1;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.upgrade-prompt__text strong {
  color: var(--color-text);
}

/* Two-column layout: form | preview */
.branding-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 1024px) {
  .branding-layout {
    grid-template-columns: 1fr;
  }
  .branding-preview-col {
    order: -1;
  }
}

/* Form sections */
.branding-form-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── Branding form input polish ───────────────────────────────────── */

/* Labels */
.branding-section .form-group label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

/* Field chrome comes from the canonical dashboard-wide rules (see the
   "Canonical dashboard field chrome" block) — branding keeps only its
   full-width layout particular. */
.branding-section input[type="text"],
.branding-section input:not([type]),
.branding-section input[type="url"],
.branding-section input[type="email"],
.branding-section input[type="number"],
.branding-section textarea {
  width: 100%;
}

/* URL inputs get a subtle chain-link indicator */
.branding-section input[type="url"] {
  padding-left: 2.125rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.625rem center;
  background-size: 14px;
}

/* Textarea */
.branding-section textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.6;
}

/* Hint text */
.form-hint {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* form-group margin override for branding sections */
.branding-section .form-group {
  margin-bottom: 1.125rem;
}
.branding-section .form-group:last-child {
  margin-bottom: 0;
}

/* Subtle top separator between form groups */
.branding-section .form-group + .form-group {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.branding-section {
  padding: 1.5rem;
}
.branding-section__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.branding-section__icon {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, rgba(96,165,250,0.12), rgba(167,139,250,0.12));
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-blue);
  flex-shrink: 0;
}
.branding-section__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.branding-section__badge {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  color: #64748b;
  background: rgba(100,116,139,0.12);
  border-radius: 999px;
  padding: 0.15em 0.6em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Logo row: tabs (upload / URL) + preview */
.brand-logo-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 0.625rem;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.brand-logo-tab {
  flex: 1;
  padding: 0.45rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  background: transparent;
  color: var(--color-text-muted);
  border: none;
  border-right: 1px solid rgba(255,255,255,0.08);
  transition: background 0.15s, color 0.15s;
}
.brand-logo-tab:last-child {
  border-right: none;
}
.brand-logo-tab.active {
  background: rgba(96,165,250,0.15);
  color: var(--color-primary-hover);
}
.brand-logo-tab:hover:not(.active) {
  background: rgba(255,255,255,0.05);
  color: var(--color-text);
}

.brand-logo-upload-area {
  border: 2px dashed rgba(96,165,250,0.3);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: rgba(96,165,250,0.04);
}
.brand-logo-upload-area:hover,
.brand-logo-upload-area.drag-over {
  border-color: rgba(96,165,250,0.6);
  background: rgba(96,165,250,0.08);
}
.brand-logo-upload-area input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.brand-logo-upload-icon {
  width: 32px;
  height: 32px;
  margin: 0 auto 0.5rem;
  color: var(--color-accent-blue);
  opacity: 0.7;
}
.brand-logo-upload-text {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.brand-logo-upload-text strong {
  color: var(--color-primary-hover);
}
.brand-logo-upload-text small {
  display: block;
  font-size: 0.7rem;
  margin-top: 0.2rem;
  /* 0.7 opacity on top of --color-text-muted (already themed) composites to
     only 3.52:1 on the light-theme upload-area tint. 0.85 clears 4.5:1 there
     while dark theme (already high-contrast) stays comfortably passing. */
  opacity: 0.85;
}
.brand-logo-upload-preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-sm);
}
.brand-logo-upload-preview img {
  max-height: 40px;
  max-width: 120px;
  object-fit: contain;
  border-radius: 4px;
}
.brand-logo-upload-preview-name {
  flex: 1;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-logo-upload-remove {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  line-height: 1;
}
.brand-logo-upload-remove:hover {
  background: rgba(239,68,68,0.12);
  color: #f87171;
}

/* Logo row: URL input + inline preview */
.brand-logo-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.brand-logo-row input {
  flex: 1;
  min-width: 0;
}
.brand-logo-preview {
  width: 80px;
  height: 40px;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.brand-logo-preview__placeholder {
  font-size: 0.625rem;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.2;
}
.brand-logo-preview img {
  max-width: 76px;
  max-height: 36px;
  object-fit: contain;
}

/* Color inputs: swatch + hex text */
.brand-colors-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.brand-color-group {
  margin-bottom: 0;
}
.brand-color-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.625rem 0.25rem 0.25rem;
  transition: border-color 0.15s;
}
.brand-color-input:hover,
.brand-domain-input:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}
.brand-color-input:focus-within {
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px rgba(96,165,250,0.18);
}
.brand-color-input input[type="color"] {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  background: none;
  padding: 2px;
  cursor: pointer;
  flex-shrink: 0;
}
.brand-color-input input[type="text"],
.brand-color-input input:not([type]) {
  flex: 1;
  font-family: monospace;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  /* Borderless inside the wrapper */
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  outline: none !important;
}
.brand-color-input input[type="text"]:focus,
.brand-color-input input:not([type]):focus {
  box-shadow: none !important;
}

/* Domain input with https:// prefix */
.brand-domain-input {
  display: flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.brand-domain-input:focus-within {
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px rgba(96,165,250,0.15);
}
.brand-domain-input__prefix,
.brand-domain-input__suffix {
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  font-family: monospace;
  color: var(--color-accent-blue);
  background: rgba(96,165,250,0.08);
  height: 38px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.brand-domain-input__prefix {
  border-right: 1px solid rgba(255,255,255,0.08);
}
.brand-domain-input__suffix {
  border-left: 1px solid rgba(255,255,255,0.08);
}
.brand-domain-input input {
  flex: 1;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding-left: 0.75rem;
  font-family: monospace;
  font-size: 0.875rem;
}
.brand-domain-input input:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Domain status */
.domain-status-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0.875rem 1rem;
  margin-top: 0.75rem;
}
.domain-status-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 4px grid (was 10px) */
  margin-bottom: 0.375rem;
}
.domain-status-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15em 0.6em;
  border-radius: 999px;
}
.domain-status-badge--active {
  background: rgba(52,211,153,0.15);
  color: var(--color-success);
}
.domain-status-badge--pending_validation {
  background: var(--color-warning-bg);
  color: var(--color-warning-amber);
}
.domain-status-badge--failed {
  background: var(--color-error-bg);
  color: var(--color-error-down);
}
.domain-status-domain {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.domain-status-card__body {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.domain-dns-box {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  padding: 0.875rem 1rem;
  margin-top: 0.75rem;
}
.domain-dns-box h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: var(--color-text);
}
.domain-dns-box p {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0 0 0.625rem 0;
  line-height: 1.5;
}
.domain-dns-table {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  overflow: hidden;
}
.domain-dns-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.domain-dns-row:last-child { border-bottom: none; }
.domain-dns-row--header {
  background: rgba(255,255,255,0.04);
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.domain-dns-row code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.8125rem;
  color: var(--color-text);
}
/* btn--danger consolidated above (line ~481) */

/* Save row */
.branding-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.branding-save-status {
  font-size: 0.8125rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm, 6px);
}
.branding-save-status--success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid rgba(52,211,153,0.25);
}
.branding-save-status--error {
  background: rgba(239,68,68,0.10);
  color: #dc2626;
  border: 1px solid rgba(239,68,68,0.2);
}

/* ── Preview card ─────────────────────────────────────────────────── */
.branding-preview-col {
  position: sticky;
  top: 1rem;
}
.branding-preview-card {
  background: var(--color-surface-raised, rgba(255,255,255,0.03));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  padding: 1rem;
  overflow: hidden;
}
.branding-preview-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px — 4px grid (was 6px) */
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}

/* Simulated signing page */
.brand-preview-page {
  --bp-primary: #6366f1;
  --bp-accent: #a78bfa;
  background: #f8f8fc;
  border-radius: var(--radius-sm);
  border: 1px solid #e2e2ef;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
}

.bp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.bp-nav__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px — 4px grid (was 6px) */
}
.bp-nav__company {
  font-size: 11px;
  font-weight: 700;
  color: var(--bp-primary);
}
.bp-nav__status {
  font-size: 10px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.bp-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success-up);
}

.bp-doc {
  padding: 0.875rem;
}
.bp-doc__header {
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e8e8e8;
}
.bp-doc__title-line {
  height: 10px;
  background: #1a1a2e;
  border-radius: 3px;
  width: 55%;
  margin: 0 auto 0.35rem;
}
.bp-doc__subtitle-line {
  height: 7px;
  background: #c5c5d5;
  border-radius: 3px;
  width: 35%;
  margin: 0 auto;
}
.bp-doc__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* 4px grid (was 4.8px) */
  margin-bottom: 0.875rem;
}
.bp-line {
  height: 6px;
  background: #d8d8e8;
  border-radius: 2px;
}
.bp-line--full { width: 100%; }
.bp-line--90  { width: 90%; }
.bp-line--75  { width: 75%; }
.bp-line--60  { width: 60%; }

.bp-sig-box {
  border: 1.5px dashed var(--bp-primary);
  border-radius: 6px;
  padding: 0.5rem 0.625rem;
  background: rgba(99,102,241,0.04);
}
.bp-sig-box__label {
  font-size: 9px;
  font-weight: 600;
  color: var(--bp-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}
.bp-sig-box__line {
  height: 1.5px;
  background: var(--bp-primary);
  opacity: 0.3;
  margin-top: 0.75rem;
}

.bp-actions {
  padding: 0 0.875rem 0.75rem;
  text-align: center;
}
.bp-btn {
  background: var(--bp-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.45rem 1.25rem;
  font-size: 11px;
  font-weight: 600;
  cursor: default;
  font-family: inherit;
  transition: background 0.15s;
}

.bp-footer {
  padding: 0.5rem 0.875rem;
  border-top: 1px solid #eee;
  background: #fafafa;
  font-size: 9px;
  color: #94a3b8;
  text-align: center;
  line-height: 1.5;
}
.bp-footer__custom {
  display: block;
  margin-bottom: 0.15rem;
  color: #64748b;
}
.bp-footer__powered {
  /* The email preview simulates a LIGHT email regardless of app theme, so
     this needs a fixed readable gray (was opacity 0.6 -> under AA). */
  color: #52525b;
}

/* Simulated email */
.brand-preview-email {
  --bp-primary: #6366f1;
  --bp-accent: #a78bfa;
  border: 1px solid #e2e2ef;
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  background: #fff;
}
.bpe-header {
  padding: 0.5rem 0.75rem;
  background: #f4f4f8;
  border-bottom: 1px solid #e4e4ee;
}
.bpe-from {
  display: flex;
  align-items: baseline;
  gap: 0.25rem; /* 4px grid (was 5.6px) */
  margin-bottom: 0.2rem;
}
.bpe-from__name {
  font-weight: 600;
  color: #1a1a1a;
  font-size: 11px;
}
.bpe-from__addr {
  color: #52525b; /* was #64748b — under AA at 10px on the light email sim */
  font-size: 10px;
}
.bpe-subject {
  font-size: 10px;
  color: #374151;
  font-weight: 500;
}
.bpe-body {
  padding: 0.875rem;
}
.bpe-logo-area {
  margin-bottom: 0.625rem;
}
.bpe-company {
  font-size: 12px;
  font-weight: 700;
  color: var(--bp-primary);
}
.bpe-greeting {
  font-size: 11px;
  color: #374151;
  margin-bottom: 0.25rem;
}
.bpe-body-text {
  font-size: 11px;
  color: #374151;
  margin-bottom: 0.625rem;
  line-height: 1.4;
}
.bpe-cta {
  margin-bottom: 0.625rem;
}
.bpe-btn {
  background: var(--bp-primary);
  color: #fff;
  border: none;
  border-radius: 4px; /* radius token (was 5px) */
  padding: 0.35rem 0.875rem;
  font-size: 11px;
  font-weight: 600;
  cursor: default;
  font-family: inherit;
}
.bpe-footer-text {
  font-size: 10px;
  color: #64748b;
  margin-bottom: 0.375rem;
  line-height: 1.4;
}
.bpe-powered {
  font-size: 9px;
  color: #52525b; /* was #94a3b8 — under AA on the light email sim */
}

/* ============================================================
   Usage Page
   ============================================================ */

/* Overage alert banner */
.usage-overage-alert {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px — 4px grid (was 14px) */
  padding: 0.875rem 1.25rem;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  color: var(--color-text);
}
.usage-overage-alert__icon {
  flex-shrink: 0;
  color: var(--color-error);
  display: flex;
}
.usage-overage-alert__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* 4px grid (was 2px) */
  font-size: 0.875rem;
}
.usage-overage-alert__body strong {
  font-weight: 700;
  color: var(--color-error);
}

/* Warning variant (near limit, not yet over) */
.usage-overage-alert--warning {
  background: rgba(245,158,11,0.08);
  border-color: rgba(245,158,11,0.25);
}
.usage-overage-alert--warning .usage-overage-alert__icon {
  color: #f59e0b;
}
.usage-overage-alert--warning .usage-overage-alert__body strong {
  color: #f59e0b;
}

/* Hero card */
.usage-hero-card {
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}
.usage-hero-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.usage-hero-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.25rem;
}
.usage-hero-card__period {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
}
.usage-meter--lg .usage-meter__bar {
  height: 12px;
  border-radius: 6px;
}
.usage-meter--lg .usage-meter__fill {
  border-radius: 6px;
}
.usage-meter--lg .usage-meter__text {
  font-size: 0.875rem;
}

/* Status badge */
.usage-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.usage-status-badge--ok {
  background: rgba(52,211,153,0.12);
  color: var(--color-success);
}
.usage-status-badge--caution {
  background: rgba(251,191,36,0.12);
  color: var(--color-warning-amber);
}
.usage-status-badge--warning {
  background: rgba(245,158,11,0.14);
  color: var(--color-warning-amber);
}
.usage-status-badge--danger {
  background: rgba(239,68,68,0.12);
  color: var(--color-error);
}

/* Two-column detail row */
.usage-detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.usage-section-card {
  padding: 1.5rem;
}

/* Envelope breakdown */
.usage-breakdown {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* 4px grid (was 10px) */
}
.usage-breakdown__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}
.usage-breakdown__label {
  color: var(--color-text-muted);
}
.usage-breakdown__value {
  font-weight: 600;
  color: var(--color-text);
}
.usage-breakdown__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0.25rem 0;
}
.usage-breakdown__row--total .usage-breakdown__label,
.usage-breakdown__row--total .usage-breakdown__value {
  font-weight: 700;
  color: var(--color-text);
}

/* Billing projection */
.usage-projection {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* 4px grid (was 10px) */
}
.usage-projection__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}
.usage-projection__label {
  color: var(--color-text-muted);
}
.usage-projection__value {
  font-weight: 600;
  color: var(--color-text);
}
.usage-projection__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0.25rem 0;
}
.usage-projection__row--total .usage-projection__label,
.usage-projection__row--total .usage-projection__value {
  font-weight: 700;
  color: var(--color-text);
}
.usage-projection__note {
  margin-top: 0.875rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* 12-month bar chart */
.usage-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem; /* 8px — 4px grid (was 6px) */
  height: 140px;
  padding: 0 0 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: 1rem;
}
.usage-chart::-webkit-scrollbar { display: none; }
.usage-chart__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 32px;
  gap: 0.25rem;
}
.usage-chart__col--current .usage-chart__bars {
  opacity: 1;
}
.usage-chart__col:not(.usage-chart__col--current) .usage-chart__bars {
  opacity: 0.65;
}
.usage-chart__bars {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: flex-end;
}
/* Plan limit dashed line */
.usage-chart__bars::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: var(--limit-pct, 80%);
  border-top: 1px dashed rgba(96,165,250,0.35);
  pointer-events: none;
}
.usage-chart__bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: height 0.4s var(--ease-out);
}
.usage-chart__bar--bundled {
  background: rgba(96,165,250,0.25);
  position: relative;
  display: flex;
  align-items: flex-end;
}
.usage-chart__bar--self {
  background: linear-gradient(180deg, var(--color-accent-blue), #8b5cf6);
  border-radius: 3px 3px 0 0;
}
.usage-chart__label {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.usage-chart__value {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  min-height: 1em;
}
.usage-chart__legend {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px — 4px grid (was 6px) */
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.usage-chart__legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.usage-chart__legend-dot--api {
  background: linear-gradient(180deg, var(--color-accent-blue), #8b5cf6);
}
.usage-chart__legend-dot--bundled {
  background: rgba(96,165,250,0.25);
  border: 1px solid rgba(96,165,250,0.35);
}

/* Analytics page */
.analytics-chart {
  /* reuse usage-chart layout; only one bar series (no bundled layer) */
}
.analytics-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
  gap: 0.75rem;
}
.analytics-empty__icon {
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}
.analytics-empty__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.analytics-empty__desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 340px;
}

/* Chart color contract (charts.css, vendored from siteops shared/charts/) —
   maps the generic --chart-* variables the shared SVG chart library
   (site/js/lib/charts.js) is written against onto sign's own theme tokens.
   Single indirection: these track --color-* (already dark/light-reactive),
   so no separate dark-mode override block is needed here.
   NOTE: the selectors below still use sign's pre-refactor `analytics-*`
   class names (analytics.js passes them via className/cellClassName/etc.
   options to keep e2e selectors + prior pixels stable), not charts.css's
   `chart-*` defaults — the vendored charts.css styles the generic
   defaults for a consumer that doesn't override class names. */
:root {
  --chart-accent: var(--color-accent-blue);
  --chart-accent-dim: var(--color-accent-purple);
  --chart-series-2: var(--color-accent-green);
  --chart-muted: var(--color-text-muted);
  --chart-surface: var(--color-surface-3);
  --chart-grid: var(--color-surface-3);
  --chart-level-0: var(--color-surface-3);
  --chart-level-1: color-mix(in srgb, var(--color-accent-blue) 25%, var(--color-surface-3));
  --chart-level-2: color-mix(in srgb, var(--color-accent-blue) 50%, var(--color-surface-3));
  --chart-level-3: color-mix(in srgb, var(--color-accent-blue) 75%, var(--color-surface-3));
  --chart-level-4: var(--color-accent-blue);
}

.analytics-nodata {
  color: var(--chart-muted);
  font-size: 0.875rem;
  padding: 1rem 0;
}

/* Status breakdown stacked bar */
.analytics-stacked-bar-wrap {
  margin-top: 0.25rem;
  direction: ltr;
}
.analytics-stacked-bar {
  width: 100%;
  height: 10px;
  display: block;
  border-radius: 4px;
  overflow: hidden;
}
.analytics-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem; /* 4px grid (was 6px/14px) */
  margin-top: 0.625rem;
  font-size: 0.75rem;
  color: var(--chart-muted);
}
.analytics-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem; /* 4px grid (was 4.8px) */
}
.analytics-chip svg { flex-shrink: 0; }

/* 90-day activity heatmap */
.analytics-heatmap-wrap {
  overflow-x: auto;
  padding: 0.5rem 0 0.25rem;
  direction: ltr;
}
.analytics-heatmap-wrap svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
}
.analytics-hm-lab {
  fill: var(--chart-muted);
  font-size: 9px;
}
.analytics-hm-lv0 { fill: var(--chart-level-0); }
.analytics-hm-lv1 { fill: var(--chart-level-1); }
.analytics-hm-lv2 { fill: var(--chart-level-2); }
.analytics-hm-lv3 { fill: var(--chart-level-3); }
.analytics-hm-lv4 { fill: var(--chart-level-4); }
.analytics-hm-today {
  stroke: var(--chart-accent-dim);
  stroke-width: 1.5;
}
@media (prefers-reduced-motion: no-preference) {
  .analytics-hm-today { animation: analytics-today-pulse 2.4s ease-in-out infinite; }
}
@keyframes analytics-today-pulse {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: 0.25; }
}
.analytics-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--chart-muted);
}
.analytics-legend__label { margin: 0 0.125rem; }
.analytics-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.analytics-legend__swatch.analytics-hm-lv0 { background: var(--chart-level-0); }
.analytics-legend__swatch.analytics-hm-lv1 { background: var(--chart-level-1); }
.analytics-legend__swatch.analytics-hm-lv2 { background: var(--chart-level-2); }
.analytics-legend__swatch.analytics-hm-lv3 { background: var(--chart-level-3); }
.analytics-legend__swatch.analytics-hm-lv4 { background: var(--chart-level-4); }

/* Volume / completion trend area chart */
.analytics-trend-wrap {
  overflow-x: auto;
  direction: ltr;
}
.analytics-trend-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}
.analytics-ax-lab {
  fill: var(--chart-muted);
  font-size: 10px;
}
.analytics-grad-hi { stop-color: var(--chart-accent); stop-opacity: 0.35; }
.analytics-grad-lo { stop-color: var(--chart-accent); stop-opacity: 0; }
.analytics-area-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
}
.analytics-area-line--sent { stroke: var(--chart-accent); }
.analytics-area-line--completed {
  stroke: var(--chart-series-2);
  stroke-dasharray: 4 3;
}
.analytics-area-dot--sent { fill: var(--chart-accent); }
.analytics-area-dot--completed { fill: var(--chart-series-2); }
.analytics-area-hit { fill: transparent; }
.analytics-area-hit:hover + .analytics-area-dot--sent,
.analytics-area-hit:hover + .analytics-area-dot--completed {
  r: 5;
}
.analytics-trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem; /* 4px grid (was 6px/14px) */
  margin-top: 0.625rem;
  font-size: 0.75rem;
  color: var(--chart-muted);
}
.analytics-legend-swatch--sent { fill: var(--chart-accent); }
.analytics-legend-swatch--completed { fill: var(--chart-series-2); }

/* Top templates — horizontal bar rows */
.analytics-bar-rows { margin-top: 0.25rem; direction: ltr; }
.analytics-bar-row {
  display: grid;
  grid-template-columns: minmax(72px, 40%) 1fr 44px;
  align-items: center;
  gap: 0.75rem; /* 4px grid (was 10px) */
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
}
.analytics-bar-label {
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analytics-bar-svg {
  width: 100%;
  height: 10px;
  display: block;
  border-radius: 4px;
}
.analytics-bar-bg { fill: var(--chart-grid); }
.analytics-bar-val {
  color: var(--chart-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .analytics-heatmap-wrap svg { max-width: none; min-width: 280px; }
}

/* Plan comparison grid */
.usage-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
}
.usage-plan-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* 4px grid (was 10px) */
  background: var(--color-surface-1);
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
}
.usage-plan-card--current {
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 1px var(--color-accent-blue), 0 4px 24px rgba(96,165,250,0.12);
  background: rgba(96,165,250,0.04);
}
.usage-plan-card--current::before {
  content: "Current";
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent-blue);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.125rem 0.625rem;
  border-radius: 20px;
  white-space: nowrap;
}
.usage-plan-card--lower {
  opacity: 0.6;
}
.usage-plan-card__name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
}
.usage-plan-card__price {
  font-size: 1.5rem; /* type-scale step (was 28px, off-scale) */
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text);
  line-height: 1;
}
.usage-plan-card__price span {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
}
.usage-plan-card__annual {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.usage-plan-card__savings {
  display: inline-block;
  background: #dcfce7;
  color: #166534;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: 2px;
}
.usage-plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 4px grid (was 7px) */
  flex: 1;
}
.usage-plan-card__features li {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  padding-left: 1.25rem;
  position: relative;
  line-height: 1.4;
}
.usage-plan-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent-blue);
  font-weight: 700;
  font-size: 0.75rem;
}
.usage-plan-card--current .usage-plan-card__features li::before {
  color: var(--color-accent-blue);
}
.usage-plan-card__cta {
  margin-top: 0.875rem;
}
.usage-plan-card__current-label {
  display: block;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent-blue);
  padding: 0.4375rem 0;
  border: 1px dashed rgba(96,165,250,0.4);
  border-radius: var(--radius-sm);
}
.usage-plan-card__lower-label {
  display: block;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  padding: 0.4375rem 0;
}
.usage-plan-note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-align: center;
}
.usage-plan-note a {
  color: var(--color-accent-blue);
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-surface-3) 50%, var(--color-surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 6px;
}
.skeleton--text { height: 1rem; margin-bottom: 0.5rem; }
.skeleton--block { width: 100%; }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Responsive */
@media (max-width: 900px) {
  .usage-detail-row { grid-template-columns: 1fr; }
  .usage-plan-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .usage-plan-grid { grid-template-columns: 1fr; }
  .usage-hero-card { padding: 1.25rem; }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Print styles ────────────────────────────────────────────────── */
/* ── Notification Bell ── */

.notif-bell-wrapper {
  position: relative;
}

.notif-bell-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-1);
  color: var(--color-text-secondary);
  cursor: pointer;
  position: relative;
  transition: background 0.15s, color 0.15s;
}

.notif-bell-btn:hover {
  background-color: var(--color-surface-2, #f1f5f9);
  color: var(--color-text);
}

/* Theme toggle — matches the notification bell button so the topbar reads as
   one control cluster. Fully token-based, so it looks right in both themes. */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-1);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.theme-toggle-btn:hover {
  background-color: var(--color-surface-2, #f1f5f9);
  color: var(--color-text);
}

.notif-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  display: none;
  pointer-events: none;
}

.notif-bell-badge--visible {
  display: block;
}

.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-height: 420px;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: var(--z-dropdown);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.notif-dropdown__header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notif-dropdown__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.notif-dropdown__list {
  overflow-y: auto;
  flex: 1;
}

.notif-dropdown__empty,
.notif-dropdown__loading {
  padding: 24px 16px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 13px;
}

.notif-item {
  display: flex;
  gap: 8px; /* 4px grid (was 10px) */
  padding: 10px 16px;
  text-decoration: none;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-light, rgba(0,0,0,0.05));
  transition: background 0.1s;
}

.notif-item:hover {
  background: var(--color-surface-2, #f8fafc);
}

.notif-item--unread {
  background: rgba(37, 99, 235, 0.04);
}

.notif-item--unread:hover {
  background: rgba(37, 99, 235, 0.08);
}

.notif-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface-2, #f1f5f9);
  margin-top: 2px;
}

.notif-item__content {
  flex: 1;
  min-width: 0;
}

.notif-item__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.notif-item__body {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif-item__time {
  font-size: 11px;
  color: var(--color-text-tertiary, #94a3b8);
  margin-top: 2px;
}

@media (max-width: 480px) {
  /* The bell is not at the screen edge on mobile (the topbar actions sit inset),
     so an absolute right-anchored 360px dropdown ran off the LEFT (left edge
     ~ -73px at 375px). Pin it to the viewport instead: full width with 8px
     margins, just below the topbar — always on-screen regardless of the bell. */
  .notif-dropdown {
    position: fixed;
    top: 64px;
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 80px);
  }
}

@media print {
  .dashboard-sidebar,
  .dashboard-topbar,
  .dashboard-mobile-toggle,
  .btn,
  .dashboard-toast,
  .modal-overlay,
  .env-panel-overlay { display: none !important; }
  .dashboard-main { margin-left: 0 !important; }
  .dashboard-content { padding: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* Locked action button: a tier-gated capability surfaced to lower tiers as a
   discovery affordance (e.g. Create Template for non-Business). Muted with a
   padlock; still clickable — it routes to the upgrade prompt. */
.btn--locked {
  opacity: 0.65;
}
.btn--locked::before {
  content: "🔒";
  margin-right: 0.4em;
  font-size: 0.85em;
}

/* Template editor pane: dashboard-content--wide drops the max-width and pins a
   full-height editor for desktop. On phones, let it grow with content and scroll
   normally instead of trapping a 100vh pane. */
@media (max-width: 768px) {
  .dashboard-content--wide {
    height: auto;
    min-height: calc(100vh - 64px);
  }
}

/* ── Keyboard focus rings + pressed states ──────────────────────────────
   Border-color :focus styles above stay as-is for mouse focus; these add a
   visible ring for keyboard users (and a subtle press feedback) on the
   interactive dashboard controls that previously only changed border colour. */
.dashboard-sidebar__link:focus-visible,
.dashboard-sidebar__lang-select:focus-visible,
.action-card:focus-visible,
.notif-bell-btn:focus-visible,
.editor-view-btn:focus-visible,
.editor-tb-btn:focus-visible,
.brand-logo-tab:focus-visible,
.dashboard-alert__link:focus-visible,
.usage-plan-note a:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

.dashboard-sidebar__link:active,
.action-card:active,
.notif-bell-btn:active,
.editor-view-btn:active,
.editor-tb-btn:active,
.brand-logo-tab:active {
  transform: scale(0.98);
}

/* ── Dashboard scrollbars ───────────────────────────────────────────────
   Every page-level overflow container shows a thin, on-theme scrollbar
   instead of the OS default (the dark UI made the light default jarring).
   dashboard.css only loads on dashboard pages, so this scopes broadly under
   the .dashboard root. The two intentional hides (.usage-chart, .env-tabs)
   are preserved by re-asserting their hide idiom below. */
.dashboard {
  scrollbar-width: thin;
  scrollbar-color: var(--color-surface-3) transparent;
}
.dashboard *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.dashboard *::-webkit-scrollbar-thumb {
  background: var(--color-surface-3);
  border-radius: var(--radius-sm);
}
.dashboard *::-webkit-scrollbar-track {
  background: transparent;
}
/* Keep the two deliberately hidden scrollbars hidden. */
.dashboard .usage-chart,
.dashboard .env-tabs {
  scrollbar-width: none;
}
.dashboard .usage-chart::-webkit-scrollbar,
.dashboard .env-tabs::-webkit-scrollbar {
  display: none;
}

/* ── Glassmorphism design tokens + utility (premium editor chrome) ──────
   Additive only: these tokens are namespaced (--glass-*) and do NOT override
   the dashboard's existing color variables, so adding them recolors nothing.
   Apply .glass-card to opt a surface into the frosted treatment. */
:root {
  --glass-surface: rgba(17, 24, 39, 0.65);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: rgba(0, 0, 0, 0.4);
  --glass-accent-glow: rgba(167, 139, 250, 0.15);
  --glass-blur: blur(12px);
  --glass-radius: 12px;
}

/* Light theme: invert the glass surface to a frosted WHITE. The dark
   translucent default (rgba(17,24,39,.65)) over the light canvas renders as a
   low-contrast gray card — the "quickstart background is gray / hard to see"
   report. Two-block pattern mirrors the palette overrides in style.css:
   an explicit [data-theme="light"] pin, plus OS-preference when unpinned. */
:root[data-theme="light"] {
  --glass-surface: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-shadow: rgba(0, 0, 0, 0.12);
  --glass-accent-glow: rgba(37, 99, 235, 0.15);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --glass-surface: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-shadow: rgba(0, 0, 0, 0.12);
    --glass-accent-glow: rgba(37, 99, 235, 0.15);
  }
}

.glass-card {
  background: var(--glass-surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: 0 8px 32px 0 var(--glass-shadow);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.glass-card:hover {
  border-color: rgba(167, 139, 250, 0.3);
  box-shadow: 0 8px 32px 0 var(--glass-accent-glow);
}

/* ── Verification Credits widget (Phase 4) ──────────────────────── */

.vc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.vc-card {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* 12px — 4px grid (was 14px) */
}

.vc-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 4px grid (was 10px) */
}

.vc-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(96, 165, 250, 0.1);
  color: #60a5fa;
  flex-shrink: 0;
}

.vc-card__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.25;
}

.vc-card__type-badge {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  display: block;
  margin-top: 2px;
}

.vc-allotment {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px — 4px grid (was 6px) */
}

.vc-allotment__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.vc-allotment__reset {
  font-size: 0.6875rem;
  color: #94a3b8;
  font-style: italic;
}

.vc-allotment__count {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1;
}

.vc-allotment__used { color: var(--color-text); }
.vc-allotment__sep  { color: #94a3b8; font-weight: 400; }
.vc-allotment__limit{ color: var(--color-text-secondary); }

/* Reuse .usage-meter classes for the progress bar */
.vc-meter {
  height: 6px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  overflow: hidden;
}

.vc-meter__fill {
  height: 100%;
  background: #60a5fa;
  border-radius: 3px;
  transition: width 0.4s var(--ease-out, ease-out);
}

.vc-meter__fill--warning { background: #f59e0b; }
.vc-meter__fill--danger  { background: #f87171; }

.vc-purchased {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  padding: 0.5rem 0;
  border-top: 1px solid var(--color-border);
}

.vc-purchased__value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

.vc-purchased__value--zero {
  color: #64748b;
}

.vc-buy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.vc-buy__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}

.vc-pack-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vc-pack-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem; /* 4px grid (was 2px) */
  padding: 0.375rem 0.75rem;
  min-width: 64px;
  text-align: center;
  cursor: pointer;
}

.vc-pack-btn__count {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
}

.vc-pack-btn__price {
  font-size: 0.6875rem;
  color: #94a3b8;
  line-height: 1;
}

/* Low-balance banner */
.vc-low-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 4px grid (was 10px) */
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  font-size: 0.875rem;
  color: #fbbf24;
}

.vc-low-banner svg {
  flex-shrink: 0;
  color: #f59e0b;
}

/* Light theme: WCAG 1.4.3 fixes for the Verification Credits widget's raw
   hex text colors (#94a3b8 muted text, #fbbf24 warning text), tuned only
   for the dark canvas. Dark theme untouched; see style.css for the same
   two-block pattern. */
:root[data-theme="light"] .vc-card__type-badge,
:root[data-theme="light"] .vc-allotment__reset,
:root[data-theme="light"] .vc-allotment__sep,
:root[data-theme="light"] .vc-buy__label,
:root[data-theme="light"] .vc-pack-btn__price {
  color: #52525b;
}
:root[data-theme="light"] .vc-low-banner {
  /* Reuses the precedent-established --color-warning-amber light value
     (already 4.5+ on any of this family's tinted banner backgrounds). */
  color: #92400e;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .vc-card__type-badge,
  :root:not([data-theme]) .vc-allotment__reset,
  :root:not([data-theme]) .vc-allotment__sep,
  :root:not([data-theme]) .vc-buy__label,
  :root:not([data-theme]) .vc-pack-btn__price {
    color: #52525b;
  }
  :root:not([data-theme]) .vc-low-banner {
    color: #92400e;
  }
}

.vc-error {
  padding: 1rem 0;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

@media (max-width: 600px) {
  .vc-grid { grid-template-columns: 1fr; }
  .vc-pack-grid { gap: 0.5rem; /* 8px — 4px grid (was 6px) */ }
}

/* ── PAYG Envelope Credits widget ────────────────────────────────── */

.payg-balance-row {
  display: flex;
  gap: 2rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.payg-balance-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.payg-balance-stat__label {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.payg-balance-stat__value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}

.payg-balance-stat__value--zero {
  color: #64748b;
}

.payg-note {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin: 0.75rem 0 0;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .payg-balance-row { gap: 1.25rem; }
  .payg-balance-stat__value { font-size: 1.5rem; }
}

/* ── Shared Stripe checkout transition + post-purchase success modal ──────
   MOVED to site/css/checkout-shared.css so the public /pricing/ page can load
   the same chrome (it is not a dashboard page and must not pull in this whole
   stylesheet). The dashboard loads checkout-shared.css via its own <link> in
   site/dashboard/index.html. One source — see that file for the rules. */

/* a11y: links in dashboard prose must be distinguishable beyond color (link-in-text-block). */
#key-desc-para a { text-decoration: underline; }

/* ── Scope-chip event picker (webhooks) — ported from the hub api-keys page
   so event selection looks/behaves exactly like API-key scope selection
   (operator: one consistent chip UI across key scopes + webhook events). */
.scopes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px; /* 4px grid (was 10px) */
}
.scope-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "chk text"
    "chk desc";
  column-gap: 8px; /* 4px grid (was 10px) */
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-alt, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.scope-chip:hover {
  border-color: var(--accent, #60a5fa);
}
.scope-chip.selected {
  border-color: var(--accent, #60a5fa);
  background: var(--accent-bg, rgba(96, 165, 250, 0.08));
}
/* "All events": spans the full width at the top, visually distinct — the
   "everything" choice that's mutually exclusive with the granular events. */
.scope-chip--full {
  grid-column: 1 / -1;
}
.scope-chip--full .scope-chip-text {
  color: var(--accent, #60a5fa);
}
/* Granular chips are dimmed + non-interactive while All events is selected. */
.scope-chip--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.scope-chip--disabled input[type="checkbox"] {
  cursor: not-allowed;
}
.scope-chip input[type="checkbox"] {
  grid-area: chk;
  margin: 3px 0 0;
  accent-color: var(--accent, #60a5fa);
}
.scope-chip-text {
  grid-area: text;
  font-weight: 600;
  font-size: 0.92rem;
}
.scope-chip-desc {
  grid-area: desc;
  font-size: 0.82rem;
  color: var(--text-muted, #9ca3af);
  line-height: 1.4;
}

/* Deep-link scroll target (?example=… → #quick-start): clear the sticky
   topbar (~70px + breathing room) so block:start doesn't tuck the heading
   underneath it. */
#quick-start { scroll-margin-top: 84px; }

/* ── Scope-preset cards (api-keys page) + event-group headers (webhooks
   page). Same visual family as .scope-chip: presets are the read-only
   "easy mode" reference cards; group headers carry the per-namespace
   select-all toggle over the event chips. */
.scope-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px; /* 4px grid (was 10px) */
}
.scope-preset-card {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-alt, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.scope-preset-card--sensitive {
  border-color: var(--color-warning, #f59e0b);
}
.scope-preset-card__name {
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 4px;
}
.scope-preset-card__desc {
  font-size: 0.82rem;
  color: var(--text-muted, #9ca3af);
  line-height: 1.4;
  margin-bottom: 8px;
}
.scope-preset-card__scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.scope-preset-card__scopes code {
  font-size: 0.72rem;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-alt, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.scope-badge--sensitive {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-warning, #f59e0b);
  border: 1px solid var(--color-warning, #f59e0b);
  vertical-align: middle;
}
.scope-group {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.scope-group:first-of-type {
  margin-top: 0;
}
.scope-group__name {
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #9ca3af);
}
.scope-group__all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--text-muted, #9ca3af);
  cursor: pointer;
  margin-left: auto;
}
.scope-group__all input[type="checkbox"] {
  accent-color: var(--accent, #60a5fa);
  margin: 0;
}
.scope-group__all.scope-chip--disabled {
  cursor: not-allowed;
}

/* Light theme: WCAG 1.4.3 fixes. --accent/--text-muted are the hub's
   "ported from the hub api-keys page" mini token set (see comment above) —
   sign.abundera.ai never defines them, so they always render at their
   dark-tuned fallback regardless of theme. Dark theme is untouched; light
   theme gets a computed-compliant override scoped to just these two
   selectors. */
:root[data-theme="light"] .scope-chip-desc,
:root[data-theme="light"] .scope-preset-card__desc,
:root[data-theme="light"] .scope-group__name,
:root[data-theme="light"] .scope-group__all {
  color: #52525b;
}
:root[data-theme="light"] .scope-chip--full .scope-chip-text {
  color: #1d4ed8;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .scope-chip-desc,
  :root:not([data-theme]) .scope-preset-card__desc,
  :root:not([data-theme]) .scope-group__name,
  :root:not([data-theme]) .scope-group__all {
    color: #52525b;
  }
  :root:not([data-theme]) .scope-chip--full .scope-chip-text {
    color: #1d4ed8;
  }
}

/* ── Canonical document preview (js/dashboard/document-preview.js) ─────
   Pages are real .document-page elements (document.css geometry/typography —
   the parity-pinned rules). Pagination is measured at natural size off-screen;
   this wrapper only scales the finished pages to fit their container, so the
   transform can never affect page boundaries. */
.doc-preview {
  overflow: hidden;
}

.doc-preview__scale {
  width: 816px; /* 8.5in natural page width — scale() shrinks from here */
  transform-origin: top left;
}

.doc-preview__pages .document-page {
  margin: 0 auto 24px;
}

/* Read-only: field shells keep signing-page geometry but never invite input */
.doc-preview .doc-field,
.doc-preview .doc-radio {
  pointer-events: none;
}

/* An empty field box is a 1.5px underline + a 4%-alpha tint. Once .doc-preview
   scales the page down to fit, that underline is sub-pixel and the box vanishes.
   Lift both — with `background-color` (the `background` shorthand would reset
   the select chevron's background-image) and an INSET BOX-SHADOW rather than a
   thicker border, because border-width changes offsetHeight and would move page
   breaks away from the sealed PDF. Hexes are the AA-verified ones in
   document.css: #2563eb (5.17:1 on white) and #059669. */
.doc-preview .doc-field {
  background-color: rgba(37, 99, 235, 0.1);
  box-shadow: inset 0 -1.5px 0 0 #2563eb;
}

/* A resolved value reads as green-done, distinct from an unfilled blue box. */
.doc-preview .doc-value {
  background-color: rgba(5, 150, 105, 0.1);
  box-shadow: inset 0 -1px 0 0 #059669;
}

/* Field chips — see drawFieldChips() in js/dashboard/document-preview.js.
   Absolutely positioned and drawn AFTER paginate(), so they occupy no layout
   and cannot move a page break (same contract as .doc-line-number). The label
   is painted from data-label via ::after so that no text node lands in
   .document-page innerText, which the two pagination-parity specs compare
   against the sealed PDF. Palette matches the signing page's .sticker--fill. */
.doc-preview .doc-chip {
  position: absolute;
  /* `left` is the centre of the field's available span and `top` sits just
     above the field's underline (document-preview.js drawFieldChips); the
     translate centres/lifts the chip without measuring its rendered size. */
  transform: translate(-50%, -100%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  padding: 1px 5px;
  border: 1px solid #3b82f6;
  border-radius: 3px;
  background: #eff6ff;
  color: #1d4ed8;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.doc-preview .doc-chip::after {
  content: attr(data-label);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multi-line boxes (textarea) have no single underline to rest on; centre. */
.doc-preview .doc-chip--block {
  transform: translate(-50%, -50%);
}

.doc-preview .doc-chip--required {
  border-color: #2563eb;
  background: #dbeafe;
}

.doc-preview-sig__label {
  display: block;
  font-size: 10pt;
  color: #475569;
  padding-top: 14pt;
}

.doc-preview-sig__status {
  position: absolute;
  right: 0;
  bottom: 4pt;
  font-size: 9pt;
  font-weight: 600;
  color: #16a34a;
}

.doc-preview-sig--signed {
  background: rgba(22, 163, 74, 0.05);
}

/* ── Envelope document viewer: signing-progress strip ── */
.env-viewer__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.env-viewer__progress {
  font-weight: 600;
  margin-right: 0.25rem;
}

.env-viewer__signer {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: var(--color-surface-2, rgba(148, 163, 184, 0.12));
  color: var(--color-text-muted, #94a3b8);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.env-viewer__signer--signed {
  background: rgba(22, 163, 74, 0.12);
  color: #4ade80;
  border-color: rgba(22, 163, 74, 0.35);
}

/* Transient "Document updated" chip in the live viewer: hidden until a real
   change lands mid-view, then fades in and out (the document re-renders in
   place, so this is the only visible cue that a signature / decline / apply
   arrived). Empty on first render, so it takes no layout space until shown. */
.env-viewer__updated {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: #4ade80;
  opacity: 0;
}
.env-viewer__updated:empty { display: none; }
.env-viewer__updated--show { animation: env-viewer-updated 2.8s ease-out forwards; }
@keyframes env-viewer-updated {
  0% { opacity: 0; }
  8% { opacity: 1; }
  72% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .env-viewer__updated--show { animation: none; opacity: 1; }
}

/* Read-only viewer banner: this document has open clause negotiations; the
   redlines render below and this routes to the reviewer. Purple = the signer/
   negotiation accent used across the timeline + clause dots. */
.env-viewer__neg-banner {
  display: block;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.3);
  color: #7c3aed;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}
.env-viewer__neg-banner:hover { background: rgba(124, 58, 237, 0.16); }

.filter-input--invalid { border-color: var(--color-error) !important; }

/* ── Notification channel preferences (webhooks page card) ─────────── */
.notif-pref-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
}
.notif-pref-row__text { display: flex; flex-direction: column; gap: 0.25rem; /* 4px grid (was 2px) */ }
.notif-pref-row__text strong { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); }
.notif-pref-row__hint { font-size: 0.8125rem; color: var(--color-text-muted); }
.notif-pref-toggle {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-accent-blue, #2563eb);
  cursor: pointer;
}
#notifpref-sms-phone {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
  border-radius: var(--radius-sm, 8px);
  color: var(--color-text);
  font-size: 0.875rem;
}

/* Workspace (org) chooser — themed surface instead of the old inline
   white-alpha overlay, which was tuned for a dark sidebar and rendered an
   invisible control (white-on-white) once the sidebar follows the light
   theme. Same tokens in both themes; options inherit the select-option
   contrast rule above. */
.dashboard-sidebar__workspace {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}
.dashboard-sidebar__workspace:focus-within {
  border-color: var(--color-accent-blue);
}

/* Sidebar invite quick action (admins of the active org only). */
.dashboard-sidebar__invite {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
  border: 1px dashed var(--color-border);
  color: var(--color-accent-blue);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}
.dashboard-sidebar__invite:hover {
  border-style: solid;
  border-color: var(--color-accent-blue);
  background: var(--color-surface-2);
}

/* The identity block is a link to the profile (standard bottom-left pattern). */
a.dashboard-sidebar__user {
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  padding: 0.375rem;
  margin: -0.375rem;
}
a.dashboard-sidebar__user:hover {
  background: var(--color-surface-2);
}
a.dashboard-sidebar__user:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 1px;
}

/* Category badge color families — dark defaults, light overrides at
   700-weight so every family clears AA on its tint (templates sweep
   2026-07-14: the old inline colors failed contrast in light theme and
   broke design-token purity). JS maps category -> family, never colors. */
.tpl-cat--blue { background: rgba(59,130,246,0.12); color: #60a5fa; }
.tpl-cat--green { background: rgba(52,211,153,0.12); color: #34d399; }
.tpl-cat--purple { background: rgba(167,139,250,0.12); color: #a78bfa; }
.tpl-cat--amber { background: rgba(251,191,36,0.12); color: #fbbf24; }
.tpl-cat--red { background: rgba(248,113,113,0.12); color: #f87171; }
.tpl-cat--pink { background: rgba(244,114,182,0.12); color: #f472b6; }
.tpl-cat--orange { background: rgba(251,146,60,0.12); color: #fb923c; }
.tpl-cat--indigo { background: rgba(129,140,248,0.12); color: #818cf8; }
.tpl-cat--gray { background: rgba(161,161,170,0.12); color: #a1a1aa; }
.tpl-cat--lime { background: rgba(74,222,128,0.12); color: #4ade80; }
:root[data-theme="light"] .tpl-cat--blue { color: #1d4ed8; }
:root[data-theme="light"] .tpl-cat--green { color: #047857; }
:root[data-theme="light"] .tpl-cat--purple { color: #6d28d9; }
:root[data-theme="light"] .tpl-cat--amber { color: #92400e; }
:root[data-theme="light"] .tpl-cat--red { color: #b91c1c; }
:root[data-theme="light"] .tpl-cat--pink { color: #be185d; }
:root[data-theme="light"] .tpl-cat--orange { color: #c2410c; }
:root[data-theme="light"] .tpl-cat--indigo { color: #4338ca; }
:root[data-theme="light"] .tpl-cat--gray { color: #52525b; }
:root[data-theme="light"] .tpl-cat--lime { color: #3f6212; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .tpl-cat--blue { color: #1d4ed8; }
  :root:not([data-theme]) .tpl-cat--green { color: #047857; }
  :root:not([data-theme]) .tpl-cat--purple { color: #6d28d9; }
  :root:not([data-theme]) .tpl-cat--amber { color: #92400e; }
  :root:not([data-theme]) .tpl-cat--red { color: #b91c1c; }
  :root:not([data-theme]) .tpl-cat--pink { color: #be185d; }
  :root:not([data-theme]) .tpl-cat--orange { color: #c2410c; }
  :root:not([data-theme]) .tpl-cat--indigo { color: #4338ca; }
  :root:not([data-theme]) .tpl-cat--gray { color: #52525b; }
  :root:not([data-theme]) .tpl-cat--lime { color: #3f6212; }
}

/* Import on-ramp text (was inline-styled; templates sweep 2026-07-14). */
.import-kicker {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.import-progress-msg {
  margin: 0.625rem 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.import-error-msg {
  margin: 0;
  color: var(--color-error);
  font-size: 0.875rem;
}

/* Declarations: resolved-state by-line on the row. */
.decl-resolved-by {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Signing-groups card action row; contacts row buttons share the same gap. */
.sg-actions-row {
  display: flex;
  gap: 0.5rem;
}

.btn-edit-contact {
  margin-right: 0.5rem; /* 4px grid (was 6px inline) */
}

/* Signing-groups page classes (de-inlined 2026-07-14 recipients sweep). */
.sg-heading { font-size: 1rem; font-weight: 600; color: var(--color-text); margin: 0; }
.sg-field-label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted); margin-bottom: 0.375rem; }
.sg-count-accent { color: var(--color-accent-blue); font-weight: 600; }
.sg-error-text { color: var(--color-error); }
.sg-plain-text { color: var(--color-text); }
.sg-muted-text { color: var(--color-text-muted); }
.sg-member-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0; border-top: 1px solid var(--color-border); font-size: 0.8125rem; }
.sg-member-row--edit { border-top: none; border-bottom: 1px solid var(--color-border); }
.sg-member-name { flex: 1; font-size: 0.8125rem; color: var(--color-text); }
.sg-member-email { flex: 1; font-size: 0.8125rem; color: var(--color-text-muted); }
.sg-empty-note { font-size: 0.8125rem; color: var(--color-text-muted); padding: 0.5rem 0; }
.sg-intro { font-size: 0.875rem; color: var(--color-text-secondary); margin-bottom: 1rem; }
.sg-remove-btn { padding: 0.125rem 0.375rem; font-size: 0.6875rem; color: var(--color-error); border-color: var(--color-error); }
.sg-quiet-row { padding: 0.375rem 0; font-size: 0.8125rem; color: var(--color-text-muted); }

/* Shared text utilities (admin sweep 2026-07-14) — the recurring recipes the
   token-purity oracle kept finding inlined. Pure color/typography; layout
   (margins, flex) stays contextual. */
.text-note { font-size: 0.8125rem; color: var(--color-text-muted); }
.text-desc { font-size: 0.875rem; color: var(--color-text-muted); }
.text-strong { font-weight: 600; color: var(--color-text); }
.text-error-sm { font-size: 0.75rem; color: var(--color-error); }
.link-accent { color: var(--color-accent-blue); }
.mono-sm { font-family: monospace; font-size: 0.8125rem; }
.form-label-sm { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted); margin-bottom: 0.375rem; }

/* API-keys page: scope check marks + hub-embed chrome. */
.scope-yes { text-align: center; color: var(--color-accent-green); }
.text-secondary-sm { font-size: 0.8125rem; color: var(--color-text-secondary); }
.embed-fallback-card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  padding: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}
.embed-frame {
  width: 100%;
  min-height: 640px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  margin-bottom: 2rem;
  display: block;
}

/* Organizations: role badge + card body (de-inlined, admin sweep). */
.org-role-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-purple);
  background: rgba(167, 139, 250, 0.1);
  padding: 0.25rem 0.5rem; /* 4px grid (was 0.2rem) */
  border-radius: 4px;
}
.org-card-body {
  padding: 1.25rem;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}

/* Admin sweep de-inlining, round 2 (organizations + webhooks). */
.subsection-title { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); }
.subsection-title--danger { color: var(--color-error); }
.page-subhead { font-size: 1.25rem; font-weight: 700; color: var(--color-text); margin: 0; }
.stat-value-sm { font-size: 1rem; }
.danger-zone-card {
  margin-top: 2rem;
  padding: 1.5rem;
  border: 1px solid rgba(248, 113, 113, 0.2);
  border-radius: var(--radius);
  background: rgba(248, 113, 113, 0.03);
}
.code-chip { background: var(--color-surface-2); padding: 0.125rem 0.5rem; border-radius: 4px; }
.code-block-sm {
  display: block;
  background: var(--color-surface-2);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  word-break: break-all;
}
.success-banner {
  margin-bottom: 1rem;
  padding: 1rem;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--radius-sm);
}
.text-success-sm { font-size: 0.8125rem; font-weight: 600; color: var(--color-success); }
.text-item-title { font-size: 0.875rem; font-weight: 500; color: var(--color-text); }
.text-item-heading { font-size: 0.875rem; font-weight: 600; color: var(--color-text); }
.empty-emoji { font-size: 2rem; }
.info-callout {
  padding: 0.625rem 0.75rem;
  background: rgba(96, 165, 250, 0.06);
  border-left: 3px solid var(--color-accent-blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.status-dot--on { background: var(--color-success); }
.status-dot--off { background: var(--color-text-muted); }

/* Contact autocomplete surface (positioning stays inline in the lib). */
.contact-suggest {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.contact-suggest__item {
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
}
.contact-suggest__name { font-weight: 600; color: var(--color-text); }
.contact-suggest__email { font-size: 0.8rem; color: var(--color-text-muted); }

.form-divider-top { border-top: 1px solid var(--color-border); padding-top: 1rem; }

/* Billing budget cap display (was inline 1.35rem, off-scale). */
.budget-cap-value { font-size: 1.25rem; font-weight: 600; }

/* Stat-card value size variants (were inline font-sizes on analytics/usage). */
.stat-card__value--md { font-size: 1.5rem; }
.stat-card__value--rg { font-size: 1.25rem; }

.tabular-nums { font-variant-numeric: tabular-nums; }
.text-warn { color: var(--color-warning); }

.text-desc-secondary { font-size: 0.875rem; color: var(--color-text-secondary); }
.env-badge--tiny { font-size: 0.6875rem; /* 11px scale step (was 0.7rem/11.2px) */ }

/* Billing budget bar (was phantom --color-primary/--color-surface-2 fallbacks). */
.budget-bar { height: 8px; background: var(--color-surface-2); border-radius: 4px; overflow: hidden; }
.budget-bar__fill { height: 100%; background: var(--color-accent-blue); }
.budget-bar__fill--warn { background: var(--color-warning); }
.text-note-secondary { font-size: 0.8125rem; color: var(--color-text-secondary); }

/* Declarations review: parent envelope left 'completed' — approval disabled. */
.decl-envelope-warning {
  margin-top: 0.5rem;
  padding: 8px 10px;
  border: 1px solid var(--color-warning-border, #f59e0b);
  border-radius: 8px;
  font-size: 0.8125rem;
  color: var(--color-warning-text, #92400e);
  background: var(--color-warning-bg, #fffbeb);
}