/*
   Points of Entry Health Screening — public design system
   Republic of Uganda · Ministry of Health

   WHERE THE COLOURS COME FROM
   Every colour here was sampled out of the Ministry's own emblem
   (health.go.ug/wp-content/uploads/2025/02/MoH-Logo.png), not chosen. The blue
   is the water on the shield, the ink is the lettering under it, the cream is
   the motto scroll, the red and the green are the kob and the mound, darkened
   until they carry text. The national flag is not a brand palette and is not
   used here.

   WHY IT IS PLAIN
   These pages are opened by screening officers on cheap tablets over border-post
   connections. There is no framework, no downloaded font and no third-party
   request anywhere in this file. It is served flat by nginx and cached; nothing
   here needs a build step, which matters because the deployment is a git pull
   with no shell afterwards.

   Structure: tokens · reset · layout · masthead · navigation · typography ·
   links · buttons · panels · lists · tables · forms · footer · print.
*/

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  /* from the emblem */
  --navy:#1a3a8f;          /* the water lines on the shield — 10.3:1 on white */
  --navy-dark:#12275f;     /* pressed and hovered states */
  --navy-tint:#eef1fa;     /* panel wash */
  --ink:#181818;           /* the lettering of the wordmark */
  --cream:#faf3e1;         /* the motto scroll */
  --clay:#8f2414;          /* the kob, darkened until it carries text */
  --moss:#40600f;          /* the mound, darkened until it carries text */

  /* neutrals derived from the ink */
  --ink-2:#3f444c;
  --ink-3:#5b6472;         /* the lightest text allowed on white — 6.0:1 */
  --rule:#d5d8dd;
  --rule-soft:#e8eaee;
  --paper:#ffffff;
  --page:#f6f6f4;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
         Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --measure:42rem;         /* prose never runs wider than this */
  --shell:73rem;

  --r:3px;                 /* one radius everywhere, small enough to read as official */
}

/* ── reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
img{max-width:100%;height:auto;border:0}
hr{border:0;border-top:1px solid var(--rule);margin:2.5rem 0}

/* Every grid and flex child that can hold wide content needs this, or a long
   token or a wide table pushes the whole page sideways on a phone. */
main,.shell,.grid>*,.card{min-width:0}

/* ── focus ──────────────────────────────────────────────────────────────── */
/* Two tone, so it stays visible on white paper, on the navy bar and on the
   cream panels alike. No single colour does that. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--ink);
  outline-offset:0;
  box-shadow:0 0 0 6px #fff, 0 0 0 9px var(--ink);
  border-radius:1px;
}

/* ── layout ─────────────────────────────────────────────────────────────── */
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 20px}
@media (max-width:30rem){.shell{padding:0 16px}}
main{flex:1 0 auto;padding:0 0 4rem}
.prose{max-width:var(--measure)}

/* Read by a screen reader, not shown. Used for table captions and for headings
   that a sighted reader gets from the layout instead. */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  border:0;
}

.skip{position:absolute;left:-9999px;top:0}
.skip:focus{
  left:0;top:0;z-index:50;display:block;padding:12px 18px;
  background:var(--ink);color:#fff;font-weight:700;text-decoration:none;
}

/* ── masthead ───────────────────────────────────────────────────────────── */
.topline{height:4px;background:var(--navy)}

.masthead{background:var(--paper);border-bottom:1px solid var(--rule)}
.masthead .in{
  display:flex;align-items:center;gap:14px;padding:13px 0;
  justify-content:space-between;
}
.masthead img{width:auto;height:46px;display:block;flex:0 0 auto}
@media (max-width:30rem){.masthead img{height:38px}}

.org{line-height:1.25;min-width:0}
.org b{
  display:block;font-size:16.5px;font-weight:700;letter-spacing:-.005em;
  color:var(--ink);
}
.org span{
  display:block;font-size:12px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-top:2px;
}
@media (max-width:30rem){.org b{font-size:15px}.org span{font-size:11px}}

.masthead a.home{
  display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;
  min-width:0;
}
.masthead a.home:hover .org b{text-decoration:underline}

/* The one action in the masthead. Officers arrive here to sign in far more
   often than to read anything, so it is present on every page. */
