/* ============================================================
   College (UG) assessment — mode picker, intake, quiz, results.
   Loaded after style.css and additive only: nothing here restyles
   an existing school-flow selector, so grades 6–12 are unaffected.
   ============================================================ */

/* ---- 1. School / College picker ---- */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto 8px;
}
.mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 38px 26px 32px;
  border: 1px solid var(--border-m);
  border-radius: 26px;
  background: var(--white);
  box-shadow: var(--cs);
  cursor: pointer;
  overflow: hidden;
  font: inherit;
  color: var(--navy);
  text-align: center;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.mode-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, var(--mode-accent), var(--navy));
  opacity: 0;
  transition: opacity .25s;
}
.mode-card > * { position: relative; z-index: 1; }
.mode-card[data-mode="school"]  { --mode-accent: #0CB8C4; }
.mode-card[data-mode="college"] { --mode-accent: #7C3AED; }
.mode-card[data-mode="education"] { --mode-accent: #C77C0A; }
/* A track that is not open yet says so on its face rather than only after
   the click. It stays fully operable — the screen behind it explains why. */
.mode-card[data-mode="education"] .mc-r {
  color: #9A6108;
  background: #FDF3E2;
  border-color: #F0DCB6;
}
.mode-card:hover,
.mode-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--hs);
  border-color: transparent;
  outline: none;
}
.mode-card:hover::before,
.mode-card:focus-visible::before { opacity: 1; }
.mode-card:hover .mc-t,
.mode-card:hover .mc-s,
.mode-card:hover .mc-r,
.mode-card:focus-visible .mc-t,
.mode-card:focus-visible .mc-s,
.mode-card:focus-visible .mc-r { color: #fff; }
.mode-card:hover .mc-r,
.mode-card:focus-visible .mc-r {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .35);
}
.mc-i {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--off);
  box-shadow: inset 0 2px 10px rgba(15, 33, 71, .06);
  transition: background .25s;
}
.mode-card:hover .mc-i,
.mode-card:focus-visible .mc-i { background: rgba(255, 255, 255, .16); }
.mc-i svg { width: 52px; height: 52px; }
.mc-i svg .mc-stroke { stroke: var(--mode-accent); transition: stroke .25s; }
.mc-i svg .mc-fill { fill: var(--mode-accent); transition: fill .25s; }
.mode-card:hover .mc-i svg .mc-stroke,
.mode-card:focus-visible .mc-i svg .mc-stroke { stroke: #fff; }
.mode-card:hover .mc-i svg .mc-fill,
.mode-card:focus-visible .mc-i svg .mc-fill { fill: #fff; }
.mc-t { font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; transition: color .25s; }
.mc-s { font-size: .92rem; color: var(--muted); line-height: 1.45; transition: color .25s; }
.mc-r {
  margin-top: 4px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--navy-l);
  border: 1px solid var(--border-m);
  border-radius: 999px;
  padding: 4px 14px;
  transition: color .25s, background .25s, border-color .25s;
}

/* ---- 1b. Resume card ---- */
.cresume {
  max-width: 560px;
  margin: 0 auto 26px;
  padding: 18px 22px 20px;
  background: var(--white);
  border: 1px solid var(--border-m);
  border-left: 4px solid var(--gold);
  border-radius: 14px;
  box-shadow: var(--cs);
  text-align: left;
}
.cresume-t { font-size: 1rem; font-weight: 800; color: var(--navy); }
.cresume-s { font-size: .88rem; color: var(--muted); margin: 5px 0 14px; }
.cresume-s b { color: var(--navy); }
.cresume-a { display: flex; gap: 10px; flex-wrap: wrap; }
.cresume-a .btn { padding: 9px 18px; font-size: .86rem; }

/* ---- 2. Intake: name, pathway, branch ---- */
.cin-wrap { max-width: 940px; margin: 0 auto; }
.cin-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  max-width: 560px;
  margin: 0 auto 30px;
  text-align: left;
}
.cin-name-row label {
  flex: 1 1 260px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cin-in {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 13px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--border-m);
  border-radius: 14px;
  box-shadow: inset 0 1px 3px rgba(15, 33, 71, .05);
}
.cin-in:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(12, 184, 196, .18);
}
.cin-step-h {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 4px;
}
.cin-step-s { font-size: .88rem; color: var(--muted); margin: 0 0 18px; }

.cin-paths {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.cin-path {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 16px 14px;
  font: inherit;
  text-align: left;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--border-m);
  border-radius: 16px;
  box-shadow: var(--cs);
  cursor: pointer;
  animation: cinIn .4s var(--card-delay, 0ms) both;
  transition: transform .18s, box-shadow .18s, border-color .18s, background .18s;
}
@keyframes cinIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cin-path:hover,
.cin-path:focus-visible {
  transform: translateY(-3px);
  border-color: var(--teal);
  box-shadow: var(--hs);
  outline: none;
}
.cin-path-i { font-size: 1.6rem; line-height: 1; }
.cin-path-n { font-size: .95rem; font-weight: 700; line-height: 1.3; }
.cin-path-c { font-size: .75rem; color: var(--light); font-weight: 600; }

.cin-spec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.cin-spec-head h3 { font-size: 1.15rem; margin: 0; flex: 1 1 auto; text-align: left; }
.cin-spec-count {
  font-size: .75rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--off);
  border-radius: 999px;
  padding: 3px 10px;
  margin-left: 6px;
}
.cin-spec-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px 4px 8px;
}
.cin-spec {
  padding: 9px 15px;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--border-m);
  border-radius: 999px;
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s, transform .16s;
}
.cin-spec:hover { border-color: var(--teal); transform: translateY(-1px); }
.cin-spec.sel {
  background: linear-gradient(135deg, var(--navy), var(--teal-d));
  border-color: transparent;
  color: #fff;
  box-shadow: var(--teal-shadow);
}
.cin-none { font-size: .9rem; color: var(--muted); padding: 10px 4px; }
.cin-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.cin-actions .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ---- 3. Quiz ---- */
.cq-sec {
  font-size: .74rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--off);
  border-radius: 999px;
  padding: 2px 10px;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.cq-overall {
  display: block;
  margin-top: 3px;
  font-size: .76rem;
  font-weight: 700;
  color: #56658a;   /* --light was 2.8:1 on white; this is 5.6:1 */
  letter-spacing: .02em;
}

