/* ============================================================================
 * components.css  --  Shared UI components anchored on tokens
 *
 * Project: EFI / Experiencer Team -- unified UI shell
 * Owner:   /srv/efi-unified-ui/static/css/components.css
 * Served:  https://forum.experiencerteam.com/shared/css/components.css
 * Loaded:  After layout.css, before utilities.css.
 *
 * --------------------------------------------------------------------------
 * Algorithm summary
 * --------------------------------------------------------------------------
 *   Named, reusable UI components that BOTH the apex marketing site AND the
 *   forum vhost would benefit from sharing. Per D-1.10-F: any class name
 *   already in use by forum.cgi's inline HTML is preserved unchanged and
 *   stays in its current home (forum/static-forum/css/brand-experiencer.css)
 *   until WP-1.11 extracts the inline HTML to .tt files. The components
 *   below are NEW class names (and a few that already live in apex
 *   site.css and are inert in the forum vhost) so there is no risk of
 *   double-declaring an existing rule.
 *
 *   Component catalog:
 *     1. .skip-link              -- a11y skip-to-main
 *     2. .reading-progress       -- thin top bar that fills as user scrolls
 *     3. .btn family             -- .btn / -primary / -secondary / -ghost / -link / size variants
 *     4. .card                   -- container with shadow + radius + padding
 *     5. .badge                  -- small inline label
 *     6. .pill                   -- rounded label (heavier than .badge)
 *     7. .alert family           -- .alert / -info / -success / -warn / -error
 *     8. .breadcrumb             -- inline crumb trail with separators
 *     9. .tag                    -- soft inline category marker
 *    10. .divider                -- horizontal separator with optional label
 *    11. .empty-state            -- placeholder for "no rows" surfaces
 *    12. .spinner                -- accessible loading indicator
 *
 *   Anything component-shaped that already exists in the legacy files
 *   (.dm-message, .admin-pill, .notif-row, .invite-success-panel, etc.)
 *   is INTENTIONALLY not duplicated here -- their existing rules in
 *   brand-experiencer.css still win the cascade and WP-1.11 will migrate
 *   them on a per-route basis.
 * ============================================================================ */


/* --- 1. Skip link (accessibility) -------------------------------------- */
.skip-link {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: var(--text-on-navy);
  padding: var(--space-2) var(--space-5);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  z-index: var(--z-modal);
  font-family: var(--font-chrome);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top var(--motion-fast) var(--easing-standard);
}
.skip-link:focus {
  top: 0;
}


/* --- 2. Reading-progress bar ------------------------------------------- */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: var(--z-progress);
  background: transparent;
  pointer-events: none;
}
.reading-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--coral));
  transition: width var(--motion-instant) linear;
}


