/* Moment Card - Shadcn-inspired Minimalist Microblog Style */
/* WCAG AAA Compliant - 7:1 contrast ratios */

.mf-stack {
  display: flex;
  flex-direction: column;
}

/* ── Temporal breathing gaps ── */
.mf-silence {
  display: flex;
  align-items: center;
  gap: 10px;
  color: hsl(240 5.3% 45%);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.mf-silence::before, .mf-silence::after {
  content: '';
  flex: 1;
  height: 1px;
  background: hsl(240 5.9% 85%);
}

/* ── Time-of-day accent edge ── */
.mf-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  border-radius: 0.5rem 0 0 0.5rem;
  z-index: 4;
  box-shadow: 4px 0 12px -2px var(--accent-glow, transparent);
}

/* ── Compact cards (short text) ── */
.moment-card.moment-card--compact .moment-card__body {
  padding: 0.85rem 1.1rem 0.85rem 1.35rem;
}
.moment-card.moment-card--compact .moment-card__content {
  font-size: 0.9rem;
}

/* ── Hero photo cards — photo above, text below ── */
.moment-card.moment-card--hero {
  border-radius: 0.75rem;
  overflow: hidden;
  position: relative;
}
.moment-card--hero .moment-card__body {
  padding: 1.15rem 1.35rem 1rem;
}
.mf-hero-photo {
  width: 100%;
  display: block;
  max-height: 400px;
  object-fit: cover;
}
.mf-hero-accent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 5;
}
.moment-card--hero .mf-accent {
  display: none;
}
.mf-hero-accent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 5;
}

/* ── Aging patina ── */
.moment-card[data-age="days"] {
  filter: saturate(0.96) sepia(0.01);
}
.moment-card[data-age="days"] .mf-accent {
  opacity: 0.92;
}
.moment-card[data-age="weeks"] {
  filter: saturate(0.90) sepia(0.02);
}
.moment-card[data-age="weeks"] .mf-accent {
  opacity: 0.82;
}
.moment-card[data-age="months"] {
  filter: saturate(0.82) sepia(0.04);
  border-color: hsl(30 10% 88%);
}
.moment-card[data-age="months"] .mf-accent {
  opacity: 0.68;
}
.moment-card[data-age="year"] {
  filter: saturate(0.72) sepia(0.08);
  border-color: hsl(30 12% 86%);
}
.moment-card[data-age="year"] .mf-accent {
  opacity: 0.5;
}
.moment-card[data-age="years"] {
  filter: saturate(0.60) sepia(0.14);
  border-color: hsl(30 15% 84%);
}
.moment-card[data-age="years"] .mf-accent {
  opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
  .moment-card { transition: none !important; }
}

