/* study-guide-v2 paper styles for the /app/study reader.
 * GENERATED from study-guide-v2/assets/{tokens.css,study-guide.css} plus the
 * preview template's paper rules - regenerate by re-running the concatenation
 * in the cutover notes rather than editing by hand. tokens are scoped to
 * .sg-paper (not :root) so they cannot collide with AppLayout variables. */
.sg-paper {
  --bg: #f5f0eb;
  --surface: #FFFFFF;
  --surface-muted: #f5f5f4;
  --border: #e7e5e4;
  --border-hover: #d6d3d1;
  --ink: #1c1917;
  --ink-body: #44403c;
  --ink-muted: #57534e;
  --ink-subdued: #78716c;
  --ink-faint: #a8a29e;
  --brand: #15803d;
  --brand-dark: #116631;
  --brand-soft: #f0fdf4;
  --warn: #d97706;
  --warn-dark: #b45309;
  --warn-soft: #fef3c7;
  --warn-ink: #78350f;
  --danger: #dc2626;
  --danger-dark: #b91c1c;
  --danger-soft: #fef2f2;
  --danger-ink: #991b1b;
  --info: #1e3a5f;
  --info-dark: #1a3050;
  --info-soft: #eff6ff;
  --success: #15803d;
  --success-dark: #116631;
  --success-soft: #f0fdf4;
  --focus-ring: #15803d;

  /* Canonical type scale (W4.3). Override only via tokens.mjs. */
  --type-display: clamp(2rem, 4vw, 2.75rem);
  --type-h1: clamp(1.75rem, 3.5vw, 2.25rem);
  --type-h2: clamp(1.375rem, 2.4vw, 1.625rem);
  --type-h3: 1.125rem;
  --type-body-lg: 1.0625rem;
  --type-body: 0.9375rem;
  --type-caption: 0.8125rem;
  --type-label: 0.75rem;
  --type-display-tracking: -0.015em;

  /* Spacing scale (4pt-based), semantic names. Prefer these over ad-hoc px. */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Radius scale. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* Elevation roles. shadow-press = tactile 3D companion (color set per
     component); shadow-lift = hover float; shadow-modal = overlay. */
  --shadow-sm: 0 1px 2px rgba(28,25,23,0.06);
  --shadow-lift: 0 4px 12px rgba(28,25,23,0.08);
  --shadow-modal: 0 12px 32px rgba(28,25,23,0.12);
  --shadow-focus: 0 0 0 3px rgba(21, 128, 61, 0.30);

  /* Study-guide paper surface (scoped to .sg-paper subtrees, see tokens.mjs). */
  --sg-pink: #F2166B;
  --sg-orange: #FF6B20;
  --sg-rose: #E11D48;
  --sg-yellow: #FFD139;
  --sg-green: #73B01B;
  --sg-teal: #0093B4;
  --sg-purple: #6236A6;
  --sg-pink-soft: #FFE4EE;
  --sg-orange-soft: #FFE8D9;
  --sg-yellow-soft: #FFF4CC;
  --sg-green-soft: #EDF7DE;
  --sg-teal-soft: #DCEFF5;
  --sg-purple-soft: #EDE4F9;
  --sg-hl-yellow: rgba(255, 209, 57, 0.48);
  --sg-hl-pink: rgba(242, 22, 107, 0.20);
  --sg-hl-green: rgba(115, 176, 27, 0.26);
  --sg-hl-teal: rgba(0, 147, 180, 0.20);
  --sg-hl-purple: rgba(98, 54, 166, 0.18);
  --sg-brand: #15803d;
  --sg-brand-soft: #dcfce7;
  --sg-paper: #FFFFFF;
  --sg-paper-edge: #EFEDE8;
  --sg-rule: #DFDBD4;
  --sg-ink: #1C1917;
  --sg-pencil: #57534E;
  --sg-font-marker: "Lilita One", "Nunito", system-ui, sans-serif;
  --sg-font-script: "Caveat Brush", "Nunito", cursive;
  --sg-font-hand: "Patrick Hand", "Nunito", cursive;

  /* Legacy --cc-* aliases. Chapter slide bodyHtml and reference embeds
     reference these directly via inline styles. */
  --cc-surface: #FFFFFF;
  --cc-cream: #f5f0eb;
  --cc-dark: #1c1917;
  --cc-body-text: #44403c;
  --cc-muted: #57534e;
  --cc-card-border: #e7e5e4;
  --cc-coral: #15803d;
  --cc-sage: #15803d;
  --cc-rose: #dc2626;
  --cc-memory-text: #14532d;
  --cc-tip-bg: #fef3c7;
  --cc-tip-border: #fcd34d;
  --cc-tip-text: #78350f;
  --cc-info-bg: #dbeafe;
  --cc-info-border: #bfdbfe;
}
/* =========================================================================
   Study-guide "paper" surface.

   Every rule here is scoped under .sg-paper so the scrapbook look cannot leak
   into app chrome. Colors and fonts come from tokens.mjs (--sg-*); nothing in
   this file hardcodes a hex value. To retheme the whole study guide, edit
   tokens.mjs, not this file.

   Decoration policy: spiral binding, paperclips and floating doodles are
   desktop-only and are switched off below 900px, where they cost more real
   estate than they add. Tape headers, sticky notes and the color-coded table
   survive at every width because they carry meaning, not just personality.

   Everything decorative is drawn in CSS (gradients, pseudo-elements, inline
   SVG) rather than shipped as images, so there are no assets to version and
   no extra requests.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Paper surface
   ------------------------------------------------------------------------- */

