/* Group study sheet -- rendered by hooks/study_sheet.py. Four A4 pages, two sheets double-sided.
 *
 * The memory verse cards' unit (memory-verses.css): --mm is 1/210 of the sheet's width, so the
 * on-screen sheet is an exact scale model of the printed A4 page. Paper in both site palettes.
 * Each page is a flex column inside a 12 mm margin; the parts that must fit (passage, questions)
 * take what is left, and the ruled writing space is whatever remains after them. */

.ss {
  /* The block is the container, not the sheet: a sheet's own type, padding and gap resolve cqw
     against the container above it, so with the sheet as container they followed the viewport and
     the preview ssFit measures stopped matching paper. Its width is the sheet's, below. */
  container-type: inline-size;
  --mm: calc(min(100cqw - 1.6rem, 210mm) / 210);
  --ss-ink: #1d1b19;
  --ss-muted: #6b665f;
  /* Chosen to hold up printed in greyscale: the accent reads as near-black, the rules as a grey a
     toner printer still lays down. */
  --ss-rule: #aaa49a;
  --ss-accent: #6a3410;
  --ss-tint: #f6f1e8;
  --ss-serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --ss-sans: system-ui, sans-serif;
  margin: 1.6rem 0;
  /* Clear of the sticky header when the title's printer icon jumps here. */
  scroll-margin-top: 3.6rem;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
}
.ss > summary {
  cursor: pointer;
  padding: 0.6rem 0.8rem;
  font-weight: 700;
}
.ss > summary small { font-weight: 400; color: var(--md-default-fg-color--light); margin-left: 0.4rem; }
.ss-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
  padding: 0 0.8rem 1rem;
  font-size: 0.75rem;
}
.ss-controls p { margin: 0; flex: 1 1 20rem; }
.ss-controls .md-button { margin: 0; }
.ss-controls label { cursor: pointer; white-space: nowrap; }

/* Black & white: no tints, black labels, outlined badges and a grey graphic, for a black-only or
   toner printer, where tints come out as dither and colour as muddy grey. */
.ss:has(.ss-opt-mono:checked) {
  --ss-accent: #000;
  --ss-tint: #fff;
  --ss-rule: #8a8a8a;
  --ss-muted: #444;
}
.ss:has(.ss-opt-mono:checked) .ss-badge {
  background: #fff;
  color: #000;
  box-shadow: inset 0 0 0 calc(0.3 * var(--mm)) #000;
}
.ss:has(.ss-opt-mono:checked) .ss-point,
.ss:has(.ss-opt-mono:checked) .ss-stephead,
.ss:has(.ss-opt-mono:checked) .ss-grouphead {
  box-shadow: inset 0 0 0 calc(0.25 * var(--mm)) #000;
}
.ss:has(.ss-opt-mono:checked) .ss-graphic { filter: grayscale(1) contrast(1.15); }

/* ---- Sheet ------------------------------------------------------------------------------- */

/* Type in points, for older eyes: 12 pt for everything read (--pt12), never smaller to make room;
   10 pt for labels, 9 pt for the footer. 1 pt is 0.3528 mm. */
.ss-sheet {
  --pt: calc(0.3528 * var(--mm));
  --pt12: calc(12 * var(--pt));
  position: relative;
  width: calc(210 * var(--mm));
  aspect-ratio: 210 / 297;
  margin: 0 auto 1.6rem;
  background: #fff;
  color: var(--ss-ink);
  box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 0.18);
  overflow: hidden;
  font-family: var(--ss-serif);
  line-height: 1.35;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--mm));
  padding: calc(12 * var(--mm)) calc(12 * var(--mm)) calc(17 * var(--mm));
  box-sizing: border-box;
  font-size: var(--pt12);
}
.ss-sheet > * { position: relative; }
.ss-sheet p { margin: 0; }
.ss-sheet h2 {
  margin: 0;
  font-family: var(--ss-serif);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ss-ink);
}
.ss-sheet b, .ss-sheet strong { font-weight: 600; }
.ss-sheet small { font-size: 0.85em; }

