/* ── Единая лента «История зуба» (общий компонент: панель врача + карточка владельца) ──
   Стили вынесены из doctor.css, чтобы карточку владельца (admin.html) рисовало одинаково.
   Подключается и doctor.html, и admin.html. Переменные (--border/--text-muted/--success)
   берутся из общего styles.css, который грузят обе страницы. */

.tm-history { display: flex; flex-direction: column; gap: 8px; }
.tm-hist { border-left: 3px solid var(--border); padding: 8px 0 8px 12px; }
.tm-hist-top { font-size: 14px; }
.tm-hist-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Цветовая метка типа события. */
.tm-hist.tl-state { border-left-color: #64748b; }
.tm-hist.tl-diagnosis { border-left-color: #8e44ad; }
.tm-hist.tl-procedure { border-left-color: #2563eb; }
.tm-hist.tl-plan { border-left-color: #16a34a; }
.tl-type { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-muted); margin-right: 6px; }
.tl-type i, .tl-type svg { width: 13px; height: 13px; }
.tl-removed { color: #b91c1c; font-weight: 600; font-size: 12px; margin-left: 4px; }
.tl-status { color: var(--text-muted); font-size: 12px; margin-left: 6px; }

/* Статус гарантии в ленте (компактнее, чем пилюля в блоке процедур). */
.tl-warranty-active { color: var(--success); font-weight: 600; }
.tl-warranty-expired { color: var(--text-muted); }