/*
 * The application confirmation slip — screen preview and the A4 print sheet.
 *
 * Two jobs in one file, on purpose. The document a student saves has to be the
 * document they were just looking at; keeping the screen preview and the print
 * sheet in one place is what makes that checkable in one read.
 *
 *   screen — the slip flows fluidly, so it is readable on the 360px phone the
 *            application was almost certainly sent from.
 *   print  — the same markup is pinned to one A4 page in millimetres and
 *            points, because the output is a real sheet of paper that a family
 *            files and carries back to the admissions desk.
 *
 * ── Why every type rule here is an ID selector with !important ──────────────
 *
 * `body.page-course main :is(p,li,dd)` in ice-design-system.css sets font-size
 * and line-height with `!important`, at specificity (0,1,3). /apply is a
 * `page-course` route, so without an answer every paragraph, list item and
 * definition on this sheet renders at body size — measured at 14.88px against
 * the 8pt this design asks for, which overflowed A4 by a third of a page and
 * pushed the footer onto a second sheet.
 *
 * FeeCalculator.astro dodged the same rule by using divs instead of p/li/dd.
 * That is not available here: this sheet is a checklist, a set of dates and a
 * table of facts, and the list and definition semantics are what make it
 * readable to a screen reader and sane to maintain. So the type is scoped to
 * `#applySlip` — specificity (1,x,x), which outranks the design system on any
 * comparison — and marked important to meet it on its own terms.
 *
 * Colours are literal rather than themed. A printed sheet has no dark mode and
 * no design tokens; it has ink on white paper, and the navy fee panel must
 * survive a browser's "background graphics off" default being switched on. The
 * values are the ICE palette from site-20260716b.css, transcribed for a surface
 * the token layer does not reach.
 */

#applySlip {
  --slip-navy: #0C1A38;
  --slip-crimson: #C41E3A;
  --slip-terracotta: #9E4814;
  --slip-terracotta-light: #D9702C;
  --slip-ink: #17181C;
  --slip-muted: #666A71;
  --slip-line: #E7E1D6;
  --slip-warm: #FAF7F2;
  --slip-paper: #FFFFFF;

  display: block;
  margin: 0 0 3rem;
}

#applySlip[hidden] { display: none; }

/* ── The screen jacket ──────────────────────────────────────────────────────
   Everything a student needs in order to end up with the file, and nothing
   that belongs on the sheet itself. Removed entirely at print. */

#applySlip .slip-chrome {
  display: grid;
  gap: 1.25rem;
  padding: 1.5rem;
  margin: 0 auto 1.5rem;
  max-width: 46rem;
  background: var(--slip-navy);
  color: #fff;
  border-radius: 14px;
}

@media (min-width: 46rem) {
  #applySlip .slip-chrome {
    grid-template-columns: 1.35fr 1fr;
    align-items: center;
    gap: 2rem;
    padding: 1.75rem 2rem;
  }
}

#applySlip .slip-chrome__head {
  margin: 0 0 .4rem;
  font-size: 1.0625rem !important;
  font-weight: 700;
  line-height: 1.3 !important;
  color: #fff;
}

#applySlip .slip-chrome__body {
  margin: 0;
  font-size: .875rem !important;
  line-height: 1.6 !important;
  color: #D7DCEA;
}

#applySlip .slip-chrome__act { display: grid; gap: .6rem; justify-items: stretch; }

/* The one action in this state, so it is allowed to be the loudest thing on
   the page. */
#applySlip .slip-chrome__act .btn {
  width: 100%;
  justify-content: center;
  background: var(--slip-crimson);
  border-color: var(--slip-crimson);
  color: #fff;
  font-size: 1rem;
  padding: .85rem 1.25rem;
}

#applySlip .slip-chrome__hint {
  margin: 0;
  font-size: .8125rem !important;
  line-height: 1.5 !important;
  color: #B9C2D8;
}

#applySlip .slip-chrome__hint b { color: #fff; }

