.tabbed-section {
    --primary-color: var(--c-brand);
    --border-color: var(--c-border);
    /* Hover/active tint — must be distinct from --c-surface-soft used for
       the section background, otherwise hovers and active tabs become
       invisible against the same fill. */
    --hover-bg: #f3f4f6;
    --transition-speed: 0.3s;

    --animation-timing: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-duration: 300ms;

    --header-height: 60px;
    --content-max-height: 800px;
    --content-min-height: 500px;

    position: relative;
    font-family: Montserrat, sans-serif;
    font-style: normal;
    line-height: 1.5;
    scroll-margin-top: 3rem;
}

.mobile-tab-title {
    display: none;
    padding: 1rem 1.5rem;
    background: var(--c-surface-soft);
    border-bottom: 1px solid var(--border-color);
}

.mobile-tab-title h2 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--primary-color);
    font-weight: 500;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity var(--animation-duration) var(--animation-timing),
    transform var(--animation-duration) var(--animation-timing);
}

.mobile-tab-title.active h2 {
    opacity: 1;
    transform: translateY(0);
}

.tabbed-content {
    position: relative;
    margin: 0 auto;
    background: var(--c-surface-soft);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: clamp(var(--content-min-height), 85vh, var(--content-max-height));
    transition: height var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Верхние вкладки */
.main-tabs-scroll {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    position: relative;
    scroll-behavior: smooth;
    cursor: grab;
    user-select: none;

}

.main-tabs {
    border-bottom: 1px solid var(--border-color);
}

.main-tabs-scroll.dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

.main-tabs-scroll::-webkit-scrollbar {
    height: 3px;
}

.main-tabs-scroll::-webkit-scrollbar-track {
    background: var(--c-surface-soft);
}

.main-tabs-scroll::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
}

/* Стиль для табов внутри прокрутки */
.main-tab-label {
    display: flex;
    align-items: center;
    scroll-snap-align: start;
    white-space: nowrap;
    padding: 1.25rem 1.75rem;
    cursor: pointer;
    color: #6b7280;
    transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    font-weight: 500;
}

.main-tab-input {
    display: none;
}

.main-tab-label {
    padding: 1.25rem 1.75rem;
    white-space: nowrap;
    cursor: pointer;
    color: #6b7280;
    transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    font-weight: 500;
    border-radius: 0;
    border-top: 2px solid transparent
}

.main-tab-label:hover {
    color: var(--primary-color);
    background: var(--hover-bg);
}

.main-tab-label,
.side-tab-label {
    transition: background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.tabs-indicator {
    display: none;
    pointer-events: none;
}

/* Контейнер контента */
.content-container {
    display: flex;
    position: relative;
    flex: 1;
    overflow: hidden;
    height: calc(100% - var(--header-height));
}

/* Боковые вкладки */
.side-tabs {
    flex: 0 0 280px;
    border-right: 1px solid var(--border-color);
    background: var(--c-surface-soft);
    transition: transform var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1),
    visibility var(--transition-speed);
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

.side-tabs {
    transition: transform 0.3s ease-out, visibility 0.3s;
}

.side-tabs.closing {
    pointer-events: none;
}

.side-tabs-overlay {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.side-tabs-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--c-surface-soft);
}

.side-tabs-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    display: block;
}

