/* Problempedia page styles, on top of design.css (the design system forked from Savchenko Solutions).
   The list rules (.pf-*) come from Savchenko Solutions' problem database, the problem page from its
   solution page, and the front page from its home page, all forked 2026-09-28.
   Tokens only: no gradients, var(--ss-shadow) only, radius at most 8px. */

/* Difficulty uses Savchenko Solutions' own ramp for ordered data, the heat scale in its
   js/palettes.js (ColorBrewer YlOrRd). Navy ink on the light steps, white on the dark ones. */
/* Fields take three of Savchenko Solutions' series colours (js/palettes.js SERIES, checked for colour
   vision): blue, purple and aqua. Its orange is left out, since orange already means difficulty here.
   All three carry white. The aqua is the series hue taken darker (#1baf7a at 30% lightness), since
   white on the original is 2.8:1 and navy on it looked wrong (the owner, 2026-10-03); this one is 4.7:1. */
:root {
  --pp-field-physics: #2a78d6;
  --pp-field-math: #7d3c98;
  --pp-field-cs: #15845b;
  --pp-field-physics-ink: #ffffff;
  --pp-field-math-ink: #ffffff;
  --pp-field-cs-ink: #ffffff;
  --pp-heat-1: #ffeda0;
  --pp-heat-2: #feb24c;
  --pp-heat-3: #fd8d3c;
  --pp-heat-4: #e31a1c;
  --pp-heat-5: #800026;
}

html, body { height: auto; }
body {
  display: flex; flex-direction: column; min-height: 100vh; margin: 0;
  font-family: var(--ss-font-ui); background: var(--ss-surface); color: var(--ss-text); line-height: 1.6;
}
body > footer { flex-shrink: 0; margin-top: auto; }
.pp-main { flex: 1 0 auto; }
.pp-skip { position: absolute; left: -9999px; }
.pp-skip:focus { left: var(--ss-space-4); top: var(--ss-space-2); z-index: 2000; background: var(--ss-surface); padding: var(--ss-space-2) var(--ss-space-3); border: 1px solid var(--ss-rule); border-radius: var(--ss-radius); }
.pp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pp-mono { font-family: var(--ss-font-mono); font-size: var(--ss-fs-13); }
.pp-select { user-select: all; font-family: var(--ss-font-mono); font-size: 0.9em; }
.pp-gap { margin-top: var(--ss-space-4); }

/* ---------------------------------------------------------------- header */

/* The wordmark falls back to SS Display, whose line box sits higher than Savchenko's own
   wordmark font. Where the tagline shows (the widths Bootstrap's d-sm-block d-lg-none d-xl-block
   give it), the pair is nudged so the title's top meets the logo's top edge and the tagline's
   baseline meets its bottom edge (measured at 4x, 2026-09-28). */
@media (min-width: 576px) and (max-width: 991.98px), (min-width: 1200px) {
  .hero-section .site-title { transform: translateY(-1.25px); }
  .hero-section .site-motto { transform: translateY(1.5px); }
}
.hero-section .logo-img { width: 40px; height: 40px; }
.hero-section .site-title { font-size: var(--ss-fs-24); }
.hero-section .site-motto { font-size: var(--ss-fs-14); margin-top: 0; }
@media (max-width: 575.98px) { .hero-section .logo-img { width: 34px; height: 34px; } .hero-section .site-title { font-size: 20px; } }
.header-upload-btn { display: inline-flex; align-items: center; gap: var(--ss-space-1); white-space: nowrap; }
.header-upload-btn .upload-icon { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.hero-section .navbar-nav .nav-link.active { color: var(--ss-navy); }
.pp-count {
  display: inline-block; min-width: 1.6em; padding: 0 5px; border-radius: var(--ss-radius-sm);
  background: var(--ss-navy); color: var(--ss-on-navy); font-size: var(--ss-fs-12); font-weight: var(--ss-fw-strong);
  line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums; vertical-align: 0.1em;
}
.pp-whoami { display: flex; align-items: center; gap: var(--ss-space-2); margin: 0; font-size: var(--ss-text-ui); color: var(--ss-text-secondary); }
.pp-mobile-search { padding: var(--ss-space-2) 0; }
.pp-mobile-search .form-control { min-height: var(--ss-control); font-size: var(--ss-text-input); }
@media (max-width: 991.98px) {
  .hero-section .navbar { position: relative; }
  .hero-section .navbar-collapse {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1030;
    background: var(--ss-surface); border-bottom: 1px solid var(--ss-rule); box-shadow: var(--ss-shadow);
  }
  .hero-section .navbar-collapse .navbar-nav { padding: var(--ss-space-2) var(--ss-space-6) var(--ss-space-4); gap: var(--ss-space-1); }
  .hero-section .navbar-collapse .btn { margin-top: var(--ss-space-1); }
}

/* ---------------------------------------------------------------- ledger (from the problem database) */

.pf-wrap { width: 100%; margin: 0; padding: var(--ss-space-2) var(--ss-space-2) var(--ss-space-6); box-sizing: border-box; }
.pf-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ss-space-2); margin-bottom: var(--ss-space-2); }
.pf-h1 { font-family: var(--ss-font-ui); font-size: var(--ss-fs-20); font-weight: var(--ss-fw-strong); color: var(--ss-navy); margin: 0 var(--ss-space-2) 0 0; }
.pf-method { margin-left: auto; font-size: var(--ss-fs-13); color: var(--ss-text-secondary); text-decoration: none; white-space: nowrap; }
.pf-method:hover { color: var(--ss-link); text-decoration: underline; }
.pf-records { display: contents; }
.pf-record-chip {
  font-size: var(--ss-fs-13); padding: var(--ss-space-1) var(--ss-space-3); border-radius: var(--ss-radius);
  border: 1px solid var(--ss-rule); background: var(--ss-surface-alt); color: var(--ss-link); text-decoration: none;
}
.pf-record-chip:hover { background: var(--ss-surface-hover); color: var(--ss-link-hover); }

.pf-layout { display: flex; gap: var(--ss-space-3); align-items: flex-start; }
.pf-filters {
  flex: 0 0 236px; border: 1px solid var(--ss-rule); border-radius: var(--ss-radius-lg); background: var(--ss-surface-alt);
  padding: var(--ss-space-3); position: sticky; top: 64px; max-height: calc(100vh - 72px); overflow-y: auto;
}
.pf-filter-group { margin-bottom: var(--ss-space-3); }
.pf-filter-group:last-child { margin-bottom: 0; }
.pf-filter-label { font-size: var(--ss-fs-12); font-weight: var(--ss-fw-strong); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ss-text-secondary); margin-bottom: var(--ss-space-2); }
.pf-search-input { height: 40px; width: 100%; border: 1px solid var(--ss-rule); border-radius: var(--ss-radius); padding: 0 var(--ss-space-3); font-size: var(--ss-fs-16); box-sizing: border-box; }
.pf-search-input:focus { outline: none; border-color: var(--ss-navy); }
@media (min-width: 768px) { .pf-search-form { display: none; } }
.pf-chapter-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--ss-rule-soft); border-radius: var(--ss-radius); padding: var(--ss-space-1) var(--ss-space-2); background: var(--ss-surface); }
.pf-clear-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; margin-top: var(--ss-space-4); height: 34px;
  border-radius: var(--ss-radius); border: 1px solid var(--ss-rule); background: var(--ss-surface); color: var(--ss-text-secondary);
  font-size: var(--ss-fs-13); text-decoration: none;
}
.pf-clear-btn:hover { background: var(--ss-surface-hover); color: var(--ss-text); }

