/* Flag shadcn/ui parity — opt-in Tier A twins of the @flag registry items
 * (ElcanoTek/flag, design-system/components/shadcn-parity.css; MIT, see LICENSE
 * in Flag's design-system/).
 *
 * Plain CSS for the registry items components.css has no class for (button
 * outline/link/sizes, radio, alert, separator, line tabs, modal, sheet,
 * popover, menu, tooltip, skeleton, avatar, scroll area, toast, command,
 * clickable table rows, extra badges), so a server-rendered page can match a
 * Tier B app component for component. The mapping is Flag's
 * design-system/COMPONENTS.md "shadcn/ui (Tier B) Mapping".
 *
 * Load after fonts/fonts.css, tokens/design-tokens.css and
 * components/components.css; it builds on their classes and reads tokens
 * only, except --flag-on-accent below. Every hover and pressed style carries
 * the disabled gate, like components.css. Never edit a vendored copy: ask
 * Flag for the change. Flag's preview loads a byte-identical copy
 * (preview/shadcn-parity.css, refreshed by design-system/sync-preview.sh).
 */

/* The label on a --color-accent fill (.badge-accent): 8.3:1 on the dark
 * accent, 5.3:1 on the light one. Scoped to this file rather than the token
 * sheet; scripts/check_tokens.py reads and measures it in both themes. */
:root {
  --flag-on-accent: #1a0b1e;
}

:root[data-theme="light"] {
  --flag-on-accent: #ffffff;
}

/* Button variants and sizes beyond primary/secondary/ghost/danger. States
   (lift, press, focus ring, disabled) come from .btn. */
.btn-outline {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.btn-outline:where(:not(:disabled, [aria-disabled="true"], .is-disabled)):hover {
  border-color: var(--color-accent);
  background: var(--color-overlay-soft);
}

.btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--color-link);
  text-underline-offset: 4px;
}

.btn-link:where(:not(:disabled, [aria-disabled="true"], .is-disabled)):hover {
  text-decoration: underline;
  transform: none;
}

.btn-sm {
  min-height: 2rem;
  padding: 0 0.625rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-caption);
}

.btn-lg {
  min-height: 2.75rem;
  padding: 0 var(--space-4);
}

.btn-icon {
  width: 2.5rem;
  padding: 0;
  justify-content: center;
}

.btn-icon.btn-sm {
  width: 2rem;
}

.btn[aria-invalid="true"] {
  border-color: var(--color-danger);
}

@media (prefers-reduced-motion: reduce) {
  .btn:where(:not(:disabled, [aria-disabled="true"], .is-disabled)):hover,
  .btn:where(:not(:disabled, [aria-disabled="true"], .is-disabled)):active {
    transform: none;
  }
}

/* Radio (radio-group): the file-radio circle as a standalone control. */
input[type="radio"].ds-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  flex: 0 0 1rem;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--color-control-border);
  background: var(--color-surface-1);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

input[type="radio"].ds-radio:where(:not(:disabled, [aria-disabled="true"], .is-disabled)):hover {
  border-color: var(--color-accent);
}

input[type="radio"].ds-radio:checked {
  border-color: var(--color-secondary);
  background:
    radial-gradient(circle, var(--color-secondary) 0 38%, transparent 42%),
    var(--color-surface-1);
  box-shadow: var(--shadow-control-selected);
}

input[type="radio"].ds-radio:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

input[type="radio"].ds-radio:disabled {
  border-color: var(--color-border);
  background: var(--color-overlay-soft);
  box-shadow: none;
  cursor: not-allowed;
}

input[type="radio"].ds-radio:disabled:checked {
  background:
    radial-gradient(circle, var(--color-text-disabled) 0 38%, transparent 42%),
    var(--color-overlay-soft);
}

/* Alert: a banner on a status tint (Error States, state-panel look). Text
   takes the last column, with or without a leading icon. */
.alert {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--space-3);
  row-gap: 0.125rem;
  align-items: start;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-1);
  color: var(--color-text-primary);
  font-size: var(--font-size-body-md);
}

.alert.has-icon,
.toast.has-icon {
  grid-template-columns: auto 1fr;
}

@supports selector(:has(*)) {
  .alert:has(> svg),
  .toast:has(> svg) {
    grid-template-columns: auto 1fr;
  }
}

