/* Reading styles for the Library. Kept apart from components.css so that the app's
   styles and the reading styles cannot drift into each other. Colours come from
   palette.css, so both skies work.

   Everything a person reads sits on a glass sheet, never on the sky itself: the sky is lightest
   at the bottom of the screen, and text there falls under the contrast small type needs. */


.site-foot {
  width: min(42rem, calc(100% - 24px));
  margin: 40px auto 0;
  padding: 18px 20px;
  background: var(--surface-glass);
  border: 0.5px solid var(--surface-glass-border);
  border-radius: 20px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.7;
}




.site-head a,
.site-foot a {
  color: inherit;
}

.reading {
  width: min(42rem, calc(100% - 24px));   /* about 70 characters a line: comfortable to read */
  margin: 8px auto 0;
  padding: 20px 22px 26px;
  background: var(--surface-glass);
  border: 0.5px solid var(--surface-glass-border);
  border-radius: 24px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 18px;
  line-height: 1.7;
}

.reading h1 {
  font-size: 30px;
  line-height: 1.2;
  margin: 8px 0 20px;
}

.reading h2 {
  font-size: 20px;
  line-height: 1.3;
  margin: 32px 0 8px;
}

.reading p {
  margin: 0 0 16px;
}

.reading ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.reading li {
  margin-bottom: 8px;
}

.reading a {
  color: var(--accent-strong);
  text-underline-offset: 3px;
}

.crumbs,
.updated {
  color: var(--text-muted);
  font-size: 14px;
}

.updated {
  margin-top: 32px;
}

.lead {
  color: var(--text-muted);
}

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

.article-list li {
  margin-bottom: 20px;
}

.article-list a {
  font-size: 19px;
  font-weight: 500;
  color: var(--text);
}

.article-desc {
  display: block;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.5;
  margin-top: 2px;
}

.after-read {
  margin-top: 32px;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--surface-glass);
  border: 0.5px solid var(--surface-glass-border);
}

.after-read p {
  margin: 0 0 12px;
}

.after-read p:last-child {
  margin: 0;
}

.after-read .btn-primary {
  display: inline-block;
  text-decoration: none;
  /* .reading a { color: inherit } would otherwise win on specificity and grey out the button */
  color: var(--accent-text);
}

/* ---- the course ---------------------------------------------------------
   The lesson pages reuse the reading column; only the parts a lesson has and
   an article does not are styled here. */

.lesson-back {
  margin: 0 0 12px;
  font-size: 15px;
}

.lesson-today,
.lesson-check {
  margin: 28px 0 0;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--surface-glass);
  border: 0.5px solid var(--surface-glass-border);
}

.lesson-today h2,
.lesson-check h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.lesson-today p,
.lesson-check p {
  margin: 0;
}

.lesson-check summary {
  margin-top: 12px;
  cursor: pointer;
  color: var(--accent-strong);
}

.lesson-options {
  margin: 12px 0 0;
  padding-left: 22px;
}

.lesson-options li {
  margin: 4px 0;
}

.lesson-more {
  margin: 28px 0 0;
}

.lesson-mark {
  margin: 28px 0 0;
}

.lesson-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 0.5px solid var(--border);
}

.course-progress {
  margin: 0 0 24px;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--surface-glass);
  border: 0.5px solid var(--surface-glass-border);
  font-size: 16px;
}

/* A read lesson keeps its full title — the tick is added beside it rather than
   fading the text, which would make the list harder to read as it fills up. */
.lesson-list .lesson-done > a::after {
  content: ' ✓';
  color: var(--accent-strong);
}

/* ---- игры для ума -------------------------------------------------------
   The page text is ordinary reading copy; only the board and the controls
   the three puzzles put on screen are styled here. */

.brain-stage {
  margin: 24px 0 8px;
}

.brain-noscript p,
.brain-noscript {
  color: var(--text-muted);
}

.brain-score {
  text-align: center;
  font-size: 17px;
  margin: 0 0 16px;
  color: var(--text-muted);
}

.brain-letters {
  text-align: center;
  font-size: 40px;
  letter-spacing: 6px;
  margin: 0 0 20px;
  text-transform: uppercase;
}

.brain-problem {
  text-align: center;
  font-size: 40px;
  margin: 0 0 20px;
}