.signin{
  flex:0 0 auto;font-size:15px;font-weight:700;color:var(--navy);
  text-decoration:none;padding:8px 14px;border:2px solid var(--navy);
  border-radius:var(--r);white-space:nowrap;
}
.signin:hover{background:var(--navy);color:#fff}
@media (max-width:30rem){.signin{font-size:14px;padding:7px 11px}}

/* ── service navigation ─────────────────────────────────────────────────── */
.servicenav{background:var(--paper);border-bottom:1px solid var(--rule)}
.servicenav ul{
  display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:0 4px;
}
.servicenav a{
  display:block;padding:13px 12px 11px;font-size:15.5px;font-weight:600;
  color:var(--navy);text-decoration:none;border-bottom:4px solid transparent;
}
.servicenav a:hover{background:var(--navy-tint);text-decoration:underline}
.servicenav a[aria-current="page"]{
  color:var(--ink);border-bottom-color:var(--navy);
}
@media (max-width:30rem){
  .servicenav ul{gap:0}
  .servicenav a{padding:11px 10px 9px;font-size:14.5px}
}

/* ── phase banner ───────────────────────────────────────────────────────── */
.phase{
  display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
  padding:11px 0;border-bottom:1px solid var(--rule-soft);
  font-size:14.5px;color:var(--ink-2);
}
.tag{
  display:inline-block;padding:2px 9px;border-radius:2px;
  background:var(--navy);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}

/* ── breadcrumbs ────────────────────────────────────────────────────────── */
.crumbs{padding:14px 0 0;font-size:15px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:0 6px;list-style:none;margin:0;padding:0}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--ink-3)}
.crumbs a{color:var(--ink-2)}
.crumbs [aria-current="page"]{color:var(--ink-3)}

/* ── typography ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4{margin:0 0 .55em;line-height:1.2;letter-spacing:-.015em;font-weight:700}
h1{font-size:2.35rem;margin-top:1.6rem}
h2{font-size:1.5rem;margin-top:2.4rem}
h3{font-size:1.18rem;margin-top:1.9rem;letter-spacing:-.005em}
h4{font-size:1.02rem;margin-top:1.5rem;letter-spacing:0}
@media (max-width:30rem){h1{font-size:1.85rem}h2{font-size:1.32rem}}

p{margin:0 0 1.05rem;max-width:var(--measure)}
.lede{font-size:1.22rem;line-height:1.5;color:var(--ink-2);max-width:38rem}
.small{font-size:14.5px;color:var(--ink-3)}
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .5rem;
}
code,kbd{font-family:var(--mono);font-size:.9em;background:#f1f2f4;
  padding:.12em .34em;border-radius:2px;border:1px solid var(--rule-soft)}

/* ── links ──────────────────────────────────────────────────────────────── */
a{color:var(--navy);text-underline-offset:.14em}
a:hover{color:var(--navy-dark)}
a:visited{color:#4c2c72}
a.plain{text-decoration:none}
a.plain:hover{text-decoration:underline}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:12px 20px;border:2px solid var(--navy);border-radius:var(--r);
  background:var(--navy);color:#fff;font:inherit;font-weight:700;font-size:17px;
  text-decoration:none;cursor:pointer;box-shadow:0 2px 0 var(--navy-dark);
}
.btn:hover{background:var(--navy-dark);border-color:var(--navy-dark);color:#fff}
.btn:active{box-shadow:none;transform:translateY(2px)}
.btn.secondary{
  background:var(--paper);color:var(--navy);box-shadow:0 2px 0 var(--rule);
}
.btn.secondary:hover{background:var(--navy-tint);color:var(--navy-dark)}
.btn .chev{font-size:.85em;line-height:1}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin:1.6rem 0}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{
  background:var(--paper);border-bottom:1px solid var(--rule);
  padding:2.6rem 0 2.9rem;
}
/* A hero may carry one aside. On a wide screen the words would otherwise stop
   halfway across and leave the rest of the band empty, which reads as an
   unfinished page rather than as restraint. Nothing decorative goes in it - if
   there is nothing useful to put there, the page sets no aside and the hero
   stays a single column. */
.hero .band{display:grid;gap:26px;grid-template-columns:1fr;align-items:start}
@media (min-width:62rem){
  .hero .band.aside{grid-template-columns:minmax(0,1fr) 17rem;gap:56px}
}
.hero .band>*{min-width:0}
.hero .band>*:last-child :last-child{margin-bottom:0}

.hero h1{margin-top:0;font-size:2.8rem;max-width:20ch}
@media (max-width:44rem){.hero h1{font-size:2.1rem}}
@media (max-width:30rem){.hero h1{font-size:1.8rem}}
.hero .lede{margin-bottom:1.4rem}

/* ── cards ──────────────────────────────────────────────────────────────── */
.grid{display:grid;gap:18px;margin:1.8rem 0;grid-template-columns:1fr}
@media (min-width:38rem){.grid.two,.grid.three{grid-template-columns:1fr 1fr}}
@media (min-width:60rem){.grid.three{grid-template-columns:repeat(3,1fr)}}

