/* Шпаргалка к контрольной (js/views/cheat-sheet.js). Плотная страница: на экране колонки по ширине,
   на бумаге — две колонки мелким шрифтом, без шапки и кнопок. */

.cs {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom, 0px));
}

.cs-top {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.cs-top__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: calc(64px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}
.cs-top__right { margin-left: auto; }
.cs-top__inner,
.cs-main { max-width: calc(1180px + 2 * var(--gutter)); }
.cs-main { padding-top: var(--s-6); }

.cs-head { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.cs-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-2);
  font-size: var(--fs-14);
  font-weight: 600;
}
.cs-head__title { font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -0.03em; }

.cs-empty { display: grid; gap: var(--s-3); justify-items: start; }
.cs-empty__why { max-width: 58ch; color: var(--text-2); font-size: var(--fs-14); }

.cs-bar { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.cs-meta { margin-bottom: var(--s-4); color: var(--text-3); font-size: var(--fs-14); }
.cs-stale {
  margin-bottom: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--warning-soft);
  color: var(--text);
  font-size: var(--fs-14);
}

.cs-cols { columns: 3 300px; column-gap: var(--s-4); }
.cs-block {
  break-inside: avoid;
  margin-bottom: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.cs-block__title { font-family: var(--font-ui); font-size: var(--fs-16); font-weight: 700; line-height: 1.3; }
.cs-block__src { margin-top: 2px; color: var(--text-3); font-size: var(--fs-12); }
.cs-block__src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cs-block__src a:hover { color: var(--accent-text); }
.cs-block__items { display: grid; gap: 6px; margin: var(--s-2) 0 0; padding: 0; list-style: none; font-size: var(--fs-14); line-height: 1.45; }
.cs-item b { font-weight: 600; }
.cs-item__mono {
  font-family: var(--font-mono, "Cascadia Mono", Consolas, monospace);
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cs-item.is-formula .cs-item__mono { color: var(--accent-text); }
.cs-item.is-code .cs-item__mono {
  display: block;
  margin-top: 2px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: var(--surface-2, var(--bg));
}

.cs-exam,
.cs-gaps { margin-bottom: var(--s-4); font-size: var(--fs-14); }
.cs-exam {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.cs-exam__title,
.cs-gaps__title { margin-bottom: var(--s-1); font-family: var(--font-ui); font-size: var(--fs-14); font-weight: 700; }
.cs-exam ul,
.cs-gaps ul { display: grid; gap: 2px; margin: 0; padding-left: 1.1em; }
.cs-gaps { color: var(--text-2); }

@media print {
  .cs-top,
  .cs-bar,
  .cs-meta,
  .cs-stale,
  .cs-gaps { display: none !important; }
  .cs { min-height: 0; padding: 0; }
  .cs-main { max-width: none; padding: 0; }
  .cs-head { margin-bottom: 6pt; }
  .cs-head__title { font-size: 14pt; }
  .cs-cols { columns: 2; column-gap: 10pt; }
  .cs-block { margin-bottom: 6pt; padding: 0; background: none; }
  .cs-block__title { font-size: 9.5pt; }
  .cs-block__src { display: none; }
  .cs-block__items { gap: 1pt; margin-top: 2pt; font-size: 8pt; line-height: 1.3; }
  .cs-item__mono { font-size: 7.5pt; }
  .cs-item.is-code .cs-item__mono { padding: 1pt 3pt; }
  .cs-exam { margin-bottom: 6pt; padding: 3pt 0; background: none; font-size: 8pt; }
}