/* Section hand-off card, styled off the existing .sinfo-* overlay */
.csec-card { max-width: 460px; text-align: left; }
.csec-step {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-d);
  margin-bottom: 6px;
}
.csec-sub { font-size: .95rem; color: var(--navy-l); font-weight: 600; margin: 0 0 12px; }
.csec-intro { font-size: .9rem; color: var(--muted); line-height: 1.6; margin: 0 0 14px; }
.csec-count {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--off);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 16px;
}

/* ---- 4. Results ---- */
.cr-head { text-align: center; margin-bottom: 26px; }
.cr-head h2 { margin: 0 0 4px; }
.cr-sub { font-size: 1rem; color: var(--navy-l); margin: 0 0 4px; }
.cr-meta { font-size: .82rem; color: var(--light); margin: 0; }
.cr-pending ol { margin: 10px 0 12px; padding-left: 22px; }
.cr-pending li { margin-bottom: 8px; line-height: 1.55; }
.cr-note { font-size: .85rem; color: var(--muted); font-style: italic; }
.cr-secs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}
.cr-secs li {
  font-size: .88rem;
  color: var(--navy);
  background: var(--off);
  border-radius: 10px;
  padding: 9px 13px;
}

/* ---- 5. Back control on the grade grid ---- */
.grade-back {
  display: inline-flex;
  /* the screen is a column flex container, whose default align-items: stretch
     was pulling this pill out to the full width of the page */
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 7px 15px;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  color: var(--navy-l);
  background: var(--white);
  border: 1px solid var(--border-m);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .16s, color .16s;
}
.grade-back:hover { border-color: var(--teal); color: var(--navy); }

/* ---- 6. Narrow screens ---- */
@media (max-width: 980px) {
  .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
}

@media (max-width: 640px) {
  .mode-grid { grid-template-columns: 1fr; gap: 16px; }
  .mode-card { padding: 28px 20px 24px; }
  .mc-i { width: 76px; height: 76px; }
  .mc-i svg { width: 42px; height: 42px; }
  .cin-paths { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .cin-spec-list { max-height: 320px; }
}

/* ============================================================
   4b. The generated report, and its PDF
   Rendered on screen so the student reads what they are about
   to download; html2pdf turns this same DOM into A4.
   ============================================================ */
.crep { max-width: 820px; margin: 0 auto; }
.crep-page {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 40px 46px 44px;
  margin-bottom: 22px;
  color: var(--navy);
  text-align: left;
}
.crep-page h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400; font-size: 1.9rem; line-height: 1.15;
  margin: 10px 0 14px; color: var(--navy);
}
.crep-page h3 { font-size: 1rem; font-weight: 800; margin: 26px 0 8px; }
.crep-page p { font-size: .93rem; line-height: 1.62; margin: 0 0 12px; color: var(--navy); }
.crep-eyebrow {
  font-size: .7rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal-d);
}

/* cover */
.crep-cover {
  background: linear-gradient(160deg, #0F2147, #0A1730);
  border: none; color: #fff; padding: 52px 46px 40px;
}
.crep-rule { width: 54px; height: 3px; background: var(--gold); margin-bottom: 24px; }
.crep-kick {
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-l); margin-bottom: 14px;
}
.crep-cover h1 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400; font-size: 2.7rem; line-height: 1.08; color: #fff; margin: 0;
}
.crep-sub { color: #A9BCDD !important; font-size: .95rem; margin: 18px 0 26px !important; max-width: 46ch; }
.crep-id {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: rgba(255,255,255,.14); margin: 0;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.crep-id div { background: #0C1B33; padding: 14px 16px; }
.crep-id dt {
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: #7E93BA; margin-bottom: 4px;
}
.crep-id dd { margin: 0; font-size: .9rem; font-weight: 700; color: #fff; }
.crep-foot { margin-top: 22px; font-size: .74rem; color: #7E93BA; letter-spacing: .04em; }

/* RIASEC code and hexagon */
.crep-code {
  display: flex; align-items: baseline; gap: 14px;
  background: var(--teal-pale); border: 1px solid rgba(12,184,196,.3);
  border-radius: 10px; padding: 14px 18px; margin-bottom: 8px;
}
.crep-code b { font-size: 1.8rem; font-weight: 800; letter-spacing: .12em; color: var(--teal-d); }
.crep-code span { font-size: .88rem; color: var(--navy); line-height: 1.5; }
.crep-hex { text-align: center; }
.crep-hexi { width: 100%; max-width: 400px; height: auto; display: block; margin: 6px auto 0; }
.hx-k { font-size: 15px; font-weight: 800; fill: var(--teal-d); letter-spacing: .06em; }
.hx-n { font-size: 12px; font-weight: 700; fill: var(--navy); }
.hx-k.dim { fill: var(--light); }
.hx-n.dim { fill: var(--muted); font-weight: 500; }
.crep-cap { font-size: .8rem !important; color: var(--muted) !important; text-align: center; }

.crep-bars { display: flex; flex-direction: column; gap: 7px; margin: 14px 0 4px; }
.crep-row { display: grid; grid-template-columns: 130px 1fr 66px; gap: 12px; align-items: center; }
.crep-rl { font-size: .85rem; font-weight: 700; }
.crep-rt { display: block; height: 12px; background: var(--off); border-radius: 999px; overflow: hidden; }
.crep-rf { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--navy-m), var(--teal)); }
.crep-rv { font-size: .8rem; color: var(--muted); text-align: right; }

/* the artwork the student rated highest */
/* two across, not three: the artwork carries the question text, and at a
   third of the width a student cannot read what they answered */
.crep-ev { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 18px; margin-top: 18px; }
.crep-ev figure { margin: 0; }
.crep-ev img {
  width: 100%; aspect-ratio: 1402 / 1122; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--border); display: block;
}
.crep-ev figcaption { margin-top: 8px; font-size: .8rem; color: var(--muted); line-height: 1.45; }
.crep-ev figcaption b {
  display: block; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal-d); margin-bottom: 3px;
}
.crep-ev figcaption em { font-style: normal; font-weight: 700; color: var(--navy); }

.crep-tbl { width: 100%; border-collapse: collapse; font-size: .86rem; margin-top: 10px; }
.crep-tbl th {
  text-align: left; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 0 10px 8px 0; border-bottom: 1.5px solid var(--border-m);
}
.crep-tbl td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--border); }
.crep-tbl td:first-child { font-weight: 700; }
.crep-tbl td:nth-child(2) { color: var(--muted); }
.crep-tbl td:last-child { text-align: right; white-space: nowrap; }

.crep-note {
  background: var(--gold-pale); border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0; padding: 13px 16px;
  font-size: .87rem !important; color: var(--navy-m) !important;
}
.crep-sig { margin-top: 26px !important; font-size: .74rem !important; color: var(--light) !important; }