.card{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:20px 20px 18px;display:flex;flex-direction:column;
  border-top:4px solid var(--navy);
}
.card h3{margin:0 0 .45rem;font-size:1.1rem}
.card h3 a{text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.card p{margin:0 0 .75rem;font-size:15.5px;color:var(--ink-2);max-width:none}
.card .meta{margin-top:auto;padding-top:.4rem;font-size:13.5px;color:var(--ink-3)}

/* ── panels ─────────────────────────────────────────────────────────────── */
.inset{
  border-left:5px solid var(--rule);padding:2px 0 2px 18px;margin:1.6rem 0;
  max-width:var(--measure);
}
.note{
  background:var(--cream);border:1px solid #ead9ae;border-radius:var(--r);
  padding:16px 18px;margin:1.6rem 0;max-width:var(--measure);
}
.note :last-child{margin-bottom:0}
.note b{display:block;margin-bottom:.25rem}

.warn{display:flex;gap:14px;align-items:flex-start;margin:1.6rem 0;max-width:var(--measure)}
.warn .mark{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--ink);
  color:#fff;font-weight:700;font-size:19px;line-height:34px;text-align:center;
}
.warn strong{font-size:1.02rem}

.panel{
  background:var(--navy-tint);border:1px solid #ccd5ee;border-radius:var(--r);
  padding:20px 22px;margin:1.8rem 0;
}
.panel :last-child{margin-bottom:0}
.panel h2,.panel h3{margin-top:0}

/* ── steps ──────────────────────────────────────────────────────────────── */
.steps{list-style:none;margin:1.6rem 0;padding:0;counter-reset:s}
.steps>li{
  counter-increment:s;position:relative;padding:0 0 1.4rem 3.2rem;
  border-left:2px solid var(--rule);margin-left:16px;
}
.steps>li:last-child{border-left-color:transparent;padding-bottom:0}
.steps>li::before{
  content:counter(s);position:absolute;left:-17px;top:-2px;
  width:32px;height:32px;border-radius:50%;
  background:var(--navy);color:#fff;
  font-size:15px;font-weight:700;line-height:32px;text-align:center;
}
.steps h3{margin:.1rem 0 .35rem;font-size:1.06rem}
.steps p{margin-bottom:.5rem}

/* ── plain lists ────────────────────────────────────────────────────────── */
ul.tick,ul.bullets{max-width:var(--measure);padding-left:1.15rem;margin:0 0 1.15rem}
ul.tick{list-style:none;padding-left:0}
ul.tick li{position:relative;padding-left:1.7rem;margin-bottom:.5rem}
ul.tick li::before{
  content:"";position:absolute;left:2px;top:.55em;
  width:9px;height:5px;border-left:2.5px solid var(--moss);
  border-bottom:2.5px solid var(--moss);transform:rotate(-45deg);
}
ul.bullets li,ol li{margin-bottom:.45rem}

/* ── links list ─────────────────────────────────────────────────────────── */
.linklist{list-style:none;margin:1.4rem 0;padding:0;max-width:var(--measure)}
.linklist li{border-bottom:1px solid var(--rule-soft)}
.linklist li:first-child{border-top:1px solid var(--rule-soft)}
.linklist a{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:14px 2px;text-decoration:none;font-weight:600;
}
.linklist a:hover{background:var(--navy-tint);text-decoration:underline}
.linklist .kind{
  font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;
}

/* ── download blocks ────────────────────────────────────────────────────── */
/* One per build. The QR square sits beside the words on a laptop and above them
   on a phone, because an officer scanning a code is holding a second device and
   needs the square first. */
.dl{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  border-top:4px solid var(--navy);
  display:grid;gap:22px;padding:22px;margin:0 0 18px;
  grid-template-columns:1fr;max-width:60rem;
}
@media (min-width:44rem){
  .dl{grid-template-columns:minmax(0,1fr) 178px;padding:24px 28px}
}
.dl>*{min-width:0}
.dl h3{margin:0 0 .3rem;font-size:1.22rem}
.dl .flag{
  display:inline-block;margin:0 0 .55rem;padding:2px 9px;border-radius:2px;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  background:var(--navy);color:#fff;
}
.dl .flag.practice{background:var(--moss)}
.dl p{margin:0 0 1rem;color:var(--ink-2);font-size:15.5px;max-width:40rem}
.dl .btn{margin-bottom:.9rem}

/* The facts about the file, in a line rather than a table: four short pairs
   read faster than four rows and take a third of the height. */
.facts{
  display:flex;flex-wrap:wrap;gap:4px 26px;list-style:none;margin:0;padding:0;
  font-size:14px;
}
.facts div{min-width:0}
.facts dt{color:var(--ink-3);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700}
.facts dd{margin:1px 0 0;font-weight:600}
.sum{
  display:block;font-family:var(--mono);font-size:12.5px;line-height:1.5;
  color:var(--ink-2);word-break:break-all;margin:.9rem 0 0;
  padding:9px 11px;background:#f1f2f4;border:1px solid var(--rule-soft);
  border-radius:2px;
}
.sum b{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}