/* Section labels: capitals in the accent colour. */
.ss-h {
  display: flex;
  align-items: center;
  gap: calc(2.5 * var(--mm));
  margin-bottom: calc(2 * var(--mm));
  font-family: var(--ss-sans);
  font-size: calc(10 * var(--pt));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ss-accent);
}
.ss-h small { font-weight: 400; letter-spacing: 0.04em; color: var(--ss-muted); text-transform: none; }

.ss-badge {
  display: inline-flex;
  align-items: baseline;
  gap: calc(0.6 * var(--mm));
  padding: calc(0.6 * var(--mm)) calc(2 * var(--mm));
  border-radius: calc(4 * var(--mm));
  background: var(--ss-accent);
  color: #fff;
  font-family: var(--ss-sans);
  font-size: calc(10 * var(--pt));
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}
.ss-sheet .ss-badge small { font-weight: 400; font-size: 0.85em; color: inherit; letter-spacing: 0; }
.ss-badge-open { float: left; margin: calc(0.4 * var(--mm)) calc(2.5 * var(--mm)) 0 0; }

/* ---- Page 1 ------------------------------------------------------------------------------ */

.ss-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: calc(1 * var(--mm)) calc(4 * var(--mm));
  padding-bottom: calc(2.5 * var(--mm));
  border-bottom: calc(0.5 * var(--mm)) solid var(--ss-ink);
}
.ss-kicker {
  grid-column: 1 / -1;
  font-family: var(--ss-sans);
  font-size: calc(10 * var(--pt));
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ss-muted);
}
.ss-head h2 { font-size: calc(22 * var(--pt)); line-height: 1.1; }
.ss-ref {
  max-width: calc(70 * var(--mm));
  text-align: right;
  font-family: var(--ss-sans);
  font-size: calc(11 * var(--pt));
  color: var(--ss-muted);
}

.ss-point {
  padding: calc(3 * var(--mm)) calc(4 * var(--mm));
  background: var(--ss-tint);
  border-left: calc(1 * var(--mm)) solid var(--ss-accent);
}
.ss-point > b {
  margin-right: calc(1.5 * var(--mm));
  font-family: var(--ss-sans);
  font-size: calc(10 * var(--pt));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ss-accent);
}

.ss-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--mm));
  overflow: hidden;
}

.ss-passage { margin-top: calc(1.4 * var(--mm)) !important; line-height: 1.45; }
.ss-passage > b { font-family: var(--ss-sans); font-size: 0.9em; margin-right: calc(1.2 * var(--mm)); }
.ss-passage sup {
  font-family: var(--ss-sans);
  font-size: 0.7em;
  color: var(--ss-muted);
  margin: 0 calc(0.5 * var(--mm)) 0 calc(1 * var(--mm));
}
.ss-also {
  margin-top: calc(1.6 * var(--mm)) !important;
  font-family: var(--ss-sans);
  font-size: calc(10 * var(--pt));
  color: var(--ss-muted);
}

/* Three rows, each a full-width label with writing lines under it: room for two lines each. */
.ss-look { flex: 1; min-height: calc(62 * var(--mm)); display: flex; flex-direction: column; }
.ss-look-rows { flex: 1; display: grid; grid-template-rows: repeat(3, 1fr); gap: calc(2.5 * var(--mm)); }
.ss-look-rows div { display: flex; flex-direction: column; border-top: calc(0.3 * var(--mm)) solid var(--ss-ink); padding-top: calc(1 * var(--mm)); }
.ss-look-rows b { font-family: var(--ss-sans); font-size: calc(11 * var(--pt)); line-height: 1.5; }

/* Ruled writing space, wherever an <i> is left empty for it, 8 mm apart for a larger hand. */
/* A tiled single rule, not a repeating-linear-gradient: Chrome's PDF output drops every few
   stripes of a repeating gradient. White, not transparent, above the rule: transparent is black
   at zero alpha, and Safari's PDF output can drop the alpha and print the box solid black. */
