/* Поїзд залізної пам'яті. Усе в просторі .tm-*: сторінка не чіпає стилів сайту, а скидання нижче захищає її від них.
   Шрифт UZSans підключає сайт. Кольори — ті самі, що в main.css сайту (--color-blue-*). */

.tm,
.tm-veil,
.tm-sound {
  --tm-blue: #213786;
  --tm-blue-deep: #001561;
  --tm-bright: #1d51c3;
  --tm-navy: #050e2f;
  --tm-text: #2c2a29;
  --tm-muted: #5f6678;
  --tm-line: #e2e6f0;
  --tm-pale: #eef1fa;
  --tm-warm: #ffb65c;
  --tm-dusk: #0b1a4f; /* низ першого екрана й верх неба над поїздом */
  --tm-font: "UZSans", "UZ Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- Скидання всередині сторінки --- */
/* Шапка сайту фіксована й не займає місця в потоці: відступ під неї дає сама сторінка, як перша секція на /pidtrimka. */
.tm {
  padding-top: var(--tm-header, 84px);
  font-family: var(--tm-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--tm-text);
  background: #fff;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.tm *,
.tm *::before,
.tm *::after {
  box-sizing: border-box;
}
/* :where не додає специфічності: стилі компонентів нижче перемагають скидання, а скидання — елементні правила сайту. */
.tm :where(h1, h2, h3, p, dl, dt, dd, blockquote, form) {
  display: block;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
}
.tm :where(a) {
  display: inline;
  color: inherit;
  text-decoration: none;
  transition: none;
}
/* Посилання-перехід: без підкреслення, зі стрілкою, як «Всі історії» на сайті: значок arrow-right, повернутий на −45°, 24 px на 18 px тексту. */
.tm .tm-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  text-decoration: none;
}
.tm .tm-arrow-link svg {
  flex: none;
  width: 1.33em;
  height: 1.33em;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}
.tm .tm-arrow-link:hover svg {
  transform: rotate(-45deg) translateX(2px);
}
.tm :where(button, input) {
  margin: 0;
  font: inherit;
  color: inherit;
  width: auto;
  height: auto;
}
.tm :where(img, video, svg) {
  display: block;
  max-width: none;
}
.tm :focus-visible {
  outline: 3px solid #3a5bcf;
  outline-offset: 2px;
}
.tm-panel :focus-visible,
.tm-donate__copy :focus-visible,
.tm-top :focus-visible,
.tm-viewer :focus-visible,
.tm-memory--navy :focus-visible,
.tm-dcard:focus-visible {
  outline-color: #fff;
}

.tm-wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 768px) {
  .tm-wrap {
    padding-inline: 24px;
  }
}
@media (min-width: 1280px) {
  .tm-wrap {
    padding-inline: 20px;
  }
}

.tm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 32px;
  border: 0;
  border-radius: 10px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.tm .tm-btn--light {
  background: #fff;
  color: var(--tm-blue);
}
.tm .tm-btn--light:hover {
  background: var(--tm-pale);
}
.tm .tm-btn--primary {
  width: 100%;
  background: var(--tm-blue);
  color: #fff;
}
.tm .tm-btn--primary:hover {
  background: var(--tm-bright);
}

@media (min-width: 1024px) {
  .tm {
    --tm-header: 100px;
  }
}

/* --- Перший екран: на тлі петля з фільму без титрів, під нею кадр на випадок, якщо петля не грає --- */
.tm-top {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(calc(100vh - var(--tm-header, 84px)), 900px);
  min-height: min(calc(100svh - var(--tm-header, 84px)), 900px);
  overflow: hidden;
  background: var(--tm-dusk);
  color: #fff;
  isolation: isolate;
}
.tm-top__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
}
.tm-top__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  will-change: transform;
}
.tm .tm-top__img,
.tm .tm-top__loop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 0;
}
.tm .tm-top__loop {
  opacity: 0;
  transition: opacity 0.9s ease;
}
.tm .tm-top__loop.is-on {
  opacity: 1;
}
/* Темнимо лише низ, під текст: стопи в пікселях, бо текст однакової висоти на будь-якому екрані. Прапор лишається чистим.
   Горизонтального градієнта немає: на гладкому серпанку він дає смуги. */