/* ── The sheet ─────────────────────────────────────────────────────────────
   On screen it is a preview: same content, same order, fluid width. */

#applySlip .sheet {
  max-width: 46rem;
  margin: 0 auto;
  background: var(--slip-paper);
  color: var(--slip-ink);
  border: 1px solid var(--slip-line);
  border-radius: 10px;
  overflow: hidden;
}

#applySlip .sheet-top {
  display: grid;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 2px solid var(--slip-navy);
}

@media (min-width: 34rem) {
  #applySlip .sheet-top { grid-template-columns: 1fr auto; align-items: start; }
}

#applySlip .sheet-id { display: flex; gap: .85rem; align-items: flex-start; }

#applySlip .sheet-crest { width: 52px; height: 52px; flex: none; object-fit: contain; }

#applySlip .sheet-id__name {
  margin: 0;
  font-size: 1.1875rem !important;
  font-weight: 700;
  line-height: 1.2 !important;
  letter-spacing: -.01em;
  color: var(--slip-navy);
}

#applySlip .sheet-id__meta {
  margin: .2rem 0 0;
  font-size: .75rem !important;
  line-height: 1.4 !important;
  color: var(--slip-muted);
}

#applySlip .sheet-id__affil {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: .3rem 0 0;
  font-size: .6875rem !important;
  line-height: 1.35 !important;
  color: var(--slip-terracotta);
}

#applySlip .sheet-tu { width: 14px; height: 14px; flex: none; }

#applySlip .sheet-ref { text-align: left; }

@media (min-width: 34rem) { #applySlip .sheet-ref { text-align: right; } }

#applySlip .sheet-ref__label {
  margin: 0;
  font-size: .625rem !important;
  line-height: 1.4 !important;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slip-muted);
}

#applySlip .sheet-ref__value {
  margin: .15rem 0 .3rem;
  font-size: .9375rem !important;
  line-height: 1.3 !important;
  font-weight: 700;
  color: var(--slip-navy);
  /* A reference is read aloud down a phone line and typed at a desk — the
     digits have to be unambiguous and evenly spaced. */
  font-variant-numeric: tabular-nums;
}

#applySlip .sheet-ref__stamp {
  margin: 0;
  font-size: .6875rem !important;
  line-height: 1.4 !important;
  color: var(--slip-muted);
}

#applySlip .sheet-body { padding: 1.5rem; }

#applySlip .sheet-badge {
  display: inline-block;
  margin: 0 0 .9rem;
  padding: .3rem .7rem;
  background: var(--slip-terracotta-light);
  color: #fff;
  font-size: .625rem !important;
  line-height: 1.4 !important;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: 3px;
}

#applySlip .sheet-title {
  margin: 0 0 .6rem;
  font-size: 1.5rem !important;
  font-weight: 700;
  line-height: 1.15 !important;
  letter-spacing: -.015em;
  color: var(--slip-navy);
}

#applySlip .sheet-lede {
  margin: 0 0 1.4rem;
  max-width: 46em;
  font-size: .8125rem !important;
  line-height: 1.55 !important;
  color: var(--slip-muted);
}

#applySlip .sheet-lede b { color: var(--slip-ink); }

/* The eight facts. */
#applySlip .sheet-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem 1.25rem;
  margin: 0 0 1.4rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--slip-line);
  border-bottom: 1px solid var(--slip-line);
}

@media (min-width: 34rem) {
  #applySlip .sheet-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

#applySlip .sheet-facts dt {
  margin: 0 0 .2rem;
  font-size: .5625rem !important;
  line-height: 1.35 !important;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--slip-muted);
}

#applySlip .sheet-facts dd {
  margin: 0;
  font-size: .8125rem !important;
  line-height: 1.3 !important;
  font-weight: 700;
  color: var(--slip-ink);
  overflow-wrap: anywhere;
}

#applySlip .sheet-status { color: var(--slip-terracotta); }

