/* Вид «Карьеры» (tree_careers*.js, docs/studio-features/17-album-careers.md).
   Свой файл рядом с tree.css, тот же слой responsive.
   Десктоп: у каждой строки (и у группы корня — с 15.10 она строка) — своя линейка
   лет и своя полоса плиток (.tc-strip), и листается только эта строка
   (владелец 05.10: единственная полоса жила в самом низу страницы; 06.10:
   «двигаю одного музыканта — едут все»; tree_careers_scroll.js). Полоса
   видна всегда (свой ::-webkit-scrollbar, иначе macOS прячет её до
   прокрутки); линейка строки прилипает к верху под шапкой, пока строка на
   экране, — её полоса и ← → (поверх правого края, без сдвига годов) — ручка
   годов посреди высокой строки (ревью 05.10). Долгие пустые годы строки —
   узкий разрыв «⋯ 1972–1996» (.tc-brk) и бледная линия через строку
   (.tc-gapline); засечки лет — по отрезкам (.tc-yseg).
   Шапка строки — над линейкой, не прокручивается; прокрутка к строке
   оставляет её шапку ниже шапки страницы (scroll-margin-top).
   Плитки крупнее: обложка 96 px (телефон — 72 px), название в две строки;
   буква-заглушка — рисунок (::before), не текст.
   Масштаб (05.10, tree_careers_scale.js): короткий отрезок лет — год шире
   (--tc-yw), подписи лет и плитки посередине года (.tc-wide); мало альбомов
   в году — крупные плитки на весь вид (.tc-t-mid / .tc-t-big: обложка 116
   и 144 px, название в три строки). «⤢ Крупно» — окно карьеры одного человека (.tc-zoom).
   Телефон: у человека с немногими альбомами обложка 96 px (.tc-pfew).
   Телефон 375 px: аккордеон, ничего шире экрана (min-width: 0, переносы
   длинных названий, фиксированных ширин нет). Вид — цветом И значком,
   общий — ●●, недоступный — ⊘ и приглушён. Фокус виден; при reduced-motion
   — без переходов. */
@layer responsive {
.tc { --tc-solo: hsl(42 85% 60%); --tc-band: hsl(205 75% 62%); --tc-producer: hsl(280 55% 70%);
      --tc-guest: hsl(150 50% 55%); --tc-writer: hsl(15 70% 64%); min-width: 0;
      --tc-stick: var(--topbar-h, 64px); }
/* Шапка телефона и портретного планшета (.m-header, sticky) — 60 px без выреза;
   та же полоса, что у vault.css (≤ 767 px или портрет ≤ 1024 px). */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
    .tc { --tc-stick: calc(var(--safe-top, 0px) + 60px); }
}
.tc-k-solo { --tc-k: var(--tc-solo); }
.tc-k-band { --tc-k: var(--tc-band); }
.tc-k-producer { --tc-k: var(--tc-producer); }
.tc-k-guest { --tc-k: var(--tc-guest); }
.tc-k-writer { --tc-k: var(--tc-writer); }
.tree-filters .tc-kbtn, .tc-legend .tc-sw { --tc-solo: hsl(42 85% 60%); --tc-band: hsl(205 75% 62%);
    --tc-producer: hsl(280 55% 70%); --tc-guest: hsl(150 50% 55%); --tc-writer: hsl(15 70% 64%); }
.tc-kbtn { border-left: 3px solid var(--tc-k, transparent) !important; }
.tc-kbtn:not(.on) { opacity: 0.6; }
.tc-years { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; }
.tc-sw { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 18px;
    border-left: 3px solid var(--tc-k); border-radius: 3px; background: var(--bg-card); font-size: 11px; }
.tc-lg-root { display: inline-block; width: 2px; height: 14px; background: var(--accent-strong); }