.alert > :not(svg),
.toast > :not(svg) {
  grid-column: -2 / -1;
}

.alert > svg {
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  grid-row: span 2;
}

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

.alert__description {
  color: var(--color-text-secondary);
}

/* Variant text is the status -fg, measured at 4.5:1 on its own tint. */
.alert--info { background: var(--color-status-assigned-bg); border-color: var(--color-status-assigned-border); color: var(--color-status-assigned-fg); }
.alert--success { background: var(--color-status-success-bg); border-color: var(--color-status-success-border); color: var(--color-status-success-fg); }
.alert--warning { background: var(--color-status-warning-bg); border-color: var(--color-status-warning-border); color: var(--color-status-warning-fg); }
.alert--destructive { background: var(--color-status-error-bg); border-color: var(--color-status-error-border); color: var(--color-status-error-fg); }

:is(.alert--info, .alert--success, .alert--warning, .alert--destructive) .alert__description {
  color: inherit;
}

/* Separator */
.separator {
  border: 0;
  margin: 0;
  height: 1px;
  background: var(--color-border);
}

.separator--vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
}

/* Tabs, line variant (page tabs). The default variant is .seg. */
.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

.tab {
  margin-bottom: -1px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.tab:where(:not(:disabled, [aria-disabled="true"], .is-disabled)):hover {
  color: var(--color-text-primary);
  background: var(--color-overlay-soft);
}

.tab:where(:not(:disabled, [aria-disabled="true"], .is-disabled)):active {
  background: var(--color-selected-bg);
}

.tab[aria-selected="true"] {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-accent);
}

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

.tab:disabled,
.tab[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Modal (dialog, alert-dialog): <dialog class="modal">, opened with
 * showModal() so Escape and focus containment come from the browser. */
.modal {
  width: min(32rem, calc(100% - 2rem));
  padding: var(--space-6);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  background: var(--color-surface-1);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
}

.modal::backdrop,
.sheet::backdrop {
  background: var(--color-scrim);
  backdrop-filter: blur(3px);
}

.modal__header {
  display: grid;
  gap: var(--space-2);
  padding-right: var(--space-8);
  margin-bottom: var(--space-4);
}

.modal__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-subtitle);
  font-weight: var(--font-weight-bold);
}

.modal__description {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-md);
}

.modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

@media (max-width: 39.9375rem) {
  .modal__footer {
    flex-direction: column-reverse;
  }
}

/* Sheet: the modal surface docked to an edge (<dialog class="sheet">). */
.sheet {
  position: fixed;
  margin: 0;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0 solid var(--color-border-strong);
  background: var(--color-surface-1);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
}

.sheet--right { inset: 0 0 0 auto; width: min(24rem, 75%); height: 100%; border-left-width: 1px; }
.sheet--left { inset: 0 auto 0 0; width: min(24rem, 75%); height: 100%; border-right-width: 1px; }
.sheet--top { inset: 0 0 auto 0; width: 100%; border-bottom-width: 1px; }
.sheet--bottom { inset: auto 0 0 0; width: 100%; border-top-width: 1px; }

/* Popover surface (popover, menus, the command list). */
.popover,
.menu {
  border: 1px solid var(--color-selected-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-popover);
}

.popover {
  width: 18rem;
  max-width: calc(100vw - 2rem);
  padding: var(--space-4);
}

/* Menu (dropdown-menu): role="menu" with role="menuitem" rows. The active
   row is the picker's active-row treatment. */
.menu {
  min-width: 8rem;
  padding: var(--space-1);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0.375rem var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-body-md);
  text-align: left;
  cursor: pointer;
}

.menu-item:where(:not(:disabled, [aria-disabled="true"], .is-disabled)):hover,
.menu-item:focus-visible {
  outline: none;
  background: var(--color-selected-bg);
  box-shadow: inset 0 0 0 1px var(--color-row-active-border);
}

.menu-item:where(:not(:disabled, [aria-disabled="true"], .is-disabled)):active {
  background: var(--color-selected-bg);
  box-shadow: inset 0 0 0 2px var(--color-row-active-border);
}