.brain-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.brain-input {
  flex: 1 1 160px;
  max-width: 260px;
  /* Never smaller than this: it is aimed at with a thumb, and a 16px font is what stops
     iOS zooming the whole page in when the field is focused. */
  min-height: 52px;
  font-size: 20px;
  padding: 0 14px;
  border-radius: 14px;
  border: 0.5px solid var(--border);
  background: var(--surface-glass);
  color: var(--text);
}

.brain-form .btn-primary {
  min-height: 52px;
  padding: 0 22px;
  font-size: 18px;
}

.brain-status {
  text-align: center;
  font-size: 18px;
  min-height: 28px;
  margin: 18px 0 0;
  color: var(--text-muted);
}

.brain-hint {
  text-align: center;
  font-size: 16px;
  margin: 18px 0 10px;
  color: var(--text-muted);
}

/* The gap is wider between the 2×2 boxes than inside them. Without this the board draws
   every boundary the same, and the rule the game is built on — each 2×2 box holds each
   digit once — has to be held in the player's head instead of being visible. */
.sudoku-grid {
  display: grid;
  grid-template-columns: repeat(2, auto) repeat(2, auto);
  column-gap: 5px;
  row-gap: 5px;
  max-width: min(100%, 300px);
  margin: 0 auto;
}

.sudoku-cell:nth-child(4n + 3) {
  margin-left: 9px;
}

/* The third row only — it opens the second band of boxes. Applying this to rows three and
   four put a box-sized gap inside a box, which is worse than drawing no boxes at all. */
.sudoku-cell:nth-child(n + 9):nth-child(-n + 12) {
  margin-top: 9px;
}

.sudoku-cell {
  aspect-ratio: 1 / 1;
  font-size: 26px;
  border-radius: 12px;
  border: 0.5px solid var(--border);
  background: var(--surface-glass);
  color: var(--text);
  cursor: pointer;
}

/* The numbers that came with the puzzle are not editable, and look it. */
.sudoku-given {
  background: transparent;
  font-weight: 600;
  cursor: default;
}

.sudoku-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 320px;
  margin: 0 auto;
}

.sudoku-key {
  /* Aimed at with a thumb, like every other control in the puzzles. */
  min-width: 52px;
  min-height: 52px;
  font-size: 22px;
  border-radius: 14px;
  border: 0.5px solid var(--border);
  background: var(--surface-glass);
  color: var(--text);
  cursor: pointer;
}

.sudoku-key.picked {
  background: var(--accent);
  color: var(--accent-text);
}

/* ---- мастерская памяти --------------------------------------------------
   The method and the honest note are reading copy in a box; only the parts
   the exercises draw are styled below. */

.workshop-method,
.workshop-honest {
  margin: 28px 0 0;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--surface-glass);
  border: 0.5px solid var(--surface-glass-border);
}

.workshop-method h2,
.workshop-honest h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.workshop-method p:last-child,
.workshop-honest p:last-child {
  margin-bottom: 0;
}

/* «Разбивка на блоки»: digits with a tappable gap between each pair. The gap is a real
   control, so it is as tall as the digits and wide enough for a thumb. */
.chunk-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0 auto 8px;
  max-width: 340px;
}

.chunk-digit {
  flex: 0 0 auto;
  font-size: 30px;
  line-height: 52px;
  font-variant-numeric: tabular-nums;
}

.chunk-cut {
  /* Not `width` alone: as a flex item it then shrinks, and at a narrow width it collapsed
     to nothing — the control was still there and still tappable, but invisible and one
     pixel wide. 28px, not 22: WCAG asks for at least 24 for a target, and a row of fourteen
     digits has thirteen of them to aim at. */
  flex: 0 0 28px;
  min-height: 52px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--accent-strong);
  font-size: 30px;
  line-height: 52px;
  cursor: pointer;
}

/* An uncut gap shows a faint dot, so every place a cut can go is visible before it is used —
   an invisible control is one nobody knows is there. A cut one is the same place, drawn
   as a solid bar. */
.chunk-cut::before {
  content: '·';
  color: var(--text-muted);
  opacity: 0.55;
}

.chunk-cut.picked::before {
  content: '│';
  color: var(--accent-strong);
  opacity: 1;
  font-weight: 700;
}

.chunk-cut span {
  display: none;
}

.chunk-groups {
  text-align: center;
  color: var(--text-muted);
  margin: 0 0 20px;
}