/* --- 3. Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-chrome);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  line-height: 1;
  letter-spacing: 0.03em;
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--motion-fast) var(--easing-standard),
              border-color var(--motion-fast) var(--easing-standard),
              color var(--motion-fast) var(--easing-standard),
              box-shadow var(--motion-fast) var(--easing-standard),
              transform var(--motion-fast) var(--easing-standard);
}
.btn:hover {
  box-shadow: var(--shadow-sm);
}
.btn:active {
  transform: translateY(1px);
}
.btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: var(--navy);
  color: var(--text-on-navy);
  border-color: var(--navy-deep);
}
.btn-primary:hover {
  background: var(--navy-deep);
  color: var(--text-on-navy);
}

.btn-secondary {
  background: var(--teal);
  color: var(--text-on-navy);
  border-color: var(--teal-deep);
}
.btn-secondary:hover {
  background: var(--teal-deep);
  color: var(--text-on-navy);
}

.btn-coral {
  background: var(--coral);
  color: #ffffff;
  border-color: var(--coral);
}
.btn-coral:hover {
  filter: brightness(0.95);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--rule);
}
.btn-ghost:hover {
  background: var(--rule-soft);
}

.btn-link {
  background: transparent;
  color: var(--teal-deep);
  border-color: transparent;
  padding: 0;
}
.btn-link:hover {
  color: var(--coral);
  text-decoration: underline;
  box-shadow: none;
}

/* Button size variants */
.btn-sm  { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn-lg  { padding: var(--space-3) var(--space-5); font-size: var(--text-base); }
.btn-block { display: flex; width: 100%; }


/* --- 4. Card ----------------------------------------------------------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}
.card-tight { padding: var(--space-3); }
.card-loose { padding: var(--space-7); }
.card-flat  { box-shadow: none; }

.card-header {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}
.card-footer {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}


/* --- 5. Badge ---------------------------------------------------------- */
.badge {
  display: inline-block;
  font-family: var(--font-chrome);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px var(--space-2);
  background: var(--rule-soft);
  color: var(--text-soft);
  border-radius: var(--radius-sm);
  line-height: 1.4;
}
.badge-navy   { background: var(--navy);   color: var(--text-on-navy); }
.badge-teal   { background: var(--teal);   color: var(--text-on-navy); }
.badge-coral  { background: var(--coral);  color: #ffffff; }
.badge-green  { background: var(--green);  color: #ffffff; }
.badge-gold   { background: var(--gold);   color: #ffffff; }
.badge-purple { background: var(--purple); color: #ffffff; }


/* --- 6. Pill (heavier than badge; mixed case OK) ----------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-chrome);
  font-weight: var(--weight-normal);
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-3);
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  line-height: 1.4;
}
.pill-soft {
  background: var(--rule-soft);
  border-color: transparent;
}


/* --- 7. Alerts --------------------------------------------------------- */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--rule);
  background: var(--bg-strip);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: var(--line-normal);
  margin: 0 0 var(--space-3) 0;
}
.alert-info    { border-left-color: var(--teal);  background: var(--teal-pale); }
.alert-success { border-left-color: var(--green); background: var(--green-soft); }
.alert-warn    { border-left-color: var(--gold);  background: var(--gold-soft); }
.alert-error   { border-left-color: var(--coral); background: var(--coral-soft); }


/* --- 8. Breadcrumb ----------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-chrome);
  font-size: var(--text-sm);
  color: var(--text-faint);
  margin: 0 0 var(--space-3) 0;
}
.breadcrumb a {
  color: var(--text-soft);
}
.breadcrumb a:hover {
  color: var(--teal-deep);
}
.breadcrumb-sep {
  color: var(--text-faint);
  user-select: none;
}
.breadcrumb-current {
  color: var(--text);
  font-weight: var(--weight-bold);
}


/* --- 9. Tag ------------------------------------------------------------ */
.tag {
  display: inline-block;
  font-family: var(--font-chrome);
  font-size: var(--text-xs);
  color: var(--text-soft);
  background: var(--bg-strip);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 1px var(--space-2);
  margin-right: var(--space-1);
}
.tag:hover {
  background: var(--rule-soft);
  color: var(--text);
}


/* --- 10. Divider ------------------------------------------------------- */
.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  color: var(--text-faint);
  font-family: var(--font-chrome);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}


/* --- 11. Empty state --------------------------------------------------- */
.empty-state {
  padding: var(--space-7) var(--space-4);
  text-align: center;
  color: var(--text-faint);
  font-family: var(--font-chrome);
  font-size: var(--text-sm);
  background: var(--bg-strip);
  border: 1px dashed var(--rule);
  border-radius: var(--radius-lg);
}
.empty-state-title {
  color: var(--text-soft);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}


/* --- 12. Spinner ------------------------------------------------------- */
.spinner {
  display: inline-block;
  width: var(--space-4);
  height: var(--space-4);
  border: 2px solid var(--rule);
  border-top-color: var(--teal);
  border-radius: var(--radius-circle);
  animation: spinner-spin 0.8s linear infinite;
}
.spinner-lg {
  width: var(--space-6);
  height: var(--space-6);
  border-width: 3px;
}
@keyframes spinner-spin {
  to { transform: rotate(360deg); }
}


/* End of components.css */