/*
 * transcript.css
 * The A4 Co-Curricular Transcript page.
 *
 * Every position and size here was measured from the SDM v3 Canva PDF:
 *   - positions are in mm from the top-left corner of the A4 page (210 × 297 mm)
 *   - font sizes are in pt, exactly as set in Canva
 *   - letter-spacing values were calculated so each line is the same width as in Canva
 * Fixed parts of the page (header, sidebar, assessment scale) are placed absolutely.
 * The middle section (.t-body) flows, so rows can grow with longer evidence.
 *
 * --text-scale (default 1) is lowered by fit.js when a student's evidence is too long
 * to fit on one page. Only the student-specific text uses it; the design text never shrinks.
 */

/* Glacial Indifference: the typeface used in the Canva design (SIL Open Font Licence). */
@font-face {
  font-family: 'Glacial Indifference';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../assets/fonts/glacial-indifference-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Glacial Indifference';
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url('../assets/fonts/glacial-indifference-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Glacial Indifference';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('../assets/fonts/glacial-indifference-bold.woff2') format('woff2');
}

.sheet {
  /* The transcript's own colours, sampled from the SDM v3 Canva design.
     Defined on .sheet so they never mix with the app's house-style tokens. */
  --navy:   #001742;  /* title, intro paragraph, table headings */
  --indigo: #14104E;  /* trait names, labels, rating text */
  --maroon: #79002A;  /* "Traits" banner, trait keywords, bullets */
  --line:   #C8B9B2;  /* table borders */
  --mist:   #D4DBE2;  /* "Student Information" tab */
  --cream:  #F9F6F0;  /* table header row */
  --paper:  #FFFFFF;
  --level-exemplary:  #FCDCE2;
  --level-proficient: #D9E7FA;
  --level-engaged:    #FBE7C0;
  --level-none:       #ECEBEA;
  --font: 'Glacial Indifference', 'Century Gothic', 'Avenir Next', 'Segoe UI', sans-serif;

  --text-scale: 1;
  zoom: var(--zoom);          /* on-screen preview size only; print.css resets it to 1 */
  position: relative;
  width: 210mm;
  height: 297mm;
  overflow: hidden;
  background: var(--paper);
  color: var(--indigo);
  font-family: var(--font);
  -webkit-print-color-adjust: exact;  /* keep background colours when printing */
  print-color-adjust: exact;
}
.sheet * { margin: 0; }

/* ---------- Left sidebar artwork and vertical label ---------- */

.t-sidebar { position: absolute; left: 0; top: 0; width: 12.44mm; height: 297mm; display: block; }

.t-sidebar-label {
  position: absolute;
  left: 4.1mm;
  top: 77.4mm;
  width: 4.8mm;
  writing-mode: vertical-rl;   /* reads top to bottom */
  white-space: nowrap;
  color: #F1EAE7;
  line-height: 4.8mm;
}
.t-sidebar-label b    { font-weight: 700; font-size: 11.5pt; letter-spacing: .216em; }
.t-sidebar-label span { font-weight: 400; font-size: 10.5pt; letter-spacing: .121em; }

/* ---------- Header: logos, title, subtitle, divider, introduction ---------- */

.t-logo-ite { position: absolute; left: 16.7mm;  top: 3.1mm; width: 30.1mm; height: 14.9mm; }
.t-logo-ace { position: absolute; left: 187.7mm; top: 3.4mm; width: 16.9mm; height: 16.4mm; }

.t-title {
  position: absolute;
  left: 16.7mm;
  top: 19.9mm;
  font-weight: 700;
  font-size: 19pt;
  line-height: 8mm;
  color: var(--navy);
  white-space: nowrap;
}
.t-subtitle {
  position: absolute;
  left: 16.7mm;
  top: 29.3mm;
  font-size: 9.5pt;
  line-height: 4mm;
  letter-spacing: .118em;
  color: var(--indigo);
  white-space: nowrap;
  text-transform: uppercase;
}
/* Tapered divider line under the subtitle */
.t-divider {
  position: absolute;
  left: 33.4mm;
  top: 35.4mm;
  width: 132.9mm;
  height: .9mm;
  background: linear-gradient(90deg, rgba(0, 23, 66, .22), rgba(0, 23, 66, .5) 55%, rgba(0, 23, 66, .42));
  clip-path: polygon(0 48%, 100% 0, 100% 100%, 0 52%);
}
.t-intro {
  position: absolute;
  left: 16.7mm;
  top: 38.8mm;
  width: 185.9mm;
  font-size: 9.5pt;
  line-height: 3.97mm;
  color: var(--navy);
  text-align: justify;
  text-align-last: left;
  hyphens: none;
}

/* ---------- Body: student information + traits table (flows) ---------- */

/* Runs from the top of "Student Information" (57.3mm) to the bottom of the
   traits table (266.9mm). If content is taller than this, fit.js shrinks the text. */
.t-body {
  position: absolute;
  left: 16.7mm;
  top: 57.3mm;
  width: 188mm;
  height: 209.6mm;
  display: flex;
  flex-direction: column;
}

/* Rounded heading tabs ("STUDENT INFORMATION", "TRAITS OF OUTSTANDING LEADERS & EVIDENCE") */
.t-tab {
  flex: none;
  height: 8.9mm;
  border-radius: 4.2mm 4.2mm 0 0;
  padding: 0 4.8mm;
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 11.8pt;
  letter-spacing: .048em;
}
.t-tab-info { background: var(--mist); color: var(--indigo); }
.t-tab-traits {
  background: var(--maroon);
  color: #fff;
  height: 9.6mm;
  margin-top: 2.8mm;
  letter-spacing: .05em;
  padding-left: 5mm;
}

/* Student information: 2 rows × 3 columns */
.t-info {
  flex: none;
  display: grid;
  grid-template-columns: 69.1mm 50.7mm minmax(0, 1fr);
  border: .26mm solid var(--line);
  border-top: 0;
}
.t-info > div {
  min-height: 11.9mm;
  padding: 1.7mm 2.6mm 1.4mm;
  border-top: .26mm solid var(--line);
  border-left: .26mm solid var(--line);
}
.t-info > div:nth-child(3n + 1) { border-left: 0; }
.t-info dt { font-size: 9.55pt; line-height: 4.1mm; color: var(--indigo); }
.t-info dd {
  font-weight: 700;
  font-size: calc(var(--text-scale) * 9.5pt);
  line-height: 1.25;
  color: var(--navy);
  margin-top: .5mm;
}

/* Traits table: header row + one row per trait. Rows share the leftover height. */
.t-table {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: .26mm solid var(--line);
  border-top: 0;
  margin-top: -.2mm;
}
.t-row {
  display: grid;
  grid-template-columns: 45.6mm 35.8mm minmax(0, 1fr);  /* Traits | Rating | Key evidence */
  border-top: .26mm solid var(--line);
}
.t-row > div { border-left: .26mm solid var(--line); min-width: 0; }
.t-row > div:first-child { border-left: 0; }

.t-row-head { flex: none; height: 7.2mm; background: var(--cream); }
.t-row-head > div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 10pt;
  letter-spacing: .035em;
  color: var(--navy);
}
.t-row-trait { flex: 1 1 auto; }

