/* AI Checklist — the grid and the problem pages. Colors, type sizes, the top bar and the footer
   come from sota.css, shared with the SOTA site and the IOAI Guide. */

:root {
  /* Problem statuses: a strong color for text, marks and bars, a pale tint for the cell */
  --st-progress: #8F6D00;
  --st-progress-bg: #FBF3DC;
  --st-solved: #1B6642;
  --st-solved-bg: #E3F1E8;
  --st-helped: #1F48C7;
  --st-helped-bg: #E8EDFB;

  --wide: 1240px;
}

html { scroll-padding-top: calc(var(--topbar-h) + 72px); }

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

.page {
  max-width: var(--wide);
  margin-inline: auto;
  padding: 36px clamp(16px, 4vw, 40px) 96px;
}

/* Title block and overall progress */
.summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  align-items: end;
  gap: 24px 56px;
  padding: 20px 0 24px;
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.summary-single { grid-template-columns: minmax(0, 1fr); }
.summary-text { display: grid; gap: 10px; }

.eyebrow {
  font-size: var(--text-label);
  font-variant-caps: all-small-caps;
  letter-spacing: .08em;
  color: var(--graphite);
}
h1 {
  font-size: clamp(28px, 3.6vw, var(--text-title));
  line-height: 1.12;
  font-weight: 700;
  text-wrap: balance;
}
.lede {
  max-width: 62ch;
  font-size: var(--text-body);
  color: var(--graphite);
}
.hint {
  max-width: 66ch;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--graphite);
}

.overall { display: grid; gap: 10px; }
.overall-count { font-size: var(--text-ui); color: var(--graphite); }
.overall-count strong {
  margin-right: 4px;
  font-size: var(--text-title);
  line-height: 1;
  color: var(--ink);
}

.bar {
  display: flex;
  height: 10px;
  background: var(--plate);
  box-shadow: inset 0 0 0 1px var(--hairline);
  overflow: hidden;
}
.seg { width: 0; transition: width .25s ease; }
.seg-solved { background: var(--st-solved); }
.seg-helped { background: var(--st-helped); }
.seg-progress { background: var(--st-progress); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--graphite);
}
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend .num { color: var(--ink); }

/* Status marks, in the cells, the legend and the filter chips: empty (not started), half full
   (in progress), a filled tick (solved) and an outlined tick (solved with help). */
.mark {
  position: relative;
  flex: none;
  width: 13px;
  height: 13px;
  background: var(--paper);
  border: 1.5px solid color-mix(in srgb, var(--graphite) 55%, var(--paper));
  transition: background-color .15s ease, border-color .15s ease;
}
.mark::after {
  content: "";
  position: absolute;
  left: 3px;
  top: .5px;
  width: 4px;
  height: 7px;
  border: solid var(--paper);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  opacity: 0;
}
.mark-progress,
.cell[data-status="progress"] .mark {
  border-color: var(--st-progress);
  background: linear-gradient(to top, var(--st-progress) 50%, var(--paper) 50%);
}
.mark-solved,
.cell[data-status="solved"] .mark {
  border-color: var(--st-solved);
  background: var(--st-solved);
}
.mark-helped,
.cell[data-status="helped"] .mark {
  border-color: var(--st-helped);
  background: var(--paper);
}
.mark-helped::after,
.cell[data-status="helped"] .mark::after { border-color: var(--st-helped); }
.mark-solved::after,
.mark-helped::after,
.cell[data-status="solved"] .mark::after,
.cell[data-status="helped"] .mark::after { opacity: 1; }
/* STIX Two draws text a little high, so marks beside text move up to match */
.legend .mark,
.chip .mark { margin-top: -3px; }

