/* ============================================================
   Хронология сезона: каркас, фильтр, список годов, хребет, плашки годов.
   События и ключевые карточки — season-chrono-cards.css. Только токены tokens.css.
   ============================================================ */
.chrono-layout { --strip-h: 48px; display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-areas: "side head" "side main"; gap: 0 var(--space-8); align-items: start; }
.chrono-head { grid-area: head; max-width: 820px; }
.chrono-layout > .chrono { grid-area: main; }
.chrono-side { grid-area: side; position: sticky; top: calc(var(--stick) + var(--space-5)); display: flex; flex-direction: column; gap: var(--space-5); }
.chrono { max-width: 820px; min-width: 0; }
.chrono__title { margin-bottom: var(--space-5); font-size: var(--fs-2xl); font-weight: 800; line-height: var(--lh-tight); }
.chrono__lead { max-width: 62ch; font-size: var(--fs-md); color: var(--text-muted); }

/* ---------- Фильтр «Только лор / Все события» ---------- */
/* На десктопе колонка узкая (250px): строки столбцом в том же языке, что и список годов ниже —
   без подложки и теней, выбранная строка подсвечена янтарём */
.seg { display: grid; grid-template-columns: 1fr; gap: 2px; padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-soft); }
.seg[hidden] { display: none; }
.seg__short { display: none; }
.seg__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 38px;
    padding: 0 var(--space-3);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.seg__btn:hover { color: var(--text); background: var(--surface-2); }
.seg__btn[aria-pressed="true"] { background: var(--accent-weak); color: var(--accent); }
.seg__n { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.seg__btn[aria-pressed="true"] .seg__n { color: var(--accent); }

/* ---------- Годы ---------- */
.years { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.years li { max-width: none; }
.years__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--r-md); transition: background var(--dur-fast); }
.years__item:hover { background: var(--surface-2); }
.years__num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--text-muted); }
.years__era { font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.35; }
.years__n { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.years__item.is-active { background: var(--accent-weak); }
.years__item.is-active .years__num { color: var(--accent); }

/* ---------- Хребет: янтарь идёт за читателем ---------- */
.spine { position: relative; margin-top: var(--space-7); }
.spine__track { position: absolute; left: var(--spine-x); top: 0; bottom: 3rem; width: 2px; margin-left: -1px; background: var(--border); border-radius: var(--r-full); }
.spine__fill { position: absolute; inset: 0 0 auto 0; height: var(--fill, 0px); background: linear-gradient(to bottom, var(--accent-weak), var(--accent)); border-radius: inherit; }
.spine__fill::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; translate: -50% 0; rotate: 45deg; background: var(--accent-hover); }
.spine__end { position: relative; margin-top: var(--space-7); padding-left: calc(var(--spine-x) + 14px + var(--space-5)); font-size: var(--fs-sm); color: var(--text-faint); }

/* ---------- Плашки годов ---------- */
.year { scroll-margin-top: calc(var(--stick) + var(--space-4)); }
@media (max-width: 1024px) { .year { scroll-margin-top: var(--strip-h); } }
/* Между годами — ступень крупнее шага событий (--space-5), но не пустота */
.year + .year { margin-top: var(--space-7); }
/* Год — обычный заголовок без подложки, выровнен по колонке дат событий */
.year__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-4);
    margin: 0 0 0 calc(var(--spine-x) + 14px + var(--space-5));
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-soft);
    font-family: var(--font-ui);
}
.year__num { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800; line-height: 1; letter-spacing: 0.02em; }
.year__era { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }

/* ---------- Тост «Ссылка скопирована» ---------- */
.chrono-toast { position: fixed; left: 50%; bottom: var(--space-5); z-index: 200; translate: -50% 12px; padding: var(--space-2) var(--space-4); border-radius: var(--r-full); background: var(--surface-3); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); font-size: var(--fs-sm); color: var(--text); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out); }
.chrono-toast.is-on { opacity: 1; translate: -50% 0; }