/* Filter options are links (one choice per group), drawn as the database's checkbox rows. */
.pp-opts { display: flex; flex-direction: column; }
.pp-opt { display: flex; align-items: center; gap: var(--ss-space-2); padding: 3px 0; font-size: var(--ss-fs-13); color: var(--ss-text); text-decoration: none; line-height: 1.4; }
.pp-opt:hover { color: var(--ss-link); }
.pp-opt-mark { width: 14px; height: 14px; border: 1px solid var(--ss-rule-strong); border-radius: 50%; background: var(--ss-surface); flex-shrink: 0; }
.pp-opt.is-on .pp-opt-mark { border: 4px solid var(--ss-navy); }
.pp-opt.is-empty { color: var(--ss-text-tertiary); cursor: default; }
.pp-opt.is-empty:hover { color: var(--ss-text-tertiary); }
.pp-opt.is-empty .pp-opt-mark { border-color: var(--ss-rule); background: var(--ss-surface-alt); }
.pp-opt.is-on { font-weight: var(--ss-fw-strong); }
.pp-opt .n { margin-left: auto; color: var(--ss-text-secondary); font-size: var(--ss-fs-12); font-weight: var(--ss-fw-regular); font-variant-numeric: tabular-nums; }

.pf-results { flex: 1 1 auto; min-width: 0; }
.pf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ss-space-2) var(--ss-space-3); margin-bottom: var(--ss-space-2); font-size: var(--ss-fs-13); color: var(--ss-text-secondary); }
.pf-chips { display: contents; }
.pf-chip {
  display: inline-flex; align-items: center; gap: var(--ss-space-1); max-width: 100%;
  padding: 2px var(--ss-space-2) 2px var(--ss-space-3); border: 1px solid var(--ss-rule); border-radius: var(--ss-radius);
  background: var(--ss-surface-alt); color: var(--ss-text); font-size: var(--ss-fs-13); line-height: 1.6; text-decoration: none; overflow-wrap: anywhere;
}
.pf-chip span:first-child { color: var(--ss-text-secondary); }
.pf-chip:hover { border-color: var(--ss-navy); background: var(--ss-surface-hover); color: var(--ss-text); }
.pf-chip-x { color: var(--ss-text-secondary); font-size: var(--ss-fs-16); line-height: 1; }
.pf-chip:hover .pf-chip-x { color: var(--ss-error); }
.pf-sort { margin-left: auto; white-space: nowrap; display: flex; align-items: center; gap: var(--ss-space-2); margin-bottom: 0; }
.pf-sort-label { color: var(--ss-text-secondary); }
.pf-sort-select { height: 34px; border: 1px solid var(--ss-rule); border-radius: var(--ss-radius); padding: 0 var(--ss-space-2); font-size: var(--ss-fs-13); color: var(--ss-text); background: var(--ss-surface); }

.pf-card {
  border: 1px solid var(--ss-rule); border-left-width: 5px; border-radius: var(--ss-radius-lg); background: var(--ss-surface);
  padding: var(--ss-space-2) var(--ss-space-3); margin-bottom: var(--ss-space-2);
}
.pf-card-head { display: flex; align-items: center; gap: var(--ss-space-2); margin-bottom: var(--ss-space-1); flex-wrap: wrap; }
.pf-card-name { font-family: var(--ss-font-ui); font-weight: var(--ss-fw-strong); font-size: var(--ss-fs-16); color: var(--ss-link); text-decoration: none; }
a.pf-card-name:hover { color: var(--ss-link-hover); text-decoration: underline; }
.pf-card-tags { display: contents; }
.pf-card-tag {
  font-size: var(--ss-fs-12); padding: 2px var(--ss-space-2); border-radius: var(--ss-radius); border: 1px solid var(--ss-rule);
  background: var(--ss-surface-alt); color: var(--ss-text-secondary); white-space: nowrap; text-decoration: none; line-height: 1.5;
}
.pf-card-tag:hover { border-color: var(--ss-link); color: var(--ss-link); }
.pp-card-meta { display: flex; align-items: center; gap: var(--ss-space-3); margin-left: auto; font-size: var(--ss-fs-12); color: var(--ss-text-secondary); flex-wrap: wrap; }
.pf-card-statement { min-height: 1.4em; overflow-wrap: anywhere; overflow-x: auto; overflow-y: hidden; }
.pf-card-statement.ss-prose { max-width: none; }
.pf-card-statement p:last-child { margin-bottom: 0; }

.pf-empty { padding: var(--ss-space-8) var(--ss-space-4); text-align: center; color: var(--ss-text-secondary); font-size: var(--ss-fs-14); border: 1px solid var(--ss-rule); border-radius: var(--ss-radius-lg); }
.pf-empty p { margin: 0 auto var(--ss-space-2); max-width: 52ch; }
.pf-empty p:last-child { margin-bottom: 0; }
.pf-empty strong { color: var(--ss-text); font-size: var(--ss-fs-16); }
.pp-pager { display: flex; align-items: center; gap: var(--ss-space-2); margin-top: var(--ss-space-2); }
.pp-pager .pf-load-more { flex: 1; }
.pp-pager-at { font-size: var(--ss-fs-13); color: var(--ss-text-secondary); white-space: nowrap; padding: 0 var(--ss-space-2); }
.pf-load-more {
  display: flex; align-items: center; justify-content: center; height: 42px; border-radius: var(--ss-radius-lg);
  border: 1px solid var(--ss-rule); background: var(--ss-surface-alt); color: var(--ss-navy); font-size: var(--ss-fs-13); text-decoration: none;
}
.pf-load-more:hover { background: var(--ss-surface-hover); color: var(--ss-navy); }

@media (max-width: 900px) {
  .pf-layout { flex-direction: column; align-items: stretch; }
  .pf-filters { position: static; flex: 1 1 auto; max-height: none; width: 100%; box-sizing: border-box; }
  .pf-results { width: 100%; }
  .pf-wrap { padding: var(--ss-space-1) var(--ss-space-1) var(--ss-space-5); }
  .pf-card { padding: var(--ss-space-2); border-left-width: 4px; }
  .pp-card-meta { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 900px) and (min-width: 480px) {
  .pf-filters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ss-space-3); }
  .pf-filters .pf-filter-group { margin: 0; }
  .pf-filters .pf-search-form, .pf-filters .pp-clear { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- entry (from the solution page) */

.main-container {
  width: 100%; max-width: 1920px; margin: 0 auto; padding: var(--ss-space-4) var(--ss-space-4) var(--ss-space-9);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ss-space-6);
}
@media (min-width: 992px) {
  .main-container { padding: var(--ss-space-5) var(--ss-space-7) var(--ss-space-9); grid-template-columns: minmax(0, 1fr) clamp(240px, 18vw, 300px); gap: var(--ss-space-8); }
}
.content-section { min-width: 0; }
.content-section .ss-prose { max-width: 46em; }
.solution-head { padding-bottom: var(--ss-space-2); margin-bottom: var(--ss-space-3); border-bottom: 1px solid var(--ss-rule); }
.solution-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ss-space-2) var(--ss-space-4); }
.solution-title { margin: 0; }
.solution-actions { display: flex; gap: var(--ss-space-2); flex-wrap: wrap; }
.solution-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.pp-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ss-space-2) var(--ss-space-3); margin-top: var(--ss-space-2); }

.content-section .ss-statement { margin: 0 0 var(--ss-space-4); }
.ss-statement-note span { display: inline; }

.content-body { padding: 0; }
.pp-h2 { font-family: var(--ss-font-ui); font-size: var(--ss-fs-18); font-weight: var(--ss-fw-strong); color: var(--ss-heading); margin: var(--ss-space-7) 0 var(--ss-space-3); display: flex; align-items: center; gap: var(--ss-space-2); }
.pp-h3 { font-family: var(--ss-font-ui); font-size: var(--ss-fs-16); font-weight: var(--ss-fw-strong); margin: 0; }
.pp-rail { display: flex; flex-direction: column; gap: var(--ss-space-4); min-width: 0; }
.section-grid-card { background: var(--ss-surface); border-radius: var(--ss-radius-lg); padding: var(--ss-space-4); box-shadow: var(--ss-shadow); border: 1px solid var(--ss-rule); }
.section-grid-title { font-size: var(--ss-fs-14); color: var(--ss-text-secondary); margin-bottom: var(--ss-space-3); font-weight: var(--ss-fw-strong); line-height: 1.4; }
.pp-rail-text { font-size: var(--ss-fs-13); color: var(--ss-text); line-height: 1.5; margin: 0 0 var(--ss-space-2); overflow-wrap: anywhere; }
.pp-rail-text:last-child { margin-bottom: 0; }
.pp-related { list-style: none; margin: 0; padding: 0; }
.pp-related li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ss-space-2); padding: var(--ss-space-2) 0; border-bottom: 1px solid var(--ss-rule-soft); font-size: var(--ss-fs-13); }
.pp-related li:last-child { border-bottom: 0; }
.pp-related a { text-decoration: none; }
.pp-related a:hover { text-decoration: underline; }