.ss-look-rows i, .ss-q i, .ss-notes i {
  flex: 1;
  min-height: calc(8 * var(--mm));
  background: linear-gradient(#fff calc(100% - 0.25 * var(--mm)), var(--ss-rule) 0)
    0 0 / 100% calc(8 * var(--mm)) repeat-y;
}

/* ---- Page 2: the picture and the study in brief ------------------------------------------ */

.ss-p2-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(5 * var(--mm)); }
.ss-graphic { display: block; min-width: 0; min-height: 0; object-fit: contain; object-position: top; }
/* A tall graphic takes the page's full height, and the outline the column it leaves. */
.ss-portrait .ss-p2-body { flex-direction: row; }
.ss-portrait .ss-graphic { height: 100%; width: auto; max-width: 68%; }
.ss-landscape .ss-graphic { width: 100%; height: auto; max-height: 60%; }
.ss-brief { flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
.ss-brief ol { margin: 0; padding-left: calc(6 * var(--mm)); }
/* The ink is restated because Material colours list items itself, pale grey in its dark palette. */
.ss-brief li { margin: 0 0 calc(2.2 * var(--mm)); line-height: 1.3; color: var(--ss-ink); }
.ss-brief li::marker { font-family: var(--ss-sans); color: var(--ss-muted); }
/* Set by ssFit when the outline overruns its column: section names only, then no outline. */
.ss-titles .ss-brief li > span { display: none; }
.ss-nobrief .ss-brief { display: none; }
.ss-notes { flex: 1; min-height: calc(40 * var(--mm)); display: flex; flex-direction: column; }
.ss-none .ss-brief { flex: none; }

.ss-foot {
  position: absolute !important;
  left: calc(12 * var(--mm));
  right: calc(12 * var(--mm));
  bottom: calc(7 * var(--mm));
  display: flex;
  justify-content: space-between;
  gap: calc(4 * var(--mm));
  font-family: var(--ss-sans);
  font-size: calc(9 * var(--pt));
  color: var(--ss-muted);
}

/* ---- Pages 3 and 4 ----------------------------------------------------------------------- */

.ss-head-back { grid-template-columns: 1fr; }
.ss-head-back h2 { font-size: calc(15 * var(--pt)); }
/* Every question gets the same room to write: the groups and questions step aside (display:
   contents), so each answer space is a flex item of one column, and all share its spare height
   equally whatever the length of the question above them. */
.ss-questions { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ss-group, .ss-q { display: contents; }
.ss-questions .ss-h { margin: calc(4 * var(--mm)) 0 0; }
.ss-questions > .ss-group:first-child .ss-h { margin-top: 0; }
.ss-q p { margin-top: calc(2.5 * var(--mm)); }
.ss-q i { flex: 1 1 0; }
.ss-n {
  display: inline-block;
  min-width: calc(6 * var(--mm));
  font-family: var(--ss-sans);
  font-weight: 700;
  color: var(--ss-accent);
}
.ss-q strong { font-family: var(--ss-sans); font-size: 0.9em; }

.ss-respond { display: flex; flex-direction: column; gap: calc(5 * var(--mm)); }
.ss-tad ul { margin: 0; padding-left: calc(5 * var(--mm)); }
.ss-tad li { margin: 0 0 calc(1.6 * var(--mm)); color: var(--ss-ink); }
.ss-memory p { font-style: italic; }
.ss-memory cite {
  display: block;
  margin-top: calc(1 * var(--mm));
  font-style: normal;
  font-family: var(--ss-sans);
  font-size: calc(10 * var(--pt));
  color: var(--ss-muted);
}
.ss-prayer p + p { margin-top: calc(1.4 * var(--mm)); }
.ss-p4 .ss-notes { min-height: calc(24 * var(--mm)); }

.ss-link {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--mm));
  padding-top: calc(3 * var(--mm));
  border-top: calc(0.3 * var(--mm)) solid var(--ss-rule);
  font-family: var(--ss-sans);
  font-size: calc(10 * var(--pt));
}
.ss-qr svg { display: block; width: calc(18 * var(--mm)); height: calc(18 * var(--mm)); }
.ss-url { display: flex; flex-direction: column; color: var(--ss-muted); }
.ss-url b { color: var(--ss-ink); }

/* ---- Two pages: each step with its questions ------------------------------------------ */

.ss:has(.ss-opt-two:checked) .ss-four,
.ss:not(:has(.ss-opt-two:checked)) .ss-two { display: none; }

