/* 2base component layer — reusable controls and surfaces. */
/* Form system */
.app-form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--gray-700);
}

.app-form-help {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--color-text-muted);
}

.app-form-field,
.app-form-textarea {
  width: 100%;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--gray-900);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.app-form-field {
  min-height: 3rem;
  padding: 0.75rem 1rem;
}

.app-form-textarea {
  min-height: 7rem;
  padding: 0.75rem 1rem;
  resize: vertical;
}

.app-form-field--sm {
  min-height: 2.625rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-sm);
}

.app-form-field:hover,
.app-form-textarea:hover {
  border-color: var(--color-border-hover);
}

.app-form-field:focus,
.app-form-textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: var(--ring-focus);
}

select.app-form-field {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.5rem;
  background-image: var(--icon-select-chevron);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}

.app-form-field:disabled,
.app-form-textarea:disabled {
  background: var(--color-surface-soft);
  color: var(--color-text-faint);
  cursor: not-allowed;
}

.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.75rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.app-btn:hover {
  transform: none;
}

.app-btn:active {
  transform: none;
}

.app-btn:focus {
  outline: none;
}

.app-btn:focus-visible {
  box-shadow: var(--ring-focus);
}

.app-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.app-btn[aria-busy="true"] {
  cursor: progress;
}

.app-btn[aria-busy="true"] > :not(.app-btn__spinner) {
  opacity: 0.72;
}

.app-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.app-icon-btn:hover {
  border-color: var(--color-border-hover);
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.app-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.app-icon-btn:disabled {
  color: var(--color-text-faint);
  cursor: not-allowed;
}

.app-link-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--color-border-hover);
  text-underline-offset: 0.2em;
}

.app-link-button:hover {
  color: var(--ink-hover);
  text-decoration-color: currentColor;
}

.app-link-button:focus-visible {
  outline: none;
  border-radius: var(--radius-xs);
  box-shadow: var(--ring-focus);
}
.app-btn--sm {
  min-height: 2.375rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
}

/* Mobile and touch-device override: bump compact controls to the WCAG 2.5.5
   / Apple HIG / Material 44px minimum. The width rule also covers a narrow
   desktop window, where a 32px control would still be hard to operate. */
@media (max-width: 63.99rem), (hover: none) and (pointer: coarse) {
  .app-form-field--sm,
  .app-btn--sm,
  .app-native-select--sm,
  .app-touch-target,
  .hdr-icon-btn,
  .mega__trigger,
  .nav-top,
  .fp-pill,
  .fp-modal__close,
  .fp-rail-item,
  .fp-list-row,
  .home-hero__preset,
  .pg-btn,
  .ctab-dots,
  .ctab-sort,
  .ctab-menu__item,
  .ctab-bar__act,
  .cov-row,
  .qp-btn,
  .cc-action {
    min-height: 2.75rem;
  }

  .qp-btn {
    height: 2.75rem;
  }

  .ctab-bar__act {
    display: inline-flex;
    align-items: center;
  }

  /* Footer link list — expand each row to a 44px tap area on touch. */
  footer ul li a,
  footer ul li {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
  }
}

/* Primary button is the mockup ink CTA; hover becomes subtly lighter.
   (dark buttons lighten on hover). White on ink is 17.4:1 — WCAG AAA. */
.app-btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--color-text-inverse);
  box-shadow: none;
}

.app-btn--primary:hover {
  background: var(--ink-hover);
  border-color: var(--ink-hover);
}

.app-btn--primary:focus {
  box-shadow: var(--ring-focus);
}

.app-btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-border-soft);
  color: var(--color-text-secondary);
}

.app-btn--secondary:hover {
  border-color: var(--color-border-hover);
  background: var(--color-surface-soft);
  color: var(--color-text-primary);
}

.app-btn--secondary:focus {
  box-shadow: var(--ring-focus-neutral);
}

.app-btn--ghost {
  background: var(--brand-50);
  border-color: var(--brand-100);
  color: var(--brand-700);
}

.app-btn--ghost:hover {
  background: var(--color-action-ghost-hover);
  border-color: var(--color-action-ghost-border);
}

.app-btn--ghost:focus {
  box-shadow: var(--ring-focus);
}

.app-btn--danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-text-inverse);
}

