:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#172b2c;background:#f4f8f7;line-height:1.5}*{box-sizing:border-box}body{margin:0}header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;padding:1rem 5vw;background:#073f3c;color:#fff}
/* A link that is a direct child of the header sits on the header's own #073f3c
   fill, and `a{color:#075e54}` was painting it dark teal on dark green: 1.53:1,
   against the 4.5:1 a body of text needs, on the guide and assessment pages
   whose header is `<strong>ClinicProof</strong><a href="/dashboard">Dashboard</a>`
   and nothing else. It is the only way back to the dashboard from those pages.
   The rule is scoped to direct children so it cannot reach a link inside the
   white `nav` the other pages put in the header, where white would be invisible.
   #fff on the header fill measures 11.77:1. */
header > a{color:#fff}header form{margin:0}.pilot{margin-left:1rem;font-size:.8rem;background:#dff3ed;color:#073f3c;padding:.25rem .5rem;border-radius:1rem}main{max-width:1200px;margin:auto;padding:1.5rem}nav,.disclaimer{padding:1rem;margin-bottom:1rem;border-radius:.5rem;background:#fff}.disclaimer{border-left:5px solid #b45f06;background:#fff7e8}.metrics,.grid{display:grid;gap:1rem}.metrics{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:1rem}.metrics article,.grid section,.login-card{background:#fff;border:1px solid #dce7e4;border-radius:.75rem;padding:1rem;box-shadow:0 2px 8px #16302b0f}.metrics b{font-size:2rem;display:block;color:#075e54}.metrics span{font-size:.9rem}.grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}label{display:block;font-weight:600;margin-top:.75rem}input,select,textarea,button{font:inherit;padding:.65rem;border:1px solid #9fb4ae;border-radius:.35rem;max-width:100%}input:not([type=checkbox]),select,textarea{width:100%}button{background:#075e54;color:white;border:0;cursor:pointer;margin-top:.75rem}a{color:#075e54;font-weight:600}.login-card{max-width:520px;margin:8vh auto}.error{background:#fee;border-left:4px solid #a22;padding:1rem}.notice{background:#fff7e8;border-left:4px solid #b45f06;padding:1rem}small{color:#526866}@media(max-width:600px){header{align-items:flex-start}.grid{grid-template-columns:1fr}.pilot{display:block;margin:.25rem 0 0}.login-card{margin:1rem}}

.assessment-domain{margin-top:2.5rem;padding-bottom:.4rem;border-bottom:3px solid #075e54}.assessment-question{background:#fff;border:1px solid #dce7e4;border-radius:.75rem;padding:1rem;margin:1rem 0}.control-meta{color:#526866;font-weight:600}.assessment-question textarea{min-height:5rem;resize:vertical}.assessment-question form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 1rem}.assessment-question form>button,.assessment-question form>p,.assessment-question form>input[type=hidden]{grid-column:1/-1}
.control-guide-link{display:inline-block;margin:.25rem 0 1rem}.guide-heading,.guide-summary,.guide-columns,.guide-pagination{display:flex;gap:1rem;justify-content:space-between;align-items:flex-start}.guide-heading>div,.guide-summary>div,.guide-columns>section{flex:1}.button-link{display:inline-block;background:#075e54;color:#fff;padding:.65rem .85rem;border-radius:.35rem;text-decoration:none;white-space:nowrap}.guide-index{background:transparent;padding:0}.guide-index h2{margin-top:2rem;border-bottom:3px solid #075e54}.guide-index-card{display:grid;grid-template-columns:90px 1fr auto;gap:1rem;align-items:center;background:#fff;border:1px solid #dce7e4;border-radius:.5rem;margin:.5rem 0;padding:.75rem;text-decoration:none}.guide-index-card small{white-space:nowrap}.guide-page{max-width:1000px}.guide-control{background:#fff;border:1px solid #dce7e4;border-radius:.75rem;padding:1.5rem;margin:1rem 0}.guide-question{font-size:1.15rem;font-weight:600;border-left:5px solid #075e54;padding:.75rem 1rem;background:#f4f8f7}.guide-summary>div,.guide-columns>section,.guide-applicability{padding:1rem;border-radius:.5rem;background:#f4f8f7}.guide-steps{counter-reset:guide-step;list-style:none;padding:0}.guide-steps li{counter-increment:guide-step;margin:.6rem 0;padding-left:2.25rem;position:relative}.guide-steps li:before{content:counter(guide-step);position:absolute;left:0;top:0;background:#075e54;color:#fff;border-radius:50%;width:1.6rem;height:1.6rem;text-align:center;line-height:1.6rem;font-weight:700}.guide-pass{border-left:5px solid #18794e}.guide-warning{border-left:5px solid #b45f06}.guide-pagination{align-items:center}.guide-pagination>*{min-width:90px}.guide-pagination>*:last-child{text-align:right}
@media(max-width:700px){.guide-heading,.guide-summary,.guide-columns{display:block}.guide-heading .button-link{margin:1rem 0}.guide-summary>div,.guide-columns>section{margin:.75rem 0}.guide-index-card{grid-template-columns:75px 1fr}.guide-index-card small{grid-column:2;white-space:normal}}

/* Keyboard focus, which this stylesheet had no rule for at all. Only `:focus`
   would also fire on a click, putting a ring on a button the person just pressed
   with a mouse; `:focus-visible` is the one that follows the keyboard. The
   colour and offset match the risk pages, so focus looks the same across the
   application. Nothing here removes a default outline: the ring is added, not
   substituted, so a browser that does not support `:focus-visible` keeps its own.

   The ring was #f2b705 everywhere, and that was one colour doing two jobs it
   could not both do. A focus indicator is a non-text user-interface component
   state, so WCAG 2.2 requires 3:1 against the colours adjacent to it, and the
   ring is drawn at `outline-offset: 2px` -- outside the control's own box, over
   whatever the control is sitting on. #f2b705 measures 1.82:1 against white and
   1.63:1 against the #eef4f2 page, so on every light page in this application
   the ring was very nearly invisible; against the dark #073f3c header it
   measures 6.47:1, which is where the colour was actually working.

   So the hue is kept and darkened for light surfaces, exactly the way the risk
   stylesheet darkens its status fills into readable inks, and the original
   brightness is restored inside the header, which is the one dark surface a
   focusable element sits on. Measured, not guessed: on light surfaces the ring
   clears 4.60:1 at worst (over the #f8ddd6 error tint) and the header rule
   keeps 6.47:1 over the header fill. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #8a5a06;outline-offset:2px}
header a:focus-visible,header button:focus-visible{outline-color:#f2b705}

/* The two assessments, described. The dashboard previously offered the gap
   assessment alone, so the risk assessment was reachable only by typing its
   URL -- and a single link reading "Assessments" would not have been enough
   either, because the two are told apart by what they do, not by where they
   lead. Each entry carries its own sentence for that reason. */
.program-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:0;padding:0;list-style:none}
.program-nav li{background:#f4f8f7;border:1px solid #dce7e4;border-radius:.5rem;padding:1rem}
.program-nav a{display:inline-block;font-size:1.05rem;padding:.15rem 0}
.program-nav p{margin:.5rem 0 0;color:#526866;font-size:.9rem}

/* One column on a phone, and a finger-sized target for every link and control.
   `font-size:1rem` on the controls is not decoration: a smaller control font
   makes mobile Safari zoom the page when a field takes focus, which leaves the
   person scrolling a layout wider than their screen. */
@media(max-width:600px){
  main{padding:1rem}
  header{padding:1rem}
  nav,.disclaimer{padding:.85rem}
  .program-nav{grid-template-columns:1fr}
  .program-nav li{padding:.85rem}
  .program-nav a{padding:.35rem 0}
  .metrics{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  input,select,textarea,button{font-size:1rem}
  button{padding:.7rem 1rem}
}