.sg-paper {
  --sg-pad: clamp(20px, 4vw, 56px);
  position: relative;
  background: var(--sg-paper);
  color: var(--sg-ink);
  font-family: var(--font-sans, 'Nunito', system-ui, sans-serif);
  border-radius: var(--radius-lg);
  border: 1px solid var(--sg-paper-edge);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05), 0 12px 32px rgba(28, 25, 23, 0.07);
  padding: var(--sg-pad);
  padding-left: calc(var(--sg-pad) + 34px); /* clearance for the binding */
  overflow: hidden;
}

/* Spiral binding down the left edge. Rings repeat via background-size so the
   count adapts to page height without JS. Kept deliberately small and low
   contrast — at full strength it reads as a ladder and pulls the eye away
   from the content. */
.sg-paper::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 26px;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--sg-paper-edge) 70%, #fff),
    transparent
  );
  border-right: 1px dashed color-mix(in srgb, var(--sg-rule) 55%, transparent);
  pointer-events: none;
}

/* The rings themselves — small ovals riding the perforation line. */
.sg-paper::after {
  content: '';
  position: absolute;
  inset: 14px auto 14px 7px;
  width: 14px;
  background-image: radial-gradient(
    ellipse 6px 4px at 50% 50%,
    color-mix(in srgb, var(--sg-pencil) 32%, transparent) 0 58%,
    transparent 62%
  );
  background-size: 14px 58px;
  background-repeat: repeat-y;
  pointer-events: none;
}

/* Ruled-paper variant for note-taking blocks. */
/* Collapse trailing margin on whatever block ends the page, so the only space
   below the last element is the paper's own padding. Without this a page can
   end 130px above its own edge. */
.sg-paper > *:last-child { margin-bottom: 0; }
.sg-paper > *:first-child { margin-top: 0; }

.sg-paper--ruled {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 27px,
    var(--sg-rule) 27px 28px
  );
}

/* -------------------------------------------------------------------------
   2. Typography
   ------------------------------------------------------------------------- */

.sg-paper .sg-title {
  font-family: var(--sg-font-marker);
  font-weight: 400; /* Lilita One ships a single weight */
  letter-spacing: 0.01em;
  line-height: 1.02;
  color: var(--sg-ink);
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  text-transform: uppercase;
  margin: 0;
}

/* The one script word per header. Sits on a colored swipe. */
.sg-paper .sg-title-script {
  display: inline-block;
  font-family: var(--sg-font-script);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.005em;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: #fff;
  padding: 0.08em 0.55em 0.16em;
  border-radius: 999px 999px 999px 999px / 60% 60% 60% 60%;
  background: var(--sg-purple);
  transform: rotate(-1.2deg);
}

.sg-paper .sg-kicker {
  font-family: var(--sg-font-hand);
  font-size: 1.05rem;
  color: var(--sg-pencil);
  letter-spacing: 0.02em;
}

/* Highlighter swipe behind inline text. Skewed and slightly irregular so it
   reads as a marker stroke rather than a <mark> rectangle. */
.sg-paper .sg-hl {
  background: linear-gradient(
    100deg,
    transparent 0.4%,
    var(--sg-hl-yellow) 1.4%,
    var(--sg-hl-yellow) 97%,
    transparent 99%
  );
  padding: 0.05em 0.18em;
  border-radius: 0.24em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.sg-paper .sg-hl--pink   { background-image: linear-gradient(100deg, transparent 0.4%, var(--sg-hl-pink) 1.4%,   var(--sg-hl-pink) 97%,   transparent 99%); }
.sg-paper .sg-hl--green  { background-image: linear-gradient(100deg, transparent 0.4%, var(--sg-hl-green) 1.4%,  var(--sg-hl-green) 97%,  transparent 99%); }
.sg-paper .sg-hl--teal   { background-image: linear-gradient(100deg, transparent 0.4%, var(--sg-hl-teal) 1.4%,   var(--sg-hl-teal) 97%,   transparent 99%); }
.sg-paper .sg-hl--purple { background-image: linear-gradient(100deg, transparent 0.4%, var(--sg-hl-purple) 1.4%, var(--sg-hl-purple) 97%, transparent 99%); }

/* Handwritten annotation, e.g. "you got this!" in the margin. */
.sg-paper .sg-scrawl {
  font-family: var(--sg-font-script);
  color: var(--sg-teal);
  font-size: 1.25rem;
  transform: rotate(-6deg);
  display: inline-block;
}

/* -------------------------------------------------------------------------
   3. Washi tape
   ------------------------------------------------------------------------- */

.sg-tape {
  position: relative;
  display: inline-block;
  padding: 0.34em 1.1em 0.4em;
  font-family: var(--sg-font-marker);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sg-teal);
  transform: rotate(-1.4deg);
  /* Torn/irregular ends rather than a clean rectangle. */
  clip-path: polygon(
    0 6%, 4% 0, 96% 3%, 100% 0,
    100% 94%, 96% 100%, 4% 97%, 0 100%
  );
}