/* «Имена и лица» */
.people-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 0 0 24px;
}

.person {
  margin: 0;
  text-align: center;
  min-width: 78px;
}

.person-face {
  display: block;
  font-size: 44px;
  line-height: 1.2;
}

.person-asked {
  text-align: center;
  font-size: 84px;
  margin: 0 0 20px;
}

.name-btn {
  font-size: 20px;
}

/* «Цепочка-история» */
.chain-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.chain-row li {
  text-align: center;
  font-size: 40px;
  line-height: 1.1;
  min-width: 70px;
}

.chain-word {
  display: block;
  font-size: 15px;
  color: var(--text-muted);
}

.chain-picked {
  text-align: center;
  font-size: 18px;
  min-height: 28px;
  margin: 0 0 16px;
}

/* A choice the player has already used stays visible but plainly spent. */
.kids-choice .kids-btn.picked {
  opacity: 0.45;
}

/* «Дворец памяти» */
.palace-route {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.palace-route li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: var(--surface-glass);
  border: 0.5px solid var(--surface-glass-border);
}

.palace-place,
.palace-thing {
  font-size: 32px;
  line-height: 1;
}

.palace-words {
  font-size: 16px;
}

.palace-asked {
  text-align: center;
  font-size: 72px;
  margin: 0 0 8px;
}

/* «Числа в образы» */
.peg-row {
  text-align: center;
  font-size: 46px;
  line-height: 1.3;
  margin: 0 0 20px;
  word-break: break-word;
}

.peg-number {
  text-align: center;
  font-size: 44px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 4px;
  margin: 0 0 16px;
}

.peg-picked {
  text-align: center;
  font-size: 32px;
  min-height: 44px;
  margin: 0 0 12px;
}

.peg-table {
  margin: 20px 0 0;
}

.peg-table summary {
  cursor: pointer;
  color: var(--accent-strong);
}

.peg-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 6px;
}

/* «Список покупок» */
.grocery-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  font-size: 18px;
}

.grocery-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 30px;
}

/* «Что изменилось» */
.scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 10px;
  max-width: 340px;
  margin: 0 auto 20px;
}

.scene-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  border-radius: 14px;
  border: 0.5px solid var(--border);
  background: var(--surface-glass);
  color: var(--text);
  cursor: pointer;
}

/* The cell that actually changed, marked after the answer either way. */
.scene-cell.picked {
  background: var(--accent);
  color: var(--accent-text);
}

.scene-static {
  cursor: default;
}

/* «Маршрут»: a fixed four-wide board, since the path is drawn on it cell by cell */
.route-grid {
  grid-template-columns: repeat(4, 1fr);
  max-width: 300px;
}

/* «Своими словами» */
.message-box {
  margin: 0 0 20px;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--surface-glass);
  border: 0.5px solid var(--surface-glass-border);
  font-size: 19px;
  line-height: 1.5;
}

.option-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 8px;
}

.option-btn {
  min-height: 64px;
  padding: 12px 16px;
  text-align: left;
  font-size: 17px;
  line-height: 1.4;
  border-radius: 16px;
  border: 0.5px solid var(--border);
  background: var(--surface-glass);
  color: var(--text);
  cursor: pointer;
}

/* «Сделай число» */
.make-nums,
.make-ops {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 14px;
}

.make-num,
.make-op {
  min-width: 64px;
  min-height: 64px;
  font-size: 26px;
  border-radius: 16px;
  border: 0.5px solid var(--border);
  background: var(--surface-glass);
  color: var(--text);
  cursor: pointer;
}

.make-num.picked,
.make-op.picked {
  background: var(--accent);
  color: var(--accent-text);
}

.make-steps {
  text-align: center;
  color: var(--text-muted);
  font-size: 16px;
  margin: 0 0 10px;
}

.make-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.make-tools .btn-primary {
  min-height: 48px;
  padding: 0 18px;
  font-size: 16px;
}

.make-tools .btn-primary:disabled {
  opacity: 0.45;
}


/* A ticked item in a multi-select. `.picked` means «spent» in the single-choice exercises, and
   fades; a ticked one is the opposite — chosen — and must look chosen, not switched off. */
.kids-choice .kids-btn.chosen {
  background: var(--accent);
  color: var(--accent-text);
}