/* Sample pages (/primer/): the report and the guide shown as sheets of paper, the document set grouped by files. */

/* ── top bar over a paper page ── */
.pbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: rgba(10, 12, 15, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid #252E39;
  font: 600 15px -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #F3F6F8; }
.pbar__back { color: #D4FF3A; text-decoration: none; white-space: nowrap; }
.pbar span { margin-left: auto; color: #9FAAB6; font-weight: 500; font-size: 14px; }
.sheet { width: 210mm; margin: 24px auto 48px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
@media (max-width: 640px) { .pbar span { display: none; } .sheet { margin: 8px auto 24px; } }

/* ── the document set ── */
.pr { width: min(860px, 100% - 32px); margin: 0 auto; padding: clamp(32px, 6vw, 72px) 0 0; }
.pr h1 { margin: 0 0 14px; font-size: clamp(34px, 5vw, 52px); line-height: 1.05; letter-spacing: -0.04em; }
.pr__lead { max-width: 44rem; margin: 0 0 8px; color: var(--muted); font-size: 18px; }
.pr__group { margin: 40px 0 0; }
.pr__group h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: -0.02em; }
.pr__glead { margin: 0 0 14px; color: var(--muted); font-size: 16px; }
.pdoc, .pguide { display: block; margin: 0 0 10px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.pdoc summary, .pguide { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; color: var(--text); text-decoration: none; }
.pdoc summary::-webkit-details-marker { display: none; }
.pdoc[open] { border-color: rgba(212, 255, 58, 0.45); }
.pdoc__num { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(212, 255, 58, 0.14); color: var(--accent); font-weight: 800; }
.pdoc__text { display: grid; gap: 2px; min-width: 0; }
.pdoc__text b { font-size: 17px; }
.pdoc__text em { font-style: normal; color: var(--muted); font-size: 15px; }
.pdoc__open { flex: none; margin-left: auto; padding: 8px 14px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--text); }
.pdoc .pdoc__open::after { content: "Открыть"; }
.pdoc[open] .pdoc__open::after { content: "Свернуть"; }
.pdoc[open] .pdoc__open { color: var(--accent); }
.pguide:hover, .pdoc summary:hover .pdoc__open { border-color: var(--accent); }
.paper { margin: 0 12px 12px; padding: clamp(20px, 5vw, 48px); border-radius: 14px; background: #fff; color: #1b2027;
  font: 400 16px/1.6 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; overflow-wrap: anywhere; }
.paper h1 { margin: 0 0 12px; font-size: clamp(22px, 3.4vw, 28px); line-height: 1.2; letter-spacing: -0.01em; color: #1b2027; }
.paper h2 { margin: 28px 0 10px; font-size: 19px; color: #1b2027; }
.paper h3 { margin: 20px 0 8px; font-size: 16px; color: #1b2027; }
.paper p { margin: 0 0 10px; }
.paper ul { margin: 0 0 12px; padding-left: 22px; }
.paper li { margin: 0 0 6px; }
.paper table { width: 100%; margin: 8px 0 18px; border-collapse: collapse; font-size: 14px; }
.paper th, .paper td { padding: 8px 10px; border: 1px solid #d5dbe1; text-align: left; vertical-align: top; }
.paper th { background: #eef2f5; }
.paper em { display: block; margin: 12px 0; padding: 10px 14px; border-left: 4px solid #9ab81c; background: #f4f8e6; font-style: normal; }
.paper pre { overflow: auto; padding: 12px; border-radius: 8px; background: #f2f4f6; font-size: 13px; }
.paper a { color: #2b5bd7; }
.pr__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 40px 0 0; }
.pr__cta .link-btn { margin: 0; }
@media (max-width: 640px) {
  .pdoc summary, .pguide { display: grid; grid-template-columns: 40px 1fr; gap: 10px 12px; padding: 14px; }
  .pdoc__open { grid-column: 2; justify-self: start; margin-left: 0; }
  .paper { margin: 0 6px 6px; padding: 18px 16px; font-size: 15px; }
  .paper table { font-size: 13px; }
  .paper th:first-child, .paper td:first-child { width: 38%; overflow-wrap: normal; hyphens: auto; }
  .pr__cta .btn { width: 100%; }
}