.tm-top__bg::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background: linear-gradient(to top, var(--tm-dusk) 0, rgba(11, 26, 79, 0.92) 110px, rgba(11, 26, 79, 0.66) 290px, rgba(11, 26, 79, 0.36) 420px, rgba(11, 26, 79, 0) 620px);
}
.tm-top__in {
  display: grid;
  gap: 24px;
  padding-block: clamp(190px, 44vw, 240px) 28px;
}
.tm .tm-title {
  max-width: 8.4em;
  font-size: clamp(40px, 6.4vw, 92px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: #fff;
}
.tm .tm-lead {
  max-width: 27em;
  text-wrap: pretty;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
.tm .tm-top__start {
  gap: 12px;
  margin-top: 22px;
  padding-inline: 24px;
}
.tm .tm-top__start svg {
  flex: none;
  width: 20px;
  height: 20px;
}
.tm .tm-top__share {
  margin-top: 16px;
}
.tm .tm-top__share-label {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
.tm .tm-top__share .memorial-single__share-list {
  justify-content: flex-start;
  padding-bottom: 0;
}
.tm .tm-top__share .memorial-single__share-list a {
  padding: 6px;
}
.tm .tm-top__share .memorial-single__share-list svg {
  fill: #fff;
}
@media (min-width: 900px) {
  .tm-top__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
    gap: 48px;
    align-items: end;
    padding-block: 160px clamp(36px, 5vh, 64px);
  }
}
/* --- Повний перегляд --- */
.tm .tm-viewer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
}
.tm-viewer::backdrop {
  background: #000;
}
.tm-viewer__box {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}
.tm .tm-viewer__film {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}
.tm .tm-viewer__close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  z-index: 3;
  transition: opacity 0.3s ease, transform 0.2s ease;
}
.tm-video__ui {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding-block: 56px max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(5, 14, 47, 0.82), rgba(5, 14, 47, 0));
  color: #fff;
  transition: opacity 0.3s ease;
}
.tm-viewer__box.is-idle .tm-video__ui,
.tm-viewer__box.is-idle .tm-viewer__close {
  opacity: 0;
}
.tm-viewer__box.is-idle {
  cursor: none;
}
.tm-viewer__box.is-idle .tm-viewer__film {
  cursor: none;
}
.tm-video__wrap {
  display: grid;
  gap: 10px;
  padding-inline: clamp(14px, 3vw, 40px);
}
.tm-video__track {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tm .tm-video__time {
  flex: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.tm-video__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tm-round {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--tm-navy);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.tm .tm-round {
  width: 44px;
  height: 44px;
}
.tm-round:hover {
  transform: scale(1.06);
}
.tm-round svg {
  width: 20px;
  height: 20px;
}
.tm .tm-video__label {
  margin-right: auto;
  font-size: 14px;
  font-weight: 600;
}
@media (max-width: 559px) {
  .tm-video__wrap {
    gap: 2px;
  }
  .tm .tm-round {
    width: 38px;
    height: 38px;
  }
  .tm-round svg {
    width: 17px;
    height: 17px;
  }
}
@media (min-width: 768px) {
  .tm-video__ui {
    padding-block: 72px max(24px, env(safe-area-inset-bottom));
  }
  .tm-video__wrap {
    gap: 14px;
  }
  .tm .tm-round {
    width: 48px;
    height: 48px;
  }
  .tm .tm-round--small {
    width: 40px;
    height: 40px;
  }
}

/* Діапазон: заповнення задає --p із JS. */
.tm-range {
  flex: 1;
  min-width: 0;
  --p: 0%;
  --fill: #fff;
  --rest: rgba(255, 255, 255, 0.38);
  -webkit-appearance: none;
  appearance: none;
  display: block;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.tm .tm-range {
  width: 100%;
}
.tm-range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--fill) var(--p), var(--rest) var(--p));
}
.tm-range::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--fill) var(--p), var(--rest) var(--p));
}
.tm-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--fill);
}
.tm-range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 50%;
  background: var(--fill);
}