.side-tabs-group {
    display: none;
    overflow-y: auto;
    max-height: calc(100vh - 150px);
    min-height: min-content;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.side-tabs-group.is-active {
    display: block;
}

.side-tab-input {
    display: none;
}

.side-tab-label {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    color: #4b5563;
    border-left: 2px solid transparent;
    transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.side-tab-label:hover {
    background: var(--hover-bg);
    color: var(--primary-color);
}

/* Основной контент */
.tabbed-content .main-content {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    height: 100%;
    max-height: 100%;
}

.content-panel {
    display: none;
    min-height: 100%;
    height: fit-content;
}

.content-panel.is-active {
    display: block;
    animation: fadeIn var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Keyboard-only focus ring for tab labels and tabpanels. */
.main-tab-label:focus-visible,
.side-tab-label:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 2px;
}

.content-panel:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Бургер для мобильной версии */
.sidebar-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    margin-left: 0.5rem;
    background: var(--primary-color);
    border: none;
    cursor: pointer;
    color: var(--c-surface-soft);
    font-size: 0.875rem;
    height: 36px;
    transition: background var(--transition-speed);
}

.sidebar-toggle:focus {
    background: #325390BF;
}

.sidebar-toggle-input {
    display: none;
}

/* Apple-style two-phase morph (matches the header burger).
   Phase 1: outer bars slide to centre, middle bar fades out via its
            own background-color (NOT opacity — opacity on this
            element would also hide the ::before/::after children).
   Phase 2: converged bars rotate into the X.
   Reverse plays phases backward via mirrored transition delays. */
.sidebar-toggle-icon {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--c-surface-soft);
    position: relative;
    /* Closed default: middle bar reappears in phase 2 of the close. */
    transition: background-color .2s ease .2s;
}

.sidebar-toggle-icon::before,
.sidebar-toggle-icon::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 2px;
    background: var(--c-surface-soft);
    /* Closed default: rotation un-does first, slide-out second. */
    transition: transform .2s ease 0s,
                top .2s ease .2s,
                bottom .2s ease .2s;
}

.sidebar-toggle-icon::before {
    top: -6px;
}

.sidebar-toggle-icon::after {
    bottom: -6px;
}

.sidebar-toggle-text {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Активные состояния — brand-tinted fill so the selected tab clearly
   stands out from the surrounding --c-surface-soft container. */
.main-tab-input:checked + .main-tab-label {
    color: var(--primary-color);
    background: var(--c-surface-tint);
    border-color: var(--primary-color);
    border-radius: 0;
}

.side-tab-input:checked + .side-tab-label {
    color: var(--primary-color);
    border-left-color: var(--primary-color);
    background: var(--c-surface-tint);
}

/* Поддержка современных единиц измерения высоты */
@supports (height: 100dvh) {
    .tabbed-content {
        height: clamp(var(--content-min-height), 85dvh, var(--content-max-height));
    }
}

/* Стили для планшетов */
@media (max-width: 991px) {
    .tabbed-content {
        height: clamp(var(--content-min-height), 75vh, var(--content-max-height));
    }

    @supports (height: 100dvh) {
        .tabbed-content {
            height: clamp(var(--content-min-height), 75dvh, var(--content-max-height));
        }
    }

    .content-container {
        height: calc(100% - var(--header-height));
        overflow: hidden;
        padding-bottom: 1rem;
    }

    .tabbed-content .main-content {
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    .content-panel {
        min-height: 100%;
        position: relative;
        transition: opacity 0.3s ease;
    }

    .main-tabs {
        display: flex;
        align-items: center;
    }

    .main-tabs-scroll {
        margin-left: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-snap-type: x proximity;
    }

    .main-tab-label {
        scroll-snap-align: start;
        padding: 1rem 1.25rem;
        min-height: 44px;
    }

    .scroll-buttons {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        background: var(--primary-color);
        color: white;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        opacity: 0.8;
        transition: opacity var(--transition-speed);
    }

    .scroll-buttons:hover {
        opacity: 1;
    }

    .scroll-left {
        left: 70px;
    }

    .scroll-right {
        right: 10px;
    }

    .sidebar-toggle {
        display: flex;
        order: -1;
    }

    .side-tabs {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 280px;
        z-index: 5;
        transform: translateX(-100%);
        visibility: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    .side-tab-label {
        padding: 1rem 1.25rem;
        min-height: 44px;
    }

    .side-tab-input:checked + .side-tab-label {
        background-color: var(--c-surface-tint);
    }

    .side-tabs-group {
        max-height: calc(100% - 60px);
        overflow-y: auto;
    }

    .side-tabs-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition-speed) ease,
        visibility var(--transition-speed) ease;
        z-index: 4;
    }

    .side-tabs-header {
        position: sticky;
        top: 0;
        z-index: 1001;
    }

    /* Open state — JS adds .sidebar-open on the .tabbed-content
       wrapper because the toggle input sits inside .main-tabs and
       isn't a sibling of .content-container, so the CSS-only
       checkbox trick can't reach it. */
    .tabbed-content.sidebar-open .side-tabs {
        transform: translateX(0);
        visibility: visible;
    }

    .tabbed-content.sidebar-open .side-tabs-overlay,
    .side-tabs-overlay.is-visible {
        opacity: 1;
        visibility: visible;
    }

    .tabbed-content.sidebar-open .sidebar-toggle .sidebar-toggle-icon {
        background: transparent;
        /* Open: middle bar fades during phase 1 (no delay). */
        transition: background-color .2s ease 0s;
    }

    .tabbed-content.sidebar-open .sidebar-toggle .sidebar-toggle-icon::before,
    .tabbed-content.sidebar-open .sidebar-toggle .sidebar-toggle-icon::after {
        /* Open: slide to centre first, then rotate. Mirror image of
           the closed-default delays. */
        transition: top .2s ease 0s,
                    bottom .2s ease 0s,
                    transform .2s ease .2s;
    }

    .tabbed-content.sidebar-open .sidebar-toggle .sidebar-toggle-icon::before {
        top: 0;
        transform: rotate(45deg);
    }

    .tabbed-content.sidebar-open .sidebar-toggle .sidebar-toggle-icon::after {
        bottom: 0;
        transform: rotate(-45deg);
    }
}

/* Стили для мобильных устройств */
@media (max-width: 768px) {
    .tabbed-content {
        height: clamp(var(--content-min-height), 65vh, var(--content-max-height));
    }

    @supports (height: 100dvh) {
        .tabbed-content {
            height: clamp(var(--content-min-height), 65dvh, var(--content-max-height));
        }
    }
}

/* Стили для устройств с маленькой высотой экрана */
@media (max-width: 991px) and (max-height: 600px) {
    .tabbed-content {
        height: clamp(400px, 80vh, 600px);
    }

    @supports (height: 100dvh) {
        .tabbed-content {
            height: clamp(400px, 80dvh, 600px);
        }
    }
}

/* Стили для архивных элементов */
.archived-tab {
    color: #666;
}

.archived-indicator {
    margin-left: 6px;
    opacity: 0.7;
    font-size: 0.9em;
}

.archived-panel {
    position: relative;
}

/* Обновленные стили для панели кнопок */
.share-section {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 12px;
    padding: 1.5rem 2rem;
    background: var(--c-surface-soft);
    border-top: 1px solid var(--border-color);
}

/* Visual style for .share-button is unified with the rest of the
   site in blocks.css — only the in-block layout tweaks remain. */

.share-button.copied {
    background: var(--c-brand-dark);
    color: var(--c-surface);
    pointer-events: none;
}

.share-button.copied svg path {
    stroke: var(--c-surface);
}

@media (max-width: 991px) {
    .share-section {
        padding: 1rem;
        flex-wrap: wrap;
    }

    .share-button {
        flex: 1;
        min-width: 200px;
    }
}

@media (max-width: 767px) {
    .share-section {
        flex-direction: column;
    }

    .share-button {
        width: 100%;
    }
}

/* Обновленная структура для корректной прокрутки */
.side-tabs {
    flex: 0 0 280px;
    border-right: 1px solid var(--border-color);
    background: var(--c-surface-soft);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.share-section {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 1.5rem 2rem;
    background: var(--c-surface-soft);
    border-top: 1px solid var(--border-color);
}

/* .share-icon: brand stroke at rest; on hover/active inherit white
   from the .share-button text color via currentColor where possible. */
.share-icon {
    width: 16px;
    height: 16px;
}

.share-icon path {
    stroke: var(--c-brand);
    stroke-width: 1.5;
    transition: stroke var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
}

.share-button:hover .share-icon path,
.share-button:active .share-icon path,
.share-button.copied .share-icon path {
    stroke: var(--c-surface);
}

/* Добавляем стили для мобильного заголовка */
.mobile-tab-title {
    display: none;
    padding: 1rem 1.25rem;
    background: var(--c-surface-soft);
    border-bottom: 1px solid var(--border-color);
}

.mobile-tab-title h2 {
    margin: 0;
    font-size: 1rem;
    color: var(--primary-color);
    font-weight: 500;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity var(--animation-duration) var(--animation-timing),
    transform var(--animation-duration) var(--animation-timing);
}

@media (max-width: 991px) {
    .mobile-tab-title {
        display: block;
    }

    .content-container {
        flex-direction: column;
    }

    .tabbed-content .main-content {
        transition: padding-top var(--animation-duration) var(--animation-timing);
    }
}

/* Table view — toggled by JS via .tabbed-section.is-table-view.
   Hidden by default; replaces the tabs UI when enabled. */
.tabs-table-wrap {
    display: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Subtle right-edge fade hints at horizontal scrollability on narrow screens. */
    background:
        linear-gradient(to right, var(--c-surface, #fff) 0%, transparent 8px) left center / 16px 100% no-repeat local,
        linear-gradient(to left,  var(--c-surface, #fff) 0%, transparent 8px) right center / 16px 100% no-repeat local;
}

.tabbed-section.is-table-view .tabs-table-wrap {
    display: block;
}

.tabbed-section.is-table-view .tabbed-content {
    display: none;
}

.tabs-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-family: Montserrat, sans-serif;
    /* Compact rhythm in table view — body content already has its
       own spacing; the table grid stacks rows tightly so a wide
       matrix scans as a matrix and not as paragraphs. */
    font-size: 0.875em;
    line-height: 1.4;
}

/* Default visibility — show the original axis, hide the transposed
   version. The .is-table-transposed class on the section root flips
   them. Both are pre-rendered server-side so no JS table rebuild. */
.tabs-table--transposed {
    display: none;
}
.tabbed-section.is-table-transposed .tabs-table--default {
    display: none;
}
.tabbed-section.is-table-transposed .tabs-table--transposed {
    display: table;
}

/* Transpose + full-width buttons only matter inside table view.
   Hidden everywhere else so the share row stays uncluttered for the
   tabs UI. The copy-link button is conversely hidden in table view —
   the per-tab hash params it copies are meaningless when the tabs UI
   is replaced by a flat matrix. */
.transpose-toggle-button,
.fullwidth-toggle-button {
    display: none;
}
.tabbed-section.is-table-view .transpose-toggle-button,
.tabbed-section.is-table-view .fullwidth-toggle-button {
    display: inline-flex;
}
/* Full-width mode is meaningless when the container already spans the
   viewport — hide the toggle on small screens so the share row stays
   focused on actions that actually do something on mobile. */
@media (max-width: 767px) {
    .tabbed-section.is-table-view .fullwidth-toggle-button {
        display: none;
    }
}
.tabbed-section.is-table-view .share-button:not(.share-button--outline):not(.view-toggle-button):not(.transpose-toggle-button):not(.fullwidth-toggle-button) {
    display: none;
}

/* Full-width breakout — escape the .container clamp so the table can
   span the viewport. Negative margin pulls the wrap back to the
   viewport edges; --tabs-fullwidth-gutter keeps a small breathing
   strip on each side so content never kisses the screen edge. */
.tabbed-section {
    --tabs-fullwidth-gutter: 16px;
}
/* Animate the breakout. Both endpoints must be length-based for width
   to interpolate — otherwise the browser snaps width while margin
   drifts, which reads as the box sliding sideways. Explicit
   width: 100% + box-sizing: border-box gives us a length on both
   sides of the toggle. Reduced-motion users get the snap behaviour. */
.tabs-table-wrap,
.share-section {
    width: 100%;
    box-sizing: border-box;
    transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1),
                margin 320ms cubic-bezier(0.4, 0, 0.2, 1),
                padding 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
    .tabs-table-wrap,
    .share-section {
        transition: none;
    }
}
.tabbed-section.is-table-fullwidth .tabs-table-wrap {
    width: calc(100vw - var(--tabs-fullwidth-gutter) * 2);
    margin-left: calc(50% - 50vw + var(--tabs-fullwidth-gutter));
    margin-right: calc(50% - 50vw + var(--tabs-fullwidth-gutter));
}
.tabbed-section.is-table-fullwidth .tabs-table {
    /* Drop the min-width clamp so the table flexes to the viewport
       instead of forcing horizontal scroll inside the wrap. */
    min-width: 0;
}

/* Match the share-row breakout so the surface-soft band reads as one
   continuous sheet under the expanded table. Buttons keep their
   visual position by adding compensating horizontal padding equal to
   the gained breakout width, so flex-end still lands them where it
   landed at container width. */
.tabbed-section.is-table-fullwidth .share-section {
    width: calc(100vw - var(--tabs-fullwidth-gutter) * 2);
    margin-left: calc(50% - 50vw + var(--tabs-fullwidth-gutter));
    margin-right: calc(50% - 50vw + var(--tabs-fullwidth-gutter));
    padding-left:  calc(50vw - 50% - var(--tabs-fullwidth-gutter) + 2rem);
    padding-right: calc(50vw - 50% - var(--tabs-fullwidth-gutter) + 2rem);
}
@media (max-width: 991px) {
    .tabbed-section.is-table-fullwidth .share-section {
        padding-left:  calc(50vw - 50% - var(--tabs-fullwidth-gutter) + 1rem);
        padding-right: calc(50vw - 50% - var(--tabs-fullwidth-gutter) + 1rem);
    }
}

/* Same neutral palette as .page-content table — surface-soft bands,
   near-black 2% zebra, no brand fills. Group rows stay bolder so the
   hierarchical separator still reads, but on the same neutral. */
.tabs-table thead th {
    background: var(--c-surface-tint);
    color: var(--c-text);
    text-align: left;
    padding: 0.5rem 0.625rem;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.tabs-table tbody th[scope="row"] {
    text-align: left;
    padding: 0.5rem 0.625rem;
    font-weight: 500;
    width: 30%;
    vertical-align: top;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

/* Transposed view typically puts short labels (e.g. years) into the
   row-header column, while the data cells hold the long content that
   used to live in the default-view rows. The 30% allotment becomes
   wasted whitespace there — let the column shrink to its content
   width with nowrap, so the data columns soak up the rest. */
.tabs-table--transposed tbody th[scope="row"],
.tabs-table--transposed thead th:first-child {
    width: auto;
    white-space: nowrap;
}

.tabs-table tbody td {
    padding: 0.5rem 0.625rem;
    vertical-align: top;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.tabs-table tbody tr:nth-child(odd of :not(.tabs-table__group)) td,
.tabs-table tbody tr:nth-child(odd of :not(.tabs-table__group)) th[scope="row"] {
    background: var(--c-surface-soft);
}

.tabs-table__group th {
    background: var(--c-surface-tint);
    color: var(--c-text);
    text-align: left;
    padding: 0.4rem 0.625rem;
    font-weight: 700;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

/* Compact internals — paragraphs and lists inside cells ride on
   tighter rhythm than the body styles default to, so a 10-row table
   doesn't grow into a wall of whitespace. The first/last child rules
   collapse the outer edges flush with the cell's own padding. */
.tabs-table td > *,
.tabs-table th > * {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
.tabs-table td > *:first-child,
.tabs-table th > *:first-child {
    margin-top: 0;
}
.tabs-table td > *:last-child,
.tabs-table th > *:last-child {
    margin-bottom: 0;
}

.tabs-table a {
    color: var(--c-brand);
    border-bottom: 1px solid var(--c-brand);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.tabs-table a:hover {
    color: var(--c-brand-dark);
    border-bottom-color: var(--c-brand-dark);
}

.view-toggle-button[aria-pressed="true"] {
    background: var(--primary-color);
    color: var(--c-surface-soft);
}