/* Helper classes used by EJS views to replace previously-dynamic inline styles. */

.u-hidden { display: none !important; }
.u-opacity-50 { opacity: 0.5; }

.u-color-accent { color: var(--accent); }
.u-color-amber { color: var(--amber); }
.u-color-blue { color: var(--blue); }
.u-color-green { color: var(--green); }
.u-color-dim { color: var(--text-dim); }

.u-bg-amber-solid { background: var(--amber, #f39c12); color: #fff; }
.u-bg-accent-solid { background: var(--accent); color: #fff; }

.u-bg-blue-soft { background: rgba(45,138,255,0.15); color: var(--blue); }
.u-bg-green-soft { background: rgba(0,200,83,0.15); color: #00c853; }
.u-bg-accent-soft { background: rgba(230,57,70,0.15); color: var(--accent); }
.u-bg-neutral-soft { background: rgba(255,255,255,0.08); color: var(--text-dim); }
.u-bg-private { background: rgba(230,57,70,0.15); color: var(--accent); }
.u-bg-public { background: rgba(255,255,255,0.05); color: var(--text-dim); }

.u-rank-gold { color: #FFD700; }
.u-rank-silver { color: #C0C0C0; }
.u-rank-bronze { color: #CD7F32; }
.u-rank-default { color: var(--text-dim); }

.u-border-left-amber { border-left-color: var(--amber); }
.u-border-left-green { border-left-color: var(--green); }
.u-border-left-blue { border-left-color: var(--blue); }
.u-border-left-accent { border-left-color: var(--accent); }
.u-border-left-default { border-left-color: var(--border); }

.u-border-accent { border-color: var(--accent) !important; }
.u-border-default { border-color: var(--border) !important; }

.u-bg-avatar-fallback { background: var(--accent); }
.u-bg-avatar-image { background: var(--surface); }

.u-rights-restricted { background: rgba(230,57,70,0.2); color: var(--accent); }

.u-broadcast-waiting-base {
  width: 100%;
  aspect-ratio: 16/9;
  background: #111;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  gap: 12px;
  padding: 24px;
  text-align: center;
}
.u-broadcast-waiting--overlay { position: absolute; inset: 0; z-index: 2; }
.u-broadcast-waiting--standalone { position: relative; }

/* Dedicated per-component replacements for previously-dynamic inline styles. */
.u-trust-override-card { margin-bottom: 1rem; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.u-verification-status-badge { color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.u-badge-card-base { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; text-align: center; }
.u-badge-card-base.is-earned { border-color: var(--accent); }
.u-leaderboard-rank { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; min-width: 40px; text-align: center; }
.u-supporter-rank { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; min-width: 40px; text-align: center; }
.u-reputation-rank { font-family: 'Syne', sans-serif; font-size: 1.5rem; font-weight: 700; min-width: 2.5rem; text-align: center; }
.u-runsheet-guest-card { border-left: 3px solid var(--border); }
.u-subscription-current-card { margin-bottom: 32px; border-left: 3px solid var(--accent); }
.u-subscription-current-card.is-trial { border-left-color: var(--blue); }
.u-subscription-current-price { font-family: var(--font-mono); font-size: 1.25rem; color: var(--accent); }
.u-subscription-current-price.is-trial { color: var(--green); }
.u-subscription-plan-card.is-current { border-color: var(--accent); }
.u-subscription-plan-card.is-featured { position: relative; }
.u-subscription-plan-th { text-align: center; padding: 12px 16px; font-family: var(--font-heading); font-weight: 700; font-size: 0.875rem; }
.u-subscription-plan-th.is-current { color: var(--accent); }
.u-beat-status-badge { font-family: var(--font-mono); font-size: 0.65rem; padding: 2px 8px; border-radius: 4px; }
.u-event-update-item { padding: 1rem 1rem 1rem 1.25rem; margin-bottom: 1rem; background: var(--surface); border-radius: 0 8px 8px 0; border-left: 3px solid var(--border); }
.u-event-update-item.is-breaking { border-left-color: var(--accent); }
.u-leaderboard-avatar { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; background: var(--accent); }
.u-leaderboard-avatar.has-image { background: var(--surface); }
.u-reading-list-visibility { font-family: var(--font-mono); font-size: 0.6875rem; padding: 2px 8px; border-radius: 4px; background: rgba(255,255,255,0.05); color: var(--text-dim); }
.u-reading-list-visibility.is-private { background: rgba(230,57,70,0.15); color: var(--accent); }
.u-show-create-recurrence { margin-top: 8px; }
.u-color-preview { width: 48px; height: 48px; border-radius: var(--radius); }
.u-overlay-option { background: var(--surface-2); border: 2px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; transition: border-color 0.2s; }
.u-overlay-option.is-selected { border-color: var(--accent); }
.u-speaker-badge { /* base styling assumed elsewhere */ }
.u-show-page-hero-bg { background-size: cover; background-position: center; }
.u-trending-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s; }
.u-poll-bar { background: var(--accent); height: 100%; border-radius: 4px; transition: width 0.3s; }
.u-appeal-status-badge { padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--text); }
.u-appeal-status-badge.is-approved { background: #2d6a4f; }
.u-appeal-status-badge.is-rejected { background: #9d0208; }
.u-appeal-status-badge.is-pending { background: #e76f51; }
.u-fact-check-badge { padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
.u-fact-check-badge.is-verified { background: #2a9d4a22; color: #2ecc71; }
.u-fact-check-badge.is-disputed { background: #e6394622; color: var(--accent); }
.u-fact-check-badge.is-inconclusive { background: #f39c1222; color: #f39c12; }
.u-fact-check-badge.is-other { background: #55555522; color: var(--text-dim); }
.u-fact-check-verdict { font-weight: 600; text-transform: uppercase; font-size: 0.75rem; }
.u-fact-check-verdict.is-verified { color: #2ecc71; }
.u-fact-check-verdict.is-disputed { color: var(--accent); }
.u-fact-check-verdict.is-other { color: #f39c12; }

/* Trust-tier color helpers (used by JS-built map markers, popups, post badges). */
.u-tier-bg-raw { background: #888888; }
.u-tier-bg-confirmed { background: #3B82F6; }
.u-tier-bg-corroborated { background: #10B981; }
.u-tier-bg-journalist { background: #F59E0B; }
.u-tier-bg-outlet-endorsed { background: #8B5CF6; }

.u-tier-marker-raw { background: #888888; box-shadow: 0 0 6px #888888; }
.u-tier-marker-confirmed { background: #3B82F6; box-shadow: 0 0 6px #3B82F6; }
.u-tier-marker-corroborated { background: #10B981; box-shadow: 0 0 6px #10B981; }
.u-tier-marker-journalist { background: #F59E0B; box-shadow: 0 0 6px #F59E0B; }
.u-tier-marker-outlet-endorsed { background: #8B5CF6; box-shadow: 0 0 6px #8B5CF6; }

.u-tier-badge-raw { background: #88888822; color: #888888; }
.u-tier-badge-confirmed { background: #3B82F622; color: #3B82F6; }
.u-tier-badge-corroborated { background: #10B98122; color: #10B981; }
.u-tier-badge-journalist { background: #F59E0B22; color: #F59E0B; }
.u-tier-badge-outlet-endorsed { background: #8B5CF622; color: #8B5CF6; }

/* Map cluster marker size variants. */
.u-cluster-small { width: 30px; height: 30px; font-size: 12px; }
.u-cluster-medium { width: 40px; height: 40px; font-size: 14px; }
.u-cluster-large { width: 50px; height: 50px; font-size: 14px; }

/* Upload-queue status badge variants. */
.u-upload-status-pending { background: rgba(255,255,255,0.05); color: var(--text-dim); }
.u-upload-status-uploading { background: rgba(45,138,255,0.15); color: var(--blue); }
.u-upload-status-processing { background: rgba(245,166,35,0.15); color: var(--amber, #F5A623); }
.u-upload-status-failed { background: rgba(230,57,70,0.15); color: var(--accent); }
.u-upload-status-complete { background: rgba(40,167,69,0.15); color: #28a745; }

/* Admin purge modal */
.u-mt-half { margin-top: 0.5rem; }
.u-divider { border: 0; border-top: 1px solid var(--border); margin: 0.75rem 0 0.25rem; }
.u-section-label { font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.u-btn-purge { background: #7a1010; border-color: #7a1010; }
.u-purge-help { font-size: 0.7rem; color: var(--text-dim); margin: 0; }
.u-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 1000; align-items: center; justify-content: center; padding: 1rem; }
.u-modal-overlay.is-open { display: flex; }
.u-modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; max-width: 520px; width: 100%; }
.u-modal-title-danger { margin: 0 0 0.5rem 0; color: var(--red, #c0392b); }
.u-modal-body { font-size: 0.85rem; color: var(--text-dim); margin: 0 0 0.75rem 0; }
.u-modal-label { display: block; font-size: 0.8rem; margin-bottom: 4px; }
.u-modal-input { width: 100%; margin-bottom: 0.75rem; }
.u-modal-input--mono { width: 100%; margin-bottom: 1rem; font-family: var(--font-mono); }
.u-modal-phrase { background: var(--bg); padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); }
.u-modal-error { display: none; color: var(--red, #c0392b); font-size: 0.8rem; margin-bottom: 0.5rem; }
.u-modal-result { display: none; font-size: 0.8rem; margin-bottom: 0.5rem; }
.u-modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }

/* Component classes: groups of frequently-repeated utility stacks
   from views/. Replacing the stack with a single component class
   keeps markup readable and centralises tweaks. */
.c-page-title { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; }
.c-section-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; }
.c-section-subtitle { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; margin-bottom: 16px; }
.c-card-heading { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; margin-bottom: 16px; }

.c-form-label { display: block; font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600; margin-bottom: 6px; }
.c-field-label-dim { display: block; font-size: 0.85rem; margin-bottom: 0.25rem; color: var(--text-dim); }
.c-mono-field-label { display: block; font-family: var(--font-mono); font-size: 0.75rem; margin-bottom: 4px; color: var(--text-dim); }

.c-meta-mono { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-dim); }
.c-meta-mono-md { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); }
.c-eyebrow-tag { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-dim); text-transform: uppercase; }
.c-eyebrow-mono { font-family: var(--font-mono); font-size: 0.6875rem; margin-bottom: 4px; color: var(--text-dim); text-transform: uppercase; }

.c-notice-dim { padding: 10px 16px; text-align: center; color: var(--text-dim); }
.c-notice-success { padding: 10px 16px; text-align: center; color: var(--green); }

.c-row-8 { display: flex; align-items: center; gap: 8px; }
.c-row-12 { display: flex; align-items: center; gap: 12px; }
.c-stack-12 { display: flex; flex-direction: column; gap: 12px; }
.c-header-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-bottom: 24px; }
.c-toolbar-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; justify-content: space-between; }

/* Style guide token swatches and font samples. */
.sg-token-bg---bg { background: var(--bg); }
.sg-token-bg---surface { background: var(--surface); }
.sg-token-bg---surface-2 { background: var(--surface-2); }
.sg-token-bg---border { background: var(--border); }
.sg-token-bg---border-hover { background: var(--border-hover); }
.sg-token-bg---text { background: var(--text); }
.sg-token-bg---text-muted { background: var(--text-muted); }
.sg-token-bg---text-dim { background: var(--text-dim); }
.sg-token-bg---accent { background: var(--accent); }
.sg-token-bg---accent-hover { background: var(--accent-hover); }
.sg-token-bg---green { background: var(--green); }
.sg-token-bg---blue { background: var(--blue); }
.sg-token-bg---amber { background: var(--amber); }
.sg-token-bg---orange { background: var(--orange); }
.sg-token-bg---red { background: var(--red); }

.sg-token-font---font-heading { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.sg-token-font---font-body { font-family: var(--font-body); font-size: 1rem; line-height: 1.5; }
.sg-token-font---font-mono { font-family: var(--font-mono); font-size: 0.95rem; }

.sg-token-radius---radius { border-radius: var(--radius); }
.sg-token-radius---radius-lg { border-radius: var(--radius-lg); }

.sg-token-layout---max-width { max-width: var(--max-width); }

.sg-token-space---space-1 { width: var(--space-1); }
.sg-token-space---space-2 { width: var(--space-2); }
.sg-token-space---space-3 { width: var(--space-3); }
.sg-token-space---space-4 { width: var(--space-4); }
.sg-token-space---space-5 { width: var(--space-5); }
.sg-token-space---space-6 { width: var(--space-6); }
.sg-token-space---space-7 { width: var(--space-7); }