/* Місто живе від повторення: справи Терези й ранковий огляд (docs/design/screens/town-life.md) */

/* ---------- Справи міста ---------- */
.tl-errands { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.tl-head { display: flex; align-items: center; gap: 12px; }
.tl-av { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-tint); display: grid; place-items: center; flex: none; overflow: hidden; }
.tl-av svg { width: 32px; height: 40px; }
.tl-head h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--label); }
.tl-head small { display: block; font-size: 14px; color: var(--label2); }
.tl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tl-errand, .tl-news-row, .tl-wn-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px 12px 12px 10px; border-radius: 18px; border: 0;
  background: #fff; color: var(--label); font: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--glass-border), 0 2px 0 rgba(90, 60, 30, .08);
  transition: transform .15s var(--ease);
}
.tl-errand:hover, .tl-news-row:hover, .tl-wn-row:hover { transform: translateY(-2px); }
.tl-errand:active, .tl-news-row:active, .tl-wn-row:active { transform: scale(.98); }
.tl-errand:focus-visible, .tl-news-row:focus-visible, .tl-wn-row:focus-visible, .tl-news .btn:focus-visible, .tl-close:focus-visible { outline: 3px solid var(--label); outline-offset: 2px; }
.tl-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-tint); display: grid; place-items: center; font-size: 26px; flex: none; }
.tl-errand.restore .tl-ic { background: #fdf1d2; box-shadow: inset 0 0 0 2px #7a4f0a; }
.tl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tl-txt b { font-size: 16px; font-weight: 800; line-height: 1.25; }
.tl-txt small { font-size: 13px; color: var(--label2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-bld { width: 44px; height: 44px; flex: none; }
.tl-bld svg { width: 44px; height: 44px; display: block; }
.tl-chev { width: 16px; height: 16px; color: var(--label2); flex: none; }
.tl-chev svg { width: 16px; height: 16px; display: block; }
@container (max-width: 340px) { .tl-chev { display: none; } }
.tl-errands { container-type: inline-size; }

/* ---------- Ранковий огляд ---------- */
.tl-news { padding: 12px 14px 16px; }
.tl-news-head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 12px; }
.tl-news-head > div { flex: 1; min-width: 0; }
.tl-news-head h2 { margin: 0; font-size: 22px; font-weight: 800; }
.tl-news-head small { font-size: 15px; color: var(--label2); }
.tl-fox { width: 56px; height: 56px; flex: none; display: block; }
.tl-fox svg { width: 100%; height: 100%; }
.tl-close { width: 48px; height: 48px; flex: none; }
.tl-news-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tl-news-list li { animation: tlRow .25s var(--ease) both; animation-delay: calc(var(--tl-i, 0) * 150ms); }
@keyframes tlRow { from { opacity: 0; transform: translateY(8px); } }
.tl-news-row { min-height: 64px; padding: 10px 12px; }
.tl-news-row .tl-txt b { font-size: 16px; }
.tl-news-row .tl-txt small { font-size: 14px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tl-news-av { width: 48px; height: 48px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; font-size: 28px; flex: none; overflow: hidden; }
.tl-news-av svg { width: 40px; height: 50px; }
.tl-news-av .tl-fox { width: 40px; height: 40px; }
.tl-next { min-height: 56px; }
@media (max-width: 400px) { .tl-news { width: 340px; max-width: calc(100% - 20px); } }
@media (prefers-reduced-motion: reduce) { .tl-news-list li, .tl-errand, .tl-news-row, .tl-wn-row { animation: none; transition: none; } }
html.no-motion .tl-news-list li { animation: none; }

/* Відступи між сусідніми картками розділу «Допоможи містечку» */
.tm-review + .tl-errands, .tl-errands + * { margin-top: 10px; }

/* ---------- «Що нового» в «Справах» (town-street.md §5.4) ---------- */
.tl-whatsnew { display: flex; flex-direction: column; gap: 10px; }
.tl-whatsnew .tl-wn-row { min-height: 64px; padding: 10px 12px; }
.tl-whatsnew .tl-txt small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; }

/* ---------- Мить «Будівля покращилась» (town-life.md §6) ---------- */
.tl-up { position: relative; text-align: center; padding: 14px 16px 16px; width: 560px; max-width: calc(100% - 20px); }
.tl-up .tl-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; }
.tl-up .tl-close svg { width: 16px; height: 16px; }
.tl-up-hero { width: 160px; height: 160px; margin: 4px auto 6px; }
.tl-up-hero > svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tl-up h2 { margin: 4px 0 4px; font-size: 22px; font-weight: 800; outline: none; text-wrap: balance; }
.tl-up-sub { margin: 0 0 10px; font-size: 16px; color: var(--label2); line-height: 1.4; }
.tl-up-say { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.tl-up .btn { min-height: 56px; }
.tl-up .tl-up-museum { min-height: 48px; margin-top: 8px; }
.tl-up .btn:focus-visible { outline: 3px solid var(--label); outline-offset: 2px; }
@media (max-width: 400px) { .tl-up { width: 340px; } .tl-up-hero { width: 140px; height: 140px; } }
.tl-pop { transform-box: fill-box; transform-origin: 50% 100%; animation: tlPop .45s var(--ease) .2s both; }
@keyframes tlPop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.tl-up-hero [fill="#9fd3f0"], .tl-up-hero [fill="#e3f4fc"] { transition: fill .45s; }
@media (prefers-reduced-motion: reduce) { .tl-pop { animation: none; } .tl-up-hero [fill] { transition: none; } }
html.no-motion .tl-pop { animation: none; }