/* Цепочка: крошки и «Показать всех». */
.tc-crumbbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; }
.tc-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.tc-crumbs li { display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.tc-crumb { min-height: 32px; padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--radius-pill);
    background: var(--bg-card); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.tc-crumb[aria-current] { border-color: var(--accent); background: var(--accent-soft); }
.tc-crumb-cur { font-weight: 600; color: var(--text-strong); font-size: 13px; }
.tc-arrow { color: var(--text-dim); }

/* Десктоп: область строк — рамка; прокрутка по горизонтали — у полос строк.
   Шапки и списки строк не шире ОБЛАСТИ — 100% её ширины (полосы листаются
   сами, сетка строк не шире области). Без контейнера размеров
   (container-type): WebKit при каждой вставке такого контейнера сбрасывал
   прокрутку документа — поток перерисовывает вид, и страница на iPad уходила
   наверх (владелец 05.10, стенд: 1605 → 0). */
.tc-scroll { position: relative; width: 100%; max-width: 100%; padding-bottom: 6px;
    border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--bg-app, transparent); }
.tc-grid { position: relative; padding-bottom: 8px; }
/* Полоса строки: своя прокрутка вбок, видимая всегда; край не листает
   историю браузера (overscroll). Дорожка — во всю шкалу, поля — под обводку
   фокуса и рамку «этого альбома». */
.tc-strip { position: relative; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    padding-bottom: 2px; }
.tc-strip::-webkit-scrollbar { height: 10px; }
.tc-strip::-webkit-scrollbar-track { background: var(--bg-elev); border-radius: 5px; }
.tc-strip::-webkit-scrollbar-thumb { background: var(--border-strong); border: 2px solid var(--bg-elev); border-radius: 5px; }
.tc-strip::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
@supports not selector(::-webkit-scrollbar) {
    .tc-strip { scrollbar-width: thin; scrollbar-color: var(--border-strong) var(--bg-elev); }
}
.tc-lane { position: relative; padding: 4px 0; }
.tc-strip-ruler .tc-lane { padding: 0; }
/* Линейка лет строки прилипает к верху под шапкой, пока строка на экране.
   Непрозрачная — под ней проезжают плитки строки; подсветка строки (.lit) и
   полоса глубины цепочки — и на ней (ревью 07.10: линейка их прерывала). */
.tc-rulerwrap { position: sticky; top: var(--tc-stick, 64px); z-index: 3;
    background: var(--bg); border-bottom: 1px solid var(--border-soft); }
.tc-row.lit .tc-rulerwrap, .tc-row.lit .tc-rulernav { background: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--bg); }
.tc-row[class*="tc-depth-"]:not(.tc-depth-0) .tc-rulerwrap { box-shadow: inset 3px 0 0 var(--accent-line, var(--border-strong)); }
/* ← → строки — поверх правого края её линейки: линейка той же ширины, что
   полоса плиток, иначе годы линейки и плиток разошлись бы. */
.tc-rulernav { position: absolute; top: 1px; right: 4px; z-index: 1; margin: 0; padding: 0 0 0 6px;
    background: var(--bg); }
.tc-rulernav .tc-nav-btn { min-width: 32px; min-height: 24px; height: 24px; padding: 0 6px; line-height: 1; }
.tc-axis { position: relative; height: 26px; }
/* Засечки лет — по отрезкам строки: разрыв их прерывает. */
.tc-yseg { position: absolute; bottom: 0; height: 6px;
    background: repeating-linear-gradient(90deg, var(--border-soft) 0 1px, transparent 1px var(--tc-yw, 48px)); }
/* Разрыв пустых лет: подпись «⋯ 1972–1996» на линейке и бледная линия
   через строку (подсказка — у линии, «нет альбомов …»; слова для диктора —
   .tc-sr в списке плиток между соседними годами). */
.tc-brk { position: absolute; top: 4px; display: flex; justify-content: center; color: var(--text-dim);
    font-family: var(--font-mono); font-size: 10px; line-height: 18px; white-space: nowrap; overflow: hidden;
    border-radius: 4px; background: var(--bg-elev); }