/* --- Поїзд: він і є кнопкою гудка. Небо — продовження першого екрана, нижній край розчиняється в білій сторінці --- */
/* Перехід від темного першого екрана — плавною кривою: рівномірний градієнт дає помітний злам на початку. */
.tm-train__head {
  padding-block: clamp(56px, 8vw, 120px) clamp(4px, 1.5vw, 20px);
  background: linear-gradient(to bottom, var(--tm-dusk) 0%, #0c1c52 10%, #0f2159 20%, #142862 30%, #1b316e 40%, #233b7c 50%, #2c468c 60%, #35519c 70%, #3d5bab 80%, #4261b7 90%, #4767c4 100%);
  color: #fff;
}
/* Підказка-пігулка: видно, що поїзд натискається. Сама вона не кнопка. */
.tm .tm-train__note {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  padding: 7px 18px 7px 7px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.14);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.35;
  color: #fff;
}
.tm-train__note-ic {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--tm-blue);
}
.tm-train__note-ic svg {
  width: 20px;
  height: 20px;
}
/* Тихий пульс навколо значка, поки гудок не звучить. */
.tm-train__note-ic::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
  animation: tm-note-pulse 2.6s ease-out infinite;
}
.is-playing .tm-train__note-ic::after {
  animation: none;
}
@keyframes tm-note-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  70%, 100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}
.tm .tm-train__stage {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(220px, 26vw, 440px);
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #4767c4 0%, #8fa0dc 34%, #f0c9ad 58%, #ffe8d2 66%, #fff 100%);
  cursor: pointer;
}
/* Подвійна рамка: видно і на синьому небі, і на білій землі. */
.tm .tm-train__stage:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--tm-blue);
}
.tm .tm-train__still {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%; /* без JS; з JS кадр стоїть точно під сценою (is-framed) */
  transition: opacity 0.5s ease;
}
.tm .tm-train__still.is-framed {
  right: auto;
  bottom: auto;
  max-width: none;
  object-fit: fill;
  will-change: transform;
}
.tm-train__host {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
}
.is-live .tm-train__still {
  opacity: 0;
}
/* Нерухоме зерно плівки над кадром-зображенням, щоб поїзд не читався чистим 3D. Біля верхнього й нижнього країв згасає: там сторінка без зерна.
   Жива сцена малює зерно сама, у кожному пікселі окремо (buildGrain у tools/train/stage.js); у prefers-reduced-motion — лише це. */
.tm-train__grain {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  pointer-events: none;
  background: url("media/grain.webp") 0 0 / 96px 96px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 72%, transparent 92%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 72%, transparent 92%);
  transition: opacity 0.5s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .is-live .tm-train__grain {
    opacity: 0;
  }
}
/* Значки відтворення: показуємо потрібний за станом батька. */
.tm .tm-ic-pause,
.tm .tm-ic-muted {
  display: none;
}
.tm .is-playing .tm-ic-play,
.tm .is-muted .tm-ic-sound {
  display: none;
}
.tm .is-playing .tm-ic-pause,
.tm .is-muted .tm-ic-muted {
  display: block;
}

