/* MHPSS Nepal — field form shell (Layer 1).
   Loaded after app.css and design.css by the form pages that carry
   <body class="fx">. It restyles the shared classes app.css defines and adds
   nothing the page logic depends on: every id and class the scripts use is
   unchanged, so a page can opt in or out by the body class alone.

   The reference was the field forms of the Sadar Hati project (read 17 Sep
   2026): one narrow app column, a tinted header that says where you are in
   the form, oversized inputs that a thumb can hit, labels set small and
   quiet above them, and one big action at the bottom. The palette stays the
   Health Cluster blue already in app.css; no emblem, no gold.

   Running text is justified and never hyphenated, as on every page of the
   platform. Type is 16px in inputs on purpose: iOS zooms the page on any
   input smaller than that, and a zoomed form is a form you scroll sideways. */

body.fx{
  --fx-bg:#eef3f6; --fx-paper:#fff; --fx-line:#d5dde3; --fx-line-s:#e8eef2;
  --fx-ink:#20313b; --fx-slate:#5b6b76; --fx-mute:#6b7a85;
  --fx-blue:#009fe3; --fx-blue-d:#006996; --fx-blue-dd:#004969; --fx-blue-t:#eaf7fd;
  --fx-teal:#2a7f7a; --fx-teal-t:#e8f4f3;
  --fx-warn:#b4541f; --fx-warn-t:#fdf2ea; --fx-ok:#2f6b53; --fx-ok-t:#eef5f1; --fx-stop:#9b2c2c; --fx-stop-t:#fdeeee;
  --fx-r:14px; --fx-rs:12px;
  --fx-shadow:0 1px 2px rgba(18,38,52,.06), 0 10px 28px -20px rgba(18,38,52,.35);
  background:var(--fx-bg); color:var(--fx-ink);
  font-family:"Manrope","Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.55;
}
body.fx p, body.fx .help, body.fx .lede, body.fx .banner, body.fx .hint, body.fx .ofw-n, body.fx .xs{
  text-align:justify; hyphens:none; -webkit-hyphens:none; overflow-wrap:normal;
}

/* ---- status strips: one quiet line each, never three shouting bands ---- */
body.fx #pwabar, body.fx #fbbar{font-size:12px; padding:6px 16px; font-family:inherit}
body.fx .ribbon{
  background:var(--fx-blue-dd); color:#fff; text-align:center; padding:7px 16px; padding-top:calc(7px + env(safe-area-inset-top,0px));
  font:700 11.5px/1.45 inherit; font-family:inherit; letter-spacing:.04em; text-transform:uppercase;
}
body.fx .ribbon span:last-child{font-weight:500; text-transform:none; letter-spacing:0; opacity:.92}