.pp-facts { margin: 0; }
.pp-facts > div { display: flex; justify-content: space-between; align-items: center; gap: var(--ss-space-3); padding: 6px 0; border-bottom: 1px solid var(--ss-rule-soft); font-size: var(--ss-fs-13); }
.pp-facts > div:last-child { border-bottom: 0; }
.pp-facts dt { color: var(--ss-text-secondary); font-weight: var(--ss-fw-regular); }
.pp-facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- forms and simple pages */

.pp-form { display: flex; flex-direction: column; gap: var(--ss-space-4); }
.pp-form .ss-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pp-form textarea.ss-input { resize: vertical; }
.pp-form .ss-label { margin: 0; }
.pp-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ss-space-4); }
.pp-two > .ss-field + .ss-field { margin-top: 0; }
@media (max-width: 575.98px) { .pp-two { grid-template-columns: 1fr; } }
.pp-actions { display: flex; align-items: center; gap: var(--ss-space-4); flex-wrap: wrap; }
.pp-inline-form { display: flex; flex-wrap: wrap; gap: var(--ss-space-2); margin-top: var(--ss-space-3); }
.pp-inline-form .ss-input { flex: 1 1 240px; width: auto; }

/* ---------------------------------------------------------------- front page
   The hero is Savchenko Solutions' home hero (views/eng_page.ejs), forked 2026-09-28: one
   headline in SS Display, one byline, the search, the numbers. */

.hero-primary { padding: var(--ss-space-5) var(--ss-space-5) var(--ss-space-5); border-bottom: 1px solid var(--ss-rule); background: var(--ss-surface); }
.hero-headline {
  font-family: var(--ss-font-display); font-weight: 600; font-synthesis: none; font-size: var(--ss-text-display);
  line-height: var(--ss-lh-tight); letter-spacing: 0; color: var(--ss-navy); margin: 0 0 var(--ss-space-3); max-width: 24ch;
  text-wrap: balance;
}
.hero-byline { font-size: var(--ss-fs-16); color: var(--ss-text-secondary); margin: 0 0 var(--ss-space-5); max-width: 60ch; text-wrap: balance; }
.hero-search-label { display: block; font-size: var(--ss-fs-13); font-weight: var(--ss-fw-strong); color: var(--ss-text); margin-bottom: var(--ss-space-2); }
.hero-search-row { display: flex; gap: var(--ss-space-2); max-width: 30rem; }
.hero-search-input {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 var(--ss-space-3); font-size: var(--ss-fs-16); color: var(--ss-text);
  border: 1px solid var(--ss-rule); border-radius: var(--ss-radius); background: var(--ss-surface);
}
.hero-search-input:focus { outline: none; border-color: var(--ss-navy); box-shadow: 0 0 0 3px rgba(26, 26, 46, 0.08); }
.hero-search-button {
  flex: 0 0 auto; height: 44px; padding: 0 var(--ss-space-5); font-size: var(--ss-fs-14); font-weight: var(--ss-fw-strong);
  color: var(--ss-on-navy); background: var(--ss-navy); border: 1px solid var(--ss-navy); border-radius: var(--ss-radius); cursor: pointer;
}
.hero-search-hint { display: block; margin-top: var(--ss-space-2); font-size: var(--ss-fs-13); color: var(--ss-text-secondary); }
.hero-proof { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ss-space-1) var(--ss-space-6); margin-top: var(--ss-space-5); font-size: var(--ss-fs-16); color: var(--ss-text-secondary); }
.hero-proof strong { font-family: var(--ss-font-ui); font-size: var(--ss-fs-20); font-weight: var(--ss-fw-strong); color: var(--ss-text); }
.hero-proof a { color: var(--ss-link); text-decoration: none; font-size: var(--ss-fs-14); }
.hero-proof a:hover { text-decoration: underline; }
@media (min-width: 768px) {
  .hero-primary { padding: var(--ss-space-6) var(--ss-space-8) var(--ss-space-6); }
  .hero-search-input, .hero-search-button { height: 48px; }
}
@media (min-width: 1100px) {
  /* The text column is as wide as the headline set in two balanced lines (596px at the 40px display
     size, measured), so the search sits one gutter away from it instead of across an empty hole. */
  .hero-primary {
    display: grid; grid-template-columns: minmax(0, 38rem) minmax(20rem, 1fr);
    grid-template-areas: "headline search" "byline search" "proof proof";
    grid-template-rows: auto 1fr auto; column-gap: var(--ss-space-10); align-items: start;
  }
  .hero-main { display: contents; }
  .hero-headline { grid-area: headline; max-width: none; margin-bottom: var(--ss-space-3); }
  .hero-byline { grid-area: byline; margin-bottom: 0; }
  .hero-search { grid-area: search; align-self: center; }
  .hero-search-row { max-width: none; }
  .hero-proof { grid-area: proof; margin-top: var(--ss-space-6); }
}
@media (min-width: 1440px) {
  .hero-byline { font-size: var(--ss-fs-18); }
}

/* Below the hero: Savchenko Solutions' home layout (views/eng_page.ejs, forked 2026-09-28).
   Two columns, the chapter grid as a field grid, plain tables, and the sidebar sections with the
   commit-thread list of recent changes. */
.pp-home { padding: var(--ss-space-5) var(--ss-space-5) var(--ss-space-9); }
@media (min-width: 992px) { .pp-home { padding-inline: var(--ss-space-7); } }
.home-layout { display: grid; grid-template-columns: 1fr 400px; gap: var(--ss-space-7); align-items: start; }
@media (max-width: 991px) { .home-layout { grid-template-columns: 1fr; } }
.home-main, .home-sidebar { min-width: 0; }
.sidebar-sticky { position: sticky; top: 80px; }
@media (max-width: 991px) { .sidebar-sticky { position: static; } }

.chapter-grid { display: grid; grid-template-columns: 1fr; gap: var(--ss-space-2); }
@media (min-width: 576px) { .chapter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .chapter-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1600px) { .chapter-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 576px) and (max-width: 1199.98px) { .pp-n2-1 > :last-child { grid-column: span 2; } }
@media (min-width: 1200px) and (max-width: 1599.98px) { .pp-n3-1 > :last-child { grid-column: span 3; } .pp-n3-2 > :last-child { grid-column: span 2; } }
@media (min-width: 1600px) { .pp-n4-1 > :last-child { grid-column: span 4; } .pp-n4-2 > :nth-last-child(-n+2) { grid-column: span 2; } .pp-n4-3 > :last-child { grid-column: span 2; } }
.chapter-card { display: flex; flex-direction: column; background: var(--ss-surface); border: 1px solid var(--ss-rule); border-radius: var(--ss-radius-lg); overflow: hidden; text-decoration: none; color: inherit; }
.chapter-card:hover { border-color: var(--ss-navy); color: inherit; }
.chapter-card-header { flex: 1 0 auto; display: flex; flex-direction: column; padding: var(--ss-space-4); transition: background-color 0.15s ease; }
.chapter-card:hover .chapter-card-header { background: var(--ss-surface-alt); }
.chapter-card-row { flex: 1 0 auto; display: flex; align-items: flex-start; gap: var(--ss-space-3); }
.chapter-card-text { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
.chapter-num { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--ss-radius); background: var(--ss-navy); color: var(--ss-on-navy); font-weight: var(--ss-fw-strong); font-size: var(--ss-fs-14); flex-shrink: 0; }
.chapter-card-name { font-size: var(--ss-fs-16); font-weight: var(--ss-fw-strong); color: var(--ss-text); line-height: 1.3; }
.chapter-card-name-alt { font-size: var(--ss-fs-12); color: var(--ss-text-secondary); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chapter-card-progress { display: flex; align-items: center; gap: var(--ss-space-2); margin-top: auto; padding-top: var(--ss-space-2); }
.chapter-mini-bar { flex: 1; height: 4px; background: var(--ss-surface-hover); border-radius: var(--ss-radius-sm); overflow: hidden; }
.chapter-card-count { font-size: var(--ss-fs-12); color: var(--ss-text-secondary); white-space: nowrap; }

.pp-home-list { margin-top: var(--ss-space-7); }
.pp-home-list-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--ss-space-2) var(--ss-space-4); margin-bottom: var(--ss-space-2); }
.pp-home-h2 { font-family: var(--ss-font-ui); font-size: var(--ss-fs-16); font-weight: var(--ss-fw-strong); color: var(--ss-text); margin: 0; }
.pp-home-list-head a { font-size: var(--ss-fs-13); text-decoration: none; }
.pp-home-list-head a:hover { text-decoration: underline; }
.pp-home-table th, .pp-home-table td { padding: var(--ss-space-2) var(--ss-space-3); border-bottom: 1px solid var(--ss-rule); text-align: left; vertical-align: top; }
.pp-home-table thead th { font-size: var(--ss-fs-12); font-weight: var(--ss-fw-strong); text-transform: uppercase; letter-spacing: 0.03em; color: var(--ss-text-secondary); border-bottom: 1px solid var(--ss-rule); }
.pp-home-table tbody tr:last-child td { border-bottom: 0; }
.pp-home-table th:first-child, .pp-home-table td:first-child { padding-left: 0; }
.pp-home-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp-home-table td a { text-decoration: none; }
.pp-home-table td a:hover { text-decoration: underline; }

