/*
 * JusPrep: основа оформления для всех страниц (шрифт, цвета, шапка, общие блоки).
 * Подключается последним в <head>, поэтому перекрывает встроенные стили страниц.
 */

@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }

:root {
    --jp-ink: #121a2b;
    --jp-text: #1f2737;
    --jp-muted: #444e60;
    --jp-navy: #1e3a8a;
    --jp-navy-hover: #172f73;
    --jp-tint: #eef2fa;
    --jp-paper: #ffffff;
    --jp-shade: #f4f6fa;
    --jp-shadow: 0 1px 2px rgba(18, 26, 43, 0.05), 0 6px 20px rgba(18, 26, 43, 0.06);
    --jp-surface: #ffffff;
    --jp-line: #dce1e8;
    --jp-line-strong: #c5ccd8;
    --jp-ok: #1f7a4d;
    --jp-ok-bg: #eaf6ef;
    --jp-err: #b42318;
    --jp-err-bg: #fdeeec;
    --jp-gold: #f2b705;
    --jp-gold-deep: #c99400;
    --jp-gold-soft: #fff5d1;
    --jp-gold-ink: #6b4f00;
    --jp-r-sm: 6px;
    /* второй ряд цветов: по одному на раздел */
    --c-teal: #0f766e;   --c-teal-bg: #e3f3f0;
    --c-violet: #6d28d9; --c-violet-bg: #efe8fd;
    --c-orange: #c2410c; --c-orange-bg: #fdece3;
    --c-green: #15803d;  --c-green-bg: #e5f4ea;
    --c-sky: #0369a1;    --c-sky-bg: #e2f1fa;
    --c-rose: #be123c;   --c-rose-bg: #fce8ed;
    --c-indigo: #4338ca; --c-indigo-bg: #ebeafd;
    --jp-r: 10px;
    --jp-font: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif;

    /* старые переменные страниц указывают на новую палитру */
    --bg: var(--jp-paper);
    --surface: var(--jp-surface);
    --border: var(--jp-line);
    --primary: var(--jp-navy);
    --primary-hover: var(--jp-navy-hover);
    --primary-light: var(--jp-tint);
    --text: var(--jp-ink);
    --muted: var(--jp-muted);
}

html { -webkit-text-size-adjust: 100%; }

/* <i> не трогаем: в них иконки Font Awesome со своим шрифтом */
body,
body *:not(i) {
    font-family: var(--jp-font) !important;
}

body {
    background: var(--jp-paper) !important;
    color: var(--jp-ink);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--jp-ink); letter-spacing: -0.01em; }
strong, b { font-weight: 600; }

:focus-visible {
    outline: 2px solid var(--jp-navy) !important;
    outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===================== Шапка сайта и общие блоки ===================== */

.jp-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1360px;
    margin: 0 auto;
    padding: 18px clamp(16px, 4vw, 48px);
    border-bottom: 1px solid var(--jp-line);
}
.jp-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--jp-ink);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
}
.jp-mark {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--jp-r-sm);
    background: var(--jp-navy);
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}
.jp-toplink {
    color: var(--jp-muted);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}
.jp-toplink:hover { color: var(--jp-navy); }

.jp-wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding: 40px clamp(16px, 4vw, 48px) 72px;
}
.jp-wrap > h1 {
    margin: 0 0 12px;
    font-size: clamp(30px, 4.4vw, 40px);
    font-weight: 600;
    line-height: 1.15;
}
.jp-lead {
    max-width: 64ch;
    margin: 0 0 28px;
    color: var(--jp-muted);
    font-size: 18px;
    line-height: 1.6;
}
.jp-note {
    max-width: 72ch;
    margin: 0 0 36px;
    padding: 2px 0 2px 16px;
    border-left: 3px solid var(--jp-navy);
}
.jp-note p { margin: 0; color: var(--jp-text); font-size: 16px; line-height: 1.6; }

/* реестр отраслей права */
.jp-register {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--jp-surface);
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-r);
}
.jp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
    padding: 28px 28px;
}
.jp-row + .jp-row { border-top: 1px solid var(--jp-line); }
.jp-row h2 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}
.jp-row p {
    margin: 0;
    max-width: 60ch;
    color: var(--jp-muted);
    font-size: 16px;
    line-height: 1.5;
}
.jp-grades { display: flex; gap: 8px; }
.jp-grades a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--jp-line-strong);
    border-radius: var(--jp-r-sm);
    background: var(--jp-surface);
    color: var(--jp-navy);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.jp-grades a:hover {
    border-color: var(--jp-navy);
    background: var(--jp-navy);
    color: #fff;
}

.jp-foot {
    max-width: 1360px;
    margin: 0 auto;
    padding: 24px;
    border-top: 1px solid var(--jp-line);
    color: var(--jp-muted);
    font-size: 15px;
}

@media (max-width: 760px) {
    .jp-row { grid-template-columns: 1fr; gap: 14px; padding: 18px 16px; }
    .jp-grades a { flex: 1; min-width: 0; }
    .jp-top, .jp-wrap, .jp-foot { padding-left: 16px; padding-right: 16px; }
    .jp-wrap { padding-top: 28px; }
}


/* ===================== Жёлтые акценты ===================== */

/* метка класса и «Вопрос дня»: жёлтая плашка */
:root body .badge,
:root body .hero .badge,
:root body .qotd-label {
    display: inline-block !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    background: var(--jp-tint) !important;
    color: var(--jp-navy) !important;
}

/* заметки и советы: светло-синий фон, жёлтая полоса слева */
:root body .jp-note,
:root body .insight-banner {
    padding: 14px 18px !important;
    background: var(--jp-tint) !important;
    border-left: 4px solid var(--jp-navy) !important;
    border-radius: 0 var(--jp-r-sm) var(--jp-r-sm) 0 !important;
}

/* пояснение к ответу */
:root body .explanation-box,
:root body .qotd-expl {
    padding: 12px 16px !important;
    background: var(--jp-shade) !important;
    border-left: 4px solid var(--jp-navy) !important;
    border-radius: 0 var(--jp-r-sm) var(--jp-r-sm) 0 !important;
}

/* прогресс прохождения теста */
:root body .progress-bar-fill { background: var(--jp-navy) !important; }

/* строки списков: при наведении слева жёлтая полоса */
:root body .jp-row:hover,
:root body .card:hover,
:root body .length-card:hover,
:root body.jp-const .card:hover,
:root body.jp-sources .change-row:hover,
:root body.jp-digests .change-row:hover { box-shadow: inset 4px 0 0 var(--c, var(--jp-navy)) !important; }

/* выбранный язык и выбранный вариант ответа */

/* ===================== Белый фон: карточки с лёгкой тенью ===================== */
:root body .jp-register,
:root body .question-card,
:root body #menuScreen.cards-grid,
:root body .single-card-container,
:root body .jp-const .cards,
:root body .jp-const #modal-body,
:root body .qotd,
:root body .card,
:root body .block-card,
:root body .level-card,
:root body .card-box,
:root body .stat-card,
:root body .tcard,
:root body .jp-sources .changes,
:root body .jp-digests .changes,
:root body .auth-card,
:root body .plan-container { box-shadow: var(--jp-shadow) !important; }
:root body .jp-top { background: var(--jp-surface); }