@charset "UTF-8";
/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

dialog {
  margin: auto;
} /* above reset of margin:0 messes up dialog positioning */
*[hidden] {
  display: none !important;
}

/* ─── Color Scheme ──────────────────────────────────────── */
:root {
  color-scheme: light dark;
}

[data-theme=light] {
  color-scheme: light;
}

[data-theme=dark] {
  color-scheme: dark;
}

.--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
html { -webkit-tap-highlight-color: transparent; }
*/
:root {
  /* All of these are TYPE color */
  --color-bg: light-dark(#F5F4F0, #111110);
  --color-bg-soft: light-dark(#8f8f8f14, #c4c4c42d);
  /* Recessed and elevated backgrounds */
  --color-bg-inset: light-dark(#EAE9E366, #0B0B0A66);
  --color-bg-outset: light-dark(#FFFFFF, #1C1B19);
  --color-bg-lighten: light-dark(rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.06));
  --color-bg-darken: light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.30));
  --color-surface: light-dark(#FFFFFF, #1C1B19);
  --color-surface-2: light-dark(#F0EFE9, #26241F);
  --color-border: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
  --color-border-strong: light-dark(rgba(0, 0, 0, 0.14), rgba(255, 255, 255, 0.14));
  --color-text-primary: light-dark(#1A1814, #EDECEA);
  --color-text-secondary: light-dark(#6B6760, #9B9893);
  --color-text-muted: light-dark(#6E6E6E, #888888);
  --color-text-over-black: rgba(255, 255, 255, 0.9);
  --color-divider: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.12));
  --color-button-bg: var(--color-surface);
  --color-button-text: var(--color-text-primary);
  --color-button-border: transparent;
  --color-input-bg: light-dark(rgb(255, 255, 255), rgb(48, 48, 46));
  --color-input-text: var(--color-text-primary);
  --color-accent: light-dark(#2D5BE3, #6B8FF0);
  --color-accent-light: light-dark(#EEF2FD, #1A2340);
  --color-attention: light-dark(#7C3AED, #A78BFA);
  --color-attention-light: light-dark(#F3E8FF, #2A174A);
  --color-success: light-dark(#1A7F54, #34C47C);
  --color-success-light: light-dark(#E6F6EE, #0D2B1E);
  --color-warning: light-dark(#B45309, #F59E4A);
  --color-warning-light: light-dark(#FEF3C7, #2C1A05);
  --color-danger: light-dark(#C0392B, #E8645A);
  --color-danger-light: light-dark(#FEF3C7, #2C1A05);
}

/* ─── Color Utilities ───────────────────────────────────── */
.ui-color--success {
  color: var(--color-success);
}

.ui-color--warning {
  color: var(--color-warning);
  background: var(--color-warning-light);
}

.ui-color--rnd0 {
  background: light-dark(#FFF5F5, #2A1018);
  color: light-dark(#9B2335, #F28B9A);
}

.ui-color--rnd1 {
  background: light-dark(#EEF2FD, #111E3D);
  color: light-dark(#2D5BE3, #6B8FF0);
}

.ui-color--rnd2 {
  background: light-dark(#E6F6EE, #0D2B1E);
  color: light-dark(#1A7F54, #34C47C);
}

.ui-color--rnd3 {
  background: light-dark(#FEF3C7, #2C1A05);
  color: light-dark(#B45309, #F59E4A);
}

.ui-color--rnd4 {
  background: light-dark(#FDF4FF, #200D33);
  color: light-dark(#7E22CE, #C084FC);
}

.ui-color--rnd5 {
  background: light-dark(#FFF1F0, #2A0F0D);
  color: light-dark(#C0392B, #E8645A);
}

.ui-color--rnd6 {
  background: light-dark(#FFF7ED, #2C1505);
  color: light-dark(#C2410C, #F97316);
}

.ui-color--rnd7 {
  background: light-dark(#F0F9FF, #051E30);
  color: light-dark(#0369A1, #38BDF8);
}

.ui-color--rnd8 {
  background: light-dark(#F0FDF4, #072014);
  color: light-dark(#15803D, #4ADE80);
}

.ui-color--rnd9 {
  background: light-dark(#FAFAFA, #1A1A1A);
  color: light-dark(#374151, #9CA3AF);
}

:root {
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: Georgia, 'Times New Roman', Times, serif;
  --font-mono: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --font-size-xs: 0.8125rem; /* ~13px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-md: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */
  --font-size-5xl: 3rem; /* 48px */
  --font-small: var(--font-size-sm);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
}

:root {
  --radius-xs: 1px;
  --radius-sm: 3px;
  --radius-md: 7px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
}

:root {
  --shadow-sm: 0 1px 3px light-dark(rgba(0,0,0,0.06), rgba(0,0,0,0.3)), 0 4px 16px light-dark(rgba(0,0,0,0.05), rgba(0,0,0,0.25));
  --shadow-md: 0 2px 8px light-dark(rgba(0,0,0,0.06), rgba(0,0,0,0.4)), 0 12px 40px light-dark(rgba(0,0,0,0.10), rgba(0,0,0,0.4));
  --shadow-lg: 0 4px 16px light-dark(rgba(0,0,0,0.06), rgba(0,0,0,0.5)), 0 24px 80px light-dark(rgba(0,0,0,0.15), rgba(0,0,0,0.5));
}

:root {
  --spacing-xs: 4px;
  --spacing-sm: 10px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
}

/*
  .atp — the shared admin test panel (templates/partials/admin/access_test_panel.twig,
  driven by /js/access-test-panel.js). Used by /nawi/admin/directory/access and
  /nawi/admin/directory/contact-picker.

  The layout puts the STAGE COUNTS first and everything else behind them:
  the counts are the answer, the person lists and the live picker are the
  evidence. Stages read as a funnel — directory ⊇ reachable ⊇ selectable —
  so they sit in one row with a chevron between them on wide screens and
  stack on narrow ones.
*/
.atp {
  --atp-gap: var(--spacing-md);
}

.atp__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}
.atp__head > h2 {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-medium, 500);
  margin: 0;
}

.atp__hint {
  margin: 0 0 var(--atp-gap);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.5;
}

.atp__controls {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: var(--atp-gap);
}

.atp__person {
  flex: 0 1 220px;
  min-width: 160px;
}

.atp__error {
  margin: 0 0 var(--atp-gap);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-danger);
  font-size: var(--font-size-sm, 0.875rem);
}
.atp__error[hidden] {
  display: none;
}

/* ── Stages ─────────────────────────────────────────────────────────── */
.atp__stages {
  list-style: none;
  margin: 0 0 var(--atp-gap);
  padding: 0;
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .atp__stages {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

.atp__stage {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--color-bg-inset);
  position: relative;
  /* The funnel arrow. Decorative, so it never enters the accessible name. */
}
@media (min-width: 640px) {
  .atp__stage + .atp__stage::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--spacing-sm) * -1);
    top: 50%;
    width: 6px;
    height: 6px;
    transform: translateY(-50%) rotate(45deg);
    border-top: 2px solid var(--color-border-strong);
    border-right: 2px solid var(--color-border-strong);
  }
}

.atp__stage-label {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.atp__stage-count {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary);
}

.atp__stage-sub {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary);
}

.atp__upstream {
  font-size: var(--font-size-xs, 0.75rem);
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-accent);
}

/* ── Diagnosis ──────────────────────────────────────────────────────── */
.atp__diagnosis {
  margin: 0 0 var(--atp-gap);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  border-inline-start: 3px solid var(--color-border-strong);
  background: var(--color-bg-soft);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.atp__diagnosis[hidden] {
  display: none;
}
.atp__diagnosis {
  /* Upstream exclusion is the one the admin most often misreads as a
     broken picker rule — give it the loudest accent. */
}
.atp__diagnosis.--access_excludes_everyone {
  border-inline-start-color: var(--color-warning);
  background: var(--color-warning-light);
  color: var(--color-text-primary);
}
.atp__diagnosis.--unconfigured, .atp__diagnosis.--picker_matches_nobody {
  border-inline-start-color: var(--color-accent);
  background: var(--color-accent-light);
  color: var(--color-text-primary);
}
.atp__diagnosis.--has-errors {
  border-inline-start-color: var(--color-danger);
}

/* ── Which rules applied ────────────────────────────────────────────── */
.atp__sub {
  margin: var(--atp-gap) 0 var(--spacing-sm);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-secondary);
}

.atp__rules[hidden] {
  display: none;
}

.atp__rule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.atp__rule {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  padding: var(--spacing-xs) 0;
  font-size: var(--font-size-sm, 0.875rem);
}
.atp__rule + .atp__rule {
  border-top: 1px solid var(--color-divider);
}
.atp__rule.--missed {
  color: var(--color-text-muted);
}

.atp__rule-meta {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs, 0.75rem);
}

/* ── Drill-down ─────────────────────────────────────────────────────── */
.atp__drill {
  margin-bottom: var(--atp-gap);
}
.atp__drill > summary {
  cursor: pointer;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-accent);
}

.atp__drill-body {
  display: grid;
  gap: var(--atp-gap);
  padding-top: var(--spacing-sm);
}
@media (min-width: 640px) {
  .atp__drill-body {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.atp__people-title {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-size-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.atp__people-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  font-size: var(--font-size-sm, 0.875rem);
}
.atp__people-list > li {
  display: flex;
  gap: var(--spacing-xs);
  padding: 2px 0;
}

.atp__people-id {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
}

.atp__people-empty,
.atp__people-more {
  margin: var(--spacing-xs) 0 0;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted);
}

.atp__live {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--spacing-sm);
}

/* === Attachment item (ui-attachment-*) === */
.ui-attachment-wrap {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

.ui-attachment-head {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}

.ui-attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.ui-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 9px 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s;
  overflow: hidden;
}

.ui-attachment:hover {
  border-color: var(--color-accent);
}

.ui-attachment-ic {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  overflow: hidden;
}

.ui-attachment-ic.--accent {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.ui-attachment-ic.--success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.ui-attachment-ic.--warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.ui-attachment-ic.--danger {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.ui-attachment-ic.--image {
  background: var(--color-surface);
  padding: 0;
}

.ui-attachment-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ui-attachment-meta {
  flex: 1;
  min-width: 0;
}

.ui-attachment-name {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-attachment-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--color-text-secondary);
}

.ui-attachment-dl {
  flex: none;
  color: var(--color-text-secondary);
  font-size: 1rem;
}

.ui-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--ui-icon-size, 40px);
  height: var(--ui-icon-size, 40px);
  border-radius: var(--radius-sm);
  object-fit: cover;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}

.ui-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-width: 0;
  font-size: 1rem;
}

.ui-breadcrumb > .mdi-chevron-right {
  flex: none;
  color: var(--color-text-muted);
}

.ui-crumb {
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text);
  max-width: 420px;
}

.ui-crumb.--muted {
  color: var(--color-text-secondary);
}

.ui-crumb.--current {
  font-weight: 600;
  color: var(--color-text);
}

a.ui-crumb:hover {
  text-decoration: underline;
}

/* A crumb can also be a <button> when it triggers an in-page jump instead
   of a real navigation (e.g. a modal stepping back a stage). */
button.ui-crumb {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

button.ui-crumb:hover,
button.ui-crumb:focus-visible {
  text-decoration: underline;
  color: var(--color-text);
}

.ui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl) var(--spacing-lg);
  text-align: center;
}
.ui-empty > i, .ui-empty > .mdi {
  font-size: 72px;
  line-height: 1;
  color: var(--color-text-muted);
  opacity: 0.5;
}
.ui-empty > strong {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary);
}
.ui-empty > span, .ui-empty > p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm, 0.875rem);
  max-width: 240px;
  line-height: 1.5;
}

.ui-button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--color-button-bg);
  color: var(--color-button-text);
  border: 0;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.01em;
}
.ui-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.ui-button:active {
  transform: scale(0.97);
}
.ui-button__label {
  white-space: nowrap;
}

/* Primary button (default) */
.ui-button {
  --color-button-bg: var(--color-accent);
  --color-button-text: var(--color-text-over-black);
}

.ui-button.--secondary {
  --color-button-bg: var(--color-accent-light);
  --color-button-text: var(--color-accent);
}

.ui-button.--cancel {
  --color-button-bg: transparent;
  --color-button-text: var(--color-text-secondary);
}

.ui-button.--danger {
  --color-button-bg: var(--color-danger-light);
  --color-button-text: var(--color-danger);
  border: 0;
}

.ui-button.--waiting {
  pointer-events: none;
}
.ui-button.--waiting::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: ui-button-spin 0.7s linear infinite;
}
.ui-button.--waiting:hover {
  transform: none;
  box-shadow: none;
}
.ui-button.--waiting:active {
  transform: none;
}

@keyframes ui-button-spin {
  to {
    transform: rotate(360deg);
  }
}
.ui-button.--invalid {
  opacity: 0.5;
}

.ui-button.--small {
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.005em;
  min-height: 1.875rem;
  /* border: 1px solid var(--color-border); */
}
.ui-button.--small .ui-button__icon,
.ui-button.--small svg {
  width: 1em;
  height: 1em;
}
.ui-button.--small.--waiting::before {
  width: 0.875em;
  height: 0.875em;
  border-width: 1.5px;
}

.ui-button.--flat {
  --color-button-bg: transparent;
  --color-button-text: var(--color-accent);
  border-color: transparent;
  box-shadow: none;
}

.ui-button.--flat:hover {
  --color-button-bg: var(--color-accent-light);
}

.ui-button[disabled],
.ui-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ui-button[disabled]:hover,
.ui-button:disabled:hover {
  transform: none;
  box-shadow: none;
}
.ui-button[disabled]:active,
.ui-button:disabled:active {
  transform: none;
}

/* ── split button ───────────────────────────────────────────────────────── */
/* ONE perceived button with a small second half.
   The pattern exists because "open this document" and "download this document"
   are not two peer choices — a signer wants to READ the thing, and downloading
   is the afterthought they occasionally need. Two side-by-side buttons make
   the reader pick; a split button makes the primary obvious and keeps the
   secondary one tap away.

     ┌─────────────────────────────────────┬─────┐
     │      Open the document        ↗     │  ⤓  │
     └─────────────────────────────────────┴─────┘

   It COMPOSES rather than redefines: the children are ordinary `.ui-button`s,
   so `--secondary`, `--small` and the rest still work and there is exactly one
   place where button colour is decided. Put the SAME modifier on both halves
   or the seam will show.

   The download half is optional. With one child the group is indistinguishable
   from a plain full-width button — which is what the states that cannot be
   downloaded (a signature still to be given) need it to look like. */
.ui-button-split {
  display: flex;
  width: 100%;
}
.ui-button-split > .ui-button {
  border-radius: 0;
  /* The lift-on-hover of a lone button would tear the seam open. */
}
.ui-button-split > .ui-button:hover {
  transform: none;
}
.ui-button-split > .ui-button:active {
  transform: none;
}
.ui-button-split {
  /* Logical corners, so the group flips whole in RTL without a second rule. */
}
.ui-button-split > .ui-button:first-child {
  flex: 1;
  min-width: 0;
  justify-content: center;
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
}
.ui-button-split > .ui-button:last-child {
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}
.ui-button-split {
  /* The seam. Drawn from the label colour so it reads on the filled accent
     fill and on the pale --secondary one without a second token. */
}
.ui-button-split > .ui-button + .ui-button {
  flex: none;
  border-inline-start: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}
.ui-button-split {
  /* No second half — a plain full-width button again. */
}
.ui-button-split > .ui-button:only-child {
  border-radius: var(--radius-md);
}

/* The trailing "↗ / opens elsewhere" mark on the primary half. Dimmed and kept
   inside the centred group: it is a promise about what will happen, not a
   second label competing for the eye. */
.ui-button-split__hint {
  opacity: 0.7;
  font-size: 0.9em;
}

.ui-card {
  position: relative;
  display: block;
  display: flow-root; /* contain last element's margin (if any) */
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Padded content region of a card (heading, prose, tables, ...). */
.ui-card-body {
  padding: var(--spacing-md);
}

.ui-card > .ui-list {
  gap: 0;
}

.ui-card > .ui-list > .ui-item {
  border-top: 1px solid var(--color-divider);
}

.ui-card.--selected {
  border-bottom: 2px solid var(--color-accent);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
}

/* Status accent: a left edge in the semantic colour. Used for result banners
   and the schema report summary so outcome reads at a glance. */
.ui-card.--success {
  border-left: 3px solid var(--color-success);
}

.ui-card.--warning {
  border-left: 3px solid var(--color-warning);
}

.ui-card.--danger {
  border-left: 3px solid var(--color-danger);
}

/* A message rendered as its own card (e.g. Home messages group) */
.ui-card > .ui-message {
  padding: var(--spacing-md);
}

/* Imply clickability now that the trailing chevron is gone. A linked card
   is the <a> itself (never an absolutely-positioned overlay link). */
a.ui-card {
  color: inherit;
  text-decoration: none;
}

a.ui-card {
  transition: box-shadow 0.15s var(--easing-smooth), transform 0.1s var(--easing-smooth);
}

a.ui-card:hover,
.ui-card:has(> a):hover {
  box-shadow: var(--shadow-md);
}

a.ui-card:active {
  transform: scale(0.99);
}

/* =========================================================================
   Card flavor — the canonical presentation of a Card
   (title / description / icon / color / image — see Nawi\Workspace\Card).
   Basis: the workspace manage parent header. Rendered by the shared
   partials/card.twig macro, always in this order:

     cover (only when the card has an image) → icon | title → description
     → footer (flag chip, tags, pills, links)

   Per-card colour arrives as inline styles: `--card-accent` on the root
   (page-level accents such as the feed pin border) and `background` on the
   icon chip.
   ========================================================================= */
/* Cover band — a photo crop, and only ever that: a card without an image has
   no cover at all (never a placeholder). The card's icon stays in the main
   row — never on the cover. */
.ui-card__cover {
  position: relative;
  height: 140px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}

.ui-card.--sm .ui-card__cover {
  height: 84px;
}

.ui-card__cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Status chip ("Pinned", "New", ...) — an inline pill in the footer row,
   alongside the card's tags. */
.ui-card__flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  padding: 4px 9px;
  border-radius: var(--radius-full, 999px);
  background: var(--color-surface-2, rgba(0, 0, 0, 0.06));
  color: var(--color-text-secondary);
}

.ui-card__flag .mdi {
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--card-accent, var(--color-accent));
}

/* Main row: icon chip + title column (+ trailing extras like a kebab menu).
   The description is NOT in here — it gets its own full-width row below, so
   it isn't indented into the narrow column beside the chip. */
.ui-card__main {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
}

/* The description hangs off the title row rather than starting a second
   padded block. */
.ui-card__main:has(+ .ui-card__desc) {
  padding-bottom: 0;
}

/* Trailing controls in the main row (edit button, kebab menu). */
.ui-card__actions {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* Colored icon chip. Colour arrives as an inline background; a chip left
   without inline style falls back to a neutral surface + muted glyph. */
.ui-card__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-surface-2, rgba(0, 0, 0, 0.06));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  overflow: hidden;
}

.ui-card__icon:not([style]) {
  color: var(--color-text-secondary);
}

/* Logo variant: the image fills the chip without cropping. */
.ui-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ui-card.--sm .ui-card__icon {
  width: 36px;
  height: 36px;
  font-size: 1.15rem;
}

.ui-card__text {
  min-width: 0;
  flex: 1;
}

.ui-card__title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: var(--font-weight-bold);
  /*
  --- clamping (disabled): Title should always be fully readable
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  */
}

.ui-card.--sm .ui-card__title {
  font-size: var(--font-size-md);
  letter-spacing: -0.01em;
}

/* Description row — full card width, below the icon/title row. */
.ui-card__desc {
  margin: 0 0 var(--spacing-md) 0;
  padding: var(--spacing-xs) var(--spacing-md) 0 var(--spacing-md);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ui-card__desc:has(+ .ui-card__foot) {
  padding-bottom: 0;
}

/* Footer strip below the description: the flag chip plus whatever the caller
   passes (tags, pills, links). */
.ui-card__foot {
  padding: 0 var(--spacing-md) var(--spacing-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.ui-card__desc + .ui-card__foot {
  padding-top: var(--spacing-sm);
}

.ui-card__foot ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* =========================================================================
   List flavor — a Card rendered as a full-width row.
   Basis: the workspace manage child rows. Rows stack inside a .ui-card
   container (divider between siblings) or standalone in a list shell.

   The row is one to three lines, in this order:

     | icon | title                     meta   actions |
     |      | description (one line, ellipsised)        |
     |      | tags                                      |

   The text column is the only elastic part: everything in it is clipped to
   the width left over by the icon, the meta column and the row actions, so
   a long title or description can never push a row wider than its card.
   ========================================================================= */
.ui-card-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  min-width: 0;
}

/* One-line rows read best centered; as soon as the text column has a second
   line (description, tags, a bridge panel) the whole row top-aligns, so the
   meta column and the actions sit on the title's line rather than floating
   beside the middle of the block. */
.ui-card-row:has(.ui-card-row__text > * + *) {
  align-items: flex-start;
}

.ui-card-row:hover {
  background: var(--color-surface-2, rgba(0, 0, 0, 0.03));
}

.ui-card-row + .ui-card-row {
  border-top: 1px solid var(--color-divider);
}

/* Stretched link, both idioms: a dedicated __link child, or the title
   anchor itself stretched via ::after. Interactive children (menus, drag
   handles) raise themselves above it with .--raised or .ui-menu. */
.ui-card-row__link {
  position: absolute;
  inset: 0;
  z-index: 0;
}

a.ui-card-row__title::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ui-card-row .ui-menu,
.ui-card-row .--raised {
  position: relative;
  /* z-index: 1; -- why was this here?  anyway this messes up dropdowns on stacked item lists e.g:nawi/workspace/manage   */
}

/* Colored icon chip, scaled down for the row; position:relative anchors
   optional corner decorations (e.g. a status dot). */
.ui-card-row__badge {
  flex: none;
  position: relative;
  top: 4px;
  align-self: flex-start;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2, rgba(0, 0, 0, 0.06));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.ui-card-row__badge:not([style]) {
  color: var(--color-text-secondary);
}

.ui-card-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

/* Nothing in the text column may size the row: every line is capped at the
   column width, so overflow becomes an ellipsis (or a wrap) instead of a
   horizontally scrolling card. */
.ui-card-row__text > * {
  min-width: 0;
  max-width: 100%;
}

/* Title — one line, ellipsised. Add .--wrap for the rare row whose title
   must stay whole (then it clamps at two lines). */
.ui-card-row__title {
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-card-row__title.--wrap {
  white-space: normal;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Description — the second line. One line by default (any element: <p>,
   <small>, <span>); .--clamp-2 gives it two. `display: block` is deliberate:
   an inline or inline-flex box sizes to its content and would overflow
   instead of ellipsising. */
.ui-card-row__desc {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-card-row__desc.--clamp-2 {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Second line carrying inline bits before the description (a count, a
   status, a separator). The description takes the leftover width and is the
   only part that ellipsises. */
.ui-card-row__sub {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.ui-card-row__sub > * {
  min-width: 0;
  flex: none;
}

.ui-card-row__sub > .ui-card-row__desc {
  flex: 1 1 auto;
  font-size: inherit;
}

/* Tags — the third line. Chips wrap onto as many lines as they need; a
   .ui-tag-list keeps its own single-line scroll behaviour. */
.ui-card-row__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Fixed, right-aligned metadata (dates, counts). Never shrinks and never
   wraps — it is the width the text column has to live within. */
.ui-card-row__meta {
  flex: none;
  text-align: end;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.person-card {
  padding: var(--spacing-sm);
}

.person-card .ui-item h1 {
  font-size: 1.4rem;
}

.ui-card-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin: var(--spacing-lg) 0;
  /* `backwards`, never `both` — see the note on .ui-list > *: `both` leaves
     the final keyframe's transform applied for good, turning every card
     into a stacking context that traps the dropdowns inside it. */
}
.ui-card-group > * {
  animation: listItemIn 0.4s var(--easing-spring) backwards;
}
.ui-card-group > *:nth-child(1) {
  animation-delay: 0s;
}
.ui-card-group > *:nth-child(2) {
  animation-delay: 0.05s;
}
.ui-card-group > *:nth-child(3) {
  animation-delay: 0.1s;
}
.ui-card-group > *:nth-child(4) {
  animation-delay: 0.15s;
}
.ui-card-group > *:nth-child(5) {
  animation-delay: 0.2s;
}
.ui-card-group > *:nth-child(6) {
  animation-delay: 0.25s;
}
.ui-card-group > *:nth-child(7) {
  animation-delay: 0.3s;
}
.ui-card-group > *:nth-child(8) {
  animation-delay: 0.35s;
}
.ui-card-group > *:nth-child(9) {
  animation-delay: 0.4s;
}
.ui-card-group > *:nth-child(10) {
  animation-delay: 0.45s;
}

/* Horizontally-scrollable variant: lays the group out as a swipeable row of
   fixed-width card tiles instead of a vertical stack. Mirrors the scroll-snap
   pattern used by .ui-tabs. On desktop the tiles simply wrap onto multiple
   rows instead of scrolling. */
.ui-card-group.--carousel {
  flex-direction: row;
  flex-wrap: wrap;
  /* flex-wrap: nowrap; */
  gap: var(--spacing-sm);
  margin: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar but keep scrolling functional */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ui-card-group.--carousel::-webkit-scrollbar {
  display: none;
}
.ui-card-group.--carousel {
  /* Each tile shows one full card plus ~80% of the next, a peek that cues the
     horizontal scroll. Solving c + gap + 0.8c = 100% gives c = (100% - gap)/1.8. */
}
.ui-card-group.--carousel > * {
  /*
  flex: 0 0 auto;
  width: calc((100% - var(--spacing-sm)) / 1.8);
  */
  width: 100%;
  scroll-snap-align: start;
}
.ui-card-group.--carousel {
  /* Desktop: there's room for everything, so wrap into a grid instead of
     scrolling — the peek width would otherwise leave ~1.8 huge cards per row. */
}
@media (min-width: 1024px) {
  .ui-card-group.--carousel {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .ui-card-group.--carousel > * {
    flex: 1 1 200px;
    width: auto;
    min-width: 140px;
    max-width: 240px;
  }
}

.ui-card-group__header {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: 0 var(--spacing-xs); /* slight inset so the label aligns with card content */
}

.ui-card-group__action { /* the "See all →" link */
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  white-space: nowrap;
}

/*
Document Renderer wrappers — emitted by:
  - Nawi\Document\Components\LayoutPage  → .ui-document-page + __title + __footer
  - Nawi\Document\Components\LayoutGroup → .ui-document-group + __title
  - Nawi\Document\Renderer (v-if wrap)   → .ui-document-vif
  - Nawi\Document\Components\InputSelect (select-buttons) → .ui-button-group
    with .ui-button.--secondary toggle children; active one carries .--selected.

Field-level styles live in `field.scss`.
*/
.ui-document-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin: 0 auto;
  box-sizing: border-box;
  min-width: 0;
}

.ui-document-page__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-sm);
}

.ui-document-page__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-sm);
  border-top: 1px solid var(--color-divider);
}

.ui-document-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
}

.ui-document-group__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0;
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-divider);
}

.ui-document-vif {
  display: contents;
}
.ui-document-vif[hidden] {
  display: none;
}

.ui-button-group {
  display: inline-flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: stretch;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
}
.ui-button-group > .ui-button {
  margin: 0;
  position: relative;
  cursor: pointer;
}
.ui-button-group .ui-button__control {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.ui-button-group > .ui-button:has(.ui-button__control:checked) {
  --color-button-bg: var(--color-accent);
  --color-button-text: var(--color-text-over-black);
}
.ui-button-group > .ui-button:has(.ui-button__control:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.ui-button-group:has(.ui-button__control:required:invalid) {
  box-shadow: inset 0 0 0 1px transparent;
}

.ui-button.--selected {
  --color-button-bg: var(--color-accent);
  --color-button-text: var(--color-text-over-black);
}

.ui-document img,
.ui-document video,
.ui-document iframe,
.ui-document svg,
.ui-document canvas {
  max-width: 100%;
  height: auto;
  display: block;
}
.ui-document table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
.ui-document pre {
  overflow-x: auto;
  max-width: 100%;
}

.ui-input-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  box-sizing: border-box;
}
.ui-input-list > .ui-field__label {
  padding: 0 var(--spacing-xs);
}

.ui-input-list__items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.ui-input-list__item {
  position: relative;
  padding: var(--spacing-md);
  padding-right: calc(var(--spacing-md) + 28px);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  box-sizing: border-box;
}
.ui-input-list__item .ui-field:last-child {
  margin-bottom: 0;
}
.ui-input-list__items.--row .ui-input-list__item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: flex-end;
}
.ui-input-list__items.--row .ui-input-list__item > .ui-field,
.ui-input-list__items.--row .ui-input-list__item > .ui-document-vif {
  flex: 1 1 12rem;
  margin-bottom: 0;
}

.ui-input-list__remove {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.ui-input-list__remove:hover {
  color: var(--color-danger);
  background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
}
.ui-input-list__remove:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.ui-input-list__add {
  align-self: flex-start;
}

/* PaymentIntent — a payable obligation inside a workflow state.
   Deliberately a card, not a form control: the payer is being shown a fact
   (what is owed, and whether it has been paid) with at most one thing to do. */
.ui-payment {
  /* The gate below is absolutely positioned against this, which is what makes the
     native validation bubble point at the card rather than the page corner. */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.ui-payment__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.ui-payment__label {
  font-weight: var(--font-weight-semibold);
}

.ui-payment__amount {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.ui-payment__message {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.ui-payment__action {
  align-self: flex-start;
}

/* A paid obligation is done — nothing about it should read as actionable. */
.ui-payment[data-payment-status=succeeded] {
  border-color: var(--color-success);
}

/* Tone modifiers, mirroring the pill inside the card. Without these a decline
   message renders in muted grey and reads as a hint rather than the error it is —
   which is the whole point of returning the payer to this card after a failed
   payment instead of to a standalone outcome page. */
.ui-payment.--danger {
  border-color: var(--color-danger);
}
.ui-payment.--danger .ui-payment__message {
  color: var(--color-danger);
  font-weight: var(--font-weight-semibold);
}

.ui-payment.--warning {
  border-color: var(--color-warning);
}
.ui-payment.--warning .ui-payment__message {
  color: var(--color-text);
}

.ui-payment.--success {
  border-color: var(--color-success);
}
.ui-payment.--success .ui-payment__message {
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
}

/* The `required` gate: a real form control the payer cannot satisfy by hand.
   Same recipe as .ui-button__control above, and for the same hard reason —
   browsers refuse to submit AT ALL ("An invalid form control is not focusable",
   no bubble, console only) when an invalid control is display:none,
   visibility:hidden, or inside [hidden]. So it keeps a 1x1 footprint at the
   card's top-left, which is also where the bubble anchors. */
.ui-payment__gate {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

/* A required payment reads as required, the way .ui-field does for inputs — the
   card is not a .ui-field, so it gets no asterisk for free. */
.ui-payment:has(.ui-payment__gate:required) .ui-payment__label::after {
  content: " *";
  color: var(--color-danger);
}

/*
Form field wrapper used by the Nawi Document Renderer.

Emitted markup (do not change here — these are the only shapes we style):

  <label class="ui-field">
    <span class="ui-field__label">EPS del estudiante</span>
    <input class="ui-field__input" type="text" name="..." required>
    <span class="ui-field-error">Required</span>
  </label>

  <label class="ui-field ui-field--checkbox">
    <input class="ui-field__input" type="checkbox" name="..." required>
    <span class="ui-field__label">He leído las instrucciones</span>
    <span class="ui-field-error">Debes aceptar</span>
  </label>

  <div class="ui-field ui-field--select">
    <span class="ui-field__label">Tipo de Sangre</span>
    <select class="ui-field__input">...</select>
    <span class="ui-field-error">...</span>
  </div>

  <label class="ui-field">
    <span class="ui-field__label">Observaciones</span>
    <textarea class="ui-field__input" name="..." rows="4">...</textarea>
  </label>

Document-level wrappers (.ui-document-page, .ui-document-group,
.ui-document-vif, .ui-button-group) live in `document.scss`.
*/
.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  box-sizing: border-box;
}
.ui-field:has([required]) > .ui-field__label::after {
  content: " *";
  color: var(--color-danger);
}

.ui-field__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  padding: 0 var(--spacing-xs);
  margin: 0;
}

.ui-field__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-input-text);
  padding: var(--spacing-sm) var(--spacing-md);
  min-height: 44px;
  background-color: var(--color-input-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ui-field__input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}
.ui-field__input:focus, .ui-field__input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}
.ui-field__input:disabled {
  background-color: var(--color-bg-soft);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}
.ui-field__input:invalid:not(:focus):not(:placeholder-shown), .ui-field__input[aria-invalid=true]:not(:focus) {
  border-color: var(--color-danger);
  background-color: var(--color-danger-light);
}

select.ui-field__input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md) center;
  padding-right: calc(var(--spacing-md) * 2 + 12px);
}

textarea.ui-field__input {
  min-height: 88px;
  line-height: 1.45;
  resize: vertical;
}

input[type=checkbox].ui-field__input,
input[type=radio].ui-field__input {
  display: inline-block;
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  border-radius: 0;
  accent-color: var(--color-accent);
  box-shadow: none;
  cursor: pointer;
  flex: 0 0 auto;
}

.ui-field-error {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-danger);
  margin-top: var(--spacing-xs);
  padding-left: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='7' stroke='currentColor' stroke-width='1.5' fill='none'/%3E%3Cpath d='M8 4v5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11' r='0.75' fill='currentColor'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 16px 16px;
}

.ui-field--checkbox {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}
.ui-field--checkbox > .ui-field__label {
  flex: 1 1 auto;
  padding: 0;
  cursor: pointer;
  user-select: none;
  color: var(--color-text-primary);
  font-weight: 400;
}
.ui-field--checkbox > .ui-field-error {
  flex-basis: 100%;
}
.ui-field--checkbox:has([required]) > .ui-field__label::after {
  content: " *";
  color: var(--color-danger);
}

.ui-fill {
  flex: 1;
  min-width: 0;
}

.ui-fill.--truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  background: var(--color-bg-soft);
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.ui-grade.--failing {
  border-color: var(--color-danger);
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.ui-grade.--empty {
  border-color: var(--color-border-strong);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
}

.ui-group-picker,
.ui-group-picker-modal {
  --ui-gp-relation: light-dark(#795AA6, #B49AD9);
  --ui-gp-relation-light: light-dark(#EDE9F4, #2A2138);
  --ui-gp-filter: var(--color-text-secondary);
  --ui-gp-filter-light: light-dark(#EDEDF0, #26262B);
}

/* ───────────────────────── Block 1: chip row ───────────────────────── */
.ui-group-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 36px;
}
.ui-group-picker__placeholder {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.ui-group-picker__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 6px 6px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.ui-group-picker__chip:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}
.ui-group-picker__chip-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}
.ui-group-picker__chip.--has-relations .ui-group-picker__chip-dot {
  background: linear-gradient(135deg, var(--color-accent) 50%, var(--ui-gp-relation) 50%);
}
.ui-group-picker__chip.--people .ui-group-picker__chip-dot {
  background: var(--color-success);
}
.ui-group-picker__chip-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-group-picker__chip-count {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.ui-group-picker__chip-remove {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--color-text-muted);
  transition: background 0.14s, color 0.14s;
}
.ui-group-picker__chip-remove:hover {
  background: var(--color-surface-2);
  color: var(--color-danger);
}
.ui-group-picker__add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border-strong);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.14s, color 0.14s, background 0.14s;
}
.ui-group-picker__add:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-light);
}
.ui-group-picker__totals {
  width: 100%;
  font-size: 13px;
  color: var(--color-text-muted);
}
.ui-group-picker__totals b {
  color: var(--color-text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────── Block 2: picker modal ─────────────────────── */
.ui-group-picker-modal {
  --ui-modal-width-md: 600px;
  height: min(777px, var(--ui-modal-max-height));
  max-width: 560px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ui-group-picker-modal__pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.ui-group-picker-modal__pane.--hidden {
  display: none;
}
.ui-group-picker-modal__head {
  flex: none;
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}
.ui-group-picker-modal__head h2 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-md);
  font-size: 1rem;
  font-weight: 600;
}
.ui-group-picker-modal__stage-badge {
  flex: none;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  margin-left: auto;
  /* !!! --- disabled for now ------ */
  display: none;
}
.ui-group-picker-modal__search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.ui-group-picker-modal__search:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}
.ui-group-picker-modal__search > i {
  flex: none;
  color: var(--color-text-muted);
}
.ui-group-picker-modal__search input {
  width: 100%;
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  color: var(--color-text-primary);
}
.ui-group-picker-modal__tree {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--spacing-sm);
}
.ui-group-picker-modal__empty {
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13.5px;
}
.ui-group-picker-modal__node {
  margin: 1px 0;
}
.ui-group-picker-modal__node.--open > * > .ui-group-picker-modal__caret {
  transform: rotate(90deg);
}
.ui-group-picker-modal__node-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s;
}
.ui-group-picker-modal__node-row:hover {
  background: var(--color-surface-2);
}
.ui-group-picker-modal__caret {
  flex: none;
  color: var(--color-text-muted);
  transition: transform 0.15s;
}
.ui-group-picker-modal__caret.--leaf {
  visibility: hidden;
}
.ui-group-picker-modal__node-title {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px 0;
}
.ui-group-picker-modal__node-type {
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px solid transparent;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
}
.ui-group-picker-modal__node-count {
  flex: none;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--color-text-muted);
}
.ui-group-picker-modal__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 4px 9px;
  cursor: pointer;
  transition: background 0.13s, color 0.13s, border-color 0.13s;
}
.ui-group-picker-modal__go .mdi {
  font-size: 14px;
}
.ui-group-picker-modal__go:hover, .ui-group-picker-modal__go:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-over-black);
}
.ui-group-picker-modal__go.--bare {
  visibility: hidden;
}
.ui-group-picker-modal__node-row:hover .ui-group-picker-modal__go, .ui-group-picker-modal__result:hover .ui-group-picker-modal__go, .ui-group-picker-modal__facet:hover .ui-group-picker-modal__go, .ui-group-picker-modal__person:hover .ui-group-picker-modal__go {
  border: 1px solid var(--color-border);
}
.ui-group-picker-modal__go-arrow {
  visibility: hidden;
  display: inline-flex;
  align-items: center;
}
.ui-group-picker-modal__node-row:hover .ui-group-picker-modal__go-arrow, .ui-group-picker-modal__result:hover .ui-group-picker-modal__go-arrow, .ui-group-picker-modal__facet:hover .ui-group-picker-modal__go-arrow, .ui-group-picker-modal__person:hover .ui-group-picker-modal__go-arrow, .ui-group-picker-modal__go:focus-visible .ui-group-picker-modal__go-arrow {
  visibility: visible;
}
.ui-group-picker-modal__node-row:hover .ui-group-picker-modal__go.--bare, .ui-group-picker-modal__result:hover .ui-group-picker-modal__go.--bare, .ui-group-picker-modal__facet:hover .ui-group-picker-modal__go.--bare, .ui-group-picker-modal__person:hover .ui-group-picker-modal__go.--bare, .ui-group-picker-modal__go.--bare:focus-visible {
  visibility: visible;
}
@media (hover: none) {
  .ui-group-picker-modal__go-arrow {
    display: inline-flex;
  }
  .ui-group-picker-modal__go.--bare {
    visibility: visible;
  }
}
.ui-group-picker-modal__views-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}
.ui-group-picker-modal__views .mdi {
  font-size: 13px;
}
.ui-group-picker-modal__period {
  flex: none;
  margin-left: auto;
  max-width: 15em;
  font-size: 0.85em;
  padding: 6px 10px;
}
.ui-group-picker-modal__period[hidden] {
  display: none;
}
.ui-group-picker-modal__children {
  padding-left: 22px;
}
.ui-group-picker-modal__loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: var(--color-text-muted);
  font-size: 12.5px;
}
.ui-group-picker-modal__spinner {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: ui-group-picker-spin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ui-group-picker-modal__spinner {
    animation: none;
  }
}
.ui-group-picker-modal__result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s;
}
.ui-group-picker-modal__result:hover {
  background: var(--color-surface-2);
}
.ui-group-picker-modal__result-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ui-group-picker-modal__result-path {
  font-size: 11.5px;
  color: var(--color-text-muted);
}
.ui-group-picker-modal__segment-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 10px 8px 4px;
  padding: 0;
}
.ui-group-picker-modal {
  /* ---- stage 2: shape ---- */
  /* Row 1: back arrow + the breadcrumb trail, given the full header width —
     the trail is the priority element (path context matters more than the
     compact caption below), so nothing else competes with it for space. */
}
.ui-group-picker-modal__shape-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xs);
}
.ui-group-picker-modal__back {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.13s, background 0.13s;
}
.ui-group-picker-modal__back:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-2);
}
.ui-group-picker-modal {
  /* Row 2: the headline — group name in Stage 2, role name in Stage 3 (the
     breadcrumb above already named the group there) — leading so it isn't
     squeezed by the trailing, fixed-width type chip / stage badge. Not
     repeated in the trail above it: one name, one place. */
}
.ui-group-picker-modal__shape-subhead {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--spacing-lg);
}
.ui-group-picker-modal__shape-subtitle {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-lg);
}
.ui-group-picker-modal__subhead-filters {
  --ui-gp-pill-accent: var(--ui-gp-filter);
  --ui-gp-pill-accent-light: var(--ui-gp-filter-light);
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ui-group-picker-modal__shape-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
}
.ui-group-picker-modal__shape-path {
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.ui-group-picker-modal {
  /* Stage 2/3 header trail (.ui-breadcrumb): the full-width priority row,
     scrolling horizontally — rather than wrapping or getting clipped —
     when the ancestor path is long. Always kept scrolled to the current
     (right-most) crumb by the JS renderer. A left-edge fade hints there's
     more to scroll to when it overflows. */
}
.ui-group-picker-modal__crumbs {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  flex-wrap: nowrap;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ui-group-picker-modal__crumbs::-webkit-scrollbar {
  display: none;
}
.ui-group-picker-modal__crumbs {
  /* Only fade when there's actually hidden content to scroll to —
     otherwise a short trail would look like it's being cut off. */
}
.ui-group-picker-modal__crumbs.--overflowing {
  mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 4px), transparent);
}
.ui-group-picker-modal__crumbs .ui-crumb {
  flex: none;
  max-width: 10rem;
  font-size: var(--font-size-sm);
}
.ui-group-picker-modal__drill-sub {
  font-size: 12px;
  color: var(--color-text-muted);
  padding: var(--spacing-xs) var(--spacing-lg);
}
.ui-group-picker-modal__drill-sub.--on {
  color: var(--color-accent);
}
.ui-group-picker-modal__shape-toolbar {
  flex: none;
  padding: var(--spacing-xs) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}