.sidebar-section { background: var(--ss-surface); border: 1px solid var(--ss-rule); border-radius: var(--ss-radius-lg); padding: var(--ss-space-4); }
.sidebar-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--ss-space-3); }
.sidebar-title { font-size: var(--ss-fs-16); font-weight: var(--ss-fw-strong); color: var(--ss-text); margin: 0; }
.sidebar-view-all { font-size: var(--ss-fs-13); color: var(--ss-link); text-decoration: none; font-weight: var(--ss-fw-regular); }
.sidebar-view-all:hover { color: var(--ss-link-hover); text-decoration: underline; }
.pp-view-all { display: inline-block; margin-top: var(--ss-space-2); }
.pp-sidebar-text { font-size: var(--ss-fs-13); line-height: 1.5; color: var(--ss-text); margin: 0 0 var(--ss-space-2); }
.pp-sidebar-text:last-child { margin-bottom: 0; }

.commit-thread { position: relative; padding-left: 0; }
.commit-thread::before { content: ''; position: absolute; left: 13px; top: 12px; bottom: 12px; width: 2px; background: var(--ss-rule); }
.commit-entry { display: flex; align-items: flex-start; gap: var(--ss-space-3); padding: var(--ss-space-1) 0; position: relative; }
.commit-dot-wrapper { display: flex; align-items: center; flex-shrink: 0; width: 28px; margin-top: 2px; position: relative; z-index: 1; }
.commit-hline { flex: 1; height: 2px; background: var(--ss-rule); }
.commit-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ss-navy); border: 2px solid #fff; flex-shrink: 0; box-sizing: border-box; }
.commit-entry.new-solution .commit-dot { background: var(--ss-navy); }
.commit-entry.comment-entry .commit-dot { background: var(--ss-surface); box-shadow: inset 0 0 0 1.5px var(--ss-navy); }
.commit-entry-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.commit-entry-main { font-size: var(--ss-fs-13); line-height: 1.3; color: var(--ss-text); }
.commit-problem { font-weight: var(--ss-fw-strong); color: var(--ss-link); text-decoration: none; }
.commit-problem:hover { color: var(--ss-link-hover); text-decoration: underline; }
.commit-action { font-size: var(--ss-fs-12); color: var(--ss-text-secondary); }
.commit-entry-footer { font-size: var(--ss-fs-12); color: var(--ss-text-tertiary); }
/* The side lists use Savchenko Solutions' Top Authors list (views/eng_page.ejs). */
.top-authors-list { font-size: var(--ss-fs-14); }
.top-authors-header { display: flex; align-items: center; gap: var(--ss-space-3); padding: 0 0 var(--ss-space-2); border-bottom: 1px solid var(--ss-rule); margin-bottom: var(--ss-space-1); font-size: var(--ss-fs-12); font-weight: var(--ss-fw-strong); color: var(--ss-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.top-author-row { display: flex; align-items: center; gap: var(--ss-space-3); padding: var(--ss-space-2) 0; color: var(--ss-text); text-decoration: none; }
.top-author-row:hover { color: var(--ss-text); background: var(--ss-surface-alt); }
.ta-score-col { width: 56px; flex-shrink: 0; text-align: right; font-weight: var(--ss-fw-strong); font-variant-numeric: tabular-nums; }
.pp-sidebar-note { margin: var(--ss-space-3) 0 0; padding-top: var(--ss-space-3); border-top: 1px solid var(--ss-rule); font-size: var(--ss-fs-13); color: var(--ss-text-secondary); }
.pp-sidebar-actions { display: flex; flex-wrap: wrap; gap: var(--ss-space-2); }

/* Field summaries wrap rather than being cut off in narrow columns. */
.pp-field-card .chapter-card-name-alt { white-space: normal; overflow: visible; }

/* ---------------------------------------------------------------- small parts */

.pp-inline { display: inline; margin: 0; }
.pp-grow { flex: 1 1 auto; min-width: 0; }
.pp-n { color: var(--ss-text-secondary); font-size: var(--ss-fs-12); font-variant-numeric: tabular-nums; }
.pp-gap-sm { margin-top: var(--ss-space-2); }
.pp-gap-lg { margin-top: var(--ss-space-7); }
.pp-dd-note { display: block; font-size: var(--ss-fs-12); color: var(--ss-text-secondary); }
.pp-flash { margin-bottom: var(--ss-space-4); }

.pp-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%;
  background: var(--ss-navy); color: var(--ss-on-navy); font-family: var(--ss-font-ui); font-weight: var(--ss-fw-strong); line-height: 1;
  text-transform: uppercase; user-select: none;
}
.pp-avatar--24 { width: 24px; height: 24px; font-size: 12px; }
.pp-avatar--32 { width: 32px; height: 32px; font-size: 14px; }
.pp-avatar--40 { width: 40px; height: 40px; font-size: 17px; }
.pp-avatar--64 { width: 64px; height: 64px; font-size: 28px; }
img.pp-avatar { object-fit: cover; background: var(--ss-surface-alt); }
.pp-meta-row { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--ss-space-3); }
.pp-user { font-weight: var(--ss-fw-strong); color: var(--ss-text); text-decoration: none; }
.pp-user:hover { color: var(--ss-link); text-decoration: underline; }
/* A ranked name keeps its colour on hover and is never underlined, as on Savchenko Solutions. */
a.pp-user[class*="ss-rank-c-"]:hover { color: var(--ss-rank-current); text-decoration: none; }
.pp-ss-note { margin-bottom: var(--ss-space-4); font-size: var(--ss-fs-14); }
.pp-sso-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--ss-space-3); max-width: 26rem; height: 48px; padding: 0 var(--ss-space-4);
  border-radius: var(--ss-radius); background: var(--ss-navy); color: var(--ss-on-navy); font-size: var(--ss-fs-16); font-weight: var(--ss-fw-strong); text-decoration: none;
}
.pp-sso-btn:hover { background: var(--ss-navy-hover); color: var(--ss-on-navy); }
.pp-sso-btn img { border-radius: 4px; background: var(--ss-surface); }
.pp-sso-or { display: flex; align-items: center; gap: var(--ss-space-3); max-width: 26rem; margin: var(--ss-space-4) 0; color: var(--ss-text-secondary); font-size: var(--ss-fs-13); }
.pp-sso-or::before, .pp-sso-or::after { content: ""; flex: 1; border-top: 1px solid var(--ss-rule); }
.pp-ss-link { margin: var(--ss-space-2) 0 0; font-size: var(--ss-fs-13); }
.pp-role-line { color: var(--ss-text-secondary); font-weight: var(--ss-fw-regular); }

