/* Components — plain-CSS counterparts of Erudite's UI primitives (same sizes, radii and states). */

/* --- Icons ------------------------------------------------------------------- */

.icon {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  flex-shrink: 0;
  stroke-width: 2;
}
/* Lucide's stroke styling, so icons drawn from a sprite (<svg class="icon"><use href="…#name">)
   match inlined ones. */
svg.icon {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm {
  width: calc(var(--spacing) * 3.5);
  height: calc(var(--spacing) * 3.5);
}
.icon-lg {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
}

/* --- Button ------------------------------------------------------------------ */

.btn {
  --btn-bg: var(--primary);
  --btn-fg: var(--primary-foreground);
  --btn-border: var(--primary);
  --btn-hover: color-mix(in srgb, var(--primary) 88%, transparent);
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 9);
  padding: 0 calc(var(--spacing) * 3.5);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--text-control);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-none);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--default-transition-duration), background-color var(--default-transition-duration), border-color var(--default-transition-duration), box-shadow var(--default-transition-duration), opacity var(--default-transition-duration);
  outline: none;
}
.btn:hover {
  background: var(--btn-hover);
}
.btn:focus-visible {
  box-shadow: var(--focus-ring);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  pointer-events: none;
  opacity: var(--opacity-disabled);
}
.btn .icon {
  pointer-events: none;
}
.btn-outline {
  --btn-bg: var(--card);
  --btn-fg: var(--foreground);
  --btn-border: var(--input);
  --btn-hover: var(--muted);
}
.btn-secondary {
  --btn-bg: var(--secondary);
  --btn-fg: var(--secondary-foreground);
  --btn-border: transparent;
  --btn-hover: color-mix(in srgb, var(--secondary) 80%, var(--foreground) 6%);
}
.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: inherit;
  --btn-border: transparent;
  --btn-hover: var(--muted);
}
.btn-destructive {
  --btn-bg: var(--destructive);
  --btn-fg: var(--destructive-foreground);
  --btn-border: var(--destructive);
  --btn-hover: color-mix(in srgb, var(--destructive) 90%, transparent);
}
.btn-soft-destructive {
  --btn-bg: var(--card);
  --btn-fg: var(--destructive);
  --btn-border: var(--input);
  --btn-hover: var(--danger-soft);
}
.btn-link {
  --btn-bg: transparent;
  --btn-fg: var(--brand-ink);
  --btn-border: transparent;
  --btn-hover: transparent;
  height: auto;
  padding: 0;
}
.btn-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.btn-sm {
  height: calc(var(--spacing) * 8);
  gap: calc(var(--spacing) * 1.5);
  padding: 0 calc(var(--spacing) * 3);
}
.btn-lg {
  height: calc(var(--spacing) * 11.5);
  padding: 0 calc(var(--spacing) * 5);
  border-radius: var(--radius-lg);
  font-size: var(--text-md);
}
.btn-icon {
  width: calc(var(--spacing) * 9);
  padding: 0;
}
.btn-icon.btn-sm {
  width: calc(var(--spacing) * 8);
}
.btn-xs {
  height: calc(var(--spacing) * 7);
  padding: 0 calc(var(--spacing) * 2);
  font-size: var(--text-xs);
}
.btn-icon.btn-xs {
  width: calc(var(--spacing) * 7);
}
.btn-block {
  width: 100%;
}

/* --- Badge ------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 1);
  width: fit-content;
  padding: 1px calc(var(--spacing) * 1.5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: var(--text-2xs);
  line-height: calc(var(--spacing) * 3.5);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.badge .icon {
  width: calc(var(--spacing) * 3);
  height: calc(var(--spacing) * 3);
}
.badge-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}
.badge-secondary {
  background: var(--muted);
  color: var(--muted-foreground);
}
.badge-outline {
  border-color: var(--input);
  border-radius: var(--radius-full);
  padding: 1px calc(var(--spacing) * 2);
  background: transparent;
}
.badge-brand {
  background: var(--accent);
  color: var(--accent-foreground);
}
.badge-success {
  background: var(--success-soft);
  color: var(--success);
}
.badge-warning {
  background: var(--warning-soft);
  color: var(--warning);
}
.badge-destructive {
  background: var(--danger-soft);
  color: var(--destructive);
}
.badge-info {
  background: var(--info-soft);
  color: var(--info);
}
/* A small dot before a status label. */
.status-dot {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.status-dot::before {
  content: "";
  width: calc(var(--spacing) * 1.5);
  height: calc(var(--spacing) * 1.5);
  border-radius: var(--radius-full);
  background: currentColor;
}

/* --- Card -------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 5);
  padding: calc(var(--spacing) * 5) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  color: var(--card-foreground);
  min-width: 0;
}
.card-header {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: calc(var(--spacing) * 1);
  padding: 0 calc(var(--spacing) * 5);
}
.card-header:has(> .card-action) {
  grid-template-columns: 1fr auto;
}
.card-header > .card-action {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: end;
}
.card-title {
  font-size: var(--text-card-title);
  line-height: var(--text-card-title--line-height);
  letter-spacing: var(--text-card-title--letter-spacing);
  font-weight: var(--text-card-title--font-weight);
}
.card-description {
  font-size: var(--text-control);
  color: var(--muted-foreground);
}
.card-content {
  padding: 0 calc(var(--spacing) * 5);
}
.card-footer {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: 0 calc(var(--spacing) * 5);
}
/* A card whose body is a table or list running edge to edge. */
.card-flush {
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.card-flush > .card-header {
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
  border-bottom: 1px solid var(--line);
}
.card-flush > .card-footer {
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5);
  border-top: 1px solid var(--line);
}
.card-band {
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--background);
}
.card-dashed {
  border-style: dashed;
  border-color: var(--border-strong);
  background: transparent;
}