/* One run of blocks across both pages (ssFlow); each block keeps its own height. */
.ss-flow { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.ss-b { flex: none; }
.ss-lead + .ss-lead { margin-top: calc(2 * var(--mm)); }
.ss-lead > b, .ss-grouphead, .ss-step {
  font-family: var(--ss-sans);
  font-size: calc(10 * var(--pt));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ss-accent);
}
.ss-lead > b { margin-right: calc(1.5 * var(--mm)); }
/* Steps and the closing groups are tinted bands, like the point: a part of the study to walk
   through, set apart from the numbered questions under it. */
.ss-stephead, .ss-grouphead {
  margin-top: calc(4 * var(--mm));
  padding: calc(1.4 * var(--mm)) calc(3 * var(--mm));
  background: var(--ss-tint);
  border-left: calc(1 * var(--mm)) solid var(--ss-accent);
  line-height: 1.35;
}
.ss-step { margin-right: calc(2 * var(--mm)); }
.ss-keys {
  display: block;
  margin-top: calc(1 * var(--mm));
  font-family: var(--ss-sans);
  font-size: calc(11 * var(--pt));
  color: var(--ss-muted);
}
.ss-two .ss-q { display: block; }
.ss-two .ss-q p { margin-top: calc(2.5 * var(--mm)); }
.ss-two .ss-q i { display: block; flex: none; height: calc(16 * var(--mm)); }
.ss-two .ss-tad ul { margin-top: calc(2 * var(--mm)); }
.ss-two .ss-point { margin-top: calc(2 * var(--mm)); }
/* Set by ssFlow when page 2 overruns: key verses go, then the QR code, then the gaps close up,
   then the step notes, then the answer spaces drop to one line. */
.ss-nokeys .ss-keys, .ss-titles .ss-note, .ss-noqr .ss-link { display: none; }
.ss-snug .ss-stephead, .ss-snug .ss-grouphead { margin-top: calc(2.5 * var(--mm)); padding-block: calc(0.8 * var(--mm)); }
.ss-snug .ss-q p { margin-top: calc(1.5 * var(--mm)); }
.ss-tight .ss-q i { height: calc(8 * var(--mm)); }
.ss-tight .ss-q p { margin-top: calc(1 * var(--mm)); }

/* Page 4's Be transformed question: two lines to answer in, above the think / attitude / do. */
.ss-p4 .ss-tad .ss-q i { display: block; height: calc(16 * var(--mm)); }
.ss-p4 .ss-tad ul { margin-top: calc(3 * var(--mm)); }
/* Set by ssFit when page 3 or 4 overruns. */
.ss-p3.ss-snug .ss-questions .ss-h { margin-top: calc(2 * var(--mm)); }
.ss-p3.ss-snug .ss-q p { margin-top: calc(1 * var(--mm)); }
.ss-nonotes .ss-notes { display: none; }
.ss-noempty .ss-empty { display: none; }
.ss-p4.ss-tight .ss-tad .ss-q i { height: calc(8 * var(--mm)); }

/* ---- Print -------------------------------------------------------------------------------- */

@page study-sheet {
  size: A4 portrait;
  margin: 0;
}

@media print {
  /* html.ss-on is set and cleared by the reader's own clicks (hooks/study_sheet.py), never by
     print events: Safari fires afterprint before it lays out the print, and Material opens every
     <details> while printing. */
  .ss-on body :is(.md-header, .md-tabs, .md-sidebar, .md-footer, .md-top,
    .md-source-file, .md-path, .md-content__button, .md-banner),
  .ss-on .md-content__inner > :not(.ss),
  .ss > :is(summary, .ss-controls) {
    display: none !important;
  }
  .ss-on body { page: study-sheet; }
  .ss { --mm: 1mm; }
  .ss-on :is(.md-main__inner, .md-content, .md-content__inner, .md-grid, .ss) {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    border: 0 !important;
  }
  .ss-on .md-content__inner::before { display: none; }
  .ss-sheet {
    width: 210mm;
    /* Short of 297 mm so a few px of offset cannot spill a blank page after a side. */
    height: 292mm;
    aspect-ratio: auto;
    margin: 0;
    box-shadow: none;
  }
  .ss-sheet + .ss-sheet { break-before: page; }
  /* With the block closed, printing the study leaves the sheet out. */
  html:not(.ss-on) .ss { display: none !important; }
}