/* Design tokens shared by the React (Tailwind) and HTMX (plain CSS) halves.
   The design tokens (formerly shared with Tailwind via app/app.css). */

/* ── Brand — invariant across theme and density ─────────────── */
:root {
  --jaris-blue: #006098;
  --jaris-blue-dark: #004d7a;
  --jaris-blue-light: #0078bf;
  --jaris-teal: #14b8a6;
  --jaris-teal-dark: #0f9488;
  --jaris-teal-light: #2dd4bf;
  --jaris-purple: #8b5cf6;
  --jaris-purple-light: #a78bfa;
  --jaris-orange: #c94f19;
}

/* ── Light theme ─────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #f6f8fa;
  --bg-tertiary: #eaeef2;
  --bg-elevated: #ffffff;

  /* Borders */
  --border-primary: #d0d7de;
  --border-secondary: #e1e4e8;

  /* Text */
  --text-primary: #1f2328;
  --text-secondary: #2c3138;
  --text-muted: #4a5159;

  /* Status */
  --status-success: #1a7f37;
  --status-warning: #9a6700;
  --status-error: #b91c28;
  --status-info: #0969da;
  --status-pending: #7040c4;

  /* Status muted (badges) */
  --status-success-muted: rgba(26, 127, 55, 0.12);
  --status-warning-muted: rgba(154, 103, 0, 0.12);
  --status-error-muted: rgba(185, 28, 40, 0.12);
  --status-info-muted: rgba(9, 105, 218, 0.12);
  --status-pending-muted: rgba(112, 64, 196, 0.12);

  /* Modal backdrop — from @jarisdev/prototype-design-system tokens (--overlay-bg) */
  --overlay-bg: rgba(15, 23, 42, 0.45);

  /* shadcn/ui compat (HSL) — required by @jarisdev/prototype-design-system primitives */
  --background: 0 0% 100%;
  --foreground: 210 12% 16%;
  --card: 210 20% 98%;
  --card-foreground: 210 12% 16%;
  --popover: 0 0% 100%;
  --popover-foreground: 210 12% 16%;
  --primary: 203 100% 30%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 16% 93%;
  --secondary-foreground: 210 12% 16%;
  --muted: 210 16% 93%;
  --muted-foreground: 210 8% 43%;
  --accent: 210 16% 93%;
  --accent-foreground: 210 12% 16%;
  --destructive: 2 73% 44%;
  --destructive-foreground: 0 0% 100%;
  --border: 210 18% 87%;
  --input: 210 18% 87%;
  --ring: 203 100% 30%;
  --radius: 6px;
}

/* ── Dark theme ──────────────────────────────────────────────── */
.dark {
  /* Backgrounds */
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #21262d;
  --bg-elevated: #30363d;

  /* Borders */
  --border-primary: #30363d;
  --border-secondary: #21262d;

  /* Text */
  --text-primary: #e6edf3;
  --text-secondary: #9da5ae;
  --text-muted: #848d97;

  /* Status */
  --status-success: #3fb950;
  --status-warning: #d29922;
  --status-error: #ff6e66;
  --status-info: #58a6ff;
  --status-pending: #b387f9;

  /* Status muted (badges) */
  --status-success-muted: rgba(63, 185, 80, 0.15);
  --status-warning-muted: rgba(210, 153, 34, 0.15);
  --status-error-muted: rgba(255, 110, 102, 0.15);
  --status-info-muted: rgba(88, 166, 255, 0.15);
  --status-pending-muted: rgba(179, 135, 249, 0.15);

  /* Modal backdrop — from @jarisdev/prototype-design-system tokens (--overlay-bg) */
  --overlay-bg: rgba(0, 0, 0, 0.75);

  /* shadcn/ui compat (HSL) — required by @jarisdev/prototype-design-system primitives */
  --background: 215 21% 5%;
  --foreground: 210 29% 93%;
  --card: 215 20% 11%;
  --card-foreground: 210 29% 93%;
  --popover: 215 18% 18%;
  --popover-foreground: 210 29% 93%;
  --primary: 203 100% 30%;
  --primary-foreground: 0 0% 100%;
  --secondary: 215 14% 15%;
  --secondary-foreground: 210 29% 93%;
  --muted: 215 14% 15%;
  --muted-foreground: 210 8% 56%;
  --accent: 215 14% 15%;
  --accent-foreground: 210 29% 93%;
  --destructive: 4 100% 70%;
  --destructive-foreground: 0 0% 100%;
  --border: 215 14% 20%;
  --input: 215 14% 20%;
  --ring: 203 100% 30%;
}

/* ── Density: Comfortable (default) ──────────────────────────── */
:root {
  /* Font sizes */
  --ca-jaris-font-2xs: 10px;
  --ca-jaris-font-xs: 12px;
  --ca-jaris-font-sm: 13px;
  --ca-jaris-font-base: 14px;
  --ca-jaris-font-lg: 14px;
  --ca-jaris-font-xl: 16px;
  --ca-jaris-font-2xl: 20px;
  --ca-jaris-font-3xl: 24px;

  /* Control heights */
  --ca-jaris-control-xs: 24px;
  --ca-jaris-control-sm: 28px;
  --ca-jaris-control-md: 36px;
  --ca-jaris-control-lg: 40px;

  /* Cell padding (tables) */
  --ca-jaris-cell-px: 16px;
  --ca-jaris-cell-py: 12px;

  /* Card / page padding */
  --ca-jaris-card-p: 12px;
  --ca-jaris-page-p: 16px;

  /* Gaps */
  --ca-jaris-gap-xs: 4px;
  --ca-jaris-gap-sm: 8px;
  --ca-jaris-gap-md: 12px;
  --ca-jaris-gap-lg: 16px;
  --ca-jaris-gap-xl: 24px;

  /* Header */
  --ca-jaris-header-h: 48px;

  /* Badge padding */
  --ca-jaris-badge-px: 8px;
  --ca-jaris-badge-py: 4px;

  /* Input padding */
  --ca-jaris-input-px: 12px;
  --ca-jaris-input-py: 8px;
}

