/* ==========================================================================
   Загальні правила вирівнювання (вантажиться на всіх сторінках нового дизайну, першим серед theme/*.css).
   Тип помилки «різні лінії старту колонок»: перший блок сторінки має починатися на одній лінії з верхом
   бічного меню кабінету; головна колонка і бічна колонка сітки — на одній лінії; крихти — над сіткою, а не
   всередині однієї з колонок; класичні від’ємні відступи не можуть витягати блок вище верху сторінки.
   ========================================================================== */
.tb-page { padding-top: 0 !important; }
.tb-page > *:first-child, .tb-embedded > *:first-child { margin-top: 0 !important; }
/* те саме, коли перед першим блоком стоїть <style>/<script> (напр. «Мої курси»: класичний .direction { margin-top: 30px }) */
.tb-page > :is(style, script, link):first-child + *, .tb-page > :is(style, script, link):first-child + :is(style, script, link) + *,
.tb-embedded > :is(style, script, link):first-child + *, .tb-embedded > :is(style, script, link):first-child + :is(style, script, link) + * { margin-top: 0 !important; }
.tb-page > .tb-catalog-head { margin-top: 0 !important; }
/* класичний .items { margin-top: 20px } всередині сітки */
.tb-lib-grid > .items, .tb-lib-grid > .tb-lib-main > .items:first-child, .tb-lib-main.items { margin-top: 0 !important; }
.tb-lib-grid > .tb-lib-main > *:first-child, .tb-lib-grid > .tb-lib-aside > *:first-child, .tb-ev-grid > * > *:first-child { margin-top: 0 !important; }
/* класичні обгортки в бічній колонці (напр. journal/_sidebar: <div style="margin-top:35px">) не зсувають її нижче головної */
.tb-lib-grid > .tb-lib-aside > *:first-child > *:first-child, .tb-lib-grid > .tb-lib-aside > *:first-child > *:first-child > *:first-child { margin-top: 0 !important; }
/* крихти перед сіткою: однаковий відступ на всіх сторінках */
.tb-page > .tb-crumbs, .tb-embedded > .tb-crumbs { margin: 0 0 14px; }

/* ---- шкала відступів (див. DESIGN.md): 4 / 8 / 12 / 16 / 24 / 32 ---- */
:root { --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; }
/* заголовок сторінки: однаковий відступ до контенту на всіх сторінках */
.tb-page > .tb-catalog-head, .tb-embedded > .tb-catalog-head { margin-bottom: var(--s-4); }
.tb-catalog-head .tb-page-h1 { margin: 0; }
.tb-catalog-head .tb-modal-sub, .tb-catalog-head > p { margin: var(--s-2) 0 0; }
.tb-catalog-head-row { gap: var(--s-3) var(--s-4); }
/* блок фільтрів і сітки: 16 до сітки, 14 між картками колонок */
.tb-filters { margin-bottom: var(--s-4); }
.tb-lib-grid, .tb-lib-aside, .tb-ev-grid { gap: 14px; }
.tb-lib-aside > .tb-lib-card + .tb-lib-card, .tb-lib-aside > .tb-card + .tb-card { margin-top: 0; }
/* бічне меню кабінету: заголовки секцій, пункти, роздільники — одна сітка */
.tb-embedded .personal-sidebar { padding: var(--s-4) var(--s-3) var(--s-3); }
.tb-embedded .personal-sidebar .profile-info { padding: 0 var(--s-1) var(--s-3); }
.tb-embedded .personal-sidebar ul { margin: 0; }
.tb-embedded .personal-sidebar ul li:not(.divider):not(:has(a)) { margin: var(--s-4) var(--s-2) var(--s-1); }
.tb-embedded .personal-sidebar ul li:not(.divider):not(:has(a)):first-child { margin-top: var(--s-1); }
.tb-embedded .personal-sidebar ul li a { padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); }
.tb-embedded .personal-sidebar ul li.divider { margin: var(--s-3) var(--s-2) 0; }
.tb-embedded .personal-sidebar .btn.btn-default { margin: var(--s-2) 0 0; }
/* тип помилки «колонка ширша за екран»: одноколонкові сітки мають стискатися (minmax(0,1fr)), ряди чипів — переноситися */
.tb-lib-body, .tb-tcard-body, .tb-ev-card-body, .tb-promo-ev-body { grid-template-columns: minmax(0, 1fr) !important; min-width: 0; }
.tb-lib-tags, .tb-tcard-tags, .tb-ev-card-tags, .tb-chips { flex-wrap: wrap; }
.tb-lib-item, .tb-tcard, .tb-ev-card { min-width: 0; max-width: 100%; }
/* довгі чипи (назви предметів/галузей) на вузьких екранах переносяться, а не розтягують картку */
@media (max-width: 640px) { .tb-chip, .tb-chip-btn { white-space: normal; max-width: 100%; overflow-wrap: anywhere; text-align: left; } }
/* випадні списки (select): стрілка завжди видима — навіть якщо сторінка перекриває background скороченим записом */
.tb-select, .tb-embedded select, body.tb-chrome .tb-page select, body.tb-chrome .modal select, .tb-embedded select.form-control {
    appearance: none !important; -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' stroke='%23263238' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 14px 9px !important;
    padding-right: 40px !important; cursor: pointer;
}
.tb-select[multiple], .tb-embedded select[multiple] { background-image: none !important; padding-right: 14px !important; }
.tb-select:disabled, .tb-embedded select:disabled { opacity: .55; cursor: default; }

