/* ============================================================
   THE SIGN-OFF SHEET.

   A document, not a landing page. The school owner is deciding
   whether to give something away, so the register is a contract:
   light ground, one column, real tables, and it has to survive
   being printed and pinned behind a desk. The only saturated
   colour is the one the wheel itself uses.
   ============================================================ */

.sheet-body {
  background: var(--brand-bg, #FCFCFC);
  padding-bottom: var(--f-space-l);
}
.sheet {
  width: min(860px, calc(100vw - 40px));
  margin-inline: auto;
  padding-top: var(--f-space-l);
}

.sheet-head { margin-bottom: var(--f-space-l); }
.sheet-kicker {
  margin: 0 0 var(--f-space-s);
  font-size: var(--f-text-caption);
  text-transform: uppercase;
  letter-spacing: var(--f-track-eyebrow);
  color: var(--brand-accent-ink, #0074C8);
}
.sheet h1 {
  font-size: var(--f-h1);
  line-height: var(--f-lh-h1);
  letter-spacing: var(--f-track-h1);
  margin-bottom: var(--f-space-s);
  max-width: 22ch;
}
.sheet-lead {
  font-size: var(--f-text-lead);
  color: var(--brand-ink, #333);
  max-width: 60ch;
}
.sheet-btn {
  padding: 10px 18px;
  border: 1px solid var(--brand-ink-strong, #1A1A1A);
  border-radius: 4px;
  background: none;
  color: var(--brand-ink-strong, #1A1A1A);
  font: 500 var(--f-text-caption)/1 var(--brand-font-body, inherit);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.sheet-btn:hover { background: var(--brand-bg-muted, #EDEDED); }

.sheet-block {
  padding-top: var(--f-space-m);
  margin-bottom: var(--f-space-l);
  border-top: 1px solid rgba(26, 26, 26, 0.14);
}
.sheet-block h2 {
  font-size: var(--f-h3);
  line-height: var(--f-lh-h3);
  margin-bottom: var(--f-space-s);
}
.sheet-note { max-width: 66ch; color: var(--brand-ink, #333); }
.sheet-note code, .sheet-steps code, .sheet-foot code {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--brand-bg-muted, #EDEDED);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
}

/* ---- the four figures ---- */
.sheet-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 0 0 var(--f-space-s);
  background: rgba(26, 26, 26, 0.14);
  border: 1px solid rgba(26, 26, 26, 0.14);
  border-radius: 4px;
  overflow: hidden;
}
.sheet-fig {
  display: grid; gap: 4px;
  padding: 16px 18px;
  background: var(--brand-bg, #FCFCFC);
}
.sheet-fig-n {
  font-family: var(--brand-font-display, inherit);
  font-weight: 700;
  font-size: var(--f-h3);
  line-height: 1;
  color: var(--brand-ink-strong, #1A1A1A);
  font-variant-numeric: tabular-nums;
}
.sheet-fig.is-warn .sheet-fig-n { color: var(--brand-cta-bg-hover, #7C1313); }
.sheet-fig.is-good .sheet-fig-n { color: var(--brand-accent-ink, #0074C8); }
.sheet-fig-l {
  font-size: var(--f-text-caption);
  line-height: 1.4;
  color: var(--brand-quiet-ink, #333);
}

/* ---- wheel + table ---- */
.sheet-wheel-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--f-space-m);
  align-items: start;
}
/* The wheel's own styles are repeated here rather than pulling in
   the whole of gates.css for four rules. Without them this page
   rendered a solid black disc, because an unstyled <path> fills
   black and the red slices simply vanished. */
.sheet-wheel svg { display: block; width: 100%; height: auto; }
.sheet-wheel .spin-slice { stroke: var(--brand-bg, #FCFCFC); stroke-width: 2; }
.sheet-wheel .spin-slice[data-slice="a"] { fill: var(--brand-cta-bg, #E2211C); }
.sheet-wheel .spin-slice[data-slice="b"] { fill: var(--brand-surface-dark, #1A1A1A); }
.sheet-wheel .spin-label {
  font-family: var(--brand-font-display, sans-serif);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  fill: #FFFFFF;
}
.sheet-wheel .spin-label-2 { font-size: 13px; letter-spacing: 0.06em; opacity: 0.92; }
.sheet-wheel .spin-hub {
  fill: var(--brand-bg, #FCFCFC);
  stroke: rgba(26, 26, 26, 0.14);
  stroke-width: 2;
}
.sheet-wheel .spin-hub-mark { fill: var(--brand-cta-bg, #E2211C); }
.sheet-table-wrap { overflow-x: auto; }
.sheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--f-text-caption);
}
.sheet-table th {
  text-align: left;
  padding: 0 12px 8px 0;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--f-text-micro);
  color: var(--brand-quiet-ink, #333);
  border-bottom: 1px solid rgba(26, 26, 26, 0.24);
}
.sheet-table td {
  padding: 11px 12px 11px 0;
  vertical-align: top;
  border-bottom: 1px solid rgba(26, 26, 26, 0.1);
  color: var(--brand-ink, #333);
}
.sheet-table td b { color: var(--brand-ink-strong, #1A1A1A); font-weight: 500; }
.sheet-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95em;
  color: var(--brand-ink-strong, #1A1A1A);
}
.sheet-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet-sub {
  display: block;
  font-size: var(--f-text-micro);
  color: var(--brand-quiet-ink, #333);
  opacity: 0.78;
}

/* ---- honour list ---- */
.sheet-honour {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 20px;
  margin: 0;
  max-width: 74ch;
}
.sheet-honour dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sheet-honour dt code {
  padding: 3px 7px;
  border-radius: 3px;
  background: var(--brand-ink-strong, #1A1A1A);
  color: var(--brand-bg, #FCFCFC);
  font-size: 0.85rem;
}
.sheet-honour dd {
  margin: 0;
  color: var(--brand-ink, #333);
  font-size: var(--f-text-small);
  line-height: 1.5;
}

/* ---- steps + list ---- */
.sheet-steps, .sheet-list {
  max-width: 70ch;
  padding-left: 1.1em;
  color: var(--brand-ink, #333);
}
.sheet-steps li, .sheet-list li { margin-bottom: 12px; line-height: 1.55; }
.sheet-steps b, .sheet-list b { color: var(--brand-ink-strong, #1A1A1A); font-weight: 500; }

/* ---- sign-off ---- */
.sheet-signoff { border-top-width: 2px; border-top-color: var(--brand-cta-bg, #E2211C); }
.sheet-checks { list-style: none; margin: 0; padding: 0; max-width: 70ch; }
.sheet-checks li { margin-bottom: 4px; }
.sheet-checks label {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(26, 26, 26, 0.14);
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--f-text-small);
  line-height: 1.5;
}
.sheet-checks label:hover { background: var(--brand-bg-muted, #EDEDED); }
.sheet-checks input {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  accent-color: var(--brand-cta-bg, #E2211C);
}
.sheet-checks b { font-weight: 500; color: var(--brand-ink-strong, #1A1A1A); }

.sheet-foot {
  padding-top: var(--f-space-s);
  border-top: 1px solid rgba(26, 26, 26, 0.14);
  font-size: var(--f-text-caption);
  color: var(--brand-quiet-ink, #333);
}

@media (max-width: 720px) {
  .sheet-wheel-row { grid-template-columns: 1fr; }
  .sheet-wheel { width: min(260px, 100%); margin-inline: auto; }
  .sheet-honour { grid-template-columns: 1fr; gap: 4px 0; }
  .sheet-honour dd { margin-bottom: 12px; }
}

/* ---- print. This page exists to be pinned up behind a desk. ---- */
@media print {
  .sheet-body { background: #fff; padding: 0; }
  .sheet { width: auto; padding: 0; }
  .sheet-print, .sheet-foot { display: none; }
  .sheet-block { break-inside: avoid; border-top-color: #999; }
  .sheet-figs { break-inside: avoid; }
  .sheet-checks label { break-inside: avoid; }
  a { text-decoration: none; color: inherit; }
}