.pp-textbtn {
  display: inline; padding: 0; border: 0; background: none; color: var(--ss-text-secondary); font: inherit; font-size: var(--ss-fs-13);
  cursor: pointer; text-decoration: none; list-style: none;
}
.pp-textbtn:hover { color: var(--ss-link); text-decoration: underline; }
.pp-textbtn::-webkit-details-marker { display: none; }
.pp-danger { color: var(--ss-error); }
.pp-danger:hover { color: var(--ss-error); }

/* Marks on a problem. Difficulty is a neutral chip with a heat square, the way the earlier ledger
   drew statuses, so the colour carries the order and the chip stays quiet. */
.pp-diff, .pp-origin, .pp-mark, .pp-status, .pp-lang {
  display: inline-flex; align-items: center; gap: 6px; padding: 1px 7px; border: 1px solid var(--ss-rule); border-radius: var(--ss-radius-sm);
  background: var(--ss-surface); color: var(--ss-text); font-family: var(--ss-font-ui); font-size: var(--ss-fs-12); font-weight: var(--ss-fw-strong);
  line-height: 1.5; white-space: nowrap;
}
.pp-diff::before { content: ""; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.pp-diff--1::before { background: var(--pp-heat-1); box-shadow: inset 0 0 0 1px rgba(26, 26, 46, 0.12); }
.pp-diff--2::before { background: var(--pp-heat-2); }
.pp-diff--3::before { background: var(--pp-heat-3); }
.pp-diff--4::before { background: var(--pp-heat-4); }
.pp-diff--5::before { background: var(--pp-heat-5); }
.pp-origin--original { border-color: var(--ss-navy); color: var(--ss-navy); }
.pp-origin--archive { color: var(--ss-text-secondary); font-weight: var(--ss-fw-regular); }
.pp-status { font-weight: var(--ss-fw-regular); color: var(--ss-text-secondary); border-color: transparent; padding-inline: 0; }
.pp-status--open { border: 1px dashed var(--ss-rule-strong); padding-inline: 7px; color: var(--ss-text); }
.pp-status--checked { color: var(--ss-navy); font-weight: var(--ss-fw-strong); }
.pp-status--checked::before { content: "✓"; }
.pp-lang { font-family: var(--ss-font-mono); font-weight: var(--ss-fw-regular); color: var(--ss-text-secondary); padding: 0 5px; }
.pp-mark { color: var(--ss-text-secondary); font-weight: var(--ss-fw-regular); }
.pp-mark--checked { color: var(--ss-navy); border-color: var(--ss-navy); font-weight: var(--ss-fw-strong); }
.pp-mark--checked::before { content: "✓"; }

/* Cards carry the difficulty on their left edge, as the database cards carry status. */
.pf-card.pp-heat-none { border-left-color: var(--ss-rule); }
.pf-card.pp-heat-1 { border-left-color: var(--pp-heat-1); }
.pf-card.pp-heat-2 { border-left-color: var(--pp-heat-2); }
.pf-card.pp-heat-3 { border-left-color: var(--pp-heat-3); }
.pf-card.pp-heat-4 { border-left-color: var(--pp-heat-4); }
.pf-card.pp-heat-5 { border-left-color: var(--pp-heat-5); }
.pf-card-tag.pp-field-tag { color: var(--ss-text); }
.pf-card-tag.is-on { border-color: var(--ss-navy); color: var(--ss-navy); }
.pp-card-meta .pp-user:not([class*="ss-rank-c-"]) { font-weight: var(--ss-fw-regular); color: var(--ss-text-secondary); }
.pp-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--ss-space-4); }
.pf-top .pp-crumbs { margin: 0; }
.pp-list-intro { font-size: var(--ss-fs-13); color: var(--ss-text-secondary); }
.pf-method { display: inline-flex; align-items: center; gap: 4px; }
.pf-method .upload-icon { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* ---------------------------------------------------------------- header extras */

.pp-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--ss-text); border-radius: var(--ss-radius); }
.pp-bell:hover { background: var(--ss-surface-hover); color: var(--ss-navy); }
.pp-bell-n {
  position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--ss-navy);
  color: var(--ss-on-navy); font-size: 11px; font-weight: var(--ss-fw-strong); line-height: 17px; text-align: center;
}
.pp-me { display: inline-flex; align-items: center; gap: var(--ss-space-2); color: var(--ss-text); text-decoration: none; }
.language-nav-link { font-family: var(--ss-font-mono); font-size: var(--ss-fs-13); }

/* ---------------------------------------------------------------- front page additions */

.pp-sorts { display: flex; gap: var(--ss-space-4); font-size: var(--ss-fs-13); }
.pp-sorts a { color: var(--ss-text-secondary); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.pp-sorts a:hover { color: var(--ss-text); }
.pp-sorts .pp-sort-empty { color: var(--ss-text-tertiary); }
.pp-sorts a[aria-current="page"] { color: var(--ss-navy); font-weight: var(--ss-fw-strong); border-bottom-color: var(--ss-navy); }
.pp-sidebar-stack { display: flex; flex-direction: column; gap: var(--ss-space-4); }
.pp-field-card .chapter-num { font-weight: 400; font-size: 15px; line-height: 1; }
.pp-field-card .chapter-num .katex { color: inherit; }
.pp-field--physics { background: var(--pp-field-physics); color: var(--pp-field-physics-ink); }
.pp-field--math { background: var(--pp-field-math); color: var(--pp-field-math-ink); }
.pp-field--cs { background: var(--pp-field-cs); color: var(--pp-field-cs-ink); }
/* Elsewhere a field shows as its colour in a small round mark, round so it is not read as a
   difficulty square. */
.pp-field-dot::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0.05em; background: var(--pp-dot); }
.pp-field-dot--physics { --pp-dot: var(--pp-field-physics); }
.pp-field-dot--math { --pp-dot: var(--pp-field-math); }
.pp-field-dot--cs { --pp-dot: var(--pp-field-cs); }
.top-author-row .pp-avatar { flex-shrink: 0; }
.top-author-row .ta-score-col svg { vertical-align: -2px; color: var(--ss-text-secondary); }
.top-authors-header .ta-score-col, .top-author-row .ta-score-col { width: 64px; }
.pp-idea-mini { font-size: var(--ss-fs-13); line-height: 1.35; }
.pp-idea-mini-n { display: inline-flex; align-items: center; gap: 4px; width: 44px; flex-shrink: 0; color: var(--ss-text-secondary); font-variant-numeric: tabular-nums; }
.pp-idea-mini-n svg { width: 13px; height: 13px; }

/* ---------------------------------------------------------------- problem page */

/* The byline shares the chips' line, after them, so the header takes three lines, not four. */
.pp-byline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ss-space-2); margin-left: var(--ss-space-2); font-size: var(--ss-fs-14); }
.content-section .ss-statement { font-size: var(--ss-fs-18); }
.content-section .ss-statement-body { max-width: 46em; }
.content-section .ss-statement-body > :last-child { margin-bottom: 0; }
.ss-statement-note { font-family: var(--ss-font-ui); font-size: var(--ss-fs-13); color: var(--ss-text-secondary); margin-top: var(--ss-space-2); overflow-wrap: anywhere; }

.pp-problem-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ss-space-2) var(--ss-space-3); margin: 0 0 var(--ss-space-3); }
.pp-problem-bar .btn { display: inline-flex; align-items: center; gap: 6px; }
.pp-like {
  display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 var(--ss-space-2); border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius); background: var(--ss-surface); color: var(--ss-text-secondary); font-size: var(--ss-fs-13); cursor: pointer; text-decoration: none;
}
.pp-like:hover { border-color: var(--ss-navy); color: var(--ss-navy); }
.pp-like[aria-pressed="true"] { border-color: var(--ss-navy); color: var(--ss-navy); font-weight: var(--ss-fw-strong); }
.pp-like[aria-pressed="true"] svg { fill: currentColor; }
.pp-like--big { min-height: 31px; padding: 0 var(--ss-space-3); color: var(--ss-text); }
.pp-like--big .pp-n { padding-left: 6px; margin-left: 2px; border-left: 1px solid var(--ss-rule); }
.pp-like--stack { flex-direction: column; justify-content: center; gap: 0; width: 48px; min-height: 48px; padding: 4px 0; flex-shrink: 0; }