.ui-group-picker-modal__shape-toolbar:empty {
  display: none;
}
.ui-group-picker-modal__shape-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--spacing-xs) var(--spacing-md);
}
.ui-group-picker-modal__subgroups {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.ui-group-picker-modal__subgroups.--on {
  color: var(--color-accent);
}
.ui-group-picker-modal__section {
  margin-bottom: var(--spacing-lg);
}
.ui-group-picker-modal__section-title {
  margin: 0 0 var(--spacing-sm);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  padding: 0 var(--spacing-sm);
}
.ui-group-picker-modal__section.--relations .ui-group-picker-modal__section-title {
  color: var(--ui-gp-relation);
}
.ui-group-picker-modal__section-note {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 11px;
  color: var(--color-text-muted);
}
.ui-group-picker-modal__pills {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}
.ui-group-picker-modal__pill-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 0;
}
.ui-group-picker-modal__pill-row.row__member {
  --ui-gp-pill-accent: var(--color-accent);
  --ui-gp-pill-accent-light: var(--color-accent-light);
}
.ui-group-picker-modal__pill-row.row__relation {
  --ui-gp-pill-accent: var(--ui-gp-relation);
  --ui-gp-pill-accent-light: var(--ui-gp-relation-light);
}
.ui-group-picker-modal__pill-row.row__filter {
  --ui-gp-pill-accent: var(--ui-gp-filter);
  --ui-gp-pill-accent-light: var(--ui-gp-filter-light);
}
.ui-group-picker-modal__pill-row.--dd .ui-group-picker-modal__pill-row-scroll {
  overflow: visible;
}
.ui-group-picker-modal__pill-row-label {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ui-group-picker-modal__pill-row-label .mdi {
  font-size: 14px;
}
.ui-group-picker-modal__pill-row-scroll {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 5px;
  scrollbar-width: thin;
}
.ui-group-picker-modal__pill-row-scroll::-webkit-scrollbar {
  height: 5px;
}
.ui-group-picker-modal__pill-row-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.ui-group-picker-modal__pill-row-scroll::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 3px;
}
.ui-group-picker-modal__pill-row-scroll .--zero {
  display: none;
}
.ui-group-picker-modal__pill-sep {
  flex: none;
  width: 1px;
  height: 18px;
  background: var(--color-border-strong);
  margin: 0 3px;
}
.ui-group-picker-modal__pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.8em;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}
.ui-group-picker-modal__pill:hover {
  border-color: var(--ui-gp-pill-accent);
}
.ui-group-picker-modal__pill.--on {
  background: var(--ui-gp-pill-accent);
  border-color: var(--ui-gp-pill-accent);
  color: var(--color-text-over-black);
}
.ui-group-picker-modal__pill.--on .ui-group-picker-modal__pill-count {
  color: inherit;
  opacity: 0.8;
}
.ui-group-picker-modal__pill.--partial {
  border-color: var(--ui-gp-pill-accent);
  background: var(--ui-gp-pill-accent-light);
  color: var(--ui-gp-pill-accent);
}
.ui-group-picker-modal__pill.--zero {
  opacity: 0.42;
  cursor: default;
}
.ui-group-picker-modal__pill.--zero:hover {
  border-color: var(--color-border-strong);
}
.ui-group-picker-modal__pill.--rel {
  --ui-gp-pill-accent: var(--ui-gp-relation);
  --ui-gp-pill-accent-light: var(--ui-gp-relation-light);
}
.ui-group-picker-modal__pill-count {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.ui-group-picker-modal__dd {
  position: relative;
  display: inline-flex;
}
.ui-group-picker-modal__dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 2px 5px 2px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.8em;
  font-weight: 500;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.13s, color 0.13s;
}
.ui-group-picker-modal__dd-btn > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-group-picker-modal__dd-btn .mdi {
  font-size: 15px;
  color: var(--color-text-muted);
  flex: none;
}
.ui-group-picker-modal__dd-btn:hover {
  border-color: var(--ui-gp-pill-accent);
}
.ui-group-picker-modal__dd-btn.--set {
  color: var(--color-text-primary);
  background: var(--color-surface);
}
.ui-group-picker-modal__dd.--open .ui-group-picker-modal__dd-btn {
  border-color: var(--ui-gp-pill-accent);
}
.ui-group-picker-modal__dd-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 190px;
  padding: var(--spacing-xs);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.ui-group-picker-modal__dd-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 5px var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
}
.ui-group-picker-modal__dd-item:hover {
  background: var(--color-surface-2);
}
.ui-group-picker-modal__dd-item.--on {
  font-weight: 600;
}
.ui-group-picker-modal__dd-item.--any {
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  margin-bottom: 2px;
}
.ui-group-picker-modal__dd-item input {
  accent-color: var(--ui-gp-pill-accent);
}
.ui-group-picker-modal__dd-count {
  margin-left: auto;
  padding-left: var(--spacing-sm);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.ui-group-picker-modal__dd-group {
  padding: 6px var(--spacing-sm) 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  user-select: none;
}
.ui-group-picker-modal__dd-group:not(:first-child) {
  margin-top: 2px;
}
.ui-group-picker-modal__role-group {
  margin-bottom: var(--spacing-md);
}
.ui-group-picker-modal__role-group:last-child {
  margin-bottom: 0;
}
.ui-group-picker-modal__role-group:has(.ui-group-picker-modal__facet.--zero) {
  display: none;
}
.ui-group-picker-modal__role-group .ui-group-picker-modal__pill-row {
  margin: 2px 0 4px;
}
.ui-group-picker-modal__role-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
}
.ui-group-picker-modal__role-group-caption {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ui-group-picker-modal__role-group-filters {
  --ui-gp-pill-accent: var(--ui-gp-filter);
  --ui-gp-pill-accent-light: var(--ui-gp-filter-light);
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ui-group-picker-modal__role-subs {
  padding: 6px;
}
.ui-group-picker-modal__role-subs .ui-group-picker-modal__relatives {
  padding: 4px 0;
}
.ui-group-picker-modal__facet {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 2px 11px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s;
}
.ui-group-picker-modal__facet:hover {
  background: var(--color-surface-2);
}
.ui-group-picker-modal__facet.--zero {
  opacity: 0.42;
  cursor: default;
}
.ui-group-picker-modal__facet.--zero:hover {
  background: none;
}
.ui-group-picker-modal__facet.--zero:not(.--selected) {
  display: none;
}
.ui-group-picker-modal__facet.--zero.--selected {
  opacity: 0.7;
  cursor: pointer;
}
.ui-group-picker-modal__facet-box {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: transparent;
  transition: background 0.12s, border-color 0.12s;
}
.ui-group-picker-modal__facet-box .mdi {
  font-size: 13px;
}
.ui-group-picker-modal__facet.--relation .ui-group-picker-modal__facet-box {
  border-radius: 50%;
}
.ui-group-picker-modal__facet.--selected .ui-group-picker-modal__facet-box {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-over-black);
}
.ui-group-picker-modal__facet.--relation.--selected .ui-group-picker-modal__facet-box {
  background: var(--ui-gp-relation);
  border-color: var(--ui-gp-relation);
}
.ui-group-picker-modal__check {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: transparent;
  transition: background 0.12s, border-color 0.12s;
}
.ui-group-picker-modal__check .mdi {
  font-size: 13px;
}
.ui-group-picker-modal__check.--on {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-over-black);
}
.ui-group-picker-modal__check.--partial {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
  color: var(--color-accent);
}
.ui-group-picker-modal__check.--rel.--on {
  background: var(--ui-gp-relation);
  border-color: var(--ui-gp-relation);
}
.ui-group-picker-modal__check.--sm {
  width: 15px;
  height: 15px;
}
.ui-group-picker-modal__check.--sm .mdi {
  font-size: 11px;
}
.ui-group-picker-modal__facet-label {
  font-size: 14px;
  font-weight: 500;
}
.ui-group-picker-modal__facet.--relation .ui-group-picker-modal__facet-label {
  color: var(--ui-gp-relation);
}
.ui-group-picker-modal__facet-note {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--color-text-muted);
}
.--on .ui-group-picker-modal__facet-note {
  color: var(--color-text-over-black);
}
.ui-group-picker-modal__facet-count {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--color-text-muted);
  padding-right: 35px;
}
.ui-group-picker-modal__count-skeleton {
  display: inline-block;
  width: 1.7em;
  height: 0.85em;
  border-radius: var(--radius-sm);
  vertical-align: middle;
  background: linear-gradient(100deg, var(--color-surface-2) 30%, var(--color-surface) 50%, var(--color-surface-2) 70%);
  background-size: 220% 100%;
  animation: ui-gp-count-shimmer 1.15s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ui-group-picker-modal__count-skeleton {
    animation: none;
  }
}
.ui-group-picker-modal__facet-count.--loading .mdi, .ui-group-picker-modal__pill-count.--loading .mdi {
  animation: ui-skeleton-pulse 1.15s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ui-group-picker-modal__facet-count.--loading .mdi, .ui-group-picker-modal__pill-count.--loading .mdi {
    animation: none;
  }
}
.ui-group-picker-modal__person-card {
  overflow: hidden;
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
}
.ui-group-picker-modal__person-card:last-child {
  margin-bottom: 0;
}
.ui-group-picker-modal__person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s;
}
.ui-group-picker-modal__person:hover {
  background: var(--color-surface-2);
}
.ui-group-picker-modal__person-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  /* align relation_type chips to the right */
  margin-right: auto;
}
.ui-group-picker-modal__person-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.ui-group-picker-modal__state-pill {
  display: inline-block;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.ui-group-picker-modal__avatar {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-accent-light);
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.ui-group-picker-modal__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ui-group-picker-modal__avatar.--sm {
  width: 28px;
  height: 28px;
  font-size: 9.5px;
}
.ui-group-picker-modal__relatives {
  padding: 8px;
  padding-right: 0;
}
.ui-group-picker-modal__memberships {
  padding: 4px 8px 6px;
}
.ui-group-picker-modal__membership {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 4px;
  font-size: 13px;
}
.ui-group-picker-modal__membership-path {
  min-width: 0;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-group-picker-modal__memberships-more {
  display: block;
  padding: 2px 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
}
.ui-group-picker-modal__memberships-more:hover {
  color: var(--color-accent);
}
.ui-group-picker-modal__sublist-label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 4px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ui-group-picker-modal__sublist-label .mdi {
  font-size: 14px;
}
.ui-group-picker-modal__relative {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.12s;
}
.ui-group-picker-modal__relative:hover {
  background: var(--color-surface-2);
}
.ui-group-picker-modal__relative.--zero {
  opacity: 0.42;
  cursor: default;
}
.ui-group-picker-modal__relative.--zero:hover {
  background: none;
}
.ui-group-picker-modal__relative.--zero:not(.--selected) {
  display: none;
}
.ui-group-picker-modal__relative.--zero.--selected {
  opacity: 0.7;
  cursor: pointer;
}
.ui-group-picker-modal__foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}
.ui-group-picker-modal__summary {
  font-size: 13px;
  color: var(--color-text-muted);
}
.ui-group-picker-modal__summary b {
  color: var(--color-text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ui-group-picker-modal__actions {
  display: flex;
  gap: var(--spacing-sm);
  white-space: nowrap;
}

@keyframes ui-group-picker-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ui-gp-count-shimmer {
  from {
    background-position: 220% 0;
  }
  to {
    background-position: -120% 0;
  }
}
.ui-cfgkit,
.ui-cfgkit-modal {
  --ui-cfgkit-relation: light-dark(#795AA6, #B49AD9);
  --ui-cfgkit-relation-light: light-dark(#EDE9F4, #2A2138);
}

/* ────────────────────────────── rails ────────────────────────────── */
.ui-cfgkit__rail {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}
.ui-cfgkit__rail.--members, .ui-cfgkit__rail.--anchor {
  --ui-cfgkit-accent: var(--color-accent);
  --ui-cfgkit-accent-light: var(--color-accent-light);
}
.ui-cfgkit__rail.--members > .ui-cfgkit__rail-label {
  color: var(--color-accent);
}
.ui-cfgkit__rail.--relatives {
  --ui-cfgkit-accent: var(--ui-cfgkit-relation);
  --ui-cfgkit-accent-light: var(--ui-cfgkit-relation-light);
}
.ui-cfgkit__rail.--relatives > .ui-cfgkit__rail-label {
  color: var(--ui-cfgkit-relation);
}

.ui-cfgkit__rail-label {
  flex: none;
  width: 76px;
  padding-top: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-cfgkit__rail-line {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-xs);
}

.ui-cfgkit__flow {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-xs) var(--spacing-sm);
}

.ui-cfgkit__word {
  flex: none;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.ui-cfgkit__note {
  width: 100%;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.45;
}
.ui-cfgkit__note.--warn {
  color: var(--color-warning);
  font-weight: 500;
}

/* ─────────────────────── the dropdown family ─────────────────────── */
.ui-cfgkit__dd {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

.ui-cfgkit__dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 3px 6px 3px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.85em;
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.13s, color 0.13s;
}
.ui-cfgkit__dd-btn > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-cfgkit__dd-btn .mdi {
  font-size: 15px;
  color: var(--color-text-muted);
  flex: none;
}
.ui-cfgkit__dd-btn:hover {
  border-color: var(--ui-cfgkit-accent, var(--color-accent));
}
.ui-cfgkit__dd-btn.--set {
  color: var(--color-text-primary);
  font-weight: 500;
}
.ui-cfgkit__dd-btn.--incomplete {
  border-style: dashed;
  border-color: var(--color-warning);
}
.ui-cfgkit__dd.--open .ui-cfgkit__dd-btn {
  border-color: var(--ui-cfgkit-accent, var(--color-accent));
}

.ui-cfgkit__dd-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  min-width: 190px;
  max-width: 320px;
  max-height: 300px;
  overflow-y: auto;
  padding: var(--spacing-xs);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.ui-cfgkit__dd-filter {
  position: sticky;
  top: calc(-1 * var(--spacing-xs));
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: calc(-1 * var(--spacing-xs)) calc(-1 * var(--spacing-xs)) var(--spacing-xs);
  padding: 7px var(--spacing-sm);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.ui-cfgkit__dd-filter > .mdi {
  flex: none;
  color: var(--color-text-muted);
  font-size: 14px;
}
.ui-cfgkit__dd-filter input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
}

.ui-cfgkit__dd-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 5px var(--spacing-sm);
  border-radius: var(--radius-sm);
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
}
.ui-cfgkit__dd-item:hover {
  background: var(--color-surface-2);
}
.ui-cfgkit__dd-item.--on {
  color: var(--ui-cfgkit-accent, var(--color-accent));
  font-weight: 600;
}
.ui-cfgkit__dd-item.--any {
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  margin-bottom: 2px;
}
.ui-cfgkit__dd-item input {
  accent-color: var(--ui-cfgkit-accent, var(--color-accent));
}

.ui-cfgkit__dd-item.--single {
  align-items: flex-start;
  width: 100%;
}

.ui-cfgkit__dd-radio {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 50%;
  position: relative;
}
.ui-cfgkit__dd-item.--on .ui-cfgkit__dd-radio {
  border-color: var(--ui-cfgkit-accent, var(--color-accent));
}
.ui-cfgkit__dd-item.--on .ui-cfgkit__dd-radio::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  background: var(--ui-cfgkit-accent, var(--color-accent));
}

.ui-cfgkit__dd-item-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.ui-cfgkit__dd-hint {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--color-text-muted);
}

.ui-cfgkit__dd-divider {
  height: 1px;
  margin: 4px calc(-1 * var(--spacing-xs));
  background: var(--color-border);
}

/* ───────────────────────────── who-rows ───────────────────────────── */
.ui-cfgkit__who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.ui-cfgkit__who.--fit {
  flex: 0 1 auto;
}

.ui-cfgkit__who-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-xs) var(--spacing-sm);
}