/* Patterned tape variants, matching the printed source's dotted + striped rolls. */
.sg-tape--dots::after,
.sg-tape--stripes::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
}
.sg-tape--dots::after {
  background-image: radial-gradient(circle at 50% 50%, #fff 0 1.6px, transparent 1.8px);
  background-size: 9px 9px;
}
.sg-tape--stripes::after {
  background-image: repeating-linear-gradient(
    -45deg, #fff 0 3px, transparent 3px 8px
  );
}

.sg-tape--brand  { background: var(--sg-brand); }
.sg-tape--pink   { background: var(--sg-pink); }
.sg-tape--orange { background: var(--sg-orange); }
.sg-tape--yellow { background: var(--sg-yellow); color: var(--sg-ink); }
.sg-tape--green  { background: var(--sg-green); }
.sg-tape--purple { background: var(--sg-purple); }

/* -------------------------------------------------------------------------
   4. Sticky notes + callout cards
   ------------------------------------------------------------------------- */

.sg-sticky {
  position: relative;
  padding: 16px 18px 18px;
  background: var(--sg-yellow-soft);
  border-radius: 2px;
  box-shadow: 2px 3px 8px rgba(28, 25, 23, 0.14);
  transform: rotate(-1.1deg);
  font-family: var(--sg-font-hand);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--sg-ink);
}
.sg-sticky--pink   { background: var(--sg-pink-soft); }
.sg-sticky--teal   { background: var(--sg-teal-soft); }
.sg-sticky--green  { background: var(--sg-green-soft); }
.sg-sticky--purple { background: var(--sg-purple-soft); }
.sg-sticky--right  { transform: rotate(1.3deg); }

/* Folded bottom-right corner. */
.sg-sticky::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  border-width: 0 0 18px 18px;
  border-style: solid;
  border-color: transparent transparent rgba(28, 25, 23, 0.10) transparent;
}

/* The four recurring content boxes: Pearls, Checklist, Pathology, Notes.
   All share a card shell; only the accent color and border style differ. */
.sg-box {
  --sg-box-accent: var(--sg-teal);
  position: relative;
  background: var(--sg-paper);
  border: 2px solid var(--sg-box-accent);
  border-radius: 10px;
  padding: 26px 20px 20px;
  margin-top: 14px;
}
.sg-box--dashed { border-style: dashed; }

/* Tape-style label that straddles the box's top edge. */
.sg-box > .sg-box-label {
  position: absolute;
  top: -14px;
  left: 16px;
  font-family: var(--sg-font-marker);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sg-ink);
  background: color-mix(in srgb, var(--sg-box-accent) 26%, #fff);
  padding: 4px 12px 5px;
  border-radius: 4px;
  transform: rotate(-1deg);
  white-space: nowrap;
}

.sg-box--pearls    { --sg-box-accent: var(--sg-teal); }
.sg-box--checklist { --sg-box-accent: var(--sg-green); }
.sg-box--pathology { --sg-box-accent: var(--sg-yellow); }
.sg-box--notes     { --sg-box-accent: var(--sg-purple); }
.sg-box--errors    { --sg-box-accent: var(--sg-rose); }

/* Marker-drawn bullet lists inside the boxes. */
.sg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 0.94rem;
  line-height: 1.55;
}
.sg-list > li {
  position: relative;
  padding-left: 24px;
}
.sg-list > li::before {
  content: '★';
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--sg-box-accent, var(--sg-teal));
  font-size: 0.95em;
}
.sg-list--hearts > li::before { content: '♥'; color: var(--sg-pink); }
.sg-list--crosses > li::before { content: '✕'; color: var(--sg-rose); font-weight: 700; }

/* Checklist: real checkboxes students can tick, state held by the component. */
.sg-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 0.93rem;
  line-height: 1.5;
}
.sg-check > li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
}
.sg-check input[type='checkbox'] {
  appearance: none;
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  border: 2px solid var(--sg-green);
  border-radius: 3px;
  cursor: pointer;
  display: grid;
  place-content: center;
}
.sg-check input[type='checkbox']::after {
  content: '✓';
  font-size: 13px;
  line-height: 1;
  color: var(--sg-green);
  transform: scale(0);
  transition: transform 120ms ease;
}
.sg-check input[type='checkbox']:checked::after { transform: scale(1); }
.sg-check input[type='checkbox']:focus-visible {
  outline: 2px solid var(--sg-teal);
  outline-offset: 2px;
}
.sg-check input:checked + span,
.sg-check input:checked + label { color: var(--sg-pencil); text-decoration: line-through; }
/* The checklist text is a real <label> now, so it toggles the box. It was a
   <span>, which left the input with no accessible name (axe "label",
   critical) and nothing to click but the 20px box itself. */
.sg-check label { cursor: pointer; }

/* Write-in lines for "My Technique" / "Notes". */
.sg-writein {
  display: grid;
  gap: 18px;
  margin-top: 6px;
}
.sg-writein > span {
  display: block;
  border-bottom: 1px solid var(--sg-rule);
  height: 1.1em;
}

/* -------------------------------------------------------------------------
   5. The positioning table
   ------------------------------------------------------------------------- */

