/* WX Help - the look of the Help experience wxhelp.js draws (WX-DSS-PLAN.md
   K.4, unit K2). Loaded beside theme.css in two hosts - the client area's
   Help entry and the configurator's Help panel - so every rule here sits
   under its own .wxhelp scope and every colour is a theme token: the two
   hosts show the same words in the same order, and they show them in the
   same clothes, light or dark. Nothing is fetched from anywhere: no font, no
   picture, no outside address.

   The .wxhelp-panel variant sizes the same drawing for a corner panel (the
   configurator's #helpPanel): the rail and the page scroll inside it instead
   of with the page. */

.wxhelp{display:flex;flex-direction:column;gap:var(--sp-3);
  font-family:var(--sans);color:var(--text);min-width:0}

/* ---- the head: the job, the version, the search, the note, the results -- */
.wxhelp .wxhelp-head{display:flex;flex-direction:column;gap:var(--sp-2)}
.wxhelp .wxhelp-job{margin:0;font-size:var(--fs-3);color:var(--text-mid);max-width:70ch}
.wxhelp .wxhelp-version{margin:0;font-size:var(--fs-2);color:var(--text-dim)}
.wxhelp .wxhelp-version:empty{display:none}
.wxhelp .wxhelp-search{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  margin-top:var(--sp-1)}
.wxhelp .wxhelp-search label{font-size:var(--fs-1);font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;color:var(--text-dim);flex:0 0 100%}
.wxhelp .wxhelp-search input{flex:1 1 220px;min-width:0;font-family:var(--sans);
  font-size:var(--fs-3);padding:7px 10px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface);color:var(--text)}
.wxhelp .wxhelp-search input:focus{outline:2px solid var(--wx);outline-offset:-1px;
  border-color:var(--wx)}
.wxhelp .wxhelp-search .btn{flex:0 0 auto}

/* A sentence about the whole page: why there is no page for this screen,
   that the session ended, that a search was sent too fast. */
.wxhelp .wxhelp-note{font-size:var(--fs-2);color:var(--text-mid);
  border-left:3px solid var(--wx);padding:var(--sp-1) var(--sp-3);
  background:var(--surface2)}
.wxhelp .wxhelp-note:empty{display:none}
.wxhelp .wxhelp-note p{margin:0}

.wxhelp .wxhelp-results:empty{display:none}
.wxhelp .wxhelp-results{border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface2);padding:var(--sp-2) var(--sp-3)}
.wxhelp .wxhelp-hits{list-style:none;margin:0;padding:0}
.wxhelp .wxhelp-hits li{padding:var(--sp-2) 0;border-top:1px solid var(--border)}
.wxhelp .wxhelp-hits li:first-child{border-top:0;padding-top:var(--sp-1)}
.wxhelp .wxhelp-hit{display:inline;font:inherit;font-size:var(--fs-3);font-weight:600;
  color:var(--navy);text-decoration:none;background:none;border:0;padding:0;
  cursor:pointer;text-align:left}
.wxhelp .wxhelp-hit:hover{text-decoration:underline}
.wxhelp .wxhelp-snippet{margin:var(--sp-1) 0 0;font-size:var(--fs-2);color:var(--text-mid);
  line-height:1.45;max-width:78ch}
.wxhelp .wxhelp-empty{margin:var(--sp-1) 0;font-size:var(--fs-2);color:var(--text-dim)}
.wxhelp .wxhelp-error{margin:var(--sp-1) 0;font-size:var(--fs-2);color:var(--text-mid);
  border-left:3px solid var(--st-warn);padding-left:var(--sp-2)}

/* ---- the body: the rail on the left, the page on the right ------------- */
.wxhelp .wxhelp-body{display:grid;grid-template-columns:220px minmax(0,1fr);
  gap:var(--sp-4);align-items:start;min-width:0}
.wxhelp .wxhelp-rail{min-width:0;font-size:var(--fs-2)}
.wxhelp .wxhelp-group{margin-bottom:var(--sp-3)}
.wxhelp .wxhelp-group-title{margin:0 0 var(--sp-1);font-size:var(--fs-1);font-weight:600;
  letter-spacing:1.1px;text-transform:uppercase;color:var(--text-dim)}
.wxhelp .wxhelp-rail ul{list-style:none;margin:0;padding:0}
.wxhelp .wxhelp-item{display:block;width:100%;font:inherit;text-align:left;
  padding:4px 8px;border:0;border-left:3px solid var(--border);border-radius:0;
  background:none;color:var(--text);text-decoration:none;cursor:pointer;
  line-height:1.35;overflow-wrap:anywhere}
.wxhelp .wxhelp-item:hover{background:var(--surface3);color:var(--navy)}
.wxhelp .wxhelp-item:focus-visible{outline:2px solid var(--wx);outline-offset:-2px}
/* The page in front: said by aria-current for a reader who cannot see it,
   and by weight and the marker line for one who can - never colour alone. */
.wxhelp .wxhelp-item[aria-current]{font-weight:600;color:var(--navy);
  border-left-color:var(--navy);background:var(--surface3)}
.wxhelp .wxhelp-sections{margin:2px 0 var(--sp-2) var(--sp-3)}
.wxhelp .wxhelp-sections .wxhelp-item{font-size:var(--fs-1);padding:3px 8px;
  color:var(--text-mid);border-left-width:1px}
.wxhelp .wxhelp-sections .wxhelp-item:hover{color:var(--navy)}