/* Export, import and reset: small, since they're rarely needed */
.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  font-size: var(--text-small);
  line-height: 1.4;
}
.tool {
  padding: 0;
  font: inherit;
  color: var(--blue);
  background: none;
  border: 0;
  cursor: pointer;
}
.tool:hover { text-decoration: underline; text-underline-offset: 2px; }
/* The file input is hidden, so the Import label shows focus for it */
.tools label:has(+ #import-file:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }

/* Filters, kept in view while scrolling the grid */
.toolbar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 36px;
  padding-block: 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.toolbar-label {
  margin-right: 4px;
  font-size: var(--text-label);
  font-variant-caps: all-small-caps;
  letter-spacing: .08em;
  color: var(--graphite);
}

/* Chips and the area menu share the control height and the 3px optical nudge from sota.css */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--control-h);
  padding: 3px 10px 0;
  font: inherit;
  font-size: var(--text-small);
  line-height: 1;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  cursor: pointer;
}
.chip:hover { border-color: var(--graphite); }
.chip .n { color: var(--graphite); }
.chip[aria-pressed="true"] {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.chip[aria-pressed="true"] .n { color: color-mix(in srgb, var(--paper) 72%, var(--ink)); }
.chip[data-filter="none"][aria-pressed="true"] .mark { border-color: var(--paper); background: transparent; }

.select {
  height: var(--control-h);
  padding: 3px 30px 0 10px;
  font: inherit;
  font-size: var(--text-small);
  line-height: 1;
  color: var(--ink);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235F6070' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 11px center;
  border: 1px solid var(--hairline);
  border-radius: 0;
  appearance: none;
  cursor: pointer;
}
.select:hover { border-color: var(--graphite); }
.select.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.noscript {
  margin-top: 16px;
  padding: 10px 14px;
  font-size: var(--text-small);
  background: var(--plate);
}

/* ---------- the grid ---------- */

/* Every olympiad on the page, grouped by kind, as jump links */
.olympiads {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding-block: 14px 12px;
  border-bottom: 1px solid var(--hairline);
}
.olympiad-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  font-size: var(--text-small);
}
.olympiad-group ul {
  display: contents;
  list-style: none;
}
.olympiad-group a { color: var(--ink); }
.olympiad-group a:hover { color: var(--blue); }
.olympiad-group .num { color: var(--graphite); }

/* Every olympiad in a column near the left edge of the window, on wide screens only, like the
   contents rail on the SOTA site. The page moves right to make room for it. The rail sticks inside
   a track as tall as the page content, so it stops above the footer on its own. */
.rail-track { display: none; }

@media (min-width: 1400px) {
  :root {
    --rail-w: 176px;
    --rail-left: 24px;
    --page-left: max(calc(var(--rail-left) + var(--rail-w) + 8px), calc((100vw - var(--wide)) / 2));
  }
  .page:has(.rail-track) {
    position: relative;
    margin-left: var(--page-left);
  }
  /* The rail replaces the list of olympiads under the filters */
  .page:has(.rail-track) .olympiads { display: none; }
  .rail-track {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--rail-left) - var(--page-left));
    width: var(--rail-w);
  }
  .rail {
    position: sticky;
    top: calc(var(--topbar-h) + 24px);
    max-height: calc(100vh - var(--topbar-h) - 40px);
    padding: 28px 0 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Scrolls without a visible scrollbar; the fades show there is more */
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
    font-size: 13px;
    line-height: 1.3;
  }
  .rail::-webkit-scrollbar { display: none; }
}

.rail-title {
  margin: 0 0 6px 13px;
  font-size: var(--text-label);
  font-variant-caps: all-small-caps;
  letter-spacing: .08em;
  color: var(--ink);
}
.rail-group {
  margin: 10px 0 2px 13px;
  font-size: 12.5px;
  font-variant-caps: all-small-caps;
  letter-spacing: .08em;
  color: var(--graphite);
}
/* A hairline track down the left; the olympiad in view gets a red mark on it, as on the other sites */
.rail-list {
  list-style: none;
  padding: 0;
  border-left: 1px solid var(--hairline);
}
.rail-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-left: -1px;
  padding: 2px 0 2px 12px;
  border-left: 2px solid transparent;
  color: var(--graphite);
}
.rail-list a:hover { color: var(--ink); text-decoration: none; }
.rail-list a.is-active {
  color: var(--ink);
  border-left-color: var(--red);
}
.rail-count {
  flex: none;
  font-size: 12px;
  color: var(--graphite);
  font-variant-numeric: tabular-nums;
}
.rail-count.has-progress { color: var(--st-solved); }