.sg-table-wrap {
  /* Never let a floated mascot narrow the table: these are already the widest
     block on the page and squeezing them forces every cell to wrap. */
  clear: both;
  /* Wide tables scroll inside their own container; the page never scrolls
     horizontally. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 18px 0;
  border-radius: 10px;
  border: 2px solid var(--sg-ink);
}

.sg-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--sg-paper);
}

.sg-table thead th {
  font-family: var(--sg-font-marker);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  padding: 11px 12px;
  text-align: left;
  vertical-align: middle;
  line-height: 1.15;
  border-right: 1px solid rgba(255, 255, 255, 0.28);
}
.sg-table thead th:last-child { border-right: 0; }

/* Column identity. Roles, not colors — recolor in tokens.mjs. */
.sg-table thead th[data-col='view']        { background: var(--sg-pink); }
.sg-table thead th[data-col='positioning'] { background: var(--sg-orange); }
.sg-table thead th[data-col='center']      { background: var(--sg-rose); }
.sg-table thead th[data-col='sid']         { background: var(--sg-yellow); color: var(--sg-ink); }
.sg-table thead th[data-col='breathing']   { background: var(--sg-green); }
.sg-table thead th[data-col='technique']   { background: var(--sg-teal); }
.sg-table thead th[data-col='notes']       { background: var(--sg-purple); }

/* Header icon + label sit on one baseline. Icons are decorative only — the
   column's meaning is carried by its text, so they get aria-hidden. */
.sg-table thead th .sg-col-inner {
  display: flex;
  align-items: center;
  gap: 7px;
}
.sg-table thead th svg {
  flex: none;
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.sg-table th .sg-col-sub {
  display: block;
  font-family: var(--sg-font-hand);
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.9;
}

.sg-table tbody td {
  padding: 14px 12px;
  border-top: 1px solid var(--sg-rule);
  border-right: 1px solid var(--sg-rule);
  vertical-align: top;
  line-height: 1.45;
}
.sg-table tbody td:last-child { border-right: 0; }

/* First column = the projection name, the row's anchor. */
.sg-table tbody th[scope='row'] {
  padding: 14px 12px;
  border-top: 1px solid var(--sg-rule);
  border-right: 1px solid var(--sg-rule);
  text-align: left;
  vertical-align: top;
  font-family: var(--sg-font-marker);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sg-ink);
  white-space: nowrap;
}

/* The centring point is the single most-tested value on the page — it gets
   the accent color in every row so the eye can scan the column. */
.sg-table .sg-cr { color: var(--sg-pink); font-weight: 700; }
.sg-table .sg-note { display: block; font-size: 0.82rem; color: var(--sg-pencil); }
.sg-table .sg-warn { color: var(--sg-orange); font-weight: 700; }

.sg-table tbody tr:nth-child(even) td,
.sg-table tbody tr:nth-child(even) th[scope='row'] {
  background: color-mix(in srgb, var(--sg-paper-edge) 40%, #fff);
}

/* -------------------------------------------------------------------------
   6. Figures + HTML label layer
   ------------------------------------------------------------------------- */

.sg-figure {
  position: relative;
  margin: 20px 0;
}
.sg-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Positioning context for the label and leader overlays. These must sit against
   the IMAGE, not the whole <figure>: the figure also holds the caption, and on
   paper another 14px of padding, so a y of 90% measured on the figure lands on
   the caption instead of the bottom of the illustration. */
.sg-figure-media {
  position: relative;
  display: block;
}

/* Page labels are positioned in percentages over the illustration, so they stay
   correct at any width and remain selectable, translatable and screen-reader
   accessible. Labels drawn into the art are allowed too (QC plan decision 15);
   either kind must be exactly right. */
.sg-figure .sg-label {
  position: absolute;
  /* With only `left` set, an absolute box shrinks to the room left of the right edge;
     a label at left:86% would be squeezed to 14% of the image. Size to the text. */
  width: max-content;
  transform: translate(-50%, -50%);
  font-family: var(--sg-font-hand);
  font-size: clamp(0.7rem, 1.6vw, 0.9rem);
  line-height: 1.2;
  color: var(--sg-ink);
  background: color-mix(in srgb, var(--sg-paper) 88%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
}
.sg-figure .sg-label--accent { color: var(--sg-pink); font-weight: 700; }

/* Leader lines drawn as an SVG overlay sharing the image's coordinate space. */
.sg-figure .sg-leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.sg-figure .sg-leaders line,
.sg-figure .sg-leaders path {
  stroke: var(--sg-pencil);
  stroke-width: 1.2;
  fill: none;
  /* The overlay uses a square 0-100 viewBox stretched to a non-square box by
     preserveAspectRatio="none", so stroke width is scaled by the axis it crosses:
     on a wide figure a vertical leader comes out roughly ten times thicker than a
     horizontal one and reads as a bar, not a line. non-scaling-stroke pins the
     width to screen pixels and makes every leader the same weight. */
  vector-effect: non-scaling-stroke;
}

.sg-figure figcaption {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--sg-pencil);
}

/* Licence notice for open-licence art. Deliberately quieter than the caption:
   it is a legal obligation, not teaching, and must not compete with the figure.
   Quiet is not the same as hidden — it stays selectable, legible and linked,
   because a CC BY credit that cannot be read has not been given. */
.sg-figure .sg-credit {
  display: block;
  margin-top: 5px;
  font-size: 0.68rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--sg-pencil);
  opacity: 0.72;
}
.sg-figure .sg-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sg-figure .sg-credit a:hover { opacity: 1; }

/* Polaroid framing for real radiographs, as in the printed source. */
.sg-polaroid {
  display: inline-block;
  background: #fff;
  padding: 9px 9px 30px;
  box-shadow: 0 3px 12px rgba(28, 25, 23, 0.22);
  transform: rotate(1.6deg);
}
.sg-polaroid img { border-radius: 0; }
.sg-polaroid figcaption {
  font-family: var(--sg-font-hand);
  text-align: center;
  margin-top: 7px;
}

/* Visually hidden, still read aloud. The matrix marks are decorative glyphs,
   so each cell carries a spoken equivalent. */
.sg-paper .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   6a. Matrix table: which factor affects which image quality
   ------------------------------------------------------------------------- */

/* A factor-by-effect grid. Rows are controllable factors, columns are the
   qualities they act on, cells are simply marked or not. Used for the ARRT
   image-quality matrix, where the pattern of marks IS the content. */
.sg-matrix {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: var(--sg-paper);
  font-size: 0.9rem;
}
.sg-matrix thead th {
  /* Default fill. Without it, a matrix whose column keys are not one of the
     five image-quality roles below renders white text on white. */
  background: var(--sg-pencil);
  font-family: var(--sg-font-marker);
  font-weight: 400;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  padding: 10px 8px;
  text-align: center;
  vertical-align: bottom;
  line-height: 1.15;
  border-right: 1px solid rgba(255, 255, 255, 0.28);
}
.sg-matrix thead th:first-child {
  text-align: left;
  background: var(--sg-ink);
}
.sg-matrix thead th[data-q='exposure']   { background: var(--sg-pink); }
.sg-matrix thead th[data-q='contrast']   { background: var(--sg-orange); }
.sg-matrix thead th[data-q='subject']    { background: var(--sg-rose); }
.sg-matrix thead th[data-q='resolution'] { background: var(--sg-green); }
.sg-matrix thead th[data-q='distortion'] { background: var(--sg-teal); }

.sg-matrix tbody th {
  text-align: left;
  font-family: var(--sg-font-marker);
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  padding: 9px 10px;
  border-top: 1px solid var(--sg-rule);
  border-right: 1px solid var(--sg-rule);
  white-space: nowrap;
}
.sg-matrix tbody td {
  text-align: center;
  padding: 9px 8px;
  border-top: 1px solid var(--sg-rule);
  border-right: 1px solid var(--sg-rule);
  color: var(--sg-pencil);
}
.sg-matrix tbody td:last-child,
.sg-matrix tbody th:last-child { border-right: 0; }

/* The mark means "this one applies". A cross reads as "no" the moment a
   column is phrased as a yes/no question ("Ionises the atom"), so it is a
   tick. Dot means unmarked. */
.sg-matrix .on::after {
  content: '✓';
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--sg-green);
}
.sg-matrix .off::after { content: '·'; opacity: 0.4; }