.app-btn--danger:hover {
  background: var(--color-danger-strong);
  border-color: var(--color-danger-strong);
}

.app-btn--danger:focus {
  box-shadow: var(--ring-focus-danger);
}

.app-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  line-height: 1rem;
}

/* On-state chip. Same language as .app-choice-pill.is-selected and
   .tool-tab--active: marker fill, ink text, no visible border. Ink stays
   reserved for money buttons — a filter that is merely "on" must not carry
   the same weight as "Открыть в базе". */
.app-chip--active {
  border-color: transparent;
  background: var(--marker);
  color: var(--ink);
  font-weight: 600;
}

/* Public surfaces and content cards */
.app-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: none;
}

.app-card--padded {
  padding: 1.5rem;
}

.app-card--soft {
  background: var(--color-surface-soft);
  border-color: var(--gray-200);
  box-shadow: none;
}

.app-card--tint {
  background: var(--tint);
  border-color: var(--gray-200);
  box-shadow: none;
}

.app-stat-tile {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 1.25rem;
}

.app-stat-tile__label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-text-muted);
}

.app-stat-tile__value {
  margin-top: 0.35rem;
  color: var(--gray-900);
  font-weight: 700;
}

.app-link-card {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 1.15rem 1.2rem;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.app-link-card:hover {
  border-color: var(--color-border-hover);
  background: var(--brand-50);
  box-shadow: none;
  transform: none;
}

/* eyebrow is decorative but Lighthouse flags it as text — bump to gray-600
   (7.5:1 on white) so it always passes WCAG AA, including on tinted card backgrounds. */
.app-link-card__eyebrow {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.app-link-card__title {
  margin-top: 0.35rem;
  color: var(--gray-900);
  font-weight: 600;
}

.app-link-card__text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.35rem;
  color: var(--color-text-secondary);
}

.app-note {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  padding: 1rem 1.1rem;
  font-size: 0.875rem;
  line-height: 1.4rem;
  color: var(--color-text-secondary);
}

.app-note--tint {
  background: var(--tint);
  border-color: var(--gray-200);
}

/* Status note variants — referenced across 10+ templates (company unlock
   notice/error, account_wallet, order_status, wallet_topup_status, admin
   forms) but were never defined, so the status colour silently fell back to
   the neutral note surface. Palette mirrors .app-status-badge--* so a note and
   a badge for the same state read identically. */
.app-note--success {
  background: var(--marker-tint);
  border-color: var(--marker);
  color: var(--ink);
}

.app-note--danger {
  background: var(--color-danger-surface);
  border-color: var(--color-danger-border);
  color: var(--color-danger-strong);
}

/* Inline "this will cost you data" text. Same red as the danger note so the
   one remaining warning colour is declared once, not typed as a raw Tailwind
   shade at each call site. */
.app-text-danger {
  color: var(--color-danger-strong);
  font-weight: 500;
}

.app-note--warning {
  background: var(--color-warning-surface);
  border-color: var(--color-warning-border);
  color: var(--color-warning-strong);
}

.app-cta-band {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--tint);
  padding: 2rem;
}

/* Shared data, status, selection and pagination components. */
/* Single canonical table component (T12 unification, 2026-07-03) — used on both
   admin panels and public pages. Formerly split into .app-table (admin) and the
   near-duplicate .app-data-table (public); merged onto this definition, public
   templates renamed app-data-table -> app-table. Wrap in .app-table-wrap
   (admin, bleeds to a padded panel's edge) or a plain overflow-x-auto div
   (public) so a wide table scrolls instead of blowing out the layout. */
.app-table-wrap {
  overflow-x: auto;
}

.app-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
}

.app-table thead tr {
  background: var(--gray-50);
}

.app-table th {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--gray-200);
  text-align: left;
  color: var(--gray-500);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.app-table td {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--gray-700);
  vertical-align: middle;
}

.app-table tbody tr:last-child td {
  border-bottom: 0;
}

.app-table tbody tr:hover {
  background: var(--tint);
}

.app-row-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.app-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  white-space: nowrap;
}

/* Redesign 2026-07: the decorative variants join the ink system — the mockup
   palette has no green, blue or purple. Warning and danger keep their
   conventional colour: those two carry real risk and must not read as neutral
   chrome (a "заказ отменён" badge in gray is a badge nobody notices). */
