/* Software Development Grant: printable application form (A4) */

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

:root {
  --navy: #0f2747;
  --ink: #14181f;
  --mute: #5b6473;
  --rule: #7b8697;
  --hair: #c3cad4;
  --panel: #edf0f4;
  --sans: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: #d9dee5;
  color: var(--ink);
  font: 400 8.1pt/1.34 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

p { margin: 0; }

/* ---------------------------------------------------------------- screen toolbar */

.toolbar { position: sticky; top: 0; z-index: 10; background: #0b1d38; color: #fff; font: 400 14px/1.4 var(--sans); }
.toolbar__inner { max-width: 210mm; margin: 0 auto; padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.toolbar p { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.toolbar p strong { font-weight: 500; }
.toolbar p span { color: rgba(255, 255, 255, 0.62); font-size: 13px; }
.toolbar__actions { display: flex; align-items: center; gap: 20px; }
.toolbar a { color: rgba(255, 255, 255, 0.8); font-size: 13.5px; text-underline-offset: 3px; }
.toolbar a:hover { color: #fff; }
.toolbar button {
  height: 36px; padding: 0 18px; border: 0; border-radius: 3px; cursor: pointer;
  background: #fff; color: #0b1d38; font: 500 14px/1 var(--sans);
}
.toolbar button:hover { background: #e4eaf2; }

@media (max-width: 230mm) {
  .toolbar__inner { padding: 12px 16px; }
}

/* ---------------------------------------------------------------- page */

.doc { padding: 10mm 0 14mm; }

.page {
  position: relative; width: 210mm; height: 297mm; margin: 0 auto 10mm;
  padding: 11mm 14mm 0; background: #fff; overflow: hidden;
  box-shadow: 0 1px 2px rgba(11, 29, 56, 0.12), 0 10px 30px rgba(11, 29, 56, 0.1);
  break-after: page; page-break-after: always;
}
.page:last-child { break-after: auto; page-break-after: auto; }

@media screen and (max-width: 220mm) {
  .doc { overflow-x: auto; padding-left: 16px; padding-right: 16px; }
}

@media print {
  body { background: none; }
  .no-print { display: none !important; }
  .doc { padding: 0; }
  .page { margin: 0; box-shadow: none; }
}

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

.wordmark { font-size: 8pt; letter-spacing: 0.14em; color: var(--navy); white-space: nowrap; }
.wordmark b { font-weight: 600; }
.wordmark--lg { font-size: 10pt; }

.head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 3.2mm; border-bottom: 0.9mm solid var(--navy); }
.title { margin: 4.2mm 0 0; font: 500 19pt/1.1 var(--serif); letter-spacing: -0.01em; color: var(--navy); }
.formref { margin-top: 1.4mm; font-size: 7.4pt; color: var(--mute); letter-spacing: 0.02em; }

.office { border: 0.3mm solid var(--rule); padding: 1.8mm 2.4mm 2mm; background: #fff; }
.office__title { font-size: 6.6pt; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin-bottom: 1.4mm; }
.office__row { display: flex; align-items: center; justify-content: space-between; gap: 2.4mm; font-size: 7pt; color: var(--mute); }
.office__row + .office__row { margin-top: 1.2mm; }

.runhead {
  display: flex; align-items: center; justify-content: space-between; gap: 6mm;
  padding-bottom: 2.2mm; margin-bottom: 4mm; border-bottom: 0.5mm solid var(--navy);
}
.runhead__title { flex: 1; font-size: 7.4pt; color: var(--mute); }
.runhead__company { display: flex; align-items: flex-end; gap: 2mm; font-size: 7.2pt; color: var(--mute); }
.runhead__company i { display: block; width: 62mm; height: 4.4mm; border-bottom: 0.25mm solid var(--rule); }

/* Key facts strip */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 3.4mm; border: 0.25mm solid var(--hair); }
.facts > div { display: flex; flex-direction: column; padding: 1.6mm 2.6mm 1.7mm; border-left: 0.25mm solid var(--hair); }
.facts > div:first-child { border-left: 0; }
.facts span { font-size: 6.2pt; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.facts strong { margin-top: 0.6mm; font: 500 9.6pt/1.2 var(--serif); color: var(--navy); }
.facts em { font-style: normal; font-size: 6.8pt; color: var(--mute); }

/* Notes */
.notes { margin-top: 3mm; padding: 2.2mm 3mm 2.4mm; background: var(--panel); border-left: 0.9mm solid var(--navy); }
.notes__title { font-weight: 600; font-size: 7.8pt; margin-bottom: 1mm; }
.notes ol { margin: 0; padding-left: 4mm; column-count: 2; column-gap: 7mm; }
.notes li { font-size: 7.3pt; line-height: 1.38; padding-left: 0.6mm; margin-bottom: 0.6mm; break-inside: avoid; }

/* ---------------------------------------------------------------- sections */

.sec { margin-top: 3.4mm; }

.bar {
  display: flex; align-items: center; gap: 3mm; height: 6mm; margin: 0; padding: 0 3mm;
  background: var(--navy); color: #fff; font-size: 8.8pt; font-weight: 600; letter-spacing: 0.01em;
}
.bar span {
  font-size: 6.6pt; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72); padding-right: 3mm; border-right: 0.25mm solid rgba(255, 255, 255, 0.35);
}

.panel { background: var(--panel); padding: 2.4mm 4mm 0.6mm 3mm; } /* inner width 175mm = 35 boxes */

.row { display: flex; gap: 7mm; align-items: flex-end; }
.row--top { align-items: flex-start; }
.fld { display: flex; flex-direction: column; gap: 1.1mm; margin-bottom: 2.2mm; min-width: 0; }
.fld--grow { flex: 1; }
.lbl { font-size: 7.5pt; color: var(--ink); }
.lbl b { font-weight: 600; margin-right: 1.6mm; }
.lbl .note { color: var(--mute); }
.guide { font-size: 7.1pt; color: var(--mute); margin: -0.2mm 0 0.6mm; }
.guide--lead { margin: 0 0 2mm; color: var(--ink); }
.money { display: inline-flex; align-items: center; gap: 2mm; }
.money > b { font-size: 8pt; font-weight: 600; color: var(--mute); letter-spacing: 0.04em; }
.row + .guide { margin: -0.8mm 0 2.2mm; }

/* Character boxes */
.comb { display: inline-grid; grid-template-columns: repeat(var(--n), 5mm); height: 5.8mm; background: #fff; width: max-content; }
.comb + .comb { margin-top: 0.9mm; }
.comb i {
  display: flex; align-items: center; justify-content: center; font-style: normal;
  border: 0.25mm solid var(--rule); border-left-width: 0;
  font: 500 10pt/1 var(--mono); color: var(--ink);
}
.comb i:first-child { border-left-width: 0.25mm; }
.comb i:empty::before { content: attr(data-ph); font: 400 5.4pt/1 var(--sans); color: #b5bdc8; letter-spacing: 0; }
.comb--sm { grid-template-columns: repeat(var(--n), 3.9mm); height: 4.8mm; }
.comb--sm i { font-size: 8pt; }
.comb--sm i:empty::before { font-size: 4.6pt; }

.date { display: inline-flex; align-items: center; gap: 0.9mm; }
.date > b { font-weight: 400; color: var(--mute); font-size: 9pt; }
.date .comb + .comb { margin-top: 0; }

/* Tick boxes */
.ticks { display: grid; gap: 1.5mm 4mm; padding-top: 0.4mm; }
.ticks--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ticks--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ticks--inline { display: flex; flex-wrap: wrap; gap: 1.5mm 6mm; }
.tk { display: flex; align-items: center; gap: 1.8mm; font-size: 7.6pt; line-height: 1.2; min-width: 0; }
.tb {
  position: relative; flex: none; display: inline-block; width: 3.6mm; height: 3.6mm;
  background: #fff; border: 0.25mm solid var(--rule);
}
.tb.is-on::after {
  content: ""; position: absolute; left: 1.05mm; top: 0.2mm; width: 1.2mm; height: 2.3mm;
  border: solid var(--ink); border-width: 0 0.5mm 0.5mm 0; transform: rotate(42deg);
}
.tk--other { grid-column: span 2; }
.writein { flex: 1; min-width: 26mm; height: 3.6mm; border-bottom: 0.25mm solid var(--rule); align-self: flex-end; }
.writeline { display: block; height: 5.8mm; background: #fff; border: 0.25mm solid var(--rule); }

/* Ruled writing area */
.ruled { background: #fff; border: 0.25mm solid var(--rule); padding: 0 3mm; }
.ruled i { display: block; height: 6.9mm; border-bottom: 0.2mm solid var(--hair); }
.ruled i:last-child { border-bottom: 0; }

/* Declaration */
.keycond { background: #fff; border: 0.25mm solid var(--hair); border-left: 0.9mm solid var(--navy); padding: 2mm 3mm 1.6mm; margin-bottom: 2.4mm; }
.keycond__title { font-weight: 600; font-size: 7.8pt; margin-bottom: 0.8mm; }
.keycond ol { margin: 0; padding-left: 4.4mm; }
.keycond li { font-size: 7.4pt; line-height: 1.4; margin-bottom: 0.4mm; padding-left: 0.6mm; }

.declare { font-size: 7.5pt; line-height: 1.45; margin-bottom: 2.6mm; }

.sign { display: grid; grid-template-columns: 1.55fr 1fr; gap: 5mm; margin-bottom: 2.6mm; }
.sign__box { position: relative; height: 24mm; background: #fff; border: 0.25mm solid var(--rule); }
.sign__box span { position: absolute; left: 2.4mm; bottom: 1.8mm; font-size: 6.8pt; color: var(--mute); }
.sign__box::before { content: ""; position: absolute; left: 2.4mm; right: 2.4mm; bottom: 6mm; border-bottom: 0.2mm dashed var(--hair); }
.sign__box--stamp::before { display: none; }

/* ---------------------------------------------------------------- page 3 */

.terms {
  column-count: 2; column-gap: 7mm; column-rule: 0.2mm solid var(--hair);
  padding: 2.2mm 0 0.2mm; font-size: 6.75pt; line-height: 1.37; text-align: justify;
  hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4;
}
.terms__sec { break-inside: auto; }
.terms h3 { margin: 0 0 0.8mm; font-size: 7.4pt; font-weight: 600; color: var(--navy); break-after: avoid; }
.terms__sec + .terms__sec h3 { margin-top: 2mm; }
.terms p { margin: 0 0 0.9mm; display: flex; gap: 1.6mm; }
.terms p b { flex: none; width: 5.4mm; font-weight: 600; color: var(--ink); }

.checklist { list-style: none; margin: 0; padding: 0.4mm 0 1.4mm; display: grid; gap: 1.2mm; }
.checklist .tk { align-items: flex-start; font-size: 7.5pt; line-height: 1.35; }
.checklist .tb { margin-top: 0.1mm; }

.official { margin-top: 3.4mm; border: 0.5mm solid var(--ink); padding: 2.4mm 3mm 0.6mm; background: repeating-linear-gradient(135deg, #fff 0 1.6mm, #f3f5f8 1.6mm 2.2mm); }
.official__title { font-size: 7pt; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 2mm; }
.official__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8mm; }
.official .fld { background: transparent; }
.line { display: block; height: 6.2mm; border-bottom: 0.25mm solid var(--rule); background: #fff; }

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

.foot {
  position: absolute; left: 14mm; right: 14mm; bottom: 7.5mm;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 6mm;
  padding-top: 1.8mm; border-top: 0.25mm solid var(--hair);
  font-size: 6.6pt; color: var(--mute);
}
.foot__initials { display: flex; align-items: flex-end; gap: 2mm; }
.foot__initials i { display: block; width: 16mm; height: 6mm; border: 0.25mm solid var(--rule); background: #fff; }
.foot__page { font-variant-numeric: tabular-nums; }