/* --- Form fields ------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  min-width: 0;
}
.label {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  font-size: var(--text-control);
  line-height: var(--leading-tight);
  font-weight: var(--font-weight-medium);
  color: var(--foreground);
}
.label .required {
  color: var(--destructive);
}
.input,
.field input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="image"]),
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  height: calc(var(--spacing) * 9);
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font-size: var(--text-control);
  transition: color var(--default-transition-duration), box-shadow var(--default-transition-duration), border-color var(--default-transition-duration);
  outline: none;
}
.field textarea,
textarea.input {
  height: auto;
  min-height: calc(var(--spacing) * 20);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  line-height: var(--leading-normal);
  resize: vertical;
}
.field select:not([multiple]),
select.input:not([multiple]) {
  appearance: none;
  padding-right: calc(var(--spacing) * 8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(var(--spacing) * 2.5) center;
}
.field select[multiple] {
  height: auto;
  min-height: calc(var(--spacing) * 20);
  padding: calc(var(--spacing) * 1.5);
}
.field input[type="file"],
input[type="file"].input {
  height: auto;
  padding: calc(var(--spacing) * 1.5);
  color: var(--muted-foreground);
}
.field input[type="file"]::file-selector-button,
input[type="file"]::file-selector-button {
  height: calc(var(--spacing) * 6.5);
  margin-right: calc(var(--spacing) * 2.5);
  padding: 0 calc(var(--spacing) * 2.5);
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--foreground);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}
.input::placeholder,
.field input::placeholder,
.field textarea::placeholder {
  color: color-mix(in srgb, var(--muted-foreground) 80%, transparent);
}
.input:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: color-mix(in srgb, var(--ring) 70%, transparent);
  box-shadow: var(--focus-ring-field);
  outline: none;
}
.field input:disabled,
.field select:disabled,
.field textarea:disabled,
.field input[readonly],
.field textarea[readonly] {
  background: var(--muted);
  color: var(--muted-foreground);
  cursor: not-allowed;
}
.input[aria-invalid="true"],
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--destructive);
}
.field.has-error input:focus-visible,
.field.has-error select:focus-visible,
.field.has-error textarea:focus-visible {
  box-shadow: var(--focus-ring-invalid);
}
input[type="checkbox"],
input[type="radio"] {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  accent-color: var(--brand);
  cursor: pointer;
}
.choice-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
}
.choice-list label,
.choice {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-control);
  font-weight: var(--font-weight-normal);
  cursor: pointer;
}
.field-hint {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.field-error {
  font-size: var(--text-xs);
  color: var(--destructive);
}
.input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.input-group > .icon {
  position: absolute;
  right: calc(var(--spacing) * 2.5);
  color: var(--muted-foreground);
  pointer-events: none;
}
.file-link {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  font-size: var(--text-xs);
  color: var(--brand-ink);
}
.file-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A responsive grid of fields: one column on phones, two (or more) from 640px. */
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 4.5) calc(var(--spacing) * 4);
}
@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .form-grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .form-grid > .col-span-full {
    grid-column: 1 / -1;
  }
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--spacing) * 2);
}

/* A password input with a show/hide button inside its right edge:
   <div class="password-field"><input type="password"><button type="button" class="password-toggle"
   aria-label="Show password"><svg class="icon">…</svg></button></div> */
.password-field {
  position: relative;
  display: flex;
  align-items: center;
}
.password-field input {
  width: 100%;
  padding-right: calc(var(--spacing) * 10);
}
.password-toggle {
  position: absolute;
  right: calc(var(--spacing) * 1.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 7);
  height: calc(var(--spacing) * 7);
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  cursor: pointer;
}
.password-toggle:hover {
  background: var(--muted);
  color: var(--foreground);
}
.password-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --- Alert ------------------------------------------------------------------- */

.alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
  width: 100%;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  font-size: var(--text-control);
  line-height: var(--leading-normal);
}
.alert > .icon {
  margin-top: calc(var(--spacing) * 0.5);
}
.alert-body {
  flex: 1;
  min-width: 0;
}
.alert-title {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-subtle);
}
.alert-info {
  border-color: transparent;
  background: var(--info-soft);
  color: var(--info);
}
.alert-success {
  border-color: transparent;
  background: var(--success-soft);
  color: var(--success);
}
.alert-warning {
  border-color: transparent;
  background: var(--warning-soft);
  color: var(--warning);
}
.alert-destructive,
.alert-danger,
.alert-error {
  border-color: transparent;
  background: var(--danger-soft);
  color: var(--destructive);
}
.alert-brand {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-foreground);
}
.alert-dismiss {
  margin: calc(var(--spacing) * -1) calc(var(--spacing) * -1.5) calc(var(--spacing) * -1) 0;
  padding: calc(var(--spacing) * 1);
  border-radius: var(--radius-sm);
  color: inherit;
  opacity: 0.7;
}
.alert-dismiss:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.messages {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 6);
}

/* --- Table ------------------------------------------------------------------- */

.table-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
}
.table {
  width: 100%;
  font-size: var(--text-control);
}
.table thead {
  background: var(--background);
}
.table th {
  height: calc(var(--spacing) * 10);
  padding: 0 calc(var(--spacing) * 3);
  border-bottom: 1px solid var(--line);
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--font-weight-normal);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.table td {
  padding: calc(var(--spacing) * 3);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.table tbody tr {
  transition: background-color var(--default-transition-duration);
}
.table tbody tr:hover {
  background: color-mix(in srgb, var(--muted) 50%, transparent);
}
.table tbody tr:last-child td {
  border-bottom: 0;
}
.table th:first-child,
.table td:first-child {
  padding-left: calc(var(--spacing) * 5);
}
.table th:last-child,
.table td:last-child {
  padding-right: calc(var(--spacing) * 5);
}
.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.table .nowrap {
  white-space: nowrap;
}
.table .actions {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}
.table-title {
  font-weight: var(--font-weight-medium);
  color: var(--foreground);
}
.table-sub {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.row-link {
  font-weight: var(--font-weight-medium);
}
.row-link:hover {
  color: var(--brand-ink);
}
/* Key/value table (label column on the left). */
.table-kv th {
  width: 40%;
  height: auto;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5);
  background: var(--background);
  border-bottom: 1px solid var(--line-soft);
}
.table-kv tr:last-child th {
  border-bottom: 0;
}

/* --- Tabs -------------------------------------------------------------------- */

.tabs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
}
.tabs-list {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  color: var(--muted-foreground);
}
.tabs-list.pills {
  height: calc(var(--spacing) * 8.5);
  gap: calc(var(--spacing) * 0.5);
  padding: calc(var(--spacing) * 0.75);
  border-radius: calc(var(--radius-lg) - 1px);
  background: var(--muted);
}
.tabs-list.underline {
  width: 100%;
  height: calc(var(--spacing) * 10);
  gap: calc(var(--spacing) * 5);
  border-bottom: 1px solid var(--border);
}
.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 1.5);
  height: 100%;
  font-size: var(--text-control);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: color var(--default-transition-duration), background-color var(--default-transition-duration), box-shadow var(--default-transition-duration);
}
.tab:hover {
  color: var(--foreground);
}
.pills .tab {
  padding: 0 calc(var(--spacing) * 3);
  border-radius: calc(var(--radius-md) - 1px);
}
.pills .tab[aria-selected="true"],
.pills .tab.active,
.pills .tab[aria-current="page"] {
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-xs);
}
.underline .tab {
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.underline .tab[aria-selected="true"],
.underline .tab.active,
.underline .tab[aria-current="page"] {
  border-color: var(--brand);
  color: var(--foreground);
}
.tab .count {
  min-width: calc(var(--spacing) * 4.5);
  padding: 0 calc(var(--spacing) * 1.25);
  border-radius: var(--radius-full);
  background: var(--muted);
  font-size: var(--text-2xs);
  line-height: calc(var(--spacing) * 4);
}
.tab-panel:not(.active) {
  display: none;
}

/* --- Dropdown menu ----------------------------------------------------------- */

.dropdown {
  position: relative;
}
.menu {
  position: absolute;
  z-index: var(--z-popover);
  top: calc(100% + var(--spacing) * 1.5);
  right: 0;
  min-width: calc(var(--spacing) * 40);
  padding: calc(var(--spacing) * 1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-lg);
  transform-origin: top right;
  animation: pop-in 0.12s ease-out;
}
/* ui.js positions a [data-fixed] dropdown's menu against the viewport (inside scrolling tables). */
.menu.is-fixed {
  position: fixed;
  right: auto;
  transform-origin: top left;
}
.menu-md {
  width: calc(var(--spacing) * 58);
}
.menu-lg {
  width: calc(var(--spacing) * 64);
}
.dropdown:not([data-open]) > .menu {
  display: none;
}
.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  width: 100%;
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
  border-radius: var(--radius-sm);
  font-size: var(--text-control);
  text-align: left;
  user-select: none;
  outline: none;
}
.menu-item .icon {
  color: var(--muted-foreground);
}
.menu-item:hover,
.menu-item:focus-visible {
  background: var(--muted);
}
.menu-item[aria-checked="true"]::after {
  content: "";
  margin-left: auto;
  width: calc(var(--spacing) * 1.5);
  height: calc(var(--spacing) * 1.5);
  border-radius: var(--radius-full);
  background: var(--brand);
}
.menu-label {
  padding: calc(var(--spacing) * 2);
}
.menu-separator {
  height: 1px;
  margin: calc(var(--spacing) * 1) calc(var(--spacing) * -1);
  background: var(--border);
}
.menu form {
  margin: 0;
}
@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