.menu-item:disabled,
.menu-item[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.menu-item--destructive {
  color: var(--color-status-error-fg);
}

.menu-item--destructive:where(:not(:disabled, [aria-disabled="true"], .is-disabled)):hover,
.menu-item--destructive:focus-visible {
  background: var(--color-status-error-bg);
  box-shadow: inset 0 0 0 1px var(--color-status-error-border);
}

.menu-label {
  padding: var(--space-2) var(--space-2) var(--space-1);
  font-family: var(--font-code);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.menu-separator {
  height: 1px;
  margin: var(--space-1) calc(-1 * var(--space-1));
  border: 0;
  background: var(--color-divider);
}

/* Tooltip: role="tooltip", named by aria-describedby on its trigger. */
.tooltip {
  max-width: 20rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--color-selected-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  box-shadow: var(--shadow-popover);
}

/* Skeleton: loading placeholder; pair with polite live-region text. */
.skeleton {
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  animation: flag-skeleton-pulse 2s ease-in-out infinite;
}

@keyframes flag-skeleton-pulse {
  50% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}

/* Avatar */
.avatar {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  border-radius: 50%;
}

.avatar--sm { width: 1.5rem; height: 1.5rem; }
.avatar--lg { width: 2.5rem; height: 2.5rem; }

.avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.avatar--sm .avatar__fallback { font-size: var(--font-size-overline); }

/* Scroll area: native overflow with a slim themed thumb; focusable
 * (tabindex="0") so it scrolls from the keyboard. */
.scroll-area {
  overflow: auto;
  border-radius: var(--radius-md);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.scroll-area:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Toast (sonner): a polite live region of popover-surface cards. */
.toast-region {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 50;
  display: grid;
  gap: var(--space-2);
  width: min(22rem, calc(100vw - 2rem));
}

.toast {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.125rem var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-selected-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  font-size: var(--font-size-body-md);
  box-shadow: var(--shadow-popover);
}

.toast > svg { width: 1rem; height: 1rem; margin-top: 0.2rem; grid-row: span 2; }
.toast__description { color: var(--color-text-secondary); }
/* Status icons use the base status colors, measured at 4.5:1 on every
   surface (check_tokens.py), so they clear 3:1 on the popover surface. */
.toast--success > svg { color: var(--color-success); }
.toast--warning > svg { color: var(--color-warning); }
.toast--error > svg { color: var(--color-danger); }
.toast--info > svg { color: var(--color-link); }

/* Command: a searchable list in the connection-picker language
 * (role="combobox" input + role="listbox"; the active option carries
 * aria-selected="true"). */
.command {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-selected-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-popover);
}

.command__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 2.75rem;
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}

.command__search:focus-within {
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

.command__search input {
  height: 2.5rem;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--font-size-body-md);
}

/* The row's accent underline is the focus indicator for the field. */
.command__search input:focus-visible {
  box-shadow: none;
}

.command__list {
  max-height: 18.75rem;
  overflow-y: auto;
  padding: var(--space-1);
}

.command__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-body-md);
  cursor: pointer;
}

.command__item:where(:not(:disabled, [aria-disabled="true"], .is-disabled)):hover {
  background: var(--color-overlay-soft);
}

.command__item[aria-selected="true"] {
  background: var(--color-selected-bg);
  box-shadow: inset 0 0 0 1px var(--color-row-active-border);
}

.command__item[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Table: row hover only for clickable rows (TableRow interactive). */
tr.is-interactive {
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

tr.is-interactive:where(:not(:disabled, [aria-disabled="true"], .is-disabled)):hover {
  background: var(--color-overlay-soft);
}

tr.is-interactive:where(:not(:disabled, [aria-disabled="true"], .is-disabled)):active {
  background: var(--color-selected-bg);
}

tr.is-interactive:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.table-wrap tr[aria-selected="true"] {
  background: var(--color-selected-bg);
}

/* Badge fills for the registry's non-status variants. */
.badge-default { background: var(--color-primary-fill); border-color: var(--color-primary-fill); color: var(--color-on-primary-fill); }
.badge-secondary { background: var(--color-surface-2); color: var(--color-text-primary); }
.badge-outline { background: transparent; color: var(--color-text-primary); }
.badge-accent { background: var(--color-accent); border-color: var(--color-accent); color: var(--flag-on-accent); }

/* Small select (SelectTrigger size="sm"). */
.select-wrap--sm select {
  min-height: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-caption);
}