.ui-cfgkit__icon-x {
  flex: none;
  background: none;
  border: 0;
  padding: 3px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1;
  font-size: 13px;
}
.ui-cfgkit__icon-x:hover {
  color: var(--color-danger);
  background: var(--color-surface-2);
}

.ui-cfgkit__add-row {
  align-self: flex-start;
  border: 0;
  background: none;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.13s;
}
.ui-cfgkit__add-row:hover {
  color: var(--ui-cfgkit-accent, var(--color-accent));
}

/* ─────────────────────────────── chips ─────────────────────────────── */
.ui-cfgkit__chips {
  flex: 1;
  min-width: 0;
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.ui-cfgkit__chip {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 4px var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  max-width: 100%;
}
.ui-cfgkit__chip.--unknown {
  border-color: var(--color-warning);
}
.ui-cfgkit__chip.--unknown .ui-cfgkit__chip-dot {
  background: var(--color-warning);
}
.ui-cfgkit__chip.--unknown .ui-cfgkit__chip-title {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.85em;
}

.ui-cfgkit__chip-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ui-cfgkit-accent, var(--color-accent));
}

.ui-cfgkit__chip-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.ui-cfgkit__chip-title {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-cfgkit__chip-path {
  font-size: 11px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-cfgkit__chip-sub {
  flex: none;
  background: none;
  border: 0;
  padding: 2px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1;
}
.ui-cfgkit__chip-sub:hover {
  color: var(--ui-cfgkit-accent, var(--color-accent));
  background: var(--color-surface-2);
}
.ui-cfgkit__chip-sub.--exact {
  opacity: 0.7;
}

.ui-cfgkit__chip-remove {
  flex: none;
  background: none;
  border: 0;
  padding: 2px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1;
}
.ui-cfgkit__chip-remove:hover {
  color: var(--color-danger);
  background: var(--color-surface-2);
}

.ui-cfgkit__chip-add {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border-strong);
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.8em;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.13s, color 0.13s;
}
.ui-cfgkit__chip-add:hover {
  border-color: var(--ui-cfgkit-accent, var(--color-accent));
  color: var(--color-text-primary);
}

.ui-cfgkit__toggle-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 3px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.85em;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.13s, color 0.13s;
}
.ui-cfgkit__toggle-chip .mdi {
  font-size: 14px;
  color: var(--ui-cfgkit-accent, var(--color-accent));
}
.ui-cfgkit__toggle-chip:hover {
  border-color: var(--ui-cfgkit-accent, var(--color-accent));
}
.ui-cfgkit__toggle-chip.--exact {
  color: var(--color-text-muted);
}
.ui-cfgkit__toggle-chip.--exact .mdi {
  color: var(--color-text-muted);
}

/* ─────────────────────────── misc pieces ─────────────────────────── */
.ui-cfgkit__pill-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ui-cfgkit__pill-skeleton {
  flex: none;
  width: 72px;
  height: 24px;
  border-radius: var(--radius-md);
}

.ui-cfgkit__tokens {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.85em;
  min-width: 180px;
}

.ui-cfgkit__mode-switch {
  align-self: flex-start;
}