.app-status-badge--success {
  background: var(--marker-tint);
  color: var(--ink);
}

.app-status-badge--warning {
  background: var(--color-warning-tint);
  color: var(--color-warning-strong);
}

.app-status-badge--info {
  background: var(--tint);
  color: var(--gray-600);
}

.app-status-badge--danger {
  background: var(--color-danger-tint);
  color: var(--color-danger-strong);
}

.app-status-badge--neutral {
  background: var(--gray-100);
  color: var(--gray-600);
}

.app-status-badge--accent {
  background: var(--tint);
  color: var(--ink);
}

.app-dot-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.app-dot-status__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.app-dot-status--success {
  color: var(--color-success-strong);
}

.app-dot-status--success .app-dot-status__dot {
  background: var(--color-success-dot);
}

.app-dot-status--danger {
  color: var(--color-danger);
}

.app-dot-status--danger .app-dot-status__dot {
  background: var(--color-danger-dot);
}

.app-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-data);
  font-size: 0.875rem;
}

.app-pagination__meta {
  color: var(--gray-500);
}

.app-pagination__links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.app-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--color-border-link-hover);
  border-radius: 0.8rem;
  background: var(--color-surface);
  color: var(--gray-600);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.app-page-link:focus-visible,
.app-choice-pill:focus-visible,
.app-select__option:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: var(--ring-focus);
}
.app-page-link:hover {
  border-color: var(--color-border-hover);
  background: var(--gray-50);
  color: var(--gray-900);
}

.app-page-link.is-current {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--color-text-inverse);
}

.app-stat-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: none;
  padding: 1.25rem;
}

.app-stat-card__row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.app-stat-card__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.app-stat-card__label {
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-400);
}

.app-stat-card__value {
  margin-top: 0.15rem;
  font-size: 1.75rem;
  line-height: 2rem;
  font-weight: 700;
  color: var(--gray-900);
}

.app-quick-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.app-quick-link:hover {
  border-color: var(--color-border-hover);
  background: var(--gray-50);
  box-shadow: none;
  transform: none;
}

.app-quick-link__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

/* Reusable select / combobox */
.app-select__native {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.app-select {
  position: relative;
}

.app-select__trigger {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--gray-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
  box-shadow: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.app-select__trigger:hover {
  border-color: var(--muted);
  background: var(--color-surface);
}

.app-select.is-open .app-select__trigger,
.app-select__trigger:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: var(--ring-focus);
}

.app-select__value-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.app-select__label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-select__meta {
  font-size: 0.71875rem;
  line-height: 1rem;
  color: var(--muted);
}

.app-select__chevron {
  flex-shrink: 0;
  color: var(--gray-500);
  transition: transform 160ms ease;
}

.app-select__chevron svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.app-select.is-open .app-select__chevron {
  transform: rotate(180deg);
}

.app-select__panel {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  right: 0;
  z-index: 40;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-mega);
  overflow: hidden;
}

.app-select__search {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.75rem;
  border-bottom: 1px solid var(--tint);
  background: var(--color-surface-overlay);
  backdrop-filter: blur(8px);
}

.app-select__search-input {
  width: 100%;
  min-height: 2.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0 0.875rem;
  background: var(--tint);
  color: var(--gray-900);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.app-select__search-input:focus {
  border-color: var(--ink);
  box-shadow: var(--ring-focus);
  outline: none;
  background: var(--color-surface);
}

.app-select__list {
  max-height: 18rem;
  overflow: auto;
  padding: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}

.app-select__list::-webkit-scrollbar {
  width: 10px;
}

.app-select__list::-webkit-scrollbar-track {
  background: transparent;
}

.app-select__list::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 999px;
  border: 2px solid var(--color-surface);
}

.app-select__option {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: var(--radius-xs);
  padding: 0.625rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
  color: var(--gray-900);
  transition: background-color 140ms ease, color 140ms ease;
}

.app-select__option:hover,
.app-select__option.is-highlighted {
  background: var(--gray-50);
}

.app-select__option.is-selected {
  background: var(--tint);
  color: var(--ink);
}

.app-select__option-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.app-select__option-label {
  font-size: 0.84375rem;
  line-height: 1.25rem;
}

