/* Explorer v2 base styles — minimalist, matches the v1 site's slate palette. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Palette mirrors the upstream v1 stylesheet */
    --color-primary-50:  #f8fafc;
    --color-primary-100: #f1f5f9;
    --color-primary-200: #e2e8f0;
    --color-primary-500: #434B78;
    --color-primary-600: #363c63;
    --color-primary-700: #2a2f50;
    --color-primary-800: #1f2340;  /* darkest slate — continues the 50→700 scale */

    --color-accent-50:  #f8fafc;
    --color-accent-100: #f1f5f9;
    --color-accent-500: #475569;
    --color-accent-600: #334155;
    --color-accent-700: #1e293b;

    --color-secondary-100: #f1f5f9;
    --color-secondary-700: #334155;

    --color-success-50:  #f0fdf4;
    --color-success-500: #059669;
    --color-success-700: #047857;

    --color-error-50:  #fef2f2;
    --color-error-500: #dc2626;

    /* Danger family — the red used for destructive actions.
       danger-500 was referenced via inline fallback before it existed. */
    --color-danger-500: #dc2626;

    /* Brand blues (shared with index.html). Used where we want the action to
       read as "primary", not green-for-success.
       Repointed to the Apex Talent brand family (apex-talent.org). */
    --brand-blue: #434B78;
    --brand-navy: #1a1d36;
    --brand-blue-50:  #eef0f8;
    --brand-blue-700: #2c315e;

    /* Apex Talent brand tokens — parent-org palette. */
    --at-navy: #1a1d36;  --at-ink: #434B78;  --at-muted: #7880b0;
    --at-cream: #EDEAE0; --at-warm: #E2DFD5; --at-green: #5BF55B;

    --color-gray-50:  #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;

    --bg-primary:   #FBFAF7;
    --bg-secondary: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --border-color: #e2e8f0;

    /* The per-domain jewel-tone palette that used to live here is gone with the
       6-bucket domain taxonomy. Its only consumers were the .topic-subject-*
       rules below, which no code ever emitted a class for — so every --dom-a/
       --dom-b reference now resolves to its --color-primary-* fallback. */

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    --font-sans: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'SF Mono', 'JetBrains Mono', 'Cascadia Code', 'Roboto Mono', monospace;
    /* Apex Talent display face — wordmark + major headings only. */
    --font-display: 'Unbounded', 'DM Sans', system-ui, sans-serif;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);

    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-pill: 999px;  /* canonical pill radius (was raw 999px ~21×) */

    --transition-fast: 100ms ease-out;
    --transition-base: 150ms ease-out;
    --transition-slow: 200ms ease-out;
}

html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    transition: background-color var(--transition-base), color var(--transition-base);
}
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, select { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ── Header ──────────────────────────────────────────────────────────── */
.site-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    position: sticky; top: 0; z-index: 40;
}
.site-header-inner {
    max-width: 1280px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
}
/* Wordmark — matches v0 typographically (Computer Modern small-caps), so
   the brand reads as one family across v0/v3 pages. */
.site-brand {
    display: flex; align-items: center;
    gap: 7px;
    text-decoration: none;
    color: var(--at-navy);
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}
.site-brand:hover { color: var(--at-ink); }
/* Let the globe keep its aspect ratio — fixing height and letting width
   flow prevents the squished-square look of v3's old 28×28 box. */
.site-brand img { height: 22px; width: auto; }
.site-nav-links { display: flex; gap: var(--space-md); align-items: center; }
.site-nav-links a, .nav-btn {
    color: var(--text-secondary); font-size: 0.875rem; text-decoration: none;
    padding: 6px 12px; border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: all var(--transition-fast);
}
.nav-btn { border-color: var(--border-color); }
.nav-btn:hover, .site-nav-links a:hover { color: var(--text-primary); background: var(--color-gray-100); }

/* ── Views ───────────────────────────────────────────────────────────── */
.view { padding: var(--space-lg) 0 var(--space-2xl); }
/* Page gutters — restored in v3 so content breathes from the window edges.
   Tighter on mobile so small screens keep their horizontal real estate. */