/* A row whose whole point is that every cell is marked. */
.sg-matrix tr[data-all] th,
.sg-matrix tr[data-all] td { background: var(--sg-yellow-soft); }

.sg-matrix tbody tr:nth-child(even) td,
.sg-matrix tbody tr:nth-child(even) th {
  background: color-mix(in srgb, var(--sg-paper-edge) 38%, #fff);
}

/* -------------------------------------------------------------------------
   6b. Content blocks: facts, compare, callout, spec, quiz
   ------------------------------------------------------------------------- */

/* Fact grid — a labelled term plus a one-line definition. Used for anatomy
   enumerations where a paragraph would bury the list. */
.sg-facts {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 18px 0;
}

/* Balance the last row. auto-fit alone renders 4 items as 3 + 1 orphan and 6
   as 5 + 1; the renderer stamps the item count so the common cases lay out
   evenly. Below 900px everything collapses to a single column anyway. */
@media (min-width: 900px) {
  .sg-facts[data-n='2'],
  .sg-facts[data-n='4'] { grid-template-columns: repeat(2, 1fr); }
  .sg-facts[data-n='3'],
  .sg-facts[data-n='6'],
  .sg-facts[data-n='9'] { grid-template-columns: repeat(3, 1fr); }
  .sg-facts[data-n='5'] { grid-template-columns: repeat(5, 1fr); }
  /* 7 and 8 land on 4 + 3 and 4 + 4. auto-fit would strand a single card. */
  .sg-facts[data-n='7'],
  .sg-facts[data-n='8'] { grid-template-columns: repeat(4, 1fr); }
}
.sg-fact {
  border: 1px solid var(--sg-rule);
  border-left: 5px solid var(--sg-teal);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--sg-paper);
}
.sg-fact dt {
  font-family: var(--sg-font-marker);
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--sg-ink);
  margin-bottom: 3px;
}
.sg-fact dd {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--sg-pencil);
}
/* Teal is the default already; the class exists so `tone: "teal"` in the
   content JSON is a stated choice rather than a silent fallthrough. */
.sg-fact--teal   { border-left-color: var(--sg-teal); }
.sg-fact--pink   { border-left-color: var(--sg-pink); }
.sg-fact--orange { border-left-color: var(--sg-orange); }
.sg-fact--rose   { border-left-color: var(--sg-rose); }
.sg-fact--yellow { border-left-color: var(--sg-yellow); }
.sg-fact--green  { border-left-color: var(--sg-green); }
.sg-fact--purple { border-left-color: var(--sg-purple); }