.source { margin-top: 48px; }
.source-kicker {
  flex-basis: 100%;
  font-size: var(--text-small);
  color: var(--graphite);
}
.source-kicker a { color: inherit; text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 2px; }
.source-kicker a:hover { color: var(--ink); }
.source-progress { font-size: var(--text-small); color: var(--graphite); }
.source-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}
.source-head h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  font-size: var(--text-h2);
  line-height: 1.2;
}
.source-full {
  font-size: var(--text-ui);
  font-weight: 400;
  color: var(--graphite);
}
.source-full:hover { color: var(--ink); }

.year-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  font-size: var(--text-small);
}
.year-jump .toolbar-label { margin-right: 0; }
.year-jump a { color: var(--ink); }
.year-jump a:hover { color: var(--blue); }

/* A year: its heading, then one row per round */
.year { margin-top: 28px; }
.year-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 20px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
}
.year-head h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.2;
}
.year-place {
  font-size: var(--text-ui);
  font-weight: 400;
  color: var(--graphite);
}
.year-progress {
  font-size: var(--text-small);
  color: var(--graphite);
}
.year-progress .num { color: var(--ink); }

.contests {
  list-style: none;
  padding: 0;
}

/* One row per round: its name, the problems, and a count. Every row in a source has the same
   number of columns (--cols), so problems line up down the page. */
.contest {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) 3.25rem;
  align-items: start;
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--hairline);
}
.contest:last-child { border-bottom: 0; }

.contest-label {
  display: grid;
  gap: 2px;
  padding-top: 8px;
}
.contest-round {
  font-size: var(--text-ui);
  line-height: 1.3;
  color: var(--ink);
}
.contest-round:hover { color: var(--blue); }
.contest-place,
.contest-reuse {
  font-size: var(--text-small);
  line-height: 1.35;
  color: var(--graphite);
}
.contest-reuse { font-style: italic; }

.contest-progress {
  padding-top: 8px;
  font-size: var(--text-small);
  text-align: right;
  color: var(--graphite);
}
.contest.is-complete .contest-progress {
  font-weight: 700;
  color: var(--st-solved);
}

.cells {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 8px;
}

.cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 5.5rem;
  padding: 9px 11px 10px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
  container-type: inline-size;
}
/* A task repeated from another round has a dashed edge */
.cell.is-repeat { border-style: dashed; }

/* The whole cell is the status button; the problem name is a link laid on top of it */
.cell-toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.cell-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.cell > :not(.cell-toggle) {
  position: relative;
  pointer-events: none;
}
.cell > .cell-name { pointer-events: auto; }

/* The label stays on one line. A narrow cell shows its status by the mark alone (the button's
   label still says it). */
.cell-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 6px;
  font-size: 13px;
  line-height: 1.3;
}
.cell-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--graphite);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cell-tag {
  font-size: 13.5px;
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: .06em;
  white-space: nowrap;
}
@container (max-width: 150px) {
  .cell-tag { display: none; }
}

.cell-name {
  align-self: flex-start;
  font-size: var(--text-ui);
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: pretty;
}
.cell-name:hover { color: var(--blue); }

/* The area, at the foot of the cell */
.cell-foot {
  margin-top: auto;
  font-size: 13px;
  line-height: 1.35;
  color: var(--graphite);
}