/* сітка без бічної колонки — одна колонка на всю ширину (напр. форма «Додати розробку») */
.tb-lib-grid:not(:has(> .tb-lib-aside)):not(:has(> aside)) { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: none !important; }
.tb-lib-grid:not(:has(> .tb-lib-aside)):not(:has(> aside)) > * { grid-area: auto !important; }
/* на планшеті/телефоні будь-яка сітка «головна + бічна» — в одну колонку */
@media (max-width: 991px) { .tb-lib-grid, .tb-lib-grid:not(:has(> .tb-lib-head)), .tb-tests-grid { grid-template-columns: minmax(0, 1fr) !important; } }
/* мобільні поля сторінки: 16px з боків, без від’ємних відступів класики; картки не прилипають до країв екрана */
@media (max-width: 767px) {
    body.tb-chrome .container-fluid { padding-left: 16px; padding-right: 16px; }
    .tb-embedded, .tb-embedded > .row { margin-left: 0 !important; margin-right: 0 !important; }
}
/* картки переваг (/upgrade): текст не прилипає до нижнього краю */
.tb-page :has(> .tb-dir-benefit-title) { padding-bottom: 20px !important; }
/* селекти фільтрів: на телефоні підпис над полем; порожні залежні списки (клас/підручник/тема до вибору предмета) не показуються */
.tb-selectbox:has(select):not(:has(option)) { display: none !important; }
@media (max-width: 640px) {
    .tb-selectbox { display: grid !important; gap: 4px; width: 100%; }
    .tb-selectbox > span { display: block !important; font: 700 12.5px/1.2 var(--f-body); color: var(--ink-3); }
}
/* сторінки без .container-fluid (бібліотека, журнал): ті самі 16px полів на телефоні */
@media (max-width: 767px) { .tb-embedded:not(.container-fluid *) { padding-left: 16px; padding-right: 16px; } }
@media (max-width: 640px) { .tb-filters-row + .tb-filters-row { margin-top: 6px; } }
/* каталоги заходів: колонка фільтра починається на рівні перших карток (під заголовком «Заплановані події»), кнопки «Фільтр» немає */
@media (min-width: 992px) {
    .tb-ev-catalog-grid > .col-md-3 { padding-top: 36px !important; }
    .tb-courses-grid > .tb-courses-aside { padding-top: 36px !important; }
    .tb-dir-row > .tb-dir-side { padding-top: 49px !important; }
    .tb-dir-row > .tb-dir-side > :first-child, .tb-ev-catalog-grid > .col-md-3 > :first-child, .tb-courses-grid > .tb-courses-aside > :first-child { margin-top: 0 !important; }
}
.tb-ev-bar:not(:has(.tb-ev-bar-reset:not(.ng-hide))) { margin-bottom: 0; }
/* кнопка «Зареєструватись» у бічному меню гостя: текст по центру по вертикалі */
.tb-embedded .personal-sidebar .btn.btn-default { display: flex; align-items: center; justify-content: center; line-height: 1.2; }
/* /upgrade: кнопки XLS / план / напрями — компактним рядком під вступом, як дії картки */
.tb-ev-hero .tb-dir-actions { display: flex !important; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tb-ev-hero .tb-dir-actions .tb-btn, .tb-ev-hero .tb-dir-actions .tb-dir-dropdown { width: auto !important; }
@media (max-width: 640px) { .tb-ev-hero .tb-dir-actions .tb-btn, .tb-ev-hero .tb-dir-actions .tb-dir-dropdown { width: 100% !important; } }

/* ---- ширина сторінок: той самий контейнер, що й у шапки й головної (max 1280px, поля 10px) ----
   Сторінки нового дизайну, які макет кладе просто в <body> (бібліотека, тести, журнал, кабінет, головна), інакше
   розтягувалися на всю ширину вікна. */
body.tb-chrome > .tb-embedded { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px; }
/* на телефоні — ті самі 16px полів, що й на інших сторінках (правило контейнера вище інакше лишало 10px) */
@media (max-width: 767px) { body.tb-chrome > .tb-embedded { padding-left: 16px; padding-right: 16px; } }
/* телефон: кнопка пошуку у рядку фільтрів — на всю ширину під полем, як у каталогах бібліотеки й тестів (кабінетні списки мали вузьку кнопку зліва) */
@media (max-width: 640px) { .tb-filters-row > .tb-btn, .tb-filters-row > button.tb-btn { flex: 1 1 100%; width: 100%; } }
/* колонки сітки «головна + бічна» самі є сітками без шаблону колонок — ширина рахувалась за вмістом
   (перегляд файлу з 28pt текстом розтягував картку до 482px на телефоні 390px) */
.tb-lib-main, .tb-lib-aside, .tb-lib-preview, .tb-lib-preview .document-content-block { grid-template-columns: minmax(0, 1fr); }
.tb-lib-card, .tb-lib-preview .content-block { min-width: 0; }
/* відступ між картками колонок — лише gap сітки (14px): класичні .content-block { margin-bottom: 30px } тощо давали 44px між картками
   головної колонки при 14px у бічній (сторінка курсу, вебінару) */
.tb-lib-main > *, .tb-lib-aside > *, .tb-lib-grid > * { margin-bottom: 0 !important; }
.tb-lib-main > * + *, .tb-lib-aside > * + * { margin-top: 0 !important; }
/* заголовок картки .tb-lib-h2 — завжди 800, як у DESIGN.md (класичні h3-правила сторінок перебивали вагу до 600/700) */
body.tb-chrome .tb-lib-card .tb-lib-h2 { font-weight: 800; }
/* телефон: фіксована панель дій розробки (.tb-lib-dock) закривала низ футера — запас знизу на її висоту; поля панелі — 16px, як у сторінки */
@media (max-width: 767px) {
    body:has(.tb-lib-dock) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    .tb-lib-dock { padding-left: 16px; padding-right: 16px; }
}
/* телефон: сегментний перемикач (Усі / Домашні завдання / У реальному часі) — на всю ширину, сегменти ділять її порівну
   й переносять текст, а не виходять за екран 360px */
@media (max-width: 640px) {
    .tb-seg { display: flex; width: 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .tb-seg::-webkit-scrollbar { display: none; }
    .tb-seg > * { flex: 1 0 auto; padding-left: 10px !important; padding-right: 10px !important; justify-content: center; text-align: center; }
}
/* дрібні класичні поля всередині сітки з gap: список посилань статті, блок «Вектор» на сторінці вебінару */
.tb-single-links > li { margin: 0 !important; } /* класичний .sth-pai-list li { margin-bottom: 7px } — крок дає gap */
.tb-ev-main > .event-vector { margin-top: 0 !important; margin-bottom: 0 !important; }
/* списки в текстових картках (опис лабораторної, SEO-тексти): маркери всередині поля картки, а не на її межі */
.tb-lib-text :is(ul, ol):not([class]) { padding-left: 22px; margin: 0 0 10px; }
/* телефон: групи чипів у фільтрах (тип матеріалів, класи…) — один рядок із горизонтальною прокруткою до краю картки,
   а не 10+ рядків (у бібліотеці чипи займали ~500px перед результатами). Справа — згасання як підказка прокрутки;
   вибраний чип прокручується у видиму частину (views/beta/_chrome_extras.php) */
@media (max-width: 640px) {
    .tb-filters .tb-filters-block > .tb-chips, .tb-filters > .tb-chips {
        flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
        margin-left: -12px; margin-right: -12px; padding: 2px 12px 6px; scroll-padding-inline: 12px;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }
    .tb-filters .tb-filters-block > .tb-chips::-webkit-scrollbar, .tb-filters > .tb-chips::-webkit-scrollbar { display: none; }
    .tb-filters .tb-filters-block > .tb-chips > *, .tb-filters > .tb-chips > * { flex: none; white-space: nowrap; max-width: none; }
}
/* телефон: перемикачі-чипи з галочкою у фільтрах — однакової ширини (на всю ширину), а не один вузький і один широкий */
@media (max-width: 640px) { .tb-filters .tb-toggle-chip { display: flex; width: 100%; } }
/* ---- кнопки завжди в один рядок (вимога дизайну): текст кнопки не переноситься; якщо не вміщається —
   кнопці дають місце (ряд переноситься, кнопка на всю ширину) або на телефоні коротший напис, а не другий рядок ---- */
.tb-btn, .tb-chip-btn, .tb-seg > *, .tb-dd-btn, body.tb-chrome .btn, .tb-embedded .btn { white-space: nowrap !important; }
.tb-btn, body.tb-chrome .btn { max-width: 100%; flex-shrink: 0; } /* у flex-рядку кнопка не стискається нижче свого напису — ряд переноситься */
/* вузький телефон (≤400px): дві кнопки панелі дій розробки в один рядок без переносу — перша за шириною напису, друга займає решту */
@media (max-width: 400px) {
    .tb-lib-dock { grid-template-columns: auto minmax(0, 1fr); }
    .tb-lib-dock .tb-btn { padding-left: 12px; padding-right: 12px; gap: 6px; font-size: 14px; }
}
/* телефон: рядки з горизонтальною прокруткою (перемикач .tb-seg, ряди чипів) не мають розширювати картку фільтрів своїм вмістом —
   інакше на 360px ряд «Усі · Домашні завдання · У реальному часі» розпирав картку на 21px за край екрана */
@media (max-width: 640px) {
    .tb-seg, .tb-filters .tb-filters-block > .tb-chips, .tb-filters > .tb-chips { contain: inline-size; min-width: 0; }
    .tb-filters, .tb-filters-block { min-width: 0; }
    .tb-filters-row { min-width: 0; max-width: 100%; }
}
@media (max-width: 400px) { .tb-seg > * { padding-left: 7px !important; padding-right: 7px !important; font-size: 13px !important; } }
/* «Знайти» у рядку фільтрів: коробка 40px + тінь натискання 4px = видимі 44px, як у полів (з тінню 5px кнопка виглядала вищою) */
@media (min-width: 641px) {
    .tb-filters-row > .tb-btn, .tb-search-form > .tb-btn { --press: 4px; align-self: flex-start !important; height: 40px; min-height: 0 !important; box-shadow: 0 4px 0 var(--c-d); }
}
/* будь-яка кнопка в рядку фільтрів (сортування «Спочатку новіші», «Скинути» тощо) — тієї ж видимої висоти, що й поля (40 + 4 тінь = 44) */
@media (min-width: 641px) {
    .tb-filters-row > .tb-btn-sm { --press: 4px; height: 40px; min-height: 0 !important; padding: 0 16px; font-size: 14px; border-radius: var(--r, 14px); align-self: flex-start !important; }
}
/* рядки списків кабінету — один стандарт для всіх сторінок (як .tb-lib-item): радіус 16, тверда тінь 4px, поля 14/16, крок 10px
   (свідоцтва в «Мої документи ПК» і «Відзнаки за розробки» були 14px без тіні з кроком 6px) */
.tb-doc-row, .tb-acc-docrow { border-radius: 16px; box-shadow: 0 4px 0 var(--line); padding: 14px 16px; }
.tb-doc-table { gap: 10px; }