/* ===========================================================================
   iT9 HR document cover — THE single source of truth.
   ===========================================================================
   Loaded by index.html (the Read view + the fill screen), by sign.html (the
   candidate's signing page), and INLINED by api/onboarding_sign.php into the
   signed copy archived to SharePoint. One file, so those four surfaces cannot
   drift apart — before this existed the archived copy of a signed contract
   carried no stylesheet at all and rendered as unstyled browser-default HTML.

   Every measurement below is in `pt` and is copied VERBATIM from
   build/it9_docbuilder.py's draw_cover() and build/it9_brand.py, which are the
   scripts that produce the issued PDFs. 1pt = 1/72in in CSS exactly as in PDF,
   so the two are the same drawing rather than a re-interpretation by eye. If a
   value here disagrees with those scripts, the scripts are right.

   Layout notes that are load-bearing:
   * The cover is a 4-row grid. Row 2 (the title block) is the growing row with
     align-self:end, which is what puts the title low on the page with the
     empty upper field the design depends on, at any title length — the PDF
     does the same thing arithmetically via its own optical-grid anchor.
   * min-height is 672pt = Letter (792pt) minus the PDF's own top and bottom
     margins (56 + 64). Combined with @page{margin:56pt 56pt 64pt} in the
     print block, the cover occupies exactly one printed page.
   * The colour tokens are LOCAL (--dc-*) and never read the app's theme
     variables. A signed legal instrument must render identically for every
     reader, and it must still render correctly in the archived copy, which has
     no app stylesheet and no :root theme at all.
   =========================================================================== */

/* The brand display and mono faces. index.html has asked for 'Space Grotesk'
   and 'IBM Plex Mono' in --font-display/--font-mono since it was written but
   never shipped either file, so both silently fell back to Inter and the
   system mono — which is most of why the rendered document stopped looking
   like the PDF. Space Grotesk is the variable cut (300-700 in one 136 KB
   file), declared exactly the way this module already declares Inter.
   Paths are relative to THIS file, so they resolve under /assets/ for the app;
   onboarding_sign.php rewrites them to absolute for the archived copy. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(space-grotesk-variable.ttf) format('truetype-variations')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(ibm-plex-mono-regular.ttf) format('truetype')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(ibm-plex-mono-medium.ttf) format('truetype')}

/* --- colour + type tokens, verbatim from it9_brand.py.
   Declared on :root as well as .doccover because index.html and sign.html
   reuse .doccover-tag on BODY pages (see their own .docblk .doccover-tag
   rule), and because the archived copy has no other stylesheet to inherit a
   palette from. TOKENS ONLY here — layout must never land on :root, which is
   the <html> element. --- */
:root,.doccover{
  --dc-ink:#0F1419;          /* INK        */
  --dc-blue:#2C65A8;         /* BLUE       */
  --dc-blue-light:#7FB3E0;   /* BLUE_LIGHT */
  --dc-orange:#E8720E;       /* ORANGE — the ONE accent permitted per surface */
  --dc-s200:#E2E8F0;         /* SLATE_200  */
  --dc-s300:#CBD5E1;         /* SLATE_300  */
  --dc-s400:#94A3B8;         /* SLATE_400  */
  --dc-s500:#64748B;         /* SLATE_500  */
  --dc-s600:#475569;         /* SLATE_600  */
  --dc-s700:#334155;         /* SLATE_700  */
  --dc-field:#F4F8FD;        /* FIELD_BG   */
  --dc-display:'Space Grotesk','Inter',-apple-system,"Segoe UI",Roboto,sans-serif;
  --dc-body:'Inter',-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --dc-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

/* The cover surface itself. */
.doccover{
  box-sizing:border-box;
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  min-height:672pt;          /* Letter 792pt less the PDF's 56pt/64pt margins */
  margin:0 0 26pt;
  padding:0;
  border:0;                  /* kills the old 3pt bottom rule */
  color:var(--dc-ink);
  font-family:var(--dc-body);
  background-color:#fff;
  /* draw_cover_background(): white ground + the design system's soft blue
     radial wash. Top-right primary lobe (centre 95%/6%, peak alpha .115) and a
     much fainter bottom-left counterweight (4%/102%, alpha .060) so the page
     does not read top-heavy — the same two lobes as make_wash_asset.py. That
     PNG uses a smoothstep falloff; three stops approximate it closely enough
     that the difference is not visible, and a gradient cannot band the way a
     low-bit-depth raster can. */
  background-image:
    radial-gradient(circle at 95% 6%,
      rgba(44,101,168,.115) 0%, rgba(44,101,168,.058) 42%, rgba(44,101,168,0) 80%),
    radial-gradient(circle at 4% 102%,
      rgba(44,101,168,.060) 0%, rgba(44,101,168,.028) 40%, rgba(44,101,168,0) 74%);
  break-after:page;
  page-break-after:always;
}

/* ---- row 1: lockup left, classification right -------------------------- */
.doccover-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24pt}
/* logo_h = 84.0 in draw_cover(). width follows the asset's own ratio. */
.doccover-logo{height:84pt;width:auto;display:block;flex:0 0 auto}
/* The classification tag sits on the lockup's cap line with a hairline under
   it whose width is the text's own — hence inline-block + border-bottom
   rather than a full-width rule. MONO_MD 7.4pt, tracking 1.7pt. */