.cell[data-status="progress"] { background: var(--st-progress-bg); border-color: color-mix(in srgb, var(--st-progress) 40%, var(--paper)); }
.cell[data-status="solved"] { background: var(--st-solved-bg); border-color: color-mix(in srgb, var(--st-solved) 40%, var(--paper)); }
.cell[data-status="helped"] { background: var(--st-helped-bg); border-color: color-mix(in srgb, var(--st-helped) 40%, var(--paper)); }
.cell[data-status="progress"] .cell-tag { color: var(--st-progress); }
.cell[data-status="solved"] .cell-tag { color: var(--st-solved); }
.cell[data-status="helped"] .cell-tag { color: var(--st-helped); }

.cell:hover { border-color: var(--ink); }
.cell[data-status=""]:hover .mark { border-color: var(--ink); }

.cell.is-faded { opacity: .25; }

/* ---------- problem pages ---------- */

.problem-head {
  display: grid;
  gap: 12px;
  padding: 20px 0 24px;
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: var(--text-small);
  color: var(--graphite);
}
.crumbs a { color: var(--graphite); }
.crumbs a:hover { color: var(--ink); }
.crumb-sep { color: var(--hairline); }

.problem-title { max-width: 32ch; }
.problem-original {
  margin-top: -4px;
  font-size: var(--text-small);
  color: var(--graphite);
}
.problem-original span { font-style: italic; }
.problem-summary {
  max-width: 62ch;
  font-size: var(--text-h3);
  font-style: italic;
  line-height: 1.5;
  color: var(--graphite);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  list-style: none;
}
.tag {
  padding: 3px 8px 1px;
  font-size: var(--text-label);
  line-height: 1.45;
  border: 1px solid var(--ink);
}
.tag-quiet {
  color: var(--graphite);
  border-color: var(--hairline);
}
.tag-lang {
  color: var(--st-helped);
  border-color: currentColor;
}

/* The task's files: the English download (a filled box) and the boxed link to the original */
.problem-open {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.box-ink {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.box-ink:hover { background: var(--red); border-color: var(--red); }

.problem-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 6px;
}

/* Four joined buttons; the chosen one fills with its status color */
.status-picker {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.status-picker button {
  height: var(--control-h);
  padding: 3px 12px 0;
  font: inherit;
  font-size: var(--text-small);
  line-height: 1;
  white-space: nowrap;
  color: var(--graphite);
  background: var(--paper);
  border: 0;
  cursor: pointer;
}
.status-picker button:hover { color: var(--ink); }
.status-picker button[aria-pressed="true"] { color: var(--paper); background: var(--ink); }
.status-picker[data-status="progress"] button[aria-pressed="true"] { background: var(--st-progress); }
.status-picker[data-status="solved"] button[aria-pressed="true"] { background: var(--st-solved); }
.status-picker[data-status="helped"] button[aria-pressed="true"] { background: var(--st-helped); }

.problem-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "main links"
    "main meta";
  gap: 36px 64px;
  margin-top: 36px;
}
.problem-main {
  grid-area: main;
  display: grid;
  align-content: start;
  gap: 44px;
}
.problem-links { grid-area: links; }
.problem-meta { grid-area: meta; align-self: start; }

.block { display: grid; gap: 14px; }
.block > h2 { font-size: var(--text-h2); line-height: 1.25; }
.prose { display: grid; gap: 14px; max-width: 68ch; }
/* File names and identifiers, styled like inline code in the IOAI Guide */
.prose code,
.facts code {
  padding: .08em .32em;
  font-family: var(--mono);
  font-size: .82em;
  background: var(--plate);
  overflow-wrap: anywhere;
  hyphens: manual;
}
.fine {
  max-width: 68ch;
  padding-top: 10px;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--graphite);
  border-top: 1px solid var(--hairline);
}
.empty { color: var(--graphite); }