/* --- Dialog (native <dialog>) -------------------------------------------------- */

.dialog {
  width: calc(100% - var(--spacing) * 8);
  max-width: var(--container-lg);
  max-height: calc(100dvh - var(--spacing) * 8);
  margin: auto;
  padding: calc(var(--spacing) * 6);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-xl);
}
.dialog-md {
  max-width: var(--container-xl);
}
.dialog-lg {
  max-width: var(--container-prose);
}
.dialog[open] {
  display: grid;
  gap: calc(var(--spacing) * 5);
  animation: pop-in 0.18s ease-out;
}
.dialog::backdrop {
  background: var(--overlay);
  backdrop-filter: blur(var(--blur-overlay));
}
.dialog-header {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 1.5);
  padding-right: calc(var(--spacing) * 6);
}
.dialog-title {
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-heading);
}
.dialog-description {
  font-size: var(--text-control);
  color: var(--muted-foreground);
}
.dialog-close {
  position: absolute;
  top: calc(var(--spacing) * 4);
  right: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 1);
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
}
.dialog-close:hover {
  background: var(--muted);
  color: var(--foreground);
}
.dialog-footer {
  display: flex;
  flex-direction: column-reverse;
  gap: calc(var(--spacing) * 2);
}
@media (min-width: 640px) {
  .dialog-footer {
    flex-direction: row;
    justify-content: flex-end;
  }
}

/* --- Avatar ------------------------------------------------------------------ */

.avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--muted);
  color: var(--sidebar-foreground);
  font-size: var(--text-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-normal);
  object-fit: cover;
}
.avatar-brand {
  background: var(--accent);
  color: var(--brand-ink);
}
.avatar-lg {
  width: calc(var(--spacing) * 14);
  height: calc(var(--spacing) * 14);
  font-size: var(--text-lg);
}
.avatar-xl {
  width: calc(var(--spacing) * 18);
  height: calc(var(--spacing) * 18);
  font-size: var(--text-xl);
}

/* --- Progress ---------------------------------------------------------------- */

.progress {
  position: relative;
  height: calc(var(--spacing) * 1);
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--muted);
}
.progress > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--brand);
  transition: width var(--duration-progress);
}

/* --- Page header and breadcrumbs ---------------------------------------------- */

.page-header {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3.5);
  padding-bottom: calc(var(--spacing) * 6);
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-control);
  color: var(--muted-foreground);
}
.breadcrumbs a:hover {
  color: var(--foreground);
}
.breadcrumbs [aria-current="page"] {
  color: var(--foreground);
}
.page-header-row {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
}
@media (min-width: 640px) {
  .page-header-row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.page-header-text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  min-width: 0;
}
.eyebrow {
  font-size: var(--text-control);
  font-weight: var(--font-weight-medium);
  color: var(--muted-foreground);
}
.page-description {
  max-width: var(--container-2xl);
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}
@media (min-width: 640px) {
  .page-description {
    font-size: var(--text-md);
  }
}
.page-actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}

/* --- KPI strip (StatGrid) ------------------------------------------------------ */