.view-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}
@media (max-width: 640px) {
    .view-inner { padding: 0 var(--space-md); }
}

/* ── Landing hero ────────────────────────────────────────────────────── */
/* Compact value-prop block above the tabs. No background, no CTA. */
.landing-hero {
    max-width: 720px;
    padding: var(--space-2xl) 0 var(--space-lg);
}
.landing-hero .hero-title {
    font-family: var(--font-display);
    color: var(--at-navy);
    font-size: clamp(1.625rem, 4.5vw, 2.125rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    font-weight: 700;
    margin: 0;
    text-wrap: balance;
}
.landing-hero .hero-sub {
    color: var(--color-gray-600);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 56ch;
    margin-top: var(--space-md);
}
@media (max-width: 640px) {
    .landing-hero {
        max-width: 100%;
        padding: var(--space-lg) 0 var(--space-md);
    }
}

.btn-back {
    padding: 6px 12px; border-radius: var(--radius-md);
    border: 1px solid var(--border-color); background: var(--bg-secondary);
    font-size: 0.875rem; color: var(--text-primary);
    transition: all var(--transition-fast);
}
.btn-back:hover { background: var(--color-gray-100); }

.btn-copy-latex {
    padding: var(--space-sm) var(--space-md);
    border: 2px solid var(--color-primary-500);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--color-primary-600);
    cursor: pointer; font-weight: 600; font-size: 0.875rem;
    transition: all var(--transition-base);
    display: inline-flex; align-items: center; gap: var(--space-xs);
}
.btn-copy-latex.compact { padding: 4px 10px; font-size: 0.8125rem; border-width: 1px; }
.btn-copy-latex:hover { background: var(--color-primary-50); }

.answer-box {
    margin-top: var(--space-md); padding: var(--space-md);
    background: var(--color-primary-50); border-left: 3px solid var(--color-primary-500);
    border-radius: var(--radius-md);
}

/* Solution tabs (used inline and in detail) */
.solution-tabs {
    display: flex; gap: var(--space-sm); margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color); padding-bottom: var(--space-xs);
    flex-wrap: wrap;
}
.solution-tab {
    padding: var(--space-xs) var(--space-md); background: transparent; border: none;
    cursor: pointer; font-weight: 600; color: var(--text-secondary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    transition: all var(--transition-base); position: relative;
    font-size: 0.875rem;
}
.solution-tab:hover { background: var(--bg-primary); color: var(--text-primary); }
.solution-tab.active { color: var(--color-primary-600); background: var(--color-primary-50); }
.solution-tab.active::after {
    content: ''; position: absolute;
    bottom: calc(-1 * var(--space-xs) - 1px); left: 0; right: 0; height: 2px;
    background: var(--color-primary-600);
}
.solution-content { display: none; }
.solution-content.show { display: block; animation: fadeIn var(--transition-base); }

/* ── Detail view ─────────────────────────────────────────────────────── */
.detail-inner { max-width: 880px; }
/* List view column mirrors the detail view — same narrow reading width,
   same side gutters, so switching between list and detail feels continuous. */
.list-inner { max-width: 880px; }
.problem-card-detail {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
}
.problem-nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    gap: var(--space-sm); flex-wrap: wrap;
}
.nav-buttons { display: flex; gap: var(--space-xs); align-items: center; }
.btn-nav {
    padding: 5px 12px;
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    background: var(--bg-secondary); color: var(--text-primary);
    cursor: pointer; font-weight: 500;
    transition: all var(--transition-base); font-size: 0.82rem;
}
.btn-nav:hover:not(:disabled) { background: var(--bg-primary); border-color: var(--color-primary-500); }
.btn-nav:disabled { opacity: 0.5; cursor: not-allowed; }
.problem-counter { font-size: 0.82rem; color: var(--text-secondary); font-weight: 500; }
/* Quiet "back" — secondary escape, not a primary action. */
.btn-nav-back { background: transparent; border-color: transparent; }
.btn-nav-back:hover:not(:disabled) { background: var(--bg-secondary); border-color: var(--border-color); }
/* Prev/Next segmented around the counter — one grouped control. */
.nav-steps {
    flex-wrap: nowrap;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}