.qr{text-align:center}
.qr .box{
  display:inline-block;padding:9px;background:#fff;
  border:1px solid var(--rule);border-radius:var(--r);line-height:0;
}
.qr .box img,.qr .box canvas{display:block;width:144px;height:144px}
.qr figcaption{font-size:12.5px;color:var(--ink-3);margin-top:8px;line-height:1.4}
@media (max-width:44rem){.qr{text-align:left}}

/* ── two-column prose, for pages with genuinely parallel content ────────── */
.split{display:grid;gap:26px 44px;grid-template-columns:1fr;margin:1.8rem 0}
@media (min-width:52rem){.split{grid-template-columns:1fr 1fr}}
.split>*{min-width:0}
.split h3{margin-top:0}
.split :last-child{margin-bottom:0}

/* ── details ────────────────────────────────────────────────────────────── */
details{margin:1.1rem 0;max-width:var(--measure);border-top:1px solid var(--rule-soft)}
details summary{
  cursor:pointer;padding:12px 2px;font-weight:600;color:var(--navy);
  list-style:none;display:flex;gap:.5em;align-items:baseline;
}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"▸";font-size:.85em;color:var(--ink-3)}
details[open] summary::before{content:"▾"}
details summary:hover{text-decoration:underline}
details .inner{padding:0 2px 16px 1.5em}
details .inner :last-child{margin-bottom:0}

/* ── tables ─────────────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;margin:1.5rem 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:30rem;font-size:15.5px}
caption{text-align:left;font-weight:700;padding:0 0 .6rem;font-size:1rem}
th,td{
  text-align:left;vertical-align:top;padding:10px 14px 10px 0;
  border-bottom:1px solid var(--rule-soft);
}
thead th{border-bottom:2px solid var(--ink);font-size:14.5px}
tbody tr:last-child td{border-bottom:1px solid var(--rule)}

/* ── rendered markdown ──────────────────────────────────────────────────── */
/* The training guides are written as markdown and converted on the way out, so
   they arrive as plain elements with no classes. Everything here is about
   making that readable without touching the source files. */
.md-body{max-width:var(--measure)}
.md-body h1{margin-top:1.4rem}
.md-body>p:first-of-type{font-size:1.14rem;color:var(--ink-2)}
.md-body ul,.md-body ol{padding-left:1.2rem;margin:0 0 1.15rem}
.md-body li{margin-bottom:.4rem}
.md-body li>ul,.md-body li>ol{margin-top:.4rem}
.md-body blockquote{
  margin:1.4rem 0;padding:2px 0 2px 18px;border-left:5px solid var(--navy);
  color:var(--ink-2);
}
.md-body blockquote :last-child{margin-bottom:0}
.md-body pre{
  background:#f1f2f4;border:1px solid var(--rule-soft);border-radius:var(--r);
  padding:14px 16px;overflow-x:auto;font-size:14.5px;line-height:1.5;
}
.md-body pre code{background:none;border:0;padding:0;font-size:inherit}
.md-body table{margin:1.4rem 0;min-width:0}
/* A markdown table has no wrapper to scroll inside, so the body scrolls it. */
.md-body{overflow-x:auto}
.md-body hr{margin:2rem 0}
.md-body img{border:1px solid var(--rule);border-radius:var(--r)}

/* ── footer ─────────────────────────────────────────────────────────────── */
footer.site{
  flex:0 0 auto;background:var(--paper);
  border-top:4px solid var(--navy);margin-top:auto;
}
footer.site .in{padding:2.2rem 0 2.6rem}
footer.site .cols{
  display:grid;gap:20px 40px;grid-template-columns:1fr;margin-bottom:1.6rem;
}
@media (min-width:44rem){footer.site .cols{grid-template-columns:repeat(3,minmax(0,1fr));max-width:52rem}}
footer.site h2{
  font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .7rem;
}
footer.site ul{list-style:none;margin:0;padding:0;font-size:15.5px}
footer.site li{margin-bottom:.45rem}
footer.site p{font-size:14.5px;color:var(--ink-2)}
.footmark{display:flex;gap:14px;align-items:center;
  padding-top:1.4rem;border-top:1px solid var(--rule-soft)}
.footmark img{height:40px;width:auto}
.footmark span{font-size:13.5px;color:var(--ink-3);line-height:1.45}

/* ── print ──────────────────────────────────────────────────────────────── */
@media print{
  body{background:#fff;font-size:11pt}
  .servicenav,.phase,.crumbs,.skip,.btnrow,footer.site .cols{display:none}
  .masthead,.hero,.card{border-color:#999}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .card{break-inside:avoid}
}

/* ── motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .btn:active{transform:none}
}