.stat-grid {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
}
.stat-grid > .stat-cells {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: -1px 0 0 -1px;
}
@media (min-width: 768px) {
  .stat-grid > .stat-cells {
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  }
}
.stat {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  min-width: 0;
  padding: calc(var(--spacing) * 4.5) calc(var(--spacing) * 5) calc(var(--spacing) * 5);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
a.stat:hover {
  background: color-mix(in srgb, var(--muted) 50%, transparent);
}
.stat-label {
  font-size: var(--text-control);
  color: var(--muted-foreground);
}
.stat-value {
  font-size: var(--text-metric);
  line-height: var(--text-metric--line-height);
  letter-spacing: var(--text-metric--letter-spacing);
  font-weight: var(--text-metric--font-weight);
}
.stat-hint {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

/* --- Empty state --------------------------------------------------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 14) calc(var(--spacing) * 6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-xl);
  text-align: center;
}
.empty-state.compact {
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 8) calc(var(--spacing) * 4);
}
.card .empty-state {
  margin: 0 calc(var(--spacing) * 5);
}
.card-flush .empty-state {
  margin: calc(var(--spacing) * 5);
}
.empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 11);
  height: calc(var(--spacing) * 11);
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-foreground);
}
.empty-state-icon .icon {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
}
.empty-state-title {
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-subtle);
}
.empty-state-description {
  max-width: var(--container-sm);
  margin: 0 auto;
  font-size: var(--text-control);
  color: var(--muted-foreground);
}

/* --- Description list (label · value pairs) ------------------------------------ */

.dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--spacing) * 45), 1fr));
  gap: calc(var(--spacing) * 4.5) calc(var(--spacing) * 6);
}
.dl-1 {
  grid-template-columns: minmax(0, 1fr);
}
.dl-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dl > div {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 1);
  min-width: 0;
}
.dl dt {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.dl dd {
  font-size: var(--text-control);
  font-weight: var(--font-weight-medium);
  overflow-wrap: anywhere;
}

/* --- Timeline (application status history) -------------------------------------- */

.timeline {
  display: flex;
  flex-direction: column;
}
.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--spacing) * 4) 1fr;
  gap: calc(var(--spacing) * 3);
  padding-bottom: calc(var(--spacing) * 4);
}
.timeline-item::before {
  content: "";
  position: absolute;
  top: calc(var(--spacing) * 3.5);
  bottom: 0;
  left: calc(var(--spacing) * 1.75);
  width: 1px;
  background: var(--border);
}
.timeline-item:last-child {
  padding-bottom: 0;
}
.timeline-item:last-child::before {
  display: none;
}
.timeline-dot {
  width: calc(var(--spacing) * 2.25);
  height: calc(var(--spacing) * 2.25);
  margin: calc(var(--spacing) * 1.25) 0 0 calc(var(--spacing) * 0.875);
  border-radius: var(--radius-full);
  background: var(--border-strong);
}
.timeline-item.current .timeline-dot {
  background: var(--brand);
  box-shadow: 0 0 0 var(--ring-width) var(--accent);
}
.timeline-title {
  font-size: var(--text-control);
  font-weight: var(--font-weight-medium);
}
.timeline-meta {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

/* --- Steps (applicant progress) ------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--spacing) * 4) calc(var(--spacing) * 2);
}
@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;
  }
}
.step {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.step::before {
  content: "";
  height: calc(var(--spacing) * 1);
  border-radius: var(--radius-full);
  background: var(--muted);
}
.step.done::before {
  background: var(--brand);
}
.step.current {
  color: var(--foreground);
  font-weight: var(--font-weight-medium);
}
.step.current::before {
  background: linear-gradient(90deg, var(--brand) 50%, var(--muted) 50%);
}

/* --- Misc ------------------------------------------------------------------------ */

.kbd {
  display: inline-flex;
  align-items: center;
  height: calc(var(--spacing) * 5);
  padding: 0 calc(var(--spacing) * 1.5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--muted-foreground);
}
.separator {
  height: 1px;
  width: 100%;
  background: var(--border);
}
.link {
  color: var(--brand-ink);
  font-weight: var(--font-weight-medium);
}
.link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  height: calc(var(--spacing) * 7);
  padding: 0 calc(var(--spacing) * 2.5);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--card);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.chip strong {
  color: var(--foreground);
  font-weight: var(--font-weight-medium);
}
.icon-tile {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 9);
  height: calc(var(--spacing) * 9);
  border-radius: var(--radius-lg);
  background: var(--accent);
  color: var(--accent-foreground);
}
.photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--muted);
}

/* Django renders radio and checkbox groups as <div><div><label><input> Text</label></div>…</div>. */
.choice-list > div {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
}
.choice-list label {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: calc(var(--spacing) * 9);
  padding: 0 calc(var(--spacing) * 3);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--card);
  font-size: var(--text-control);
  cursor: pointer;
}
.choice-list label:has(input:checked) {
  border-color: var(--brand);
  background: var(--accent);
  color: var(--accent-foreground);
}
.file-input {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.file-input input {
  flex: 1;
}

/* --- Vacancy card ------------------------------------------------------------- */

.vacancy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--spacing) * 75), 1fr));
  gap: calc(var(--spacing) * 4);
}
.vacancy-card {
  transition: border-color var(--default-transition-duration);
}
.vacancy-card:hover {
  border-color: var(--border-strong);
}
.vacancy-image {
  width: calc(var(--spacing) * 9);
  height: calc(var(--spacing) * 9);
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.legend-swatch {
  width: calc(var(--spacing) * 2.5);
  height: calc(var(--spacing) * 2.5);
  border-radius: var(--radius-mark);
}
/* Fixed-height box for a responsive chart canvas. */
.chart-frame {
  position: relative;
  height: calc(var(--spacing) * 65);
}
.numbered {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 1.5);
  padding-left: 1.25em;
  list-style: decimal;
}
.next-steps p {
  line-height: var(--leading-lead);
}