.nav-steps .problem-counter { padding: 0 var(--space-xs); white-space: nowrap; }
.nav-steps .btn-step { border-color: transparent; background: transparent; padding: 4px 10px; }
.nav-steps .btn-step:hover:not(:disabled) { background: var(--bg-primary); border-color: var(--color-primary-500); }
.nav-actions { flex-wrap: wrap; }

.problem-header {
    padding: var(--space-md) var(--space-md) var(--space-sm);
    border-bottom: 1px solid var(--border-color);
    display: flex; align-items: flex-start; gap: var(--space-md);
}
.problem-header-left { flex: 1; min-width: 0; }
.problem-title {
    font-size: 1.25rem; font-weight: 700; color: var(--text-primary);
    margin-bottom: 4px; line-height: 1.3;
}
.problem-subtitle { color: var(--color-gray-600); font-size: 0.95rem; margin-top: 0; margin-bottom: var(--space-sm); }
.problem-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.meta-badge {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    padding: 2px 8px;
    background: var(--color-gray-100); border-radius: var(--radius-md);
    font-size: 0.75rem; font-weight: 500; color: var(--text-secondary);
}
/* Interactive variant — reads as a small clickable chip while staying flush
   with its non-link siblings in the meta row. */
.meta-badge--link {
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.meta-badge--link:hover {
    background: var(--color-primary-100);
    border-color: var(--color-primary-500);
    color: var(--color-primary-700);
}
.meta-badge--link:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

/* Problem body / content in detail view */
.problem-body {
    padding: var(--space-md);
}
.problem-content {
    font-size: 0.98rem; line-height: 1.65; color: var(--text-primary);
}
.problem-content p { margin-bottom: var(--space-sm); }
.problem-content p:last-child { margin-bottom: 0; }
.problem-content img { max-width: 100%; height: auto; margin: 0.5rem 0; border-radius: var(--radius-md); }
.problem-content-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--space-sm);
}
.problem-content-header h3 { margin: 0; font-size: 0.78rem; font-family: var(--font-sans);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.problem-content-actions { display: inline-flex; align-items: center; gap: 6px; }

/* Problem-box toolbar: two icon-sized actions (Report issue / Propose solution)
   tucked flush to the bottom-right of the problem statement. Doesn't reserve
   a new row; no hover glow until the user actually points at them. */
.problem-toolbar {
    display: flex; justify-content: flex-end; gap: 4px;
    margin-top: var(--space-sm);
}
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 26px; padding: 0 8px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: transparent; color: var(--color-gray-500);
    cursor: pointer; transition: all var(--transition-fast);
    font: inherit;
}
.icon-btn:hover { color: var(--text-primary); border-color: var(--border-color); background: var(--bg-secondary); }
.icon-btn-label { font-size: 0.8rem; line-height: 1; }

/* Related topics */
.topics-section {
    padding: var(--space-md);
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
}
.topics-header {
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}
.topics-grid { display: flex; flex-direction: column; gap: 4px; }
.topic-item {
    display: flex; align-items: center;
    padding: 5px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: left;
    width: 100%;
}
.topic-item:hover {
    border-color: color-mix(in srgb, var(--dom-a, var(--color-primary-500)) 60%, var(--border-color));
    background: color-mix(in srgb, var(--dom-a, var(--color-primary-500)) 6%, var(--bg-secondary));
}
.topic-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 0.82rem; }
.topic-level { padding: 1px 7px; border-radius: var(--radius-sm); font-weight: 500; }
/* Level-0 = subject: solid gradient pill from the jewel-tone palette.
   Levels 1+ = progressively lighter tints of the same subject color,
   so a topic path reads as a shaded breadcrumb instead of rainbow noise. */