.pp-menu { position: relative; }
.pp-menu > summary { list-style: none; cursor: pointer; }
.pp-menu > summary::-webkit-details-marker { display: none; }
.pp-menu-body {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: min(320px, 86vw); padding: var(--ss-space-3);
  background: var(--ss-surface); border: 1px solid var(--ss-rule); border-radius: var(--ss-radius-lg); box-shadow: var(--ss-shadow);
}
.pp-collect-list { display: flex; flex-direction: column; margin-bottom: var(--ss-space-2); }
.pp-collect-item { text-align: left; padding: 6px var(--ss-space-2); border: 0; border-radius: var(--ss-radius); background: none; color: var(--ss-text); font-size: var(--ss-fs-14); cursor: pointer; }
.pp-collect-item:hover { background: var(--ss-surface-hover); }
.pp-collect-item.is-on { color: var(--ss-navy); font-weight: var(--ss-fw-strong); }
.pp-inline-form { display: flex; flex-wrap: wrap; gap: var(--ss-space-2); margin: 0; }
.pp-inline-form .ss-input { flex: 1 1 160px; width: auto; min-height: 31px; }

.pp-report { display: inline-block; }
.pp-report > summary { list-style: none; }
.pp-report[open] { display: block; flex-basis: 100%; }
.pp-report-form { display: flex; flex-direction: column; gap: var(--ss-space-2); margin-top: var(--ss-space-2); max-width: 32rem; }
.pp-report-form .btn { align-self: flex-start; }

.pp-spoiler, .pp-more { margin: 0 0 var(--ss-space-3); border: 1px solid var(--ss-rule); border-radius: var(--ss-radius-lg); background: var(--ss-surface); }
.pp-spoiler > summary, .pp-more > summary { cursor: pointer; padding: var(--ss-space-3) var(--ss-space-4); font-size: var(--ss-fs-14); font-weight: var(--ss-fw-strong); color: var(--ss-navy); }
.pp-spoiler > .ss-prose { padding: 0 var(--ss-space-4) var(--ss-space-4); max-width: none; }
.pp-more-body { padding: 0 var(--ss-space-4) var(--ss-space-4); display: flex; flex-direction: column; gap: var(--ss-space-4); }

.pp-solutions { margin-top: var(--ss-space-5); }
.pp-none { margin-bottom: var(--ss-space-4); }
.pp-reveal { margin-bottom: var(--ss-space-5); }
/* The folded solutions: a card that cannot be missed, with a real-looking button (the owner, 2026-10-04). */
.pp-reveal > summary {
  display: flex; align-items: center; gap: var(--ss-space-4); cursor: pointer; list-style: none;
  padding: var(--ss-space-4) var(--ss-space-5); border: 1px solid var(--ss-rule-strong); border-left: 4px solid var(--ss-navy);
  border-radius: var(--ss-radius-lg); background: var(--ss-surface-alt); transition: background-color 0.15s, border-color 0.15s;
}
.pp-reveal > summary::-webkit-details-marker { display: none; }
.pp-reveal > summary:hover { background: var(--ss-surface-hover); border-color: var(--ss-navy); }
.pp-reveal > summary:focus-visible { outline: var(--ss-focus-ring); outline-offset: 2px; }
.pp-reveal-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--ss-surface); color: var(--ss-navy); border: 1px solid var(--ss-rule); }
.pp-reveal-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pp-reveal-title { font-weight: var(--ss-fw-strong); color: var(--ss-text); font-size: var(--ss-fs-18); line-height: 1.3; }
.pp-reveal-hint { font-size: var(--ss-fs-14); color: var(--ss-text-secondary); }
.pp-reveal-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; height: 42px; padding: 0 var(--ss-space-5); border-radius: var(--ss-radius);
  background: var(--ss-navy); color: var(--ss-on-navy); font-weight: var(--ss-fw-strong); font-size: var(--ss-fs-14); white-space: nowrap;
}
.pp-reveal > summary:hover .pp-reveal-btn { background: var(--ss-navy-hover); }
@media (max-width: 575.98px) {
  .pp-reveal > summary { flex-wrap: wrap; }
  .pp-reveal-icon { display: none; }
  .pp-reveal-btn { width: 100%; justify-content: center; }
}
.pp-reveal[open] > summary { display: none; }
a.pp-status--solved { text-decoration: none; color: var(--ss-link); }
a.pp-status--solved:hover { text-decoration: underline; }

.pp-solution { padding: var(--ss-space-4) 0 var(--ss-space-5); border-top: 1px solid var(--ss-rule); }
.pp-solution:first-of-type { border-top: 0; padding-top: 0; }
.pp-solution.is-checked { box-shadow: inset 3px 0 0 var(--ss-navy); padding-left: var(--ss-space-4); }
.pp-solution.is-hidden, .pp-comments li.is-hidden { opacity: 0.55; }
.pp-solution-head { display: flex; align-items: center; gap: var(--ss-space-3); margin-bottom: var(--ss-space-3); flex-wrap: wrap; }
.pp-solution-who { display: flex; flex-direction: column; line-height: 1.3; }
.pp-permalink { color: inherit; text-decoration: none; }
.pp-permalink:hover { text-decoration: underline; }
.pp-solution-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.pp-solution-body { max-width: 46em; }
.pp-solution-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ss-space-2) var(--ss-space-4); margin-top: var(--ss-space-3); }
.pp-foot-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ss-space-1) var(--ss-space-3); margin-left: auto; }

.pp-solve-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ss-space-2) var(--ss-space-4); margin-top: var(--ss-space-5); padding: var(--ss-space-4); border: 1px solid var(--ss-rule); border-radius: var(--ss-radius-lg); background: var(--ss-surface-alt); }
.pp-solve-btn { padding-inline: var(--ss-space-5); }

/* Everything that can be pressed shows a hand, and the small text buttons are easier to hit than
   they look (the owner, 2026-10-03). */
button:not(:disabled), summary, select, label.pp-tool, label.pp-pill, .pp-seg label, input[type="checkbox"], input[type="radio"], input[type="file"], [data-copy] { cursor: pointer; }
.pp-textbtn { padding: 4px 3px; margin: -4px -3px; }
.pp-help > summary, .pp-report > summary { padding: 4px 6px; margin: -4px -6px; }
.pp-narrow-field { max-width: 20rem; }
.pp-signin-box { margin-top: var(--ss-space-4); padding: var(--ss-space-4); border: 1px solid var(--ss-rule); border-radius: var(--ss-radius-lg); background: var(--ss-surface-alt); }
.pp-signin-box p { margin: 0; }

.pp-discussion { margin-top: var(--ss-space-6); }
.pp-comments { list-style: none; padding: 0; margin: 0 0 var(--ss-space-4); }
.pp-comments li { display: flex; gap: var(--ss-space-3); padding: var(--ss-space-3) 0; border-bottom: 1px solid var(--ss-rule-soft); }
.pp-comment-body { flex: 1; min-width: 0; }
.pp-comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ss-space-1) var(--ss-space-2); font-size: var(--ss-fs-13); margin-bottom: 2px; }
.pp-comment-form { gap: var(--ss-space-2); max-width: 46em; }

.pp-author { display: flex; align-items: center; gap: var(--ss-space-3); color: var(--ss-text); text-decoration: none; margin-bottom: var(--ss-space-2); }
.pp-author > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pp-author-user { font-size: var(--ss-fs-18); font-weight: var(--ss-fw-strong); overflow-wrap: anywhere; }
.pp-author-user:not([class*="ss-rank-c-"]) { color: var(--ss-navy); }
.pp-author-name { font-size: var(--ss-fs-13); color: var(--ss-text-secondary); }
.pp-author:hover .pp-author-user { color: var(--ss-link); text-decoration: underline; }
.pp-who-line { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--ss-space-2); }
.pp-fullname { font-size: var(--ss-fs-13); color: var(--ss-text-secondary); }
.pp-fact-wide { flex-wrap: wrap; }
.pp-fact-wide dd { text-align: left; }