/* --- Filter toolbar (compact controls in a row, above a list) ------------------------------ */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--spacing) * 2);
}
.toolbar .field {
  gap: calc(var(--spacing) * 1.5);
  flex: 1 1 calc(var(--spacing) * 40);
  max-width: calc(var(--spacing) * 60);
}
.toolbar .label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-normal);
  color: var(--muted-foreground);
}
.toolbar input:not([type="checkbox"], [type="radio"]),
.toolbar select {
  height: calc(var(--spacing) * 8) !important;
  font-size: var(--text-control);
}
.toolbar .btn {
  height: calc(var(--spacing) * 8);
}
.person {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2.5);
  min-width: 0;
}
.person .avatar {
  width: calc(var(--spacing) * 7);
  height: calc(var(--spacing) * 7);
  font-size: var(--text-3xs);
}
.status-cell {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 1.5);
  min-width: calc(var(--spacing) * 40);
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2.5);
  font-size: var(--text-control);
}
.contact-list li {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2.5);
  min-width: 0;
  color: var(--muted-foreground);
}
.contact-list a:hover {
  color: var(--foreground);
}
.photo {
  max-width: calc(var(--spacing) * 40);
}
.card > .card-band:last-child {
  margin-bottom: calc(var(--spacing) * -5);
  border-bottom: 0;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* --- Data table with Excel-style header filters ------------------------------------------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
}
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 calc(var(--spacing) * 70);
  max-width: calc(var(--spacing) * 105);
}
.search-box > .icon {
  position: absolute;
  left: calc(var(--spacing) * 2.5);
  color: var(--muted-foreground);
  pointer-events: none;
}
.search-box input {
  width: 100%;
  height: calc(var(--spacing) * 8.5);
  padding: 0 calc(var(--spacing) * 3) 0 calc(var(--spacing) * 8);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--card);
  font-size: var(--text-control);
  outline: none;
}
.search-box input:focus-visible {
  border-color: color-mix(in srgb, var(--ring) 70%, transparent);
  box-shadow: var(--focus-ring-field);
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  height: calc(var(--spacing) * 7);
  padding: 0 calc(var(--spacing) * 2) 0 calc(var(--spacing) * 2.5);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-foreground);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.filter-chip:hover {
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
}
.filter-chip-add {
  padding: 0 calc(var(--spacing) * 2.5) 0 calc(var(--spacing) * 2);
  border: 1px dashed var(--border-strong);
  background: transparent;
  color: var(--muted-foreground);
}
.filter-chip-add:hover,
.filter-chip-add[aria-expanded="true"] {
  border-color: var(--input);
  background: var(--card);
  color: var(--foreground);
}
.add-filter-menu {
  left: 0;
  right: auto;
  width: calc(var(--spacing) * 75);
  max-height: 70vh;
  overflow-y: auto;
}
.add-filter > summary {
  list-style: none;
  cursor: pointer;
}
.add-filter > summary::-webkit-details-marker {
  display: none;
}
.add-filter[open] > summary {
  font-weight: var(--font-weight-medium);
}
.add-filter-body {
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 1) calc(var(--spacing) * 2);
}

.table-filterable th {
  padding-top: 0;
  padding-bottom: 0;
}
.th-button {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  height: calc(var(--spacing) * 7);
  margin-left: calc(var(--spacing) * -1.5);
  padding: 0 calc(var(--spacing) * 1.5);
  border-radius: var(--radius-sm);
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.th-button:hover,
.th-button[aria-expanded="true"] {
  background: var(--muted);
  color: var(--foreground);
}
.th-button .th-chevron {
  opacity: 0;
  transition: opacity var(--default-transition-duration);
}
.th-button:hover .th-chevron,
.th-button:focus-visible .th-chevron,
.th-button[aria-expanded="true"] .th-chevron {
  opacity: 0.7;
}
.th-button.is-filtered {
  color: var(--brand-ink);
}
.filter-menu {
  width: calc(var(--spacing) * 70);
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-control);
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  color: var(--popover-foreground);
  white-space: normal;
}
.filter-menu.is-fixed {
  position: fixed;
  right: auto;
}
.filter-sort {
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 1) 0;
}
.filter-sort .menu-item[aria-current="true"] {
  background: var(--muted);
  font-weight: var(--font-weight-medium);
}
.filter-body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
}
.filter-footer {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
  border-top: 1px solid var(--line);
}
.add-filter-body .filter-footer,
.add-filter-body .filter-body {
  padding-left: calc(var(--spacing) * 1);
  padding-right: calc(var(--spacing) * 1);
}
.option-list {
  display: flex;
  flex-direction: column;
  max-height: calc(var(--spacing) * 55);
  overflow-y: auto;
  margin: 0 calc(var(--spacing) * -1);
}
.option {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: calc(var(--spacing) * 7.5);
  padding: 0 calc(var(--spacing) * 1.5);
  border-radius: var(--radius-sm);
  font-size: var(--text-control);
  cursor: pointer;
}
.option:hover {
  background: var(--muted);
}
.option-all {
  margin: 0 calc(var(--spacing) * -1);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--muted-foreground);
}
.option-count {
  font-size: var(--text-2xs);
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
.input.input-sm {
  height: calc(var(--spacing) * 7.5);
  font-size: var(--text-xs);
}
.input.input-xs {
  width: auto;
  height: calc(var(--spacing) * 7);
  padding: 0 calc(var(--spacing) * 7) 0 calc(var(--spacing) * 2);
  font-size: var(--text-xs);
  background-position: right calc(var(--spacing) * 1.5) center;
}
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(var(--spacing) * 2.5) center;
}
.row-clickable {
  position: relative;
}
.row-clickable .stretched::after {
  content: "";
  position: absolute;
  inset: 0;
}
.table-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5);
  border-top: 1px solid var(--line);
}
.pagination {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 0.5);
}
.page-link,
.page-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--spacing) * 7.5);
  height: calc(var(--spacing) * 7.5);
  padding: 0 calc(var(--spacing) * 2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
}
.page-link:hover {
  background: var(--muted);
}
.page-link[aria-current="page"] {
  border-color: var(--input);
  background: var(--card);
  font-weight: var(--font-weight-medium);
}
.page-gap {
  color: var(--muted-foreground);
}
.tabs-list .tab[aria-current="page"] .count {
  background: var(--accent);
  color: var(--accent-foreground);
}