/* ═════════════════════════ the group modal ═════════════════════════ */
.ui-cfgkit-modal {
  --ui-modal-width-md: 560px;
  display: flex;
  flex-direction: column;
  max-height: min(640px, 86vh);
}
.ui-cfgkit-modal__head {
  flex: none;
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.ui-cfgkit-modal__head h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
}
.ui-cfgkit-modal__controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.ui-cfgkit-modal__period {
  flex: none;
  max-width: 180px;
  min-height: 36px;
}
.ui-cfgkit-modal__search {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
}
.ui-cfgkit-modal__search > .mdi {
  position: absolute;
  left: 10px;
  color: var(--color-text-muted);
  pointer-events: none;
}
.ui-cfgkit-modal__search input {
  width: 100%;
  min-height: 36px;
  padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) 34px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-sm);
}
.ui-cfgkit-modal__search input:focus {
  outline: none;
  border-color: var(--color-accent);
}
.ui-cfgkit-modal__body {
  flex: 1;
  min-height: 220px;
  overflow-y: auto;
  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-md);
}
.ui-cfgkit-modal__children {
  margin-left: var(--spacing-lg);
  border-left: 1px solid var(--color-border);
  padding-left: var(--spacing-xs);
}
.ui-cfgkit-modal__node-row, .ui-cfgkit-modal__result {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 6px var(--spacing-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
}
.ui-cfgkit-modal__node-row:hover, .ui-cfgkit-modal__result:hover {
  background: var(--color-surface-2);
}
.ui-cfgkit-modal__node-row.--selected, .ui-cfgkit-modal__result.--selected {
  background: var(--color-accent-light);
}
.ui-cfgkit-modal__result {
  align-items: flex-start;
}
.ui-cfgkit-modal__caret {
  flex: none;
  display: inline-flex;
  color: var(--color-text-muted);
  padding: 2px;
  border-radius: var(--radius-sm);
  transition: transform 0.15s;
}
.ui-cfgkit-modal__caret:hover {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
}
.ui-cfgkit-modal__caret.--leaf {
  visibility: hidden;
}
.ui-cfgkit-modal__node.--open > .ui-cfgkit-modal__node-row > .ui-cfgkit-modal__caret {
  transform: rotate(90deg);
}
.ui-cfgkit-modal__check {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 13px;
  transition: background 0.13s, border-color 0.13s;
}
.ui-cfgkit-modal__check.--on {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-over-black);
}
.ui-cfgkit-modal__result-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.ui-cfgkit-modal__title {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-cfgkit-modal__node-row > .ui-cfgkit-modal__title {
  flex: 1;
}
.ui-cfgkit-modal__type {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-left: 6px;
}
.ui-cfgkit-modal__tag {
  font-size: 10.5px;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
  white-space: nowrap;
}
.ui-cfgkit-modal__path {
  font-size: 11.5px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-cfgkit-modal__foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-md);
  border-top: 1px solid var(--color-border);
}
.ui-cfgkit-modal__count {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.ui-cfgkit-modal__actions {
  flex: none;
  display: flex;
  gap: var(--spacing-sm);
}
.ui-cfgkit-modal__loading {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.ui-cfgkit-modal__spinner {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
}
.ui-cfgkit-modal__empty {
  padding: var(--spacing-lg) var(--spacing-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .ui-cfgkit-modal__spinner {
    animation: ui-cfgkit-spin 0.8s linear infinite;
  }
}
@keyframes ui-cfgkit-spin {
  to {
    transform: rotate(360deg);
  }
}
.ui-ccfg {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* ───────────────────────── boot / empty states ───────────────────────── */
.ui-ccfg__error {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-warning);
  background: var(--color-warning-light);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
}
.ui-ccfg__error .mdi {
  color: var(--color-warning);
  font-size: 1.1rem;
}
.ui-ccfg__error .ui-button {
  margin-left: auto;
  flex: none;
}

.ui-ccfg__empty {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-md);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}
.ui-ccfg__empty > .mdi {
  font-size: 1.6rem;
  flex: none;
}
.ui-ccfg__empty b {
  color: var(--color-text-primary);
}

/* ──────────────────────────── tab strip ──────────────────────────── */
.ui-ccfg__strip {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-xs);
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: thin;
}
.ui-ccfg__strip::-webkit-scrollbar {
  height: 5px;
}
.ui-ccfg__strip::-webkit-scrollbar-track {
  background: transparent;
}
.ui-ccfg__strip::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 3px;
}

.ui-ccfg__tabchip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 240px;
  padding: 5px var(--spacing-xs) 5px 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.13s, background 0.13s, opacity 0.2s;
}
.ui-ccfg__tabchip:hover {
  border-color: var(--color-border-strong);
}
.ui-ccfg__tabchip.--active {
  background: var(--color-surface);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}
.ui-ccfg__tabchip.--active .ui-ccfg__tabchip-label {
  color: var(--color-accent);
}
.ui-ccfg__tabchip.--raw {
  border-color: var(--color-warning);
  background: var(--color-warning-light);
}
.ui-ccfg__tabchip.--invalid {
  border-style: dashed;
}
.ui-ccfg__tabchip.--invalid .ui-ccfg__tabchip-sub {
  color: var(--color-warning);
}
.ui-ccfg__tabchip.--merged .ui-ccfg__tabchip-sub {
  font-style: italic;
}
.ui-ccfg__tabchip.--dragging {
  opacity: 0.45;
}

.ui-ccfg__tabchip-drag {
  flex: none;
  color: var(--color-text-muted);
  font-size: 14px;
  cursor: grab;
  opacity: 0.6;
}
.ui-ccfg__tabchip:hover .ui-ccfg__tabchip-drag {
  opacity: 1;
}

.ui-ccfg__tabchip-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.ui-ccfg__tabchip-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-ccfg__tabchip-sub {
  font-size: 10.5px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-ccfg__tabchip-x {
  flex: none;
  background: none;
  border: 0;
  padding: 2px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1;
  font-size: 13px;
}
.ui-ccfg__tabchip-x:hover {
  color: var(--color-danger);
  background: var(--color-surface-2);
}

.ui-ccfg__tab-add {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.13s, color 0.13s;
}
.ui-ccfg__tab-add:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ─────────────────────────── tab panel ─────────────────────────── */
.ui-ccfg__panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.ui-ccfg__panel.--raw {
  border-color: var(--color-warning);
  background: var(--color-warning-light);
}

.ui-ccfg__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.ui-ccfg__row-label {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ui-ccfg__mg-body {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding-left: var(--spacing-md);
}

/* ─────────────────────────── segments ─────────────────────────── */
.ui-ccfg__segments {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.ui-ccfg__segment {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  transition: opacity 0.2s;
}
.ui-ccfg__segment.--dragging {
  opacity: 0.45;
}

.ui-ccfg__segment-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.ui-ccfg__segment-drag {
  flex: none;
  color: var(--color-text-muted);
  font-size: 15px;
  cursor: grab;
  opacity: 0.6;
}
.ui-ccfg__segment:hover .ui-ccfg__segment-drag {
  opacity: 1;
}

.ui-ccfg__segment-title {
  flex: 1;
  min-width: 0;
  border: 0;
  border-bottom: 1px dashed transparent;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 2px;
}
.ui-ccfg__segment-title::placeholder {
  color: var(--color-text-muted);
  opacity: 0.5;
}
.ui-ccfg__segment-title:hover {
  border-bottom-color: var(--color-border-strong);
}
.ui-ccfg__segment-title:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
  color: var(--color-text-primary);
}

.ui-ccfg__sources {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.ui-ccfg__add-segment,
.ui-ccfg__add-source {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.13s, color 0.13s;
}
.ui-ccfg__add-segment:hover,
.ui-ccfg__add-source:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ─────────────────────────── sources ─────────────────────────── */
.ui-ccfg__source {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color 0.13s;
  /* no overflow: hidden — it would clip the dropdown menus */
}
.ui-ccfg__source.--open {
  border-color: var(--color-border-strong);
}
.ui-ccfg__source.--raw {
  border-color: var(--color-warning);
  background: var(--color-warning-light);
}
.ui-ccfg__source.--raw .ui-ccfg__source-dot {
  background: var(--color-warning);
}
.ui-ccfg__source.--incomplete {
  border-style: dashed;
}
.ui-ccfg__source.--incomplete .ui-ccfg__source-dot {
  background: var(--color-warning);
}

.ui-ccfg__source-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  user-select: none;
}
.ui-ccfg__source-head:hover {
  background: color-mix(in srgb, var(--color-surface-2) 55%, transparent);
}

.ui-ccfg__source-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.ui-ccfg__source-sentence {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-xs);
  line-height: 1.4;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ui-ccfg__s-members {
  color: var(--color-accent);
  font-weight: 600;
}

.ui-ccfg__s-relatives {
  color: var(--ui-cfgkit-relation);
  font-weight: 600;
}

.ui-ccfg__s-subject {
  font-weight: 600;
}

.ui-ccfg__s-states {
  font-weight: 400;
  font-size: 0.92em;
}

.ui-ccfg__s-where {
  color: var(--color-text-muted);
}

.ui-ccfg__s-warn {
  color: var(--color-warning);
  font-weight: 600;
}

.ui-ccfg__source-caret {
  flex: none;
  display: inline-flex;
  color: var(--color-text-muted);
  transition: transform 0.15s;
}
.ui-ccfg__source.--open .ui-ccfg__source-caret {
  transform: rotate(180deg);
}

.ui-ccfg__source-body {
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  cursor: default;
}

.ui-ccfg__icon-btn {
  background: none;
  border: 0;
  padding: 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.ui-ccfg__icon-btn:hover {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
}
.ui-ccfg__icon-btn.--danger:hover {
  color: var(--color-danger);
}

.ui-ccfg__raw {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Consolas, monospace);
  font-size: 0.85em;
  min-height: 110px;
  width: 100%;
}

.ui-hero {
  --ui-hero-icon-size: 56px;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  padding-top: var(--spacing-sm);
  padding-bottom: calc(var(--spacing-lg) + var(--spacing-xl));
  background: var(--color-accent);
  color: white;
}
.ui-hero > .ui-icon,
.ui-hero > .ui-avatar {
  width: var(--ui-hero-icon-size);
  height: var(--ui-hero-icon-size);
  font-size: var(--font-size-xl);
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.2);
  color: white;
}
.ui-hero > .ui-avatar {
  object-fit: cover;
}
.ui-hero h1, .ui-hero h2, .ui-hero h3 {
  color: inherit;
  line-height: 1.15;
}
.ui-hero h1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
}
.ui-hero h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}
.ui-hero h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}
.ui-hero p, .ui-hero small, .ui-hero .ui-label {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--font-size-sm);
  margin: 0;
}

.ui-hero-cards {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: calc(-1 * var(--spacing-xl));
  margin-bottom: var(--spacing-md);
}
.ui-hero-cards > .ui-card {
  flex: 1;
}

.ui-stat h1 {
  font-size: 2em;
}
.ui-stat h2 {
  font-size: 1.5em;
}
.ui-stat h3 {
  font-size: 1.25em;
}
.ui-stat sup {
  font-size: 0.75em;
  color: var(--color-accent);
}
.ui-stat h1, .ui-stat h2, .ui-stat h3 {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.ui-stat > small {
  display: block;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}
.ui-stat.--success h1, .ui-stat.--success h2, .ui-stat.--success h3 {
  color: var(--color-success);
}
.ui-stat.--warning h1, .ui-stat.--warning h2, .ui-stat.--warning h3 {
  color: var(--color-warning);
}
.ui-stat.--danger h1, .ui-stat.--danger h2, .ui-stat.--danger h3 {
  color: var(--color-danger);
}
.ui-stat.--zero h1, .ui-stat.--zero h2, .ui-stat.--zero h3 {
  color: var(--color-text-muted);
}

.ui-stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  padding: var(--spacing-md) var(--spacing-lg);
}

a.ui-stat {
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
  margin: calc(var(--spacing-xs) * -1);
  padding: var(--spacing-xs);
}
a.ui-stat .mdi {
  opacity: 0;
  transition: opacity 0.12s ease-out;
}
a.ui-stat:hover, a.ui-stat:focus-visible {
  background: var(--color-bg-soft);
}
a.ui-stat:hover > small, a.ui-stat:focus-visible > small {
  color: var(--color-accent);
}
a.ui-stat:hover .mdi, a.ui-stat:focus-visible .mdi {
  opacity: 1;
}
a.ui-stat.--active {
  background: var(--color-bg-soft);
  box-shadow: inset 0 -2px 0 0 var(--color-accent);
}
a.ui-stat.--active > small {
  color: var(--color-accent);
}

:root {
  --ui-icon-size: 36px;
}

.ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--ui-icon-size, 36px);
  height: var(--ui-icon-size, 36px);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  object-fit: contain;
}

.ui-icon > img {
  width: 100%;
  height: 100%;
}

.ui-icon.ui-color--empty {
  background: var(--surface-2);
  color: var(--text-muted);
}

.ui-icon.--attention {
  color: var(--color-attention);
}

.ui-icon.--success {
  color: var(--color-success);
}

.ui-icon.--warning {
  color: var(--color-warning);
}

.ui-icon.--danger {
  color: var(--color-danger);
}

.ui-input {
  --ui-input-padding: var(--spacing-sm);
  --ui-input-radius: var(--radius-md);
  --ui-input-border: 1.5px solid var(--color-button-border);
  --ui-input-font: inherit;
  --ui-input-size: 0.95em;
  --ui-input-weight: 400;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--ui-input-font);
  font-size: var(--ui-input-size);
  font-weight: var(--ui-input-weight);
  color: var(--color-input-text);
  padding: var(--ui-input-padding);
  border: var(--ui-input-border);
  border-radius: var(--ui-input-radius);
  background-color: var(--color-input-bg);
}
.ui-input::placeholder {
  opacity: 1;
}
.ui-input:disabled {
  background-color: var(--color-background-secondary);
  border-color: var(--color-border-primary);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}
.ui-input:invalid:not(:focus):not(:placeholder-shown), .ui-input[aria-invalid=true]:not(:focus) {
  border: 1px solid var(--color-danger);
  background-color: var(--color-danger-light);
}

.ui-input--textarea {
  min-height: 80px;
  resize: vertical;
}

.ui-input--select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 32px;
}

.ui-input.--small {
  width: auto;
  padding: var(--spacing-xs);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ui-item {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
}

.ui-item.--wrap {
  flex-wrap: wrap;
}

.ui-item.--align-start {
  align-items: flex-start;
}

.ui-item.--stretch {
  align-items: stretch;
}

.ui-item.--nogap {
  gap: 0;
}

.ui-item.--xs {
  gap: var(--spacing-xs);
}

.ui-item.--sm {
  gap: var(--spacing-sm);
}

.ui-item.--md {
  gap: var(--spacing-md);
}

.ui-item.--lg {
  gap: var(--spacing-lg);
}

.ui-item.--xl {
  gap: var(--spacing-xl);
}

.ui-item.--pad {
  padding: var(--spacing-sm) var(--spacing-md);
}

/* View inside lists */
.ui-list > .ui-item {
  border-top: 1px solid var(--border);
  padding: var(--spacing-sm) var(--spacing-md);
}

.ui-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ui-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  /* THE FILL MODE IS LOAD-BEARING. `backwards` applies the `from` keyframe
     during the stagger delay and then hands the element back to its own
     styles. `both` would additionally keep the `to` keyframe applied
     forever — and `transform: translateY(0)` is still a transform, so every
     row would stay a STACKING CONTEXT for the life of the page. Any
     absolutely-positioned popover inside a row (config-kit dropdown menus,
     for one) would then be trapped in it, and a later sibling card would
     paint straight over it. The end state is identical either way. */
}
.ui-list > * {
  animation: listItemIn 0.4s var(--easing-spring) backwards;
  animation-delay: 0.45s;
}
.ui-list > *:nth-child(1) {
  animation-delay: 0s;
}
.ui-list > *:nth-child(2) {
  animation-delay: 0.05s;
}
.ui-list > *:nth-child(3) {
  animation-delay: 0.1s;
}
.ui-list > *:nth-child(4) {
  animation-delay: 0.15s;
}
.ui-list > *:nth-child(5) {
  animation-delay: 0.2s;
}
.ui-list > *:nth-child(6) {
  animation-delay: 0.25s;
}
.ui-list > *:nth-child(7) {
  animation-delay: 0.3s;
}
.ui-list > *:nth-child(8) {
  animation-delay: 0.35s;
}
.ui-list > *:nth-child(9) {
  animation-delay: 0.4s;
}
.ui-list > *:nth-child(10) {
  animation-delay: 0.45s;
}

@keyframes listItemIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-list > * {
    animation: none;
  }
}
/* Document media components (MediaFiles, MediaImage, MediaVideo).
   Rendered by Nawi\Document\Components\Media* and mirrored by the visual
   editor faces in src/Nawi/Document/vue/…/blocks/Media*. */
/* MediaFiles — list mode stacks .ui-attachment rows; grid mode is a tight
   grid of card tiles (media on top, name underneath); carousel mode is a
   flickity strip of full-width cells. */
.ui-media-files.--list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.ui-media-files.--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--spacing-xs);
}

.ui-media-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s;
}

a.ui-media-card:hover {
  border-color: var(--color-accent);
}

.ui-media-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/3;
  font-size: 2rem;
  background: var(--color-surface);
  overflow: hidden;
}
.ui-media-card__media.--accent {
  background: var(--color-accent-light);
  color: var(--color-accent);
}
.ui-media-card__media.--success {
  background: var(--color-success-light);
  color: var(--color-success);
}
.ui-media-card__media.--warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}
.ui-media-card__media.--danger {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.ui-media-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ui-media-card__meta {
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  min-width: 0;
}

.ui-media-card__name {
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-media-card__sub {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
}

.ui-media-files.main-carousel .carousel-cell {
  width: 100%;
  margin-right: var(--spacing-sm);
}

.ui-media-cell-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* MediaImage — scales to the container, never overflows. */
.ui-media-image {
  display: block;
  margin: 0;
  width: 100%;
}

.ui-media-image__img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* MediaVideo — reuses .ui-video/.ui-video__frame for iframe embeds, but
   documents let the video span the full column (relax .ui-video's 32rem cap). */
.ui-media-video {
  display: block;
  margin: 0;
  width: 100%;
  max-width: 100%;
}

.ui-media-video__player {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt, var(--color-surface));
}

.ui-menu {
  position: relative;
  display: inline-block;
}
.ui-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: inherit;
  font-size: 1.375rem;
  list-style: none;
  user-select: none;
  transition: background 0.15s ease;
}
.ui-menu__trigger::-webkit-details-marker {
  display: none;
}
.ui-menu__trigger:hover, .ui-menu__trigger:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}
.ui-menu__list {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--spacing-xs));
  z-index: 200;
  min-width: 12rem;
  padding: var(--spacing-xs);
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ui-menu__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: 0.9375rem;
  white-space: nowrap;
  cursor: pointer;
  border: 0; /* in case of button.ui-menu__item */
}
.ui-menu__item .mdi {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
}
.ui-menu__item:hover, .ui-menu__item:focus-visible {
  background: var(--color-surface-2);
  outline: none;
}
.ui-menu__item.--danger {
  color: var(--color-danger, #e24b4a);
}
.ui-menu__item.--danger .mdi {
  color: inherit;
}

.ui-message {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: var(--spacing-md);
  padding: var(--spacing-sm);
  min-width: 0;
}
.ui-message__header,
.ui-message header {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}
.ui-message__header h1, .ui-message__header h2, .ui-message__header h3, .ui-message__header h4,
.ui-message header h1,
.ui-message header h2,
.ui-message header h3,
.ui-message header h4 {
  font-size: 15px;
  font-weight: 500;
}
.ui-message__header time,
.ui-message header time {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
}
.ui-message__preview {
  font-size: 13px;
  font-weight: 400;
}
.ui-message .ui-avatar {
  margin: var(--spacing-xs);
}

.ui-message.--unread {
  position: relative;
}

.ui-message.--truncate .ui-message__preview, .ui-message.--truncate p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* View inside lists */
.ui-list > .ui-message {
  border-bottom: 1px solid var(--color-border);
  padding: 0;
}

/**
 * ui-modal
 *
 * CSS-only modal using hidden checkbox for state.
 *
 * Usage:
 * <div class="ui-modal">
 *   <input type="checkbox" id="modal-id" class="ui-modal__toggle" />
 *   <label for="modal-id" class="ui-modal__backdrop"></label>
 *   <div class="ui-modal__dialog">
 *     <header class="ui-modal__header">
 *       <h3 class="ui-modal__title">Title</h3>
 *       <label for="modal-id" class="ui-modal__close"></label>
 *     </header>
 *     <section class="ui-modal__body">Content</section>
 *     <footer class="ui-modal__footer">Actions</footer>
 *   </div>
 * </div>
 */
:root {
  --ui-modal-width-sm: 400px;
  --ui-modal-width-md: 600px;
  --ui-modal-width-lg: 800px;
  --ui-modal-width-xl: 1000px;
  --ui-modal-max-height: 90vh;
}

/* Base */
.ui-modal {
  position: relative;
}

/* Hidden checkbox toggle */
.ui-modal__toggle, .ui-modal > input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Backdrop */
.ui-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .ui-modal__backdrop {
    transition: none;
  }
}