/* ── Density: Dense (opt-in via data-density="dense") ────────── */
[data-density="dense"] {
  --ca-jaris-font-2xs: 9px;
  --ca-jaris-font-xs: 10px;
  --ca-jaris-font-sm: 11px;
  --ca-jaris-font-base: 11.5px;
  --ca-jaris-font-lg: 12px;
  --ca-jaris-font-xl: 14px;
  --ca-jaris-font-2xl: 17px;
  --ca-jaris-font-3xl: 21px;

  --ca-jaris-control-xs: 20px;
  --ca-jaris-control-sm: 24px;
  --ca-jaris-control-md: 32px;
  --ca-jaris-control-lg: 36px;

  --ca-jaris-cell-px: 8px;
  --ca-jaris-cell-py: 6px;

  --ca-jaris-card-p: 8px;
  --ca-jaris-page-p: 12px;

  --ca-jaris-gap-xs: 2px;
  --ca-jaris-gap-sm: 4px;
  --ca-jaris-gap-md: 8px;
  --ca-jaris-gap-lg: 12px;
  --ca-jaris-gap-xl: 16px;

  --ca-jaris-header-h: 40px;

  --ca-jaris-badge-px: 6px;
  --ca-jaris-badge-py: 2px;

  --ca-jaris-input-px: 8px;
  --ca-jaris-input-py: 6px;
}

/* ── Nav — fixed spacing (does not change with density) ──────── */
:root {
  --ca-jaris-nav-item-px: 12px;
  --ca-jaris-nav-item-py: 8px;
  --ca-jaris-nav-item-gap: 12px;
  --ca-jaris-nav-container-p: 12px;
  --ca-jaris-nav-section-title-px: 12px;
  --ca-jaris-nav-section-title-py: 8px;
  --ca-jaris-nav-child-py: 6px;
  --ca-jaris-nav-logo-h: 56px;
  --ca-jaris-nav-logo-px: 16px;
  --ca-jaris-nav-user-p: 12px;
  --ca-jaris-nav-width: 208px; /* trimmed from 240px — reduce left-nav whitespace */
}