.crep-actions { margin-top: 8px; }

/* While html2pdf renders, each sheet is pinned to A4 proportions at a fixed
   width, so a page fills its paper instead of floating at the top of it.
   html2pdf pages the canvas at 96dpi, so an A4 side is 11.69in x 96 =
   1122px — not the 1160px the mm ratio would suggest. 1110 leaves room so a
   sheet never spills onto a second page by a few pixels. */
/* 794px, not wider: html2pdf lays each sheet out again in a box exactly one A4
   wide (210mm = 794px). Measured at 820px, a text-heavy page re-wrapped a few
   lines longer when rendered, ran past its sheet and left a blank one behind. */
body.crep-printing .crep { width: 794px; max-width: none; }
body.crep-printing .crep-page {
  border: none;
  margin-bottom: 0;
  min-height: 1110px;
  box-sizing: border-box;
}
body.crep-printing .crep-cover { display: flex; flex-direction: column; justify-content: center; }

@media print {
  .crep-page { page-break-after: always; border: none; margin: 0; }
  .crep-actions, .pv-bar { display: none !important; }
}

@media (max-width: 640px) {
  .crep-page { padding: 26px 20px 30px; }
  .crep-cover h1 { font-size: 2rem; }
  .crep-ev { grid-template-columns: 1fr; }
  .crep-row { grid-template-columns: 104px 1fr 56px; }
}


/* ---- 1c. Education Career — holding screen ---- */
.edu-hold {
  max-width: 760px;
  margin: 0 auto 8px;
  padding: 30px 34px 32px;
  border: 1px solid var(--border-m);
  border-radius: 26px;
  background: var(--white);
  box-shadow: var(--cs);
  text-align: left;
}
.edu-lead {
  margin: 0 0 22px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--navy);
}
.edu-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
  padding: 22px 0;
  border-top: 1px solid var(--border-m);
  border-bottom: 1px solid var(--border-m);
}
.edu-item { display: grid; grid-template-columns: 34px 1fr; row-gap: 3px; column-gap: 12px; }
.edu-n {
  grid-row: 1 / span 2;
  font-size: .82rem;
  font-weight: 800;
  color: #C77C0A;
  letter-spacing: .04em;
  padding-top: 2px;
}
.edu-h { font-size: .98rem; font-weight: 700; color: var(--navy); }
.edu-b { font-size: .88rem; line-height: 1.45; color: var(--muted); }
.edu-note {
  margin: 22px 0 0;
  padding: 14px 18px;
  border-left: 3px solid #E0A93C;
  border-radius: 0 10px 10px 0;
  background: #FDF6E9;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--navy);
}
.edu-alt { margin: 16px 0 0; font-size: .92rem; line-height: 1.55; color: var(--muted); }

@media (max-width: 640px) {
  .edu-hold { padding: 24px 20px 26px; border-radius: 20px; }
  .edu-list { grid-template-columns: 1fr; }
}

/* ── forced-choice triads (L1-FC) ──────────────────────────────────────────
   The artwork draws three option cards, each with its own 1 / 2 / 3 rank
   buttons. The controls sit below the picture and mirror that layout, so the
   student is operating the thing they are looking at. */