.doccover-head .doccover-tag{
  align-self:flex-start;margin-top:15pt;
  font-family:var(--dc-mono);font-weight:500;font-size:7.4pt;line-height:1.2;
  letter-spacing:1.7pt;color:var(--dc-s500);
  white-space:nowrap;text-align:right;
  border-bottom:.6pt solid var(--dc-s300);padding-bottom:6pt;
  /* No margin correction here. CSS letter-spacing adds a gap after the last
     glyph, so the box is 1.7pt wider than the visible text and the text
     lands just inside the margin — which is what draw_tracked() produces
     too (width = stringWidth + tracking*(len-1)). A negative right margin
     was tried first and is WRONG: on the last flex item it extends the box
     rightward, measured as a 2px overhang past the page margin. */
}

/* ---- row 2: eyebrow / title / accent bar / subtitle -------------------- */
/* align-self:end is what holds the title low on the page, leaving the empty
   upper field the design depends on.
   WHY THE lines-N CLASSES: draw_cover() anchors the title block on the 60%
   line and CENTRES it there —
       y = PAGE_H*0.60 + (len(lines)-1)*leading*0.5
   — so each extra title line lifts the eyebrow by only HALF a line. A
   bottom-anchored CSS block lifts it by a FULL line, which put a three-line
   title (the Employee Information Form) 8 points of page height too high.
   The server knows the line count, so it emits lines-1/2/3 and the bottom
   padding compensates. Measured against the PDF: eyebrow at 36/31/25% of the
   cover for one/two/three lines, where the PDF puts it at 35/31/27%.
   Tuned with padding rather than a negative margin because a negative margin
   large enough to match n=3 exactly drove the subtitle 27px INTO the
   "Prepared for" block. */
.doccover-mid{align-self:end;padding-bottom:34pt}
.doccover-mid.lines-2{padding-bottom:14pt}
.doccover-mid.lines-3{padding-bottom:0}
/* Three lines leave the subtitle touching the meta block; buy it back here
   rather than by moving the whole stack. */
.doccover-mid.lines-3 .doccover-sub{margin-top:14pt;margin-bottom:10pt}
.doccover-eyebrow{
  font-family:var(--dc-mono);font-weight:500;font-size:8.2pt;line-height:1.4;
  letter-spacing:2.1pt;color:var(--dc-blue);margin:0 0 12pt;
  text-transform:none;              /* the eyebrow is set as written, not caps */
}
/* _fit_title() picks the largest size at which the longest line fits the
   500pt measure, starting at 52. Every title in the set fits at 52, so that is
   the value; the clamp only steps down on a screen narrower than the measure,
   which paper never is. Negative tracking per --it9-tracking-tight. */
.doccover-title{
  font-family:var(--dc-display);font-weight:700;
  font-size:52pt;line-height:1.05;
  letter-spacing:-.02em;color:var(--dc-ink);
  margin:0;text-transform:uppercase;
  /* A wrapped title line breaks the whole cover: it adds a visual line the
     lines-N class has not accounted for, which pushed the subtitle into the
     "Prepared for" block. _fit_title() solves this by shrinking the type until
     the longest line fits the 500pt measure; CSS cannot measure, so instead
     every configured title line is kept short enough to fit at 52pt (the
     longest in the PDF set is "INFORMATION"), and balance is switched off so a
     line is never re-broken. Keep new title lines to ~15 characters. */
  text-wrap:nowrap;
}
/* Paper is always the full measure, so 52pt is right there. These steps are
   for narrow SCREENS only. */
@media (max-width:760px){ .doccover-title{font-size:38pt} }
@media (max-width:520px){ .doccover-title{font-size:28pt} }
/* One <span> per line, so the line breaks are the PDF's title_lines and not
   whatever the container width happens to produce. */
.doccover-title span{display:block}
/* Accent bar: blue 54x3.4pt, then the single orange dot (r=3.1) 9pt after it. */
.doccover-bar{display:flex;align-items:center;gap:9pt;margin:26pt 0 0}
.doccover-bar::before{content:"";display:block;width:54pt;height:3.4pt;background:var(--dc-blue)}
.doccover-bar::after{content:"";display:block;width:6.2pt;height:6.2pt;border-radius:50%;background:var(--dc-orange)}
.doccover-sub{
  font-family:var(--dc-body);font-size:10.4pt;line-height:16pt;color:var(--dc-s600);
  max-width:70%;margin:24pt 0 0;
}