.tc-gapline { position: absolute; top: 0; bottom: 0; z-index: 0; }
.tc-gapdash { position: absolute; inset: 0; }
.tc-gapdash::before { content: ''; position: absolute; top: 2px; bottom: 2px; left: 50%;
    border-left: 2px dashed var(--border-strong); opacity: 0.45; }
.tc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tc-tick { position: absolute; top: 4px; color: var(--text-dim); font-family: var(--font-mono); font-size: 11px; }
.tc-tick-root { visibility: hidden; }
.tc-wide .tc-tick { transform: translateX(-50%); }
/* Линия года альбома — в каждой полосе, под плитками. */
.tc-rootline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent-strong); opacity: 0.7;
    pointer-events: none; z-index: 0; }
.tc-rootline-row { opacity: 0.45; }
/* Подпись года альбома — посередине его линии (и в узком годе): справа
   от линии она закрывала «⋯» соседнего разрыва пустых лет. */
.tc-rootyear { position: absolute; top: 4px; left: 1px; transform: translateX(-50%); padding: 0 4px; border-radius: 4px; background: var(--accent-strong);
    color: var(--bg); font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.tc-group { position: sticky; left: 0; display: inline-block; max-width: calc(100% - 16px); margin: 10px 0 0;
    padding: 4px 10px; color: var(--accent-text); font-size: 13px; overflow-wrap: anywhere; }
.tc-row { position: relative; padding: 8px 0 10px; border-bottom: 1px solid var(--border-soft);
    scroll-margin-top: calc(var(--tc-stick, 64px) + 8px); }
.tc-row.lit { background: var(--accent-wash); }
/* Выбрали человека — к его строке (tree_careers_goto.js): коротко рамкой, не
   только цветом фона; имя строки — заголовок с фокусом клавиатуры. Рамка —
   слоем над содержимым строки: тенью её перекрывали прилипшая линейка лет
   (z-index 3), плитки у краёв и полоса прокрутки строки (ревью 07.10). */
.tc-row.tc-flash::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    border: 3px solid var(--accent-strong); }
.tc-build-wait:focus { outline: none; }
.tc-build-wait:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: 4px; }
.tc-pr.tc-flash > .tc-acc { border-color: var(--accent-strong); box-shadow: 0 0 0 2px var(--accent-strong); }
.tc-name:focus { outline: none; }
.tc-name:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: 4px; }
/* Глубина цепочки — тенью, а не рамкой: рамка сдвинула бы полосу на 3 px, и
   годы полосы разошлись бы с линейкой строки. */
.tc-row[class*="tc-depth-"]:not(.tc-depth-0) { box-shadow: inset 3px 0 0 var(--accent-line, var(--border-strong)); }
.tc-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    max-width: calc(100% - 16px); margin: 0 0 6px;
    padding: 2px 10px; overflow-wrap: anywhere; }
.tc-depth-1 .tc-row-head, .tc-group.tc-depth-1 { padding-left: 24px; }
.tc-depth-2 .tc-row-head, .tc-group.tc-depth-2 { padding-left: 38px; }
.tc-row[class*="tc-depth-3"] .tc-row-head, .tc-row[class*="tc-depth-4"] .tc-row-head,
.tc-row[class*="tc-depth-5"] .tc-row-head, .tc-row[class*="tc-depth-6"] .tc-row-head { padding-left: 52px; }
/* Имя — подпись строки; «Показать только X» — кнопка рядом (.tc-focus-btn). */
.tc-name { color: var(--text-strong); font-weight: 600; }
/* Фото человека у имени строки (person_face.js): 28px, на телефоне 24 —
   правило в vault.css вне слоя (здесь, в @layer, оно проигрывало .pf-av). */
.tc-page { min-width: 32px; min-height: 32px; border: 1px solid var(--border); border-radius: var(--radius-pill);
    background: transparent; color: var(--text-mid, var(--text)); cursor: pointer; }
.tc-zoom-btn, .tc-row-head .tc-focus-btn { min-height: 32px; padding: 2px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill);
    background: transparent; color: var(--text-mid, var(--text)); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.tc-zoom-btn:hover, .tc-page:hover, .tc-row-head .tc-focus-btn:hover { border-color: var(--border-strong); color: var(--text-strong); }