.qrank {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  margin-top: 10px;
}
.qrank-col {
  background: #fff;
  border: 1px solid var(--border, rgba(15, 33, 71, .16));
  border-radius: 14px;
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 10px rgba(15, 33, 71, .07);
  min-width: 0;
}
.qrank-h {
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy, #0F2147);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.qrank-h b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--navy, #0F2147);
  color: var(--gold, #C9A227);
  font-size: .78rem;
  margin-right: 7px;
  flex: 0 0 auto;
}
.qrank-btns { display: flex; gap: 8px; margin-top: auto; }
.qrank-b {
  flex: 1 1 0;
  min-width: 0;
  padding: 11px 0;
  border: 1.5px solid rgba(15, 33, 71, .22);
  border-radius: 11px;
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy, #0F2147);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.qrank-b:hover { border-color: var(--teal, #0CB8C4); transform: translateY(-1px); }
.qrank-b.taken { opacity: .45; }
.qrank-b.sel {
  background: var(--navy, #0F2147);
  border-color: var(--navy, #0F2147);
  color: var(--gold, #C9A227);
  opacity: 1;
}
.qrank-b:focus-visible,
.qskip:focus-visible,
.cexp-b:focus-visible { outline: 3px solid var(--teal, #0CB8C4); outline-offset: 2px; }
.qrank-hint {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  text-align: center;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted, #5a6a8a);
}
@media (max-width: 720px) {
  .qrank { grid-template-columns: 1fr; gap: 10px; }
  .qrank-col { flex-direction: row; align-items: center; gap: 12px; }
  .qrank-h { flex: 1 1 auto; font-size: .86rem; }
  .qrank-btns { flex: 0 0 auto; margin-top: 0; }
  .qrank-b { width: 42px; flex: 0 0 42px; }
}

/* ── skip control (L6 life context) ───────────────────────────────────────
   The item bank makes every life-context item skippable. Styled quietly and
   set apart from the answer options: declining is a legitimate answer, not a
   sixth choice competing with the other five. */
.qskip {
  display: block;
  margin: 14px auto 0;
  padding: 9px 20px;
  background: transparent;
  border: 1.5px dashed rgba(15, 33, 71, .3);
  border-radius: 999px;
  font-family: inherit;
  font-size: .86rem;
  font-weight: 700;
  color: var(--muted, #5a6a8a);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.qskip:hover { border-color: var(--navy, #0F2147); color: var(--navy, #0F2147); }
.qskip.sel {
  background: var(--navy, #0F2147);
  border-style: solid;
  border-color: var(--navy, #0F2147);
  color: #fff;
}

/* ── experience flag (off by default; see the manifest) ──────────────────── */
.cexp-opts { display: grid; gap: 9px; margin-top: 16px; }
.cexp-b { width: 100%; justify-content: center; }

/* ── quiz header at phone width ───────────────────────────────────────────
   .quiz-meta is a flex item, so its default min-width:auto stops it shrinking
   below its longest line — "Section 4 of 9 · Value Priorities" is enough to do
   it. .quiz-top-actions then has nowhere to go and the Exit button is pushed
   off the right edge of a 390px screen, taking the whole page into horizontal
   scroll on every question. Scoped to the college paper; the school papers put
   shorter text in the same bar and do not overflow. */
#college-quiz .quiz-meta {
  flex: 1 1 auto;
  min-width: 0;
}
#college-quiz .quiz-phase {
  overflow-wrap: anywhere;
}
#college-quiz .quiz-top-actions { flex: 0 0 auto; }

/* ── keyboard focus on the answer buttons ─────────────────────────────────
   .qopt carries an inset highlight that reads as a shadow, not as focus, so a
   keyboard user had no way to see where they were. */
#college-quiz .qopt:focus-visible {
  outline: 3px solid var(--teal, #0CB8C4);
  outline-offset: 3px;
}

/* ── the scored page ─────────────────────────────────────────────────────── */
.crep-warn { margin: 8px 0 0; padding-left: 20px; }
.crep-warn li { margin-bottom: 7px; font-size: .94rem; color: #14213d; line-height: 1.6; }

/* ── preview mode (localhost only; see previewAllowed() in college.js) ──── */
.cprev-flag{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4000;
  background: #7A1F1F; color: #fff; text-align: center;
  font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  padding: 6px 14px calc(6px + env(safe-area-inset-bottom, 0px));
}
.cprev-flag b { letter-spacing: .09em; text-transform: uppercase; margin-right: 6px; }
.cprev-jump{
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 7px 0 9px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(15,33,71,.12);
}
.cprev-l{
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #56658a; margin-right: 2px;
}
.cprev-b{
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  padding: 4px 9px; border-radius: 3px; cursor: pointer;
  border: 1px solid var(--border-m, rgba(15,33,71,.16));
  background: #fff; color: var(--navy, #0F2147);
}
.cprev-b:hover { border-color: var(--teal, #0CB8C4); }
.cprev-b.on { background: var(--navy, #0F2147); border-color: var(--navy, #0F2147); color: #fff; }
.cprev-n{
  margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--muted, #5a6a8a);
}

/* ── question artwork fills the window ────────────────────────────────────
   The pictures carry the question text, so their size IS the legibility of the
   paper. They were capped at roughly half the viewport height by the shared
   school rules, which left a 1402x1122 artwork drawn at 594x475 on a 1080p
   screen — 42% of its own resolution, with empty space all round it.

   The college screen is made a proper flex column instead, so the fixed parts
   (heading, progress, answer buttons, nav) take what they need and the picture
   takes everything left. No vh caps: the image is bounded by its container, so
   it fits any window without a number needing to be re-guessed per screen. */
body.quiz-mode #college-quiz.screen.active{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
body.quiz-mode #college-quiz .quiz-top,
body.quiz-mode #college-quiz .progress-bar,
body.quiz-mode #college-quiz .quiz-nav,
body.quiz-mode #college-quiz .cprev-jump{ flex: 0 0 auto; }

body.quiz-mode #college-quiz #cq-card{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
body.quiz-mode #college-quiz .q-new{
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  gap: 10px;
}
body.quiz-mode #college-quiz .q-count,
body.quiz-mode #college-quiz .qopts,
body.quiz-mode #college-quiz .qskip,
body.quiz-mode #college-quiz .qrank{ flex: 0 0 auto; }

body.quiz-mode #college-quiz .qn-imgwrap{
  flex: 1 1 auto;
  min-height: 0;
  border: none;
  background: transparent;
}
/* the id in the selector outranks the shared .q-new.lettered vh caps */
body.quiz-mode #college-quiz .qn-img{
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 12px;
}

/* Reclaim the chrome around the picture: on the college paper the artwork is
   the content, so the shell gives up what it can spare. */
body.quiz-mode #college-quiz .quiz-top{ margin-bottom: 6px; }
body.quiz-mode #college-quiz .progress-bar{ margin-bottom: 8px; height: 6px; }
body.quiz-mode #college-quiz .quiz-nav{ margin-top: 10px; }

/* On a phone a 1402px-wide picture can only ever be as wide as the screen, so
   the locked-height column is abandoned entirely: the shell goes back to
   ordinary document flow, the artwork takes the full width it can get, and the
   page scrolls. Matches the 820px breakpoint the school paper already uses, so
   the two instruments switch to the stacked layout at the same size. */
@media (max-width: 820px){
  body.quiz-mode:has(#college-quiz.screen.active){
    height: auto;
    overflow: visible;
    padding: 10px 8px 24px;
    align-items: flex-start;
  }
  body.quiz-mode:has(#college-quiz.screen.active) .app{
    height: auto;
    max-height: none;
    overflow: visible;
    width: 98vw;
    max-width: 98vw;
    padding: 12px 10px 16px;
  }
  body.quiz-mode #college-quiz.screen.active{ display: block; height: auto; }
  body.quiz-mode #college-quiz #cq-card{ display: block; overflow: visible; }
  body.quiz-mode #college-quiz .qn-imgwrap{ flex: 0 0 auto; min-height: 0; }
  body.quiz-mode #college-quiz .qn-img{
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
  }
}

/* The preview strip is a label, not a control: it must never sit between a
   finger and a button. */
.cprev-flag{ pointer-events: none; }


/* The shell padding is decoration; the artwork is the paper. When the college
   quiz is the live screen, hand most of that padding back to the picture.
   :has() is already used elsewhere in this stylesheet; where it is missing the
   page simply keeps its old, slightly roomier frame. */
body.quiz-mode:has(#college-quiz.screen.active){ padding: 8px; }
body.quiz-mode:has(#college-quiz.screen.active) .app{
  padding: 10px 18px;
  height: calc(100vh - 16px);
  max-height: calc(100vh - 16px);
  width: 98vw;
  max-width: min(1700px, 98vw);
  border-radius: 20px;
}
body.quiz-mode #college-quiz .q-count{ margin-bottom: 0; }
body.quiz-mode #college-quiz .qopts{ margin-top: 8px; }


/* ============================================================
   4c. The career shortlist
   Six careers, each a flat run of blocks under a title bar. They
   are deliberately not boxed: a full entry is about a sheet long,
   and the PDF builder can only break a page between its direct
   children, so a single tall box could not be split.
   ============================================================ */
.ccar-h{
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 26px 0 8px; padding-top: 16px; border-top: 3px solid var(--teal);
}
.ccar-h b{ font-size: 1.12rem; font-weight: 800; color: var(--navy); flex: 1 1 240px; line-height: 1.25; }
.ccar-n{
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 800; font-size: .9rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.ccar-av{
  flex: 0 0 auto; font-style: normal; font-size: .7rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; border: 1px solid transparent;
}
/* three tiers told apart by wording first; colour only reinforces it */
.ccar-wide{ background: #E6F6EC; color: #14532D; border-color: #B7E0C4; }
.ccar-metro{ background: #E8EEFB; color: #1E3A8A; border-color: #C3D1F2; }
.ccar-niche{ background: #FDF3E1; color: #7A4A05; border-color: #F0D9A8; }
.crep-page h4.ccar-k{
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-d, #097a82); margin: 12px 0 3px;
}
.crep-page p.ccar-p{ font-size: .9rem; line-height: 1.55; margin: 0 0 4px; }
p.ccar-p i{ color: #7A4A05; font-style: normal; font-weight: 700; }
.ccar-do, .ccar-gates{ margin: 2px 0 4px; padding-left: 20px; font-size: .9rem; line-height: 1.5; color: var(--navy); }
.ccar-do li, .ccar-gates li{ margin-bottom: 3px; }
.ccar-gates{ list-style: none; padding-left: 0; }
.ccar-gates li{ padding: 6px 10px; background: #F4F7FC; border-radius: 5px; margin-bottom: 5px; }
.ccar-gates span{ color: #5B6B88; font-size: .8rem; }
.crep-page p.ccar-chk{
  margin-top: 8px; padding: 7px 10px; font-size: .82rem;
  background: #FDF3E1; border-radius: 5px; color: #5C3A04;
}
.ccar-tbl td span{ font-size: .78rem; color: #5B6B88; }
.ccar-tbl{ table-layout: fixed; width: 100%; }
/* .crep-tbl keeps its last column on one line, right-aligned, because elsewhere
   it holds a number. Here it holds a phrase, which has to be allowed to wrap or
   the table pushes a phone screen sideways. */
.crep-tbl.ccar-tbl th, .crep-tbl.ccar-tbl td, .crep-tbl.ccar-tbl td:last-child{
  vertical-align: top; white-space: normal; overflow-wrap: anywhere; text-align: left;
}
.ccar-tbl th:nth-child(1){ width: 46%; }
.ccar-tbl th:nth-child(2){ width: 30%; }
.ccar-tbl th:nth-child(3){ width: 24%; }

@media (max-width: 640px){
  .ccar-h b{ flex-basis: 100%; order: 2; }
}

/* ── 4d. At a glance, strengths, and the 30-day plan ───────────────────── */
.cgl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 6px; }
.cgl-tile {
  border: 1px solid rgba(15,33,71,.14); border-left: 4px solid var(--teal, #0d9488);
  border-radius: 4px; padding: 14px 16px; background: #fff;
}
.cgl-k {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #56658a; margin-bottom: 6px;
}
.cgl-b { font-size: 1.02rem; font-weight: 800; color: var(--navy, #0f2147); line-height: 1.35; }
.cgl-s { font-size: .84rem; color: #3d4a66; margin-top: 6px; line-height: 1.45; }
.cgl-careers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 6px 0 4px; }
.cgl-careers > .crep-note { grid-column: 1 / -1; margin: 0; }
.cgl-col ol { margin: 0; padding-left: 1.3em; }
.cgl-col li { font-size: .95rem; font-weight: 700; color: var(--navy, #0f2147); line-height: 1.4; margin: 5px 0; }

.crep-bars.crep-wide .crep-row { grid-template-columns: 230px 1fr 70px; }
.cst-list { margin: 8px 0 10px; padding-left: 1.2em; }
.cst-list li { font-size: .93rem; line-height: 1.55; margin: 6px 0; color: #24304d; }

.cpl-list { list-style: none; margin: 16px 0 10px; padding: 0; }
.cpl-list li {
  display: grid; grid-template-columns: 22px 92px 1fr; gap: 10px; align-items: start;
  padding: 12px 0; border-bottom: 1px solid rgba(15,33,71,.12);
}
.cpl-list li::before {
  content: ""; width: 15px; height: 15px; margin-top: 3px;
  border: 2px solid var(--navy, #0f2147); border-radius: 3px;
}
.cpl-w {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-d, #0f766e); padding-top: 3px;
}
.cpl-t { font-size: .93rem; line-height: 1.55; color: #24304d; }

@media (max-width: 640px) {
  .cgl-grid, .cgl-careers { grid-template-columns: 1fr; }
  .crep-bars.crep-wide .crep-row { grid-template-columns: 1fr 64px; }
  .crep-bars.crep-wide .crep-rl { grid-column: 1 / -1; }
  .cpl-list li { grid-template-columns: 22px 1fr; }
  .cpl-list .cpl-t { grid-column: 2; }
}
/* the PDF is always laid out at sheet width, whatever the screen */
body.crep-printing .cgl-grid, body.crep-printing .cgl-careers { grid-template-columns: 1fr 1fr; }
body.crep-printing .crep-bars.crep-wide .crep-row { grid-template-columns: 230px 1fr 70px; }
body.crep-printing .crep-bars.crep-wide .crep-rl { grid-column: auto; }
body.crep-printing .cpl-list li { grid-template-columns: 22px 92px 1fr; }
body.crep-printing .cpl-list .cpl-t { grid-column: auto; }

/* ============================================================
   4e. Report finish
   Room between lines, one clear point of emphasis per block, and
   a sheet that looks designed rather than typed. Everything here
   is plain boxes, borders and gradients, because html2canvas
   paints those faithfully and drops shadows, filters and blends.
   ============================================================ */
.crep-page { position: relative; padding: 48px 50px 54px; overflow: hidden; }
.crep-page:not(.crep-cover)::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px;
  background: linear-gradient(90deg, #0F2147 0%, #0CB8C4 62%, #C9A227 100%);
}
.crep-page p { font-size: .96rem; line-height: 1.78; margin: 0 0 15px; }
.crep-page h2 { font-size: 2.05rem; line-height: 1.16; margin: 10px 0 20px; }
.crep-page h2::after {
  content: ""; display: block; width: 62px; height: 4px; margin-top: 14px; border-radius: 2px;
  background: linear-gradient(90deg, #0CB8C4, #C9A227);
}
.crep-page h3 {
  font-size: 1.08rem; line-height: 1.3; margin: 32px 0 14px; padding: 2px 0 2px 13px;
  border-left: 5px solid #0CB8C4; color: #0F2147;
}
.crep-eyebrow { font-size: .72rem; letter-spacing: .18em; }
.crep-page p b, .crep-page li b { color: #0F2147; font-weight: 800; }
.crep-note { padding: 15px 18px; line-height: 1.7 !important; border-left-width: 5px; border-radius: 0 10px 10px 0; }
.crep-tbl td { padding: 12px 10px 12px 0; line-height: 1.5; }
.crep-warn { margin: 6px 0 12px; padding-left: 1.2em; }
.crep-warn li { font-size: .92rem; line-height: 1.7; margin: 0 0 10px; }
.crep-code { padding: 18px 22px; border-radius: 12px; border-width: 0 0 0 6px; border-style: solid; border-color: #0CB8C4; }
.crep-bars { gap: 11px; margin: 16px 0 14px; }
.crep-rt { height: 14px; }

/* cover: two quiet rings behind the title */
.crep-cover { padding: 64px 54px 46px; background:
    radial-gradient(circle at 88% 14%, rgba(12,184,196,.22) 0, rgba(12,184,196,.22) 120px, transparent 121px),
    radial-gradient(circle at 96% 30%, rgba(201,162,39,.20) 0, rgba(201,162,39,.20) 70px, transparent 71px),
    linear-gradient(160deg, #0F2147, #0A1730); }
.crep-cover h1 { font-size: 3.1rem; }
.crep-rule { width: 70px; height: 4px; }
.crep-id div { padding: 18px 18px; }
.crep-id dd { font-size: .98rem; line-height: 1.35; }

/* at a glance */
.cgl-grid { gap: 16px; margin: 22px 0 10px; }
.cgl-tile { border: none; border-top: 5px solid #0CB8C4; border-radius: 10px; padding: 18px 20px 20px; background: #F2FBFC; }
.cgl-tile:nth-child(2) { border-top-color: #C9A227; background: #FDF8EA; }
.cgl-tile:nth-child(3) { border-top-color: #1E3A8A; background: #EEF2FC; }
.cgl-tile:nth-child(4) { border-top-color: #C2410C; background: #FDF1EA; }
.cgl-k { font-size: .7rem; margin-bottom: 9px; }
.cgl-b { font-size: 1.12rem; line-height: 1.4; }
.cgl-s { font-size: .88rem; line-height: 1.6; margin-top: 9px; }
.cgl-careers { gap: 16px; margin: 8px 0 20px; }
.cgl-col { background: #0F2147; border-radius: 10px; padding: 18px 20px 14px; }
.cgl-col .cgl-k { color: #E6C65A; }
.cgl-col ol { padding-left: 1.4em; }
.cgl-col li { color: #fff; font-size: 1rem; line-height: 1.45; margin: 0 0 10px; }

/* strengths */
.cst-list { list-style: none; margin: 10px 0 16px; padding: 0; }
.cst-list li {
  font-size: .95rem; line-height: 1.7; margin: 0 0 10px; padding: 13px 16px;
  background: #F5F8FF; border-left: 4px solid #0CB8C4; border-radius: 0 8px 8px 0;
}

/* a career */
.ccar-h {
  align-items: center; gap: 16px; margin: 20px 0 22px; padding: 20px 22px;
  border-top: none; border-radius: 12px;
  background: linear-gradient(135deg, #0F2147 0%, #1B3D7A 100%);
}
.ccar-n { width: 50px; height: 50px; background: #C9A227; color: #0F2147; font-size: 1.45rem; }
.ccar-hx { flex: 1 1 260px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ccar-part { font-size: .66rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: #A9BCDD; }
.ccar-h b {
  flex: none; font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: 1.55rem; line-height: 1.2; color: #fff;
}
.ccar-av { font-size: .68rem; padding: 6px 12px; }
.crep-page p.ccar-lead { font-size: 1.04rem; line-height: 1.8; margin: 0 0 20px; color: #0F2147; }
.ccar-why {
  background: #E0F9FA; border-left: 5px solid #0CB8C4; border-radius: 0 12px 12px 0;
  padding: 16px 20px 6px; margin: 0 0 8px;
}
.ccar-why h4.ccar-k { margin-top: 0; }
.ccar-why p { font-weight: 600; }
.crep-page h4.ccar-k {
  font-size: .76rem; letter-spacing: .13em; color: #097a82; margin: 26px 0 11px;
  padding-bottom: 7px; border-bottom: 2px solid #D5EEF0;
}
.ccar-why h4.ccar-k { border-bottom: none; padding-bottom: 0; margin-bottom: 6px; }
.crep-page p.ccar-key {
  font-size: .98rem; font-weight: 700; line-height: 1.7; color: #0F2147;
  background: #FDF6E3; border-left: 5px solid #C9A227; border-radius: 0 10px 10px 0;
  padding: 13px 18px; margin: 0 0 14px;
}
.crep-page p.ccar-p { font-size: .95rem; line-height: 1.78; margin: 0 0 13px; }
.crep-page p.ccar-key b, .crep-page p.ccar-p b { color: #097a82; }
.ccar-step {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start;
  background: #F5F8FF; border-radius: 10px; padding: 13px 16px; margin: 0 0 9px;
}
.ccar-step span {
  width: 32px; height: 32px; border-radius: 50%; background: #0CB8C4; color: #fff;
  font-weight: 800; font-size: .95rem; display: flex; align-items: center; justify-content: center;
}
.crep-page .ccar-step p { margin: 3px 0 0; font-size: .95rem; line-height: 1.65; font-weight: 600; }
.ccar-gate { border: 1.5px solid #D6DEEE; border-radius: 10px; padding: 14px 18px 4px; margin: 0 0 10px; }
.ccar-gate b { font-size: 1rem; color: #0F2147; }
.ccar-gk {
  display: inline-block; margin-right: 10px; padding: 3px 10px; border-radius: 999px;
  background: #0F2147; color: #fff; font-size: .64rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; vertical-align: 2px;
}
.crep-page .ccar-gate p { margin: 8px 0 10px; font-size: .92rem; line-height: 1.7; }
.crep-page p.ccar-chk {
  margin: 14px 0 0; padding: 12px 16px; font-size: .88rem; line-height: 1.6; font-weight: 600;
  background: #FDF3E1; border: 1.5px dashed #E0B865; border-radius: 10px; color: #5C3A04;
}

/* 30-day plan */
.cpl-list li { padding: 16px 0; gap: 14px; grid-template-columns: 22px 104px 1fr; }
.cpl-w {
  justify-self: start; padding: 4px 10px; border-radius: 999px; background: #E0F9FA;
  font-size: .68rem; color: #097a82;
}
.cpl-t { font-size: .96rem; line-height: 1.72; }

/* the footer each printed sheet carries */
.crep-pf { display: none; }
body.crep-printing .crep-pf {
  display: flex; justify-content: space-between; position: absolute; left: 50px; right: 50px; bottom: 20px;
  padding-top: 9px; border-top: 1px solid #D6DEEE;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; color: #56658a;
}
body.crep-printing .crep-page { padding: 48px 50px 58px; }
body.crep-printing .cpl-list li { grid-template-columns: 22px 104px 1fr; }
.crep-cont { margin-bottom: 18px; }

@media (max-width: 640px) {
  .crep-page { padding: 34px 20px 38px; }
  .crep-page h2 { font-size: 1.6rem; }
  .crep-cover h1 { font-size: 2.3rem; }
  .ccar-h { padding: 16px; gap: 12px; }
  .ccar-h b { font-size: 1.25rem; order: 0; flex-basis: auto; }
  .ccar-n { width: 40px; height: 40px; font-size: 1.15rem; }
  .cpl-list li { grid-template-columns: 22px 1fr; }
  .cpl-w { grid-column: 2; }
}
body.crep-printing .crep-page h2 { font-size: 2.05rem; }
body.crep-printing .crep-cover h1 { font-size: 3.1rem; }
body.crep-printing .ccar-h { padding: 20px 22px; gap: 16px; }
body.crep-printing .ccar-h b { font-size: 1.55rem; }
body.crep-printing .ccar-n { width: 50px; height: 50px; font-size: 1.45rem; }
body.crep-printing .cpl-w { grid-column: auto; }

/* ============================================================
   4f. House style
   One navy, one teal, gold only for the single point that matters
   on a page. Numbered sections, a running head and foot on every
   printed sheet, and a cover that fills its paper.
   ============================================================ */
/* cover */
.crep-cover { display: flex; flex-direction: column; gap: 56px; }
.ccv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.22); }
.ccv-brand { font-size: .86rem; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; color: #fff; }
.ccv-org { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #A9BCDD; }
.crep-cover h1 { font-size: 3.4rem; line-height: 1.04; }
.ccv-for { margin-top: 38px; padding-left: 20px; border-left: 4px solid #C9A227; display: flex; flex-direction: column; gap: 6px; }
.ccv-for span { font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #E6C65A; }
.ccv-for b { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 2rem; line-height: 1.15; color: #fff; }
.ccv-for em { font-style: normal; font-size: .95rem; color: #C9D6EE; line-height: 1.5; }
.crep-id { grid-template-columns: repeat(4, 1fr); background: transparent; gap: 0;
  border-top: 1px solid rgba(255,255,255,.22); border-bottom: none; }
.crep-id div { background: transparent; padding: 18px 16px 6px 0; }
.crep-foot { margin-top: 18px; font-size: .74rem; line-height: 1.6; }
body.crep-printing .crep-cover { justify-content: space-between; min-height: 1120px; padding: 64px 58px 54px; }
body.crep-printing .crep-cover h1 { font-size: 3.6rem; }

/* section numbers lead the eyebrow */
.crep-eyebrow { color: #097a82; }

/* restraint: the key sentence is a rule and weight, not a filled box */
.crep-page p.ccar-key {
  background: transparent; border-left: 4px solid #C9A227; border-radius: 0;
  padding: 2px 0 2px 16px; margin: 4px 0 16px; font-size: 1rem; line-height: 1.68;
}
.crep-note { background: #F5F8FF; border-left-color: #0F2147; color: #24304d !important; }
.ccar-why { background: #EAF8F9; }
.cgl-tile, .cgl-tile:nth-child(2), .cgl-tile:nth-child(3), .cgl-tile:nth-child(4) {
  background: #F5F8FF; border-top: 4px solid #0F2147;
}
.cgl-tile:nth-child(1) { border-top-color: #0CB8C4; }
.cgl-tile:nth-child(4) { border-top-color: #C9A227; }

/* strengths */
.cst-item {
  font-size: .95rem; line-height: 1.7; margin: 0 0 10px; padding: 13px 18px; color: #24304d;
  background: #F5F8FF; border-left: 4px solid #0CB8C4; border-radius: 0 8px 8px 0;
}
.cst-item b { color: #0F2147; }

/* inside this report */
.cgl-in { display: grid; grid-template-columns: 44px 230px 1fr; gap: 12px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid #E3E9F5; }
.cgl-in span { font-family: 'DM Serif Display', Georgia, serif; font-size: 1.25rem; color: #0CB8C4; }
.cgl-in b { font-size: .95rem; color: #0F2147; }
.cgl-in em { font-style: normal; font-size: .88rem; color: #56658a; line-height: 1.5; }

/* five-year roadmap */
.crep-page p.ccar-rnote { font-size: .86rem; line-height: 1.6; color: #56658a; margin: 0 0 14px; }
.ccar-yr { display: grid; grid-template-columns: 74px 1fr; gap: 0; margin: 0; }
.ccar-yl {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 14px 0 0; background: #0F2147; color: #fff; border-bottom: 1px solid rgba(255,255,255,.18);
}
.ccar-yl span { font-size: .6rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #A9BCDD; }
.ccar-yl b { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 1.9rem; line-height: 1.1; color: #fff; }
.ccar-yb { padding: 13px 18px 10px; background: #F5F8FF; border-bottom: 1px solid #DCE4F2; }
.ccar-yb strong { display: block; font-size: .98rem; font-weight: 800; color: #0F2147; margin-bottom: 6px; }
.ccar-yb ul { margin: 0; padding-left: 1.15em; }
.ccar-yb li { font-size: .92rem; line-height: 1.62; margin: 0 0 5px; color: #24304d; }
.ccar-yb li b { color: #097a82; }
.ccar-yr-door .ccar-yl { background: #C9A227; }
.ccar-yr-door .ccar-yl span, .ccar-yr-door .ccar-yl b { color: #0F2147; }
.ccar-yr-door .ccar-yb { background: #FDF6E3; }

/* routes, a little tighter */
.ccar-gate { padding: 13px 18px 2px; margin: 0 0 9px; }
.crep-page .ccar-gate p { font-size: .89rem; line-height: 1.62; margin: 7px 0 10px; }

/* running head on each printed sheet */
.crep-ph { display: none; }
body.crep-printing .crep-ph {
  display: flex; justify-content: space-between; position: absolute; left: 50px; right: 50px; top: 24px;
  font-size: .64rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #8a9ab8;
}
body.crep-printing .crep-page { padding: 62px 50px 58px; }
body.crep-printing .crep-cover .crep-ph, body.crep-printing .crep-cover .crep-pf { display: none; }

@media (max-width: 640px) {
  .crep-cover { gap: 34px; }
  .crep-cover h1 { font-size: 2.3rem; }
  .ccv-for b { font-size: 1.5rem; }
  .crep-id { grid-template-columns: 1fr 1fr; }
  .cgl-in { grid-template-columns: 36px 1fr; }
  .cgl-in em { grid-column: 2; }
  .ccar-yr { grid-template-columns: 56px 1fr; }
  .ccar-yb { padding: 12px 14px 8px; }
}
body.crep-printing .crep-id { grid-template-columns: repeat(4, 1fr); }
body.crep-printing .cgl-in { grid-template-columns: 44px 230px 1fr; }
body.crep-printing .cgl-in em { grid-column: auto; }
body.crep-printing .ccar-yr { grid-template-columns: 74px 1fr; }
body.crep-printing .ccv-for b { font-size: 2rem; }

/* contents, two across */
.cgl-ins { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.cgl-in, body.crep-printing .cgl-in { grid-template-columns: 40px 1fr; padding: 10px 0; }
.cgl-tile { padding: 16px 20px 16px; }

/* the roadmap sheet */
.ccar-h.ccar-h2 { padding: 14px 20px; margin: 18px 0 20px; background: #0F2147; }
.ccar-h2 .ccar-n, body.crep-printing .ccar-h2 .ccar-n { width: 38px; height: 38px; font-size: 1.1rem; }
.ccar-h2 b, body.crep-printing .ccar-h2 b { font-size: 1.25rem; }
.ccar-h2 .ccar-part { color: #E6C65A; }
.ccar-yl { padding-top: 20px; }
.ccar-yb { padding: 20px 22px 16px; }
.ccar-yb strong { font-size: 1.04rem; margin-bottom: 9px; }
.ccar-yb li { font-size: .95rem; line-height: 1.7; margin-bottom: 7px; }
.crep-page p.ccar-rend { margin: 16px 0 0; }
@media (max-width: 640px) { .cgl-ins { grid-template-columns: 1fr; } }
body.crep-printing .cgl-ins { grid-template-columns: 1fr 1fr; }

/* divider sheet that opens each part */
.crep-page.crep-div { background: linear-gradient(160deg, #0F2147, #0A1730); border: none; color: #fff; }
.crep-page.crep-div::before { display: none; }
.cdv-num { font-family: 'DM Serif Display', Georgia, serif; font-size: 6.5rem; line-height: 1; color: #0CB8C4; margin: 30px 0 18px; }
.crep-div .crep-eyebrow { color: #E6C65A; }
.crep-div h2 { color: #fff; font-size: 2.5rem; max-width: 16ch; }
.crep-div p { color: #D5DEF0; max-width: 60ch; }
.crep-div p b { color: #fff; }
.crep-div .crep-note { background: rgba(255,255,255,.08); border-left-color: #C9A227; color: #E4EAF6 !important; }
.cdv-row { display: grid; grid-template-columns: 54px 1fr auto; gap: 16px; align-items: center;
  padding: 20px 0; border-top: 1px solid rgba(255,255,255,.2); }
.cdv-row:last-child { border-bottom: 1px solid rgba(255,255,255,.2); }
.crep-div h2 + p, .crep-div p + .cdv-row, .crep-div .crep-note + .cdv-row { margin-top: 26px; }
.cdv-row span { width: 44px; height: 44px; border-radius: 50%; background: #C9A227; color: #0F2147;
  font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }
.cdv-row b { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 1.4rem; line-height: 1.25; color: #fff; }
.cdv-row em { font-style: normal; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #A9BCDD; text-align: right; }
body.crep-printing .crep-div .crep-ph, body.crep-printing .crep-div .crep-pf { color: #8FA3C8; border-color: rgba(255,255,255,.2); }
body.crep-printing .cdv-num { margin-top: 150px; }

/* roadmap, sized to sit on one sheet */
.ccar-yl { padding-top: 15px; }
.ccar-yb { padding: 15px 22px 10px; }
.ccar-yb strong { font-size: 1.02rem; margin-bottom: 6px; }
.ccar-yb li { font-size: .94rem; line-height: 1.6; margin-bottom: 4px; }
.crep-page p.ccar-rend { margin: 14px 0 0; }

@media (max-width: 640px) {
  .cdv-num { font-size: 4.2rem; margin-top: 6px; }
  .crep-div h2 { font-size: 1.7rem; }
  .cdv-row { grid-template-columns: 44px 1fr; }
  .cdv-row em { grid-column: 2; text-align: left; }
  .cdv-row b { font-size: 1.15rem; }
}
body.crep-printing .cdv-num { font-size: 6.5rem; }
body.crep-printing .crep-div h2 { font-size: 2.5rem; }
body.crep-printing .cdv-row { grid-template-columns: 54px 1fr auto; }
body.crep-printing .cdv-row em { grid-column: auto; text-align: right; }
body.crep-printing .cdv-row b { font-size: 1.4rem; }

/* divider: all three careers on the one sheet, and no white edge at the foot */
body.crep-printing .cdv-num { margin-top: 56px; }
.crep-div h2 { max-width: 22ch; }
body.crep-printing .crep-page.crep-div { min-height: 1120px; }
.cdv-row { padding: 17px 0; }

/* a section set slightly tighter so its last few lines stay on the sheet */
.crep-tight p, .crep-tight p.ccar-p { font-size: .9rem !important; line-height: 1.62 !important; margin-bottom: 10px !important; }
.crep-tight p.ccar-lead { font-size: .97rem !important; line-height: 1.66 !important; margin-bottom: 14px !important; }
.crep-tight p.ccar-key { font-size: .94rem !important; line-height: 1.58 !important; margin-bottom: 11px !important; }
.crep-tight h4.ccar-k { margin: 18px 0 9px; }
.crep-tight h3 { margin: 22px 0 10px; }
.crep-tight h2 { margin-bottom: 14px; }
.crep-tight .ccar-h { margin: 14px 0 16px; padding: 16px 20px; }
.crep-tight .ccar-why { padding: 13px 18px 3px; }
.crep-tight .crep-note, .crep-tight p.ccar-chk { padding: 10px 14px; }
.crep-tight .cpl-list li { padding: 11px 0; }
.crep-tight .cpl-t, .crep-tight .crep-warn li, .crep-tight .cst-item { font-size: .9rem; line-height: 1.6; }
.crep-tight .crep-warn li { margin-bottom: 6px; }
.crep-tight .cst-item { padding: 10px 16px; margin-bottom: 8px; }
.crep-tight .crep-tbl td { padding: 9px 10px 9px 0; }
.crep-tight .ccar-gate { padding: 11px 16px 0; margin-bottom: 7px; }
.crep-tight .ccar-gate p { font-size: .86rem !important; line-height: 1.55 !important; margin: 5px 0 8px !important; }
.crep-tight .crep-hexi { max-width: 340px; }
.crep-tight .crep-bars { gap: 8px; }