/* Shared print+fill styling for the employment packet.
   Fillable on screen, identical on paper. No webfonts, no CDN — these files get
   emailed around and opened offline. */
@page { size: letter; margin: 0.55in 0.6in 0.5in; }

:root{
  --royal:#2A3B86; --gold:#E3A62A; --ink:#1B1A22; --soft:#5A5766;
  --line:#8C8798; --rule:#C9C3D4;
}
*{box-sizing:border-box;}
body{margin:0;font-family:Helvetica,Arial,sans-serif;font-size:9.7pt;line-height:1.45;
     color:var(--ink);-webkit-print-color-adjust:exact;print-color-adjust:exact;}
h1,h2{font-family:Georgia,'Times New Roman',serif;margin:0;color:var(--royal);font-weight:normal;}

/* Masthead */
.mast{display:flex;align-items:center;gap:14px;border-bottom:3px solid var(--royal);
      padding-bottom:8px;margin-bottom:3px;}
.mast img{width:62px;height:auto;}
.mast .who{flex:1;}
.mast h1{font-size:18.5pt;line-height:1.05;}
.mast .sub{font-size:8.2pt;color:var(--soft);margin-top:3px;letter-spacing:.02em;}
.goldbar{height:3px;background:var(--gold);margin-bottom:11px;}

/* Sections */
/* Sections MUST be allowed to split across pages. Marking them break-inside:avoid
   is what produced half-empty pages: a section that did not fit in the space left
   jumped wholesale to the next page. Only small atomic units avoid breaking —
   a heading with no content under it, one question, one table row. */
section{margin:0 0 12px;}
.shead{display:flex;align-items:baseline;gap:8px;border-bottom:1.5px solid var(--royal);
       padding-bottom:3px;margin-bottom:8px;break-after:avoid;}
.snum{font-family:Georgia,serif;font-size:11.5pt;color:var(--gold);font-weight:bold;line-height:1;}
.shead h2{font-size:11.5pt;letter-spacing:.02em;}
.shead .hint{margin-left:auto;font-size:7.8pt;color:var(--soft);font-style:italic;text-align:right;}
p.body{font-size:8.8pt;line-height:1.5;margin:0 0 7px;}
.intro{font-size:8.8pt;line-height:1.4;margin:0 0 11px;}
.intro strong{color:var(--royal);}

/* Fields */
.row{display:flex;gap:14px;margin-bottom:9px;align-items:flex-end;break-inside:avoid;}
.f{flex:1;min-width:0;}
.f.sm{flex:0 0 15%;} .f.md{flex:0 0 30%;} .f.lg{flex:2;}
.f label{display:block;font-size:7.2pt;letter-spacing:.04em;text-transform:uppercase;
         color:var(--soft);font-weight:bold;margin-bottom:2px;line-height:1.3;}
input.fld{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;
          font:inherit;color:var(--ink);padding:2px 3px 2px;height:20px;border-radius:0;}
input.fld:focus{outline:none;background:#FFF8E1;}
.f.after label{margin-bottom:0;margin-top:2px;}

/* Checkboxes */
.checks{display:flex;flex-wrap:wrap;gap:5px 20px;}
.chk{display:flex;align-items:flex-start;gap:6px;font-size:9pt;cursor:pointer;}
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:11px;height:11px;
  border:1px solid var(--line);background:#fff;margin:2px 0 0;flex:0 0 auto;position:relative;
  border-radius:0;cursor:pointer;}
input[type=checkbox]:checked{background:var(--royal);border-color:var(--royal);}
input[type=checkbox]:checked::after{content:"";position:absolute;left:2px;top:2px;
  width:5px;height:5px;background:#fff;}
input[type=checkbox]:focus{outline:1px solid var(--gold);}

/* Initial lines */
ul.init{list-style:none;margin:0;padding:0;}
ul.init li{display:flex;gap:9px;align-items:flex-start;padding:3.5px 0;font-size:8.9pt;
           border-bottom:1px dotted var(--rule);break-inside:avoid;}
ul.init li:last-child{border-bottom:0;}
ul.init input.ini{flex:0 0 44px;width:44px;border:0;border-bottom:1px solid var(--line);
  background:transparent;font:inherit;text-align:center;text-transform:uppercase;
  letter-spacing:.08em;padding:0 0 1px;height:16px;border-radius:0;}
ul.init input.ini:focus{outline:none;background:#FFF8E1;}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:8.6pt;break-inside:auto;}
tr{break-inside:avoid;}
thead{display:table-header-group;}
th{background:#F2EFE6;border:1px solid var(--line);padding:4px 6px;text-align:left;
   font-size:7.4pt;letter-spacing:.05em;text-transform:uppercase;color:var(--royal);}
td{border:1px solid var(--line);padding:0;vertical-align:top;}
td textarea{width:100%;border:0;background:transparent;font:inherit;padding:4px 5px;
  resize:none;display:block;overflow:hidden;min-height:40px;line-height:1.35;border-radius:0;}
td textarea:focus{outline:none;background:#FFF8E1;}

/* Written answers — ruled, and they grow as you type.
   The gap below is a full ruled-line height, NOT a separator: it is breathing room
   so a handwritten answer that runs long has somewhere to go on paper, while on
   screen the box itself grows and wraps. Both ruled lines belong to one box. */
.q{margin-bottom:17px;break-inside:avoid;}
.q p{margin:0 0 4px;font-size:9pt;font-weight:bold;}
textarea.write{width:100%;border:0;background:transparent;font:inherit;line-height:17px;
  padding:0;resize:none;overflow:hidden;display:block;border-radius:0;cursor:text;
  background-image:repeating-linear-gradient(transparent,transparent 16px,var(--line) 16px,var(--line) 17px);}
/* Tint the whole box on focus so it is obvious the ruled lines are one field. */
textarea.write:focus{outline:none;background-color:#FFF8E1;}

.note{background:#FAF7EF;border-left:3px solid var(--gold);padding:7px 11px;font-size:8.3pt;line-height:1.45;margin:0 0 11px;}
.note b{color:var(--royal);}
.stage{background:#EEF1F9;border:1px solid #C3CBE6;padding:8px 11px;font-size:8.6pt;margin:0 0 13px;}
.stage b{color:var(--royal);}

.sign{display:flex;gap:22px;margin-top:14px;}
section.keep{break-inside:avoid;}
.tail{break-inside:avoid;}
footer{margin-top:12px;padding-top:6px;border-top:1px solid var(--rule);
       font-size:7.6pt;color:var(--soft);display:flex;justify-content:space-between;}
.office{margin-top:10px;border:1px solid var(--rule);padding:7px 10px;font-size:7.8pt;color:var(--soft);}
.pagebreak{break-before:page;}

/* Screen-only toolbar */
.toolbar{position:sticky;top:0;z-index:10;background:var(--royal);color:#fff;
  display:flex;align-items:center;gap:10px;padding:9px 14px;margin:-24px -0.6in 18px;
  font-size:9.5pt;}
.toolbar b{font-weight:bold;}
.toolbar .grow{flex:1;}
.toolbar button{font:inherit;font-weight:bold;border:0;border-radius:4px;padding:6px 13px;
  cursor:pointer;background:var(--gold);color:#1B1A22;}
.toolbar button.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);}
.toolbar .saved{font-size:8.5pt;opacity:.85;}

@media screen{ body{max-width:8.5in;margin:24px auto;padding:0 .6in 60px;} }
@media print{
  .toolbar{display:none;}
  input.fld:focus,textarea:focus,td textarea:focus{background:transparent;}
  input.fld,textarea{color:#000;}
}