/* Maths, code and media inside user text. */
.ss-prose .pp-eq { overflow-x: auto; overflow-y: hidden; margin: var(--ss-space-3) 0; }
.ss-prose img, .ss-prose video { display: block; max-width: 100%; height: auto; margin: var(--ss-space-3) 0; border-radius: var(--ss-radius); }
.ss-prose video { width: 100%; max-height: 70vh; background: #000; }
.ss-prose .pp-code { padding: var(--ss-space-3); background: var(--ss-surface-alt); border: 1px solid var(--ss-rule); border-radius: var(--ss-radius); overflow-x: auto; font-size: var(--ss-fs-13); }
.ss-prose .pp-code code { background: none; padding: 0; }

/* ---------------------------------------------------------------- editor and forms */

.pp-form-page { padding-block: var(--ss-space-6) var(--ss-space-9); }
.pp-form-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ss-space-7); }
@media (min-width: 992px) { .pp-form-layout { grid-template-columns: minmax(0, 46rem) minmax(16rem, 20rem); } .pp-form-aside { grid-row: 1 / span 2; grid-column: 2; } }
.pp-form-aside { display: flex; flex-direction: column; gap: var(--ss-space-4); align-self: start; }
.pp-plain-list { margin: 0; padding-left: 1.1em; font-size: var(--ss-fs-13); line-height: 1.5; }
.pp-plain-list li { margin-bottom: var(--ss-space-1); }
.pp-choice { border: 0; padding: 0; margin: 0; }
.pp-choice legend { float: none; width: auto; margin-bottom: 6px; }
.pp-choice-row { display: flex; flex-wrap: wrap; gap: var(--ss-space-2); }
.pp-choice-col { display: flex; flex-direction: column; gap: var(--ss-space-2); }
.pp-pill { position: relative; margin: 0; }
.pp-pill input { position: absolute; opacity: 0; inset: 0; }
.pp-pill span {
  display: inline-flex; align-items: center; min-height: var(--ss-control); padding: 0 var(--ss-space-4); border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius); background: var(--ss-surface); color: var(--ss-text); font-size: var(--ss-fs-14); cursor: pointer;
}
.pp-pill input:checked + span { background: var(--ss-navy); border-color: var(--ss-navy); color: var(--ss-on-navy); }
.pp-pill input:focus-visible + span { outline: var(--ss-focus-ring); outline-offset: 2px; }
.pp-radio, .pp-check { display: flex; align-items: flex-start; gap: var(--ss-space-2); margin: 0; font-size: var(--ss-fs-14); line-height: 1.45; cursor: pointer; }
.pp-radio input, .pp-check input { margin-top: 3px; flex-shrink: 0; accent-color: var(--ss-navy); }
.pp-danger-zone { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ss-space-3); margin-top: var(--ss-space-5); padding-top: var(--ss-space-4); border-top: 1px solid var(--ss-rule); }
.pp-mini-select { width: auto; min-height: 31px; display: inline-block; font-size: var(--ss-fs-13); }

.pp-editor { display: flex; flex-direction: column; gap: 6px; }
.pp-editor-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ss-space-1) var(--ss-space-2); }
.pp-tool {
  display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 var(--ss-space-2); border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius); background: var(--ss-surface); color: var(--ss-text-secondary); font-size: var(--ss-fs-12); cursor: pointer; margin: 0;
}
.pp-tool:hover, .pp-tool[aria-pressed="true"] { border-color: var(--ss-navy); color: var(--ss-navy); }
.pp-help { font-size: var(--ss-fs-12); color: var(--ss-text-secondary); }
.pp-help > summary { cursor: pointer; padding: 4px var(--ss-space-1); }
.pp-help[open] { flex-basis: 100%; order: 5; }
.pp-help-table {
  width: 100%; max-width: 36rem; margin: var(--ss-space-1) 0 var(--ss-space-2); border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--ss-rule); border-radius: var(--ss-radius); background: var(--ss-surface); overflow: hidden;
}
.pp-help-table th {
  padding: 6px var(--ss-space-3); background: var(--ss-surface-alt); border-bottom: 1px solid var(--ss-rule); text-align: left;
  font-size: var(--ss-text-label); font-weight: var(--ss-fw-strong); letter-spacing: var(--ss-ls-caps); text-transform: uppercase; color: var(--ss-text-secondary);
}
.pp-help-table td { padding: 5px var(--ss-space-3); border-top: 1px solid var(--ss-rule-soft); vertical-align: middle; }
.pp-help-table tbody tr:first-child td { border-top: 0; }
.pp-help-table td:first-child { width: 50%; }
.pp-help-table td:first-child code {
  font-family: var(--ss-font-mono); font-size: var(--ss-fs-13); color: var(--ss-text); background: none; padding: 0; white-space: pre;
}
.pp-help-table td.ss-prose { max-width: none; font-size: var(--ss-fs-15, 15px); color: var(--ss-text); line-height: 1.4; }
.pp-help-table td.ss-prose > *, .pp-help-table td.ss-prose p { margin: 0; text-indent: 0; }
.pp-help-table td.ss-prose ul, .pp-help-table td.ss-prose ol { padding-left: 1.2em; }
.pp-help-table td.ss-prose blockquote { padding-left: var(--ss-space-2); border-left: 3px solid var(--ss-rule); }
.pp-help-table td.ss-prose .pp-eq { margin: 0; text-align: left; overflow: visible; }
.pp-help-table td.ss-prose .katex-display { margin: 0; text-align: left; }
.pp-help-table td.ss-prose .katex-display > .katex { text-align: left; }
.pp-help-table td.ss-prose code { font-size: var(--ss-fs-13); }
.pp-help-table td.ss-prose .pp-code { margin: 0; padding: 4px var(--ss-space-2); font-size: var(--ss-fs-13); line-height: 1.4; }
.pp-help-h { font-family: var(--ss-font-text); font-size: var(--ss-fs-18); }
.pp-help-link { color: var(--ss-link); text-decoration: underline; }
.pp-upload-status { font-size: var(--ss-fs-12); color: var(--ss-text-secondary); }
.pp-upload-status.is-error { color: var(--ss-error); }
.pp-editor-text { font-family: var(--ss-font-mono); font-size: var(--ss-fs-14); line-height: 1.55; }
.pp-preview { min-height: 120px; padding: var(--ss-space-3) var(--ss-space-4); border: 1px solid var(--ss-rule); border-radius: var(--ss-radius); background: var(--ss-surface); max-width: none; }

/* ---------------------------------------------------------------- people, ideas, admin */

.pp-auth .pp-form { max-width: 26rem; }
.pp-sol-list { list-style: none; margin: 0; padding: 0; }
.pp-sol-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ss-space-1) var(--ss-space-3); padding: var(--ss-space-3) 0; border-bottom: 1px solid var(--ss-rule); }
.pp-sol-list li p { flex-basis: 100%; }
.pp-collection-row { display: flex; align-items: flex-start; gap: var(--ss-space-3); }
.pp-collection-row .pf-card { flex: 1; min-width: 0; }

.pp-notes { list-style: none; margin: 0; padding: 0; }
.pp-notes li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ss-space-1) var(--ss-space-4); padding: var(--ss-space-3) 0; border-bottom: 1px solid var(--ss-rule); }
.pp-notes li.is-new { box-shadow: inset 3px 0 0 var(--ss-navy); padding-left: var(--ss-space-3); }
.pp-notes a { color: var(--ss-text); text-decoration: none; }
.pp-notes a:hover .pp-note-title { text-decoration: underline; }
.pp-note-title { color: var(--ss-link); }

.pp-ideas { list-style: none; margin: 0; padding: 0; }
.pp-idea { display: flex; align-items: center; gap: var(--ss-space-4); padding: var(--ss-space-3) 0; border-bottom: 1px solid var(--ss-rule); }
.pp-ideas--single .pp-idea { border-bottom: 0; }
.pp-ideas--single .pf-card-name { font-size: var(--ss-fs-20); }
.pp-idea-text { display: flex; flex-direction: column; min-width: 0; }
.pp-idea--planned .pp-idea-state { color: var(--ss-navy); font-weight: var(--ss-fw-strong); }
.pp-idea--done .pf-card-name, .pp-idea--declined .pf-card-name { color: var(--ss-text-secondary); }
.pp-idea-body { margin: var(--ss-space-2) 0 var(--ss-space-4); }
.pp-idea-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ss-space-3); }