/* ── Money ───────────────────────────────────────────────────────────────── */

#applySlip .sheet-money {
  display: grid;
  gap: 1.25rem;
  margin: 0 0 1.4rem;
}

@media (min-width: 40rem) {
  #applySlip .sheet-money { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

#applySlip .fee-block {
  padding: 1.25rem;
  background: var(--slip-navy);
  color: #fff;
  border-radius: 8px;
}

#applySlip .fee-block__label {
  margin: 0 0 .5rem;
  font-size: .5625rem !important;
  line-height: 1.35 !important;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #A8B4D0;
}

#applySlip .fee-block__amount {
  margin: 0;
  font-size: 2.125rem !important;
  line-height: 1.02 !important;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
}

#applySlip .fee-block__basis {
  margin: .35rem 0 .85rem;
  font-size: .5625rem !important;
  line-height: 1.35 !important;
  font-weight: 700;
  letter-spacing: .09em;
  color: #A8B4D0;
}

#applySlip .fee-block__month {
  margin: 0 0 .7rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .75rem !important;
  line-height: 1.45 !important;
  color: #D7DCEA;
}

#applySlip .fee-block__band {
  margin: 0;
  font-size: .6875rem !important;
  line-height: 1.4 !important;
  color: var(--slip-terracotta-light);
}

#applySlip .fee-side { display: grid; gap: 1rem; align-content: start; }

#applySlip .incl__head,
#applySlip .alt__head,
#applySlip .bring__head,
#applySlip .dates__head {
  margin: 0 0 .55rem;
  font-size: .5625rem !important;
  line-height: 1.35 !important;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--slip-muted);
}

#applySlip .incl__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }

#applySlip .incl__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .1rem .55rem;
  align-items: baseline;
  font-size: .75rem !important;
  line-height: 1.35 !important;
}

/* Rs 0 as money, inside the total — not a badge beside it. The free hostel and
   the free bus are worth more than the discount to a family outside the valley,
   so the eye has to read them as amounts. */
#applySlip .incl__zero {
  grid-row: span 2;
  font-weight: 700;
  color: var(--slip-crimson);
  font-variant-numeric: tabular-nums;
}

#applySlip .incl__list b { font-weight: 700; color: var(--slip-ink); }

#applySlip .incl__detail { font-size: .6875rem !important; line-height: 1.35 !important; color: var(--slip-muted); }

#applySlip .alt {
  padding-top: .85rem;
  border-top: 1px solid var(--slip-line);
}

#applySlip .alt__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }

#applySlip .alt__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  font-size: .75rem !important;
  line-height: 1.35 !important;
}

#applySlip .alt__code { color: var(--slip-muted); }

#applySlip .alt__fee { font-weight: 700; color: var(--slip-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }

#applySlip .alt__note {
  margin: .4rem 0 0;
  font-size: .625rem !important;
  line-height: 1.4 !important;
  color: var(--slip-muted);
}

/* ── Checklist and dates ─────────────────────────────────────────────────── */

#applySlip .sheet-cols { display: grid; gap: 1.25rem; margin: 0 0 1.25rem; }

@media (min-width: 40rem) {
  #applySlip .sheet-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

#applySlip .bring,
#applySlip .dates {
  padding: 1.1rem;
  border: 1px solid var(--slip-line);
  border-radius: 8px;
}

#applySlip .dates { background: var(--slip-warm); }

#applySlip .bring__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }

@media (min-width: 30rem) {
  #applySlip .bring__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#applySlip .bring__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .5rem;
  align-items: start;
  font-size: .6875rem !important;
  line-height: 1.35 !important;
}

/* A real box, because this list gets ticked with a pen on the way to campus. */
#applySlip .bring__box {
  width: 10px;
  height: 10px;
  margin-top: .18rem;
  border: 1px solid var(--slip-navy);
  border-radius: 2px;
}