/* --- Hub page: groups of page links as cards (a settings or reports overview) ----------------------- */

/* <div class="hub-grid" id="…"> > section.card.hub-card[data-hub-group] (.card-title, ul.hub-links >
   li[data-hub-item] > a.hub-link). A .search-box.hub-search input[data-hub-filter="<grid id>"] narrows it;
   [data-hub-empty="<grid id>"] shows when nothing matches (ui.js). */

/* Cards flow into balanced columns (a long group doesn't leave gaps beside short ones). */
.hub-grid {
  columns: 1;
  column-gap: calc(var(--spacing) * 4);
}
@media (min-width: 900px) {
  .hub-grid {
    columns: 2;
  }
}
@media (min-width: 1280px) {
  .hub-grid {
    columns: 3;
  }
}
.hub-card {
  break-inside: avoid;
  margin-bottom: calc(var(--spacing) * 4);
}
.hub-card[hidden] {
  display: none;
}
.hub-links {
  display: flex;
  flex-direction: column;
  margin: 0 calc(var(--spacing) * -2);
}
.hub-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
  min-height: calc(var(--spacing) * 8.5);
  padding: 0 calc(var(--spacing) * 2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--foreground);
}
.hub-link .icon {
  color: var(--muted-foreground);
  opacity: 0;
  transition: opacity var(--default-transition-duration);
}
.hub-link:hover,
.hub-link:focus-visible {
  background: var(--muted);
  outline: none;
}
.hub-link:hover .icon,
.hub-link:focus-visible .icon {
  opacity: 1;
}
.hub-search {
  width: calc(var(--spacing) * 72);
}
@media (max-width: 639px) {
  .hub-search {
    width: 100%;
  }
}

/* --- Journey tabs: the related pages of one journey, as links under the page header ---------------- */

/* <nav class="tabs-list underline journey-tabs"> > a.tab[aria-current="page"] for the current one. */

.journey-tabs {
  margin-top: calc(var(--spacing) * 1);
}
.journey-tabs .tab[aria-current="page"] {
  color: var(--foreground);
}
/* A count badge at the end of a sidebar link (pending approvals). */
.nav-count {
  margin-left: auto;
}

/* --- Needs-attention feed -------------------------------------------------------------- */

.attention {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1100px) {
  .attention {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.attention-group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
  border-top: 1px solid var(--line);
}
@media (min-width: 1100px) {
  .attention-group:nth-child(even) {
    border-left: 1px solid var(--line);
  }
}
.attention-head {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 2);
}
.attention-list {
  display: flex;
  flex-direction: column;
}
.attention-row {
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
  margin: 0 calc(var(--spacing) * -2);
  border-radius: var(--radius-md);
  font-size: var(--text-control);
}
.attention-row:hover {
  background: var(--muted);
}
.whitespace-nowrap {
  white-space: nowrap;
}
.menu-item-destructive,
.menu-item-destructive .icon {
  color: var(--destructive);
}
.menu-item-destructive:hover {
  background: var(--danger-soft);
}
.choice-row {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2.5);
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: var(--text-control);
  font-weight: var(--font-weight-medium);
}
.choice-row:hover {
  border-color: var(--border-strong);
  background: var(--muted);
}
.choice-row .icon:first-child {
  color: var(--muted-foreground);
}
.card[id] { scroll-margin-top: calc(var(--topbar-height) + var(--spacing) * 4); }
/* Dense data-entry screens (payroll inputs, report filters): four columns on wide screens. */
@media (min-width: 1100px) {
  .form-grid.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 640px) and (max-width: 1099px) {
  .form-grid.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.form-grid.cols-1 {
  grid-template-columns: minmax(0, 1fr) !important;
}
.field-hint ul {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 0.5);
  padding-left: 1.1em;
  list-style: disc;
}