.ui-modal__toggle:checked ~ .ui-modal__backdrop, .ui-modal > input[type=checkbox]:checked ~ .ui-modal__backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Dialog */
.ui-modal__dialog, .ui-modal > div:not(.ui-modal__backdrop) {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: var(--_modal-tf, translate(-50%, -50%) scale(0.95));
  z-index: 1400;
  width: calc(100% - var(--spacing-lg) * 2);
  max-width: var(--ui-modal-width-md);
  max-height: var(--ui-modal-max-height);
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .ui-modal__dialog, .ui-modal > div:not(.ui-modal__backdrop) {
    transition: none;
  }
}

.ui-modal__toggle:checked ~ .ui-modal__dialog, .ui-modal > .ui-modal__toggle:checked ~ div:not(.ui-modal__backdrop), .ui-modal > input[type=checkbox]:checked ~ .ui-modal__dialog, .ui-modal > input[type=checkbox]:checked ~ div:not(.ui-modal__backdrop),
.ui-modal__toggle:checked ~ * .ui-modal__dialog,
.ui-modal__toggle:checked ~ .ui-modal > div:not(.ui-modal__backdrop),
.ui-modal > input[type=checkbox]:checked ~ * .ui-modal__dialog,
.ui-modal > input[type=checkbox]:checked ~ .ui-modal > div:not(.ui-modal__backdrop) {
  opacity: 1;
  pointer-events: auto;
  transform: var(--_modal-tf-open, translate(-50%, -50%) scale(1));
}

/* Header */
.ui-modal__header, .ui-modal > div:not(.ui-modal__backdrop) > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.ui-modal__title, .ui-modal > div:not(.ui-modal__backdrop) > header > h1, .ui-modal > div:not(.ui-modal__backdrop) > header > h2, .ui-modal > div:not(.ui-modal__backdrop) > header > h3, .ui-modal > div:not(.ui-modal__backdrop) > header > h4, .ui-modal > div:not(.ui-modal__backdrop) > header > h5, .ui-modal > div:not(.ui-modal__backdrop) > header > h6 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
}

/* Close button */
.ui-modal__close, .ui-modal > div:not(.ui-modal__backdrop) > header > label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s ease, background 0.2s ease;
}
.ui-modal__close::before, .ui-modal > div:not(.ui-modal__backdrop) > header > label::before {
  content: "×";
  font-size: 28px;
  line-height: 1;
  font-weight: 300;
}
.ui-modal__close:hover, .ui-modal > div:not(.ui-modal__backdrop) > header > label:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-2);
}
.ui-modal__close:focus-visible, .ui-modal > div:not(.ui-modal__backdrop) > header > label:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Body */
.ui-modal__body, .ui-modal > div:not(.ui-modal__backdrop) > section {
  padding: var(--spacing-lg);
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
  color: var(--color-text-primary);
  line-height: 1.6;
}

/* Footer */
.ui-modal__footer, .ui-modal > div:not(.ui-modal__backdrop) > footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* Size variants */
.ui-modal__dialog--sm {
  max-width: var(--ui-modal-width-sm);
}

.ui-modal__dialog--lg {
  max-width: var(--ui-modal-width-lg);
}

.ui-modal__dialog--xl {
  max-width: var(--ui-modal-width-xl);
}

.ui-modal__dialog--fullscreen {
  width: calc(100% - var(--spacing-xl) * 2);
  max-width: none;
  height: calc(100% - var(--spacing-xl) * 2);
  max-height: none;
}
@media (max-width: 640px) {
  .ui-modal__dialog--fullscreen {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

/* Panel sheet variants — --bottom / --top */
.ui-modal--bottom {
  --_modal-tf: translateY(100%);
  --_modal-tf-open: translateY(0);
}
.ui-modal--bottom > .ui-modal__dialog,
.ui-modal--bottom > div:not(.ui-modal__backdrop) {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.ui-modal--bottom > .ui-modal__dialog::before,
.ui-modal--bottom > div:not(.ui-modal__backdrop)::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  background: var(--color-border);
  border-radius: 99px;
  margin: 0 auto var(--spacing-md);
  flex-shrink: 0;
}

.ui-modal--top {
  --_modal-tf: translateY(-100%);
  --_modal-tf-open: translateY(0);
}
.ui-modal--top > .ui-modal__dialog,
.ui-modal--top > div:not(.ui-modal__backdrop) {
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding-top: env(safe-area-inset-top);
}
.ui-modal--top > .ui-modal__dialog::after,
.ui-modal--top > div:not(.ui-modal__backdrop)::after {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  background: var(--color-border);
  border-radius: 99px;
  margin: var(--spacing-md) auto 0;
  flex-shrink: 0;
}

/* Type variants */
.ui-modal__dialog--alert .ui-modal__body, .ui-modal__dialog--alert .ui-modal > div:not(.ui-modal__backdrop) > section {
  text-align: center;
}
.ui-modal__dialog--alert .ui-modal__footer, .ui-modal__dialog--alert .ui-modal > div:not(.ui-modal__backdrop) > footer {
  justify-content: center;
}

.ui-modal__dialog--confirm .ui-modal__footer, .ui-modal__dialog--confirm .ui-modal > div:not(.ui-modal__backdrop) > footer {
  justify-content: space-between;
}

.ui-modal__dialog--danger .ui-modal__header, .ui-modal__dialog--danger .ui-modal > div:not(.ui-modal__backdrop) > header {
  border-bottom-color: var(--color-danger-light);
}
.ui-modal__dialog--danger .ui-modal__title, .ui-modal__dialog--danger .ui-modal > div:not(.ui-modal__backdrop) > header > h1, .ui-modal__dialog--danger .ui-modal > div:not(.ui-modal__backdrop) > header > h2, .ui-modal__dialog--danger .ui-modal > div:not(.ui-modal__backdrop) > header > h3, .ui-modal__dialog--danger .ui-modal > div:not(.ui-modal__backdrop) > header > h4, .ui-modal__dialog--danger .ui-modal > div:not(.ui-modal__backdrop) > header > h5, .ui-modal__dialog--danger .ui-modal > div:not(.ui-modal__backdrop) > header > h6 {
  color: var(--color-danger);
}
.ui-modal__dialog--danger .ui-modal__footer, .ui-modal__dialog--danger .ui-modal > div:not(.ui-modal__backdrop) > footer {
  border-top-color: var(--color-danger);
}

/* Responsive */
@media (max-width: 640px) {
  .ui-modal__header, .ui-modal > div:not(.ui-modal__backdrop) > header,
  .ui-modal__body,
  .ui-modal > div:not(.ui-modal__backdrop) > section,
  .ui-modal__footer,
  .ui-modal > div:not(.ui-modal__backdrop) > footer {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }
  .ui-modal__footer, .ui-modal > div:not(.ui-modal__backdrop) > footer {
    flex-direction: column-reverse;
  }
  .ui-modal__footer > button, .ui-modal > div:not(.ui-modal__backdrop) > footer > button,
  .ui-modal__footer > .ui-button,
  .ui-modal > div:not(.ui-modal__backdrop) > footer > .ui-button {
    width: 100%;
  }
  .ui-modal__dialog--lg,
  .ui-modal__dialog--xl {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }
}
/* Scroll lock */
body:has(.ui-modal__toggle:checked, .ui-modal > input[type=checkbox]:checked) {
  overflow: hidden;
}

/* Glue pattern — simplified HTML */
/* ───────────────────────── Block 1: host chip row ───────────────────── */
.ui-contacts-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 36px;
}
.ui-contacts-picker__placeholder {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.ui-contacts-picker__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 6px 5px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  font-size: 13px;
}
.ui-contacts-picker__chip.--group {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
  padding-inline-start: 8px;
}
.ui-contacts-picker__chip-icon {
  flex: none;
  color: var(--color-accent);
  font-size: 15px;
}
.ui-contacts-picker__chip-count {
  flex: none;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-text-over-black);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.ui-contacts-picker__chip-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-contacts-picker__chip-remove {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: 0;
  padding: 0;
  background: none;
  border-radius: 50%;
  color: var(--color-text-muted);
  font: inherit;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.ui-contacts-picker__chip-remove:hover {
  background: var(--color-surface-2);
  color: var(--color-danger);
}
.ui-contacts-picker__add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border-strong);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.14s, color 0.14s, background 0.14s;
}
.ui-contacts-picker__add:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-light);
}

/* ─────────────────────── Block 2: picker modal ─────────────────────── */
.ui-contacts-picker-modal {
  --ui-modal-width-md: 640px;
  height: min(900px, var(--ui-modal-max-height));
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ui-contacts-picker-modal__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-sm);
}
.ui-contacts-picker-modal__head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.ui-contacts-picker-modal__period {
  flex: none;
  margin-left: auto;
  max-width: 15em;
  font-size: 0.85em;
  padding: 6px 10px;
}
.ui-contacts-picker-modal__period[hidden] {
  display: none;
}
.ui-contacts-picker-modal__search {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 var(--spacing-lg) var(--spacing-sm);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.ui-contacts-picker-modal__search:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}
.ui-contacts-picker-modal__search > i {
  flex: none;
  color: var(--color-text-muted);
}
.ui-contacts-picker-modal__search input {
  width: 100%;
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  color: var(--color-text-primary);
}
.ui-contacts-picker-modal__rail {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  padding: 2px var(--spacing-lg);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
.ui-contacts-picker-modal__rail::-webkit-scrollbar {
  display: none;
}
.ui-contacts-picker-modal__rail > * {
  scroll-snap-align: start;
}
.ui-contacts-picker-modal__filters {
  flex: none;
  margin-bottom: var(--spacing-sm);
}
.ui-contacts-picker-modal__filters[hidden] {
  display: none;
}
.ui-contacts-picker-modal__source {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 5px;
  border-radius: var(--radius-full, 999px);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.ui-contacts-picker-modal__source:active {
  transform: scale(0.97);
}
.ui-contacts-picker-modal__source:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.ui-contacts-picker-modal__source.--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-over-black);
}
.ui-contacts-picker-modal__source.--active .ui-contacts-picker-modal__mini-avatar,
.ui-contacts-picker-modal__source.--active .ui-contacts-picker-modal__cluster-more {
  box-shadow: 0 0 0 1.5px var(--color-text-over-black);
}
.ui-contacts-picker-modal__source-icon {
  position: relative;
  flex: none;
  display: inline-flex;
}
.ui-contacts-picker-modal__source-icon.--loading::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid transparent;
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: ui-contacts-picker-spin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ui-contacts-picker-modal__source-icon.--loading::after {
    animation: none;
  }
}
.ui-contacts-picker-modal__source-icon.--error::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-warning);
  box-shadow: 0 0 0 1.5px var(--color-surface);
}
.ui-contacts-picker-modal__source-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9em;
}
.ui-contacts-picker-modal__source-cluster {
  flex: none;
  display: inline-flex;
  align-items: center;
}
.ui-contacts-picker-modal__cluster-avatar {
  box-shadow: 0 0 0 1.5px var(--color-surface);
}
.ui-contacts-picker-modal__cluster-avatar:not(:first-child) {
  margin-left: -7px;
}
.ui-contacts-picker-modal__cluster-more {
  padding: 0 5px;
  box-shadow: none !important;
  font-size: 9px;
  font-weight: 700;
  border: 0;
}
.ui-contacts-picker-modal__mini-avatar {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-accent-light);
  color: var(--color-accent);
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
}
.ui-contacts-picker-modal__mini-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ui-contacts-picker-modal__quick {
  flex: none;
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-sm);
  padding-right: var(--spacing-lg);
}
.ui-contacts-picker-modal__quick[hidden] {
  display: none;
}
.ui-contacts-picker-modal__quick-pills {
  flex: 1;
  min-width: 0;
  padding-right: var(--spacing-sm);
}
.ui-contacts-picker-modal__quick-pill {
  flex: none;
  gap: 6px;
  padding: 3px 10px;
  min-height: 26px;
  font-size: 12px;
  border-radius: var(--radius-full, 999px);
}
.ui-contacts-picker-modal__quick-pill:active {
  transform: scale(0.97);
}
.ui-contacts-picker-modal__quick-pill.--partial {
  background: var(--color-accent-light);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.ui-contacts-picker-modal__fold-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 28px;
  border: 0;
  border-left: 1px solid var(--color-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0;
  background: none;
  color: var(--color-text-muted);
  font-size: 17px;
  cursor: pointer;
  transition: color 0.14s;
}
.ui-contacts-picker-modal__fold-toggle:hover {
  color: var(--color-accent);
}
.ui-contacts-picker-modal__fold-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.ui-contacts-picker-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.ui-contacts-picker-modal__segment {
  margin: 0 7px;
  margin-bottom: var(--spacing-md);
}
.ui-contacts-picker-modal__segment-title {
  position: sticky;
  top: -1px;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  margin: 0 0 2px;
  padding: 11px 8px 5px;
}
.ui-contacts-picker-modal__segment-title.--stuck {
  box-shadow: 0 1px 0 var(--color-border);
}
.ui-contacts-picker-modal__node {
  margin: 1px 0;
  padding: var(--spacing-xs) var(--spacing-sm);
}
.ui-contacts-picker-modal__node.--open > .ui-contacts-picker-modal__folder-row .ui-contacts-picker-modal__caret {
  transform: rotate(90deg);
}
.ui-contacts-picker-modal__node.--open > .ui-contacts-picker-modal__children-wrap {
  grid-template-rows: 1fr;
}
.ui-contacts-picker-modal__node.--open > .ui-contacts-picker-modal__children-wrap > .ui-contacts-picker-modal__children {
  visibility: visible;
  transition-delay: 0s;
}
.ui-contacts-picker-modal__children-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
  .ui-contacts-picker-modal__children-wrap {
    transition: none;
  }
}
.ui-contacts-picker-modal__folder-row {
  display: flex;
  align-items: center;
}
.ui-contacts-picker-modal__folder-row > .ui-contacts-picker-modal__folder {
  flex: 1;
  min-width: 0;
}
.ui-contacts-picker-modal__folder {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s;
}
.ui-contacts-picker-modal__folder:hover {
  background: var(--color-surface-2);
}
.ui-contacts-picker-modal__folder:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.ui-contacts-picker-modal__caret {
  flex: none;
  color: var(--color-text-muted);
  transition: transform 0.15s;
}
.ui-contacts-picker-modal__folder-name {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-contacts-picker-modal__folder-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.ui-contacts-picker-modal__folder-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-contacts-picker-modal__count {
  flex: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.ui-contacts-picker-modal__group-check {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin: 0 10px 0 6px;
  padding: 0;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 50%;
  background: none;
  color: transparent;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ui-contacts-picker-modal__group-check .mdi {
  font-size: 12px;
}
.ui-contacts-picker-modal__group-check::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}
.ui-contacts-picker-modal__group-check:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.ui-contacts-picker-modal__group-check.--on {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-over-black);
}
.ui-contacts-picker-modal__group-check.--mixed {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.ui-contacts-picker-modal__children {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.18s;
  margin-left: 18px;
  padding-left: var(--spacing-sm);
  border-left: 1px solid var(--color-border);
}
@media (prefers-reduced-motion: reduce) {
  .ui-contacts-picker-modal__children {
    transition: none;
  }
}
.ui-contacts-picker-modal__person {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-xs);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s;
}
.ui-contacts-picker-modal__person:hover {
  background: var(--color-surface-2);
}
.ui-contacts-picker-modal__person:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.ui-contacts-picker-modal__person.--selected {
  background: var(--color-accent-light);
}
.ui-contacts-picker-modal__person.--relative {
  font-size: 13px;
}
.ui-contacts-picker-modal__person.--flash {
  animation: ui-contacts-picker-flash 0.4s ease-out;
}
.ui-contacts-picker-modal__person.--flash .ui-contacts-picker-modal__radio {
  animation: ui-contacts-picker-pop 0.16s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .ui-contacts-picker-modal__person.--flash {
    animation: none;
  }
  .ui-contacts-picker-modal__person.--flash .ui-contacts-picker-modal__radio {
    animation: none;
  }
}
.ui-contacts-picker-modal__person-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.ui-contacts-picker-modal__person-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-contacts-picker-modal__person.--relative .ui-contacts-picker-modal__person-name {
  font-size: 13px;
}
.ui-contacts-picker-modal__person-role {
  font-size: 11.5px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-contacts-picker-modal__person-lines {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ui-contacts-picker-modal__person-line {
  display: flex;
  align-items: center;
  min-width: 0;
}
.ui-contacts-picker-modal__person-line > .ui-contacts-picker-modal__person-role {
  min-width: 0;
}
.ui-contacts-picker-modal__person-line.--more {
  font-size: 11px;
  color: var(--color-text-muted);
}
.ui-contacts-picker-modal__origin {
  flex: none;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  font-size: 11px;
  color: var(--color-text-muted);
}
.ui-contacts-picker-modal__origin-avatar {
  width: 15px;
  height: 15px;
  font-size: 7px;
  box-shadow: 0 0 0 1.5px var(--color-surface);
}
.ui-contacts-picker-modal__origin-avatar:not(:first-child) {
  margin-left: -6px;
}
.ui-contacts-picker-modal__origin-avatar.--dimmed {
  filter: grayscale(1);
  opacity: 0.4;
}
.ui-contacts-picker-modal__origin-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 2px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--color-surface-2);
  box-shadow: 0 0 0 1.5px var(--color-surface);
  font-size: 8px;
  font-weight: 700;
  color: var(--color-text-secondary);
}
.ui-contacts-picker-modal__origin-name {
  margin-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11em;
}
.ui-contacts-picker-modal__person-rels {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
  margin-top: 1px;
}
.ui-contacts-picker-modal__person-rel {
  font-size: 10.5px;
  line-height: 1.5;
  padding: 0 7px;
  border-radius: var(--radius-full, 999px);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ui-contacts-picker-modal__avatar {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-accent-light);
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.ui-contacts-picker-modal__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ui-contacts-picker-modal__avatar.--sm {
  width: 28px;
  height: 28px;
  font-size: 9.5px;
}
.ui-contacts-picker-modal__avatar.--selected {
  background: var(--color-accent);
  color: var(--color-text-over-black);
}
.ui-contacts-picker-modal__avatar.--selected img {
  display: none;
}
.ui-contacts-picker-modal__radio {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: auto;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 50%;
  color: transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ui-contacts-picker-modal__radio .mdi {
  font-size: 12px;
}
.ui-contacts-picker-modal__radio.--on {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-over-black);
}
.ui-contacts-picker-modal__gsel {
  position: relative;
  flex: none;
  display: inline-flex;
  margin: 0 6px 0 6px;
}
.ui-contacts-picker-modal__gsel-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 34px;
  height: 22px;
  padding: 0 3px 0 6px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.ui-contacts-picker-modal__gsel-btn .mdi {
  font-size: 13px;
}
.ui-contacts-picker-modal__gsel-btn .mdi-menu-down {
  font-size: 15px;
  margin-left: -2px;
}
.ui-contacts-picker-modal__gsel-btn:hover {
  border-color: var(--color-accent);
}
.ui-contacts-picker-modal__gsel-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.ui-contacts-picker-modal__gsel-btn.--on {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-over-black);
}
.ui-contacts-picker-modal__gsel-btn.--mixed {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.ui-contacts-picker-modal__gsel-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  padding: var(--spacing-xs);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.ui-contacts-picker-modal__gsel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  font-size: 12.5px;
  color: var(--color-text-primary);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ui-contacts-picker-modal__gsel-item:hover {
  background: var(--color-surface-2);
}
.ui-contacts-picker-modal__gsel-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 50%;
  color: transparent;
}
.ui-contacts-picker-modal__gsel-check .mdi {
  font-size: 11px;
}
.ui-contacts-picker-modal__gsel-check.--on {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-over-black);
}
.ui-contacts-picker-modal__gsel-check.--mixed {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.ui-contacts-picker-modal__gsel-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-contacts-picker-modal__gsel-count {
  flex: none;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.ui-contacts-picker-modal__gsel-divider {
  height: 1px;
  margin: 4px calc(-1 * var(--spacing-xs));
  background: var(--color-border);
}
.ui-contacts-picker-modal__empty {
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13.5px;
}
.ui-contacts-picker-modal__escape {
  display: block;
  margin: var(--spacing-md) auto 0;
}
.ui-contacts-picker-modal__loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: var(--color-text-muted);
  font-size: 12.5px;
}
.ui-contacts-picker-modal__spinner {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: ui-contacts-picker-spin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ui-contacts-picker-modal__spinner {
    animation: none;
  }
}
.ui-contacts-picker-modal__notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--spacing-xs) 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--color-warning-light);
  color: var(--color-text-secondary);
  font-size: 12.5px;
}
.ui-contacts-picker-modal__notice > .mdi {
  flex: none;
  color: var(--color-warning);
}
.ui-contacts-picker-modal__notice > span {
  flex: 1;
  min-width: 0;
}
.ui-contacts-picker-modal__notice-retry {
  flex: none;
  border: 0;
  background: none;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.ui-contacts-picker-modal__notice-retry:hover {
  background: var(--color-accent-light);
}
.ui-contacts-picker-modal__skeleton {
  padding: var(--spacing-sm) 8px;
}
.ui-contacts-picker-modal__skeleton-caption {
  width: 90px;
  height: 10px;
  margin: 12px 0 10px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}
.ui-contacts-picker-modal__skeleton-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
}
.ui-contacts-picker-modal__skeleton-disc {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-surface-2);
}
.ui-contacts-picker-modal__skeleton-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ui-contacts-picker-modal__skeleton-lines > span {
  height: 9px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}