/* Side-by-side comparison, e.g. inspiration vs expiration, RAO vs LAO. */
.sg-compare {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border: 2px solid var(--sg-ink);
  border-radius: 10px;
  overflow: hidden;
  margin: 18px 0;
}
.sg-compare > div { padding: 16px 18px; }
.sg-compare > div + div { border-left: 1px solid var(--sg-rule); }
.sg-compare h4 {
  margin: 0 0 8px;
  font-family: var(--sg-font-marker);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.sg-compare p { margin: 0; font-size: 0.9rem; line-height: 1.55; }

/* Tinted callout for warnings and "why it matters" asides. */
.sg-callout {
  border-radius: 10px;
  padding: 14px 16px;
  margin: 18px 0;
  font-size: 0.92rem;
  line-height: 1.55;
  background: var(--sg-teal-soft);
  border-left: 5px solid var(--sg-teal);
}
/* Title only. Must not be a bare `strong` selector — authored body copy uses
   <strong> inline, and a block rule there breaks the sentence mid-flow. */
.sg-callout .sg-callout-title {
  display: block;
  font-family: var(--sg-font-marker);
  font-weight: 400;
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.sg-callout--warn   { background: var(--sg-orange-soft); border-left-color: var(--sg-orange); }
.sg-callout--danger { background: var(--sg-pink-soft);   border-left-color: var(--sg-rose); }
.sg-callout--ok     { background: var(--sg-green-soft);  border-left-color: var(--sg-green); }

/* Single-projection spec sheet: the six factors as labelled chips. */
.sg-spec {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 18px 0;
}
/* The standard projection has six factors; 3 x 2 reads far better than 5 + 1. */
@media (min-width: 900px) {
  .sg-spec[data-n='6'] { grid-template-columns: repeat(3, 1fr); }
  .sg-spec[data-n='4'] { grid-template-columns: repeat(2, 1fr); }
}
.sg-spec > div {
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--sg-paper);
  border: 2px solid var(--sg-rule);
}
.sg-spec dt {
  font-family: var(--sg-font-marker);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 7px;
  background: var(--sg-pencil);
}
.sg-spec dd { margin: 0; font-size: 0.92rem; line-height: 1.45; font-weight: 700; }
.sg-spec dd small { display: block; font-weight: 400; font-size: 0.8rem; color: var(--sg-pencil); }
.sg-spec [data-f='sid']       dt { background: var(--sg-yellow); color: var(--sg-ink); }
.sg-spec [data-f='ir']        dt { background: var(--sg-pink); }
.sg-spec [data-f='kv']        dt { background: var(--sg-teal); }
.sg-spec [data-f='cr']        dt { background: var(--sg-rose); }
.sg-spec [data-f='breathing'] dt { background: var(--sg-green); }
.sg-spec [data-f='position']  dt { background: var(--sg-orange); }

/* Self-check question. Answer is hidden until the <details> is opened. */
.sg-quiz {
  border: 2px dashed var(--sg-purple);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 18px 0;
  background: var(--sg-paper);
}
.sg-quiz > p {
  margin: 0 0 12px;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.5;
}
.sg-quiz ol { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 6px; font-size: 0.92rem; }
.sg-quiz details { border-top: 1px dashed var(--sg-rule); padding-top: 10px; }
.sg-quiz summary {
  cursor: pointer;
  font-family: var(--sg-font-marker);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sg-purple);
}
.sg-quiz details > p { margin: 9px 0 0; font-size: 0.9rem; line-height: 1.55; }

/* -------------------------------------------------------------------------
   7. Layout helpers
   ------------------------------------------------------------------------- */

.sg-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  /* Cards stretch to a common height on purpose. Ragged bottoms just move the
     white space from inside the short card to underneath it, and unbordered
     page gaps read worse than a little room inside a card. Keep the item
     counts across a boxRow within one or two of each other and the stretch
     costs almost nothing. */
  margin: 18px 0;
}
.sg-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.sg-footer {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px dashed var(--sg-rule);
  font-family: var(--sg-font-marker);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sg-pencil);
  text-align: center;
}

/* Brandmark footer. The page signs itself in the app's ARRT green rather than
   borrowing a slogan. */
.sg-brandmark {
  clear: both;
  margin-top: 30px;
  padding-top: 14px;
  border-top: 1px dashed var(--sg-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--sg-font-marker);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sg-brand);
}
.sg-brandmark span { color: var(--sg-pencil); text-transform: none;
  font-family: var(--sg-font-hand); letter-spacing: 0; font-size: 0.88rem; }
.sg-brandmark img { width: 24px; height: 24px; object-fit: contain; }

/* Roen, the product mascot, taped into the margin like a photo in a notebook.
   Replaces the decorative doodles: same job, but it is ours. */
/* Sits in the whitespace the centred page header already leaves, so it costs
   no vertical space at all.
   Not floated: a float is cleared by .sg-table-wrap, which strands the mascot
   next to a dead white band on any screen that leads with a table.
   The explicit `top` is required: the paper clips its overflow, so an absolute
   mascot without one lands at the end of the content flow and falls off the
   bottom edge. Height must stay under the header band (~180px). */
.sg-mascot {
  position: absolute;
  top: 26px;
  width: 92px;
  margin: 0;
  background: #fff;
  padding: 6px 6px 18px;
  box-shadow: 0 3px 12px rgba(28, 25, 23, 0.20);
  transform: rotate(-4deg);
  pointer-events: none;
  z-index: 2;
}
.sg-mascot img { display: block; width: 100%; height: auto; }
.sg-mascot figcaption {
  font-family: var(--sg-font-hand);
  font-size: 0.78rem;
  text-align: center;
  color: var(--sg-pencil);
  margin-top: 5px;
}
/* The tape strip holding it down. */
.sg-mascot::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 50%;
  width: 62px;
  height: 22px;
  transform: translateX(-50%) rotate(3deg);
  background: color-mix(in srgb, var(--sg-teal) 42%, transparent);
  clip-path: polygon(0 8%, 5% 0, 95% 4%, 100% 0, 100% 92%, 95% 100%, 5% 96%, 0 100%);
}
.sg-mascot--right { right: 18px; transform: rotate(3.5deg); }
/* 44px clears the binding gutter. */
.sg-mascot--left  { left: 44px; }