#applySlip .bring__note {
  margin: .75rem 0 0;
  font-size: .625rem !important;
  line-height: 1.4 !important;
  color: var(--slip-muted);
}

#applySlip .dates__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }

#applySlip .dates__list li {
  display: grid;
  gap: .1rem;
  padding-left: .75rem;
  border-left: 2px solid var(--slip-crimson);
  font-size: .6875rem !important;
  line-height: 1.35 !important;
}

#applySlip .dates__list b { font-size: .75rem !important; color: var(--slip-navy); }

#applySlip .dates__list span { font-weight: 700; color: var(--slip-ink); }

#applySlip .dates__list small { font-size: .625rem !important; line-height: 1.4 !important; color: var(--slip-muted); }

#applySlip .dates__desk {
  margin: .8rem 0 0;
  font-size: .625rem !important;
  line-height: 1.4 !important;
  color: var(--slip-muted);
}

/* ── Small print and footer ──────────────────────────────────────────────── */

#applySlip .sheet-fine {
  margin: 0 0 .5rem;
  padding-top: .85rem;
  border-top: 1px solid var(--slip-line);
  font-size: .5625rem !important;
  line-height: 1.45 !important;
  color: var(--slip-muted);
}

#applySlip .sheet-fine--basis { border-top: 0; padding-top: 0; }

#applySlip .sheet-fine b { color: var(--slip-ink); }

#applySlip .sheet-foot {
  padding: .9rem 1.5rem 1.1rem;
  border-top: 2px solid var(--slip-navy);
}

#applySlip .sheet-foot__row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  margin: 0 0 .3rem;
  font-size: .75rem !important;
  line-height: 1.4 !important;
  color: var(--slip-ink);
}

#applySlip .sheet-foot__row b {
  color: var(--slip-crimson);
  font-size: .5625rem !important;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-right: .3rem;
}

#applySlip .sheet-foot__site {
  margin: 0;
  font-size: .625rem !important;
  line-height: 1.4 !important;
  color: var(--slip-muted);
}

/* ── Print: one A4 page ─────────────────────────────────────────────────────
   Isolation is two levels deep and no deeper, which is a constraint on the
   markup as much as on this file: BaseLayout puts <main> directly inside
   <body>, and ApplySlip must sit directly inside <main> on /apply. Hiding
   everything else then takes two rules and never touches the slip's own
   ancestors. Move the component deeper and printing yields a blank page.

   `.has-apply-slip` is set by public/js/apply-slip.js only once an application
   has actually been sent, so printing /apply before that still prints /apply.

   Sizes switch to points and millimetres: this output is paper, and a `rem`
   that depends on a browser's root font size is not a measurement on paper.
   The whole sheet is budgeted to 297mm — tests/apply-slip.spec.mjs measures it
   and fails if an edit pushes the footer onto a second page. */