/* "At a glance": label and value rows between rules, like a booktabs table */
.facts {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  max-width: 68ch;
  font-size: var(--text-ui);
  line-height: 1.5;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.facts div { display: contents; }
.facts dt,
.facts dd {
  padding-block: 10px;
  border-top: 1px solid var(--hairline);
}
.facts div:first-child > * { border-top: 0; }
.facts dt {
  padding-right: 16px;
  font-variant-caps: all-small-caps;
  letter-spacing: .06em;
  color: var(--graphite);
}
.facts ul { padding-left: 1.1em; }

/* "In English": the translated files, each with a link to its original */
.downloads {
  display: grid;
  max-width: 68ch;
  padding: 0;
  list-style: none;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.download {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  padding-block: 9px 8px;
}
.download + .download { border-top: 1px solid var(--hairline); }
.download-file { display: grid; gap: 1px; color: var(--ink); }
.download-file:hover { color: var(--blue); }
.download-title::before {
  content: "↓";
  display: inline-block;
  width: 1.3em;
  color: var(--red);
}
.download-meta {
  padding-left: 1.3em;
  font-size: var(--text-small);
  color: var(--graphite);
  font-variant-numeric: tabular-nums;
}
.download-original { font-size: var(--text-small); }

/* The translated notebook, readable on the page. Closed by default: it can be long. */
.statement {
  max-width: 68ch;
  border: 1px solid var(--hairline);
}
.statement > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  padding: 10px 14px 8px;
  cursor: pointer;
  list-style: none;
}
.statement > summary::-webkit-details-marker { display: none; }
.statement > summary::before {
  content: "+";
  width: 1ch;
  font-family: var(--mono);
  color: var(--red);
}
.statement[open] > summary::before { content: "−"; }
.statement > summary:hover .statement-title { text-decoration: underline; text-underline-offset: 2px; }
.statement-meta { font-size: var(--text-small); color: var(--graphite); }
.statement[open] > summary { border-bottom: 1px solid var(--hairline); }
.statement-body {
  display: grid;
  gap: 16px;
  padding: 18px 18px 22px;
  font-size: var(--text-ui);
  line-height: 1.6;
}

/* Notebook text: headings, lists, tables and code from other people's markdown */
.nb-md { display: grid; gap: 12px; min-width: 0; }
.nb-md > * { margin: 0; }
.nb-md h3 { font-size: var(--text-h3); line-height: 1.3; }
.nb-md h4, .nb-md h5, .nb-md h6 { font-size: var(--text-ui); line-height: 1.35; }
.nb-md ul, .nb-md ol { padding-left: 1.3em; display: grid; gap: 4px; }
.nb-md img { max-width: 100%; height: auto; }
.nb-md blockquote { padding-left: 14px; color: var(--graphite); border-left: 2px solid var(--hairline); }
.nb-md hr { border: 0; border-top: 1px solid var(--hairline); }
.nb-md code {
  padding: .08em .32em;
  font-family: var(--mono);
  font-size: .84em;
  background: var(--plate);
  overflow-wrap: anywhere;
}
.nb-md pre, .nb-code {
  margin: 0;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  background: var(--plate);
  overflow-x: auto;
}
.nb-md pre code { padding: 0; background: none; overflow-wrap: normal; }
.nb-code { border-left: 2px solid var(--hairline); }
.nb-md table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--text-small); }
.nb-md th, .nb-md td { padding: 4px 10px; text-align: left; border-bottom: 1px solid var(--hairline); }
.nb-md th { border-bottom-color: var(--ink); }
.nb-md .katex-display { overflow-x: auto; overflow-y: hidden; padding-block: 2px; }

.problem-links .label,
.problem-meta .label { padding-bottom: 6px; }

