/* =============================================================================
 * report.css — the printable sheet
 *
 * Dimensioned in inches so the on-screen preview and the printed page share
 * one geometry. The preview is scaled with transform only, which does NOT
 * change layout -- that is what makes the auto-fit measurement trustworthy.
 * ========================================================================== */


.sheet {
  /* Swap these two tokens to change the typeface everywhere. */
  --gg-font-display: 'Poppins', 'Nunito Sans', system-ui, -apple-system, sans-serif;
  --gg-font-body:    'Nunito Sans', system-ui, -apple-system, sans-serif;
  --gg-font-script:  'Snell Roundhand', 'Segoe Script', 'Brush Script MT', cursive;

  --gg-mint:      #e7f2e0;
  --gg-head-bg:   #f2f9ed;
  --gg-band-bg:   #d5e9c8;
  --gg-card-bg:   #ffffff;
  --gg-line:      #a9cd93;
  --gg-line-soft: #c3ddb2;
  --gg-ink:       #1f2a1b;
  --gg-ink-strong:#20391c;
  --gg-band-ink:  #2c5827;
  --gg-accent:    #4b8b3b;
  --gg-gold:      #e5ad3c;

  --page-w: 11in;
  --page-h: 8.5in;
  --safe:   0.3in;        /* margin:0 can push content into a printer's
                             non-printable band -- nothing load-bearing here */
  --body-pt: 11;          /* the single auto-fit variable, set per sheet */

  position: relative;
  width: var(--page-w);
  height: var(--page-h);          /* fixed, never min-height: an element that
                                     exceeds the page box by a rounding hair
                                     emits a blank page */
  box-sizing: border-box;
  padding: var(--safe);
  overflow: hidden;
  background: #fff;
  font-family: var(--gg-font-body);
  color: var(--gg-ink);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.sheet *, .sheet *::before, .sheet *::after { box-sizing: border-box; }

.sheet-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.09in;
  padding: 0.16in;
  background: var(--gg-mint);
  border: 1.75px solid var(--gg-line);
  border-radius: 0.14in;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ------------------------------------------------------------------ header */

.sheet-head {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0.11in 0.16in;
  padding-right: 1.2in;               /* clears the logo */
  background: var(--gg-head-bg);
  border: 1.5px solid var(--gg-line);
  border-radius: 0.11in;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.sheet-head-text { flex: 1; min-width: 0; }

.sheet-title {
  margin: 0;
  font-family: var(--gg-font-display);
  font-size: 21pt;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--gg-ink-strong);
}

.sheet-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2in;
  margin-top: 0.05in;
  font-family: var(--gg-font-display);
  font-size: 11.5pt;
  font-weight: 600;
  color: var(--gg-ink-strong);
}

.sheet-grade { white-space: nowrap; }

.sheet-student {
  display: inline-flex;
  align-items: baseline;
  gap: 0.03in;
  min-width: 0;
}

.sheet-student-name {
  padding: 0 0.09in;
  border-bottom: 1.2px solid var(--gg-ink-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-logo {
  position: absolute;
  right: 0.13in;
  top: 50%;
  transform: translateY(-50%);
  width: 0.95in;
  height: 0.95in;
}

.sheet-logo img,
.sheet-logo svg { width: 100%; height: 100%; object-fit: contain; display: block; }


/* ------------------------------------------------------------------- bands */

.band {
  display: flex;
  flex-direction: column;
  gap: 0.07in;
  min-height: 0;
}

/* Academics carries more subjects, so it gets the larger share of the page. */
.sheet-inner .band:nth-of-type(1) { flex: 1.55 1 0; }
.sheet-inner .band:nth-of-type(2) { flex: 1 1 0; }

.band-label {
  flex: 0 0 auto;
  text-align: center;
  padding: 0.04in 0.1in;
  font-family: var(--gg-font-display);
  font-size: 13.5pt;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gg-band-ink);
  background: var(--gg-band-bg);
  border: 1.5px solid var(--gg-line);
  border-radius: 0.09in;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.cols {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.12in;
}

.card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--gg-card-bg);
  border: 1.5px solid var(--gg-line);
  border-radius: 0.11in;
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.card-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.05in;
  padding: 0.06in 0.13in 0.02in;
  font-family: var(--gg-font-display);
  font-size: 13pt;
  font-weight: 700;
  color: var(--gg-accent);
}

.card-grow .card-head { justify-content: flex-end; }

.ic-star   { width: 1.05em; height: 1.05em; fill: var(--gg-gold); flex: 0 0 auto; }
.ic-sprout { width: 1.1em;  height: 1.1em;  flex: 0 0 auto; }
.ic-sprout .leaf-a { fill: var(--gg-accent); }
.ic-sprout .leaf-b { fill: var(--gg-accent); opacity: .55; }
.ic-sprout .stem   { stroke: var(--gg-accent); stroke-width: 1.6; stroke-linecap: round; fill: none; }

.card-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;                      /* auto-fit measures against this */
  padding: 0 0.13in 0.09in;
  font-size: calc(var(--body-pt) * 1pt);
  line-height: 1.32;
  color: var(--gg-ink);
}

.item + .item { margin-top: 0.07in; }

.item-label {
  margin: 0 0 0.015in;
  font-family: var(--gg-font-body);
  font-size: calc(var(--body-pt) * 1pt);
  font-weight: 800;
  color: var(--gg-ink-strong);
}

.item-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  /* No hyphenation: the Canva original does not hyphenate, and turning it on
     changes every line break and therefore every auto-fit decision. */
  hyphens: none;
}

.item-text.is-empty { color: #9db392; }

/* ------------------------------------------------------------------ footer */

.sheet-foot {
  flex: 0 0 auto;
  height: 0.24in;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: -0.02in;
}

.wordmark { height: 0.3in; width: auto; overflow: visible; }
.wordmark text {
  fill: var(--gg-accent);
  font-family: var(--gg-font-script);
  font-size: 30px;
}
.wordmark .swoosh { fill: none; stroke: var(--gg-accent); stroke-width: 2.2; stroke-linecap: round; }

/* ------------------------------------------------- on-screen preview only
 * transform is deliberate: unlike zoom it does not alter layout, so
 * scrollHeight measured in the preview equals the printed geometry. */

.preview-stage {
  --preview-scale: 0.62;
  width: calc(11in * var(--preview-scale));
  height: calc(8.5in * var(--preview-scale));
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16,32,12,.10), 0 8px 24px rgba(16,32,12,.10);
}

.preview-stage > .sheet {
  position: absolute;
  top: 0; left: 0;
  transform: scale(var(--preview-scale));
  transform-origin: top left;
}