@media print {
  @page {
    size: A4;
    margin: 0;
  }

  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  body.has-apply-slip > *:not(main) { display: none !important; }
  body.has-apply-slip main > *:not(#applySlip) { display: none !important; }

  /* Backgrounds are not decoration here — the navy fee panel and the white
     type inside it are the same object. Without this, a browser printing
     "background graphics off" renders white text on white paper. */
  #applySlip,
  #applySlip * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  #applySlip {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* The instruction to save, and the button that opened this dialog. Neither
     belongs on the sheet in a family's file. */
  #applySlip [data-slip-chrome] { display: none !important; }

  #applySlip .sheet {
    width: 210mm;
    height: 297mm;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
  }

  /* The type scale below is set to fill A4 rather than merely fit it. An
     earlier pass sized the sheet at 5–6pt, which cleared the page by 66mm and
     was close to unreadable in print — this document is read by a parent, and
     small print that has to be squinted at is small print that gets ignored.
     Nothing here drops below 6pt. */

  #applySlip .sheet-top {
    grid-template-columns: 1fr auto;
    align-items: start;
    padding: 11mm 13mm 5mm;
    border-bottom: 1.2pt solid var(--slip-navy);
  }

  #applySlip .sheet-crest { width: 15mm; height: 15mm; }
  #applySlip .sheet-id__name { font-size: 15pt !important; }
  #applySlip .sheet-id__meta { font-size: 7.5pt !important; }
  #applySlip .sheet-id__affil { font-size: 7pt !important; }
  #applySlip .sheet-tu { width: 3.6mm; height: 3.6mm; }

  #applySlip .sheet-ref { text-align: right; }
  #applySlip .sheet-ref__label { font-size: 6.5pt !important; }
  #applySlip .sheet-ref__value { font-size: 11.5pt !important; }
  #applySlip .sheet-ref__stamp { font-size: 7pt !important; }

  /* Grows to fill whatever the header and footer leave, so the sheet is
     always exactly one page and never almost one. */
  #applySlip .sheet-body { padding: 6mm 13mm 0; flex: 1 1 auto; }

  #applySlip .sheet-badge { font-size: 6.5pt !important; padding: 1.2mm 3mm; margin-bottom: 4mm; }
  #applySlip .sheet-title { font-size: 21pt !important; margin-bottom: 3mm; }
  #applySlip .sheet-lede { font-size: 9pt !important; margin-bottom: 5.5mm; }

  #applySlip .sheet-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3.5mm 5mm;
    padding: 4.5mm 0;
    margin-bottom: 5.5mm;
  }
  #applySlip .sheet-facts dt { font-size: 6pt !important; }
  #applySlip .sheet-facts dd { font-size: 10pt !important; }

  #applySlip .sheet-money {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 5mm;
    margin-bottom: 5.5mm;
  }

  #applySlip .fee-block { padding: 5.5mm; }
  #applySlip .fee-block__label { font-size: 6pt !important; }
  #applySlip .fee-block__amount { font-size: 27pt !important; }
  #applySlip .fee-block__basis { font-size: 6pt !important; }
  #applySlip .fee-block__month { font-size: 8pt !important; }
  #applySlip .fee-block__band { font-size: 7.5pt !important; }

  #applySlip .incl__head,
  #applySlip .alt__head,
  #applySlip .bring__head,
  #applySlip .dates__head { font-size: 6pt !important; }
  #applySlip .incl__list li { font-size: 8pt !important; }
  #applySlip .incl__detail { font-size: 6.8pt !important; }
  #applySlip .alt__list li { font-size: 8pt !important; }
  #applySlip .alt__note { font-size: 6.8pt !important; }

  #applySlip .sheet-cols {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 5mm;
    margin-bottom: 4.5mm;
  }

  #applySlip .bring, #applySlip .dates { padding: 4.5mm; }
  #applySlip .bring__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6mm; }
  #applySlip .bring__list li { font-size: 7.5pt !important; }
  #applySlip .bring__box { width: 2.9mm; height: 2.9mm; }
  #applySlip .bring__note { font-size: 6.8pt !important; }
  #applySlip .dates__list li { font-size: 7.5pt !important; }
  #applySlip .dates__list b { font-size: 8pt !important; }
  #applySlip .dates__list small { font-size: 6.8pt !important; }
  #applySlip .dates__desk { font-size: 6.8pt !important; }

  #applySlip .sheet-fine { font-size: 6.2pt !important; }

  #applySlip .sheet-foot {
    padding: 3mm 13mm 6mm;
    border-top: 1.2pt solid var(--slip-navy);
  }
  #applySlip .sheet-foot__row { font-size: 9pt !important; }
  #applySlip .sheet-foot__row b { font-size: 6pt !important; }
  #applySlip .sheet-foot__site { font-size: 6.8pt !important; }

  /* Nothing inside the sheet may split across a page break. */
  #applySlip .fee-block,
  #applySlip .bring,
  #applySlip .dates,
  #applySlip .sheet-facts,
  #applySlip .sheet-foot {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}