/* --- Панель зі свічкою --- */
.tm-panel-wrap {
  margin-top: clamp(20px, 3vw, 40px);
}
.tm-panel {
  position: relative;
  display: grid;
  gap: 40px;
  padding: 32px 20px 36px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--tm-navy);
  color: #fff;
  isolation: isolate;
}
/* Запалена свічка трохи зігріває всю панель. */
.tm-panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: radial-gradient(52% 62% at 25% 28%, rgba(255, 158, 72, 0.17), rgba(255, 158, 72, 0) 100%);
  opacity: 0;
  transition: opacity 1.6s ease;
}
.tm-panel.is-lit::before {
  opacity: 1;
}
.tm-light {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tm-candle {
  position: relative;
  width: min(260px, 72%);
  aspect-ratio: 560 / 611;
}
.tm .tm-candle__img {
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
}
.tm-candle__glow {
  position: absolute;
  left: 50%;
  top: 32%;
  width: 150%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 196, 120, 0.42), rgba(255, 160, 72, 0.13) 42%, rgba(255, 140, 50, 0) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease 0.1s;
}
/* Віск біля полум'я тепліший; край повторює верх свічки на фото. */
.tm-candle__wax {
  position: absolute;
  left: 39.4%;
  top: 53.4%;
  width: 21%;
  height: 26%;
  background: linear-gradient(to bottom, rgba(255, 168, 84, 0.72), rgba(255, 176, 92, 0));
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease 0.1s;
}
.tm-flame {
  position: absolute;
  left: 50%;
  bottom: 55.4%;
  width: 11.5%;
  transform: translateX(-50%) scale(0.2);
  transform-origin: 50% 100%;
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.1), opacity 0.4s ease;
}
.tm .tm-flame svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.tm-flame__body {
  transform-origin: 50% 100%;
  animation: tm-flicker 2.3s ease-in-out infinite;
}
.tm-flame__core {
  transform-origin: 50% 100%;
  animation: tm-flicker 1.7s ease-in-out infinite reverse;
}
.is-lit .tm-flame {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}
.is-lit .tm-candle__glow,
.is-lit .tm-candle__wax {
  opacity: 1;
}
.is-lit .tm-candle__glow {
  animation: tm-glow 3.1s ease-in-out infinite;
}
@keyframes tm-flicker {
  0%, 100% { transform: scale(1, 1) skewX(0deg); }
  22% { transform: scale(0.97, 1.04) skewX(-1.6deg); }
  46% { transform: scale(1.02, 0.98) skewX(1.2deg); }
  71% { transform: scale(0.98, 1.03) skewX(0.6deg); }
}
@keyframes tm-glow {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}
.tm .tm-light__title {
  margin-top: 8px;
  font-size: clamp(22px, 2.3vw, 27px);
  font-weight: 700;
  line-height: 1.25;
}
.tm .tm-light__text {
  max-width: 25em;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.82);
}
.tm .tm-light__btn {
  margin-top: 24px;
}
.tm .tm-light__btn[aria-disabled="true"] {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: default;
}
/* Чия свічка: людина з меморіалу, обрана випадково. */
.tm .tm-light__for {
  max-width: 25em;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.82);
}
.tm .tm-light__for a {
  display: flex;
  justify-content: center;
  margin-top: 2px;
  font-weight: 700;
  color: #fff;
}
.tm .tm-light__dates {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-variant-numeric: tabular-nums;
}
.tm .tm-story__title {
  font-size: clamp(23px, 2.3vw, 28px);
  font-weight: 700;
  line-height: 1.25;
}
.tm .tm-story p {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
}
@media (min-width: 900px) {
  .tm-panel {
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    padding: 28px 64px 44px 48px;
    border-radius: 32px;
  }
}

/* --- Стрічка --- */
.tm-feed-section {
  margin-top: clamp(48px, 7vw, 80px);
  padding-bottom: clamp(48px, 7vw, 96px);
}
.tm-feed-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.tm .tm-feed-head__title {
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--tm-blue);
}
.tm .tm-feed-head__note {
  margin-top: 8px;
  font-size: 15px;
  color: var(--tm-muted);
}
.tm .tm-feed-head__link {
  font-size: 15px;
  color: var(--tm-blue);
}
/* Цифри перед стрічкою: число над підписом */
.tm-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  margin-bottom: clamp(32px, 4vw, 52px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--tm-line);
}
.tm-stats > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 4px;
}
.tm-stats > div:last-child {
  grid-column: 1 / -1;
}
.tm .tm-stats dd {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--tm-blue);
  font-variant-numeric: tabular-nums;
}
/* Число загиблих — чорним: це не результат роботи. */
.tm .tm-stats > div:first-child dd {
  color: var(--tm-text);
}
.tm .tm-stats dt {
  font-size: 15px;
  line-height: 1.35;
  color: var(--tm-muted);
}
@media (min-width: 768px) {
  .tm-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tm-stats > div:last-child {
    grid-column: auto;
  }
}

