/* =========================================================
   PRELUDE v3.0 — app shell layout
   App header, eval banner, left rail / mobile rail nav,
   sticky patient banner, section frame, generic field grid,
   and responsive breakpoints. Ported verbatim from the
   monolith's <style> block.
   ========================================================= */

/* ---------- App header ---------- */
header.app{
  background:var(--nhs-header-bg);color:var(--on-dark);
  padding:14px 20px;display:flex;align-items:baseline;gap:12px;
  position:sticky;top:0;z-index:50;
}
header.app .name{font-weight:800;letter-spacing:.3px;font-size:18px;}
header.app .tag{font-size:11px;color:var(--on-dark-muted);text-transform:uppercase;letter-spacing:.14em;font-weight:600;}
header.app .stamp{margin-left:auto;font-size:11.5px;color:var(--on-dark-muted);font-weight:600;}
header.app .stamp b{color:var(--on-dark);}
header.app .stamp .amended{color:var(--on-dark);background:rgba(255,255,255,.18);border-radius:6px;padding:2px 7px;margin-left:6px;font-weight:800;letter-spacing:.04em;}

/* ---------- App shell: rail + main ---------- */
.shell{display:flex;align-items:flex-start;min-height:calc(100vh - 50px);}

/* Left rail (>=900px) */
nav.rail{
  flex:0 0 230px;position:sticky;top:50px;align-self:flex-start;
  height:calc(100vh - 50px);overflow-y:auto;
  border-right:1px solid var(--hair);background:var(--card);
  padding:14px 0;
}
nav.rail .item{
  display:flex;align-items:center;gap:10px;
  padding:9px 18px;font-size:13.5px;font-weight:600;color:var(--muted);
  cursor:pointer;border-left:3px solid transparent;
  transition:background-color .1s,color .1s;
}
nav.rail .item:hover{color:var(--charcoal);background:var(--surface-muted);}
nav.rail .item:active{background:var(--terra-soft);}
nav.rail .item.active{color:var(--charcoal);background:var(--terra-soft);border-left-color:var(--terra);}
nav.rail .item:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px;}
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;background:var(--grey-4);border:1.5px solid var(--hair);}
.dot.amber{background:var(--mid);border-color:var(--mid);}
.dot.green{background:var(--low);border-color:var(--low);}

/* Mobile rail fallback (<900px): horizontal scroll strip */
.rail-mobile{
  display:none;position:sticky;top:50px;z-index:40;
  background:var(--card);border-bottom:1px solid var(--hair);
  overflow-x:auto;white-space:nowrap;padding:10px 12px;gap:8px;
}
.rail-mobile .chip{
  display:inline-flex;align-items:center;gap:7px;
  border:1.5px solid var(--hair);background:var(--white);border-radius:999px;
  padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--ink);
  margin-right:8px;cursor:pointer;transition:background-color .1s,border-color .1s;
}
.rail-mobile .chip:hover{border-color:var(--terra);}
.rail-mobile .chip:active{background:var(--terra-soft);}
.rail-mobile .chip:focus-visible{outline:3px solid var(--focus-ring);outline-offset:1px;}
.rail-mobile .chip.active{border-color:var(--terra);color:var(--terra);background:var(--terra-soft);}

main.panel{flex:1 1 auto;min-width:0;padding:0 0 80px;}
.wrap{max-width:760px;margin:0 auto;padding:0 20px;}

/* ---------- Sticky patient banner ---------- */
.banner{
  position:sticky;top:50px;z-index:30;background:var(--card);
  border-bottom:1px solid var(--hair);padding:11px 0;
}
.banner .row{
  max-width:760px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);
}
.banner b{color:var(--charcoal);}
.banner .sep{color:var(--hair);}

/* ---------- Section frame ---------- */
section.sec{padding:34px 0 10px;border-bottom:1px solid var(--hair);}
section.sec:last-child{border-bottom:none;}
section.sec h2{margin:0 0 4px;font-size:18px;font-weight:800;color:var(--charcoal);}
section.sec .desc{font-size:13px;color:var(--muted);margin:0 0 18px;}

.stub{
  background:var(--card);border:1px dashed var(--hair);border-radius:var(--radius);
  padding:16px 18px;font-size:13.5px;color:var(--muted);
}
.stub b{color:var(--charcoal);}

/* ---------- Generic field primitives ---------- */
.fields{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.fields.two{grid-template-columns:repeat(2,1fr);}
.fields.three{grid-template-columns:repeat(3,1fr);}
.fields label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:5px;}
.fields input,.fields select{
  width:100%;padding:9px 10px;border:1px solid var(--hair);border-radius:var(--radius-control);
  font:inherit;font-size:14px;background:var(--white);color:var(--ink);
}
.fields input:focus-visible,.fields select:focus-visible{outline:3px solid var(--focus-ring);outline-offset:0;border-color:var(--charcoal);}

@media (max-width:899px){
  nav.rail{display:none;}
  .rail-mobile{display:flex;}
}
@media (max-width:560px){
  .fields{grid-template-columns:repeat(2,1fr);}
  .fields.three{grid-template-columns:repeat(2,1fr);}
}

/* ---------- Home vs. wizard view toggle ----------
   render() (core/render.js) sets/clears body.view-home on every
   render() call based on core/view.js's current view. The home
   page reuses .shell/main.panel/.wrap for layout consistency, but
   hides all the wizard-only chrome (rail, banner, wizard nav bar,
   the #sections mount point) while it's showing, and vice versa. */
body.view-home nav.rail,
body.view-home .rail-mobile,
body.view-home .banner,
body.view-home #wizardNav,
body.view-home #sections{display:none;}
body:not(.view-home) #home{display:none;}

/* ---------- Home page ---------- */
.homeHero{padding:48px 0 8px;text-align:center;}
.homeHero h1{margin:0;font-size:28px;font-weight:800;color:var(--charcoal);}
.homeHero .tag{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.14em;font-weight:600;}
.homeActions{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap;}

/* ---------- Wizard Back/Next bar ---------- */
.wizardNav{max-width:760px;margin:0 auto;padding:16px 20px 40px;display:flex;align-items:center;gap:14px;}
.wizardNav .wizardProgress{color:var(--muted);font-size:12.5px;font-weight:600;margin-left:auto;}

/* ---------- Footer ---------- */
.appFooter{border-top:1px solid var(--hair);background:var(--card);padding:18px 20px 28px;font-size:11.5px;color:var(--muted);text-align:center;}
.appFooter p{max-width:760px;margin:0 auto 8px;}