/* ---- row 3: prepared for / prepared by -------------------------------- */
.doccover-grid{display:flex;gap:30pt;align-items:flex-start;margin:0 0 46pt}
.doccover-col{flex:1 1 0;min-width:0}
.doccover-heading{
  font-family:var(--dc-body);font-weight:600;font-size:7.4pt;line-height:1.2;
  letter-spacing:1.1pt;text-transform:uppercase;color:var(--dc-s600);
  padding-bottom:7pt;margin:0 0 8pt;   /* rule at meta_top-7, first label at -15.5 */
  border-bottom:.9pt solid var(--dc-blue-light);
}
/* A label + its field box. In the PDF the label is BODY_SB 6.9pt caps and the
   field is a 17pt-high underlined AcroForm box on FIELD_BG. */
.doccover-label{
  font-family:var(--dc-body);font-weight:600;font-size:6.9pt;line-height:1.2;
  letter-spacing:.4pt;text-transform:uppercase;color:var(--dc-s500);
  margin:0 0 4pt;
}
.doccover-val{
  min-height:17pt;box-sizing:border-box;
  background:var(--dc-field);border-bottom:.6pt solid var(--dc-s300);
  padding:3pt 4pt;margin:0 0 14pt;
  font-family:var(--dc-body);font-size:9.5pt;line-height:11pt;color:var(--dc-ink);
  overflow-wrap:anywhere;
}
/* A label following a value — the second field in a column, or the one after
   the static "Human Resources / hr@it9.ca" lines — needs air above it, or it
   sits directly on the line before. */
.doccover-val + .doccover-label,.doccover-fields + .doccover-label{margin-top:12pt}

/* Fields that sit side by side (first name / last name). */
.doccover-fields{display:flex;gap:14pt}
.doccover-fields > div{flex:1 1 0;min-width:0}
/* "Issued by Human Resources / hr@it9.ca" is set text, not a field — there is
   nothing for anyone to fill in, so it gets no field box (static_lines()). */
.doccover-static{
  background:none;border:0;padding:0;min-height:0;margin:0 0 2pt;
  font-family:var(--dc-body);font-size:8.6pt;line-height:12.5pt;color:var(--dc-s500);
}
.doccover-static.is-first{font-weight:600;font-size:9.4pt;color:var(--dc-ink);margin-bottom:4pt}

/* ---- row 4: footer ----------------------------------------------------- */
.doccover-foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24pt;
  border-top:.6pt solid var(--dc-s200);padding-top:18pt;
}
.doccover-legal{font-family:var(--dc-body);font-weight:600;font-size:8.2pt;line-height:13pt;color:var(--dc-s700)}
.doccover-addr{font-family:var(--dc-body);font-size:8.2pt;line-height:13pt;color:var(--dc-s500)}
.doccover-foot-r{text-align:right;flex:0 0 auto}
.doccover-ref{
  font-family:var(--dc-mono);font-weight:400;font-size:7.2pt;line-height:13pt;
  letter-spacing:1.2pt;color:var(--dc-s400);
}
.doccover-web{font-family:var(--dc-body);font-weight:600;font-size:8.2pt;line-height:13pt;color:var(--dc-blue)}

/* ---- signature rows on the cover (contract execution block) ------------ */
.doccover-sigheading{
  font-family:var(--dc-mono);font-weight:500;font-size:7.4pt;letter-spacing:1.1pt;
  text-transform:uppercase;color:var(--dc-s500);margin:0 0 6pt;
}
.doccover-sigrow{border-top:.6pt solid var(--dc-s200);margin-top:26pt;padding-top:6pt}
.doccover-sigline{font-family:var(--dc-body);font-size:8.2pt;color:var(--dc-s500)}
.doccover-sigval{font-family:var(--dc-body);font-weight:700;color:var(--dc-ink);margin-top:2pt}
.doccover-sigsub{font-weight:400;color:var(--dc-s500)}
.doccover-sigmark{
  font-family:'Brush Script MT','Segoe Script','Lucida Handwriting',cursive;
  font-size:23pt;font-weight:600;color:var(--dc-blue);
}

/* On a narrow screen the two meta columns and the footer stack rather than
   crush. Paper is never this narrow, so print is unaffected. */
@media (max-width:640px){
  .doccover{min-height:0}
  .doccover-grid,.doccover-foot{flex-direction:column;align-items:stretch}
  .doccover-sub{max-width:none}
  .doccover-foot-r{text-align:left}
  .doccover-logo{height:60pt}
}

/* The wash and the accent are brand, not decoration: `economy` (the default)
   would drop both and leave a bare type page. */
@media print{
  .doccover{print-color-adjust:exact;-webkit-print-color-adjust:exact;
    min-height:672pt;break-after:page;page-break-after:always}
}