/* ---- header ---- */
body.fx .top{
  background:linear-gradient(150deg,var(--fx-blue-d),var(--fx-blue-dd)); color:#fff;
  padding:16px 18px 14px; position:static;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  box-shadow:0 6px 18px -14px rgba(0,0,0,.6);
}
body.fx .top .brand{font-family:"Lora",Georgia,serif; font-weight:700; font-size:19px; letter-spacing:0; line-height:1.2}
body.fx .top .sub{font-size:10.5px; color:#cfe6f2; letter-spacing:.08em; text-transform:uppercase; font-weight:700; margin-top:3px}
body.fx .top a{
  color:#fff; text-decoration:none; font-size:12.5px; font-weight:700;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:6px 12px;
}
body.fx .top a:hover{background:rgba(255,255,255,.24)}

/* ---- step rail under the header: where you are, in one glance ---- */
body.fx .steps{
  position:sticky; top:0; z-index:29; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
  padding:9px 12px; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--fx-line-s); margin:0 -12px 0;
}
body.fx .steps::-webkit-scrollbar{display:none}
body.fx .steps a{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-size:12px; font-weight:700; color:var(--fx-slate); padding:6px 11px 6px 6px; border-radius:999px;
  border:1px solid var(--fx-line); background:#fff; white-space:nowrap;
}
body.fx .steps a i{
  font-style:normal; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--fx-line-s); color:var(--fx-slate); font-size:11px; font-weight:800;
}
body.fx .steps a.on{background:var(--fx-blue-t); border-color:var(--fx-blue); color:var(--fx-blue-dd)}
body.fx .steps a.on i{background:var(--fx-blue-d); color:#fff}
body.fx .steps a.done i{background:var(--fx-ok); color:#fff}

/* ---- the column ----
   A form is filled on a phone, so the form pages keep a 720px column: a
   thumb reaches across it and a question never sits on a line of forty
   words. A LANDING page is a different thing -- it is read on a laptop
   beside the hub, and the coordinator's rule (17 Sep 2026) is that every
   landing page opens at the same canvas width. So body.fx.landing takes the
   one page frame declared in design.css, exactly as the hub's own landing
   pages do, and the form-filling pages are the stated exception. */
body.fx .wrap{max-width:720px; margin:0 auto; padding:0 12px 120px}
/* The hub's landing pages stand beside a 250px rail, so their canvas is the
   page frame OR what the rail leaves, whichever is smaller. A landing page
   without a rail has to do the same arithmetic or it is wider than the hub
   on the same screen -- which is the jump he pointed at. Below 1000px the
   rail lies across the top and takes no width, so the frame alone applies. */
body.fx.landing .wrap{max-width:min(var(--frame,1240px), calc(100% - 250px));
                      padding:0 var(--gutter,28px) 110px}
@media (max-width:999px){ body.fx.landing .wrap{max-width:var(--frame,1240px)} }
@media (max-width:620px){ body.fx.landing .wrap{padding:0 15px 100px} }
body.fx .wrap > h1{
  font-family:"Lora",Georgia,serif; font-size:23px; line-height:1.25; margin:20px 6px 6px; letter-spacing:-.005em; color:var(--fx-ink);
}
body.fx .lede{color:var(--fx-slate); font-size:14px; margin:0 6px 16px; max-width:none}

/* ---- notices become cards ---- */
body.fx .banner{
  border:1px solid var(--fx-line); border-left:4px solid var(--fx-blue); background:var(--fx-paper);
  border-radius:var(--fx-rs); padding:12px 14px; margin:0 0 12px; font-size:13.5px; line-height:1.5; box-shadow:var(--fx-shadow);
}
body.fx .banner.stop{border-left-color:var(--fx-stop); background:#fff}
body.fx .banner.stop b{color:var(--fx-stop)}
body.fx .banner.warn{border-left-color:var(--fx-warn); background:var(--fx-warn-t)}
body.fx .banner.ok{border-left-color:var(--fx-ok); background:var(--fx-ok-t)}

/* ---- cards ---- */
body.fx .card{
  background:var(--fx-paper); border:0; border-radius:var(--fx-r); padding:18px 16px 14px; margin:0 0 14px;
  box-shadow:var(--fx-shadow); scroll-margin-top:118px;
}
body.fx .step{display:flex; align-items:center; gap:11px; margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--fx-line-s); flex-wrap:wrap}
body.fx .step .n{
  width:30px; height:30px; border-radius:50%; font-size:13px; font-weight:800;
  background:linear-gradient(150deg,var(--fx-blue-d),var(--fx-blue-dd)); color:#fff; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px -6px rgba(0,105,150,.8);
}
body.fx .step h2{margin:0; font-size:17px; font-weight:800; letter-spacing:-.01em; font-family:inherit}
body.fx .step .hint{
  margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fx-teal);
  background:var(--fx-teal-t); border-radius:999px; padding:4px 10px; white-space:nowrap;
}
@media (max-width:460px){ body.fx .step .hint{margin-left:41px; flex-basis:100%; width:max-content} }

/* ---- fields ---- */
body.fx .f{margin-bottom:14px}
body.fx label{font-size:13px; font-weight:600; color:var(--fx-ink); margin-bottom:6px}
body.fx .f > label, body.fx .card > label, body.fx .card > .row > label, body.fx form > label{
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fx-slate);
}
body.fx label .opt{font-weight:500; text-transform:none; letter-spacing:0; color:#93a1ab}
/* radio choices read as big tappable chips */
body.fx .radios{display:flex; flex-wrap:wrap; gap:8px}
body.fx .radios label{
  display:inline-flex; align-items:center; gap:9px; margin:0; padding:10px 14px; border:1.5px solid var(--fx-line); border-radius:999px;
  background:#fff; font-size:14.5px; font-weight:600; color:var(--fx-ink); text-transform:none; letter-spacing:0; cursor:pointer; line-height:1.3;
}
body.fx .radios input{width:16px; height:16px; margin:0; accent-color:var(--fx-blue-d)}
body.fx .radios label:has(input:checked){background:var(--fx-blue-d); border-color:var(--fx-blue-d); color:#fff}
body.fx input[type=text], body.fx input[type=date], body.fx input[type=time], body.fx input[type=tel], body.fx input[type=email], body.fx input[type=number],
body.fx input[type=password], body.fx select, body.fx textarea{
  padding:12px 13px; border:1.5px solid var(--fx-line); border-radius:var(--fx-rs); font-size:16px; line-height:1.3; background:#fff;
  color:var(--fx-ink); font-family:inherit; min-height:46px; transition:border-color .12s, box-shadow .12s;
}
body.fx select{
  appearance:none; -webkit-appearance:none; padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%235b6b76' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center;
}
body.fx input:focus, body.fx select:focus, body.fx textarea:focus{
  outline:none; border-color:var(--fx-blue); box-shadow:0 0 0 3px rgba(0,159,227,.18);
}
body.fx input::placeholder, body.fx textarea::placeholder{color:#a3aeb6}
body.fx textarea{min-height:76px}
body.fx input[type=time], body.fx input[type=date]{width:100%; box-sizing:border-box; -webkit-appearance:none; appearance:none}
body.fx .help{font-size:12.5px; color:var(--fx-mute); margin-top:6px; line-height:1.5}
body.fx .row{gap:12px}
@media (max-width:560px){ body.fx .row, body.fx .row.three{grid-template-columns:1fr} }

/* tick lists */
body.fx .chks{gap:8px}
body.fx .chk{
  font-size:13.5px; font-weight:500; text-transform:none; letter-spacing:0; margin:0;
  padding:8px 12px; border:1.5px solid var(--fx-line); border-radius:999px; background:#fff; color:var(--fx-ink);
  line-height:1.3; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
body.fx .chk input{width:16px; height:16px; accent-color:var(--fx-blue-d)}
body.fx .chk:has(input:checked){background:var(--fx-blue-d); border-color:var(--fx-blue-d); color:#fff; font-weight:700}

/* ---- the age grid ---- */
body.fx .dis{border:1px solid var(--fx-line); border-radius:var(--fx-rs); overflow:hidden; margin-top:8px; background:#fff}
body.fx .dis th{background:#f5f8fa; font-size:10.5px; letter-spacing:.06em; color:var(--fx-slate); padding:9px 8px}
body.fx .dis td{padding:7px 6px; border-bottom:1px solid var(--fx-line-s); font-size:13.5px}
body.fx .dis td:first-child{font-weight:800; color:var(--fx-ink); padding-left:12px}
body.fx .dis input{
  min-height:40px; padding:6px 6px; font-size:16px; text-align:center; border-radius:9px; border:1.5px solid var(--fx-line-s); background:#fafcfd;
}
body.fx .dis input:focus{background:#fff}
body.fx .dis td.rt{background:#f7fafb; font-weight:700; font-variant-numeric:tabular-nums; padding-right:12px}
body.fx .dis tfoot td{background:var(--fx-blue-t); color:var(--fx-blue-dd); font-weight:800; border-bottom:none}
body.fx .dis tfoot td:first-child{color:var(--fx-blue-dd)}
@media (max-width:460px){
  body.fx .dis th{font-size:9.5px; padding:8px 3px}
  body.fx .dis td{padding:5px 3px; font-size:12.5px}
  body.fx .dis td:first-child{padding-left:8px}
  body.fx .dis input{font-size:16px; padding:5px 2px; min-height:38px}
}
body.fx .tally{font-size:12.5px; padding:10px 12px; background:#f5f8fa; border-top:1px solid var(--fx-line-s)}
body.fx .tally.bad{background:var(--fx-warn-t); color:var(--fx-warn)}
body.fx .tally.good{background:var(--fx-ok-t); color:var(--fx-ok)}

/* the two-way fold as two quiet stats */
body.fx .rollup{
  margin-top:10px; padding:10px 14px; border:0; background:var(--fx-blue-t); border-radius:var(--fx-rs);
  display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline; justify-content:space-between; font-size:12.5px; color:var(--fx-blue-dd);
}
body.fx .rollup .rollv{font-size:13px}
body.fx .rollup b{font-size:17px; font-weight:800}

/* seen at the session: a list, one line each, number on the right */
body.fx .ofwhom{margin-top:12px; border:1px solid var(--fx-line); border-left:4px solid var(--fx-teal); border-radius:var(--fx-rs); padding:12px 14px; background:#fff}
body.fx .ofw-h{margin:0 0 10px; font-size:14px; font-weight:800}
body.fx .ofw-h span{font-weight:500; color:var(--fx-slate); font-size:12.5px}
body.fx .ofw-g{display:block}
body.fx .ofw-g > div{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--fx-line-s);
}
body.fx .ofw-g > div:last-child{border-bottom:0}
body.fx .ofw-g label{margin:0; text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:600; color:var(--fx-ink); flex:1 1 auto}
body.fx .ofw-g input{flex:0 0 84px; max-width:84px; width:84px; min-height:40px; text-align:center; padding:6px; font-size:16px; border-radius:9px}
body.fx .ofw-n{margin:10px 0 0; font-size:12px; color:var(--fx-slate)}

/* ---- buttons ---- */
body.fx .btn{
  font-family:inherit; font-size:15px; font-weight:800; border:1.5px solid var(--fx-blue-d); color:#fff;
  background:linear-gradient(150deg,var(--fx-blue-d),var(--fx-blue-dd)); border-radius:var(--fx-rs); padding:13px 18px; min-height:48px;
  box-shadow:0 8px 18px -12px rgba(0,105,150,.9); cursor:pointer; -webkit-tap-highlight-color:transparent;
}
body.fx .btn:active{transform:scale(.985)}
body.fx .btn.grey, body.fx .btn.ghost{background:#fff; color:var(--fx-blue-dd); border-color:var(--fx-line); box-shadow:none}
body.fx .btn.sm{font-size:13px; padding:8px 13px; min-height:38px; border-radius:999px}
body.fx .btns{display:flex; gap:10px; flex-wrap:wrap}

/* the one big action, always within reach */
body.fx .actions{
  position:sticky; bottom:0; z-index:28; margin:0 -12px; padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--fx-line-s); display:flex; gap:10px; align-items:center;
}
body.fx .actions .btn{flex:1 1 auto}
body.fx .actions .btn.grey{flex:0 0 auto}
body.fx .actions .st{font-size:12px; color:var(--fx-slate); flex:1 1 100%; text-align:center; margin-top:2px}
@media (min-width:720px){ body.fx .actions{border-radius:var(--fx-r) var(--fx-r) 0 0; margin:0} }

/* ---- saved list ---- */
body.fx .saved{background:var(--fx-paper); border-radius:var(--fx-r); box-shadow:var(--fx-shadow); padding:16px; margin-top:8px}
body.fx .saved h2{margin:0 0 10px; font-size:16px; font-weight:800}
body.fx .tbl-wrap{border:1px solid var(--fx-line); border-radius:var(--fx-rs); overflow:auto}
body.fx table.data{width:100%; border-collapse:collapse; font-size:13px}
body.fx table.data th{background:#f5f8fa; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--fx-slate); text-align:left; padding:9px 10px}
body.fx table.data td{padding:9px 10px; border-top:1px solid var(--fx-line-s)}
body.fx .empty{padding:18px; text-align:center; color:var(--fx-mute); font-size:13px}

/* ---- toast ---- */
body.fx #toast{border-radius:999px; font-size:13px; padding:11px 18px}