.tm-feed {
  position: relative;
}
.tm .tm-feed__status {
  padding: 48px 0;
  text-align: center;
  color: var(--tm-muted);
}
.tm .tm-feed__status a {
  color: var(--tm-blue);
}
.tm .tm-feed__status.is-tail {
  position: absolute;
  left: 0;
  right: 0;
  padding: 32px 0 0;
}
.tm .tm-feed__error {
  display: block;
}
.tm .tm-feed__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  margin-top: 16px;
}
.tm .tm-feed__retry {
  width: auto;
  min-height: 44px;
  padding: 10px 24px;
}

/* Заглушки внизу стрічки, поки сервер віддає наступну сторінку: розміри карток людей */
.tm .tm-feed__loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.tm .tm-skel {
  position: absolute;
  top: 0;
  left: 0;
}
.tm .tm-skel__photo,
.tm .tm-skel__line {
  display: block;
  box-sizing: border-box;
  background: var(--tm-line);
  background-clip: content-box;
  animation: tm-skel-pulse 1.4s ease-in-out infinite;
}
.tm .tm-skel__photo,
.tm-hero__photo {
  aspect-ratio: 3 / 4;
}
.tm .tm-skel__photo {
  border-radius: 6px;
}
.tm .tm-skel__line {
  height: 23px;
  margin-top: 12px;
  padding: 4px 0;
}
.tm .tm-skel__line--short {
  width: 55%;
  height: 17px;
  margin-top: 5px;
  padding: 3px 0;
}
@media (max-width: 559px) {
  .tm .tm-skel__line {
    height: 19px;
    margin-top: 10px;
  }
  .tm .tm-skel__line--short {
    height: 15px;
  }
}
@keyframes tm-skel-pulse {
  50% {
    opacity: 0.5;
  }
}
.tm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.tm-measure {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
}
.tm-measure .tm-item {
  position: static;
}

/* Зовнішній шар рухає скрол, внутрішній відповідає за появу. */
.tm-item {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  contain: layout style;
}
.tm-item__in {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 0.75s ease, transform 0.95s cubic-bezier(0.16, 0.84, 0.3, 1);
}
.is-in > .tm-item__in,
.tm-measure .tm-item__in {
  opacity: 1;
  transform: none;
}

/* Картка людини */
.tm .tm-hero__link {
  display: block;
}
.tm-hero__photo {
  position: relative;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  background: #dfe3ec;
}
/* Safari до 15: пропорції 3:4 без aspect-ratio. */
@supports not (aspect-ratio: 1) {
  .tm .tm-skel__photo,
  .tm-hero__photo {
    height: 0;
    padding-bottom: 133.333333%;
  }
  .tm .tm-skel__photo {
    background-clip: padding-box;
  }
}
.tm-hero__photo::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, rgba(0, 21, 97, 0.97) 0%, rgba(0, 28, 120, 0.72) 11%, rgba(0, 38, 150, 0.34) 23%, rgba(0, 43, 199, 0) 36%);
  transition: opacity 0.6s ease;
  pointer-events: none;
}
/* Під курсором і з фокусом — обличчя без градієнта. */
.tm-hero__link:hover .tm-hero__photo::after,
.tm-hero__link:focus-visible .tm-hero__photo::after {
  opacity: 0;
}
.tm .tm-hero__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.6s ease, transform 1.1s cubic-bezier(0.16, 0.84, 0.3, 1);
}
.tm .tm-hero__img.is-loaded {
  opacity: 1;
}
.tm-hero__link:hover .tm-hero__img {
  transform: scale(1.045);
}
/* Без фото — хмари, та сама заглушка, що на сайті: чорно-біла й із тим самим градієнтом, що фото. */
.tm-hero__photo.is-empty {
  background: url("media/no-photo.webp") center / cover no-repeat;
}
.tm .tm-hero__name {
  margin-top: 12px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tm-blue);
  text-wrap: balance;
}
.tm .tm-hero__dates {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--tm-muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 559px) {
  .tm .tm-hero__name {
    margin-top: 10px;
    font-size: 16px;
  }
  .tm .tm-hero__dates {
    font-size: 11.5px;
  }
}

