/* Station B: the procedure manual, laid out to JSP 101 service-writing conventions.
   Arial 12 pt, numbered paragraphs (1. › a. › (1) › (a)), markings centred top and bottom,
   annexes with their own heading block and A-1 page numbers. */
:root{
  color-scheme: light;
  --desk:#d4d1c7; --paper:#ffffff; --ink:#000000; --muted:#444444; --rule:#000000; --mark:#000000; --accent:#1f5fa8;
  --f-doc: Arial, "Arimo", "Helvetica Neue", Helvetica, sans-serif;
  --pt12: 16px;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--desk);color:var(--ink);font-family:var(--f-doc);font-size:var(--pt12);line-height:1.38;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px 40px}
button,a.btn{font:inherit;font-size:14px;cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.bar{max-width:794px;margin:0 auto 12px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.bar .who{font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#333}
.bar .acts{display:flex;gap:8px;flex-wrap:wrap}
.btn{background:#fff;color:#111;border:1px solid #777;border-radius:2px;padding:6px 12px;text-decoration:none}
.btn:hover{border-color:#111}
.btn.primary{background:#111;color:#fff;border-color:#111}

/* one A4 sheet */
.sheet{max-width:794px;margin:0 auto 18px;background:var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.18),0 8px 24px rgba(0,0,0,.12);
  padding:28px clamp(18px,7vw,72px) 22px;display:flex;flex-direction:column;min-height:min(1123px,auto)}
.marking{text-align:center;font-weight:700;letter-spacing:.04em;color:var(--mark);margin:0}
.marking.top{margin-bottom:22px}
.marking.bottom{margin-top:6px}
.folio{text-align:center;margin-top:auto;padding-top:28px}
.refblk{margin-left:auto;text-align:left;margin-bottom:22px;min-width:0}
.refblk div{white-space:nowrap}
.title{font-weight:700;text-transform:uppercase;text-align:center;text-decoration:underline;text-underline-offset:3px;margin:0 0 18px;font-size:var(--pt12);text-wrap:balance}
.subject{margin:0 0 18px}
.subject .s{font-weight:700;letter-spacing:.04em}
.mh{font-weight:700;text-transform:uppercase;margin:20px 0 10px;font-size:var(--pt12)}

/* numbered paragraphs */
.p{display:grid;grid-template-columns:2.2em 1fr;margin:0 0 12px}
.p>.n{font-weight:400}
.p>.b{min-width:0}
.p .ph{font-weight:700}
.p p{margin:0}
.p .b>.ph+p{display:inline}
.sp{display:grid;grid-template-columns:2.2em 1fr;margin:8px 0 0}
.sp .sp{margin-top:6px}
.warn{border:1.5px solid var(--ink);padding:6px 10px;margin-top:6px}
.warn b{text-transform:uppercase}
.annexes{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:4px 0 0}

/* annex heading block */
.annexblk{margin-left:auto;margin-bottom:22px}
.tcap{font-weight:700;margin:14px 0 4px}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{border:1px solid var(--rule);padding:4px 7px;text-align:left;vertical-align:top}
th{font-weight:700;background:#efefef}
td.m{font-variant-numeric:tabular-nums;letter-spacing:.02em}
td.k{width:2.6em;text-align:center}
.nato{columns:4 120px;margin:0;padding:0;list-style:none}
.nato b{display:inline-block;min-width:1.4em}

/* recognition guide */
.types{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:10px}
.type{position:relative;display:grid;gap:4px;border:1.5px solid #999;padding:10px;cursor:pointer;background:#fff;min-width:0}
.type:hover{border-color:#000}
.type:has(input:checked){border:3px solid #000;padding:8.5px;background:#f4f4f4}
.type input{position:absolute;opacity:0;pointer-events:none}
.type:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.type .sk svg{width:100%;height:auto;max-width:220px;display:block;color:#111}
.type .tn{font-weight:700}
.type .tf{display:grid;gap:2px;font-size:14px}
.type .tf span::before{content:"– "}
.type .tm{font-size:13px;color:var(--muted)}
.tnote{font-size:14px;margin:4px 0 10px}
@media print{.types{grid-template-columns:repeat(2,1fr)}}

/* serial entry */
.serialform{display:grid;gap:10px;margin-top:10px;max-width:420px}
#sf>.serialform{margin-left:2.2em}
.serialform label{font-weight:700}
.serialform input{font-family:var(--f-doc);font-weight:700;font-size:26px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border:2px solid var(--ink);border-radius:0;width:100%;max-width:260px;background:#fff;color:var(--ink)}
.serialform .e{color:#a00000;font-weight:700;min-height:1.4em}
.serialform button{justify-self:start;background:#111;color:#fff;border:0;padding:9px 18px;font-weight:700}
.note{font-size:14px;color:var(--muted);margin-top:4px}

@media print{
  body{background:#fff;padding:0}
  .bar{display:none}
  .sheet{box-shadow:none;margin:0;max-width:none;min-height:auto;padding:0 0 0;page-break-after:always;break-after:page}
  .sheet:last-child{page-break-after:auto;break-after:auto}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}