/* ============================================================
MathProblems — тема «Доска» (Chalk & Slate)
Светлая = маркерная доска · Тёмная = грифельная доска
Подключается ПОСЛЕ Bootstrap. Тему хранит [data-theme] на ;
компоненты Bootstrap переключает [data-bs-theme] (ставится тем же скриптом).
============================================================ */
/* ---------- ТОКЕНЫ: светлая (маркерная доска) ---------- */
:root,
:root[data-theme="light"]{
--bg:#f6f8f6;
--panel:#ffffff;
--panel-2:#eef2ef;
--ink:#1b2624;
--muted:#5b6a66;
--line:#dbe3df;
--line-2:#eaefec;
--accent:#0d7f8c;
--accent-ink:#0a6a75;
--accent-soft:#e3f1f2;
--on-accent:#ffffff;
--on-solid:#ffffff;
--ok:#137a4b; --ok-soft:#e4f3ea;
--warn:#a4551f; --warn-soft:#f6e9df;
--danger:#b23b30;--danger-soft:#f6e3e1;
--tile:#12211f; --tile-ink:#eaf3ec;
--radius:10px; --radius-sm:7px;
--shadow:0 1px 2px rgba(20,40,38,.05), 0 10px 26px rgba(20,40,38,.06);
/* мост в Bootstrap */
--bs-body-bg:var(--bg);
--bs-body-color:var(--ink);
--bs-border-color:var(--line);
--bs-secondary-color:var(--muted);
--bs-tertiary-bg:var(--panel-2);
--bs-link-color:var(--accent-ink);
--bs-link-hover-color:var(--accent);
--bs-primary:var(--accent);
--bs-primary-rgb:13,127,140;
--bs-emphasis-color:var(--ink);
}
/* ---------- ТОКЕНЫ: тёмная (грифельная доска) ---------- */
:root[data-theme="dark"]{
--bg:#0f1d1b;
--panel:#152a27;
--panel-2:#193029;
--ink:#eef3ec;
--muted:#9db0aa;
--line:rgba(238,243,236,.14);
--line-2:rgba(238,243,236,.08);
--accent:#7cc7d6;
--accent-ink:#a6dce6;
--accent-soft:#123f3e;
--on-accent:#08201f;
--on-solid:#08201f;
--ok:#7fd0a0; --ok-soft:#12352a;
--warn:#e6c07a; --warn-soft:#2f2a1c;
--danger:#e8918a;--danger-soft:#33211f;
--tile:#0b1614; --tile-ink:#eaf3ec;
--shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 30px rgba(0,0,0,.35);
--bs-body-bg:var(--bg);
--bs-body-color:var(--ink);
--bs-border-color:var(--line);
--bs-secondary-color:var(--muted);
--bs-tertiary-bg:var(--panel-2);
--bs-link-color:var(--accent-ink);
--bs-link-hover-color:var(--accent);
--bs-primary:var(--accent);
--bs-primary-rgb:124,199,214;
--bs-emphasis-color:var(--ink);
}
/* Fallback для отключённого JS: следуем системной теме */
@media (prefers-color-scheme: dark){
:root:not([data-theme]){
--bg:#0f1d1b; --panel:#152a27; --panel-2:#193029; --ink:#eef3ec; --muted:#9db0aa;
--line:rgba(238,243,236,.14); --line-2:rgba(238,243,236,.08);
--accent:#7cc7d6; --accent-ink:#a6dce6; --accent-soft:#123f3e; --on-accent:#08201f; --on-solid:#08201f;
--ok:#7fd0a0; --ok-soft:#12352a; --warn:#e6c07a; --warn-soft:#2f2a1c; --danger:#e8918a; --danger-soft:#33211f;
--tile:#0b1614; --tile-ink:#eaf3ec; --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 30px rgba(0,0,0,.35);
--bs-body-bg:var(--bg); --bs-body-color:var(--ink); --bs-border-color:var(--line);
--bs-secondary-color:var(--muted); --bs-tertiary-bg:var(--panel-2);
--bs-link-color:var(--accent-ink); --bs-link-hover-color:var(--accent);
--bs-primary:var(--accent); --bs-primary-rgb:124,199,214; --bs-emphasis-color:var(--ink);
}
}
/* ============================================================
БАЗА / ТИПОГРАФИКА (мельче и плотнее, чем было)
============================================================ */
body{
background:var(--bg);
color:var(--ink);
font-size:.9375rem; /* 15px */
line-height:1.6;
font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
-webkit-font-smoothing:antialiased;
transition:background-color .2s ease, color .2s ease;
}
h1,.h1{font-size:1.8rem;}
h2,.h2{font-size:1.45rem;}
h3,.h3{font-size:1.2rem;}
h4,.h4{font-size:1.05rem;}
h5,.h5{font-size:.95rem;}
h6,.h6{font-size:.85rem;}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
font-weight:650; line-height:1.25; letter-spacing:-.01em; color:var(--ink);
}
a{color:var(--accent-ink); text-decoration:none;}
a:hover{color:var(--accent); text-decoration:underline; text-underline-offset:2px;}
/* Интерфейсные ссылки (меню, бренд, кнопки, пункты выпадающего меню, пагинация)
НЕ подчёркиваем — даже при наведении; там наведение показывается цветом/подложкой */
.navbar-brand, .nav-link, .dropdown-item, .btn, .page-link{ text-decoration:none; }
.navbar-brand:hover, .nav-link:hover, .dropdown-item:hover, .btn:hover, .page-link:hover{ text-decoration:none; }
.text-muted{color:var(--muted) !important;}
hr{border-color:var(--line); opacity:1;}
::selection{background:var(--accent-soft); color:var(--ink);}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
/* аккуратный скроллбар */
*{scrollbar-color:var(--line) transparent;}
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-thumb{background:var(--line); border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:var(--muted);}
/* ============================================================
НАВИГАЦИЯ
============================================================ */
.site-navbar{
background:var(--panel);
border-bottom:1px solid var(--line);
padding-top:.4rem; padding-bottom:.4rem;
box-shadow:0 1px 0 var(--line-2);
}
:root[data-theme="dark"] .site-navbar{
background:linear-gradient(180deg,#18332e,#152a27);
}
/* Типографский логотип-надпись в шапке: 𝕄ath ℙroblems.ru
(𝕄,ℙ — blackboard-bold; ath/roblems — матем. курсив; .ru — приглушённый суффикс) */
.site-navbar .navbar-brand{
display:inline-block; padding:0;
font-family:"Cambria","PT Serif","Georgia","Times New Roman",serif;
font-weight:400; font-size:1.5rem; line-height:1;
letter-spacing:-.005em; white-space:nowrap; color:var(--ink);
}
.site-navbar .navbar-brand:hover{color:var(--ink);}
.site-navbar .navbar-brand .sl-bb{
font-family:"Cambria Math","STIX Two Math","Segoe UI Symbol","Cambria",serif;
font-size:1.15em; /* 𝕄/ℙ рендерятся мельче — поднимаем до нормальной высоты капители */
}
.site-navbar .navbar-brand .sl-it{font-style:italic;}
.site-navbar .navbar-brand .sl-tld{color:var(--muted);}
@media (max-width:576px){ .site-navbar .navbar-brand{font-size:1.28rem;} }
.site-navbar .nav-link{
color:var(--muted); font-weight:550; font-size:.925rem;
padding:.4rem .7rem; border-radius:var(--radius-sm);
transition:color .15s, background-color .15s;
}
.site-navbar .nav-link:hover{color:var(--ink); background:var(--panel-2);}
.site-navbar .nav-link.active{color:var(--accent-ink); font-weight:650;}
.site-navbar .navbar-toggler{border-color:var(--line); padding:.25rem .5rem;}
.site-navbar .navbar-toggler:focus{box-shadow:0 0 0 .2rem var(--accent-soft);}
.site-navbar .dropdown-menu{
--bs-dropdown-bg:var(--panel);
--bs-dropdown-border-color:var(--line);
--bs-dropdown-link-color:var(--ink);
--bs-dropdown-link-hover-bg:var(--panel-2);
--bs-dropdown-link-hover-color:var(--accent-ink);
box-shadow:var(--shadow);
}
/* Кнопка-переключатель темы */
.theme-toggle{
display:inline-flex; align-items:center; justify-content:center;
width:38px; height:38px; margin-left:.35rem;
border:1px solid var(--line); border-radius:var(--radius-sm);
background:var(--panel); color:var(--ink); cursor:pointer;
transition:.15s;
}
.theme-toggle:hover{border-color:var(--accent); color:var(--accent);}
.theme-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
/* ============================================================
ПОДВАЛ
============================================================ */
.site-footer{
background:var(--panel);
border-top:1px solid var(--line);
}
:root[data-theme="dark"] .site-footer{background:#142925;}
.site-footer .copyright{color:var(--muted);}
/* ============================================================
КНОПКИ (перекрашиваем «казённый» синий в акцент доски)
============================================================ */
.btn{--bs-btn-border-radius:var(--radius-sm); font-weight:600;}
.btn-primary,.btn-info{
--bs-btn-bg:var(--accent); --bs-btn-border-color:var(--accent); --bs-btn-color:var(--on-accent);
--bs-btn-hover-bg:var(--accent-ink); --bs-btn-hover-border-color:var(--accent-ink); --bs-btn-hover-color:var(--on-accent);
--bs-btn-active-bg:var(--accent-ink); --bs-btn-active-border-color:var(--accent-ink); --bs-btn-active-color:var(--on-accent);
--bs-btn-disabled-bg:var(--accent); --bs-btn-disabled-border-color:var(--accent); --bs-btn-disabled-color:var(--on-accent);
}
.btn-outline-primary,.btn-outline-info{
--bs-btn-color:var(--accent-ink); --bs-btn-border-color:var(--accent);
--bs-btn-hover-bg:var(--accent); --bs-btn-hover-border-color:var(--accent); --bs-btn-hover-color:var(--on-accent);
--bs-btn-active-bg:var(--accent); --bs-btn-active-border-color:var(--accent); --bs-btn-active-color:var(--on-accent);
}
.btn-success{
--bs-btn-bg:var(--ok); --bs-btn-border-color:var(--ok); --bs-btn-color:var(--on-solid);
--bs-btn-hover-bg:var(--ok); --bs-btn-hover-border-color:var(--ok); --bs-btn-hover-color:var(--on-solid); --bs-btn-hover-bg:color-mix(in srgb,var(--ok) 85%,#000);
--bs-btn-active-bg:var(--ok); --bs-btn-active-border-color:var(--ok);
}
.btn-outline-success{--bs-btn-color:var(--ok); --bs-btn-border-color:var(--ok); --bs-btn-hover-bg:var(--ok); --bs-btn-hover-border-color:var(--ok); --bs-btn-hover-color:var(--on-solid); --bs-btn-active-bg:var(--ok);}
.btn-outline-secondary{--bs-btn-color:var(--muted); --bs-btn-border-color:var(--line); --bs-btn-hover-bg:var(--panel-2); --bs-btn-hover-border-color:var(--muted); --bs-btn-hover-color:var(--ink); --bs-btn-active-bg:var(--panel-2); --bs-btn-active-color:var(--ink);}
.btn-secondary{--bs-btn-bg:var(--panel-2); --bs-btn-border-color:var(--line); --bs-btn-color:var(--ink); --bs-btn-hover-bg:var(--line); --bs-btn-hover-color:var(--ink); --bs-btn-hover-border-color:var(--line);}
.btn-warning{--bs-btn-bg:var(--warn); --bs-btn-border-color:var(--warn); --bs-btn-color:var(--on-solid); --bs-btn-hover-bg:color-mix(in srgb,var(--warn) 88%,#000); --bs-btn-hover-border-color:color-mix(in srgb,var(--warn) 82%,#000); --bs-btn-hover-color:var(--on-solid); --bs-btn-active-bg:var(--warn); --bs-btn-active-border-color:var(--warn); --bs-btn-disabled-bg:var(--warn); --bs-btn-disabled-border-color:var(--warn); --bs-btn-disabled-color:var(--on-solid);}
.btn-danger{--bs-btn-bg:var(--danger); --bs-btn-border-color:var(--danger); --bs-btn-color:var(--on-solid); --bs-btn-hover-bg:color-mix(in srgb,var(--danger) 88%,#000); --bs-btn-hover-border-color:color-mix(in srgb,var(--danger) 82%,#000); --bs-btn-hover-color:var(--on-solid); --bs-btn-active-bg:var(--danger); --bs-btn-active-border-color:var(--danger); --bs-btn-disabled-bg:var(--danger); --bs-btn-disabled-border-color:var(--danger); --bs-btn-disabled-color:var(--on-solid);}
.btn-outline-warning{--bs-btn-color:var(--warn); --bs-btn-border-color:var(--warn); --bs-btn-hover-bg:var(--warn); --bs-btn-hover-border-color:var(--warn); --bs-btn-hover-color:var(--on-solid); --bs-btn-active-bg:var(--warn); --bs-btn-active-border-color:var(--warn); --bs-btn-active-color:var(--on-solid);}
.btn-outline-danger{--bs-btn-color:var(--danger); --bs-btn-border-color:var(--danger); --bs-btn-hover-bg:var(--danger); --bs-btn-hover-border-color:var(--danger); --bs-btn-hover-color:var(--on-solid); --bs-btn-active-bg:var(--danger); --bs-btn-active-border-color:var(--danger); --bs-btn-active-color:var(--on-solid);}
/* Ссылки/акценты Bootstrap */
.text-primary,.text-info{color:var(--accent-ink) !important;}
.text-success{color:var(--ok) !important;}
.bg-primary{background-color:var(--tile) !important;}
.link-primary{color:var(--accent-ink) !important;}
/* ============================================================
КОМПОНЕНТЫ Bootstrap (карточки, формы, модалки, табы…)
============================================================ */
.card{--bs-card-bg:var(--panel); --bs-card-border-color:var(--line); --bs-card-cap-bg:var(--panel-2); border-radius:var(--radius);}
.modal{--bs-modal-bg:var(--panel); --bs-modal-border-color:var(--line); --bs-modal-header-border-color:var(--line); --bs-modal-footer-border-color:var(--line);}
.form-control,.form-select{
background-color:var(--panel); border-color:var(--line); color:var(--ink);
}
.form-control:focus,.form-select:focus{
background-color:var(--panel); border-color:var(--accent); color:var(--ink);
box-shadow:0 0 0 .2rem var(--accent-soft);
}
.form-control::placeholder{color:var(--muted); opacity:.8;}
.input-group-text{background:var(--panel-2); border-color:var(--line); color:var(--muted);}
.dropdown-menu{--bs-dropdown-bg:var(--panel); --bs-dropdown-border-color:var(--line); --bs-dropdown-link-color:var(--ink); --bs-dropdown-link-hover-bg:var(--panel-2); --bs-dropdown-link-hover-color:var(--accent-ink);}
.list-group{--bs-list-group-bg:var(--panel); --bs-list-group-border-color:var(--line); --bs-list-group-color:var(--ink); --bs-list-group-action-hover-bg:var(--panel-2);}
.table{--bs-table-bg:transparent; --bs-table-color:var(--ink); --bs-table-border-color:var(--line);}
.pagination{--bs-pagination-bg:var(--panel); --bs-pagination-color:var(--accent-ink); --bs-pagination-border-color:var(--line);
--bs-pagination-hover-bg:var(--panel-2); --bs-pagination-hover-color:var(--accent); --bs-pagination-hover-border-color:var(--line);
--bs-pagination-active-bg:var(--accent); --bs-pagination-active-border-color:var(--accent); --bs-pagination-active-color:var(--on-accent);
--bs-pagination-focus-box-shadow:0 0 0 .2rem var(--accent-soft);}
.nav-tabs{--bs-nav-tabs-border-color:var(--line); --bs-nav-tabs-link-active-color:var(--accent-ink); --bs-nav-tabs-link-active-bg:var(--panel); --bs-nav-tabs-link-active-border-color:var(--line) var(--line) var(--panel);}
.nav-tabs .nav-link{color:var(--muted);}
.nav-tabs .nav-link:hover{color:var(--ink);}
/* Алёрты — мягкие «доска»-версии */
.alert-warning{--bs-alert-bg:var(--warn-soft); --bs-alert-border-color:color-mix(in srgb,var(--warn) 35%,transparent); --bs-alert-color:var(--warn);}
.alert-success{--bs-alert-bg:var(--ok-soft); --bs-alert-border-color:color-mix(in srgb,var(--ok) 35%,transparent); --bs-alert-color:var(--ok);}
.alert-info{--bs-alert-bg:var(--accent-soft); --bs-alert-border-color:color-mix(in srgb,var(--accent) 35%,transparent); --bs-alert-color:var(--accent-ink);}
/* Значки. Подложки — из палитры темы, текст — токеном --on-solid: в тёмной теме
подложки светлые, и жёстко белый текст на них не читался (у .bg-warning
вдобавок оставался бутстраповский жёлтый мимо палитры). Цвет задан !important
и более специфично, чем утилиты .text-dark/.text-white в шаблонах. */
.badge.bg-success,
.badge.bg-secondary,
.badge.bg-warning,
.badge.bg-danger,
.badge.bg-info,
.badge.bg-primary{color:var(--on-solid) !important;}
.badge.bg-success{background-color:var(--ok) !important;}
.badge.bg-secondary{background-color:var(--muted) !important;}
.badge.bg-warning{background-color:var(--warn) !important;}
.badge.bg-danger{background-color:var(--danger) !important;}
.badge.bg-info,
.badge.bg-primary{background-color:var(--accent) !important; color:var(--on-accent) !important;}
.badge.bg-light{background-color:var(--panel-2) !important; color:var(--muted) !important; border:1px solid var(--line);}
/* Ретинт «светлых» утилит Bootstrap под тему (иначе .bg-light/.bg-white остаются
белыми и «пробивают» тёмную тему на шапках карточек, подвалах, мини-блоках) */
.bg-light{ background-color:var(--panel-2) !important; }
.bg-white{ background-color:var(--panel) !important; }
/* ============================================================
МЕНЮ ДЕЙСТВИЙ У ЗАДАЧИ (одна тихая кнопка ⋮ + выпадающее меню)
Заменяет прежний «частокол» из 5–6 разноцветных кнопок у каждой задачи.
============================================================ */
.action-menu-btn{
display:inline-flex; align-items:center; justify-content:center;
width:36px; height:36px;
border:1px solid transparent; border-radius:var(--radius-sm);
background:transparent; color:var(--muted);
font-size:1.05rem; line-height:1; cursor:pointer;
transition:background-color .15s, color .15s, border-color .15s;
}
.action-menu-btn:hover,
.action-menu-btn.show,
.action-menu-btn[aria-expanded="true"]{
background:var(--panel-2); border-color:var(--line); color:var(--ink);
}
.action-menu-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* Меню действий — общее для задач (.problem-actions-menu) и для карточек
коллекций/контрольных (.actions-menu). Два имени — чтобы не править
все старые шаблоны и JS-генератор списка задач разом. */
.problem-actions-menu,
.actions-menu{
--bs-dropdown-min-width:13.5rem;
--bs-dropdown-padding-y:.35rem;
box-shadow:var(--shadow);
}
.problem-actions-menu .dropdown-item,
.actions-menu .dropdown-item{
display:flex; align-items:center;
padding:.5rem .9rem; font-size:.9rem; color:var(--ink);
}
.problem-actions-menu .dropdown-item i,
.actions-menu .dropdown-item i{ width:1.15em; color:var(--muted); }
.problem-actions-menu .dropdown-item:hover i,
.problem-actions-menu .dropdown-item:focus i,
.actions-menu .dropdown-item:hover i,
.actions-menu .dropdown-item:focus i{ color:var(--ink); }
.problem-actions-menu .dropdown-item.loading,
.actions-menu .dropdown-item.loading{ opacity:.65; pointer-events:none; }
.problem-actions-menu .dropdown-header,
.actions-menu .dropdown-header{
font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
}
/* Разрушительное действие — приглушённо-красным, ярче только при наведении */
.problem-actions-menu .action-item-danger,
.problem-actions-menu .action-item-danger i,
.actions-menu .action-item-danger,
.actions-menu .action-item-danger i{ color:var(--danger); }
.problem-actions-menu .action-item-danger:hover,
.problem-actions-menu .action-item-danger:focus,
.actions-menu .action-item-danger:hover,
.actions-menu .action-item-danger:focus{ background:var(--danger-soft); color:var(--danger); }
.problem-actions-menu .action-item-danger:hover i,
.problem-actions-menu .action-item-danger:focus i,
.actions-menu .action-item-danger:hover i,
.actions-menu .action-item-danger:focus i{ color:var(--danger); }
/* Правый блок действий: быстрые кнопки «Ответ/Решение» + кнопка ⋮ */
.problem-actions{ display:flex; align-items:flex-start; gap:6px; justify-content:flex-end; }
/* Быстрые кнопки «Ответ/Решение» — только иконки, в одном стиле с ⋮ (тихие, цвет при наведении) */
.problem-actions-inline{ display:none; gap:6px; } /* по умолчанию (тач) скрыты — см. @media ниже */
.problem-actions-inline .quick-btn{
display:inline-flex; align-items:center; justify-content:center;
width:36px; height:36px;
border:1px solid transparent; border-radius:var(--radius-sm);
background:transparent; color:var(--muted);
font-size:1.05rem; line-height:1; cursor:pointer;
transition:background-color .15s, border-color .15s, color .15s;
}
.problem-actions-inline .quick-btn:hover{ background:var(--panel-2); border-color:var(--line); }
.problem-actions-inline .quick-btn.answer:hover{ color:var(--ok); }
.problem-actions-inline .quick-btn.solution:hover{ color:var(--accent-ink); }
.problem-actions-inline .quick-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* Устройства С мышью: «Ответ/Решение» проявляются при наведении на карточку;
их дубли в меню ⋮ там не нужны — прячем. По умолчанию (тач/без наведения)
инлайн-кнопок нет, а «Ответ/Решение» доступны пунктами меню. */
@media (hover: hover) and (pointer: fine){
.problem-actions-inline{
display:flex;
opacity:0; transform:translateX(4px);
transition:opacity .15s ease, transform .15s ease;
pointer-events:none; /* невидимые кнопки не перехватывают клики */
}
.problem-card:hover .problem-actions-inline,
.problem-card:focus-within .problem-actions-inline{
opacity:1; transform:none; pointer-events:auto;
}
.problem-actions-menu .menu-quick{ display:none; }
}
/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
body,*{transition:none !important;}
}
/* ============================================================
БЛОК «ПОХОЖИЕ ЗАДАЧИ» (кнопка в меню ⋮ у задачи)
Общий для каталога и страницы одной задачи — раньше жил
в inline-стилях home.blade.php.
============================================================ */
/* Блок с похожими задачами */
.analogs-block {
background: var(--panel-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 15px;
margin-top: 15px;
animation: slideDown 0.3s ease-out;
}
.analogs-header {
display: flex;
align-items: center;
color: var(--muted);
font-weight: 600;
border-bottom: 2px solid var(--line);
padding-bottom: 8px;
margin-bottom: 15px;
}
.analogs-count {
font-size: 0.75em;
font-weight: 500;
}
/* Карточки похожих задач */
.analog-item {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 6px;
padding: 12px;
margin-bottom: 10px;
transition: all 0.2s ease;
cursor: pointer;
}
.analog-item:hover {
border-color: var(--accent);
box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
transform: translateY(-1px);
}
.analog-item:last-child {
margin-bottom: 0;
}
.analog-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.analog-id {
font-weight: 600;
color: var(--accent);
font-size: 0.9em;
}
.analog-statement {
color: var(--muted);
font-size: 0.9em;
line-height: 1.4;
margin-bottom: 8px;
}
.analog-topic {
color: var(--muted);
font-size: 0.8em;
font-style: italic;
}
/* Счётчик свёрнутых аналогов под номером задачи — виден только когда включено
«Скрыть аналогичные задачи». Кнопка, а не подпись: клик разворачивает их тут же. */
.analogs-chip {
display: inline-flex;
align-items: center;
gap: 3px;
margin-top: 5px;
padding: 1px 7px;
font-size: .7rem;
font-weight: 600;
line-height: 1.5;
color: var(--muted);
background: transparent;
border: 1px solid var(--line);
border-radius: 999px;
cursor: pointer;
white-space: nowrap;
transition: color .15s, border-color .15s, background-color .15s;
}
.analogs-chip:hover {
color: var(--accent-ink);
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
background: var(--accent-soft);
}
.analogs-chip i {
font-size: .85em;
opacity: .8;
}
/* ==========================================================================
Размер шрифта в текстах задач — кнопки A− / A+ над списком.
Масштаб живёт одной переменной на , а размеры считаются от неё через
calc(1em * …): единица em берёт унаследованный кегль, поэтому при масштабе 1
всё выглядит ровно как раньше, а формулы MathJax (они меряются в em от
окружающего текста) тянутся вместе с текстом сами.
Значение проставляется в ещё до отрисовки — иначе страница моргала бы
базовым размером. Ответ и решение получают тот же множитель — «пропорционально».
========================================================================== */
:root {
--problem-font-scale: 1;
}
.problem-statement,
.problem-answer,
.problem-solution {
font-size: calc(1em * var(--problem-font-scale));
}
/* «Ответ:» и сам ответ — одной строкой. Разметка во всех списках одинаковая
(Ответ: + ), поэтому правим
здесь, а не в четырёх шаблонах. Решение остаётся с переносом: оно длинное.
!important — чтобы перебить mt-2 из разметки, он бы оставил зазор. */
.problem-answer .answer-content {
display: inline;
margin-top: 0 !important;
}
/* Кнопки размера в строке сортировки — две буквы A разного кегля.
Одинаковая ширина, чтобы «таблетки» в ряду не прыгали; у буквы line-height: 1,
поэтому крупная A не растягивает кнопку по высоте относительно соседних. */
/* Никакого inline-flex: он отменяет собственный line-box кнопки, и тогда высоту
«таблетки» задаёт сама буква — крупная A делала кнопку выше соседних.
Обычный inline-block: высоту держит line-height кнопки, буква вписывается внутрь. */
/* Ширина фиксированная, а не min-width с меньшими полями: горизонтальный padding
у .topic-sort-btn задан в home.blade.php, а его