@charset "UTF-8";

/* Public-editorial component primitives (gui-premium-upgrade S1a; design ADR-4 rule C3, ADR-9, ADR-10).
   Only new selectors live here: nothing restyles a selector declared in styles.css, so load order does not matter.
   Spacing, radius and motion come from the foundation (--fd-*) and the public roles (--pub-*); no literals. */

/* Per-input feedback message: the state is carried by .is-error / .is-success and never by color alone. */
.field-hint[data-field-message] {
  display: flex;
  align-items: baseline;
  gap: var(--fd-space-1);
}
.field-hint[data-field-message]:empty { display: none; }
.field-hint[data-field-message].is-error { color: var(--pub-feedback-danger); }
.field-hint[data-field-message].is-success { color: var(--pub-feedback-success); }

/* The glyph repeats the state for sighted users; the alt-text syntax hides it from assistive technology. */
.field-hint[data-field-message].is-error::before,
.field-hint[data-field-message].is-success::before {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  inline-size: 1.2em;
  block-size: 1.2em;
  border: 1px solid currentColor;
  border-radius: var(--fd-radius-round);
  font-size: var(--fd-text-2xs);
  font-weight: var(--fd-weight-bold);
  line-height: 1;
}
.field-hint[data-field-message].is-error::before { content: "!"; content: "!" / ""; }
.field-hint[data-field-message].is-success::before { content: "✓"; content: "✓" / ""; }

/* One polite region per document echoes single-field validation (R-3); visually hidden, never display:none. */
[data-field-feedback-live] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Loading placeholders (decorative: the markup marks them aria-hidden and keeps the status text for AT). */
.skeleton {
  display: grid;
  gap: var(--fd-space-3);
}
.skeleton__line,
.skeleton__block {
  display: block;
  background: linear-gradient(90deg, var(--pub-skeleton-base) 0%, var(--pub-skeleton-highlight) 50%, var(--pub-skeleton-base) 100%);
  background-size: 200% 100%;
  animation: public-skeleton-shimmer var(--fd-duration-shimmer) var(--fd-ease-standard) infinite;
}
.skeleton__line {
  block-size: var(--fd-space-4);
  border-radius: var(--pub-radius-mark);
}
.skeleton__block {
  min-block-size: var(--fd-space-9);
  border-radius: var(--pub-radius-surface);
}

@keyframes public-skeleton-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* A static tint stays recognizable as a placeholder. */
  .skeleton__line,
  .skeleton__block {
    animation: none;
    background: var(--pub-skeleton-base);
  }

  /* Universal safety net for every page that loads the public components (C6 allows !important here). */
  *, *::before, *::after {
    animation-duration: var(--fd-duration-instant) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--fd-duration-instant) !important;
  }
}