/* ============================================================
English to Go World — основні компоненти.
Усі значення — з design-tokens.css (var(--...)), без хардкоду.
============================================================ */
/* design-tokens.css підключається окремим з версією (asset()) у кожної сторінки —
@import тут ламав кеш-бастинг: URL імпорту не мав ?v і браузер тримав старі токени. */
/* ЕТАЛОН РЕДИЗАЙНУ (Юля 17.07, СХВАЛЕНО — приклад для решти сайту):
БЕЗ плашок-палуб — контент прямо на градієнті, відступи (padding/margin
плашок) лишаються, щоб не злипалось. Сторінка опт-ін: клас page-boardless
на (courses ✅, vocabulary ✅, dashboard ✅ 18.07, grammar/notes ✅,
train ✅ 23.07) — усі цільові сторінки розкатані. */
.page-boardless .page-board,
.page-boardless .postcard-hero {
background: transparent; border: 0; box-shadow: none;
}
/* Скло (glassmorphism) — спільний рецепт розкатки: матова поверхня з блуром
позаду. .glass-pill = округлий значок/eyebrow зі світлою рамкою,
.glass-panel = секційна панель під текст (дрібний muted-текст на градієнті
фейлить контраст — Б-аудит, docs/design-system-refresh.md). */
.glass-pill, .glass-panel,
.page-boardless .ph-eyebrow {
background: color-mix(in srgb, var(--color-surface) 55%, transparent);
-webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--color-text) 20%, transparent);
}
.glass-pill,
.page-boardless .ph-eyebrow {
border: 1px solid color-mix(in srgb, var(--color-surface) 65%, transparent);
border-radius: var(--radius-pill);
}
.glass-panel { border: 0; border-radius: var(--radius-lg); }
/* Eyebrow hero — скляний pill із блуром позаду */
.page-boardless .ph-eyebrow {
display: inline-flex; align-items: center; align-self: flex-start;
padding: 5px 14px; margin-bottom: 4px;
}
/* Значки рівня A1/A2/… — скляний pill поверх фото (блур розмиває картинку
за значком). Графіт-текст на матовому склі читається; тінь для контуру. */
.page-courses .lc-cover .lc-badge {
background: color-mix(in srgb, var(--color-surface) 58%, transparent);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid color-mix(in srgb, var(--color-surface) 70%, transparent);
color: var(--color-text);
box-shadow: 0 2px 10px -3px rgba(0, 0, 0, 0.28);
}
/* Словник (18.07, розкатка еталона): скляний тулбар (Карта/A–Z + статистика)
і липкий алфавіт-бар; картки слів без обводки — статусна ліва смуга лишається
(колір смуги задають статусні правила нижче в файлі). */
.page-vocab .vocab-toolbar {
background: color-mix(in srgb, var(--color-surface) 55%, transparent);
-webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
border: 0; border-radius: var(--radius-lg);
box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--color-text) 20%, transparent);
/* більший горизонтальний відступ = концентричні кути (18.07): pill-и всередині
перестають упиратись у кут контейнера справа/зліва */
padding: 10px 22px; margin-bottom: var(--space-4);
}
.page-vocab .az-nav {
background: color-mix(in srgb, var(--color-surface) 62%, transparent);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 0; border-radius: var(--radius-lg);
box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--color-text) 18%, transparent);
}
.page-vocab .vocab-card { border: 0; border-left: 4px solid var(--color-primary); }
/* Вьюхи (карта слів / A–Z список) — контент-картка на градієнті: список
прозорий і розраховував на плашку під собою (без неї слова висіли б голі).
Без overflow:hidden на .vocab-view — інакше зламається sticky алфавіт-бара. */
.page-vocab .vocab-view {
background: var(--color-surface); border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
/* Обрізаємо тінти ховера/відкритої картки по нижніх кутах на .az-card
(18.07: остання картка світила квадратними кутами). Це НЕ ламає sticky:
алфавіт-бар — сусід .az-card, а не нащадок. */
.page-vocab .az-card {
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
overflow: hidden;
}
/* Пошук у скляному тулбарі (18.07): був крем із теплою рамкою — чужинець на
склі. Тепер напівпрозоре біле в тон скла + холодна hairline; фокус —
канонічний перивінкл-glow. */
.page-vocab .vocab-search {
background-color: color-mix(in srgb, var(--color-surface) 72%, transparent);
border-color: color-mix(in srgb, var(--color-text) 14%, transparent);
/* лупа всередині поля (18.07); колір = --color-text-muted */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6b73' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: 13px 50%; background-size: 15px;
/* нижчий padding — зрівняти висоту з тоглом/статами в тулбарі (18.07) */
padding: 6px 16px 6px 37px;
}
.page-vocab .vocab-search:focus {
background-color: var(--color-surface);
border-color: var(--color-primary);
box-shadow: var(--shadow-glow);
}
/* Порядок у тулбарі (18.07): пошук ЛІВОРУЧ, тогл Карта/A–Z ПРАВОРУЧ.
Через flex-order — DOM/таб-порядок не чіпаємо. */
.page-vocab .vocab-tools { flex-direction: row-reverse; }
/* Дії слова у списку — легкі pill-чипи без «печатки» (запит Юлі 18.07:
грубі кнопки в щільному списку; печатка лишається в уроках). */
.page-vocab .vocab-actions button {
border: 1px solid var(--color-border); box-shadow: none;
background: transparent; color: var(--color-primary-700);
padding: 5px 13px; border-radius: var(--radius-pill); font-weight: 600;
}
.page-vocab .vocab-actions button:hover:not(:disabled) {
background: var(--color-primary-050); border-color: var(--color-primary-100);
transform: none; box-shadow: none;
}
.page-vocab .vocab-actions button:active:not(:disabled) { transform: none; box-shadow: none; background: var(--color-primary-100); }
/* «Видалити» — іконка-смітник (18.07): тихий сірий чип, ховер = мʼяка небезпека.
Порядок у рядку (18.07): кнопка статусу → слово-статус → смітник на правому
краю (руйнівне — подалі); чисто flex-order, DOM/JS не чіпаємо. */
.page-vocab .vocab-actions .remove-word {
display: inline-flex; align-items: center; justify-content: center;
padding: 6px 10px; color: var(--color-text-muted);
order: 3; margin-left: auto;
}
/* Ключове слово в прикладі — жовтий маркер (та сама мова, що виділення слів
в уроках: --vocab-hl-mark), текст лишається кольором прикладу. */
.page-vocab .example .ex-key {
background: var(--vocab-hl-mark); color: inherit;
border-radius: 3px; padding: 0 3px; margin: 0 -1px;
}
.page-vocab .vocab-actions .remove-word:hover:not(:disabled) {
background: var(--color-error-100); border-color: var(--ex-no-border); color: var(--ex-no-ink);
}
.page-vocab .vocab-actions .remove-word:active:not(:disabled) { background: var(--ex-no-border); }
/* СТАТУС СЛОВА (18.07). Іконку (книжка=вчу / галочка=вивчено) і колір задають
змінні НА КАРТЦІ — ними користуються обидва варіанти. Три поведінки:
• Карта/панель: іконка ПЕРЕД словом + тултіп (.word-status).
• A–Z розгорнутий: іконка + СЛОВО у діях, біля кнопки (.status-badge).
• A–Z компактний: нічого. */
.page-vocab .vocab-card[data-status="learning"] { --st-color: var(--color-secondary-700);
--st-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h6a3 3 0 0 1 3 3v13a2.5 2.5 0 0 0-2.5-2.5H2z'/%3E%3Cpath d='M22 4h-6a3 3 0 0 0-3 3v13a2.5 2.5 0 0 1 2.5-2.5H22z'/%3E%3C/svg%3E"); }
.page-vocab .vocab-card[data-status="learned"] { --st-color: var(--color-success-700);
--st-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.3l2.4 2.4 4.8-5'/%3E%3C/svg%3E"); }
/* спільна маскована іконка */
.page-vocab .word-status::before, .page-vocab .status-badge::before {
content: ''; background-color: currentColor;
-webkit-mask: var(--st-ico) center / contain no-repeat;
mask: var(--st-ico) center / contain no-repeat;
}
/* Іконка перед словом + тултіп — ЛИШЕ в панелі карти */
.page-vocab .word-status {
position: relative; display: none; width: 16px; height: 16px;
flex: none; vertical-align: -3px; margin-right: 7px; cursor: help; color: var(--st-color);
}
.vocab-panel .word-status { display: inline-flex; }
.page-vocab .word-status::before { position: absolute; inset: 0; }
.page-vocab .word-status::after {
position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
padding: 3px 9px; border-radius: var(--radius-sm);
background: var(--color-text); color: var(--color-on-accent);
font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
white-space: nowrap; opacity: 0; pointer-events: none;
transition: opacity var(--dur-fast) var(--ease);
}
.page-vocab .word-status:hover::after { opacity: 1; }
.page-vocab .vocab-card[data-status="learning"] .word-status::after { content: "вчу"; }
.page-vocab .vocab-card[data-status="learned"] .word-status::after { content: "вивчено"; }
/* Іконка + слово у діях — ЛИШЕ в розгорнутій картці A–Z */
.page-vocab .status-badge {
order: 2; margin: 0; padding: 0; background: transparent; border: 0;
display: none; align-items: center; gap: 5px;
font-size: var(--fs-small); font-weight: 600; color: var(--st-color);
}
.page-vocab .status-badge::before { width: 15px; height: 15px; flex: none; }
#view-az .vocab-card.is-open .status-badge { display: inline-flex; }
/* Граматика (18.07, розкатка еталона): боардлес — .gr-app скидає плашку через
клас page-boardless (правило .page-boardless .page-board вгорі), hero-eyebrow
стає скляним автоматично. Липка панель «назад + пошук» перетворюється на скляний
тулбар (той самий рецепт, що .vocab-toolbar) — sticky не чіпаємо (position лишається
на базовому .gr-bar). Картки/деталь тем — непрозорий surface, лишаються як є. */
.page-grammar .gr-bar {
background: color-mix(in srgb, var(--color-surface) 55%, transparent);
-webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
border: 0; border-radius: var(--radius-lg);
box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--color-text) 20%, transparent);
/* висота/боковий інсет 1:1 зі скляним тулбаром словника (.vocab-toolbar) */
padding: 10px 22px;
}
/* Кнопка «Назад» — висота = інпут (6px верт. + рамка 1px), щоб бар був рівний */
.page-grammar .gr-back { padding: 6px 14px 6px 10px; border-width: 1px; }
/* Пошук у скляному тулбарі: крем із теплою рамкою — чужинець на склі (як у словнику).
Напівпрозоре біле в тон скла + холодна hairline; фокус — канонічний перивінкл-glow.
Висота 1:1 з .vocab-search: вертикальний padding 6px + рамка 1px (було 11px/1.5px). */
.page-grammar .gr-bar .gr-search-box input {
background-color: color-mix(in srgb, var(--color-surface) 72%, transparent);
border-color: color-mix(in srgb, var(--color-text) 14%, transparent);
border-width: 1px;
padding: 6px 14px 6px 40px;
}
.page-grammar .gr-bar .gr-search-box input:focus {
background-color: var(--color-surface);
border-color: var(--color-primary);
box-shadow: var(--shadow-glow);
}
/* Місток (18.07, рішення Юлі): БЕНТО-МОЗАЇКА — вся статистика в одній сітці
3×N, кожна плитка на легкому склі (уніфіковано, вибір Юлі «все скло»);
паперові предмети (тайли досягнень, печатки, марка слова дня) живуть
всередині плиток. Span-и: .bt-2 = 2 колонки, .bt-3 = на всю ширину.
dense — щоб вузькі плитки підтягувались у діри, коли якоїсь секції нема. */
/* База 6 колонок: дає кроки ⅓ (span 2, дефолт), ½ (.bt-half, span 3),
⅔ (.bt-2, span 4) і повну ширину (.bt-3) — 50/50-ряди без ламання решти. */
.page-dash .dash-bento {
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
grid-auto-flow: dense; gap: var(--space-4);
}
.page-dash .dash-bento > * {
margin: 0; border: 0; border-radius: var(--radius-lg); min-width: 0;
grid-column: span 2;
/* 82% білого (було 55%): на плитках багато тексту, крізь прозоріше скло
градієнт заважав читати (фідбек Юлі 18.07) */
background: color-mix(in srgb, var(--color-surface) 82%, transparent);
-webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--color-text) 20%, transparent);
padding: 18px 20px 16px;
}
.page-dash .dash-bento > .bt-half { grid-column: span 3; }
.page-dash .dash-bento > .bt-2 { grid-column: span 4; }
.page-dash .dash-bento > .bt-3 { grid-column: 1 / -1; }
@media (max-width: 900px) {
.page-dash .dash-bento { grid-template-columns: 1fr; }
.page-dash .dash-bento > * { grid-column: auto; }
}
/* ===== Explorer ID — картка-посвідчення (концепт 2, рішення Юлі 19.07) =====
Ліворуч посвідчення з аватаркою в кільці рангу + паспортні поля;
праворуч звична бенто-сітка плиток. */
.page-dash .profile-shell { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .page-dash .profile-shell { grid-template-columns: 1fr; } }
/* Ліва картка sticky (рішення Юлі 19.07): слідує за скролом, нижче липкого хедера.
Тільки на desktop-сітці — на вузькому шелл стає одноколонковим і sticky зайвий. */
@media (min-width: 901px) {
.page-dash .id-card { position: sticky; top: 90px; }
}
.id-card {
background: color-mix(in srgb, var(--color-surface) 90%, transparent);
border-radius: var(--radius-lg); overflow: hidden;
box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--color-text) 20%, transparent);
-webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
}
.id-band {
position: relative; color: var(--color-on-hero); padding: 15px 20px 54px; overflow: hidden;
background: linear-gradient(150deg, var(--hero-grad-from) 0%, var(--color-primary) 55%, var(--hero-grad-to) 100%);
}
.id-band::after {
content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
background:
repeating-radial-gradient(circle at 20% -10%, rgba(255,255,255,.10) 0 1px, transparent 1px 9px),
repeating-linear-gradient(60deg, rgba(255,255,255,.05) 0 1px, transparent 1px 12px);
}
.id-band-row { position: relative; display: flex; align-items: center; justify-content: space-between; }
.id-brand { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px; }
.id-type { font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; opacity: .72; }
.id-portrait { position: relative; width: 128px; height: 128px; margin: -42px auto 0; }
.id-portrait .id-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.id-avatar {
position: absolute; inset: 12px; border-radius: 50%; overflow: hidden;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(150deg, var(--color-primary-100), var(--color-primary));
box-shadow: 0 0 0 5px var(--color-surface), 0 8px 18px -8px color-mix(in srgb, var(--color-text) 45%, transparent);
}
.id-avatar img { width: 100%; height: 100%; object-fit: cover; }
.id-avatar span { font-family: var(--font-head); font-weight: 700; font-size: 44px; color: #fff; }
.id-tier {
position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); white-space: nowrap;
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
background: var(--color-secondary); color: var(--color-secondary-700);
border-radius: var(--radius-pill); padding: 3px 11px; box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--color-text) 40%, transparent);
}
.id-body { padding: 18px 20px 20px; text-align: center; }
.id-name { font-family: var(--font-head); font-size: 22px; font-weight: 700; margin: 8px 0 2px; }
.id-sub { font-size: var(--fs-small); color: var(--color-text-muted); }
.id-sub b { color: var(--color-primary-700); }
.id-fields { margin-top: 18px; text-align: left; }
.id-field { display: flex; align-items: baseline; justify-content: space-between; padding: 11px 2px; border-top: 1px dashed var(--color-border); }
.id-field:first-child { border-top: 0; }
.id-field .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
.id-field .v { font-family: var(--font-head); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.id-field .v small { font-size: 12px; color: var(--color-text-muted); font-weight: 600; }
.id-field .v.xp { color: var(--color-primary-700); }
.id-field .v.streak { color: var(--color-secondary-700); }
.id-field .v.co { color: var(--color-success-700); }
.id-open {
margin-top: 16px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
background: transparent; color: var(--color-primary-700); border: 1px solid var(--color-border-strong);
border-radius: var(--radius-pill); font: inherit; font-weight: 600; font-size: var(--fs-small); padding: 11px 16px; cursor: pointer;
}
.id-open:hover { background: var(--color-primary-050); border-color: var(--color-primary); }
/* Continue-плитка у правому стовпчику (замінює split-hero) */
.cont-tile { display: flex; align-items: center; gap: 16px; }
.cont-thumb { flex: none; width: 62px; height: 62px; border-radius: 12px; overflow: hidden; background: var(--color-primary-100); }
.cont-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cont-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cont-lab { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); }
.cont-ttl { font-family: var(--font-head); font-weight: 700; font-size: 17px; }
.cont-sub { font-size: var(--fs-small); color: var(--color-text-muted); }
.cont-tile .btn-ticket, .cont-tile .btn-primary { margin-left: auto; flex: none; }
@media (max-width: 560px) {
.cont-tile { flex-wrap: wrap; }
.cont-tile .btn-ticket, .cont-tile .btn-primary { margin-left: 0; width: 100%; justify-content: center; }
}
/* Заголовки плиток — мова mono-лейблів борту (як «Бортовий журнал»),
великі h2 зʼїдали компактність. */
.page-dash .dash-bento h2 {
font-family: var(--font-mono); font-size: 10.5px; font-weight: 400;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted);
display: flex; align-items: center; gap: 10px; margin: 0 0 var(--space-3);
}
.page-dash .dash-bento .ach-count { font-size: 10px; padding: 1px 8px; letter-spacing: normal; }
/* Стат-якорі (19.07, рішення Юлі): у плитці рівно ОДНЕ велике число, за яке
чіпляється око (XP, стрік, слова); все інше — 14px супровід. Шкала:
A якір 1.9rem → B назви 15px → C супровід 14px muted → D мікро-лейбл 10.5px. */
.stat-big {
margin: 0 0 2px; font-family: var(--font-head); font-weight: 700;
font-size: 1.9rem; line-height: 1.15; letter-spacing: -0.01em;
color: var(--color-text); font-variant-numeric: tabular-nums;
}
.stat-big .sb-unit, .stat-big .sb-of {
font-family: var(--font-body); font-size: 0.95rem; font-weight: 600;
letter-spacing: normal; color: var(--color-text-muted);
}
/* Семантика якорів (19.07, варіант А): перивінкл = прогрес/дія (XP),
персик = стрік/тепло, зелений = вивчено. Тільки число — юніт лишається muted. */
.stat-act { color: var(--color-primary-700); }
.stat-warm { color: var(--color-secondary-700); }
.stat-done { color: var(--color-success-700); }
.stat-zero { color: var(--color-text-muted); } /* нульовий стрік гасить і персик */
/* Перекриття «предметних» плиток під скло: стаб зберігає відступ під перфорацію,
листівка слова дня втрачає нахил (у сітці він ламав ряд). */
/* Список слів (у «Валізі слів») — порядок 19.07: рядки без ліній (тільки
відступи), слова 15px/600 — тихіші за слово дня; лінії лишаються тільки
як межі зон плитки. */
.words-list { list-style: none; margin: 0; padding: 0; }
.words-list li {
display: flex; align-items: baseline; gap: 8px;
padding: 5px 0;
}
.words-list li:last-child { padding-bottom: 0; }
.wl-w { font-family: var(--font-head); font-weight: 600; font-size: 15px; min-width: 0; }
.wl-t { margin-left: auto; text-align: right; color: var(--color-text-muted); font-size: 13px; }
/* «Валіза слів» — лічильники + слово дня + останні слова в одній плитці
(ієрархія 18.07: слово дня більше не окрема плитка-листівка) */
.sc-stats { margin: 0 0 4px; font-size: var(--fs-small); color: var(--color-text-muted); }
.sc-stats b { color: var(--color-text); font-variant-numeric: tabular-nums; }
.sc-due { color: var(--color-secondary-700); font-weight: 600; text-decoration: none; }
.sc-due:hover { text-decoration: underline; }
/* Слово дня — картка-«марка» всередині скла на світлому перивінклі
(рішення Юлі 19.07): токен --color-primary-050 #eef1fc. Тінт сам відділяє
зону, пунктирна межа не потрібна. */
.sc-wod { background: var(--color-primary-050); border-radius: var(--radius-md); margin-top: 10px; padding: 10px 14px 12px; }
/* Зонні лейбли валізи: «Слово дня» і «Останні слова» — однакова мова,
кожна зона плитки відкривається таким лейблом (порядок 19.07).
Індиго-700 замість персика: лейбл лежить на лавандовій картці — тон-у-тон. */
.sc-wod-lab, .sc-list-lab { display: block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-primary-700); }
.sc-wod-word { font-family: var(--font-head); font-weight: 700; font-size: 1.45rem; margin: 4px 0 0; }
.sc-wod-tr { color: var(--color-text-muted); margin: 0 0 6px; font-size: var(--fs-small); }
/* Приклад — на клас тихіше за слово (0.9rem + muted), щоб не сперечався з reef */
.sc-wod-ex { font-family: var(--font-example); font-weight: 500; font-style: italic; font-size: 0.9rem; color: var(--color-text-muted); margin: 0; }
.sc-recent { border-top: 1px dashed var(--color-border); margin-top: 10px; padding-top: 10px; }
.sc-recent .words-list { margin-top: 4px; }
/* Дві кнопки «детальніше» в одному заголовку (плитка «Скарби») */
.h2-actions { display: inline-flex; gap: 8px; margin-left: auto; }
.h2-actions .sec-more { margin-left: 0; }
/* ---- Обʼєднання «Мій профіль» = Місток + Паспорт (18.07) ---- */
/* Плитка-паспорт: мінідокумент у кольорах обкладинки, клік = поп-ап книжки */
.page-dash .dash-bento > .passport-tile {
padding: 0;
background: linear-gradient(150deg, var(--hero-grad-from) 0%, var(--color-primary) 55%, var(--hero-grad-to) 100%);
}
.pt-open {
position: relative; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 6px; width: 100%; height: 100%;
min-height: 300px; padding: 30px 24px; cursor: pointer;
background: transparent; border: 0; border-radius: inherit;
color: var(--color-on-hero); font: inherit; text-align: center;
}
.pt-open::before { /* корінець книжки, як на великій обкладинці */
content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1.5px;
background: rgba(243, 228, 194, 0.35);
}
.pt-open:hover { filter: brightness(1.06); }
.pt-emblem { opacity: 0.9; }
.pt-title { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.32em; line-height: 1.3; }
.pt-title small { display: block; font-family: var(--font-body); font-size: var(--fs-small); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; font-weight: 400; }
.pt-holder { font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 12px; }
.pt-rank { font-size: var(--fs-small); opacity: 0.85; display: inline-flex; align-items: center; gap: 5px; }
.pt-hint {
margin-top: 14px; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; border: 1px solid rgba(243, 228, 194, 0.45);
border-radius: var(--radius-pill); padding: 6px 16px;
}
.pt-open:hover .pt-hint { background: rgba(255, 255, 255, 0.12); }
/* Плитки сувенірів/листівок: короткий стан + ряд останніх сувенірів */
.st-empty { margin: 0; font-size: var(--fs-small); color: var(--color-text-muted); }
.st-empty b { color: var(--color-text); }
.st-row { display: flex; gap: 10px; }
.st-row .souvenir { flex: 1; min-width: 0; }
/* Широкий поп-ап — паспорт-книжка та альбом листівок */
/* Два класи (0,2,0) — щоб перебити базове .dash-dialog{width:720} нижче у файлі,
інакше розворот-паспорт (940px) не влазить у 720 і права сторінка ріжеться. */
.dash-dialog.dash-dialog-wide { width: min(94vw, 960px); }
.dash-dialog .passport-book { margin-bottom: var(--space-4); }
/* Паспорт як самостійне «вікно» (рішення Юлі 19.07): БЕЗ кремового контейнера —
книжка-паспорт плаває прямо на затемненому фоні, зʼявляється анімацією й
гортається. Хрестик — плаваючий (sticky), заголовок «Мій паспорт» прибрано. */
/* Два класи (0,2,0) — щоб перебити базове .dash-dialog{background} нижче у файлі */
.dash-dialog.dash-dialog-passport { background: transparent; box-shadow: none; }
.dash-dialog-passport .dlg-inner { padding: 0; }
.dash-dialog-passport .dlg-head { position: sticky; top: 0; z-index: 6; margin: 0; padding: 2px; justify-content: flex-end; }
.dash-dialog-passport .passport-book { margin-bottom: 0; }
.dash-dialog-passport .visas { margin-top: var(--space-5); }
.dash-dialog-passport .visas h2 { color: rgba(255, 255, 255, 0.92); }
/* Порожній стан (новачок без штампів) — власна світла картка, щоб текст читався */
.dash-dialog-passport .empty-state {
background: color-mix(in srgb, var(--color-surface) 92%, transparent);
border-radius: var(--radius-lg); padding: var(--space-5); margin-top: var(--space-3);
}
@keyframes pp-appear { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
.dash-dialog-passport[open] > .dlg-inner > .passport-book,
.dash-dialog-passport[open] > .dlg-inner > .pb-cover { animation: pp-appear .5s var(--spring) both; }
}
/* ---- Компактний Місток (18.07): секції показують крайнє, деталі — поп-ап ---- */
/* Кнопка «детальніше» в заголовку секції — тихий pill-чип (мова vocab-actions),
стає на правий край заголовка. Працює і як