/* -------------------------------------------------------------------------
   8. Decoration layer — desktop only
   ------------------------------------------------------------------------- */

.sg-doodle {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0.85;
}

.sg-clip {
  position: absolute;
  width: 26px;
  height: 56px;
  border: 3px solid var(--sg-pencil);
  border-radius: 13px;
  opacity: 0.5;
  pointer-events: none;
}
.sg-clip::before {
  content: '';
  position: absolute;
  inset: 7px 6px 14px;
  border: 3px solid var(--sg-pencil);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

@media (max-width: 900px) {
  /* Strip the decoration that costs space without carrying meaning. Tape,
     sticky notes and the table keep their styling at every width. */
  .sg-paper {
    padding-left: var(--sg-pad);
    border-radius: var(--radius-md);
  }
  .sg-paper::before,
  .sg-paper::after,
  .sg-doodle,
  .sg-clip,
  .sg-mascot,
  /* Margin scrawls are absolutely positioned against a desktop-width header;
     at 390px they land on top of the tape headings. Must be scoped to
     .sg-paper to outrank the base `.sg-paper .sg-scrawl` display rule. */
  .sg-paper .sg-scrawl { display: none; }

  .sg-tape,
  .sg-sticky,
  .sg-sticky--right,
  .sg-box > .sg-box-label,
  .sg-title-script { transform: none; }
}

/* -------------------------------------------------------------------------
   9. Motion + print
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sg-check input[type='checkbox']::after { transition: none; }
}

@media print {
  .sg-paper {
    box-shadow: none;
    border: 0;
    padding-left: var(--sg-pad);
  }
  .sg-paper::before,
  .sg-paper::after,
  .sg-doodle,
  .sg-clip { display: none; }
  .sg-table-wrap { overflow: visible; }
  .sg-table { min-width: 0; }
}

/* ---------------------------------------------------------------------------
   Cross-reference link: jumps to wherever the term is actually defined.
   Styled as a pencil annotation, because nothing else on this paper is a blue
   underlined web link and one would look pasted on. The dotted rule is the
   affordance and it stays visible: hover is not available on touch, so the
   link has to announce itself without it.
   --------------------------------------------------------------------------- */
.sg-paper .sg-xref {
  color: inherit;
  text-decoration: none;
  border-bottom: 1.5px dotted var(--sg-teal);
  border-radius: 3px;
  transition: background-color .12s ease, border-color .12s ease;
}
.sg-paper .sg-xref::after {
  content: '\2197';                 /* ↗ */
  font-size: .62em;
  line-height: 0;
  vertical-align: super;
  color: var(--sg-teal);
  margin-left: 1px;
  opacity: .55;
}
.sg-paper .sg-xref:hover {
  background: var(--sg-teal-soft);
  border-bottom-color: var(--sg-teal);
  box-shadow: 0 0 0 2px var(--sg-teal-soft);
}
.sg-paper .sg-xref:focus-visible {
  outline: 2px solid var(--sg-teal);
  outline-offset: 2px;
  background: var(--sg-teal-soft);
}
@media (prefers-reduced-motion: reduce) {
  .sg-paper .sg-xref { transition: none; }
}
/* On paper there is nowhere to jump to, so drop the link furniture. */
@media print {
  .sg-paper .sg-xref { border-bottom: none; }
  .sg-paper .sg-xref::after { content: ''; }
}

/* ---------------------------------------------------------------------------
   Figure: an illustration taped into the page, with a caption under it. Labels may
   be drawn into the art or set as page labels over it (QC plan decision 15).
   --------------------------------------------------------------------------- */
.sg-paper .sg-figure {
  position: relative;
  margin: 26px auto 22px;
  max-width: 520px;
  padding: 14px 14px 10px;
  background: #fff;
  border: 1px solid var(--sg-paper-edge);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(28, 25, 23, 0.07);
  transform: rotate(-0.5deg);
}
.sg-paper .sg-figure--wide { max-width: 720px; transform: rotate(0.4deg); }
/* For art under about 400 px wide, so it is not stretched past its own pixels. */
.sg-paper .sg-figure--narrow { max-width: 380px; }
.sg-paper .sg-figure::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 92px;
  height: 24px;
  background: var(--sg-teal-soft);
  opacity: 0.85;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.12);
}
.sg-paper .sg-figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
.sg-paper .sg-figure figcaption {
  font-family: var(--sg-font-hand);
  font-size: 0.95rem;
  color: var(--sg-pencil);
  text-align: center;
  margin-top: 8px;
  line-height: 1.4;
}
/* Polaroid framing has to be re-stated at paper scope. `.sg-polaroid` alone is
   (0,1,0) and loses every contested property to `.sg-paper .sg-figure` (0,2,0),
   which sets its own padding, border, shadow and rotation — so the bare class is
   inert inside the guide and the treatment silently does nothing. Used for real
   radiographs, where the point is that the reader is looking at a photograph of
   a film rather than a drawing. */
