/* ==========================================================================
   Dynamic (moments) page
   One card per moment; the header mirrors upstream's DynamicItem (avatar,
   author, time, location, pinned badge, permalink) without the gallery and
   inline comments islands.
   ========================================================================== */
.dynamic-page { display: flex; flex-direction: column; gap: 1rem; }
.dynamic-head .listing-title { display: flex; align-items: center; gap: 0.5rem; }
.dynamic-head .listing-title .icon { color: var(--primary); }
.dynamic-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1rem; }

.dynamic-search { position: relative; display: flex; align-items: center; flex: 1 1 14rem; min-width: 0; color: var(--content-meta); }
.dynamic-search .icon { position: absolute; left: 0.7rem; pointer-events: none; }
.dynamic-search input {
  width: 100%; min-height: 2.5rem;
  padding: 0.45rem 0.9rem 0.45rem 2.35rem;
  border: 1px solid var(--line-divider); border-radius: var(--radius-md);
  outline: none; background: transparent; color: var(--deep-text); font-size: 0.9rem;
}
.dynamic-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

.dynamic-year { position: relative; display: flex; align-items: center; flex: 0 0 auto; color: var(--content-meta); }
.dynamic-year .icon:first-child { position: absolute; left: 0.65rem; pointer-events: none; }
.dynamic-year .icon:last-child { position: absolute; right: 0.4rem; pointer-events: none; }
.dynamic-year select {
  appearance: none; -webkit-appearance: none;
  min-width: 8rem; min-height: 2.5rem;
  padding: 0.45rem 2rem;
  border: 1px solid var(--line-divider); border-radius: var(--radius-md);
  outline: none; background: transparent; color: var(--deep-text);
  font-size: 0.9rem; cursor: pointer;
}
.dynamic-year select:focus { border-color: var(--primary); }
.dynamic-count { margin-left: auto; font-size: 0.8rem; color: var(--content-meta); }

.dynamic-feed { display: flex; flex-direction: column; gap: 1rem; }
.dynamic-item {
  padding: 1.125rem; background: var(--card-bg);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  scroll-margin-top: calc(var(--navbar-h) + 1rem);
}
:root:not(.dark) .dynamic-item { box-shadow: 0 2px 12px -8px rgb(0 0 0 / 0.25); }
.dynamic-item[hidden] { display: none; }
.dynamic-item-head { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.dynamic-avatar {
  width: 3rem; height: 3rem; flex: 0 0 3rem; overflow: hidden;
  border-radius: 50%; background: var(--btn-regular-bg);
}
.dynamic-avatar img { width: 100%; height: 100%; margin: 0; object-fit: cover; }
.dynamic-identity { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.dynamic-author {
  width: fit-content; max-width: 100%; overflow: hidden;
  color: var(--deep-text); font-size: 0.95rem; text-overflow: ellipsis; white-space: nowrap;
}
.dynamic-author:hover { color: var(--primary); }
.dynamic-meta { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.dynamic-time { flex: none; color: var(--content-meta); font-size: 0.78rem; }
.dynamic-time:hover { color: var(--primary); }
.dynamic-location { display: inline-flex; align-items: center; gap: 0.15rem; min-width: 0; color: var(--content-meta); font-size: 0.78rem; }
.dynamic-location > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dynamic-pinned {
  display: inline-flex; align-items: center; gap: 0.2rem;
  margin-left: auto; padding: 0.15rem 0.4rem; border-radius: 0.25rem;
  background: color-mix(in oklch, var(--primary) 12%, transparent);
  color: var(--primary); font-size: 0.65rem; font-weight: 500; line-height: 1;
}
.dynamic-permalink { width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; border-radius: 50%; }
.dynamic-content { margin: 0.875rem 0 0 3.75rem; font-size: 0.98rem; line-height: 1.75; }
.dynamic-content > :first-child { margin-top: 0; }
.dynamic-content > :last-child { margin-bottom: 0; }
.dynamic-content h1, .dynamic-content h2, .dynamic-content h3, .dynamic-content h4 {
  margin: 1rem 0 0.4rem; font-size: 1.05rem; border-bottom: none;
}
.dynamic-content p { margin: 0.5rem 0; }
.dynamic-content img { max-width: 100%; height: auto; }
.dynamic-no-results { margin: 0; }

@media (max-width: 767px) {
  .dynamic-content { margin-left: 0; }
}
@media (max-width: 640px) {
  .dynamic-toolbar { flex-direction: column; align-items: stretch; }
  .dynamic-search, .dynamic-year { flex: 1 1 auto; }
  .dynamic-year select { width: 100%; }
  .dynamic-count { margin-left: 0; }
}