/* ── Ambient waveform strip ── */
.mf-ambient-strip{
  display:flex;align-items:center;gap:1px;
  height:28px;padding:0 1rem 0 1.25rem;
  background:linear-gradient(180deg,#f8f8fc,#f0f0f6);
  border-top:1px solid #eeeef5;
  cursor:pointer;transition:background 0.15s;
  pointer-events:auto;position:relative;z-index:5;
}
.mf-ambient-strip:hover{background:linear-gradient(180deg,#f0f0f8,#e8e8f2)}
.mf-ambient-strip:focus-visible{outline:2px solid #6068a0;outline-offset:-2px}
.mf-wf-bar{width:2px;border-radius:1px;background:#7a82a0;flex-shrink:0;transition:background 0.15s}
.mf-wf-label{font-size:0.6rem;font-weight:700;color:#4a5272;letter-spacing:0.06em;margin-left:8px;text-transform:uppercase;flex-shrink:0}
.mf-ambient-strip.playing .mf-wf-bar{background:#3d4580;animation:mfAudioBar 1.2s ease-in-out infinite}
.mf-ambient-strip.playing .mf-wf-label{color:#3d4580}
@keyframes mfAudioBar{0%,100%{transform:scaleY(0.4)}50%{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.mf-ambient-strip.playing .mf-wf-bar{animation:none !important}}

/* ── Weather overlay layer ── */
.mf-weather-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 0.5rem;
  opacity: 0;
  z-index: 1;
}

/* ── Weather texture treatments ── */
.moment-card[data-weather="rain"] .mf-weather-layer{opacity:1;background:repeating-linear-gradient(105deg,transparent,transparent 6px,rgba(110,145,195,0.08) 6px,rgba(110,145,195,0.08) 7.5px),linear-gradient(180deg,rgba(120,150,200,0.07) 0%,transparent 70%)}
.moment-card[data-weather="rain"]{border-color:#d0d8e8}
.moment-card[data-weather="rainy"] .mf-weather-layer{opacity:1;background:repeating-linear-gradient(105deg,transparent,transparent 6px,rgba(110,145,195,0.08) 6px,rgba(110,145,195,0.08) 7.5px),linear-gradient(180deg,rgba(120,150,200,0.07) 0%,transparent 70%)}
.moment-card[data-weather="rainy"]{border-color:#d0d8e8}
.moment-card[data-weather="cloudy"] .mf-weather-layer{opacity:1;background:radial-gradient(ellipse 120% 40px at 50% 0%,rgba(140,145,165,0.10) 0%,transparent 100%),radial-gradient(ellipse 80% 30px at 30% 5%,rgba(150,155,170,0.08) 0%,transparent 100%),radial-gradient(ellipse 90% 35px at 70% 3%,rgba(145,150,168,0.07) 0%,transparent 100%)}
.moment-card[data-weather="cloudy"]{border-color:#c8c8d5;background:#f9f9fc}
.moment-card[data-weather="partly-cloudy"] .mf-weather-layer{opacity:1;background:radial-gradient(ellipse 90% 30px at 60% 0%,rgba(140,145,165,0.07) 0%,transparent 100%),linear-gradient(135deg,rgba(255,235,180,0.10) 0%,transparent 40%)}
.moment-card[data-weather="partly-cloudy"]{border-color:#d0d0d8}
.moment-card[data-weather="fog"] .mf-weather-layer,.moment-card[data-weather="foggy"] .mf-weather-layer{opacity:1;background:linear-gradient(180deg,rgba(160,160,180,0.10) 0%,rgba(165,165,185,0.08) 25%,rgba(170,170,188,0.06) 50%,rgba(175,175,190,0.04) 75%,rgba(180,180,192,0.02) 100%)}
.moment-card[data-weather="fog"],.moment-card[data-weather="foggy"]{border-color:#c5c5d2;background:#f7f7fb}
.moment-card[data-weather="snow"] .mf-weather-layer,.moment-card[data-weather="snowy"] .mf-weather-layer{opacity:1;background:radial-gradient(circle 3px at 12% 10%,#b0c0e0 0%,#b0c0e0 50%,transparent 51%),radial-gradient(circle 2.5px at 30% 30%,#bcc8e0 0%,#bcc8e0 50%,transparent 51%),radial-gradient(circle 4px at 55% 15%,#a8bad8 0%,#a8bad8 50%,transparent 51%),radial-gradient(circle 2px at 75% 40%,#b8c8e2 0%,#b8c8e2 50%,transparent 51%),radial-gradient(circle 3.5px at 88% 12%,#aec0dc 0%,#aec0dc 50%,transparent 51%),radial-gradient(circle 2px at 20% 60%,#c0cce4 0%,#c0cce4 50%,transparent 51%),radial-gradient(circle 3px at 45% 70%,#b4c4de 0%,#b4c4de 50%,transparent 51%),linear-gradient(180deg,rgba(185,200,225,0.1) 0%,transparent 30%)}
.moment-card[data-weather="snow"],.moment-card[data-weather="snowy"]{border-color:#c8d0e0;background:#f8f9fd}
.moment-card[data-weather="sunny"] .mf-weather-layer{opacity:1;background:linear-gradient(135deg,rgba(255,235,180,0.18) 0%,rgba(255,240,200,0.08) 30%,transparent 60%),radial-gradient(ellipse at 15% 10%,rgba(255,220,130,0.1) 0%,transparent 50%)}
.moment-card[data-weather="sunny"]{border-color:#e8e0c8}
.moment-card[data-weather="storm"] .mf-weather-layer,.moment-card[data-weather="stormy"] .mf-weather-layer{opacity:1;background:linear-gradient(180deg,rgba(60,60,90,0.12) 0%,rgba(70,70,100,0.06) 30%,transparent 55%),repeating-linear-gradient(100deg,transparent,transparent 8px,rgba(80,90,130,0.06) 8px,rgba(80,90,130,0.06) 10px)}
.moment-card[data-weather="storm"],.moment-card[data-weather="stormy"]{border-color:#c8c8d8}
.moment-card[data-weather="wind"] .mf-weather-layer,.moment-card[data-weather="windy"] .mf-weather-layer{opacity:1;background:repeating-linear-gradient(175deg,transparent,transparent 14px,rgba(130,155,195,0.07) 14px,rgba(130,155,195,0.07) 17px),repeating-linear-gradient(172deg,transparent,transparent 28px,rgba(130,155,195,0.05) 28px,rgba(130,155,195,0.05) 32px)}
.moment-card[data-weather="wind"],.moment-card[data-weather="windy"]{border-color:#d0d8e4}
.moment-card[data-weather="clear"] .mf-weather-layer{display:none}
.moment-card[data-weather="clear"]{border-color:#c0c0d0;background:#fff}
.moment-card[data-weather="clear-stars"] .mf-weather-layer{display:none}
.moment-card[data-weather="clear-stars"]{border-color:#c0c0d0;background:#fff}
.moment-card[data-weather="clear-zodiac"] .mf-weather-layer{display:none}
.moment-card[data-weather="clear-zodiac"]{border-color:#c0c0d0;background:#fff}

/* Clear night: sky band at top with gradual fade */
.mf-sky-band{
  position:relative;
  height:80px;
  overflow:visible;
  background:linear-gradient(180deg,
    #1a1a34 0%,
    #222248 25%,
    #3a3a62 45%,
    #6868a0 62%,
    #a0a0c0 75%,
    #d0d0e0 88%,
    transparent 100%
  );
  border-radius:0.5rem 0.5rem 0 0;
}
/* Extended bleed past the band edge */
.mf-sky-band::after{
  content:'';
  position:absolute;bottom:-28px;left:0;right:0;height:28px;
  background:linear-gradient(180deg, rgba(208,208,224,0.15) 0%, rgba(220,220,236,0.06) 50%, transparent 100%);
  pointer-events:none;
}
.mf-sky-band svg{position:absolute;inset:0;width:100%;height:100%}
.mf-sky-band .star{fill:#8898d0}
.mf-sky-band .star-bright{fill:#e8ecff}
.mf-sky-band .line{stroke:#8898d0;stroke-width:1.2;fill:none;opacity:0.6}
.mf-sky-band .twinkle{animation:mfTwinkle 3s ease-in-out infinite}
.mf-sky-band .twinkle:nth-child(3n){animation-duration:2.4s;animation-delay:0.5s}
.mf-sky-band .twinkle:nth-child(5n){animation-duration:3.8s;animation-delay:1.2s}
.mf-sky-band .moon{position:absolute;top:10px;right:16px;z-index:2;opacity:0.65}
@keyframes mfTwinkle{0%,100%{opacity:0.15}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.mf-sky-band .twinkle{animation:none !important}}

/* Hero cards skip weather textures */
.moment-card.moment-card--hero .mf-weather-layer{display:none}
.moment-card.moment-card--hero .mf-sky-band{display:none}

/* Card Base */
.moment-card {
  background: hsl(0 0% 100%);
  border: 1px solid hsl(240 5.9% 85%);
  border-radius: 0.5rem;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}


.moment-card:hover {
  border-color: hsl(240 5.9% 70%);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}

.moment-card:focus-within {
  outline: 3px solid hsl(221.2 83.2% 53.3%);
  outline-offset: 2px;
}

.moment-card__body {
  padding: 1.25rem 1.5rem;
}

/* Card Header - Title + Date */
.moment-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.moment-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.moment-card__title a {
  color: hsl(240 10% 3.9%);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.moment-card__title a:hover {
  color: hsl(221.2 83.2% 45%);
}

.moment-card__title a:focus {
  outline: 3px solid hsl(221.2 83.2% 53.3%);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.moment-card__title i {
  color: hsl(240 5.9% 30%);
  flex-shrink: 0;
  font-size: 1.25rem;
}

.moment-card__date {
  font-size: 0.8125rem;
  color: hsl(240 5.3% 45%);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Card Content - Block HTML rendering */
.moment-card__content {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: hsl(240 5.3% 20%);
  margin-bottom: 1rem;
}

/* Paragraphs within content */
.moment-card__content p {
  margin: 0 0 0.75rem 0;
}

.moment-card__content p:last-of-type {
  margin-bottom: 0;
}

/* Headings in card content (H1 converted to H2) */
.moment-card__content h2,
.moment-card__content .moment-card__heading {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: hsl(240 10% 3.9%);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.moment-card__content h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.75rem 0 0.375rem 0;
  color: hsl(240 10% 3.9%);
  line-height: 1.4;
}

.moment-card__content h4,
.moment-card__content h5,
.moment-card__content h6 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0.5rem 0 0.25rem 0;
  color: hsl(240 10% 3.9%);
  line-height: 1.4;
}

/* Lists in content */
.moment-card__content ul,
.moment-card__content ol {
  margin: 0 0 0.75rem 1.25rem;
  padding: 0;
}

.moment-card__content li {
  margin-bottom: 0.25rem;
}

/* Links in content */
.moment-card__content a {
  color: hsl(221.2 83.2% 45%);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.moment-card__content a:hover {
  color: hsl(221.2 83.2% 35%);
}

/* Blockquotes */
.moment-card__content blockquote {
  margin: 0.5rem 0;
  padding: 0.5rem 1rem;
  border-left: 3px solid hsl(240 5.9% 85%);
  background: hsl(240 4.8% 97%);
  font-style: italic;
  color: hsl(240 5.3% 30%);
}

/* Code in content */
.moment-card__content code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.85em;
  padding: 0.125rem 0.375rem;
  background: hsl(240 4.8% 92%);
  border-radius: 0.25rem;
}

.moment-card__content pre {
  margin: 0.5rem 0;
  padding: 0.75rem;
  background: hsl(240 10% 8%);
  color: hsl(0 0% 95%);
  border-radius: 0.375rem;
  overflow-x: auto;
  font-size: 0.8125rem;
}

.moment-card__content pre code {
  padding: 0;
  background: transparent;
}

/* Read more link */
.moment-card__readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(221.2 83.2% 45%);
  text-decoration: none;
  transition: color 0.15s ease;
}

.moment-card__readmore:hover {
  color: hsl(221.2 83.2% 35%);
}

.moment-card__readmore:focus {
  outline: 3px solid hsl(221.2 83.2% 53.3%);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.moment-card__readmore i {
  font-size: 1rem;
}

/* Notebooks */
.moment-card__notebooks {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: hsl(221.2 83.2% 53.3%);
  background: hsl(221.2 83.2% 97%);
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  text-decoration: none;
  border: 1px solid hsl(221.2 83.2% 90%);
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
  cursor: pointer;
  margin-top: 0.75rem;
  border-radius: 0.375rem;
  color: hsl(221.2 83.2% 40%);
  background: hsl(221.2 83.2% 93%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  border-color: hsl(221.2 83.2% 80%);
}

.moment-card__image {
  display: block;
  margin: 0.5rem -1.5rem 0.75rem;
  overflow: hidden;
}

.moment-card__image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
}

.moment-card__image:focus {
  outline: 3px solid hsl(221.2 83.2% 53.3%);
  outline-offset: 2px;
}

/* Media components */
.moment-card__video,
.moment-card__audio {
  background: hsl(0 0% 100%);
  border: 1px solid hsl(240 5.9% 85%);
  border-radius: 0.75rem;
  padding: 1.5rem;
  pointer-events: auto;
  position: relative;
  z-index: 5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.moment-card__video-header,
.moment-card__audio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}

.moment-card__video-icon,
.moment-card__audio-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: hsl(240 4.8% 95.9%);
  border-radius: 0.5rem;
  flex-shrink: 0;
}

.moment-card__video-icon i,
.moment-card__audio-icon i {
  font-size: 1.5rem;
  color: hsl(240 5.9% 40%);
}

.moment-card__video-info,
.moment-card__audio-info {
  flex: 1;
  min-width: 0;
}

.moment-card__video-title,
.moment-card__audio-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(240 10% 3.9%);
  margin: 0 0 0.25rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moment-card__video-subtitle,
.moment-card__audio-subtitle {
  font-size: 0.75rem;
  color: hsl(240 5.3% 45%);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moment-card__video video {
  display: block;
  width: 100%;
  max-height: 400px;
  border-radius: 0.375rem;
  pointer-events: auto;
  position: relative;
  z-index: 5;
}

.moment-card__audio audio {
  width: 100%;
  height: 40px;
  pointer-events: auto;
  border-radius: 0.375rem;
  background: hsl(240 4.8% 97%);
}

/* Custom Audio Controls */
.custom-audio-player {
  width: 100%;
}

.audio-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
}

.audio-time-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.audio-time {
  font-size: 0.8125rem;
  color: hsl(240 5.3% 45%);
  font-variant-numeric: tabular-nums;
  min-width: 2.5rem;
}

.audio-progress-container {
  flex: 1;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.audio-progress-bar {
  position: relative;
  width: 100%;
  height: 2px;
  background: hsl(240 5.9% 85%);
  border-radius: 1px;
  overflow: visible;
}

.audio-progress-fill {
  height: 100%;
  background: hsl(240 10% 3.9%);
  border-radius: 1px;
  width: 0%;
  transition: width 0.1s ease;
}

.audio-progress-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: hsl(240 10% 3.9%);
  border-radius: 50%;
  left: 0%;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.audio-progress-container:hover .audio-progress-handle {
  opacity: 1;
}

.audio-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: hsl(240 10% 3.9%);
  color: hsl(0 0% 100%);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
  flex-shrink: 0;
}

.audio-play-btn:hover {
  background: hsl(240 10% 10%);
  transform: scale(1.05);
}

.audio-play-btn:active {
  transform: scale(0.98);
}

.audio-play-btn i {
  font-size: 0.875rem;
}

.moment-card__video:focus-within,
.moment-card__audio:focus-within {
  outline: 3px solid hsl(221.2 83.2% 53.3%);
  outline-offset: 2px;
  border-radius: 0.375rem;
}

/* Status badges container */
.moment-card__status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Badge Base */
.mf-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background: hsl(240 4.8% 95.9%);
  color: hsl(240 10% 10%);
  border: 1px solid hsl(240 5.9% 90%);
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}

.mf-badge:hover {
  background: hsl(240 4.8% 90%);
  border-color: hsl(240 5.9% 80%);
}

.mf-badge:focus {
  outline: 3px solid hsl(221.2 83.2% 53.3%);
  outline-offset: 2px;
}

.mf-badge i {
  font-size: 0.9375rem;
}

/* Badge Variants */
.mf-badge--live {
  background: hsl(0 84.2% 50%);
  color: hsl(0 0% 100%);
  border-color: hsl(0 84.2% 50%);
  animation: mf-pulse 2s ease-in-out infinite;
}

@keyframes mf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

.mf-badge--pinned {
  background: hsl(45 93% 47%);
  color: hsl(38 92% 15%);
  border-color: hsl(45 93% 47%);
}

.mf-badge--tag {
  background: hsl(210 40% 96%);
  border-color: hsl(210 40% 88%);
  color: hsl(210 40% 20%);
}

.mf-badge--tag:hover {
  background: hsl(210 40% 92%);
  border-color: hsl(210 40% 75%);
}

/* Like Button */
.mf-like-btn {
  background: hsl(0 0% 100%);
  border: 1px solid hsl(240 5.9% 85%);
  pointer-events: auto; /* Allow like button to be clicked */
  position: relative;
  z-index: 5; /* Higher than overlay link */
}

.mf-like-btn:hover {
  background: hsl(0 72% 97%);
  border-color: hsl(0 72% 80%);
}

.mf-like-btn[data-liked="true"] {
  background: hsl(0 72% 95%);
  border-color: hsl(0 72% 75%);
}

.mf-like-btn .ph-heart {
  color: hsl(0 72.2% 45%);
}

/* Make all badges interactive */
.mf-badge {
  pointer-events: auto; /* Allow badges to be clicked */
  position: relative;
  z-index: 4; /* Higher than overlay link but lower than media controls */
}

/* Meta Footer */
.moment-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid hsl(240 5.9% 92%);
}

/* Responsive */
@media (max-width: 768px) {
  .moment-card__body {
    padding: 1.5rem;
  }
  
  .moment-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }
  
  .moment-card__title {
    font-size: 1rem;
  }
  
  .moment-card__video video {
    max-height: 250px;
  }
  
  .moment-card__video,
  .moment-card__audio {
    padding: 1.25rem;
  }
  
  /* WCAG AAA touch targets */
  .mf-badge,
  .mf-like-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.75rem;
  }
  
  .moment-card__meta {
    gap: 0.625rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .moment-card,
  .mf-badge,
  .mf-like-btn {
    transition: none;
  }
  
  .mf-badge--live {
    animation: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .moment-card {
    border-width: 2px;
    border-color: hsl(240 10% 20%);
  }
  
  .mf-badge {
    border-width: 2px;
  }
}

/* Forced colors mode */
@media (forced-colors: active) {
  .moment-card {
    border: 2px solid CanvasText;
  }
  
  .mf-badge {
    border: 2px solid CanvasText;
  }
  
  .mf-badge--live,
  .mf-badge--pinned {
    forced-color-adjust: none;
  }
}

/* Print */
@media print {
  .moment-card {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid #ccc;
  }
  
  .mf-like-btn {
    display: none;
  }
}

/* Link Preview Card Styling for moment list */
.moment-card__content .mpf-link-preview {
  border: 1px solid hsl(240 5.9% 85%);
  border-radius: 0.5rem;
  overflow: hidden;
  margin: 1rem 0;
  background: hsl(0 0% 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  max-width: 500px;
}

.moment-card__content .mpf-link-preview:hover {
  border-color: hsl(240 5.9% 70%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.moment-card__content .mpf-link-preview a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.moment-card__content .mpf-link-preview-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.moment-card__content .mpf-link-preview-content {
  padding: 1rem;
}

.moment-card__content .mpf-link-preview-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.moment-card__content .mpf-link-preview-favicon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
}

.moment-card__content .mpf-link-preview-domain {
  font-size: 0.75rem;
  color: hsl(240 5.3% 45%);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.moment-card__content .mpf-link-preview-title {
  font-size: 1rem;
  font-weight: 600;
  color: hsl(240 10% 3.9%);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.moment-card__content .mpf-link-preview-description {
  font-size: 0.875rem;
  color: hsl(240 5.3% 30%);
  line-height: 1.5;
  margin: 0;
}


/* Social Post & Link Preview Hover */
.mf-link-preview-card:hover {
  border-color: hsl(240 5.9% 70%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mf-social-media:hover img {
  opacity: 0.95;
}

/* ── Multi-photo gallery grid ── */
.moment-card__gallery{display:grid;gap:2px;border-radius:0.5rem;overflow:hidden;text-decoration:none;max-height:320px}
.moment-card__gallery.mf-gallery--2{grid-template-columns:1fr 1fr}
.moment-card__gallery.mf-gallery--3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.moment-card__gallery.mf-gallery--3 .mf-gallery__item:first-child{grid-row:1/3}
.moment-card__gallery.mf-gallery--4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.mf-gallery__item{position:relative;overflow:hidden;min-height:0}
.mf-gallery__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.2s}
.moment-card__gallery:hover .mf-gallery__item img{transform:scale(1.02)}
.mf-gallery__more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.4);color:#fff;font-size:1.2rem;font-weight:700}

/* ── Typing Ghost: Forming Card ── */
.mf-ghost{
  position:relative;
  border-radius:12px;
  border:1px dashed rgba(90,98,148,0.2);
  background:rgba(245,245,252,0.5);
  overflow:hidden;
  opacity:0;
  max-height:0;
  min-height:0;
  border-width:0;
  transition:opacity 0.8s ease,max-height 0.6s ease,margin 0.6s ease,border-width 0.3s ease;
  margin:0;padding:0;
}
.mf-ghost[aria-hidden="false"]{
  opacity:1;
  max-height:120px;
  margin-bottom:1rem;
  border-width:1px;
}
.mf-ghost__accent{
  position:absolute;left:0;top:0;bottom:0;width:5px;
  border-radius:12px 0 0 12px;
  background:rgb(90,98,148);
  opacity:0.18;
  animation:mfGhostAccent 3.5s ease-in-out infinite;
}
.mf-ghost__inner{padding:14px 14px 14px 20px}
.mf-ghost__meta{
  display:flex;align-items:center;gap:6px;margin-bottom:10px;
}
.mf-ghost__avatar{
  width:16px;height:16px;border-radius:50%;
  background:rgba(90,98,148,0.1);
}
.mf-ghost__name{
  font-size:0.6rem;font-weight:600;
  color:rgba(90,98,148,0.35);
}
.mf-ghost__status{
  font-size:0.55rem;font-weight:600;
  color:rgba(90,98,148,0.28);
  margin-left:auto;
  display:flex;align-items:center;gap:4px;
}
.mf-ghost__dots{display:inline-flex;gap:2px}
.mf-ghost__dots span{
  width:3px;height:3px;border-radius:50%;
  background:rgba(90,98,148,0.3);
  animation:mfGhostDot 1.4s ease-in-out infinite;
}
.mf-ghost__dots span:nth-child(2){animation-delay:0.2s}
.mf-ghost__dots span:nth-child(3){animation-delay:0.4s}
.mf-ghost__lines{display:flex;flex-direction:column;gap:7px}
.mf-ghost__line{
  height:3px;border-radius:2px;
  background:rgba(90,98,148,0.07);
  animation:mfGhostLine 3s ease-in-out infinite;
}
.mf-ghost__line:nth-child(1){width:30%;animation-delay:0s}
.mf-ghost__line:nth-child(2){width:65%;animation-delay:0.4s}
.mf-ghost__line:nth-child(3){width:42%;animation-delay:0.8s}
.mf-ghost__cursor{
  display:inline-block;width:2px;height:12px;
  background:rgba(90,98,148,0.3);
  animation:mfGhostCursor 1s step-end infinite;
  vertical-align:middle;margin-left:2px;
  border-radius:1px;
}
@keyframes mfGhostAccent{0%,100%{opacity:0.12}50%{opacity:0.25}}
@keyframes mfGhostDot{0%,60%,100%{opacity:0.18;transform:translateY(0)}30%{opacity:0.45;transform:translateY(-2px)}}
@keyframes mfGhostLine{0%,100%{opacity:0.05}50%{opacity:0.12}}
@keyframes mfGhostCursor{0%,100%{opacity:0}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .mf-ghost__accent,.mf-ghost__dots span,.mf-ghost__line,.mf-ghost__cursor{animation:none !important}
  .mf-ghost__accent{opacity:0.18}
  .mf-ghost__dots span{opacity:0.3}
  .mf-ghost__line{opacity:0.08}
  .mf-ghost__cursor{opacity:0.3}
}

/* ════════════════════════════════════════════
   DARK MODE — Moment Cards & Feed
   ════════════════════════════════════════════ */

/* Base card */
[data-theme="dark"] .moment-card { background: #1e293b; border-color: #607888; }
[data-theme="dark"] .moment-card:hover { border-color: #7cb8f7; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
[data-theme="dark"] .moment-card:focus-within { outline-color: #7cb8f7; }
[data-theme="dark"] .moment-card__body { color: #e2e8f0; }
[data-theme="dark"] .moment-card__header { color: #f1f5f9; border-bottom-color: #334155; }
[data-theme="dark"] .moment-card__title { color: #f1f5f9; }
[data-theme="dark"] .moment-card__title a { color: #f1f5f9 !important; }
[data-theme="dark"] .moment-card__title a:hover { color: #7cb8f7 !important; }
[data-theme="dark"] .moment-card__date { color: #a8b5c4; }
[data-theme="dark"] .moment-card__content { color: #e2e8f0; }
[data-theme="dark"] .moment-card__content a { color: #7cb8f7 !important; }
[data-theme="dark"] .moment-card__content a:hover { color: #a5d4fd !important; }
[data-theme="dark"] .moment-card__meta { color: #a8b5c4; border-top-color: #334155; }
[data-theme="dark"] .moment-card__category { color: #a8b5c4; }
[data-theme="dark"] .moment-card__location { color: #a8b5c4; }
[data-theme="dark"] .moment-card__footer { border-top-color: #334155; }
[data-theme="dark"] .moment-card__readmore { color: #7cb8f7 !important; }
[data-theme="dark"] .moment-card__readmore:hover { color: #a5d4fd !important; }
[data-theme="dark"] .moment-card__heading { color: #f1f5f9; }
[data-theme="dark"] .moment-card__content h1,
[data-theme="dark"] .moment-card__content h2,
[data-theme="dark"] .moment-card__content h3,
[data-theme="dark"] .moment-card__content h4 { color: #f1f5f9 !important; }
[data-theme="dark"] .moment-card__body h1,
[data-theme="dark"] .moment-card__body h2,
[data-theme="dark"] .moment-card__body h3 { color: #f1f5f9 !important; }

/* ── Bookmark/pinned icon — was #484851 (1.62:1 FAIL), now #a8b5c4 (7.02:1 AAA) ── */
[data-theme="dark"] .moment-card i[class*="bookmark"],
[data-theme="dark"] .moment-card i[class*="push-pin"] {
  color: #a8b5c4 !important;
}

/* ── Category icons in badges — ensure visibility ── */
[data-theme="dark"] .mf-badge i { color: #a8b5c4; }
[data-theme="dark"] .mf-badge--live i { color: #fff; }
[data-theme="dark"] .mf-badge--tag i { color: #a8b5c4; }

/* Tags */
[data-theme="dark"] .moment-card__tag { background: #0f172a; color: #a8b5c4; border-color: #334155; }
[data-theme="dark"] .moment-card__tag:hover { border-color: #7cb8f7; color: #7cb8f7; }

/* Badges */
[data-theme="dark"] .mf-badge { background: #1e293b; color: #a8b5c4; border-color: #607888; }
[data-theme="dark"] .mf-badge:hover { border-color: #7cb8f7; color: #e2e8f0; }
[data-theme="dark"] .mf-like-btn { color: #a8b5c4; }
[data-theme="dark"] .mf-like-btn:hover { color: #f472b6; }
[data-theme="dark"] .moment-card__notebooks a { color: #a8b5c4 !important; }
[data-theme="dark"] .moment-card__notebooks a:hover { color: #7cb8f7 !important; }

/* ── Weather badges — themed colors per condition (AAA on #1e293b) ── */
[data-theme="dark"] .mf-badge[aria-label*="Sunny"] { background: rgba(250,170,22,0.12); color: #fbbf24; border-color: rgba(250,170,22,0.25); }
[data-theme="dark"] .mf-badge[aria-label*="Sunny"] i { color: #fbbf24; }
[data-theme="dark"] .mf-badge[aria-label*="Rain"] { background: rgba(96,165,250,0.12); color: #93c5fd; border-color: rgba(96,165,250,0.25); }
[data-theme="dark"] .mf-badge[aria-label*="Rain"] i { color: #93c5fd; }
[data-theme="dark"] .mf-badge[aria-label*="Cloudy"],
[data-theme="dark"] .mf-badge[aria-label*="cloudy"] { background: rgba(148,163,184,0.12); color: #cbd5e1; border-color: rgba(148,163,184,0.25); }
[data-theme="dark"] .mf-badge[aria-label*="Cloudy"] i,
[data-theme="dark"] .mf-badge[aria-label*="cloudy"] i { color: #cbd5e1; }
[data-theme="dark"] .mf-badge[aria-label*="Snow"] { background: rgba(186,230,253,0.10); color: #bae6fd; border-color: rgba(186,230,253,0.20); }
[data-theme="dark"] .mf-badge[aria-label*="Snow"] i { color: #bae6fd; }
[data-theme="dark"] .mf-badge[aria-label*="Storm"] { background: rgba(129,140,248,0.12); color: #a5b4fc; border-color: rgba(129,140,248,0.25); }
[data-theme="dark"] .mf-badge[aria-label*="Storm"] i { color: #a5b4fc; }
[data-theme="dark"] .mf-badge[aria-label*="Wind"],
[data-theme="dark"] .mf-badge[aria-label*="wind"] { background: rgba(168,181,196,0.10); color: #a8b5c4; border-color: rgba(168,181,196,0.20); }
[data-theme="dark"] .mf-badge[aria-label*="Wind"] i,
[data-theme="dark"] .mf-badge[aria-label*="wind"] i { color: #a8b5c4; }
[data-theme="dark"] .mf-badge[aria-label*="Fog"] { background: rgba(168,181,196,0.08); color: #a8b5c4; border-color: rgba(168,181,196,0.18); }
[data-theme="dark"] .mf-badge[aria-label*="Fog"] i { color: #a8b5c4; }
[data-theme="dark"] .mf-badge[aria-label*="Clear"] { background: rgba(186,230,253,0.08); color: #bae6fd; border-color: rgba(186,230,253,0.18); }
[data-theme="dark"] .mf-badge[aria-label*="Clear"] i { color: #bae6fd; }

/* Social posts */
[data-theme="dark"] .moment-card__social-post { color: #e2e8f0; }
[data-theme="dark"] .moment-card__social-post div[style*="color:hsl(240 10% 3"] { color: #f1f5f9 !important; }
[data-theme="dark"] .moment-card__social-post div[style*="color:hsl(240 5.3%"] { color: #a8b5c4 !important; }

/* Images */
[data-theme="dark"] .moment-card__image img { opacity: 0.9; }

/* Link preview */
[data-theme="dark"] .moment-card__link-preview,
[data-theme="dark"] .mpf-link-preview { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .moment-card__link-preview:hover,
[data-theme="dark"] .mpf-link-preview:hover { border-color: #7cb8f7; }
[data-theme="dark"] .mpf-link-preview-title { color: #f1f5f9; }
[data-theme="dark"] .mpf-link-preview-description { color: #a8b5c4; }
[data-theme="dark"] .mpf-link-preview-domain { color: #a8b5c4; }

/* Age tinting — override the light sepia/saturate filters */
[data-theme="dark"] .moment-card[data-age="days"] { filter: none; border-color: #607888; }
[data-theme="dark"] .moment-card[data-age="weeks"] { filter: none; border-color: #546070; }
[data-theme="dark"] .moment-card[data-age="months"] { filter: none; border-color: #4a5565; opacity: 0.92; }
[data-theme="dark"] .moment-card[data-age="year"] { filter: none; border-color: #445060; opacity: 0.85; }
[data-theme="dark"] .moment-card[data-age="years"] { filter: none; border-color: #3e4a58; opacity: 0.78; }
[data-theme="dark"] .moment-card[data-age] .mf-accent { opacity: 0.5; }

/* ── Weather card variants — tinted dark backgrounds ── */
[data-theme="dark"] .moment-card[data-weather="rain"],
[data-theme="dark"] .moment-card[data-weather="rainy"] { background: #1a2535; border-color: #4a6080; }
[data-theme="dark"] .moment-card[data-weather="cloudy"] { background: #1c2638; border-color: #556070; }
[data-theme="dark"] .moment-card[data-weather="partly-cloudy"] { background: #1e293b; border-color: #5a6575; }
[data-theme="dark"] .moment-card[data-weather="fog"],
[data-theme="dark"] .moment-card[data-weather="foggy"] { background: #1a2434; border-color: #505a68; }
[data-theme="dark"] .moment-card[data-weather="snow"],
[data-theme="dark"] .moment-card[data-weather="snowy"] { background: #1c2840; border-color: #5570a0; }
[data-theme="dark"] .moment-card[data-weather="sunny"] { background: #1e2838; border-color: #6a6040; }
[data-theme="dark"] .moment-card[data-weather="storm"],
[data-theme="dark"] .moment-card[data-weather="stormy"] { background: #161e2e; border-color: #4a5068; }
[data-theme="dark"] .moment-card[data-weather="wind"],
[data-theme="dark"] .moment-card[data-weather="windy"] { background: #1a2638; border-color: #506078; }
[data-theme="dark"] .moment-card[data-weather="clear"] { background: #1e293b; border-color: #4a5a70; }
[data-theme="dark"] .moment-card[data-weather="clear-stars"] { background: #0f172a; border-color: #3a4a60; }
[data-theme="dark"] .moment-card[data-weather="clear-zodiac"] { background: #0f172a; border-color: #3a4a60; }

/* Weather layer overlays — reduce for dark backgrounds */
[data-theme="dark"] .mf-weather-layer { opacity: 0.4; }
[data-theme="dark"] .moment-card[data-weather="sunny"] .mf-weather-layer { opacity: 0.25; }
[data-theme="dark"] .moment-card[data-weather="snow"] .mf-weather-layer,
[data-theme="dark"] .moment-card[data-weather="snowy"] .mf-weather-layer { opacity: 0.15; }

/* ── Ambient audio strip — WCAG AAA verified ──
   Label #a8b5c4 on #1e293b = 7.02:1 (AAA ✓)
   Bar   #607888 on #1e293b = 3.16:1 (UI ≥3:1 ✓)
   Playing #7cb8f7 on #1e293b = 7.01:1 (AAA ✓) */
[data-theme="dark"] .mf-ambient-strip {
  background: linear-gradient(180deg, #1e293b, #1a2536) !important;
  border-color: #334155 !important;
  border-top-color: #334155 !important;
}
[data-theme="dark"] .mf-ambient-strip:hover {
  background: linear-gradient(180deg, #263248, #1e2d40) !important;
}
[data-theme="dark"] .mf-ambient-strip:focus-visible {
  outline-color: #7cb8f7;
}
[data-theme="dark"] .mf-wf-bar {
  background: #607888;
}
[data-theme="dark"] .mf-wf-label {
  color: #a8b5c4;
}
[data-theme="dark"] .mf-ambient-strip.playing .mf-wf-bar {
  background: #7cb8f7;
}
[data-theme="dark"] .mf-ambient-strip.playing .mf-wf-label {
  color: #7cb8f7;
}

/* Ghost/skeleton loading state */
[data-theme="dark"] .mf-ghost { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .mf-ghost__line { background: #334155; }
[data-theme="dark"] .mf-ghost__accent { background: #334155; }