/* ---- the page itself: a rendered fragment of the manual ---------------- */
.wxhelp .wxhelp-content{min-width:0;max-width:82ch;font-size:var(--fs-3);line-height:1.55}
.wxhelp .wxhelp-content:focus{outline:none}
.wxhelp .wxhelp-content h1{font-size:var(--fs-5);font-weight:600;color:var(--navy);
  margin:0 0 var(--sp-2);line-height:1.25}
.wxhelp .wxhelp-content h2{font-size:var(--fs-4);font-weight:600;color:var(--navy);
  margin:var(--sp-5) 0 var(--sp-2);padding-top:var(--sp-3);border-top:1px solid var(--border)}
.wxhelp .wxhelp-content h3{font-size:var(--fs-3);font-weight:600;margin:var(--sp-4) 0 var(--sp-1)}
.wxhelp .wxhelp-content h4{font-size:var(--fs-2);font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;color:var(--text-dim);margin:var(--sp-3) 0 var(--sp-1)}
.wxhelp .wxhelp-content p{margin:0 0 var(--sp-2)}
.wxhelp .wxhelp-content .lead{font-size:var(--fs-3);color:var(--text-mid)}
.wxhelp .wxhelp-content .status{font-weight:600;color:var(--navy)}
.wxhelp .wxhelp-content ul,.wxhelp .wxhelp-content ol{margin:0 0 var(--sp-2) var(--sp-5)}
.wxhelp .wxhelp-content li{margin:0 0 var(--sp-1)}
.wxhelp .wxhelp-content code{font-family:var(--mono);font-size:.92em;
  background:var(--surface3);border-radius:var(--radius);padding:0 4px}
.wxhelp .wxhelp-content pre{font-family:var(--mono);font-size:var(--fs-2);line-height:1.45;
  background:var(--surface3);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--sp-2) var(--sp-3);overflow:auto;margin:0 0 var(--sp-3)}
.wxhelp .wxhelp-content pre code{background:none;padding:0}
.wxhelp .wxhelp-content blockquote{margin:0 0 var(--sp-2);padding:var(--sp-1) var(--sp-3);
  border-left:3px solid var(--border);color:var(--text-mid)}
.wxhelp .wxhelp-content table{border-collapse:collapse;margin:0 0 var(--sp-3);
  font-size:var(--fs-2);max-width:100%}
.wxhelp .wxhelp-content th,.wxhelp .wxhelp-content td{border:1px solid var(--border);
  padding:4px 8px;text-align:left;vertical-align:top}
.wxhelp .wxhelp-content th{background:var(--surface3);font-weight:600}
.wxhelp .wxhelp-content section{scroll-margin-top:var(--sp-4)}
/* The section a link landed on. Marked, not just scrolled to: a reader who
   arrives from a `?` has to be able to see which of forty sections is the
   one that answers. */
.wxhelp .wxhelp-content .wxhelp-here{border-left:3px solid var(--wx);
  padding-left:var(--sp-3);margin-left:calc(-1 * var(--sp-3) - 3px);outline:none}
.wxhelp .wxhelp-content .wxhelp-here > h2{border-top:0;padding-top:0}

/* The Help home: the directory of every page and what it answers. */
.wxhelp .wxhelp-directory h2{font-size:var(--fs-1);font-weight:600;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--text-dim);margin:var(--sp-3) 0 var(--sp-1);
  padding:0;border:0}
.wxhelp .wxhelp-directory h2:first-child{margin-top:0}
.wxhelp .wxhelp-directory ul{list-style:none;margin:0 0 var(--sp-2);padding:0}
.wxhelp .wxhelp-directory li{margin:0 0 var(--sp-2)}
.wxhelp .wxhelp-dir-item{font:inherit;font-weight:600;color:var(--navy);text-decoration:none;
  background:none;border:0;padding:0;cursor:pointer;text-align:left}
.wxhelp .wxhelp-dir-item:hover{text-decoration:underline}
.wxhelp .wxhelp-one-liner{margin:2px 0 0;font-size:var(--fs-2);color:var(--text-mid);
  max-width:78ch}

/* ---- the corner-panel variant ------------------------------------------ */
/* The configurator's Help panel beside Ask Hydro: a fixed box whose rail and
   page scroll inside it. The class goes on the panel; the drawing inside it
   fills it. */
.wxhelp-panel{width:680px;max-width:96vw;height:70vh;display:flex;flex-direction:column;
  min-height:0;background:var(--surface);color:var(--text)}
.wxhelp-panel .wxhelp,.wxhelp.wxhelp-panel{flex:1 1 auto;min-height:0;height:100%;
  padding:var(--sp-3)}
.wxhelp-panel .wxhelp-body{flex:1 1 auto;min-height:0;overflow:hidden;
  grid-template-columns:190px minmax(0,1fr);gap:var(--sp-3);align-items:stretch}
.wxhelp-panel .wxhelp-rail,.wxhelp-panel .wxhelp-content{overflow:auto;max-height:100%;
  padding-right:var(--sp-1)}
.wxhelp-panel .wxhelp-results{max-height:32vh;overflow:auto}

/* ---- narrow ------------------------------------------------------------ */
@media (max-width:640px){
  .wxhelp .wxhelp-body{grid-template-columns:1fr}
  .wxhelp .wxhelp-rail{border-bottom:1px solid var(--border);padding-bottom:var(--sp-2)}
  .wxhelp-panel{width:100vw;max-width:100vw;height:80vh}
  .wxhelp-panel .wxhelp-body{grid-template-columns:1fr;overflow:auto}
  .wxhelp-panel .wxhelp-rail,.wxhelp-panel .wxhelp-content{overflow:visible;max-height:none}
}