/* Heterra guide: a contents bar on the left, one chapter on the right. Colours come from ../style.css. */
html { scroll-padding-top: 76px; }
.guide-top .wrap { max-width: none; }
.guide-top nav a.here { color: var(--heading); font-weight: 600; }

.guide { display: grid; grid-template-columns: 372px minmax(0, 1fr); }

/* contents */
.side {
  position: sticky; top: 57px; align-self: start;
  height: calc(100vh - 57px); overflow-y: auto;
  padding: 22px 16px 40px 24px;
  border-right: 1px solid var(--line); background: var(--bg-soft);
  font-size: 15px; line-height: 1.25;
}
.side .part { margin: 14px 0 3px; font-size: 16px; font-weight: 700; color: var(--heading); }
.side .part:first-child { margin-top: 0; }
.side ul { margin: 0; padding: 0; list-style: none; }
.side li a { display: block; padding: 3px 10px; border-radius: 6px; color: var(--text); }
.side li a:hover { background: var(--line); text-decoration: none; }
.side li a.current { background: var(--bg); color: var(--heading); font-weight: 600; }
.side li a abbr { display: inline-block; min-width: 44px; font-weight: 600; text-decoration: none; }
.side ul ul { margin: 1px 0 4px 14px; border-left: 1px solid var(--line); }
.side ul ul a { padding: 2px 10px; font-size: 14px; color: var(--heading); }
.side ul ul a.on { font-weight: 600; }
.side-toggle { display: none; }

/* chapter */
/* the text column, 820 px wide, in the middle of the space right of the contents */
.page { min-width: 0; padding: 40px max(48px, calc((100% - 820px) / 2)) 72px; }
.crumb { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.page h1 { margin: 0 0 8px; white-space: normal; font: 600 34px/1.2 var(--serif); letter-spacing: -0.015em; color: var(--heading); }
.page .sub { margin: 0 0 24px; font-size: 19px; color: var(--muted); }
.page h2 { margin: 56px 0 14px; padding-top: 22px; border-top: 1px solid var(--line); font: 600 26px/1.25 var(--serif); }
.page h2 .num { margin-right: 10px; color: var(--muted); font-weight: 600; }
.page h3 { margin: 30px 0 8px; font: 600 19px/1.35 var(--sans); color: var(--heading); }
.page h4 { margin: 20px 0 4px; font: 600 16px/1.4 var(--sans); color: var(--heading); }
.page p { margin: 0 0 12px; }
.page ul, .page ol { margin: 0 0 14px; padding-left: 24px; }
.page li { margin-bottom: 5px; }
.page code { padding: 1px 5px; border-radius: 4px; background: var(--bg-soft); font: 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.page b, .page strong { color: var(--heading); font-weight: 600; }
.ui { color: var(--heading); font-weight: 600; white-space: nowrap; }

/* at a glance */
.glance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.glance div { padding: 14px 16px; border-left: 1px solid var(--line); font-size: 15.5px; }
.glance div:first-child { border-left: 0; }
.glance h4 { margin: 0 0 4px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* notes */
.note, .paper, .warn { margin: 14px 0 16px; padding: 12px 16px; border-radius: 8px; font-size: 16px; }
.note { background: var(--bg-soft); }
.warn { background: var(--bg-soft); box-shadow: inset 3px 0 0 var(--heterogeneity); }
.note ul, .warn ul { margin-bottom: 0; }
.paper { background: var(--bg-soft); box-shadow: inset 3px 0 0 var(--accent); }
.paper .label, .note .label, .warn .label { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.paper p:last-child, .note p:last-child, .warn p:last-child { margin-bottom: 0; }

/* figures */
.page figure { margin: 18px 0 22px; }
.page figure img { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: zoom-in; }
.page figure.shot img { border: 0; box-shadow: 0 6px 24px rgba(26, 26, 26, 0.14); }
/* a chart: its width is set on the picture (1.5 px for each point of the exported figure), so the 8 pt
   text of every chart shows at 12 px, a little smaller than the text around it */
.page figure.chart img, .page figure.paper-fig img { width: auto; max-width: 100%; margin: 0 auto; }
.page figure.chart figcaption, .page figure.paper-fig figcaption { max-width: 640px; margin-left: auto; margin-right: auto; }
.page figcaption { margin-top: 8px; font-size: 14.5px; color: var(--muted); }
.page figcaption b { color: var(--heading); }

/* the panel, step by step */
.page .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 18px 0 22px; padding: 0; list-style: none; counter-reset: step; }
.steps.five { grid-template-columns: repeat(5, 1fr); gap: 12px; }
.steps.two { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
.steps.four { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.steps li { margin: 0; counter-increment: step; font-size: 14.5px; color: var(--muted); }
.steps li::before { content: "Step " counter(step); display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.steps img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; cursor: zoom-in; }
.steps b { display: block; margin: 8px 0 2px; color: var(--heading); }

/* tables */
.table-wrap { overflow-x: auto; margin: 14px 0 20px; }
.page table { border-collapse: collapse; width: 100%; font-size: 15px; }
.page th, .page td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.page th { color: var(--heading); font-weight: 600; white-space: nowrap; }
.page td.n, .page th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.page caption { caption-side: top; text-align: left; margin-bottom: 6px; font-size: 14.5px; color: var(--muted); }

/* exercises */
.exercise { margin: 14px 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px; }
.exercise h4 { margin: 0 0 6px; }
.exercise .level { margin-left: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.exercise details { margin-top: 8px; }
.exercise summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 15px; }
.exercise details p { margin: 8px 0 0; }

/* cards on the first page */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 16px 0 22px; }
.card { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); }
.card:hover { border-color: var(--muted); text-decoration: none; }
.card .group-name { margin-bottom: 2px; font-size: 12px; }
.card b { display: block; }
.card span { display: block; font-size: 15px; color: var(--muted); }

.lang-en { display: block; font-size: 13.5px; color: var(--muted); }

.refs { font-size: 15.5px; }
.refs li { margin-bottom: 8px; }
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); }
.pager a { max-width: 48%; }
.pager small { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.guide-foot { margin-top: 28px; font-size: 14px; color: var(--muted); }

@media (max-width: 980px) {
  .guide { display: block; }
  .side { position: static; height: auto; padding: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .side-toggle { display: block; width: 100%; padding: 12px 16px; border: 0; background: none; color: var(--heading); font: 600 15px var(--sans); text-align: left; cursor: pointer; }
  .side-toggle::after { content: " ▾"; color: var(--muted); }
  .side .side-body { display: none; padding: 0 12px 16px; }
  .side.open .side-body { display: block; }
  .page { padding: 28px 16px 56px; }
  .page h1 { font-size: 28px; }
  .glance { grid-template-columns: 1fr; }
  .glance div { border-left: 0; border-top: 1px solid var(--line); }
  .glance div:first-child { border-top: 0; }
  .steps, .steps.five, .steps.four { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: 1fr; }
}
@media print {
  .top, .side, .pager { display: none; }
  .guide { display: block; }
  .exercise details > * { display: block; }
}