/* source: gsm-skeletons@c27f7b4 */
/* gsm-skeletons ui-primitives — base components. Reads only tokens.css vars.
 * Plain classes, no build step. Behaviour (dialog focus, delayed skeletons,
 * label wiring) lives in ui.js. Pair with elements/wcag/a11y.css.
 */

/* Screen-reader-only text. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--spacing-2);
  min-height: 32px; padding: var(--spacing-2) var(--spacing-4);
  font: inherit; font-weight: var(--font-weight-bold); cursor: pointer;
  color: var(--color-text); background: transparent;
  border: 1px solid var(--color-field-border); border-radius: var(--radius-md);
}
.btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.btn--secondary { color: var(--color-text); }
.btn--danger { color: var(--color-error); border-color: var(--color-error); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn:focus-visible, .input:focus-visible, .modal-close:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: 2px;
}

/* Fields */
.form-group { display: grid; gap: var(--spacing-1); margin-bottom: var(--spacing-3); }
.label { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text); }
.input {
  font: inherit; color: var(--color-text); background: var(--color-bg);
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-field-border); border-radius: var(--radius-md);
}
.input[aria-invalid="true"] { border-color: var(--color-error); }
.helper-text { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.error-text { font-size: var(--font-size-sm); color: var(--color-error); }

/* Cards */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.card-header, .card-body, .card-footer { padding: var(--spacing-4); }
.card-header { border-bottom: 1px solid var(--color-border); }
.card-footer { border-top: 1px solid var(--color-border); }

/* Alerts / banners. role="status" (polite) or role="alert" (urgent) goes on the element. */
.alert {
  display: flex; flex-wrap: wrap; gap: var(--spacing-2) var(--spacing-3); align-items: baseline;
  padding: var(--spacing-3) var(--spacing-4); border-radius: var(--radius-md);
  border: 1px solid currentColor; background: color-mix(in srgb, currentColor 9%, transparent);
}
.alert--error { color: var(--color-error); }
.alert--warning { color: var(--color-warning); }
.alert--success { color: var(--color-success); }
.alert--info { color: var(--color-info); }

/* Modal — markup and behaviour: GSMUI.dialog() in ui.js. */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh var(--spacing-4) var(--spacing-4); background: rgba(0, 0, 0, 0.55); overflow-y: auto;
}
.modal {
  width: min(560px, 100%); background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
}
.modal-header { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-4) var(--spacing-4) 0; }
.modal-header h2 { margin: 0; font-size: var(--font-size-lg); }
.modal-close { margin-left: auto; background: none; border: 0; color: inherit; font-size: 1.4rem; cursor: pointer; }
.modal-body { padding: var(--spacing-4); }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--spacing-2); padding: 0 var(--spacing-4) var(--spacing-4); }

/* Skeleton loader — placeholder shapes while content loads. GSMUI.skeleton()
 * shows them only after 300ms, so a fast response never flashes. */
.skeleton {
  display: block; height: 0.75em; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-skeleton) 25%, var(--color-skeleton-shine) 50%, var(--color-skeleton) 75%);
  background-size: 200% 100%; animation: gsm-skeleton 1.4s ease-in-out infinite;
}
.skeleton--text { width: 70%; }
.skeleton--wide { width: 92%; }
.skeleton--title { height: 1.4em; width: 40%; margin-bottom: var(--spacing-3); }
.skeleton-table { width: 100%; border-collapse: collapse; }
.skeleton-table td { padding: var(--spacing-3) var(--spacing-2); }
@keyframes gsm-skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }