/* SeekersGuidance v4 — STATE DESIGN kit.
   Skeleton/loading, empty states, designed form-validation, and the
   500/maintenance surface. Token-bound, square 2px boxes, logical CSS
   (margin-inline / inset-inline / padding-block) so EN-LTR and AR-RTL render
   from one source. NO gold text (gold is decoration only; gold words use
   --gold-ink). NO italics.

   Built 2026-06-09 for the BRAND/UX FINISH KIT (PRE-DEV-READINESS-WIDE.md →
   Brand/UX: "State design is ad-hoc"). Tokens from assets/tokens.css.

   ENQUEUE: wire in functions.php (see the build's "wiring" note) AFTER
   sg-seminary-overrides so it inherits the final token values. Patterns that
   use these classes: patterns/states.php (showcase + skeleton/empty fragments),
   patterns/maintenance-500.php, templates/500.html.

   REDUCED MOTION: the shimmer + spinner animations are wrapped so they pause
   under prefers-reduced-motion locally; a GLOBAL guard for the theme's other
   ~164 motion rules is returned separately for overrides.css (do not add it
   here — keep this file scoped to state design). */

/* ════════════════════════════════════════════════════════════════════
   1. SKELETON / LOADING  — async surfaces: catalogue, search, Daily
      Answer, player. Neutral paper-toned blocks with a slow shimmer.
   ════════════════════════════════════════════════════════════════════ */

.sg-skel {
  --sg-skel-base: #EFE7D6;       /* warm paper-toned grey, on --paper */
  --sg-skel-sheen: #F8F2E6;
  display: block;
  background-color: var(--sg-skel-base, #EFE7D6);
  background-image: linear-gradient(
    90deg,
    var(--sg-skel-base, #EFE7D6) 0%,
    var(--sg-skel-sheen, #F8F2E6) 50%,
    var(--sg-skel-base, #EFE7D6) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius, 2px);
  animation: sg-skel-shimmer 1.4s ease-in-out infinite;
}
/* Direction-aware shimmer travel — flips with the document direction. */
[dir="rtl"] .sg-skel { animation-name: sg-skel-shimmer-rtl; }

@keyframes sg-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes sg-skel-shimmer-rtl {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Primitive shapes */
.sg-skel-line  { height: 0.9em; margin-block-end: 0.6em; }
.sg-skel-line.is-title  { height: 1.4em; width: 70%; }
.sg-skel-line.is-short  { width: 45%; }
.sg-skel-line.is-medium { width: 80%; }
.sg-skel-line:last-child { margin-block-end: 0; }
.sg-skel-rect  { width: 100%; aspect-ratio: 16 / 9; }
.sg-skel-square { aspect-ratio: 1 / 1; }
.sg-skel-pill  { height: 30px; width: 96px; border-radius: 999px; }
.sg-skel-avatar { width: 56px; height: 56px; border-radius: 50%; }

/* A skeleton card matching the catalogue/result card geometry. */
.sg-skel-card {
  border: 1px solid var(--hair, rgba(48,112,142,.16));
  border-radius: var(--radius, 2px);
  background: var(--card, #fff);
  padding: var(--s4, 24px);
}
.sg-skel-card .sg-skel-rect { margin-block-end: var(--s3, 16px); }

/* A responsive grid of skeleton cards for the catalogue/search loading state. */
.sg-skel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s4, 24px);
}

/* Inline spinner for buttons / the player transport. Square-friendly ring. */
.sg-spinner {
  display: inline-block;
  inline-size: 18px;
  block-size: 18px;
  border: 2px solid var(--hair, rgba(48,112,142,.28));
  border-block-start-color: var(--astral, #30708E);
  border-radius: 50%;
  animation: sg-spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes sg-spin { to { transform: rotate(360deg); } }

/* A polite loading status line (pair with aria-live="polite" on the region). */
.sg-loading-status {
  display: inline-flex;
  align-items: center;
  gap: var(--s2, 12px);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--muted, #4A5A63);
}

/* Reduced motion: stop the shimmer/spin locally; show a static tint instead. */
@media (prefers-reduced-motion: reduce) {
  .sg-skel { animation: none; background-image: none; }
  .sg-spinner { animation-duration: 1.6s; }   /* slow, not frozen, so progress still reads */
}

/* ════════════════════════════════════════════════════════════════════
   2. EMPTY STATES — fresh install / no results. Centred panel, faint
      gold emblem (decoration only), heading, lede, optional action.
   ════════════════════════════════════════════════════════════════════ */

.sg-empty {
  max-width: 540px;
  margin-inline: auto;
  padding-block: var(--s7, 64px);
  padding-inline: var(--s4, 24px);
  text-align: center;
}
.sg-empty-emblem {
  color: var(--gamboge, #ECA608);   /* decorative SVG only — never text */
  opacity: 0.5;
  margin-block-end: var(--s4, 24px);
  display: inline-block;
  line-height: 0;
}
.sg-empty-emblem svg { inline-size: 56px; block-size: 56px; }
.sg-empty-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 28px);
  line-height: var(--lh-display, 1.12);
  color: var(--ink, #0F1B22);
  margin-block: 0 var(--s2, 12px);
  text-wrap: balance;
}
.sg-empty-lede {
  font-family: var(--font-read);
  font-size: 16px;
  line-height: var(--lh-read, 1.62);
  color: var(--muted, #4A5A63);
  margin-block: 0 var(--s4, 24px);
}
.sg-empty-actions {
  display: flex;
  gap: var(--s2, 12px);
  justify-content: center;
  flex-wrap: wrap;
}
/* Square, ruled action buttons (match the site's button family). */
.sg-empty-actions .sg-btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 600;
  padding-block: 11px;
  padding-inline: 22px;
  border-radius: var(--radius, 2px);
  text-decoration: none;
  border: 1px solid var(--astral, #30708E);
}
.sg-empty-actions .sg-btn.is-primary { background: var(--astral, #30708E); color: var(--paper, #FBF7EF); }
.sg-empty-actions .sg-btn.is-ghost   { background: transparent; color: var(--astral-700, #22506A); }

/* ════════════════════════════════════════════════════════════════════
   3. FORM VALIDATION — inline, accessible, aria-live. Errors are ink-red
      text + a 2px ring; success is Astral; never gold text. Pair the
      message <p> with role="alert" / aria-live and aria-describedby.
   ════════════════════════════════════════════════════════════════════ */

.sg-field { margin-block-end: var(--s4, 24px); }
.sg-field > label {
  display: block;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #0F1B22);
  margin-block-end: var(--s1, 8px);
}
.sg-field .sg-req {           /* required marker; not gold */
  color: var(--astral-700, #22506A);
  margin-inline-start: 2px;
}
.sg-field input,
.sg-field textarea,
.sg-field select {
  inline-size: 100%;
  font-family: var(--font-ui);
  font-size: 16px;            /* >=16px avoids iOS zoom-on-focus */
  color: var(--ink, #0F1B22);
  background: var(--card, #fff);
  border: 1px solid var(--hair, rgba(48,112,142,.32));
  border-radius: var(--radius, 2px);
  padding-block: 11px;
  padding-inline: 14px;
}
.sg-field input:focus-visible,
.sg-field textarea:focus-visible,
.sg-field select:focus-visible {
  outline: 2px solid var(--astral, #30708E);
  outline-offset: 2px;
  border-color: var(--astral, #30708E);
}

/* Error state — driven by [aria-invalid="true"] so it follows the a11y attr. */
.sg-field input[aria-invalid="true"],
.sg-field textarea[aria-invalid="true"],
.sg-field select[aria-invalid="true"] {
  border-color: #9B1C1C;
  box-shadow: inset 0 0 0 1px #9B1C1C;
}
.sg-field-msg {
  display: none;
  align-items: flex-start;
  gap: var(--s1, 8px);
  margin-block-start: var(--s1, 8px);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
}
.sg-field-msg svg { flex: none; inline-size: 15px; block-size: 15px; margin-block-start: 1px; }
.sg-field.is-error .sg-field-msg.is-error { display: flex; color: #9B1C1C; }
.sg-field.is-success .sg-field-msg.is-success { display: flex; color: var(--astral-700, #22506A); }

/* A form-level summary box (announced via role="alert"). Square, ruled. */
.sg-form-summary {
  border: 1px solid #9B1C1C;
  border-radius: var(--radius, 2px);
  background: #FCEFEF;
  color: #7A1414;
  padding: var(--s3, 16px) var(--s4, 24px);
  margin-block-end: var(--s4, 24px);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: var(--lh-read, 1.62);
}
.sg-form-summary h3 { margin: 0 0 var(--s1, 8px); font-size: 14px; font-weight: 700; }
.sg-form-summary ul { margin: 0; padding-inline-start: 1.2em; }

/* ════════════════════════════════════════════════════════════════════
   4. 500 / MAINTENANCE SURFACE — full-bleed paper panel, gold rule,
      centred message, closing verse (rendered in the pattern, not here).
   ════════════════════════════════════════════════════════════════════ */

.sg-sys {
  min-block-size: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--s7, 64px);
  padding-inline: var(--s4, 24px);
  background: var(--paper, #FBF7EF);
}
.sg-sys-panel {
  max-width: 600px;
  text-align: center;
}
.sg-sys-rule {        /* gold rule — decoration only */
  inline-size: 64px;
  block-size: 3px;
  background: var(--gamboge, #ECA608);
  margin-inline: auto;
  margin-block-end: var(--s5, 32px);
  border-radius: var(--radius, 2px);
}
.sg-sys-code {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--astral-700, #22506A);
  margin-block: 0 var(--s2, 12px);
}
.sg-sys-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 4vw, 38px);
  line-height: var(--lh-display, 1.12);
  color: var(--ink, #0F1B22);
  margin-block: 0 var(--s3, 16px);
  text-wrap: balance;
}
.sg-sys-lede {
  font-family: var(--font-read);
  font-size: 17px;
  line-height: var(--lh-read, 1.62);
  color: var(--muted, #4A5A63);
  margin-block: 0 var(--s5, 32px);
}
.sg-sys-actions { display: flex; gap: var(--s2, 12px); justify-content: center; flex-wrap: wrap; }
.sg-sys-actions .sg-btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 600;
  padding-block: 11px;
  padding-inline: 22px;
  border-radius: var(--radius, 2px);
  text-decoration: none;
  border: 1px solid var(--astral, #30708E);
}
.sg-sys-actions .sg-btn.is-primary { background: var(--astral, #30708E); color: var(--paper, #FBF7EF); }
.sg-sys-actions .sg-btn.is-ghost   { background: transparent; color: var(--astral-700, #22506A); }

/* The closing verse on the system page (Quran font enforced by overrides.css
   on .ayah; here only the layout). */
.sg-sys-verse { margin-block-start: var(--s6, 48px); }
.sg-sys-verse .ayah {
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.9;
  color: var(--ink, #0F1B22);
}
.sg-sys-verse .sg-sys-verse-ref {
  display: block;
  margin-block-start: var(--s2, 12px);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--subtle, #8A9098);
}