/* HTMX-half stylesheet. Plain CSS over the shared tokens (tokens.css): one
   class per component, screens compose them and never style inline. Mirrors
   the Tailwind shell/primitives so migrated and unmigrated pages match. */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--ca-jaris-font-sm);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.font-data { font-family: "IBM Plex Mono", Menlo, Monaco, monospace; font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.text-error { color: var(--status-error); }
:focus-visible { outline: 2px solid var(--jaris-blue); outline-offset: 1px; }

/* ── App shell ─────────────────────────────────────────────── */
.app { display: flex; height: 100%; }
.nav {
  display: flex; flex-direction: column; flex-shrink: 0; width: var(--ca-jaris-nav-width);
  background: var(--bg-secondary); border-right: 1px solid var(--border-primary);
}
.nav__logo { display: flex; align-items: center; height: var(--ca-jaris-nav-logo-h); padding: 0 16px; border-bottom: 1px solid var(--border-primary); }
.nav__logo img { height: 28px; width: auto; max-width: 160px; object-fit: contain; }
.nav__brand { font-size: var(--ca-jaris-font-base); font-weight: 600; letter-spacing: -0.01em; }
.nav__list { flex: 1; overflow: auto; padding: 8px; display: flex; flex-direction: column; }
.nav__section + .nav__section { margin-top: 4px; }
.nav__section--bottom { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-primary); }
.nav__label { padding: 12px 8px 4px; font-size: var(--ca-jaris-font-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.nav__item {
  display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 4px;
  font-size: var(--ca-jaris-font-sm); font-weight: 500; color: var(--text-secondary);
}
.nav__item:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.nav__item[aria-current="page"] { color: var(--jaris-blue); background: color-mix(in srgb, var(--jaris-blue) 10%, transparent); }
.nav__item svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav__footer { padding: 8px; border-top: 1px solid var(--border-primary); display: grid; gap: 4px; }
.nav__row { display: flex; align-items: center; gap: 4px; }
.nav__row .nav__item { flex: 1; font-size: var(--ca-jaris-font-xs); color: var(--text-muted); }
.nav__user { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 4px; background: none; cursor: pointer; text-align: left; }
.nav__user:hover { background: var(--bg-tertiary); }
.avatar { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-size: var(--ca-jaris-font-xs); font-weight: 600; background: var(--jaris-blue); flex-shrink: 0; }
.avatar--admin { background: var(--jaris-purple); }
.nav__who { min-width: 0; }
.nav__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__hint { display: block; font-size: var(--ca-jaris-font-xs); color: var(--text-muted); }
.role--admin { background: var(--status-pending-muted); color: var(--status-pending); }
.role--member { background: var(--bg-elevated); color: var(--text-primary); }
.role--signing { background: var(--status-info-muted); color: var(--status-info); }
.logo--dark, .dark .logo--light, .icon--sun, .dark .icon--moon { display: none; }
.dark .logo--dark, .dark .icon--sun { display: inline; }
details.nav__footer > summary { cursor: pointer; list-style: none; padding: 4px 8px; }
.nav__powered { padding: 8px 16px; border-top: 1px solid var(--border-primary); text-align: center; font-size: var(--ca-jaris-font-xs); color: var(--text-muted); }
.icon-btn { display: inline-grid; place-items: center; padding: 8px; border: 0; border-radius: 4px; background: none; color: var(--text-muted); cursor: pointer; }
.icon-btn:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.icon-btn svg { width: 16px; height: 16px; }
.main { flex: 1; min-width: 0; overflow: auto; background: var(--bg-primary); }
.page { display: flex; flex-direction: column; min-height: 100%; }

/* ── Page chrome ───────────────────────────────────────────── */
.page-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary);
}
.page-header__title { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.page-header h1 { margin: 0; font-size: var(--ca-jaris-font-base); font-weight: 600; }
.page-header__sub { font-size: var(--ca-jaris-font-xs); color: var(--text-muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kpis {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  padding: 6px 16px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary);
}
@media (min-width: 640px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kpi { display: flex; align-items: baseline; gap: 6px; padding: 6px 8px; border: 1px solid var(--border-primary); border-radius: 6px; background: var(--bg-primary); }
.kpi__label { font-size: var(--ca-jaris-font-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.kpi__value { margin-left: auto; font-size: var(--ca-jaris-font-sm); font-weight: 600; }
.kpi--info .kpi__value { color: var(--status-info); }
.kpi--success .kpi__value { color: var(--status-success); }
.kpi--error { border-color: color-mix(in srgb, var(--status-error) 30%, transparent); }
.kpi--error .kpi__value { color: var(--status-error); }
.tabs { display: flex; gap: 4px; padding: 0 16px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary); }
.tab { margin-bottom: -1px; padding: 8px 12px; border-bottom: 2px solid transparent; font-size: var(--ca-jaris-font-xs); font-weight: 500; color: var(--text-secondary); }
.tab:hover { color: var(--text-primary); }
.tab[aria-current="page"] { color: var(--jaris-blue); border-bottom-color: var(--jaris-blue); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border-primary); }
.segmented { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.segmented__label { margin-right: 4px; font-size: var(--ca-jaris-font-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: var(--ca-jaris-control-xs); padding: 0 8px;
  border: 1px solid var(--border-primary); border-radius: 999px; font-size: var(--ca-jaris-font-xs); color: var(--text-secondary);
}
.chip:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.chip[aria-current="page"] { background: var(--jaris-blue); border-color: var(--jaris-blue); color: #fff; }
.chip__count { font-family: "IBM Plex Mono", monospace; font-size: var(--ca-jaris-font-2xs); color: var(--text-muted); }
.chip[aria-current="page"] .chip__count { color: rgb(255 255 255 / 0.85); }
.search { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.content { flex: 1; padding: 16px; display: grid; gap: 16px; align-content: start; }

/* ── Controls ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ca-jaris-control-sm);
  padding: 0 var(--ca-jaris-gap-md); border: 1px solid transparent; border-radius: 6px; cursor: pointer;
  font-size: var(--ca-jaris-font-xs); font-weight: 500; white-space: nowrap;
  background: var(--jaris-blue); color: #fff;
}
.btn:hover { background: var(--jaris-blue-dark); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn--outline { background: transparent; border-color: var(--border-primary); color: var(--text-primary); }
.btn--outline:hover { background: var(--bg-tertiary); }
.btn--secondary { background: var(--bg-tertiary); border-color: var(--border-primary); color: var(--text-primary); }
.btn--secondary:hover { background: var(--bg-elevated); }
.btn--destructive { background: var(--status-error); }
.btn--destructive:hover { background: color-mix(in srgb, var(--status-error) 90%, black); }
.input, .select {
  height: var(--ca-jaris-control-sm); padding: 0 10px; border: 1px solid var(--border-primary); border-radius: 6px;
  background: var(--bg-tertiary); font-size: var(--ca-jaris-font-xs);
}
.input:focus, .select:focus { outline: none; border-color: var(--jaris-blue); box-shadow: 0 0 0 1px var(--jaris-blue); }
.field { display: grid; gap: 4px; }
.field label { font-size: var(--ca-jaris-font-xs); font-weight: 500; color: var(--text-secondary); }
.field .input, .field .select { height: var(--ca-jaris-control-md); width: 100%; background: var(--bg-primary); }
.field--invalid .input, .field--invalid .select { border-color: var(--status-error); }
.field__error { margin: 0; font-size: var(--ca-jaris-font-xs); color: var(--status-error); }
.link-quiet { font-size: var(--ca-jaris-font-xs); color: var(--text-muted); }
.link-quiet:hover { color: var(--text-secondary); }
.link { font-weight: 500; color: var(--jaris-blue); }
.link:hover { text-decoration: underline; }
.htmx-indicator { display: none; }
/* A write in flight: its own submit buttons stop taking clicks (no double submit). */
form.htmx-request button[type="submit"] { pointer-events: none; opacity: 0.6; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* ── Badges, notices ───────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; padding: var(--ca-jaris-badge-py) var(--ca-jaris-badge-px); border-radius: 4px;
  font-size: var(--ca-jaris-font-xs); font-weight: 500; white-space: nowrap;
}
.badge--neutral { background: var(--bg-tertiary); border: 1px solid var(--border-primary); color: var(--text-secondary); }
.badge--success { background: var(--status-success-muted); color: var(--status-success); }
.badge--warning { background: var(--status-warning-muted); color: var(--status-warning); }
.badge--error { background: var(--status-error-muted); color: var(--status-error); }
.badge--info { background: var(--status-info-muted); color: var(--status-info); }
.badge--pending { background: var(--status-pending-muted); color: var(--status-pending); }
.pill { display: inline-flex; padding: 2px 6px; border-radius: 999px; font-size: var(--ca-jaris-font-xs); font-weight: 500; }
.pill--success { background: var(--status-success-muted); color: var(--status-success); }
.pill--info { background: var(--status-info-muted); color: var(--status-info); }
.pill--warning { background: var(--status-warning-muted); color: var(--status-warning); }
.notice { padding: 8px 12px; border: 1px solid var(--border-primary); border-radius: 4px; font-size: var(--ca-jaris-font-xs); font-weight: 500; }
.notice--success { background: var(--status-success-muted); color: var(--status-success); }
.notice--error { background: var(--status-error-muted); color: var(--status-error); }
.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 60; }
.toast { padding: 10px 14px; border-radius: 6px; background: var(--bg-elevated); border: 1px solid var(--border-primary); box-shadow: 0 6px 20px rgb(0 0 0 / 0.15); font-size: var(--ca-jaris-font-xs); }

/* ── Tables ────────────────────────────────────────────────── */
.card { overflow: hidden; border: 1px solid var(--border-primary); border-radius: 8px; background: var(--bg-primary); }
.table-scroll { overflow-x: auto; }
.table { width: 100%; min-width: 64rem; border-collapse: collapse; font-size: var(--ca-jaris-font-xs); }
.table th {
  padding: var(--ca-jaris-cell-py) var(--ca-jaris-cell-px); text-align: left; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-secondary); background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary);
}
.table td { padding: var(--ca-jaris-cell-py) var(--ca-jaris-cell-px); border-top: 1px solid var(--border-primary); vertical-align: top; }
.table tbody tr:first-child td { border-top: 0; }
.table tbody tr:hover { background: var(--bg-secondary); }
.table .num { text-align: right; }
.table .nowrap { white-space: nowrap; }
.table .truncate { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table .check { width: 32px; }
.sort { display: inline-flex; align-items: center; gap: 4px; }
.sort:hover { color: var(--text-primary); }
.empty { padding: 32px; text-align: center; }
.empty h3 { margin: 12px 0 4px; font-size: var(--ca-jaris-font-sm); font-weight: 500; }
.empty p { margin: 0 0 16px; font-size: var(--ca-jaris-font-xs); color: var(--text-muted); }

/* ── Dialog ────────────────────────────────────────────────── */
.dialog {
  width: min(28rem, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border-primary); border-radius: 8px;
  background: var(--bg-primary); color: var(--text-primary); box-shadow: 0 20px 50px rgb(0 0 0 / 0.25);
}
.dialog::backdrop { background: rgb(0 0 0 / 0.4); }
.dialog__body { padding: 24px; display: grid; gap: 12px; }
.dialog h2 { margin: 0; font-size: var(--ca-jaris-font-base); font-weight: 600; }
.dialog p { margin: 0; color: var(--text-secondary); }
.form-grid { display: grid; gap: 12px; }
.dialog__actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 4px; }

@media (max-width: 767px) {
  .nav { width: 48px; }
  .nav__label, .nav__item span, .nav__who, .nav__brand, .nav__powered { display: none; }
  .nav__item, .nav__user { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Utilities shared by detail pages ──────────────────────── */
.stack { display: grid; gap: 16px; align-content: start; }
.stack-tight { display: grid; gap: 4px; }
.narrow { max-width: 48rem; }
.narrower { max-width: 42rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.align-start { align-items: flex-start; }
.align-end { justify-items: end; }
.grow { flex: 1; min-width: 0; }
.strong { font-weight: 600; }
.small { font-size: var(--ca-jaris-font-xs); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.tone-text--success { color: var(--status-success); }
.tone-text--warning { color: var(--status-warning); }
.tone-text--error { color: var(--status-error); }
.tone-text--muted { color: var(--text-muted); }
.notice--warning { background: var(--status-warning-muted); color: var(--status-warning); }
.btn--accent { border-color: var(--jaris-blue); color: var(--jaris-blue); }
.btn--danger-text { color: var(--status-error); }
.select--sm { height: var(--ca-jaris-control-xs); padding: 0 8px; background: var(--bg-primary); }
.link-button { border: 0; background: none; padding: 0; cursor: pointer; font-size: var(--ca-jaris-font-xs); color: var(--jaris-blue); }
.link-button:hover { text-decoration: underline; }
.dashed-button { width: 100%; padding: 12px; border: 1px dashed var(--border-primary); border-radius: 8px; background: none; cursor: pointer; font-size: var(--ca-jaris-font-xs); font-weight: 500; color: var(--text-muted); }
.dashed-button:hover { border-color: var(--jaris-blue); color: var(--jaris-blue); }
.save-status { font-size: var(--ca-jaris-font-xs); color: var(--text-muted); min-width: 5rem; text-align: right; }

/* ── Detail layout (ALSD: header → action bar → tabs → content + rail) ── */
.action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 16px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary); }
.action-bar form { display: inline-flex; align-items: center; gap: 6px; }
.action-bar__end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.tabs--detail { background: var(--bg-primary); }
.tabs--detail .tab { display: inline-flex; align-items: center; gap: 6px; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--text-muted); }
.dot--success { background: var(--status-success); } .dot--warning { background: var(--status-warning); }
.dot--error { background: var(--status-error); } .dot--info { background: var(--status-info); }
.dot--pending { background: var(--status-pending); } .dot--muted { background: var(--text-muted); }
.detail-grid { display: flex; flex-direction: column; gap: 16px; }
.detail-main { min-width: 0; }
@media (min-width: 1024px) {
  .detail-grid { flex-direction: row; align-items: flex-start; }
  .detail-main { flex: 1; }
  .rail[open] { width: 320px; flex-shrink: 0; }
}
.rail > summary { list-style: none; cursor: pointer; font-size: var(--ca-jaris-font-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 12px; }
.rail:not([open]) > summary { writing-mode: vertical-rl; padding: 8px 4px; border: 1px solid var(--border-primary); border-radius: 8px; background: var(--bg-secondary); }
.next-action { padding: 12px; border: 1px solid color-mix(in srgb, var(--jaris-blue) 30%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--jaris-blue) 5%, transparent); }
.next-action__link { display: flex; justify-content: space-between; margin-top: 4px; font-weight: 500; }
.next-action__link:hover { color: var(--jaris-blue); }
.facts p { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: var(--ca-jaris-font-xs); }
.facts { display: grid; gap: 6px; }
.timeline { position: relative; margin: 0 0 0 12px; padding: 0 0 0 20px; border-left: 1px solid var(--border-primary); list-style: none; display: grid; gap: 16px; }
.timeline li { position: relative; }
.timeline .dot { position: absolute; left: -24px; top: 4px; width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--bg-primary); }

/* ── Sections, tiles, forms ────────────────────────────────── */
.section { padding: 12px; border: 1px solid var(--border-primary); border-radius: 8px; background: var(--bg-primary); }
.section--muted { background: var(--bg-secondary); }
.section-title { display: block; margin: 0 0 12px; font-size: var(--ca-jaris-font-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
details > summary.section-title { cursor: pointer; margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { display: grid; gap: 4px; align-content: start; padding: 8px; border: 1px solid var(--border-primary); border-radius: 6px; background: var(--bg-primary); }
.tile__value { font-size: var(--ca-jaris-font-sm); font-weight: 600; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid-2--wide { column-gap: 32px; row-gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .grid-2--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.span-2 { grid-column: span 2; }
.field__label { font-size: var(--ca-jaris-font-xs); font-weight: 500; color: var(--text-secondary); }
.field__hint { margin: 0; font-size: var(--ca-jaris-font-2xs); color: var(--text-muted); }
.textarea { width: 100%; min-height: 120px; height: auto; padding: 8px 10px; resize: vertical; background: var(--bg-primary); }
.input--readonly { display: flex; align-items: center; height: var(--ca-jaris-control-md); width: 100%; margin: 0; background: var(--bg-secondary); }
.vgs-masked { display: flex; align-items: center; gap: 8px; }
.vgs-mount { display: block; height: var(--ca-jaris-control-md); padding: 6px 10px; background: var(--bg-primary); }
.vgs-mount iframe { display: block; width: 100%; height: 20px; border: 0; }
.radio-group { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.radio-group > legend { padding: 0; }
.radio-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-primary); border-radius: 8px; background: var(--bg-primary); cursor: pointer; }
.radio-card:hover { background: var(--bg-tertiary); }
.radio-card:has(input:checked) { border-color: var(--jaris-blue); background: color-mix(in srgb, var(--jaris-blue) 5%, transparent); }
.radio-card input { accent-color: var(--jaris-blue); }
.radio-card__body { display: grid; gap: 2px; min-width: 0; }
.chip--radio { cursor: pointer; }
.chip--radio:has(input:checked) { background: var(--jaris-blue); border-color: var(--jaris-blue); color: #fff; }
.issue-list { margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--border-primary); list-style: none; display: grid; gap: 4px; }
.legend { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.dl { margin: 0; }
.dl dt { font-size: var(--ca-jaris-font-xs); font-weight: 500; color: var(--text-muted); }
.dl dd { margin: 2px 0 0; }

/* ── Acceptance evidence (VerifyPanel) ─────────────────────── */
.verdict { display: flex; gap: 12px; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--border-primary); }
.verdict__icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--bg-elevated); font-weight: 700; }
.verdict__label { margin: 0; font-weight: 600; }
.tone--success { background: var(--status-success-muted); color: var(--status-success); }
.tone--warning { background: var(--status-warning-muted); color: var(--status-warning); }
.tone--error { background: var(--status-error-muted); color: var(--status-error); }
.tone--neutral { background: var(--bg-tertiary); }
.verdict p { margin: 2px 0 0; }
.panel { border: 1px solid var(--border-primary); border-radius: 8px; background: var(--bg-secondary); }
.panel__title { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--border-primary); font-size: var(--ca-jaris-font-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.panel__row { padding: 10px 16px; }
.panel__row + .panel__row { border-top: 1px solid var(--border-primary); }
.panel__row p { margin: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.grid-4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dialog:has(.dialog__body--wide) { width: min(56rem, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: auto; }
.check { display: flex; align-items: flex-end; gap: 6px; padding-bottom: 6px; font-size: var(--ca-jaris-font-xs); color: var(--text-secondary); }
fieldset.panel { margin: 0; }
fieldset.panel > legend { padding: 0 4px; }
.dashed { border-style: dashed; }
.summary-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.summary-card { flex: 1 1 300px; max-width: 405px; padding: 10px; border: 1px solid var(--border-primary); border-radius: 8px; background: var(--bg-primary); }
.summary-line { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 1px 0; font-size: var(--ca-jaris-font-xs); overflow-wrap: anywhere; }
.dropzone { padding: 20px 16px; border: 2px dashed var(--border-primary); border-radius: 8px; text-align: center; cursor: pointer; }
.dropzone:hover, .dropzone--over { border-color: var(--jaris-blue); background: color-mix(in srgb, var(--jaris-blue) 5%, transparent); }
.dropzone p { margin: 2px 0; }
.staged-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border-primary); border-radius: 6px; background: var(--bg-primary); }
.staged-row .select { width: 12rem; }
.form-section { margin: 8px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border-primary); font-size: var(--ca-jaris-font-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 6px 0; align-items: start; }
@media (min-width: 640px) { .form-row { grid-template-columns: 160px 1fr; gap: 12px; align-items: center; } .form-row > label { text-align: right; } }
.form-row > label { font-size: var(--ca-jaris-font-sm); font-weight: 500; }
.form-row .input, .form-row .select { width: 100%; max-width: 28rem; height: var(--ca-jaris-control-md); background: var(--bg-primary); }
.form-row .textarea { height: auto; }

/* ── users ─────────────────────────────────────────────────── */
.mgr-cell { display: inline-flex; align-items: center; gap: 6px; }
.tree__node > .tree__summary { list-style: none; cursor: pointer; }
.tree__node > .tree__summary::-webkit-details-marker { display: none; }
.tree__node > .tree__summary::before { content: "▸"; display: inline-block; width: 1em; color: var(--text-muted); }
details.tree__node[open] > .tree__summary::before { content: "▾"; }
.tree__row { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; width: calc(100% - 1em); }
.tree__row:hover { background: var(--bg-secondary); }
/* ── auth-settings ─────────────────────────────────────────── */
/* Pre-session pages (login / forgot / reset) — centred card, native forms. */
.auth-screen { display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 24px 16px; background: var(--bg-primary); }
.auth-card { width: 100%; max-width: 24rem; padding: 24px; border: 1px solid var(--border-primary); border-radius: 8px; background: var(--bg-elevated); }
.auth-card__head { text-align: center; margin-bottom: 8px; }
.auth-card__title { margin: 0; font-size: var(--ca-jaris-font-2xl); font-weight: 700; }
.auth-card__brand { font-size: var(--ca-jaris-font-2xl); font-weight: 700; letter-spacing: -0.01em; }
.auth-card__logo img { height: 32px; width: auto; max-width: 200px; object-fit: contain; margin: 0 auto; }
.auth-card__sub { margin: 4px 0 0; font-size: var(--ca-jaris-font-xs); color: var(--text-secondary); }
.auth-card__alert { margin-top: 16px; }
.auth-card__lead { margin: 16px 0 0; text-align: center; font-size: var(--ca-jaris-font-xs); }
.auth-card__hint { margin: 8px 0 0; text-align: center; font-size: var(--ca-jaris-font-2xs); }
.auth-card__foot { margin-top: 16px; text-align: center; font-size: var(--ca-jaris-font-xs); }
.auth-card__done { margin-top: 24px; text-align: center; display: grid; gap: 16px; }
.auth-form { margin-top: 24px; display: grid; gap: 16px; }
.btn--block { width: 100%; height: var(--ca-jaris-control-md); }
.otp-input { text-align: center; letter-spacing: 0.4em; font-family: "IBM Plex Mono", monospace; }

/* Standalone acceptance-verification page (public, no shell). */
.verify-page { min-height: 100%; background: var(--bg-primary); }
.verify-page__head { padding: 12px 16px; border-bottom: 1px solid var(--border-primary); background: var(--bg-secondary); }
.verify-page__inner { max-width: 48rem; margin: 0 auto; }
.verify-page__eyebrow { margin: 0; font-size: var(--ca-jaris-font-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.verify-page__title { margin: 2px 0 0; font-size: var(--ca-jaris-font-base); font-weight: 600; }
.verify-page__main { padding: 24px 16px; }
/* ── ops (Overview, Dev Tools, System, Residuals) ──────────── */
.kpi--warning .kpi__value { color: var(--status-warning); }

/* meters (memory usage, residual bars) */
.meter { height: 6px; width: 100%; border-radius: 999px; background: var(--bg-elevated); overflow: hidden; }
.meter__fill { height: 100%; border-radius: 999px; background: var(--jaris-blue); }
.meter__fill--success { background: var(--status-success); }
.meter__fill--warning { background: var(--status-warning); }
.meter__fill--error { background: var(--status-error); }
.meter__fill--info { background: var(--status-info); }

/* one-time key reveal */
.key-reveal { display: block; margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: var(--bg-tertiary); font-size: var(--ca-jaris-font-xs); word-break: break-all; }

/* permission / event tags */
.tag-row { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { display: inline-block; padding: 1px 6px; border-radius: 4px; background: var(--bg-tertiary); font-size: var(--ca-jaris-font-2xs); color: var(--text-secondary); }

/* filter forms */
.filters-grid { display: grid; grid-template-columns: 1fr; gap: 12px; width: 100%; }
@media (min-width: 640px) { .filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .filters-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.filters-actions { display: flex; align-items: flex-end; gap: 8px; }
.form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.form-inline .field { gap: 4px; }
.form-inline .input, .form-inline .select { width: 12rem; }

/* residual bars */
.bar-list { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 8rem 1fr auto; gap: 10px; align-items: center; }
.bar-row__label { font-size: var(--ca-jaris-font-xs); color: var(--text-secondary); text-transform: capitalize; }
.bar-row__value { font-size: var(--ca-jaris-font-xs); }

/* overview lifecycle funnel */
.funnel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.funnel__stage { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.funnel__count { font-size: var(--ca-jaris-font-base); font-weight: 700; }
.funnel__bar { height: 2px; width: 32px; border-radius: 999px; background: var(--text-muted); }
.funnel__bar--info { background: var(--status-info); }
.funnel__bar--success { background: var(--status-success); }
.funnel__bar--warning { background: var(--status-warning); }
.funnel__bar--error { background: var(--status-error); }
.funnel__bar--pending { background: var(--status-pending); }
.funnel__label { white-space: nowrap; font-size: var(--ca-jaris-font-2xs); color: var(--text-muted); }
.funnel__divider { align-self: center; width: 1px; height: 36px; background: var(--border-primary); }

/* overview two-column layout */
.overview-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 1024px) { .overview-grid { grid-template-columns: 2fr 1fr; } }

/* compact link rows (recent prospects) */
.list-rows { display: flex; flex-direction: column; }
.list-row { display: grid; grid-template-columns: 1.4fr 1.2fr auto auto auto; gap: 12px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--border-primary); font-size: var(--ca-jaris-font-xs); }
.list-row:first-child { border-top: 0; }
.list-row:hover { background: var(--bg-tertiary); }

/* bulleted info lists */
.info-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.info-list li { list-style: disc; }

/* tinted info / error section blocks */
.notice--info-block { border: 1px solid color-mix(in srgb, var(--status-info) 30%, transparent); background: var(--status-info-muted); }
.notice--error-block { border: 1px solid color-mix(in srgb, var(--status-error) 30%, transparent); background: var(--status-error-muted); }
/* ── pricing ── */
.section-title--mt { margin-top: 12px; }
/* ── partners ──────────────────────────────────────────────── */
.color-pair { display: flex; align-items: center; gap: 8px; }
.color-swatch-input { width: 32px; height: 32px; padding: 0; border: 1px solid var(--border-primary); border-radius: 6px; background: none; cursor: pointer; flex-shrink: 0; }
.color-swatch-input::-webkit-color-swatch-wrapper { padding: 2px; }
.color-swatch-input::-webkit-color-swatch { border: none; border-radius: 4px; }
.color-pair .input { flex: 1; min-width: 0; }
.brand-swatch { width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: var(--ca-jaris-font-base); font-weight: 700; flex-shrink: 0; }
.swatch-row { display: flex; gap: 4px; margin-top: 12px; }
.swatch { width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--border-primary); }
.logo-preview { margin-top: 8px; padding: 8px; border-radius: 6px; display: flex; align-items: center; justify-content: center; height: 48px; }
.logo-preview img { height: 32px; max-width: 100%; object-fit: contain; }
.logo-preview--dark { background: #1f2937; }
.logo-preview--light { background: #fff; border: 1px solid var(--border-primary); }
.processor-card { display: grid; gap: 4px; place-items: center; width: 100%; padding: 12px; border: 2px solid var(--border-primary); border-radius: 8px; background: var(--bg-primary); cursor: pointer; text-align: center; }
.processor-card:hover { border-color: var(--jaris-blue); }
.processor-card--on { border-color: var(--jaris-blue); background: color-mix(in srgb, var(--jaris-blue) 5%, transparent); }
.processor-card--on .strong { color: var(--jaris-blue); }
.preview-btn { display: block; width: 100%; margin-bottom: 8px; padding: 8px 16px; border: 0; border-radius: 6px; color: #fff; font-size: var(--ca-jaris-font-xs); font-weight: 500; cursor: default; }
.preview-header { border: 1px solid var(--border-primary); border-radius: 8px; padding: 12px; }
.preview-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; color: #fff; font-size: var(--ca-jaris-font-xs); font-weight: 500; }

/* ── notifications ── */
.notif-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--border-primary); border-radius: 4px; }
.notif-row .check { align-items: center; padding-bottom: 0; color: var(--text-primary); }
.notif-row .select { width: 16rem; max-width: 60%; }
/* ── agree (merchant clickwrap ceremony) ───────────────────── */
.agree-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-secondary); color: var(--text-primary); }
.agree-header { background: var(--bg-primary); border-bottom: 1px solid var(--border-primary); }
.agree-header__inner { max-width: 48rem; margin: 0 auto; padding: 16px; display: flex; align-items: center; gap: 12px; }
.agree-logo { height: 32px; width: auto; max-width: 180px; object-fit: contain; }
.agree-brand { font-size: var(--ca-jaris-font-xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.agree-brand__eyebrow { font-size: var(--ca-jaris-font-2xs); color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; margin-top: 2px; }
.agree-footer { background: var(--bg-primary); border-top: 1px solid var(--border-secondary); padding: 16px; }
.agree-footer p { text-align: center; font-size: var(--ca-jaris-font-xs); color: var(--text-muted); }

.agree-main { flex: 1; padding: 40px 16px; }
.agree-main--compact { padding: 24px 16px; }
.agree-main--center { display: flex; align-items: center; justify-content: center; }
.agree-wrap { max-width: 42rem; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; width: 100%; }
.agree-wrap--wide { max-width: 42rem; }

.agree-greeting__title { font-size: var(--ca-jaris-font-3xl); font-weight: 700; }
.agree-greeting__lead { font-size: var(--ca-jaris-font-sm); color: var(--text-secondary); margin-top: 4px; }
.agree-strong { font-weight: 600; color: var(--text-primary); }

.agree-card { background: var(--bg-elevated); border: 1px solid var(--border-primary); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }

.agree-info { padding: 16px 24px; }
.agree-info__label { font-size: var(--ca-jaris-font-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--jaris-orange); }
.agree-info__list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.agree-info__row { display: flex; flex-direction: column; gap: 2px; font-size: var(--ca-jaris-font-sm); }
.agree-info__row dt { color: var(--text-muted); }
.agree-info__row dd { color: var(--text-primary); font-weight: 500; }
@media (min-width: 640px) { .agree-info__row { flex-direction: row; gap: 12px; } .agree-info__row dt { width: 11rem; flex-shrink: 0; } }

.agree-alert { border-radius: 8px; }

.agree-doc__head { display: flex; align-items: center; gap: 8px; padding: 20px 24px; }
.agree-doc__head--divide { border-bottom: 1px solid var(--border-secondary); }
.agree-doc__icon { flex-shrink: 0; color: var(--text-muted); }
.agree-doc__title { font-size: var(--ca-jaris-font-base); font-weight: 600; }
.agree-doc__download { margin-left: 4px; display: inline-flex; align-items: center; gap: 4px; font-size: var(--ca-jaris-font-xs); color: var(--status-info); text-decoration: underline; }
.agree-doc__badge { margin-left: auto; font-size: var(--ca-jaris-font-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 4px; background: var(--status-warning-muted); color: var(--status-warning); border: 1px solid color-mix(in srgb, var(--status-warning) 30%, transparent); white-space: nowrap; }
.agree-doc__badge--read { background: var(--status-success-muted); color: var(--status-success); border-color: color-mix(in srgb, var(--status-success) 30%, transparent); }
.agree-doc__bodywrap { padding: 20px 24px; }
.agree-doc__body { font-size: var(--ca-jaris-font-sm); color: var(--text-secondary); border-radius: 8px; background: var(--bg-secondary); border: 1px solid var(--border-secondary); padding: 12px 16px; max-height: 500px; overflow-y: auto; }

.agree-block--bare { padding: 8px 24px; }
.agree-block__accept { padding: 16px 24px; background: var(--bg-secondary); border-top: 1px solid var(--border-secondary); }
.agree-accept { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 10px 0; min-height: 44px; }
.agree-accept__box { margin-top: 2px; height: 20px; width: 20px; flex-shrink: 0; cursor: pointer; accent-color: var(--jaris-blue); }
.agree-accept__text { font-size: var(--ca-jaris-font-sm); font-weight: 500; color: var(--text-primary); line-height: 1.5; }
.agree-req { color: var(--status-error); font-size: var(--ca-jaris-font-xs); }
.agree-inline-link { color: var(--status-info); text-decoration: underline; font-weight: 600; }
.agree-linkrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--border-secondary); font-size: var(--ca-jaris-font-sm); }

.agree-actions { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.agree-hint { font-size: var(--ca-jaris-font-xs); color: var(--status-warning); text-align: center; }
.agree-hint--hidden { display: none; }
.agree-fineprint { font-size: var(--ca-jaris-font-sm); color: var(--text-muted); text-align: center; line-height: 1.6; }

.agree-submit { display: block; width: 100%; padding: 12px 20px; border: 0; border-radius: 8px; background: var(--jaris-blue); color: #fff; font-size: var(--ca-jaris-font-sm); font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.15s, box-shadow 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.agree-submit:hover:not(:disabled) { background: var(--jaris-blue-dark); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.agree-submit:focus-visible { outline: 2px solid var(--jaris-blue); outline-offset: 2px; }
.agree-submit:disabled { background: color-mix(in srgb, var(--jaris-blue) 40%, transparent); cursor: not-allowed; box-shadow: none; }
.agree-submit--compact { width: auto; margin: 0 auto; padding: 6px 20px; font-size: var(--ca-jaris-font-xs); }
.agree-submit--inline { display: inline-block; width: auto; }

.agree-decline { text-align: center; }
.agree-decline__toggle { display: block; margin: 0 auto; background: none; border: 0; font-family: inherit; font-size: var(--ca-jaris-font-xs); color: var(--text-muted); text-decoration: underline; cursor: pointer; transition: color 0.15s; }
.agree-decline__toggle:hover { color: var(--status-error); }
.agree-decline__box { text-align: left; border: 1px solid color-mix(in srgb, var(--status-error) 30%, transparent); background: var(--status-error-muted); border-radius: 8px; padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.agree-decline__box--hidden { display: none; }
.agree-decline__title { font-size: var(--ca-jaris-font-sm); font-weight: 600; color: var(--status-error); }
.agree-decline__note { font-size: var(--ca-jaris-font-xs); color: var(--text-secondary); line-height: 1.5; }
.agree-decline__reason { width: 100%; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--status-error) 30%, transparent); background: var(--bg-primary); padding: 8px 12px; font-size: var(--ca-jaris-font-sm); font-family: inherit; color: var(--text-primary); resize: vertical; }
.agree-decline__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.agree-decline__submit { padding: 8px 16px; border: 0; border-radius: 8px; background: var(--status-error); color: #fff; font-size: var(--ca-jaris-font-xs); font-weight: 600; font-family: inherit; cursor: pointer; }
.agree-decline__submit:hover { filter: brightness(0.92); }
.agree-decline__cancel { padding: 8px 16px; border: 1px solid var(--border-primary); border-radius: 8px; background: var(--bg-primary); color: var(--text-secondary); font-size: var(--ca-jaris-font-xs); font-weight: 500; font-family: inherit; cursor: pointer; }

.agree-status { max-width: 28rem; width: 100%; text-align: center; }
.agree-status__iconwrap { display: flex; justify-content: center; margin-bottom: 16px; }
.agree-status__icon--ok { color: var(--status-success); }
.agree-status__icon--warn { color: var(--status-warning); }
.agree-status__title { font-size: var(--ca-jaris-font-2xl); font-weight: 700; margin-bottom: 8px; }
.agree-status__msg { font-size: var(--ca-jaris-font-sm); color: var(--text-secondary); line-height: 1.6; }
.agree-status__form { margin-top: 20px; }
.agree-status__error { margin-top: 16px; font-size: var(--ca-jaris-font-sm); color: var(--status-error); }

.agree-accepted { background: var(--bg-elevated); border: 1px solid var(--border-primary); border-radius: 12px; padding: 32px; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,0.04); max-width: 28rem; margin: 0 auto; }
.agree-accepted__when { font-size: var(--ca-jaris-font-xs); color: var(--text-muted); margin: 4px 0 16px; }

.agree-cert { margin-top: 20px; }
.agree-cert__note { border-radius: 8px; background: var(--bg-secondary); border: 1px solid var(--border-secondary); padding: 12px 16px; font-size: var(--ca-jaris-font-sm); color: var(--text-secondary); line-height: 1.5; }
.agree-cert__retry { margin-top: 8px; background: none; border: 0; font-family: inherit; font-weight: 600; color: var(--jaris-blue); text-decoration: underline; cursor: pointer; }

.agree-snapshot { display: flex; flex-direction: column; gap: 12px; }
.agree-snapshot__label { font-size: var(--ca-jaris-font-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }

.agree-external { max-width: 36rem; }
.agree-external__head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.agree-external__card { padding: 32px; text-align: center; }
.agree-ext__icon { flex-shrink: 0; }
/* ── crm-sync ──────────────────────────────────────────────── */
/* Pure-CSS tabs: every panel stays in the DOM so switching tabs never drops
   unsaved working-copy edits. The radios are sr-only but focusable. */
.crm-tab-radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.crm-tabnav { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 16px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary); }
.crm-tab-label { margin-bottom: -1px; padding: 8px 12px; border-bottom: 2px solid transparent; font-size: var(--ca-jaris-font-xs); font-weight: 500; color: var(--text-secondary); cursor: pointer; }
.crm-tab-label:hover { color: var(--text-primary); }
#crmtab-fields:checked ~ .crm-tabnav label[for="crmtab-fields"],
#crmtab-statuses:checked ~ .crm-tabnav label[for="crmtab-statuses"],
#crmtab-users:checked ~ .crm-tabnav label[for="crmtab-users"],
#crmtab-runs:checked ~ .crm-tabnav label[for="crmtab-runs"],
#crmtab-connection:checked ~ .crm-tabnav label[for="crmtab-connection"] { color: var(--jaris-blue); border-bottom-color: var(--jaris-blue); }
.crm-panel { display: none; }
#crmtab-fields:checked ~ .content .panels #panel-fields,
#crmtab-statuses:checked ~ .content .panels #panel-statuses,
#crmtab-users:checked ~ .content .panels #panel-users,
#crmtab-runs:checked ~ .content .panels #panel-runs,
#crmtab-connection:checked ~ .content .panels #panel-connection { display: block; }
.crm-newtenant > summary { list-style: none; display: inline-flex; }
.crm-newtenant > summary::-webkit-details-marker { display: none; }
button.htmx-request { opacity: 0.6; pointer-events: none; }