.ui-contacts-picker-modal__skeleton-lines > span:first-child {
  width: 55%;
}
.ui-contacts-picker-modal__skeleton-lines > span:last-child {
  width: 35%;
}
.ui-contacts-picker-modal__skeleton-caption, .ui-contacts-picker-modal__skeleton-disc, .ui-contacts-picker-modal__skeleton-lines > span {
  position: relative;
  overflow: hidden;
}
.ui-contacts-picker-modal__skeleton-caption::after, .ui-contacts-picker-modal__skeleton-disc::after, .ui-contacts-picker-modal__skeleton-lines > span::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--color-surface), transparent);
  opacity: 0.7;
  animation: ui-contacts-picker-shimmer 1.2s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ui-contacts-picker-modal__skeleton-caption::after, .ui-contacts-picker-modal__skeleton-disc::after, .ui-contacts-picker-modal__skeleton-lines > span::after {
    animation: none;
  }
}
.ui-contacts-picker-modal__foot {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}
.ui-contacts-picker-modal__chips-row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}
.ui-contacts-picker-modal__chips {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  max-height: 72px;
  overflow-y: auto;
}
.ui-contacts-picker-modal__chips-empty {
  font-size: 12.5px;
  color: var(--color-text-muted);
}
.ui-contacts-picker-modal__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 6px 3px 10px;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  font-size: 12.5px;
}
.ui-contacts-picker-modal__chip.--group {
  background: var(--color-accent-light);
  padding-inline-start: 7px;
}
.ui-contacts-picker-modal__chip-icon {
  flex: none;
  color: var(--color-accent);
  font-size: 13px;
}
.ui-contacts-picker-modal__chip-count {
  flex: none;
  min-width: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-text-over-black);
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
}
.ui-contacts-picker-modal__chip-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-contacts-picker-modal__chip-remove {
  display: grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  border: 0;
  padding: 0;
  background: none;
  border-radius: 50%;
  color: var(--color-text-muted);
  font: inherit;
  cursor: pointer;
}
.ui-contacts-picker-modal__chip-remove:hover {
  color: var(--color-danger);
}
.ui-contacts-picker-modal__clear-all {
  flex: none;
  border: 0;
  background: none;
  padding: 3px 4px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.14s;
}
.ui-contacts-picker-modal__clear-all:hover {
  color: var(--color-danger);
}
.ui-contacts-picker-modal__clear-all[hidden] {
  display: none;
}
.ui-contacts-picker-modal__actions .ui-button {
  width: 100%;
}
.ui-contacts-picker-modal__sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .ui-contacts-picker-root {
    --_modal-tf: translateY(100%);
    --_modal-tf-open: translateY(0);
  }
  .ui-contacts-picker-root > .ui-contacts-picker-modal {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: min(88vh, var(--ui-modal-max-height)) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  .ui-contacts-picker-root > .ui-contacts-picker-modal::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: var(--color-border);
    border-radius: 99px;
    margin: var(--spacing-sm) auto 0;
    flex-shrink: 0;
  }
}

@media (pointer: coarse) {
  .ui-contacts-picker-modal__source {
    min-height: 32px;
  }
  .ui-contacts-picker-modal__quick-pill {
    min-height: 30px;
  }
  .ui-contacts-picker-modal__fold-toggle {
    height: 32px;
  }
  .ui-contacts-picker-modal__group-check::before {
    inset: -11px;
  }
  .ui-contacts-picker-modal__person,
  .ui-contacts-picker-modal__folder {
    padding-top: 9px;
    padding-bottom: 9px;
  }
}
@media (max-width: 360px) {
  .ui-contacts-picker-modal__source.--all .ui-contacts-picker-modal__source-name {
    display: none;
  }
}
@keyframes ui-contacts-picker-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ui-contacts-picker-shimmer {
  to {
    transform: translateX(100%);
  }
}
@keyframes ui-contacts-picker-flash {
  0% {
    box-shadow: inset 0 0 0 2px var(--color-accent);
  }
  100% {
    box-shadow: inset 0 0 0 2px transparent;
  }
}
@keyframes ui-contacts-picker-pop {
  0% {
    transform: scale(0.7);
  }
  60% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}
/* Needs priority over modal.  Declared last. */
.ui-nav {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border-radius: 8px;
  background: var(--color-bg-soft, #f2f3f5);
}

.ui-nav__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text-muted, #777);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.ui-nav__item:hover {
  background: var(--color-surface, #fff);
  color: var(--color-text, #23252a);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.12));
}
.ui-nav__item:active {
  transform: translateY(0.5px);
}
.ui-nav__item:focus-visible {
  outline: 2px solid var(--color-accent, #4c6fff);
  outline-offset: 1px;
}
.ui-nav__item:is(.--active, [aria-selected=true]) {
  background: var(--color-surface, #fff);
  color: var(--color-text, #23252a);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.12));
}
.ui-nav__item.--icon {
  padding: 4px 6px;
}
.ui-nav__item .mdi {
  font-size: 16px;
  line-height: 1;
}

.ui-nav__sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 3px;
  background: var(--color-border, #e0e2e6);
}

/*
 * .ui-offlinebar — the connectivity strip driven by public/js/connectivity.js.
 *
 * Floats at the BOTTOM, just above #layout-bottombar. The obvious placement is
 * the top, and that was the first attempt — but #layout-toolbar is sticky at
 * top: 0 (layout.css) and carries the back button, so a fixed strip there
 * covered the one control a stranded user needs. Pushing the toolbar down
 * instead would mean teaching three different layouts (main, simple, and the
 * legacy v3 with its own #phidias_container chrome) about a variable-height
 * banner. The bottom strip is correct in all three without touching any of them.
 *
 * Overlaid rather than in the flow, so appearing mid-session cannot reflow a
 * page the user is reading. Inset and rounded to match the bottombar and toast
 * it shares that edge with.
 *
 * There is no .ui-banner/.ui-alert in the system — the house idiom for a notice
 * is .ui-card.--warning — but that is a card in a column, not a viewport-fixed
 * strip, so this earns its own thin class.
 */
.ui-offlinebar {
  position: fixed;
  /* Clears #layout-bottombar, which sits at bottom: 4px + safe-area and is
     roughly 60px tall. Below it in z-order too, so nav always wins a collision. */
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  left: 8px;
  right: 8px;
  z-index: 190;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-warning-light);
  color: var(--color-text-primary);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.12));
  font-size: 0.875rem;
  line-height: 1.3;
}
.ui-offlinebar[hidden] {
  display: none;
}
.ui-offlinebar__icon {
  flex: 0 0 auto;
  font-size: 1.15em;
  color: var(--color-warning);
}
.ui-offlinebar__text {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
}
.ui-offlinebar__action {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--color-warning);
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
}
.ui-offlinebar__action:hover {
  background: var(--color-bg-darken);
}
.ui-offlinebar__action[hidden] {
  display: none;
}
.ui-offlinebar {
  /* Probing. Deliberately quieter than the offline state: something is being
     done about it, so it should read as progress rather than as a warning. */
}
.ui-offlinebar.--reconnecting {
  background: var(--color-bg-inset);
  border-color: var(--color-border);
}
.ui-offlinebar.--reconnecting .ui-offlinebar__icon {
  color: var(--color-text-secondary);
  animation: ui-offlinebar-pulse 1.4s ease-in-out infinite;
}
.ui-offlinebar.--reconnecting .ui-offlinebar__text {
  color: var(--color-text-secondary);
  font-weight: 400;
}

/*
 * The bar and .ui-toast are both pinned to the same bottom offset, so whichever
 * appeared second would land on the other. connectivity.js sets
 * .has-offlinebar on <html> for exactly this. Lives here rather than in
 * toast.scss so the whole collision is described in one place.
 */
:root.has-offlinebar .ui-toast {
  bottom: calc(132px + env(safe-area-inset-bottom, 0px));
}

/*
 * Desktop: #layout-bottombar becomes a left sidebar, so the bottom edge is free
 * — but a full-bleed strip beside a max-width column reads as a mistake. Center
 * it like .ui-toast instead, and drop the bottombar clearance it no longer needs.
 */
@media (min-width: 1024px) {
  .ui-offlinebar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(92vw, 560px);
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  :root.has-offlinebar .ui-toast {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}
@keyframes ui-offlinebar-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-offlinebar.--reconnecting .ui-offlinebar__icon {
    animation: none;
  }
}
/* The signer-facing pages, all four of them:

     /nawi/esign/sign        signing from a session
     /nawi/esign/sign/verify the code step
     /nawi/esign/link        signing from an emailed invitation
     /nawi/esign/link/done   the invited signer's receipt, after signing
     /nawi/esign/evidence    the record, once there is one

   ONE SHELL FOR ALL OF THEM. Somebody signing by invitation is doing the same
   thing as somebody signing from their inbox, and the page they are asked to
   trust must not look like a different product depending on how they arrived.

   A signing page is not a form page. The signer has exactly one decision to
   make, and everything else on screen exists to let them make it with
   confidence: WHAT am I signing, WHO does it think I am, and HOW do I confirm.
   So the page is two columns on a desk — the document large on the left, the
   decision pinned on the right — and on a phone it stops pretending an
   embedded PDF is readable and hands over links instead.

   Deliberately NOT `.layout-wrapper-narrow`. A narrow column makes an embedded
   document unreadable, which pushes the signer to open it in a tab and lose
   the page they were on.
*/
.ui-esign {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* ── top bar ────────────────────────────────────────────────────────────── */
/* Sticky, because the document scrolls under it and the signer should never
   lose the title of the thing they are about to be bound by. */
.ui-esign__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.ui-esign__back {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--font-size-sm);
}
.ui-esign__back:hover {
  color: var(--color-text);
}

.ui-esign__heading {
  flex: 1;
  min-width: 0;
}

.ui-esign__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The content hash, shown rather than hidden: a signer can check that what is
   on screen is what the record will say they signed. Small, monospaced, and
   never competing with the title. */
.ui-esign__fingerprint {
  display: block;
  color: var(--color-text-muted);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 11px);
}

/* ── body ───────────────────────────────────────────────────────────────── */
.ui-esign__body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  align-items: start;
}

@media (min-width: 900px) {
  .ui-esign__body {
    grid-template-columns: minmax(0, 1fr) 380px;
    padding: var(--spacing-lg);
  }
}
/* The embed. HIDDEN BELOW 900px on purpose: a PDF rendered into a phone-width
   iframe is a wall of unreadable grey, and offering it anyway teaches signers
   that the document cannot be read. Small screens get links instead. */
.ui-esign__viewer {
  display: none;
}

@media (min-width: 900px) {
  .ui-esign__viewer {
    display: block;
    position: sticky;
    top: calc(var(--spacing-md) + 52px);
  }
  .ui-esign__frame {
    width: 100%;
    height: calc(100vh - 160px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
  }
}
/* ── decision panel ─────────────────────────────────────────────────────── */
.ui-esign__panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  min-width: 0;
}

.ui-esign__who {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
}

.ui-esign__who-name {
  font-weight: var(--font-weight-medium);
}

.ui-esign__who-role {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* The sentence the signer is agreeing to. Given real weight — it is the point
   of the page, not fine print. */
.ui-esign__statement {
  margin: 0;
  padding: var(--spacing-md);
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-light);
  border-radius: var(--radius-sm);
  line-height: 1.5;
}

/* One button per channel, full width and stacked: the choice is "where does my
   code go", and side-by-side buttons make that read as a toolbar instead. */
.ui-esign__channels {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.ui-esign__channel {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
}
.ui-esign__channel .mdi {
  font-size: 20px;
  flex: none;
}

.ui-esign__channel-target {
  display: block;
  font-size: var(--font-size-sm);
  opacity: 0.8;
}

/* A channel we cannot vouch for. Shown rather than hidden, so a signer whose
   only number is an unconfirmed legacy record learns why it is not offered. */
.ui-esign__channel.--blocked {
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
  border: 1px dashed var(--color-border-strong);
  cursor: not-allowed;
}

/* The document's own actions - one `.ui-button-split` (open, plus download
   where a download exists).

   SHOWN AT EVERY WIDTH, unlike the embed. These used to be mobile-only, on the
   theory that the desktop equivalent was the iframe itself. That was wrong in
   both directions: an embedded preview is not a copy, and a signer who has
   just bound themselves to a contract wants the file, not a scroll view of it.
   The embed answers "what am I signing"; these answer "let me keep it". */
.ui-esign__doc-links {
  display: block;
  padding: var(--spacing-md);
}

/* A second, quieter action under the primary one - the JSON record on the
   evidence page, an open-in-new-tab where the split button cannot carry it. */
.ui-esign__doc-aside {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  padding: 0 var(--spacing-md) var(--spacing-md);
}

/* Decline is deliberately quiet: a real option, never a competing call to
   action. Closed by default, plain text summary, no button styling. */
.ui-esign__decline {
  padding: var(--spacing-md);
}
.ui-esign__decline > summary {
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  list-style: none;
}
.ui-esign__decline > summary::-webkit-details-marker {
  display: none;
}
.ui-esign__decline > summary::before {
  content: "⌄ ";
}
.ui-esign__decline[open] > summary {
  margin-bottom: var(--spacing-sm);
}

/* ── the code step ──────────────────────────────────────────────────────── */
/* Big, spaced, numeric. A six-digit code typed into a normal text input is the
   step people mistype most. */
.ui-esign__code {
  width: 100%;
  text-align: center;
  font-size: 28px;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.35em;
  text-indent: 0.35em; /* re-centres despite the trailing letter-space */
  padding: var(--spacing-sm);
}

.ui-esign__sent-to {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ── outcome ────────────────────────────────────────────────────────────── */
/* Resolved slot, or a finished signature: one calm centred statement rather
   than a form the signer can no longer use. */
.ui-esign__outcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-md);
  text-align: center;
}

.ui-esign__outcome-icon {
  font-size: 48px;
  line-height: 1;
  color: var(--color-success);
}

.ui-esign__outcome.--warning .ui-esign__outcome-icon {
  color: var(--color-warning);
}

.ui-esign__outcome.--danger .ui-esign__outcome-icon {
  color: var(--color-danger);
}

/* ── the record half ────────────────────────────────────────────────────── */
/* `/nawi/esign/evidence` is the one page in this family that carries more than
   a decision: under the shell sits the full forensic record (every hash, every
   auth trace, every proof-path assertion). It stays FULL WIDTH and BELOW, so
   the signed copy is what the page opens with and the record is what the page
   contains - rather than the other way round, which is what it used to be. */
.ui-esign__record {
  padding: 0 var(--spacing-md) var(--spacing-lg);
}

@media (min-width: 900px) {
  .ui-esign__record {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
  }
}
/* The status statement in the decision panel: seal, what happened, the counts.
   Same shape as `__outcome` but left-aligned, because it sits above actions
   rather than replacing them. */
.ui-esign__status {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
}

.ui-esign__status-icon {
  flex: none;
  font-size: 32px;
  line-height: 1;
  color: var(--color-text-muted);
}

.ui-esign__status.--complete .ui-esign__status-icon {
  color: var(--color-success);
}

.ui-esign__status.--warning .ui-esign__status-icon {
  color: var(--color-warning);
}

.ui-esign__status-text {
  min-width: 0;
}

.ui-esign__status-meta {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ── inbox: tab counts ──────────────────────────────────────────────────── */
.ui-siglist__views {
  margin-bottom: var(--spacing-md);
}

.ui-siglist__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--color-bg-soft);
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
}

.ui-tab.--active .ui-siglist__count {
  background: rgba(255, 255, 255, 0.25);
}

.ui-siglist__note {
  margin: var(--spacing-sm) var(--spacing-sm) 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.ui-siglist__caught-up > i.mdi {
  color: var(--color-success);
  opacity: 1;
}

.ui-siglist__caught-up .ui-button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* ── inbox: the two list containers ─────────────────────────────────────── */
.ui-siglist__cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.ui-siglist__rows > .ui-siglist-row + .ui-siglist-row {
  border-top: 1px solid var(--color-divider, var(--color-border));
}

/* ── inbox: awaiting (card flavor) ──────────────────────────────────────── */
.ui-siglist-card {
  position: relative;
  display: block;
  transition: transform 0.1s var(--easing-smooth, ease), box-shadow 0.15s var(--easing-smooth, ease);
}

.ui-siglist-card:hover {
  box-shadow: var(--shadow-md, var(--shadow-sm));
}

.ui-siglist-card:active {
  transform: scale(0.995);
}

.ui-siglist-card.--overdue::before,
.ui-siglist-card.--today::before,
.ui-siglist-card.--soon::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
}

.ui-siglist-card.--overdue::before {
  background: var(--color-danger);
}

.ui-siglist-card.--today::before,
.ui-siglist-card.--soon::before {
  background: var(--color-warning);
}

.ui-siglist-card__due {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.ui-siglist-card__due i.mdi {
  font-size: 1rem;
}

.ui-siglist-card__due.--overdue {
  color: var(--color-danger);
}

.ui-siglist-card__due.--today,
.ui-siglist-card__due.--soon {
  color: var(--color-warning);
}

.ui-siglist-card__due.--none {
  color: var(--color-text-muted);
}

.ui-siglist-card__avatar,
.ui-siglist-card__glyph {
  flex: none;
  width: 40px;
  height: 40px;
  align-self: flex-start;
}

.ui-siglist-card__avatar {
  border-radius: var(--radius-full);
  object-fit: cover;
}

.ui-siglist-card__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
}
.ui-siglist-card__glyph i.mdi {
  font-size: 1.25rem;
}

.ui-siglist-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.ui-siglist-card__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 1.25;
  word-break: break-word;
}

.ui-siglist-card__tags {
  gap: 0.35rem;
  margin: 0;
}

