/* Everything people read and do sits on a sheet. The sheet re-points the colour tokens, so every part inside it (buttons,
   fields, tables, verdicts, the editor) is on paper without knowing about it. The paper itself follows the theme. */

.sheet, .page, .ncard, .session-card {
  /* Components inside (results, options, verdicts, buttons, the editor) read these: paper colours here. */
  --paper: var(--card-paper);
  --paper-2: color-mix(in srgb, var(--card-ink) 4%, var(--card-paper));
  --paper-3: color-mix(in srgb, var(--card-ink) 8%, var(--card-paper));
  --ink: var(--card-ink);
  --ink-2: color-mix(in srgb, var(--card-ink) 86%, var(--card-paper));
  --muted: var(--card-muted);
  --on-ink: var(--card-paper);
  --rule: color-mix(in srgb, var(--card-ink) 10%, var(--card-paper));
  --rule-strong: color-mix(in srgb, var(--card-ink) 24%, var(--card-paper));
  --link: var(--card-link);
  --focus: var(--card-link);
  --good: var(--card-good);
  --good-bg: color-mix(in srgb, var(--card-good) 12%, var(--card-paper));
  --bad: var(--card-bad);
  --bad-bg: color-mix(in srgb, var(--card-bad) 10%, var(--card-paper));
  --warn: var(--card-warn);
  --seq-0: var(--card-seq-0);
  --seq-1: var(--card-seq-1);
  --seq-2: var(--card-seq-2);
  --seq-3: var(--card-seq-3);
  --seq-4: var(--card-seq-4);
  --warn-bg: color-mix(in srgb, var(--card-warn) 14%, var(--card-paper));
  --code-bg: color-mix(in srgb, var(--card-ink) 5%, var(--card-paper));
  --mark-soft: color-mix(in srgb, var(--mark) 35%, var(--card-paper));
  --desk: var(--card-paper);
  --margin-at: 54px;
  --margin-line: linear-gradient(to right, transparent var(--margin-at), color-mix(in srgb, var(--card-margin) 70%, var(--card-paper)) var(--margin-at) calc(var(--margin-at) + 2px), transparent calc(var(--margin-at) + 2px));
}
.sheet, .page, .session-card, .index-card:not(:focus-visible) { outline: 1px solid var(--sheet-edge); outline-offset: -1px; }
.sheet .btn.secondary, .page .btn.secondary { --btn-bg: var(--paper-2); }

.sheet {
  position: relative;
  min-width: 0;
  padding: 34px 44px 34px 76px;
  border-radius: var(--r-l);
  background: var(--card-paper) var(--margin-line);
  color: var(--card-ink);
  box-shadow: var(--shadow-card);
}
.sheet h1, .sheet h2, .sheet h3, .sheet h4 { color: var(--card-ink); font-family: var(--font); }  /* headings read the same on a sheet as off one */

.mt-s { margin-top: 6px; }
.mt-m { margin-top: 14px; }
.mt-l { margin-top: 18px; }
.mt-xl { margin-top: 28px; }
.gap-m { height: 14px; }

@media (max-width: 700px) {
  .sheet { --margin-at: 18px; padding: 22px 16px 24px 30px; }
}

/* The sheet as the page: the desk shows around it. */
main.sheet {
  --margin-at: 56px;
  width: auto;
  margin: 20px 20px 20px 12px;
  min-height: calc(100vh - 40px);
  padding: 40px clamp(20px, 4vw, 56px) 72px 84px;
}
@media (min-width: 1500px) { main.sheet { margin-inline: auto; width: min(100% - 40px, calc(var(--content-w) + 140px)); } }
main.sheet.reading { max-width: calc(var(--reading-w) + 140px); margin-inline: auto; }
@media (max-width: 960px) {
  main.sheet { --margin-at: 30px; margin: 8px; min-height: 0; padding: 24px 14px 48px 42px; }
}

/* Inside a sheet there is one material: parts are separated by rules, not boxed again. */
.sheet .panel, .sheet .fact { background: transparent; border: 0; border-top: 1px solid var(--rule); border-radius: 0; box-shadow: none; padding-inline: 0; }
.sheet .page-head + .panel, .sheet > .panel:first-child { border-top: 0; padding-top: 0; }
.sheet .lede, .sheet .q-text { font-family: var(--serif); }
.sheet .empty { background: transparent; border: 1px dashed var(--rule-strong); border-radius: var(--r-s); }
.empty > svg { width: 34px; height: 34px; color: var(--muted); }

/* Today: the session is written straight on the sheet, its numbers hanging in the red margin. */
.sheet .session-card { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.sheet .session-card::before { display: none; }
.sheet .session-head h2 { font-size: var(--t-2xl); line-height: 32px; }
.sheet .session-steps a { height: auto; min-height: calc(2 * var(--line)); padding-block: 7px; border-top: 1px solid var(--rule); }
.sheet .session-steps strong { font-family: var(--serif); font-weight: 600; }
.sheet .session-steps a::before { left: -70px; top: 10px; background: var(--card-paper); }
.sheet .session-progress { display: none; }
.sheet .session-head { height: auto; padding: 0 0 12px; }
.sheet .session-foot { height: auto; padding-top: 14px; border-top: 1px solid var(--rule); align-items: center; }
.sheet .session-foot span { margin: 0; }
@media (max-width: 960px) {
  .sheet .session-steps a::before { left: -40px; width: 22px; height: 22px; }
  .sheet .session-steps strong, .sheet .session-steps small { white-space: normal; }
}

/* A quiz in one click; the rest behind Customize. */
.quick-start { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 4px 0 18px; }
.customize { border-top: 1px solid var(--rule); padding-top: 12px; }
.customize > summary { cursor: pointer; font-weight: 650; min-height: 32px; }
.customize[open] > summary { margin-bottom: 18px; }

.callout > svg { width: 20px; height: 20px; flex: none; }

.design-size-xs { font-size: var(--t-xs); }
.design-size-s { font-size: var(--t-s); }
.design-size-m { font-size: var(--t-m); }
.design-size-l { font-size: var(--t-l); }
.design-size-xl { font-size: var(--t-xl); }
.design-size-2xl { font-size: var(--t-2xl); }
.design-size-3xl { font-size: var(--t-3xl); }
.design-size-hero { font-size: var(--t-hero); line-height: 1.1; }