/* Страница направления (track.html, assets/track-page.js) на токенах публичных страниц. */
.tp-main { padding: var(--pub-s7) 0 var(--pub-s8); }
.tp-state { color: var(--pub-text-2); font-size: var(--pub-secondary); padding: var(--pub-s6) 0; }
.tp-state a { color: var(--pub-accent); }
/* Вход и повтор в сообщении о состоянии — обычные кнопки, не ссылки в тексте. */
.tp-state .tp-actions { margin-top: var(--pub-s4); }
.tp-state .tp-actions a.pub-btn-primary { color: #fff; }
.tp-hero { margin-bottom: var(--pub-s7); }
.tp-hero h1 { font-size: var(--pub-h2); letter-spacing: -.02em; margin: var(--pub-s2) 0 var(--pub-s3); }
.tp-lead { color: var(--pub-text-2); font-size: var(--pub-lead); line-height: 1.55; max-width: 760px; margin: 0 0 var(--pub-s5); }
.tp-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pub-s3); margin-bottom: var(--pub-s3); }
.tp-pill { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; border-radius: 999px; font-weight: 700; font-size: var(--pub-caption);
  background: var(--pub-raise-2); border: 1px solid var(--pub-line-strong); color: var(--pub-text); }
.tp-pill.confirmed { background: rgba(79, 214, 168, .14); border-color: rgba(79, 214, 168, .5); color: var(--pub-ok); }
.tp-pill.in_progress { background: rgba(185, 172, 255, .12); border-color: rgba(185, 172, 255, .45); color: var(--pub-accent); }
.tp-progress-text { color: var(--pub-text-2); font-size: var(--pub-caption); }
.tp-bar { height: 8px; border-radius: 999px; background: var(--pub-raise-2); overflow: hidden; max-width: 560px; }
.tp-bar-fill { height: 100%; width: 0; background: var(--pub-brand); transition: width .3s ease; }
/* Без входа: приглашение войти сразу под описанием, до карточек модулей. */
.tp-guest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pub-s3) var(--pub-s5); margin-top: var(--pub-s5); padding: var(--pub-s4) var(--pub-s5);
  background: var(--pub-raise); border: 1px solid var(--pub-line-strong); border-radius: 18px; max-width: 820px; }
.tp-guest[hidden] { display: none; }
.tp-guest p { flex: 1 1 320px; margin: 0; color: var(--pub-text-2); font-size: var(--pub-secondary); line-height: 1.55; }
.tp-guest .pub-btn { min-height: 44px; color: #fff; }
.tp-bar[hidden] { display: none; }
.tp-h2 { font-size: var(--pub-h3); letter-spacing: -.01em; margin: 0 0 var(--pub-s2); }
.tp-note { color: var(--pub-text-2); font-size: var(--pub-secondary); line-height: 1.55; margin: 0 0 var(--pub-s5); max-width: 820px; }
.tp-modules { list-style: none; margin: 0 0 var(--pub-s7); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--pub-s4); }
.tp-module { display: flex; flex-direction: column; gap: var(--pub-s3); background: var(--pub-raise); border: 1px solid var(--pub-line); border-radius: 18px; padding: var(--pub-s5); min-width: 0; }
.tp-module.passed { border-color: rgba(79, 214, 168, .45); }
.tp-module-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pub-s2); flex-wrap: wrap; }
.tp-kind { font-size: var(--pub-eyebrow); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pub-accent); }
.tp-minutes { font-size: var(--pub-caption); color: var(--pub-text-3); }
.tp-module h3 { margin: 0; font-size: 19px; letter-spacing: -.01em; }
.tp-module p { margin: 0; color: var(--pub-text-2); font-size: var(--pub-secondary); line-height: 1.5; }
.tp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-tag { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--pub-raise-2); color: var(--pub-text-2); border: 1px solid var(--pub-line); }
.tp-result { border-top: 1px solid var(--pub-line); padding-top: var(--pub-s3); display: flex; flex-direction: column; gap: 4px; }
.tp-result strong { font-size: 17px; }
.tp-result strong.passed { color: var(--pub-ok); }
.tp-result strong.failed { color: #ffb4a8; }
.tp-result span { color: var(--pub-text-3); font-size: var(--pub-caption); }
.tp-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--pub-s2); align-items: center; }
.tp-actions .pub-btn { min-height: 44px; }
.tp-wait { color: var(--pub-text-3); font-size: var(--pub-caption); }
.tp-explain { background: var(--pub-raise); border: 1px solid var(--pub-line); border-radius: 18px; padding: var(--pub-s5) var(--pub-s6); }
@media (max-width: 640px) {
  .tp-main { padding-top: var(--pub-s5); }
  .tp-module { padding: var(--pub-s4); }
  .tp-explain { padding: var(--pub-s4); }
  .tp-modules { grid-template-columns: minmax(0, 1fr); }
}