/* Column 1: icon, trait name, keywords (background colour set per trait in config.js) */
.t-trait { display: flex; flex-direction: column; justify-content: center; padding: 2mm 1.9mm; }
.t-trait-head { display: flex; align-items: center; gap: 1.2mm; }
.t-trait-head img { width: 10.5mm; height: 10.5mm; flex: none; }
.t-trait-head h4 { font-weight: 700; font-size: 9pt; line-height: 3.72mm; color: var(--indigo); }
.t-trait-keywords {
  margin-top: 1.6mm !important;
  text-align: center;
  font-style: italic;
  font-size: 7pt;
  line-height: 2.95mm;
  color: var(--maroon);
}

/* Column 2: rating pill */
.t-rating { display: flex; align-items: center; justify-content: center; }
.t-pill {
  width: 27.8mm;
  height: 6.6mm;
  border-radius: 1mm;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 9pt;
  color: var(--indigo);
}
.t-pill.level-3 { background: var(--level-exemplary); }
.t-pill.level-2 { background: var(--level-proficient); }
.t-pill.level-1 { background: var(--level-engaged); }
.t-pill.level-0 { background: var(--level-none); color: #6E6A72; font-size: 8pt; }

/* Column 3: descriptor + evidence bullets */
.t-evidence { display: flex; flex-direction: column; justify-content: center; padding: 2.2mm 3.2mm; }
.t-descriptor {
  font-style: italic;
  font-size: calc(var(--text-scale) * 8.3pt);
  line-height: 1.32;
  color: var(--indigo);
}
.t-not-evidenced {
  font-style: italic;
  font-size: calc(var(--text-scale) * 8.3pt);
  color: #6E6A72;
}
.t-evidence-list {
  list-style: none;
  padding: 0;
  margin-top: calc(var(--text-scale) * 1.4mm) !important;
  display: flex;
  flex-direction: column;
  gap: calc(var(--text-scale) * .7mm);
}
.t-evidence-list li {
  position: relative;
  padding-left: 3mm;
  font-size: calc(var(--text-scale) * 8.3pt);
  line-height: 1.32;
  color: #000;
}
.t-evidence-list li::before {
  content: "\2022";
  position: absolute;
  left: .4mm;
  top: 0;
  color: var(--maroon);
  font-weight: 700;
}
.t-evidence-list .activity-type { font-weight: 700; color: var(--indigo); }

/* ---------- Leadership assessment scale (fixed, bottom of page) ---------- */

.t-scale-heading {
  position: absolute;
  left: 17.5mm;
  top: 270.3mm;
  font-weight: 700;
  font-size: 9.5pt;
  line-height: 4mm;
  color: var(--navy);
}

/* Three overlapping boxes; each box covers the right edge of the one before it */
.t-scale-box {
  position: absolute;
  top: 276.5mm;
  height: 15.8mm;
  border-radius: 3.4mm;
  border: .53mm solid;
  padding: 1.2mm 0 0;
}
.t-scale-box b    { display: block; font-weight: 700; font-size: 8.5pt; line-height: 3.6mm; color: var(--indigo); }
.t-scale-box span { display: block; font-size: 7.5pt; line-height: 2.9mm; color: #000; white-space: nowrap; }

.t-scale-engaged {
  left: 16.7mm; width: 63.8mm;
  background: var(--level-engaged); border-color: #D3BE95;
  padding-left: 3.3mm; padding-right: 9mm;
}
.t-scale-proficient {
  left: 75.5mm; width: 71.2mm;
  background: var(--level-proficient); border-color: #AFBED3;
  padding: 1.7mm 7mm 0 3.6mm;
}
.t-scale-exemplary {
  left: 138.7mm; width: 65.9mm;
  background: var(--level-exemplary); border-color: #E3B4BD;
  padding: 1.7mm 3mm 0 4mm;
}

/* ">>>" arrows between the boxes (drawn as SVG in transcript.js) */
.t-chevrons { position: absolute; top: 274.2mm; width: 7.6mm; height: 4.1mm; }

/* ---------- Watermark (full page, on top of everything, ~3% opacity in the PNG) ---------- */

.t-watermark {
  position: absolute;
  left: 0;
  top: 0;
  width: 210mm;
  height: 297mm;
  pointer-events: none;
  z-index: 5;
}