.ui-siglist-card__file {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-siglist-card__go {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  background: var(--color-accent-light);
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* ── inbox: in progress / done (list flavor) ────────────────────────────── */
.ui-siglist-row {
  position: relative;
}

.ui-siglist-row__note {
  margin: 0.2rem 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  white-space: normal;
}

.ui-siglist-row__note.--warn {
  color: var(--color-warning);
}

.ui-siglist-row__tags {
  gap: 0.35rem;
  margin: 0.25rem 0 0;
}

.ui-siglist-row__subject {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-width: 0;
}

.ui-siglist-row__avatar {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

/* ── evidence record ────────────────────────────────────────────────────── */
.ui-evidence {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  max-width: 820px;
  margin: 0 auto;
}

.ui-evidence code {
  overflow-wrap: anywhere;
  font-size: var(--font-size-sm);
}

.ui-evidence__section-title {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.ui-evidence__row {
  padding: var(--spacing-sm) var(--spacing-md);
}

.ui-evidence__row + .ui-evidence__row {
  border-top: 1px solid var(--color-border);
}

.ui-evidence__label {
  display: block;
  margin-bottom: 2px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ui-evidence__assertions {
  margin: var(--spacing-xs) 0 0;
  padding-inline-start: 1.4em;
}
.ui-evidence__assertions li {
  margin-bottom: 2px;
}
.ui-evidence__assertions .mdi-check {
  color: var(--color-success);
}
.ui-evidence__assertions .mdi-alert {
  color: var(--color-warning);
}

.ui-evidence__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

/* Participant-facing workflow-PDF card (Nawi\Document\Components\PdfPreviewLink).
   ONE card for both kinds of PDF: a plain one shows a title and its links, and
   a signable one grows a signer list and a progress count. The author never
   picks between them — the PDF definition decides.

   Reading order is deliberate, because a participant arrives with one question
   ("do I have to do something?") and the card answers it top to bottom:

     head      what this is, and how far along     [icon] Title  2/3 signed
     action    ONE way in, whatever the state      [ Review and sign      ]
     signers   who is on the hook, and where I am   Ada     signed
                                                    You     your signature

   THE ACTION SITS ABOVE THE SIGNER LIST, not below it. The list can run to
   half a dozen rows, and burying the only button under it is what made the
   old layout read as four equal-weight links nobody clicked. There is exactly
   one button now - `.ui-button-split`, whose destination follows the state -
   so it can afford the loudest position on the card.

   The status modifier goes on the ROOT, so the left edge, the count and the
   icon tint all agree without three separate flags in the markup:

     .--action    the viewer owes a signature   (accent — the only call to act)
     .--pending   waiting on somebody else      (warning)
     .--complete  everything signed             (success)
     (none)       not signable                  (neutral)
*/
.ui-pdf-link {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden; /* keeps the divider lines inside the rounded corners */
}

.ui-pdf-link.--action {
  border-left-color: var(--color-accent);
}

.ui-pdf-link.--pending {
  border-left-color: var(--color-warning);
}

.ui-pdf-link.--complete {
  border-left-color: var(--color-success);
}

/* ── head ───────────────────────────────────────────────────────────────── */
.ui-pdf-link__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  min-width: 0;
}

.ui-pdf-link__icon {
  flex: none;
  font-size: 24px;
  line-height: 1;
  color: var(--color-danger); /* a PDF is red everywhere else in the product */
}

.ui-pdf-link__title {
  flex: 1;
  min-width: 0;
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "2/3 signed" - signatures collected of signatures wanted. A count rather
   than a percentage (with two signers "50%" is a worse sentence than "1 of 2"),
   and the WORD is load-bearing: a bare "2/3" beside a title reads as page 2 of
   3, which is exactly how the old card was being misread. */
.ui-pdf-link__count {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  white-space: nowrap;
  padding: 2px var(--spacing-xs);
  border-radius: var(--radius-sm);
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-medium);
}

.ui-pdf-link.--complete .ui-pdf-link__count {
  background: var(--color-success-light);
  color: var(--color-success);
}

/* ── signers ────────────────────────────────────────────────────────────── */
.ui-pdf-link__signers {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-divider, var(--color-border));
}

.ui-pdf-link__signer {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  min-width: 0;
}
.ui-pdf-link__signer + .ui-pdf-link__signer {
  border-top: 1px solid var(--color-divider, var(--color-border));
}

/* The viewer's own row is the one they act on, so it earns a tint. */
.ui-pdf-link__signer.--me {
  background: var(--color-accent-light);
}

.ui-pdf-link__signer-icon {
  flex: none;
  font-size: 18px;
  line-height: 1;
  color: var(--color-text-muted);
}

.ui-pdf-link__signer.--signed .ui-pdf-link__signer-icon {
  color: var(--color-success);
}

.ui-pdf-link__signer.--declined .ui-pdf-link__signer-icon,
.ui-pdf-link__signer.--expired .ui-pdf-link__signer-icon {
  color: var(--color-danger);
}

.ui-pdf-link__signer-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-pdf-link__signer-state {
  flex: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ── actions ────────────────────────────────────────────────────────────── */
/* One full-width action, never a row of chips. The old wrapping row held up to
   four `--small --secondary` links that all looked alike, so none of them read
   as the thing to click. */
.ui-pdf-link__actions {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
}

/* When the action is the LAST thing on the card (a plain PDF, no signer list)
   it closes the card off and earns the divider + soft ground. Leading the card
   it needs neither - a full-width button already reads as its own band. */
/* Leading the card, the action sits straight under the title - no second
   helping of vertical padding between them. */
.ui-pdf-link__head + .ui-pdf-link__actions {
  padding-top: 0;
}

.ui-pdf-link__actions.--foot {
  border-top: 1px solid var(--color-divider, var(--color-border));
  background: var(--color-bg-soft);
}

.ui-pdf-link__note {
  margin: 0;
  padding: 0 var(--spacing-md) var(--spacing-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.ui-pdf-link__note.--required {
  color: var(--color-accent);
}

.ui-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.005em;
  min-height: 1.875rem;
  background: var(--color-surface-2);
  color: var(--color-text-primary);
}

.ui-pill.--active {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.ui-pill.--accent {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.ui-pill.--success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.ui-pill.--warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.ui-pill.--danger {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.ui-pill.--small {
  min-height: 0;
  padding: 2px var(--spacing-xs);
  gap: var(--spacing-xs);
  font-size: 0.75rem;
}

button.ui-pill {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
button.ui-pill.--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-over-black);
}

.ui-pill__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--radius-md);
  font-size: 0.75em;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.25);
  color: inherit;
}
button.ui-pill:not(.--active) .ui-pill__badge {
  background: var(--color-accent);
  color: var(--color-text-over-black);
}

/* .ui-rail — grouped section navigation for admin-style pages.
   Mobile-first: below 1024px it's a horizontally scrollable strip (same
   scroll-snap mechanics as .ui-tabs — hidden scrollbar, momentum scrolling,
   snap-to-start items) so groups and their items just run in a single row.
   At 1024px it flips into a sticky vertical rail, mirroring the
   bottombar→sidebar transform in layout.css: groups stack, the separating
   border rotates from inline-start (a hairline between horizontal groups)
   to a heading indent, and the active item trades its accent pill for a
   4px accent border-inline-start.

   .ui-rail-layout is the page-shell grid pairing the rail with the content
   column, same shape as #layout-container's sidebar+body grid. */
.ui-rail {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--spacing-sm);
  overflow-x: auto;
  padding: var(--spacing-xs) 0;
  /* Hide scrollbar visually, keep it functional */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Smooth momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;
  /* Snap groups/items into place as you scroll — proximity, not mandatory:
     the rail isn't paged content, just a gentle rest stop. */
  scroll-snap-type: x proximity;
}
.ui-rail::-webkit-scrollbar {
  display: none;
}
@media (min-width: 1024px) {
  .ui-rail {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-md);
    overflow: visible;
    position: sticky;
    top: var(--spacing-md);
    padding: 0;
  }
}

.ui-rail__group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-xs);
  flex: none;
  /* On the mobile strip, groups run side by side — a hairline marks where
     one group ends and the next begins. */
}
.ui-rail__group + .ui-rail__group {
  border-inline-start: 1px solid var(--color-border);
  padding-inline-start: var(--spacing-sm);
}
@media (min-width: 1024px) {
  .ui-rail__group {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    /* Stacked groups are already separated by the label above them —
       drop the hairline used on the horizontal strip. */
  }
  .ui-rail__group + .ui-rail__group {
    border-inline-start: none;
    padding-inline-start: 0;
  }
}

.ui-rail__label {
  flex: none;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .ui-rail__label {
    padding: 0 var(--spacing-sm) var(--spacing-xs);
  }
}

.ui-rail__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  /* Each item snaps cleanly to the left edge on the mobile strip */
  scroll-snap-align: start;
}
.ui-rail__item .mdi {
  font-size: 18px;
  line-height: 1;
}
.ui-rail__item:hover {
  background: var(--color-bg-lighten);
}
.ui-rail__item {
  /* Mobile strip: active reads as an accent pill, same treatment as .ui-tab */
}
.ui-rail__item.--active {
  background: var(--color-accent);
  color: #fff;
}
@media (min-width: 1024px) {
  .ui-rail__item {
    border-inline-start: 4px solid transparent;
  }
  .ui-rail__item.--active {
    background: transparent;
    color: var(--color-accent);
    border-radius: 0;
    border-inline-start-color: var(--color-accent);
    font-weight: 600;
  }
}

/* Page-shell wrapper: rail + content. Stacks on mobile (rail on top, its
   own scrollable strip); becomes a fixed rail column + fluid content column
   at 1024px, the same two-column shape as #layout-container's sidebar. */
.ui-rail-layout {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
@media (min-width: 1024px) {
  .ui-rail-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: var(--spacing-lg);
    align-items: start;
  }
}

/**
 * ui-skeleton
 *
 * Loading placeholders that hold the final content's footprint while it
 * fetches, so panels open at roughly their loaded height instead of janking
 * taller when content arrives. Compose modifiers for shape:
 *
 *   <span class="ui-skeleton ui-skeleton--text"></span>
 *   <span class="ui-skeleton ui-skeleton--pill"></span>
 *
 * Decorative only — wrap in an aria-hidden container and mark the live region
 * aria-busy so screen readers skip the shimmer.
 */
.ui-skeleton {
  display: block;
  background: var(--color-bg-soft);
  border-radius: var(--radius-sm);
  animation: ui-skeleton-pulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ui-skeleton {
    animation: none;
  }
}

/* A single line of text. */
.ui-skeleton--text {
  height: 0.875rem;
  border-radius: var(--radius-sm);
}

/* A pill-shaped chip, matched to .tagger__chip's height. */
.ui-skeleton--pill {
  display: inline-block;
  height: 38px;
  width: 6rem;
  border-radius: 999px;
}

@keyframes ui-skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
.ui-switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: var(--color-border-tertiary, #ccc);
  border: 0.5px solid var(--color-border-secondary, transparent);
  cursor: pointer;
  transition: background 0.22s ease;
  vertical-align: middle;
  flex-shrink: 0;
}

.ui-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-background-primary, #fff);
  transition: transform 0.22s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.ui-switch:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.ui-switch:checked::after {
  transform: translateX(18px);
}

.ui-switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.ui-switch:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ui-switcher {
  display: inline-flex;
  gap: 1px;
  padding: 2px;
  border-radius: 8px;
  background: var(--color-bg-soft, #f2f3f5);
}

.ui-switcher__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text-muted, #777);
}

.ui-switcher__item:is(.--active, [aria-selected=true]) {
  background: var(--color-surface, #fff);
  color: var(--color-text, #23252a);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.12));
}

/*
.ui-switcher {
  display: inline-flex;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  background: var(--color-surface-2, rgba(0, 0, 0, 0.05));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.ui-switcher__item {
  text-decoration: none;
  font-size: 0.8125rem;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.ui-switcher__item.--active {
  background: var(--color-accent);
  color: var(--color-text-over-black);
  font-weight: 500;
}

@media (max-width: 640px) {
  .ui-switcher {
    flex: 1 1 auto;
  }

  .ui-switcher__item {
    flex: 1;
    text-align: center;
    padding: 6px 4px;
  }
}
*/
/*
.nf-readseg {
  display: flex; align-items: stretch; gap: 2px; flex-shrink: 0;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 4px;
}
.nf-readseg__btn {
  display: inline-flex; align-items: center; padding: 0 14px; min-height: 32px;
  border-radius: calc(var(--radius-md) - 4px);
  font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary);
  white-space: nowrap; transition: background .12s, color .12s;
}
.nf-readseg__btn:hover { background: var(--color-bg-soft); color: var(--color-text); }
.nf-readseg__btn.--active { background: var(--color-accent); color: #fff; }
@media (max-width: 480px) { .nf-readseg__btn { padding: 0 10px; } }
*/
.ui-table-container {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  --table-bg: var(--color-surface);
}
.ui-table-container > table {
  all: revert;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
  line-height: 1.4;
}
.ui-table-container > table thead tr th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background-color: var(--color-surface-2);
  white-space: nowrap;
}
.ui-table-container > table thead tr th:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.ui-table-container > table thead tr th:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.ui-table-container > table tr td,
.ui-table-container > table tr th {
  border: none;
  padding: var(--spacing-xs) var(--spacing-sm);
  position: relative; /* Allows to easy position:absolute things inside */
}
.ui-table-container > table tbody td {
  overflow-wrap: break-word;
}
.ui-table-container > table tbody td time {
  white-space: nowrap;
}
.ui-table-container > table td.--nowrap,
.ui-table-container > table th.--nowrap {
  white-space: nowrap;
}
.ui-table-container > table tr {
  border-bottom: 1px solid var(--color-border);
  background: var(--table-bg);
}
.ui-table-container > table tr:last-child {
  border-bottom: none;
}

.ui-table-container table th:first-child,
.ui-table-container table td:first-child {
  left: 0;
  z-index: 1;
  position: sticky;
}

.ui-table-container table thead th:first-child {
  z-index: 2;
}

.ui-table-container table tbody td:first-child {
  background-color: var(--table-bg);
}

.ui-card .ui-table-container {
  --table-bg: var(--color-surface);
}

.ui-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--spacing-sm);
  overflow-x: auto;
  background: var(--color-bg-inset);
  color: var(--color-accent);
  user-select: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-xs);
  /* Hide scrollbar visually, keep it functional */
  scrollbar-width: thin;
  -ms-overflow-style: none;
  /* Smooth momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Snap tabs into place as you scroll */
  scroll-snap-type: x mandatory;
  /* Fade hint on the right edge to signal more content */
  /*
  padding-right: var(--spacing-xl);
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  */
}
.ui-tabs::-webkit-scrollbar {
  display: none;
}

.ui-tab,
.ui-tabs > a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  white-space: nowrap;
  font-weight: 500;
  color: var(--color-text-secondary);
  /* Tabs are often <button>s — neutralize the UA button chrome so every
     element renders identically. */
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  border-radius: var(--radius-md);
  /* Each tab snaps cleanly to the left edge */
  scroll-snap-align: start;
}
.ui-tab:hover,
.ui-tabs > a:hover {
  background: var(--color-bg-lighten);
}
.ui-tab.--active,
.ui-tabs > a.--active {
  background: var(--color-accent) !important;
  color: #fff;
  box-shadow: var(--shadow-md);
}

/* Compact variant: secondary chrome (editor sub-navigation, embedded tools)
   where the default strip reads too heavy. */
.ui-tabs.--small {
  gap: 2px;
  padding: 2px;
}
.ui-tabs.--small .ui-tab,
.ui-tabs.--small > a {
  padding: 4px 12px;
  font-size: var(--font-size-sm);
  border-radius: calc(var(--radius-md) - 2px);
}
.ui-tabs.--small .ui-tab.--active,
.ui-tabs.--small > a.--active {
  box-shadow: var(--shadow-sm);
}