.pp-admin-list { list-style: none; margin: 0 0 var(--ss-space-4); padding: 0; }
.pp-admin-list li { padding: var(--ss-space-3) 0; border-bottom: 1px solid var(--ss-rule); }
.pp-admin-list p { margin: 4px 0; }

.ss-prose .pp-credit { font-family: var(--ss-font-ui); font-size: var(--ss-fs-13); color: var(--ss-text-secondary); text-indent: 0; }
.pp-compare th[scope="row"] { white-space: nowrap; color: var(--ss-text-secondary); font-weight: var(--ss-fw-regular); }
.pp-marks { margin: 0 0 var(--ss-space-4); font-family: var(--ss-font-ui); font-size: var(--ss-fs-14); }
.pp-marks > div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--ss-space-3); padding: var(--ss-space-2) 0; border-bottom: 1px solid var(--ss-rule-soft); }
.pp-marks dt { font-weight: var(--ss-fw-regular); }
.pp-marks dd { margin: 0; }
@media (max-width: 575.98px) { .pp-marks > div { grid-template-columns: 1fr; gap: 4px; } }

/* ---------------------------------------------------------------- wide text pages
   About and the Ideas board use the whole width, as the problem pages do: the text in a reading
   column, and beside it a side column with what is useful next (the owner, 2026-10-03). */
.pp-wide-page { max-width: 1320px; margin: 0 auto; padding: var(--ss-space-6) var(--ss-space-5) var(--ss-space-9); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ss-space-7); }
@media (min-width: 992px) { .pp-wide-page { grid-template-columns: minmax(0, 1fr) 340px; padding-inline: var(--ss-space-7); } }
.pp-wide-main { min-width: 0; }
.pp-wide-main .ss-prose { max-width: 50em; }
.pp-wide-rail { min-width: 0; }
.pp-toc { list-style: none; margin: 0; padding: 0; font-size: var(--ss-fs-14); }
.pp-toc li { padding: 5px 0; border-bottom: 1px solid var(--ss-rule-soft); }
.pp-toc li:last-child { border-bottom: 0; }
.pp-toc a { text-decoration: none; }
.pp-toc a:hover { text-decoration: underline; }
.pp-rail-stats { gap: var(--ss-space-3); }
.pp-rail-stats .stat-value { font-size: var(--ss-fs-20); }
.pp-about h2[id], .pp-about h2#rules { scroll-margin-top: var(--ss-space-6); }

/* ---------------------------------------------------------------- profile
   Savchenko Solutions' profile page (views/user_profile.ejs), forked 2026-10-03: the header stands
   without a frame, the username big in the UI face with the full name under it, the picture a
   square as tall as the text; under it a 300px column of small cards beside the long lists. */

.profile-page { max-width: 1320px; margin: 0 auto; padding: var(--ss-space-5) var(--ss-space-4) var(--ss-space-7); width: 100%; box-sizing: border-box; font-family: var(--ss-font-ui); }
.pp-pcard { border: 1px solid var(--ss-rule); border-radius: var(--ss-radius-lg); background: var(--ss-surface); padding: var(--ss-space-4); margin-bottom: var(--ss-space-4); }
.section-title { font-family: var(--ss-font-ui); color: var(--ss-navy); margin: 0 0 var(--ss-space-3); font-size: var(--ss-fs-16); font-weight: var(--ss-fw-strong); letter-spacing: 0; }
.profile-header-card { margin-bottom: var(--ss-space-5); }
.profile-head { display: flex; justify-content: space-between; gap: var(--ss-space-4); align-items: flex-start; flex-wrap: wrap; }
.profile-main { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ss-space-4); min-width: 0; flex: 1 1 300px; }
.profile-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.profile-avatar { width: 200px; height: 200px; border-radius: var(--ss-radius-lg); object-fit: cover; border: 1px solid var(--ss-rule); background: var(--ss-surface); flex-shrink: 0; }
.profile-names { min-width: 0; flex: 1 1 auto; width: 100%; }
.profile-page .name-line {
  display: flex; align-items: center; justify-content: center; gap: var(--ss-space-2); margin: 0;
  font-family: var(--ss-font-ui); font-size: var(--ss-fs-28); font-weight: var(--ss-fw-strong); color: var(--ss-navy); line-height: 1.15; letter-spacing: 0;
}
.name-text { display: inline-block; overflow-wrap: anywhere; }
.username-line { margin: var(--ss-space-1) 0 0; font-size: var(--ss-fs-16); color: var(--ss-text-secondary); }
.rank-title-line { margin: var(--ss-space-1) 0 0; font-size: var(--ss-fs-14); font-weight: var(--ss-fw-strong); line-height: 1.2; color: var(--ss-text); }
.profile-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ss-space-1) var(--ss-space-4); margin: var(--ss-space-2) 0 0; font-size: var(--ss-fs-13); color: var(--ss-text-secondary); }
.profile-meta-item { display: inline-flex; align-items: center; gap: var(--ss-space-1); }
.profile-page .bio { margin: var(--ss-space-2) 0 0; font-size: var(--ss-fs-14); color: var(--ss-text); line-height: 1.45; max-width: 760px; }
.profile-page .bio p { margin: 0 0 var(--ss-space-1); }
.profile-actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--ss-space-2); flex-shrink: 0; margin: 0; }
.profile-actions a.edit-link, .profile-actions a.edit-link:link, .profile-actions a.edit-link:visited {
  display: inline-flex; align-items: center; gap: var(--ss-space-2); height: 40px; padding: 0 var(--ss-space-5);
  background: var(--ss-navy); color: var(--ss-on-navy); border: 1px solid var(--ss-navy); border-radius: var(--ss-radius);
  font-size: var(--ss-text-ui); font-weight: var(--ss-fw-strong); text-decoration: none; white-space: nowrap; transition: background 0.15s;
}
.profile-actions a.edit-link:hover, .profile-actions a.edit-link:focus-visible { background: var(--ss-link); border-color: var(--ss-link); color: var(--ss-on-navy); }
.follow-btn {
  height: 40px; padding: 0 var(--ss-space-4); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-strong); border-radius: var(--ss-radius);
  cursor: pointer; white-space: nowrap; border: 1px solid var(--ss-navy); transition: background 0.15s, color 0.15s;
}
.follow-btn--following { background: var(--ss-surface); color: var(--ss-navy); }
.follow-btn--following:hover { border-color: var(--ss-error); color: var(--ss-error); }
.profile-actions .pp-mini-select { height: 40px; }
@media (min-width: 768px) {
  .profile-meta { justify-content: flex-start; }
  .profile-main { flex-direction: row; align-items: stretch; text-align: left; gap: var(--ss-space-5); }
  .profile-avatar-wrap { align-self: stretch; aspect-ratio: 1 / 1; min-height: 200px; max-height: 380px; }
  .profile-avatar { width: 100%; height: 100%; }
  .profile-page .name-line { justify-content: flex-start; font-size: var(--ss-fs-40); }
}
.profile-layout, .profile-side, .profile-body { min-width: 0; }
@media (min-width: 1200px) {
  .profile-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: var(--ss-space-5); align-items: start; }
}
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ss-space-4) var(--ss-space-3); }
.stat-value { font-size: var(--ss-fs-20); line-height: 1.2; color: var(--ss-navy); font-weight: var(--ss-fw-strong); font-variant-numeric: tabular-nums; }
.stat-label { margin-top: 2px; font-size: var(--ss-fs-13); color: var(--ss-text-secondary); }
.profile-body .ss-tabs { margin-top: 0; }

.pp-avatar-row { display: flex; align-items: flex-start; gap: var(--ss-space-4); flex-wrap: wrap; }
.pp-avatar-preview { width: 96px; height: 96px; border-radius: var(--ss-radius-lg); border: 1px solid var(--ss-rule); object-fit: cover; flex-shrink: 0; }
.pp-avatar-pick { flex: 1 1 16rem; display: flex; flex-direction: column; gap: var(--ss-space-2); }

/* Very wide screens: the hero and the page under it keep a 1600px measure, left edges aligned. Last in
   the file so it wins over the per-section padding above. */
@media (min-width: 1664px) {
  .hero-primary, .pp-home { padding-inline: calc((100vw - 1600px) / 2); }
}