.topic-level-0 {
    background: linear-gradient(135deg, var(--dom-a, var(--color-primary-600)), var(--dom-b, var(--color-primary-700)));
    color: #fff;
}
.topic-level-1 {
    background: color-mix(in srgb, var(--dom-a, var(--color-primary-500)) 22%, transparent);
    color: color-mix(in srgb, var(--dom-a, var(--color-primary-700)) 85%, var(--text-primary));
}
.topic-level-2 {
    background: color-mix(in srgb, var(--dom-a, var(--color-primary-500)) 12%, transparent);
    color: color-mix(in srgb, var(--dom-a, var(--color-primary-700)) 65%, var(--text-primary));
}
.topic-level-3 {
    background: color-mix(in srgb, var(--dom-a, var(--color-primary-500)) 6%, transparent);
    color: var(--text-secondary);
}
.topic-separator { color: var(--text-secondary); font-weight: 400; opacity: 0.5; }

/* Solutions section in detail view — the Show Solutions button is the
   primary next action on this page, so it's styled as a full CTA: solid
   gradient, generous padding, rounded, lifted off the card with margin and
   a soft shadow. Collapsed state uses the green palette; hover darkens. */
.detail-disclosure-section {
    border-top: 1px solid var(--border-color);
    padding: var(--space-md);
    background: var(--bg-primary);
}
.solutions-toggle {
    width: 100%; padding: 0.85rem 1.2rem;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-navy));
    border: none; border-radius: var(--radius-lg);
    cursor: pointer; font-size: 1rem; font-weight: 700;
    color: #fff; letter-spacing: 0.01em;
    transition: transform var(--transition-fast), box-shadow var(--transition-base), filter var(--transition-fast);
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-blue) 30%, transparent),
                0 1px 2px rgba(0, 0, 0, 0.04);
}
.solutions-toggle:hover {
    filter: brightness(1.05);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--brand-blue) 40%, transparent),
                0 2px 4px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}
.solutions-toggle:active { transform: translateY(0); filter: brightness(0.96); }
/* Expanded state: subtler — the solution content is now showing, so the
   button should recede. Switch to an outlined style. */