/* Спогад: на дві колонки стрічки, спершу людина, потім текст */
.tm .tm-memory__link {
  display: block;
  padding: 18px 22px 18px;
  border: 1px solid var(--tm-line);
  border-radius: 12px;
  background: #fff;
  color: var(--tm-text);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.tm .tm-memory__link:hover {
  border-color: #b9c3e2;
}
.tm .tm-memory--pale .tm-memory__link {
  border-color: transparent;
  background: var(--tm-pale);
}
.tm .tm-memory--navy .tm-memory__link {
  border-color: transparent;
  background: var(--tm-navy);
  color: #fff;
}
.tm .tm-memory__hero {
  display: flex;
  gap: 12px;
  align-items: center;
}
.tm .tm-memory__avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: #c5cce0;
}
.tm .tm-memory__who {
  display: block;
  min-width: 0;
}
.tm .tm-memory__name {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tm-blue);
}
.tm .tm-memory__dates {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--tm-muted);
  font-variant-numeric: tabular-nums;
}
.tm .tm-memory--navy .tm-memory__name {
  color: #fff;
}
.tm .tm-memory--navy .tm-memory__dates {
  color: rgba(255, 255, 255, 0.72);
}
.tm .tm-memory__text {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.tm .tm-memory__author {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tm-muted);
}
.tm .tm-memory--navy .tm-memory__author {
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 559px) {
  .tm .tm-memory__link {
    padding: 14px 14px 14px;
  }
  .tm .tm-memory__text {
    margin-top: 12px;
    font-size: 15px;
  }
  .tm .tm-memory__avatar {
    width: 42px;
    height: 42px;
  }
}

/* Картка-заклик у стрічці */
.tm .tm-dcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
  padding: 20px 18px 18px;
  border-radius: 12px;
  background: linear-gradient(165deg, var(--tm-blue), var(--tm-bright));
  color: #fff;
}
.tm .tm-dcard__heart {
  width: 34px;
  height: 30px;
}
.tm .tm-dcard__stat {
  margin-top: 28px;
  font-size: clamp(22px, 2.1vw, 27px);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tm .tm-dcard__text {
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}
.tm .tm-dcard__title {
  margin-top: 28px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}
.tm .tm-dcard__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: var(--tm-blue);
  transition: background-color 0.2s ease;
}
.tm .tm-dcard:hover .tm-dcard__cta {
  background: var(--tm-pale);
}

/* --- Блок донату: без JS стоїть у потоці, із JS стає широким елементом стрічки --- */
.tm-donate {
  position: relative;
  display: grid;
  gap: 24px;
  width: 100%;
  margin-block: 32px;
  padding: 28px 18px 18px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--tm-navy);
  color: #fff;
  isolation: isolate;
}
.tm-feed.is-ready .tm-donate {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  will-change: transform;
}
.tm-donate__rails {
  position: absolute;
  top: 0;
  right: -22%;
  bottom: 0;
  left: -22%;
  z-index: -2;
  background: url("media/rails.webp") center / cover no-repeat;
  will-change: transform;
}
.tm-donate::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(5, 14, 47, 0.9) 18%, rgba(5, 14, 47, 0.46) 60%, rgba(29, 81, 195, 0.2) 100%);
}
.tm .tm-donate__logo {
  color: #fff;
}
.tm .tm-donate__logo svg {
  width: clamp(112px, 11vw, 140px);
  height: auto;
}
.tm .tm-donate__title {
  max-width: 15em;
  margin-top: 20px;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  line-height: 1.1;
}
.tm .tm-donate__text {
  max-width: 32em;
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}
.tm .tm-donate__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin-top: 28px;
}
.tm .tm-donate__stats dt {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.76);
}
.tm .tm-donate__stats dd {
  margin-top: 2px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.tm .tm-donate__form {
  align-self: center;
  padding: 20px 18px 18px;
  border-radius: 16px;
  background: #fff;
  color: var(--tm-text);
}
.tm .tm-donate__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--tm-muted);
}
.tm-amount {
  position: relative;
  margin-top: 8px;
}
.tm .tm-amount__input {
  display: block;
  width: 100%;
  height: 60px;
  padding: 0 44px 0 16px;
  border: 1px solid #c5cce0;
  border-radius: 10px;
  background: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--tm-blue);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.tm .tm-amount__input::-webkit-outer-spin-button,