/* Links, grouped by kind (Statement, Notebooks, Data...) between rules */
.resources { border-top: 1.5px solid var(--ink); }
.res-group {
  padding-block: 10px 9px;
  border-bottom: 1px solid var(--hairline);
}
.res-kind {
  margin-bottom: 3px;
  font-size: var(--text-label);
  font-weight: 400;
  font-variant-caps: all-small-caps;
  letter-spacing: .06em;
  line-height: 1.3;
  color: var(--graphite);
}
.res-group ul {
  display: grid;
  gap: 5px;
  padding: 0;
  list-style: none;
}
.res-group a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 12px;
  color: var(--ink);
}
.res-group a:hover { text-decoration: none; }
.res-group a:hover .res-title { text-decoration: underline; text-underline-offset: 2px; }
.res-title {
  font-size: var(--text-ui);
  line-height: 1.35;
  color: var(--blue);
}
.res-host {
  font-size: 13px;
  white-space: nowrap;
  color: var(--graphite);
}

.meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px;
  padding-top: 10px;
  font-size: var(--text-small);
  line-height: 1.45;
  border-top: 1.5px solid var(--ink);
}
.meta div { display: contents; }
.meta dt {
  font-variant-caps: all-small-caps;
  letter-spacing: .06em;
  color: var(--graphite);
}
.appearance { display: block; }

.pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.pager a {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  color: var(--ink);
  border: 1px solid var(--hairline);
}
.pager a:hover { border-color: var(--ink); text-decoration: none; }
.pager-next { grid-column: 2; text-align: right; }
.pager-label {
  font-size: var(--text-label);
  font-variant-caps: all-small-caps;
  letter-spacing: .06em;
  color: var(--graphite);
}
.pager-title { font-size: var(--text-ui); line-height: 1.35; }
.pager-context { font-size: 13px; color: var(--graphite); }

/* ---------- narrower screens ---------- */

@media (max-width: 1100px) {
  .cells { grid-template-columns: repeat(var(--cols-md), minmax(0, 1fr)); }
  .contest { grid-template-columns: 9.5rem minmax(0, 1fr) 3rem; }
}

@media (max-width: 900px) {
  .problem-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "links" "main" "meta";
    gap: 40px;
  }
}

@media (max-width: 720px) {
  .summary { grid-template-columns: minmax(0, 1fr); }
  /* Chips wrap onto several lines here, so the toolbar scrolls with the page */
  .toolbar { position: static; gap: 10px 24px; }
  .contest {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
  }
  .contest-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    padding-top: 0;
  }
  /* The count sits beside the round name, above the problems */
  .contest-progress {
    grid-row: 1;
    grid-column: 2;
    padding-top: 0;
  }
  .cells {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .status-picker {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dd { padding-top: 0; border-top: 0; }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager-next { grid-column: 1; }
}

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

@media print {
  .topbar, .toolbar, .tools, .skip, .footer, .problem-actions, .pager, .rail-track { display: none !important; }
  .page { margin-inline: 0 !important; }
  body { font-size: 10pt; }
  .page { max-width: none; padding: 0; }
  .contest { break-inside: avoid; }
  a { color: inherit; }
}

/* ---------- the translations page ---------- */

.table-wrap { max-width: 100%; margin-top: 28px; overflow-x: auto; }
.translations {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--text-ui);
  line-height: 1.45;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.translations caption {
  padding-bottom: 8px;
  text-align: left;
  font-size: var(--text-small);
  color: var(--graphite);
}
.translations th,
.translations td {
  padding: 9px 14px 8px 0;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--hairline);
}
.translations thead th {
  font-weight: 400;
  font-size: var(--text-label);
  font-variant-caps: all-small-caps;
  letter-spacing: .06em;
  color: var(--graphite);
  border-top: 0;
  border-bottom: 1px solid var(--ink);
}
.translations td ul { display: grid; gap: 3px; padding: 0; list-style: none; }
.translations .file-meta { color: var(--graphite); font-size: var(--text-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.translations .file-meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 2px; }
.translations .file-meta a:hover { color: var(--ink); }
.translations .when { white-space: nowrap; font-variant-numeric: tabular-nums; }