.solutions-toggle.is-open {
    background: var(--bg-secondary);
    color: var(--brand-blue-700);
    border: 1.5px solid var(--brand-blue);
    box-shadow: none;
}
.solutions-toggle.is-open:hover {
    background: var(--brand-blue-50);
    filter: none;
    box-shadow: none;
    transform: none;
}
.solutions-content { display: none; padding: var(--space-md) 0 0; }
.solutions-content.visible { display: block; animation: fadeIn var(--transition-base); }
.solution-detail-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--space-sm); gap: var(--space-sm);
}
.solution-detail-title {
    margin: 0; font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.solution-content-wrap {
    padding: var(--space-md);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    font-size: 0.98rem; line-height: 1.65;
}
.solution-content-wrap img { max-width: 100%; height: auto; margin: 0.5rem 0; border-radius: var(--radius-md); }
.solution-content-wrap p { margin-bottom: var(--space-sm); }


/* ── Markdown tables ─────────────────────────────────────────────────── */
.markdown-table {
    border-collapse: collapse; width: 100%; margin: 1rem 0;
    font-size: 0.95rem;
}
.markdown-table th, .markdown-table td {
    border: 1px solid var(--border-color); padding: 6px 12px; text-align: left;
}
.markdown-table th { background: var(--color-gray-100); font-weight: 600; }
/* Headerless grid (js/markdown.js: an all-empty header row) — a printed number
   figure, not a data table: sized to its cells, not the column, with square-ish
   centred cells so a blank cell still reads as a cell. A board wider than the
   column (a 16×16 on a phone) scrolls sideways in its own box instead of being
   clipped by the card. */
.markdown-grid { width: auto; display: block; max-width: 100%; overflow-x: auto; }
.markdown-grid td {
    min-width: 2.25em; height: 2.25em; padding: 4px 8px;
    text-align: center; font-variant-numeric: tabular-nums;
}

/* ── Toast ───────────────────────────────────────────────────────────── */
.toast-container {
    position: fixed; bottom: var(--space-md); left: 50%; transform: translateX(-50%);
    z-index: 100; display: flex; flex-direction: column; gap: var(--space-xs); pointer-events: none;
}
.toast {
    background: var(--color-gray-800); color: white;
    padding: 10px 16px; border-radius: var(--radius-md); font-size: 0.88rem;
    box-shadow: var(--shadow-lg); pointer-events: auto;
    animation: toast-in 180ms ease-out;
}

/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Misc */
.btn-primary {
    padding: 10px 18px; background: var(--color-primary-500); color: white;
    border-radius: var(--radius-md); font-weight: 600; font-size: 0.92rem;
    border: none; transition: background var(--transition-fast);
}
.btn-primary:hover { background: var(--color-primary-600); }
.link-btn {
    color: var(--text-secondary); text-decoration: underline; font-size: 0.82rem;
    padding: 0; background: transparent; border: 0;
}
.link-btn:hover { color: var(--text-primary); }
.empty-state {
    padding: var(--space-2xl); text-align: center; color: var(--text-secondary);
    font-size: 0.9375rem;
}
.empty-state-title {
    font-size: 1.05rem; font-weight: 600; color: var(--text-primary);
    margin-bottom: var(--space-xs);
}
.empty-state-hint {
    color: var(--text-secondary); font-size: 0.875rem;
    margin: 0 auto var(--space-md); max-width: 40ch;
}
.empty-state-clear {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem; font-weight: 500; cursor: pointer;
    transition: all var(--transition-fast);
}
.empty-state-clear:hover {
    background: var(--color-primary-100);
    border-color: var(--color-primary-500);
    color: var(--color-primary-700);
}
.site-footer {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    color: var(--at-muted);
    font-size: 0.8rem; line-height: 1.4;
    border-top: 1px solid var(--at-warm);
    background: var(--at-cream);
}
.site-footer a,
.site-footer-link { color: var(--at-ink); }
.site-footer-dot { color: var(--at-warm); }
.site-footer-link {
    font: inherit; color: var(--at-ink);
    text-decoration: underline; text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, var(--at-ink) 35%, transparent);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.site-footer-link:hover {
    color: var(--at-navy);
    text-decoration-color: var(--at-ink);
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .filters-bar { gap: var(--space-sm); }
    .filter-year { min-width: 0; flex-basis: 100%; padding: 0; }
    .list-title { font-size: 1rem; }
    .problem-title { font-size: 1.25rem; }
    /* Landing tabs wrap so "Задача дня" can't get hidden in the overflow
       scroll at 360px. (audit §4.4) */
    .tabs { flex-wrap: wrap; }
    /* Subtopic strip over-indented via calc(12px + 82px); on mobile the parent
       chips already wrap to the start, so drop the big left inset. (audit §4.4) */
    .filter-subtopic-strip { padding-left: 12px; }
}

/* ── Touch targets (audit §4.4) ───────────────────────────────────────────
   On coarse pointers, expand small controls to a ~44px hit area without
   ballooning the visible glyph — done with min-size + padding, and a
   negative margin so the bigger pill-remove doesn't disturb its layout. */
@media (pointer: coarse) {
    .active-filter-pill-remove {
        min-width: 44px; min-height: 44px;
        margin: -13px -13px -13px 0;  /* keep visual box ~18px, expand hit area */
    }
    .icon-btn  { min-height: 44px; padding: 0 12px; }
    .year-mode-btn {
        min-height: 44px;
        display: inline-flex; align-items: center;
        padding-top: 0; padding-bottom: 0;
    }
}

/* ── Citation / Source block (detail view, always visible) ───────────── */
.citation-block {
    padding: var(--space-sm) var(--space-md) var(--space-md);
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
}
.citation-header {
    display: flex; align-items: baseline; gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.citation-header-label {
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.citation-source-badge {
    font-weight: 600; color: var(--text-primary); font-size: 0.85rem;
}
.citation-body {
    display: grid; grid-template-columns: auto 1fr;
    gap: 3px 10px;
    font-size: 0.82rem;
    line-height: 1.45;
}
.citation-row { display: contents; }
.citation-field-label {
    color: var(--text-secondary); font-weight: 600;
    text-align: right; padding-right: 4px;
    white-space: nowrap;
}
.citation-field-value { color: var(--text-primary); }

/* ── Copy-confirm state (audit §4.7) ──────────────────────────────────────
   A toggleable success state so JS flips a class instead of mutating inline
   style. The copy buttons don't all share a `.btn` class, so target each. */
.btn.is-copied,
.btn-copy-latex.is-copied,
.btn-share.is-copied {
    background: var(--color-success-500);
    border-color: var(--color-success-500);
    color: #fff;
}
.btn.is-copied:hover,
.btn-copy-latex.is-copied:hover,
.btn-share.is-copied:hover {
    background: var(--color-success-700);
    border-color: var(--color-success-700);
    color: #fff;
}

/* Caution notice atop revealed answer/solutions: the printed book errs here. */
.editorial-note {
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    border-left: 3px solid var(--color-error-500);
    border-radius: var(--radius-md);
    background: rgba(220, 38, 38, 0.08);
    color: #8f1d1d;
    font-size: 0.85rem; line-height: 1.5;
}
.editorial-note-label {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--color-error-500);
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
}
.editorial-note-body {
    line-height: 1.5;
    overflow-x: auto;
}

/* ── Answer reveal (disclosure above the solutions toggle) ────────────────
   A lighter secondary button; content hidden until `.visible`. */
.answer-reveal { margin-bottom: var(--space-sm); }
.answer-reveal-toggle {
    width: 100%;
    padding: 0.6rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-weight: 600; font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.answer-reveal-toggle:hover {
    border-color: var(--color-primary-500);
    color: var(--text-primary);
    background: var(--bg-primary);
}
.answer-reveal-content {
    display: none;
    margin-top: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-primary-50);
    border-left: 3px solid var(--color-primary-500);
    border-radius: var(--radius-md);
    font-size: 0.95rem; line-height: 1.6;
    color: var(--text-primary);
}
.answer-reveal.visible .answer-reveal-content { display: block; animation: fadeIn var(--transition-base); }

/* ── Detail breadcrumb (above problem header) ─────────────────────────────
   Thin row of links separated by ›; muted, wraps on mobile. */
.detail-breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    padding: var(--space-sm) var(--space-md) 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.detail-breadcrumb .breadcrumb-link {
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: var(--text-secondary);
    cursor: pointer; border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}
.detail-breadcrumb .breadcrumb-link:hover { color: var(--text-primary); text-decoration: underline; }
.detail-breadcrumb .breadcrumb-link:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
.detail-breadcrumb-sep { color: var(--color-gray-400); user-select: none; }

/* ── Problem figure (image with zoom) ─────────────────────────────────────*/
.problem-figure { margin: var(--space-md) 0; text-align: center; }
.problem-figure img {
    max-height: 60vh; max-width: 100%; height: auto;
    cursor: zoom-in;
    border-radius: var(--radius-md);
}
.figure-unavailable {
    padding: var(--space-lg);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem; font-style: italic;
    background: var(--bg-primary);
}
.figure-zoom-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    cursor: zoom-out;
    padding: var(--space-md);
}
.figure-zoom-overlay[hidden] { display: none !important; }
.figure-zoom-overlay img { max-width: 95vw; max-height: 95vh; }

/* ── Reduced motion (audit §4.4) ──────────────────────────────────────────
   Neutralize transitions/animations and the transform-based hover lifts. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
    .source-card:hover,
    .comp-card:hover,
    .solutions-toggle:hover { transform: none; }
}

/* ── Print stylesheet (audit §4.5/§7) ─────────────────────────────────────
   Hide chrome, force white/black, keep statements together. Solutions do not
   print. */
@media print {
    body { background: #fff; color: #000; }
    .site-header,
    .site-footer,
    .filters-bar,
    .active-filters,
    .filter-topic-strip,
    .filter-subtopic-strip,
    .filter-competition-strip,
    .pagination,
    .problem-nav,
    .problem-toolbar,
    .translation-badge,
    .announcement-banner,
    [class*="btn-"],
    .icon-btn {
        display: none !important;
    }
    .problem-card-detail,
    .problem-item { box-shadow: none; border-color: #ccc; }
    .problem-content,
    .problem-item-body {
        page-break-inside: avoid;
        break-inside: avoid;
        color: #000;
    }
    /* Solutions do not print. */
    .solutions-content { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTON SYSTEM (audit §4.7) — consolidation layer.

   The codebase grew ~13 near-duplicate one-off button classes. Markup/JS are
   frozen here, so rather than add a `.btn` class to elements we fold the
   existing selectors into shared, grouped rules. These rules live at the end
   of the file so — at equal specificity (single class) — they win the cascade
   over the scattered originals for the properties we deliberately unify, while
   each one-off keeps its essential SIZE role (it set its own padding/height,
   which we don't touch here unless we mean to).

   Three treatments:
     • base (.btn)        — shared mechanics every button shares.
     • ghost              — neutral outline / quiet secondary actions.
     • accent             — brand-blue solid CTAs (primary next action).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Base: shared mechanics ──────────────────────────────────────────────
   inline-flex centring, gap, weight, transition, pointer, focus ring,
   disabled. Folds in every listed one-off. We intentionally do NOT set
   padding/height/border-radius here so each button keeps its size role. */
.btn,
.btn-back, .btn-nav, .btn-view-problem, .btn-view-solution, .btn-view-source,
.btn-share, .btn-copy-latex, .btn-primary, .icon-btn,
.nav-btn, .year-mode-btn, .solutions-toggle,
.empty-state-clear, .filter-year-reset,
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.btn:focus-visible,
.btn-back:focus-visible, .btn-nav:focus-visible, .btn-view-problem:focus-visible,
.btn-view-solution:focus-visible, .btn-view-source:focus-visible,
.btn-share:focus-visible, .btn-copy-latex:focus-visible,
.btn-primary:focus-visible, .icon-btn:focus-visible,
.nav-btn:focus-visible, .year-mode-btn:focus-visible, .solutions-toggle:focus-visible,
.empty-state-clear:focus-visible, .filter-year-reset:focus-visible,
.theme-toggle:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}
.btn:disabled,
.btn-nav:disabled, .btn-view-problem:disabled, .btn-view-solution:disabled,
.btn-primary:disabled, .solutions-toggle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Default padding / radius shared by the standard-size action buttons.
   Size-role buttons (.icon-btn, .year-mode-btn, .solutions-toggle, the
   .btn-copy-latex.compact variant) are excluded so they keep
   their own geometry. */
.btn,
.btn-back, .btn-nav, .btn-view-problem, .btn-view-solution, .btn-view-source,
.btn-share, .empty-state-clear {
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
}
.btn--sm { padding: 4px 10px; font-size: 0.8125rem; }
/* A text button that previously had no CSS of its own (theme toggle in the
   header). Folded onto the standard footprint + ghost treatment so it matches
   the rest of the system. The About modal's close left this group when it
   became the ✕ dismiss control. */
.theme-toggle {
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
}

/* ── Ghost treatment: neutral outline, quiet secondary actions ───────────
   The ~5 near-identical neutral-outline buttons called out by the audit
   (.btn-back, .btn-nav, .btn-view-source, .btn-share) now
   share ONE ghost look, joined by the other neutral secondaries
   (.btn-view-problem, .empty-state-clear). Same gesture →
   same feedback. */
.btn--ghost,
.btn-back, .btn-nav, .btn-view-source, .btn-share,
.btn-view-problem, .empty-state-clear,
.theme-toggle {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 500;
}
.btn--ghost:hover,
.btn-back:hover, .btn-nav:hover:not(:disabled), .btn-view-source:hover,
.btn-share:hover, .btn-view-problem:hover,
.empty-state-clear:hover,
.theme-toggle:hover {
    background: var(--color-primary-50);
    border-color: var(--color-primary-500);
    color: var(--color-primary-700);
}

/* ── Accent treatment: brand-blue solid CTAs (primary next action) ───────
   Routes the main CTAs through one treatment: .solutions-toggle and
   .btn-primary, plus the in-card primary (.btn-view-solution).
   .solutions-toggle keeps its full-width gradient
   below; here we set the shared solid-fill identity for the rest. */
.btn--accent,
.btn-primary, .btn-view-solution {
    background: var(--brand-blue);
    border: 1px solid var(--brand-blue);
    color: #fff;
    font-weight: 600;
}
.btn--accent:hover,
.btn-primary:hover, .btn-view-solution:hover {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
    filter: none;
}

/* ── Size-role preservation overrides ────────────────────────────────────
   Re-assert the geometry the base/treatment groups must not flatten. */
/* Icon button stays icon-sized + ultra-quiet (transparent until hover). */
.icon-btn {
    height: 26px; padding: 0 8px; gap: 6px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: transparent; color: var(--color-gray-400);
    font-weight: 500;
}
.icon-btn:hover { color: var(--text-primary); border-color: var(--border-color); background: var(--bg-secondary); }
/* Segmented-toggle button: compact, pill, no border, transparent ground. */
.year-mode-btn {
    padding: 2px 8px; border: none; background: transparent;
    border-radius: var(--radius-pill);
    font-size: 0.7rem; font-weight: 600; color: var(--text-secondary);
}
/* Compact copy-LaTeX variant keeps its tight footprint. */
.btn-copy-latex { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); }
.btn-copy-latex.compact { padding: 4px 10px; font-size: 0.8125rem; }
/* Quiet borderless text buttons keep their pill/no-chrome look. */
.filter-year-reset {
    padding: 2px 6px; border: none; background: transparent;
    border-radius: var(--radius-pill);
    font-size: 0.7rem; font-weight: 600; color: var(--text-secondary);
}
.filter-year-reset:hover { color: var(--text-primary); background: var(--color-primary-100); }
/* Full-width solutions CTA stays block-flex so it spans the card; its gradient
   identity, padding and is-open outline state are defined in §Detail above. */
.solutions-toggle { display: flex; width: 100%; }
/* Nav links/buttons keep their light footprint (padding/radius from §Header). */
.nav-btn { padding: 6px 12px; border-radius: var(--radius-md); font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════════════
   CHIP / PILL SYSTEM (audit §4.7) — consolidation layer.

   Same approach as buttons: the chip/pill family had no shared base and the
   "selected" state spoke two languages. We fold the existing classes into a
   shared `.chip` base (pill radius, shared sizing, tabular numerals for
   counts) and STANDARDISE the selected state on the jewel-tone gradient idiom.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Chip base: shared shape + mechanics ─────────────────────────────────
   Pill radius, inline-flex centring, shared gap, transition. Size/colour
   roles stay with each variant below. */
.chip,
.stat-pill, .active-filter-pill, .topic-chip-filter, .subtopic-chip,
.competition-chip, .meta-badge, .translated-only-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--radius-pill);
    line-height: 1.2;
    transition: all var(--transition-base);
}
/* Counts render with tabular numerals so digits don't jitter as values change. */
.chip__count,
.topic-chip-count, .subtopic-chip-count, .topic-subject-count,
.tree-node-count, .stat-pill {
    font-variant-numeric: tabular-nums;
}

/* The .stat-pill predates the radius system with a rectangular radius; bring
   it onto the pill idiom so list-header counts match the rest of the family. */
.stat-pill { padding: 4px 10px; }

/* ── Unified selected state (audit §4.7) ─────────────────────────────────
   Before: .competition-chip.is-active was a flat slate fill while
   .topic-chip-filter.is-active was a jewel-tone gradient — two "selected"
   languages in one filter bar. Standardise BOTH filter strips on the
   jewel-tone gradient idiom. The competition strip carries no --dom-* tokens,
   so it falls back to the primary-slate gradient stops (same SHAPE of
   treatment: gradient fill, white text, transparent border, weight 600). */
.competition-chip.is-active {
    background: linear-gradient(135deg,
        var(--dom-a, var(--color-primary-600)),
        var(--dom-b, var(--color-primary-700)));
    color: #fff;
    border-color: transparent;
    font-weight: 600;
}
.competition-chip.is-active:hover {
    background: linear-gradient(135deg,
        var(--dom-a, var(--color-primary-700)),
        var(--dom-b, var(--color-primary-800)));
    border-color: transparent;
    filter: brightness(1.05);
}