.tm .tm-amount__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tm .tm-amount__input:focus {
  border-color: var(--tm-blue);
  outline: 2px solid var(--tm-blue);
  outline-offset: -1px;
}
.tm .tm-amount__sign {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 600;
  color: var(--tm-muted);
  pointer-events: none;
}
.tm-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.tm .tm-preset {
  min-height: 44px;
  padding: 6px 4px;
  border: 1px solid #c5cce0;
  border-radius: 8px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: var(--tm-blue);
  white-space: nowrap;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.tm .tm-preset:hover {
  border-color: var(--tm-blue);
}
.tm .tm-preset[aria-pressed="true"] {
  border-color: var(--tm-blue);
  background: var(--tm-blue);
  color: #fff;
}
.tm .tm-donate__submit {
  margin-top: 12px;
}
.tm .tm-donate__reports {
  display: flex;
  justify-content: center;
  margin-top: 14px;
  font-size: 14px;
  color: var(--tm-blue);
}
@media (min-width: 900px) {
  .tm-donate {
    grid-template-columns: minmax(0, 1fr) minmax(0, 372px);
    gap: 48px;
    align-items: center;
    padding: 48px;
    border-radius: 32px;
  }
  .tm .tm-donate__form {
    padding: 24px;
  }
  .tm-presets {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* --- Кінець стрічки --- */
.tm-end {
  display: none;
  padding: clamp(40px, 6vw, 72px) 16px 0;
  text-align: center;
}
.tm-feed-section.is-complete .tm-end {
  display: block;
}
.tm .tm-end__title {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--tm-blue);
}
.tm .tm-end__btn {
  margin-top: 20px;
  width: auto;
}

/* --- Вуаль унизу стрічки: JS переносить її в body, бо сайт може мати transform на main --- */
.tm-veil {
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  height: 15vh;
  background: linear-gradient(to top, #fff 4%, rgba(255, 255, 255, 0.82) 34%, rgba(255, 255, 255, 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.tm-veil.is-on {
  opacity: 1;
}
/* Кнопка звуку внизу праворуч, поки звучить гудок. JS переносить її в body, тож стилі сайту скидаємо тут. */
.tm-sound {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 50;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tm-navy);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 10px 28px rgba(5, 14, 47, 0.3); /* обвідка — щоб не зливалась із темним блоком донату */
  color: #fff;
  font: inherit;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.92);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 0.84, 0.3, 1), visibility 0.35s, background-color 0.2s ease;
}
.tm-sound.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.tm-sound:hover {
  background: var(--tm-blue);
}
.tm-sound:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--tm-blue), 0 10px 28px rgba(5, 14, 47, 0.3);
}
.tm-sound svg {
  display: block;
}
.tm-sound__icon {
  width: 22px;
  height: 22px;
}
/* Кільце — скільки лишилось до кінця переклички. */
.tm-sound__ring {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  fill: none;
  stroke-width: 2;
}
.tm-sound__track {
  stroke: rgba(255, 255, 255, 0.16);
}
.tm-sound__progress {
  stroke: var(--tm-warm);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

@media (prefers-reduced-motion: reduce) {
  .tm-train__note-ic::after {
    animation: none;
  }
  .tm-item__in,
  .tm-hero__img,
  .tm-flame,
  .tm-candle__glow,
  .tm-candle__wax,
  .tm-panel::before,
  .tm-train__still,
  .tm-sound,
  .tm-veil {
    transition: none !important;
  }
  .tm-item__in {
    opacity: 1;
    transform: none;
  }
  .tm-flame__body,
  .tm-flame__core,
  .is-lit .tm-candle__glow,
  .tm .tm-skel__photo,
  .tm .tm-skel__line {
    animation: none;
  }
  .tm-hero__link:hover .tm-hero__img {
    transform: none;
  }
}