@media (max-width: 1024px) {
    .chrono-layout { display: flex; flex-direction: column; align-items: stretch; }
    .chrono-head { margin-bottom: var(--space-5); }
    /* Липкая полоса годов — второй ряд вкладок сезона: та же поверхность, одна линия снизу.
       Фон появляется, только когда полоса прилипла (.is-stuck ставит season-chrono.js) */
    .chrono-side {
        position: sticky; top: var(--stick); z-index: 40;
        flex-direction: row; align-items: stretch; gap: var(--space-2);
        height: var(--strip-h); box-sizing: border-box;
        margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
        border-bottom: 1px solid var(--border-soft);
        transition: background-color var(--dur) var(--ease-out);
    }
    .chrono-side.is-stuck { background: var(--bg-soft); }
}
/* На телефоне строка сезона берёт стекло шапки — полоса годов продолжает ту же поверхность,
   а линия остаётся одна: под полосой, не между ней и вкладками */
@media (max-width: 768px) {
    .chrono-side.is-stuck { background: var(--header-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
    body:has(.header--scrolled) .chrono-side.is-stuck { background: var(--header-bg-scrolled); }
    body:has(.chrono-side.is-stuck) .season-tabs.is-stuck { border-bottom-color: transparent; }
}
@media (max-width: 1024px) {
    /* Годы — как вкладки: номер Tektur, янтарная черта под активным, счётчик тихий */
    .years { order: -1; flex: 1 1 auto; min-width: 0; display: flex; gap: 0; margin-left: calc(-1 * var(--space-2)); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
    .years::-webkit-scrollbar { display: none; }
    .years li { flex: none; display: flex; }
    .years__item { position: relative; display: flex; align-items: center; gap: var(--space-1); min-height: var(--tap-min); padding: 0 var(--space-2); border-radius: 0; outline-offset: -2px; }
    .years__item::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); transform: scaleX(0); transition: transform var(--dur) var(--ease-out); }
    .years__item:hover, .years__item.is-active { background: none; }
    .years__item:hover .years__num { color: var(--text); }
    .years__num { font-size: var(--fs-base); letter-spacing: 0.02em; transition: color var(--dur-fast); }
    .years__era { display: none; }
    .years__n { padding-top: 0.2em; line-height: 1; font-weight: 500; color: var(--text-faint); }
    .years__item.is-active .years__num { color: var(--text); }
    .years__item.is-active .years__n { color: var(--text-muted); }
    .years__item.is-active::after { transform: scaleX(1); }
    /* Фильтр — тихий сегмент в конце ряда: видимая дорожка 30px, зона нажатия 44px */
    .seg { position: relative; flex: none; display: flex; align-self: center; gap: 0; padding: 0 2px; border: 0; }
    .seg::before { content: ""; position: absolute; inset: 7px 0; border: 1px solid var(--border); border-radius: var(--r-full); pointer-events: none; }
    .seg__btn { position: relative; isolation: isolate; min-width: var(--tap-min); min-height: var(--tap-min); justify-content: center; padding: 0 var(--space-2); border-radius: var(--r-full); font-size: var(--fs-xs); outline-offset: -2px; }
    .seg__btn::before { content: ""; position: absolute; inset: 9px 0; z-index: -1; border-radius: var(--r-full); transition: background var(--dur-fast); }
    .seg__btn:hover, .seg__btn[aria-pressed="true"] { background: none; color: var(--text); }
    .seg__btn[aria-pressed="true"]::before { background: var(--surface-3); }
    .seg__full { display: none; }
    .seg__short { display: inline; }
    .seg__n { display: none; }
    .chrono { max-width: none; }
    .spine { margin-top: var(--space-5); }
}
@media (max-width: 768px) {
    .year + .year { margin-top: var(--space-6); }
    .year__head { flex-wrap: nowrap; margin-left: calc(var(--spine-x) + 6px + var(--space-4)); padding: var(--space-2) 0; }
    .year__era { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); }
    .spine { margin-top: var(--space-4); }
    .spine__end { padding-left: calc(var(--spine-x) + 6px + var(--space-4)); }
}
/* Самые узкие экраны: счётчики годов уступают место фильтру */
@media (max-width: 359px) {
    .years__n { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .chrono-toast, .chrono-side, .years__item::after { transition: none; }
}