/* Global theme helpers */
.signal-bg {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0,255,102,.10), transparent 60%),
    radial-gradient(1000px 500px at 110% 20%, rgba(10,200,120,.10), transparent 60%),
    linear-gradient(180deg, #070a0a, #06090a 60%, #05080a);
}
.glass { backdrop-filter: blur(6px); background: rgba(13,16,29,.45); }
.tooltip { pointer-events: none; }

/* Logo glow + hover */
.ms-logo { transition: transform .18s ease; }
.ms-logo:hover { transform: scale(1.05); }
svg #msLogoWaveAnim, svg #msLogoWaveStatic { filter: drop-shadow(0 0 4px rgba(0,255,102,.35)); }

/* Floating cards in hero */
.ms-float-card { position:absolute; width: 240px; max-width: 46%; }
.ms-float-enter { opacity:0; transform: translateY(6px) scale(.96); }
.ms-float-show  { opacity:1; transform: translateY(0) scale(1); }
.ms-float-exit  { opacity:0; transform: translateY(-6px) scale(.96); }

/* Reuse the hero glow everywhere */
.shadow-signal-glow {
  box-shadow: 0 8px 30px -12px rgba(0,0,0,.45), 0 0 8px rgba(0,255,102,.15);
}

/* ---- HTMX indicator visibility */
#ms-indicator.htmx-request { opacity: 1; }

/* The loader card */
.ms-wave-indicator {
  box-shadow: 0 8px 30px -12px rgba(0,0,0,.45), 0 0 8px rgba(0,255,102,.15);
}

/* Waveform animation */
.ms-wave-svg { width: 180px; height: 54px; filter: drop-shadow(0 0 6px rgba(0,255,102,.25)); }
.ms-wave-path {
  stroke-dasharray: 8 10;
  animation: ms-wave-move 1s linear infinite;
}

/* Gentle glow pulse on the whole card */
.ms-wave-indicator { animation: ms-glow 1.8s ease-in-out infinite; }

@keyframes ms-wave-move {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -18; }
}

@keyframes ms-glow {
  0%, 100% { box-shadow: 0 8px 30px -12px rgba(0,0,0,.45), 0 0 8px rgba(0,255,102,.15); }
  50%      { box-shadow: 0 8px 30px -12px rgba(0,0,0,.45), 0 0 14px rgba(0,255,102,.28); }
}

/* Motion-reduction: keep it subtle & accessible */
@media (prefers-reduced-motion: reduce) {
  .ms-wave-path { animation: none; stroke-dasharray: none; }
  .ms-wave-indicator { animation: none; }
}

.ms-book-card-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========== MavenSignal Tag Styles (no build step) ========== */
:root{
  /* Brand tokens */
  --brand-400:#1fe79b;
  --brand-600:#0ebc75;

  --signal-600:#00e65a;
  --signal-700:#00cc50;

  --accent-500:#ff8a00;   /* accent orange */
  --accent-600:#e67b00;

  --slate-300:#cbd5e1;
  --slate-400:#94a3b8;

  --neutral-700:#334155;
  --neutral-800:#1f2937;
  --neutral-900:#0b1220;

  /* Surfaces (on dark UI) */
  --bg-dark: rgba(0,0,0,0.20);
  --border-subtle: rgba(255,255,255,0.08);
}

/* Base tag */
.ms-tag{
  display:inline-flex;
  align-items:center;
  gap:0.375rem;            /* ~6px */
  padding:0.125rem 0.5rem; /* 2px 8px */
  border-radius:0.5rem;    /* 8px */
  border:1px solid var(--border-subtle);
  font-size:12px;
  line-height:1.2;
  font-weight:600;
  user-select:none;
  white-space:nowrap;
  vertical-align:middle;
}

/* Optional sizes */
.ms-tag--xs{ font-size:11px; padding:2px 6px; border-radius:8px; }
.ms-tag--sm{ font-size:12px; padding:2px 8px; border-radius:8px; }  /* default look */
.ms-tag--md{ font-size:13px; padding:4px 10px; border-radius:10px; }

.ms-tag svg{
  width:14px; height:14px;
  opacity:0.8;
}

/* -------- Semantic Variants -------- */
.ms-tag--low{
  background: rgba(15,23,42,0.40);        /* deep slate */
  border-color: rgba(51,65,85,0.40);
  color: var(--slate-300);
}

.ms-tag--med{
  background: rgba(16,185,129,0.12);
  border-color: rgba(16,185,129,0.28);
  color: #86efac;
}

.ms-tag--high{
  background: rgba(0,204,80,0.15);        /* signal-700 tint */
  border-color: rgba(0,204,80,0.40);
  color: var(--signal-700);
}

/* Momentum / authority */
.ms-tag--alert{
  background: color-mix(in oklab, var(--accent-500) 15%, transparent);
  border-color: color-mix(in oklab, var(--accent-600) 40%, transparent);
  color: var(--accent-500);
}
@supports not (color-mix(in oklab, white 50%, black)) {
  .ms-tag--alert{
    background: rgba(255,138,0,0.15);
    border-color: rgba(230,123,0,0.40);
    color: #ff8a00;
  }
}

/* Optional: high-contrast mode helpers */
@media (prefers-contrast: more){
  .ms-tag{ border-color: rgba(255,255,255,0.35); }
}

/* Optional: focus ring for a11y if tags are buttons/links */
.ms-tag:focus-visible{
  outline:2px solid var(--signal-700);
  outline-offset:2px;
  border-color: var(--signal-700);
}

.ms-status-read, .ms-status-followed {
  background: linear-gradient(135deg, #12d686, #0ebc75);
  color: #04170c;
}
/*.ms-status-unread {
  background: linear-gradient(135deg, #facc15, #eab308);
  color: #1f1504;
}
.ms-status-skip {
  background: linear-gradient(135deg, #f87171, #dc2626);
  color: #360707;
}
  */

  [x-cloak] { display: none !important; }

.reveal-more-btn .reveal-more-spinner { display: none; }
.reveal-more-btn.is-loading .reveal-more-label { display: none; }
.reveal-more-btn.is-loading .reveal-more-spinner {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}