/* --- Accordion (native <details>) ------------------------------------------------------- */
/* <div class="accordion"><details class="accordion-item" open><summary>Title</summary>
   <div class="accordion-content">…</div></details>…</div>. Sections of a long form or of a
   page; one card holds the stack, items are divided by hairlines. */

.accordion {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  overflow: hidden;
}
.accordion-item + .accordion-item {
  border-top: 1px solid var(--line);
}
.accordion-item > summary {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
  list-style: none;
  cursor: pointer;
  font-size: var(--text-card-title);
  line-height: var(--text-card-title--line-height);
  letter-spacing: var(--text-card-title--letter-spacing);
  font-weight: var(--text-card-title--font-weight);
}
.accordion-item > summary::-webkit-details-marker {
  display: none;
}
.accordion-item > summary:hover {
  background: color-mix(in srgb, var(--muted) 50%, transparent);
}
.accordion-item > summary:focus-visible {
  outline: none;
  box-shadow: inset var(--focus-ring);
}
/* A chevron drawn with borders, so the markup needs no icon. */
.accordion-item > summary::after {
  content: "";
  width: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 2);
  margin-left: auto;
  border-right: 2px solid var(--muted-foreground);
  border-bottom: 2px solid var(--muted-foreground);
  transform: rotate(45deg) translateY(-25%);
  transition: transform var(--duration-slow) var(--ease-out);
}
.accordion-item[open] > summary::after {
  transform: rotate(-135deg) translateY(-25%);
}
.accordion-summary-meta {
  font-size: var(--text-control);
  font-weight: var(--font-weight-normal);
  color: var(--muted-foreground);
}
.accordion-content {
  padding: 0 calc(var(--spacing) * 5) calc(var(--spacing) * 5);
}

/* --- Toast ------------------------------------------------------------------------------ */
/* <div class="toast-region"><div class="toast toast-success" role="status"><svg class="icon">…
   </svg><span>Saved.</span></div></div>. Bottom-right stack; status by an icon and a tint. */

.toast-region {
  position: fixed;
  inset: auto calc(var(--spacing) * 4) calc(var(--spacing) * 4) auto;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--spacing) * 2);
  width: min(var(--container-sm), calc(100vw - var(--spacing) * 8));
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 2.5);
  width: 100%;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3.5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-control);
  line-height: var(--leading-snug);
  pointer-events: auto;
  cursor: pointer;
  animation: pop-in 0.18s ease-out;
  transition: opacity var(--duration-slow) var(--ease-out);
}
.toast > .icon {
  margin-top: calc(var(--spacing) * 0.25);
}
.toast-success > .icon {
  color: var(--success);
}
.toast-error > .icon {
  color: var(--destructive);
}
.toast-warning > .icon {
  color: var(--warning);
}
.toast-info > .icon {
  color: var(--info);
}
.toast[data-leaving] {
  opacity: 0;
}

/* --- Spinner and busy overlay --------------------------------------------------------- */

.spinner {
  display: inline-block;
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
  border: 2px solid var(--border);
  border-top-color: var(--brand);
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
}
.spinner-sm {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}
/* Covers the page (or the open dialog) while a request runs. */
.busy-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 3);
  background: color-mix(in srgb, var(--background) 60%, transparent);
  backdrop-filter: blur(var(--blur-overlay));
  font-size: var(--text-control);
  color: var(--muted-foreground);
}
.busy-overlay[hidden] {
  display: none;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Switch (a checkbox drawn as a toggle) --------------------------------------------- */

input[type="checkbox"].switch {
  appearance: none;
  position: relative;
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 4.5);
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--input);
  cursor: pointer;
  transition: background-color var(--default-transition-duration);
}
input[type="checkbox"].switch::after {
  content: "";
  position: absolute;
  top: calc(var(--spacing) * 0.5);
  left: calc(var(--spacing) * 0.5);
  width: calc(var(--spacing) * 3.5);
  height: calc(var(--spacing) * 3.5);
  border-radius: var(--radius-full);
  background: var(--card);
  box-shadow: var(--shadow-xs);
  transition: transform var(--default-transition-duration) var(--ease-out);
}
input[type="checkbox"].switch:checked {
  background: var(--brand);
}
input[type="checkbox"].switch:checked::after {
  transform: translateX(calc(var(--spacing) * 3.5));
}
input[type="checkbox"].switch:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
input[type="checkbox"].switch:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}