/* «Страница артиста» и «Семья группы» (tree_entries.js) — группой в действиях шапки строки и
   раскрытой строки телефона, с первого кадра (18.10: отдельными строками под шапкой они
   появлялись и пропадали с каждой перерисовкой потока). Переносятся группой; 44 px, как
   .ap-entry (artist_pages.css), — и под пальцем, и мышью. */
.tc-ents { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.tc-ents .btn { min-height: 44px; }
/* С входами подпись строки (почему, итоги, «⏳ собираю…») — своей строкой шапки: меняясь, она не
   переносит кнопки и не переносится из-за них. */
.tc-ents-brk { flex-basis: 100%; height: 0; margin-bottom: -4px; }
/* ← → строки — на её линейке; листают только эту строку. */
.tc-nav { display: inline-flex; gap: 4px; margin-left: auto; }
.tc-nav-btn { min-width: 32px; min-height: 32px; padding: 0 6px; border: 1px solid var(--border);
    border-radius: var(--radius-pill); background: var(--bg-card); color: var(--text-mid, var(--text));
    font: inherit; cursor: pointer; }
.tc-nav-btn:hover { border-color: var(--border-strong); color: var(--text-strong); }
.tc-why { color: var(--text-dim); font-size: 12px; }
.tc-total { color: var(--text-mid, var(--text)); font-size: 13px; }
.tc-prog { color: var(--accent-text); font-size: 12px; }
.tc-note { color: var(--text-dim); font-size: 12px; }
.tc-none { margin: 4px 10px; color: var(--text-dim); font-size: 12px; }
.tc-track { position: relative; }
.tc-ref { position: absolute; top: 0; bottom: 0; width: 2px; border-left: 2px dashed var(--accent-dim, var(--border-strong)); }
.tc-bars, .tc-tiles { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
/* Слой плиток — свой контекст наложения: «Discogs» (z-index 3 над обложкой)
   не рисуется поверх прилипшей линейки строки и не перехватывает её ← →
   (ревью 07.10). */
.tc-tiles, .tc-unk-list { isolation: isolate; }
/* overflow: clip, а не hidden: hidden сделал бы полосу контейнером
   прокрутки, и подпись не прилипала бы к краю полосы строки. */
.tc-bar { position: absolute; height: 20px; padding: 0 8px; border-radius: 10px; background: var(--bg-card-hover);
    border: 1px solid var(--tc-band); color: var(--text); font-size: 11px; line-height: 18px; white-space: nowrap;
    overflow: clip; text-overflow: ellipsis; }
.tc-bar-l { position: sticky; left: 8px; display: inline-block; }
.tc-more { margin-left: 4px; }
.tc-only { font-size: 13px; }
.tc-bar.root { border-style: dashed; opacity: 0.75; }
.tc-tiles > li { position: absolute; }
.tc-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 106px; height: 160px; padding: 4px;
    border: 1px solid var(--border); border-top: 3px solid var(--tc-k); border-radius: var(--radius-sm);
    background: var(--bg-card); background: color-mix(in srgb, var(--tc-k) 10%, var(--bg-card));
    color: var(--text); font: inherit; text-align: left; cursor: pointer; overflow: hidden; position: relative;
}
.tc-tile:hover { border-color: var(--border-strong); }
.tc-tile.strong { box-shadow: 0 0 0 2px var(--accent); }
.tc-tile.unavail, .tc-pli.unavail { opacity: 0.5; }
.tc-tile.hid, .tc-pli.hid { border-style: dashed; }
.tc-tile.prov, .tc-pli.prov { border-style: dotted; }
.tc-tile.root { outline: 2px solid var(--accent-strong); outline-offset: -2px; }
/* Обложка: буква — рисунок под картинкой; картинка ждёт показа невидимой. */
.tc-cover { position: relative; width: 96px; height: 96px; flex: 0 0 96px; border-radius: 4px; overflow: hidden;
    background: var(--bg-elev); }
.tc-cover-empty { display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 30px; }
.tc-cover-empty::before { content: attr(data-l); }
.tc-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tc-cover-img.tc-wait { visibility: hidden; }
/* Обложка ещё в пути (грузится или «позже») — буква бледнее; обложки нет — обычная (12.10). Только
   прозрачность: плитка того же размера, без анимации (плиток — сотни). Ревью 12.10: при 0,45 контраст
   буквы был 2,1 : 1 — на солнце плитка выглядела пустой; 0,66 — 3,2 : 1, и второй признак ожидания,
   от яркости буквы не зависящий, — пунктир внутри обложки (outline места не занимает). */
.tc-cover-empty:has(> .tc-wait)::before { opacity: 0.66; }
.tc-cover-empty:has(> .tc-wait) { outline: 1px dashed var(--border-strong); outline-offset: -4px; }
.tc-tile .tc-ico { position: absolute; top: 9px; right: 9px; padding: 1px 3px; border-radius: 6px; font-size: 13px;
    background: var(--bg-card); background: color-mix(in srgb, var(--bg-card) 80%, transparent); }
.tc-ttl { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    color: var(--text-strong); font-size: 12px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
/* Строка года: год и отметки слева, «Discogs» справа (сжимается первой). */
.tc-yr { display: flex; align-items: baseline; gap: 4px; width: 100%; min-width: 0; overflow: hidden;
    color: var(--text-dim); font-family: var(--font-mono); font-size: 11px; }
.tc-yr-t { flex: 0 0 auto; white-space: nowrap; }
.tc-flags { color: var(--accent-text); letter-spacing: 1px; }
/* Пометка (концерт, из паспорта) — на обложке снизу: плитка не растёт. */
.tc-tile .tc-note { position: absolute; left: 9px; top: 82px; max-width: 86px; padding: 0 4px; border-radius: 4px;
    background: var(--bg-card); color: var(--text-mid, var(--text)); font-size: 10px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
/* «другое издание» — своё издание зрителя: там же, над пометкой, если она есть. */
.tc-tile .tc-ed { position: absolute; left: 6px; top: 82px; max-width: 92px; padding: 0 3px; border-radius: 4px;
    border: 1px solid var(--accent-line, var(--accent)); background: var(--bg-card); color: var(--accent-text);
    font-size: 10px; line-height: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-tile .tc-note ~ .tc-ed { top: 64px; }
/* «Discogs» — элемент карьеры только из Discogs (20-discogs-credits.md §6.5): в
   строке года ПОД обложкой, а не на ней. На обложке пометка закрывала то 🎤/👥/🎸
   (ревью 07.10), то саму букву плитки без обложки (владелец 08.10) — на
   любом размере плитки; ★ популярности — слева сверху, пометки — внизу обложки. */
.tc-tile .tc-src { flex: 0 1 auto; min-width: 0; margin-left: auto; padding: 0 4px;
    border: 1px solid var(--border); border-radius: 4px; color: var(--text-dim);
    font-family: var(--font-ui); font-size: 10px; line-height: 13px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
/* Слой каталога (tree_careers_cat.js; 17-album-careers.md, «Слой каталога (12.10)»): альбом знает
   только каталог. Пометка «каталог» — там же, где «Discogs» (в строке года под обложкой), пунктирной
   рамкой; имя каталога — на крупных плитках, где ему есть место. Чужой или совместный альбом называет
   артистов альбома строкой над названием — название тогда короче на строку, плитка того же размера.
   Остаток («ещё N альбомов — не подтверждено…») — спокойной строкой под плитками строки, а не над
   ними: плитки она не двигает. */
.tc-tile .tc-src-cat { border: 1px dashed var(--text-dim); color: var(--text-mid, var(--text)); }
.tc-src-svc { display: none; }
.tc-t-big .tc-src-svc { display: inline; }
.tc-tile .tc-by { display: block; width: 100%; min-width: 0; color: var(--text-mid, var(--text)); font-size: 11px;
    line-height: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Одна строка названия под строкой артистов — обрыв внутри слова с многоточием («The Unforgetta…»),
   а не по слову («The…» у двух разных альбомов — ревью 13.10). */
.tc-tile .tc-by + .tc-ttl { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-t-mid .tc-tile .tc-by + .tc-ttl, .tc-t-big .tc-tile .tc-by + .tc-ttl { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; }
/* Счёт каталога в шапке строки — своим местом за итогом MusicBrainz; «⏳ собираю альбомы по
   каталогу…» стоит на том же месте тем же кеглем: шапка от прихода слоя не меняет высоту. */
.tc-cat-total { font-size: 13px; }
.tc-cat-foot { margin: 6px 10px 0; max-width: calc(100% - 20px); color: var(--text-mid, var(--text)); line-height: 1.5; overflow-wrap: anywhere; }
.tc-cat-link { min-height: 24px; text-decoration: underline; text-underline-offset: 2px; }
.tc-acc-body .tc-cat-foot { margin: 8px 0 0; max-width: none; }
.tc-legend .tc-src-cat { display: inline-block; padding: 0 4px; border: 1px dashed var(--text-dim); border-radius: 4px;
    color: var(--text-mid, var(--text)); font-size: 10px; line-height: 13px; }
/* Крупные плитки (мало альбомов в году): размер один на весь вид. */
.tc-t-mid .tc-tile { width: 128px; height: 194px; }
.tc-t-mid .tc-cover { width: 116px; height: 116px; flex: 0 0 116px; }
.tc-t-mid .tc-cover-empty { font-size: 36px; }
.tc-t-mid .tc-ttl { -webkit-line-clamp: 3; }
.tc-t-mid .tc-tile .tc-note, .tc-t-mid .tc-tile .tc-ed { top: 102px; max-width: 114px; }
.tc-t-mid .tc-tile .tc-note ~ .tc-ed { top: 84px; }
.tc-t-big .tc-tile { width: 156px; height: 226px; }
.tc-t-big .tc-cover { width: 144px; height: 144px; flex: 0 0 144px; }
.tc-t-big .tc-cover-empty { font-size: 44px; }
.tc-t-big .tc-ttl { -webkit-line-clamp: 3; font-size: 13px; }
.tc-t-big .tc-yr { font-size: 12px; }
.tc-t-big .tc-tile .tc-note { top: 130px; max-width: 134px; }
.tc-t-big .tc-tile .tc-ed { top: 130px; max-width: 140px; }
.tc-t-big .tc-tile .tc-note ~ .tc-ed { top: 112px; }
.tc-unknown { position: sticky; left: 0; width: fit-content; max-width: calc(100% - 16px); padding: 6px 10px 0; }
.tc-unk-h { display: block; margin: 0 0 4px; color: var(--text-dim); font-size: 12px; }
.tc-unk-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tc-skipped { margin: 10px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.tc-skipped ul { margin: 4px 0 0; padding-left: 18px; }
/* Человек без строки карьеры: «Построить карьеру». */
.tc-build { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; padding: 8px 12px;
    border: 1px solid var(--accent-line, var(--border)); border-radius: var(--radius);
    background: var(--accent-wash, var(--bg-card)); font-size: 13px; overflow-wrap: anywhere; }

/* Телефон: аккордеон по людям. Раскрытость задаёт состояние страницы. */
.tc-acc-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tc-pr { min-width: 0; scroll-margin-top: calc(var(--tc-stick, 60px) + 8px); }
.tc-pr.tc-depth-1 { margin-left: 10px; }
.tc-pr.tc-depth-2, .tc-pr.tc-depth-3 { margin-left: 20px; }
.tc-pgroup { color: var(--accent-text); font-size: 13px; overflow-wrap: anywhere; }
.tc-pgroup.tc-depth-2, .tc-pgroup.tc-depth-3 { margin-left: 10px; }
.tc-acc { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.tc-acc > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 44px; padding: 6px 12px;
    cursor: pointer; list-style: none; overflow-wrap: anywhere; }
.tc-acc > summary::-webkit-details-marker { display: none; }
.tc-acc > summary::before { content: '▸'; color: var(--text-dim); }
.tc-acc[open] > summary::before { content: '▾'; }
.tc-sname { font-weight: 600; color: var(--text-strong); }
.tc-acc-body { padding: 0 12px 10px; }
.tc-acc-acts { margin: 0 0 6px; }
/* «Показать только X» нажата — видно не только цветом (✓ в разметке); телефон и широкий экран. */
.tc-focus-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text, var(--text)); }
.tc-h { margin: 10px 0 4px; font-size: 13px; color: var(--text-mid, var(--text)); font-weight: 600; }
.tc-bands { margin: 0; padding-left: 18px; font-size: 13px; overflow-wrap: anywhere; }
.tc-before, .tc-after { margin: 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: 4px; }
.tc-phone .tc-unk-list { flex-direction: column; flex-wrap: nowrap; gap: 4px; }
.tc-phone .tc-unknown { position: static; max-width: none; padding: 0; }
.tc-pr.lit > .tc-acc { border-color: var(--accent); }
.tc-pli { display: flex; align-items: flex-start; gap: 8px; width: 100%; min-height: 40px; padding: 6px 8px;
    border: 1px solid var(--border); border-left: 4px solid var(--tc-k); border-radius: var(--radius-sm);
    background: var(--bg-card); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.tc-pli.strong { box-shadow: inset 0 0 0 1px var(--accent); }
.tc-pyr { flex: 0 0 auto; color: var(--text-dim); font-family: var(--font-mono); font-size: 12px; padding-top: 1px; }
.tc-phone .tc-cover { width: 72px; height: 72px; flex: 0 0 72px; }
.tc-phone .tc-cover-empty { font-size: 24px; }
.tc-phone .tc-pfew .tc-cover { width: 96px; height: 96px; flex: 0 0 96px; }
.tc-phone .tc-pfew .tc-cover-empty { font-size: 30px; }
.tc-pbody { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; flex: 1 1 auto; min-width: 0; }
.tc-pbody .tc-pt { flex: 1 1 100%; }
.tc-pt { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.tc-pt .tc-ttl { font-size: 13px; -webkit-line-clamp: 3; }
.tc-pk { color: var(--text-dim); font-size: 12px; }

/* «⤢ Крупно»: окно карьеры одного человека. Место — общее правило окон
   (style.css: dialog { margin: auto }, предел — экран минус поля), здесь —
   ширина и вид. Полоса прокрутки окна места не съедает (gutter): шкала не
   перекраивается, когда окно дорастает до прокрутки. */
.tc-zoom { width: calc(100vw - 48px); max-width: 1400px; padding: 0 16px 16px; border: 0;
    border-radius: var(--radius-lg); background: var(--bg-card); color: var(--text);
    box-shadow: var(--shadow-elev); scrollbar-gutter: stable; }
.tc-zoom::backdrop { background: rgba(0, 0, 0, 0.6); }
.tc-zoom-head { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px 12px; margin: 0 -16px 10px; padding: 12px 16px 8px; background: var(--bg-card);
    border-bottom: 1px solid var(--border-soft); }
.tc-zoom-title { margin: 0; font-size: 17px; color: var(--text-strong); overflow-wrap: anywhere; }
.tc-zoom-x { margin-left: auto; min-width: 40px; min-height: 40px; }
.tc-zoomview .tc-unknown { position: static; }

.tc button:focus-visible, .tree-filters .tc-kbtn:focus-visible, .tc-acc > summary:focus-visible,
.tc-zoom button:focus-visible {
    outline: 2px solid var(--accent-strong); outline-offset: 2px; }

@media (max-width: 599px) {
    .tc-crumb { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .tc-tile, .tc-pli, .tc-acc, .tc-scroll, .tc-strip { transition: none; animation: none; scroll-behavior: auto; }
}
} /* ── end @layer responsive ── */