.ui-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: var(--font-weight-medium);
  background: var(--color-bg-soft);
  color: var(--color-text-secondary);
  border: 0;
  white-space: nowrap;
  max-width: 100%;
}
.ui-tag i.mdi {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.ui-tag > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-tag.--student {
  background: light-dark(#EEF2FD, #111E3D);
  color: light-dark(#2D5BE3, #6B8FF0);
  border-color: transparent;
}

.ui-tag.--subject {
  background: light-dark(#FDF4FF, #200D33);
  color: light-dark(#7E22CE, #C084FC);
  border-color: transparent;
}

.ui-tag.--period {
  background: light-dark(#E6F6EE, #0D2B1E);
  color: light-dark(#1A7F54, #34C47C);
  border-color: transparent;
}

.ui-tag.--event {
  background: light-dark(#FFF7ED, #2C1505);
  color: light-dark(#C2410C, #F97316);
  border-color: transparent;
}

.ui-tag.--topic {
  background: var(--color-bg-soft);
  color: var(--color-text-secondary);
}

.ui-tag.--director {
  background: light-dark(#FEF3C7, #2A1F05);
  color: light-dark(#A16207, #FBBF24);
  border-color: transparent;
  font-weight: var(--font-weight-semibold);
}

.ui-tag.--relative {
  background: light-dark(#FFE4E6, #2B0D14);
  color: light-dark(#BE123C, #FB7185);
  border-color: transparent;
}

.ui-tag.--personal {
  border-radius: 999px;
}

.ui-tag.--personal.--c-rose {
  background: light-dark(#FFE4E6, #2B0D14);
  color: light-dark(#BE123C, #FB7185);
  border-color: transparent;
}

.ui-tag.--personal.--c-amber {
  background: light-dark(#FEF3C7, #2A1F05);
  color: light-dark(#A16207, #FBBF24);
  border-color: transparent;
}

.ui-tag.--personal.--c-emerald {
  background: light-dark(#E6F6EE, #0D2B1E);
  color: light-dark(#1A7F54, #34C47C);
  border-color: transparent;
}

.ui-tag.--personal.--c-sky {
  background: light-dark(#E0F2FE, #082338);
  color: light-dark(#0369A1, #38BDF8);
  border-color: transparent;
}

.ui-tag.--personal.--c-violet {
  background: light-dark(#FDF4FF, #200D33);
  color: light-dark(#7E22CE, #C084FC);
  border-color: transparent;
}

.ui-tag.--personal.--c-slate {
  background: var(--color-bg-soft);
  color: var(--color-text-secondary);
}

a.ui-tag,
button.ui-tag {
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
a.ui-tag:hover,
button.ui-tag:hover {
  border-color: var(--color-border-strong);
}
a.ui-tag.--active,
button.ui-tag.--active {
  background: var(--color-accent);
  color: var(--color-text-over-black);
  border-color: var(--color-accent);
}

.ui-tag-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
}

/* Text tone utilities.

   .ui-text-muted is the de-emphasized inline text used for hints, timestamps
   and secondary detail — the plain-prose counterpart to .ui-label, which is a
   heading treatment (uppercase, tracked) rather than a tone.

   It was in use across the e-sign templates before it existed as CSS, so that
   text rendered at full contrast and the visual hierarchy those pages were
   written for collapsed. Declared here rather than page-locally because seven
   templates already reference it by this exact name. */
.ui-text-muted {
  color: var(--color-text-muted);
}

/* ─── Timeline ────────────────────────────────────────────────────
   A chronological rail of CHAPTERS, each holding EVENT lines. Built for
   the workflow run report (state visits as chapters, engine/admin/file
   events as lines) but deliberately generic — anything with a "grouped
   sequence of timestamped things" shape reads correctly in it.

   Structure:

     .ui-timeline
       .ui-timeline__chapter[.--here|.--ended]
         .ui-timeline__marker          the rail dot
         .ui-timeline__head            title + duration
         .ui-timeline__events
           .ui-timeline__event[.--error|.--admin|.--file]
             .ui-timeline__when        timestamp column
             .ui-timeline__what        the line itself
               .ui-timeline__files     attachments of that line (optional)
         .ui-timeline__exit            where the chapter led (optional)

   The continuous rail is the chapter's ::before, so it grows with the
   content and never needs a fixed height.
   ────────────────────────────────────────────────────────────────── */
.ui-timeline {
  --ui-timeline-rail: 9px; /* rail centre, from the inline start */
  --ui-timeline-gutter: 30px; /* content offset past the rail */
  list-style: none;
  margin: 0;
  padding: 0;
}

.ui-timeline__chapter {
  position: relative;
  padding: 0 0 var(--spacing-md) var(--ui-timeline-gutter);
  /* The rail. Drawn per chapter and joined by the padding, so a chapter
     can be hidden (filtered out) without leaving a gap in the line. */
}
.ui-timeline__chapter::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--ui-timeline-rail);
  inset-block: 0;
  width: 2px;
  background: var(--color-border-strong);
}
.ui-timeline__chapter:last-child::before {
  /* Stop the rail at the last marker rather than trailing into space. */
  block-size: 10px;
}
.ui-timeline__chapter:last-child {
  padding-bottom: 0;
}

/* RTL: the rail flips with the writing direction. */
[dir=rtl] .ui-timeline__chapter::before {
  transform: translateX(2px);
}

.ui-timeline__marker {
  position: absolute;
  inset-inline-start: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  box-sizing: border-box;
  z-index: 1;
}

.ui-timeline__head {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  min-width: 0;
}
.ui-timeline__head > strong {
  min-width: 0;
  color: var(--color-text-primary);
}

/* Duration is the chapter's headline metric — it sits at the end of the
   head row and outranks the rest of the meta text. */
.ui-timeline__duration {
  margin-inline-start: auto;
  white-space: nowrap;
  font-size: var(--font-small);
  color: var(--color-text-secondary);
}

.ui-timeline__meta {
  color: var(--color-text-secondary);
  font-size: var(--font-small);
}

/* ── Chapter states ───────────────────────────────────────────── */
/* Where the subject is now. */
.ui-timeline__chapter.--here > .ui-timeline__marker {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-light);
}
.ui-timeline__chapter.--here .ui-timeline__duration {
  color: var(--color-accent);
  font-weight: 600;
}

.ui-timeline__chapter.--ended > .ui-timeline__marker {
  border-color: var(--color-success);
  background: var(--color-success);
}

.ui-timeline__chapter.--error > .ui-timeline__marker {
  border-color: var(--color-danger);
}

/* ── Events ───────────────────────────────────────────────────── */
.ui-timeline__events {
  list-style: none;
  margin: var(--spacing-xs) 0 0;
  padding: 0;
}

.ui-timeline__event {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  min-width: 0;
  font-size: var(--font-small);
}

.ui-timeline__when {
  flex: none;
  min-width: 9ch;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.ui-timeline__what {
  min-width: 0;
  color: var(--color-text-secondary);
}
.ui-timeline__what > strong {
  color: var(--color-text-primary);
  font-weight: 500;
}
.ui-timeline__what {
  /* The event's leading glyph carries its kind; colour comes from the
     modifier below so kind is never conveyed by position alone. */
}
.ui-timeline__what > .mdi:first-child {
  margin-inline-end: 2px;
}

.ui-timeline__event.--admin > .ui-timeline__what > .mdi:first-child {
  color: var(--color-attention);
}

.ui-timeline__event.--file > .ui-timeline__what > .mdi:first-child {
  color: var(--color-danger);
}

.ui-timeline__event.--error > .ui-timeline__what {
  color: var(--color-danger);
}
.ui-timeline__event.--error > .ui-timeline__what > .mdi:first-child {
  color: var(--color-danger);
}

/* Things the event brought with it (uploaded files), on their own line
   under the text so a step with several attachments still scans. */
.ui-timeline__files {
  margin-top: 4px;
}

/* ── Chapter exit ─────────────────────────────────────────────── */
/* Where the chapter led. Stated once, after the lines, so a chapter reads
   as "this is what happened, and then it went there" — the destination is
   a property of the chapter, never of the event that triggered it. */
.ui-timeline__exit {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding-top: 2px;
  font-size: var(--font-small);
  color: var(--color-text-muted);
}
.ui-timeline__exit > .mdi {
  flex: none;
}

/* Progressive detail: a diff list or an engine trace folded away until
   asked for. Recessive by construction — it must never compete with the
   line it hangs off. */
.ui-timeline__detail {
  margin-top: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.ui-timeline__detail > summary {
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--font-small);
  padding: var(--spacing-xs) var(--spacing-sm);
}
.ui-timeline__detail > pre,
.ui-timeline__detail > ul {
  margin: var(--spacing-xs) 0 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-bg-inset);
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  color: var(--color-text-secondary);
  overflow-x: auto;
}
.ui-timeline__detail > ul {
  list-style: none;
}

/**
 * tagger
 *
 * The personal-tag editor surface: a wrapping list of toggle chips plus a
 * small create form (label + preset color swatch). Rendered both as the
 * full-page /ctx/tagger and inside the in-page tagger modal, so these styles
 * live in the design system rather than inline on the page.
 */
.tagger {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  max-width: 480px;
}

.tagger__subject {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  min-width: 0;
}

.tagger__subject > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tagger__empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* Loading placeholder shown before the options fragment arrives — a subject
   line plus a wrapping row of pill skeletons, sized to roughly match the
   loaded chips so the modal opens near its final height (no jank on swap). */
.tagger__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.tagger__skeleton-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.tagger__skeleton .ui-skeleton--text {
  width: 60%;
}

.tagger__skeleton-chips .ui-skeleton--pill:nth-child(1) {
  width: 5.5rem;
}

.tagger__skeleton-chips .ui-skeleton--pill:nth-child(2) {
  width: 7rem;
}

.tagger__skeleton-chips .ui-skeleton--pill:nth-child(3) {
  width: 4.5rem;
}

.tagger__skeleton-chips .ui-skeleton--pill:nth-child(4) {
  width: 6.5rem;
}

.tagger__skeleton-chips .ui-skeleton--pill:nth-child(5) {
  width: 6rem;
}

.tagger__chips {
  flex-wrap: wrap;
  gap: 0.375rem;
}

.tagger__chip {
  padding: 0.5rem 0.875rem;
  font-size: 0.95rem;
  min-height: 38px;
}

/* "Create tag" chip: same pill shape as the personal-tag chips before
   it, but in the accent colors the create button used to carry. */
.tagger__create-toggle {
  background: var(--color-accent);
  color: var(--color-text-over-black);
  border-color: transparent;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}

/* Creation form visibility is gated by the hidden checkbox above the
   chip list; the toggle chip opens it, Cancel closes it. While open:
   the preview chip replaces the toggle and Done is hidden. */
.tagger__create-visible {
  display: none;
}

.tagger__create-visible:not(:checked) ~ .tagger__create,
.tagger__create-visible:not(:checked) ~ .tagger__chips .tagger__preview-chip,
.tagger__create-visible:checked ~ .tagger__chips .tagger__create-toggle,
.tagger__create-visible:checked ~ .tagger__done {
  display: none;
}

.tagger__preview-chip {
  max-width: 100%;
}

.tagger__form-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.tagger__create {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

.tagger__palette {
  display: flex;
  gap: var(--spacing-sm);
}

.tagger__swatch {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
}

.tagger__swatch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tagger__swatch:has(input:checked) {
  border-color: var(--color-text);
  box-shadow: 0 0 0 2px var(--color-bg);
}

/* Swatch fills: the strong half of each .ui-tag.--personal.--c-* pair. */
.tagger__swatch.--c-rose {
  background: light-dark(#BE123C, #FB7185);
}

.tagger__swatch.--c-amber {
  background: light-dark(#A16207, #FBBF24);
}

.tagger__swatch.--c-emerald {
  background: light-dark(#1A7F54, #34C47C);
}

.tagger__swatch.--c-sky {
  background: light-dark(#0369A1, #38BDF8);
}

.tagger__swatch.--c-violet {
  background: light-dark(#7E22CE, #C084FC);
}

.tagger__swatch.--c-slate {
  background: light-dark(#64748B, #94A3B8);
}

.tagger__done {
  align-self: flex-start;
}

/**
 * tags
 *
 * The /ctx/tags personal-tag manager: a create card up top, then the person's
 * tags as a list of rows. Each row is read-only by default (the rendered chip
 * + Edit / Delete) and swaps to an inline editor via a CSS-only checkbox gate
 * (mirrors .tagger__create-visible). Both the create card and each editor are
 * .tags-preview surfaces whose chip tracks the label + color live (see
 * /js/tags-manage.js). Swatch styles are reused from tagger.scss.
 */
.tags {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  max-width: 480px;
}

.tags__heading {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.tags__empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* The live-preview chip sits centered on a soft stage so the chosen color
   reads clearly while editing. Shared by the create card and each editor. */
.tags-preview__stage {
  display: flex;
  justify-content: center;
  padding: var(--spacing-lg) var(--spacing-md);
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
}

.tags-preview__chip {
  font-size: 0.95rem;
  padding: 0.5rem 0.875rem;
  max-width: 100%;
}

/* Create card */
.tags-create__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.tags-create__actions {
  display: flex;
  justify-content: flex-end;
}

/* Tag list */
.tags__list {
  gap: var(--spacing-sm);
}

.tags__row {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.tags__row:last-child {
  border-bottom: 0;
}

/* View mode: chip on the left, actions on the right. */
.tags__view {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.tags__view-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Inline editor */
.tags__edit {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding-top: var(--spacing-sm);
}

.tags__edit-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* CSS-only edit gate (same shape as .tagger__create-visible). */
.tags__gate {
  display: none;
}

.tags__gate:not(:checked) ~ .tags__edit {
  display: none;
}

.tags__gate:checked ~ .tags__view {
  display: none;
}

/*
 * .ui-toast — transient bottom-centered notification with an optional inline
 * action (e.g. Undo). Fixed to the viewport so it floats above page content.
 */
.ui-toast {
  position: fixed;
  left: 50%;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  max-width: min(92vw, 420px);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--color-text-primary, #222);
  color: var(--color-bg, #fff);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.25));
  font-size: 0.9rem;
}
.ui-toast[hidden] {
  display: none;
}
.ui-toast__text {
  flex: 1 1 auto;
  min-width: 0;
}
.ui-toast__action {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--color-accent, #6ab);
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
}
.ui-toast__action:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Embedded video (YouTube). The frame holds a 16:9 responsive iframe; the
   caption (optional title + description) sits underneath, mirroring the
   image attachment layout. */
.ui-video {
  /* Block layout, NOT flex: a flex column makes the 16:9 frame a flex item
     whose main-axis (height) is resolved from in-flow content. The iframe is
     absolutely positioned (out of flow), so that content height is 0 and the
     `aspect-ratio` height never applies — the frame, and the iframe, collapse
     to 0px. Block layout lets `aspect-ratio` size the frame from its width. */
  display: block;
  margin: 0;
  /* `width: 100%` is REQUIRED, not just cosmetic. The figure is often a flex
     item in a column container with `align-items: flex-start` (e.g.
     .conversation__attachments), which shrink-wraps items on the cross axis
     (width). The frame's `width: 100%` then has nothing definite to resolve
     against → 0 width → `padding-bottom: 56.25%` (a % of width) → 0 height →
     the iframe collapses. An explicit width gives the frame a definite basis. */
  width: 100%;
  max-width: 32rem;
}

.ui-video__frame {
  /* Intrinsic-ratio padding hack rather than `aspect-ratio`. As a grid item,
     the frame's width is resolved during the grid's intrinsic-sizing pass, and
     `aspect-ratio` needs a *definite* width to derive height from — it resolves
     to 0 here and the frame collapses. Percentage padding always resolves
     against the containing block's width, so `padding-bottom: 56.25%` (9/16)
     reliably produces the 16:9 height in any layout context. */
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-alt, var(--color-surface));
}

.ui-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ui-video__caption {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  margin-top: var(--spacing-xs);
  padding: 0 var(--spacing-xs);
}

.ui-video__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.ui-video__description {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.ui-patched {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: help;
}

.ui-scopeb {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.ui-scopeb__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}
.ui-scopeb__row .ui-input {
  width: auto;
}
.ui-scopeb__row.--missing .ui-scopeb__var {
  border-color: var(--color-warning);
}
.ui-scopeb__row.--missing > .mdi-alert-outline {
  color: var(--color-warning);
}

.ui-scopeb__var {
  max-width: 220px;
}

.ui-scopeb__op {
  max-width: 150px;
}

.ui-scopeb__value {
  display: inline-flex;
}

.ui-scopeb__add {
  align-self: flex-start;
}

.ui-colpick__selected {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 2rem;
}

.ui-colpick__chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px var(--spacing-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  font-size: var(--font-size-xs);
}
.ui-colpick__chip.--dragging {
  opacity: 0.4;
}
.ui-colpick__chip.--missing {
  border-color: var(--color-warning);
}
.ui-colpick__chip.--missing .mdi-alert-outline {
  color: var(--color-warning);
}
.ui-colpick__chip button {
  border: none;
  background: none;
  padding: 0 2px;
  cursor: pointer;
  color: var(--color-text-muted);
}
.ui-colpick__chip button:hover {
  color: var(--color-text-primary);
}

.ui-colpick__chip-drag {
  cursor: grab;
  color: var(--color-text-muted);
}

.ui-colpick__chip-input {
  width: 10em;
  font-size: var(--font-size-xs);
  padding: 0 4px;
}

.ui-colpick__add {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px var(--spacing-xs);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.ui-colpick__add:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.ui-colpick__dialog {
  width: min(640px, 92vw);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-lg);
  background: var(--color-surface);
  color: var(--color-text-primary);
}
.ui-colpick__dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.ui-colpick__dialog-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}
.ui-colpick__dialog-head > .mdi {
  color: var(--color-accent);
  font-size: 18px;
}
.ui-colpick__dialog-head h3 {
  flex: 1;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-bold);
}

.ui-colpick__search {
  width: 100%;
  margin-bottom: var(--spacing-sm);
}

.ui-colpick__groups {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: min(52vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ui-colpick__group > summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.ui-colpick__group > summary::-webkit-details-marker {
  display: none;
}
.ui-colpick__group > summary:hover {
  background: var(--color-bg-soft);
}
.ui-colpick__group > summary .mdi-chevron-right {
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}
.ui-colpick__group[open] > summary .mdi-chevron-right {
  transform: rotate(90deg);
}

.ui-colpick__group-count {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.ui-colpick__opts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1px var(--spacing-sm);
  padding: 2px var(--spacing-xs) var(--spacing-sm) var(--spacing-lg);
}

.ui-colpick__opt {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 6px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
}
.ui-colpick__opt > .mdi {
  color: var(--color-text-muted);
  font-size: 15px;
  flex: none;
}
.ui-colpick__opt > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-colpick__opt.--on > .mdi:first-child {
  color: var(--color-accent);
}
.ui-colpick__opt:hover {
  background: var(--color-bg-soft);
}
.ui-colpick__opt:hover > .mdi {
  color: var(--color-accent);
}

.ui-colpick__group-all {
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: 15px;
  cursor: pointer;
}
.ui-colpick__group-all:hover {
  color: var(--color-accent);
}

.ui-colpick__empty {
  padding: var(--spacing-md);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.ui-visruleset {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* ───────────────────────── boot / empty states ───────────────────────── */
.ui-visruleset__error {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-warning);
  background: var(--color-warning-light);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
}
.ui-visruleset__error .mdi {
  color: var(--color-warning);
  font-size: 1.1rem;
}
.ui-visruleset__error .ui-button {
  margin-left: auto;
  flex: none;
}

.ui-visruleset__empty {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-md);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}
.ui-visruleset__empty > .mdi {
  font-size: 1.6rem;
  flex: none;
}
.ui-visruleset__empty b {
  color: var(--color-text-primary);
}

.ui-visruleset__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* ───────────────────────────── rule cards ───────────────────────────── */
.ui-visruleset__card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  /* no overflow: hidden — it would clip the dropdown menus */
  transition: border-color 0.13s, opacity 0.2s;
}
.ui-visruleset__card.--open {
  border-color: var(--color-border-strong);
}
.ui-visruleset__card.--admin {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}
.ui-visruleset__card.--admin .ui-visruleset__card-icon {
  color: var(--color-accent);
}
.ui-visruleset__card.--admin .ui-visruleset__card-head {
  cursor: default;
}
.ui-visruleset__card.--raw {
  border-color: var(--color-warning);
  background: var(--color-warning-light);
}
.ui-visruleset__card.--raw .ui-visruleset__card-icon {
  color: var(--color-warning);
}
.ui-visruleset__card.--shadowed {
  opacity: 0.55;
}
.ui-visruleset__card.--shadowed:hover {
  opacity: 1;
}

.ui-visruleset__card-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  user-select: none;
}
.ui-visruleset__card-head:hover {
  background: color-mix(in srgb, var(--color-surface-2) 55%, transparent);
}

.ui-visruleset__card-icon {
  flex: none;
  display: inline-flex;
  color: var(--color-text-muted);
  font-size: 1.15rem;
}

.ui-visruleset__card-sentence {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ui-visruleset__s-members {
  color: var(--color-accent);
  font-weight: 600;
}

.ui-visruleset__s-relatives {
  color: var(--ui-cfgkit-relation);
  font-weight: 600;
}

.ui-visruleset__s-states {
  font-weight: 400;
  font-size: 0.92em;
}

.ui-visruleset__s-where {
  color: var(--color-text-muted);
}

.ui-visruleset__s-none {
  color: var(--color-text-muted);
  font-style: italic;
}

.ui-visruleset__s-warn {
  color: var(--color-warning);
  font-weight: 600;
}

/* ─────────────────────────── live counts ─────────────────────────── */
.ui-visruleset__card-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
}

.ui-visruleset__count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.ui-visruleset__count .mdi {
  font-size: 12px;
}
.ui-visruleset__count.--zero {
  opacity: 0.6;
}

.ui-visruleset__badge-na {
  color: var(--color-text-muted);
  opacity: 0.5;
  font-size: 12px;
  cursor: help;
}

.ui-visruleset__count-skeleton {
  display: inline-block;
  width: 18px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(100deg, var(--color-surface-2) 35%, var(--color-bg-soft) 50%, var(--color-surface-2) 65%);
  background-size: 220% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .ui-visruleset__count-skeleton {
    animation: ui-vr-count-shimmer 1.1s linear infinite;
  }
}
@keyframes ui-vr-count-shimmer {
  to {
    background-position: -120% 0;
  }
}
.ui-visruleset__card-caret {
  flex: none;
  display: inline-flex;
  color: var(--color-text-muted);
  transition: transform 0.15s;
}
.ui-visruleset__card.--open .ui-visruleset__card-caret {
  transform: rotate(180deg);
}

.ui-visruleset__icon-btn {
  background: none;
  border: 0;
  padding: 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.ui-visruleset__icon-btn:hover {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
}
.ui-visruleset__icon-btn.--danger:hover {
  color: var(--color-danger);
}

.ui-visruleset__card-body {
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* ────────────────────────────── add row ────────────────────────────── */
.ui-visruleset__add-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.ui-visruleset__add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.13s, color 0.13s;
}
.ui-visruleset__add:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.ui-visruleset__add-admin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: none;
  padding: 7px 8px;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.ui-visruleset__add-admin:hover {
  color: var(--color-accent);
}

.ui-visruleset__raw {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Consolas, monospace);
  font-size: 0.85em;
  min-height: 110px;
  width: 100%;
}

.ui-workflow-progress {
  display: flex;
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  padding: var(--spacing-sm) var(--spacing-md);
}

.ui-workflow-progress__dot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: var(--spacing-sm) var(--spacing-xs);
  text-decoration: none;
  cursor: default;
  /* The circle. A generated ::before renders before the real .__label
     child in a column flow, so it naturally stacks above the text with
     no ordering tricks needed. */
}
.ui-workflow-progress__dot::before {
  content: "";
  flex: none;
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  transition: width 0.2s var(--easing-spring), height 0.2s var(--easing-spring), background 0.2s var(--easing-smooth), box-shadow 0.2s var(--easing-smooth), transform 0.2s var(--easing-spring);
}
.ui-workflow-progress__dot {
  /* The connector. Absolutely positioned (so it sits outside normal flex
     flow) spanning from this column's center back to the previous
     column's center — "right: 50%; width: 100%" on an equal-width column
     always lands exactly there, regardless of the bar's actual width.
     The vertical offset is pinned to the BASE (unvisited/visited) circle's
     center; the enlarged --current circle simply grows around that same
     center rather than shifting the line. */
}
.ui-workflow-progress__dot::after {
  content: "";
  position: absolute;
  top: calc(var(--spacing-sm) + 3px);
  right: 50%;
  width: 100%;
  height: 2px;
  z-index: 0;
  background: var(--color-border);
  transition: background 0.2s var(--easing-smooth);
}
.ui-workflow-progress__dot:first-child::after {
  display: none;
}

/* Cleared step — its circle fills with the primary color, lights up the
   connector segment leading into it, and its label reads a shade darker
   than an upcoming step's. */
.ui-workflow-progress__dot.--visited::before {
  background: var(--color-accent);
}
.ui-workflow-progress__dot.--visited::after {
  background: var(--color-accent);
}
.ui-workflow-progress__dot.--visited .ui-workflow-progress__label {
  color: var(--color-text-secondary);
}

/* Current step — enlarged circle with a soft halo, label promoted to
   full-strength text; unmistakably "you are here". */
.ui-workflow-progress__dot.--current::before {
  width: 12px;
  height: 12px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 20%, transparent);
}
.ui-workflow-progress__dot.--current .ui-workflow-progress__label {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* Clickable (cleared, not current) — the whole column is the hit area,
   not just the circle; hover/focus nudges the circle and tints the
   label to signal "this is live". */
a.ui-workflow-progress__dot {
  cursor: pointer;
}
a.ui-workflow-progress__dot:hover::before, a.ui-workflow-progress__dot:focus-visible::before {
  transform: scale(1.3);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 25%, transparent);
}
a.ui-workflow-progress__dot:focus-visible {
  outline: none;
}
a.ui-workflow-progress__dot:hover .ui-workflow-progress__label, a.ui-workflow-progress__dot:focus-visible .ui-workflow-progress__label {
  color: var(--color-accent);
}

/* Always-visible state name — no background, no shadow, no tooltip
   chrome; just quiet text that ellipsizes rather than force the bar to
   overflow. */
.ui-workflow-progress__label {
  margin-top: var(--spacing-xs);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  transition: color 0.2s var(--easing-smooth);
}

/* Low horizontal space — keep only the current step's label (so you
   always know where you are) plus whichever one is under the pointer or
   keyboard focus; the rest fall back to their `title` attribute. Columns
   stay equal-width and shrink instead of wrapping, so nothing forces
   horizontal overflow. */
@media (max-width: 560px) {
  .ui-workflow-progress__dot:not(.--current):not(:hover):not(:focus-visible) .ui-workflow-progress__label {
    display: none;
  }
}

/*# sourceMappingURL=index.css.map */