.app-select__option-meta {
  font-size: 0.71875rem;
  line-height: 1rem;
  color: var(--muted);
}

.app-select__empty {
  padding: 0.875rem 1rem 1rem;
  color: var(--gray-500);
  font-size: 0.875rem;
}

.app-select__check {
  flex-shrink: 0;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
}

/* Lightweight styled native selects for dense admin UI */
.app-native-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 2.5rem 0.625rem 0.875rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  background-image: var(--icon-select-chevron);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  color: var(--gray-900);
  box-shadow: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.app-native-select:hover {
  border-color: var(--muted);
}

.app-native-select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: var(--ring-focus);
}

.app-native-select--sm {
  min-height: 2.25rem;
  padding: 0.45rem 2rem 0.45rem 0.7rem;
  border-radius: 0.75rem;
  background-position: right 0.6rem center;
  background-size: 0.95rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

.app-native-select--inline {
  width: auto;
}

/* Choice pills and checkbox controls */
.app-choice-pill {
  min-height: 2.875rem;
  padding: 0.625rem 0.9rem;
  border: 1px solid var(--color-border-link-hover);
  border-radius: 0.9rem;
  background: var(--color-surface);
  color: var(--gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.app-choice-pill:hover {
  border-color: var(--color-border-hover);
}

/* Mockup `tgl(true)`: solid marker fill, no border, semibold ink label. The
   earlier ink-outline + lime ring read as "focused", not "chosen" — with six
   sections in the modal the buyer needs the picked option to shout. */
.app-choice-pill.is-selected {
  border-color: transparent;
  background: var(--marker);
  color: var(--ink);
  font-weight: 600;
}

.app-choice-pill.is-selected:hover {
  background: var(--marker);
}

.app-choice-pill:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--marker-tint);
}

.app-check-card {
  min-height: 3.25rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-border-link-hover);
  border-radius: 0.95rem;
  background: var(--color-surface);
  color: var(--gray-700);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

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

.app-check-card.is-selected {
  border-color: var(--ink);
  background: var(--brand-50);
  color: var(--ink);
  box-shadow: 0 0 0 3px var(--marker-tint);
}

.app-check-card:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--marker-tint);
}

.app-check-card__label {
  font-size: 0.95rem;
  line-height: 1.35rem;
}

.app-check-card__control,
.app-check-inline__control {
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid var(--gray-300);
  border-radius: 0.375rem;
  background: var(--color-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.app-check-card__control::after,
.app-check-inline__control::after {
  content: "";
  width: 0.35rem;
  height: 0.6rem;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(45deg) scale(0.8);
  transition: border-color 160ms ease;
}

.app-check-card.is-selected .app-check-card__control {
  border-color: var(--ink);
  background: var(--ink);
}

.app-check-card.is-selected .app-check-card__control::after {
  border-color: var(--color-text-inverse);
}

.app-check-inline {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--gray-600);
  cursor: pointer;
}

.app-check-inline__input,
.app-choice-pill__input,
.app-check-card__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.app-check-inline__label {
  font-size: 0.875rem;
  line-height: 1.35rem;
}

.app-check-inline:focus-within .app-check-inline__control {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--marker-tint);
}

.app-check-inline__input:checked + .app-check-inline__control {
  border-color: var(--ink);
  background: var(--ink);
}

.app-check-inline__input:checked + .app-check-inline__control::after {
  border-color: var(--color-text-inverse);
}
/* Empty and loading states use one quiet surface, not a decorative card. */
.app-empty-state {
  padding: 2rem 1rem;
  border: 1px dashed var(--color-border-hover);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
  text-align: center;
}

.app-empty-state__title {
  color: var(--color-text-primary);
  font-size: 1rem;
  font-weight: 600;
}

.app-empty-state__text {
  max-width: 36rem;
  margin: 0.5rem auto 0;
  font-size: 0.875rem;
  line-height: 1.4rem;
}

.app-skeleton {
  background: linear-gradient(90deg, var(--color-surface-soft) 25%, var(--color-surface-hover) 50%, var(--color-surface-soft) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-xs);
  animation: app-skeleton-shimmer 1.3s ease-in-out infinite;
}

@keyframes app-skeleton-shimmer {
  to { background-position: -200% 0; }
}

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