.sg-paper .sg-figure.sg-polaroid {
  padding: 9px 9px 30px;
  border: 0;
  border-radius: 0;
  box-shadow: 0 3px 12px rgba(28, 25, 23, 0.22);
  transform: rotate(1.6deg);
}
.sg-paper .sg-figure.sg-polaroid img { border-radius: 0; }

@media (prefers-reduced-motion: reduce) { .sg-paper .sg-figure { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sg-paper .sg-figure.sg-polaroid { transform: none; } }


/* Per-page paper styles lifted from the deliverable preview template
 * (render-chapter.mjs <style> block) - part of the rendered look. */
.sg-paper .sg-head { position: relative; text-align: center; margin-bottom: 22px; }
.sg-paper .sg-head .sg-tape { margin-bottom: 12px; }
.sg-paper .sg-head .sg-tagline { margin-top: 14px; font-size: .78rem; }
.sg-paper .sg-head-scrawl { position: absolute; top: -4px; right: 6px; }
.sg-paper .sg-subhead { font-family: var(--sg-font-marker); font-weight: 400;
    font-size: 1.12rem; letter-spacing: .02em; text-transform: uppercase;
    margin: 26px 0 4px; }
.sg-paper .sg-prose { font-size: .95rem; line-height: 1.62; }
.sg-paper .sg-prose p { margin: .6em 0; }
.sg-paper .sg-row-sub { text-transform: none; font-family: var(--sg-font-hand); }
.sg-paper .sg-sticky-row { margin-top: 24px; }
.sg-paper .sg-sticky-label { font-family: var(--sg-font-marker); font-size: .82rem;
    letter-spacing: .05em; text-transform: uppercase; display: block; margin-bottom: 3px; }

/* Site-side addition (2026-08-25): the app's global list reset strips the
 * upper-alpha markers off the few remaining static sg-quiz blocks (open-ended
 * quizzes that could not become interactive knowledge checks). Restore them. */
.sg-paper .sg-quiz ol { list-style: upper-alpha; padding-left: 1.9em; margin: 0.5em 0; }
.sg-paper .sg-quiz ol li { padding-left: 0.35em; margin-bottom: 0.35em; }

/* ---------------------------------------------------------------------------
   Spot: a breather illustration drawn straight on the paper (2026-09-13).
   Decorative by contract (alt="", aria-hidden): it breaks up a dense screen and
   never carries a fact, so there is no card, tape, caption or credit. Side spots
   float beside the prose block that follows them; .sg-spot-row (flow-root)
   contains the float so it can never reach the next box or the table wrap's
   clear. multiply lets the white ground of a raster spot vanish onto the paper.
   --------------------------------------------------------------------------- */
.sg-paper .sg-spot-row { display: flow-root; }
.sg-paper .sg-spot { margin: 0; pointer-events: none; user-select: none; }
.sg-paper .sg-spot img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.sg-paper .sg-spot--right,
.sg-paper .sg-spot--left { width: clamp(130px, 20%, 180px); shape-outside: margin-box; }
.sg-paper .sg-spot--right { float: right; margin: 6px 0 10px 22px; transform: rotate(1.2deg); }
.sg-paper .sg-spot--left { float: left; margin: 6px 22px 10px 0; transform: rotate(-1.2deg); }
.sg-paper .sg-spot--sm { width: clamp(110px, 16%, 140px); }
.sg-paper .sg-spot--lg { width: clamp(160px, 26%, 220px); }
.sg-paper .sg-spot--banner { max-width: 440px; margin: -8px auto 18px; }
.sg-paper .sg-spot--banner img { max-height: 120px; width: auto; margin: 0 auto; }
@media (max-width: 600px) {
  .sg-paper .sg-spot--right,
  .sg-paper .sg-spot--left { float: none; width: 150px; margin: 0 auto 12px; transform: none; }
  .sg-paper .sg-spot--banner img { max-height: 90px; }

  /* Overlay labels at phone width (2026-09-14 audit). Centred on its anchor, a label
     near an image edge ran off the picture and row-mates piled up. The renderer
     marks each label's edge band (data-side l/c/r, data-v t/m/b) and the room to
     its nearest row-mate (--lw); here they wrap, shrink and anchor to the edge. */
  .sg-figure .sg-label {
    white-space: normal;
    max-width: var(--lw, 46%);
    font-size: 0.66rem;
    line-height: 1.15;
    padding: 1px 4px;
    text-align: center;
    transform: translate(var(--tx, -50%), var(--ty, -50%));
  }
  .sg-figure .sg-label[data-side='l'] { --tx: -6%; text-align: left; }
  .sg-figure .sg-label[data-side='r'] { --tx: -94%; text-align: right; }
  .sg-figure .sg-label[data-v='t'] { --ty: -10%; }
  .sg-figure .sg-label[data-v='b'] { --ty: -90%; }

  /* Box titles are nowrap tabs; 33 of them are longer than a phone-width box. */
  .sg-box > .sg-box-label { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .sg-paper .sg-spot { transform: none; } }
@media print { .sg-paper .sg-spot img { mix-blend-mode: normal; } }

/* A Roen polaroid is absolutely positioned in the top-right corner of the paper
   (2026-09-13 QC): a long chapter title ran under it at desktop widths. When the
   mascot block follows the heading, keep the title clear of the card. */
@media (min-width: 900px) {
  .sg-paper .sg-head:has(+ .sg-mascot--right) { padding-right: 120px; }
  .sg-paper .sg-head:has(+ .sg-mascot--left) { padding-left: 120px; }
}