/* ==========================================================================
   MedSys — guide toolbar (Option 1)
   A sticky bar at the top of a guide hub: a Chapters button, a search scoped
   to this guide, and the depth links that genuinely matter (Essentials /
   Clinical / Calculator or their per-topic equivalents).

   History note. An earlier sticky bar under the masthead was retired because a
   row of chapter links read as site chrome (see the GUIDE NAVIGATION comment in
   inc/components.php). This bar is different in kind: it carries *controls*
   (one button, one input, two or three depth links), not a chapter list. The
   chapter list only appears on demand, inside the panel.

   Everything colours through tokens.css, so dark mode needs no rules here.

   Mobile decisions, in order of importance:
   1. The input is 16px on small screens. Below 16px, iOS Safari zooms the
      whole page on focus, and on the emergency guide that zoom costs seconds.
   2. Rows in the panel are 44px minimum — thumb targets, per both platform
      HIG documents.
   3. On narrow screens the search takes its own full-width row above the
      buttons, because under pressure the biggest target should be the one
      that finds things.
   ========================================================================== */

.mstb{position:sticky;top:0;z-index:35;background:var(--surface);
  border-bottom:1px solid var(--line)}
/* Vertical padding ONLY. Both these elements carry .wrap as well, which sets
 * `padding:0 24px` — and a shorthand here resets all four sides, so the
 * horizontal gutter went to zero and the toolbar ran 24px wider on each side
 * than the heading, the lede and the chip row directly above it. Reported as
 * "the search line is wider than the rest of the page", which is exactly what
 * it was. Check 2 exists for the mirror-image fault — an element rule zeroing
 * a component's padding — and could not see this one, which is a component
 * class zeroing .wrap's. */
.mstb-row{display:flex;align-items:center;gap:10px;
  padding-top:9px;padding-bottom:9px;font-family:var(--f-ui)}

.mstb-ch{flex:none;display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line-2);background:var(--surface-2);
  border-radius:999px;padding:7px 15px;font:500 13.5px var(--f-ui);
  color:var(--ink-2);cursor:pointer;min-height:36px}
.mstb-ch:hover{border-color:var(--ultra);color:var(--ultra)}
.mstb-ch[aria-expanded="true"]{background:var(--ultra);border-color:var(--ultra);
  color:var(--on-fill)}

.mstb-search{position:relative;flex:1;min-width:180px}
.mstb-lab{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.mstb-q{display:block;width:100%;box-sizing:border-box;
  border:1px solid var(--line-2);background:var(--surface-2);
  border-radius:999px;padding:8px 16px;font:14px var(--f-ui);color:var(--ink);
  min-height:36px}
.mstb-q::placeholder{color:var(--ink-4)}
.mstb-q:focus{outline:none;border-color:var(--ultra);
  box-shadow:0 0 0 3px var(--ultra-pale)}

.mstb-sep{flex:none;width:1px;height:22px;background:var(--line)}
.mstb-lnk{flex:none;font:500 13px var(--f-ui);text-decoration:none;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-2);
  border-radius:999px;padding:7px 14px;min-height:36px;
  display:inline-flex;align-items:center}
.mstb-lnk:hover{border-color:var(--ultra);color:var(--ultra);text-decoration:none}

/* --------------------------------------------------------------------------
   The panel. One container serves three states — the chapter jump list, the
   quick links shown on an empty focused search, and scoped results. It is
   absolutely positioned against the sticky bar (position:sticky establishes
   the containing block), so it overlays the page rather than pushing it.
   -------------------------------------------------------------------------- */
.mstb-panel{position:absolute;top:100%;left:0;right:0;background:var(--surface);
  border-bottom:1px solid var(--line);box-shadow:var(--sh-lg);
  max-height:62vh;overflow-y:auto;overscroll-behavior:contain;z-index:34}
.mstb-panel-in{padding-top:6px;padding-bottom:14px}

.mstb-glab{font-family:var(--f-data);font-size:14px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-4);margin:0;padding:13px 2px 5px}
.mstb-hit{display:flex;gap:13px;align-items:baseline;padding:10px 12px;
  border-radius:var(--r);text-decoration:none;color:var(--ink);min-height:44px;
  box-sizing:border-box}
.mstb-hit:hover,.mstb-hit:focus-visible{background:var(--ultra-pale);
  text-decoration:none}
.mstb-hit .n{font-family:var(--f-data);font-size:14px;color:var(--ultra);
  flex:none;width:24px}
.mstb-hit-t{font:500 14.5px var(--f-ui)}
.mstb-hit-t em{font-style:normal;font-weight:400;color:var(--ink-4)}
.mstb-hit-m{display:block;font:14px var(--f-ui);color:var(--ink-4);
  margin-top:2px}
.mstb-hit .min{margin-left:auto;flex:none;font-family:var(--f-data);
  font-size:14px;color:var(--ink-4)}
.mstb-here{background:var(--ultra-pale);
  box-shadow:inset 3px 0 0 var(--ultra)}

.mstb-all{display:block;width:calc(100% - 4px);text-align:left;
  border:1px dashed var(--line-2);background:var(--surface-2);
  border-radius:var(--r);margin:12px 2px 0;padding:11px 13px;
  font:14px var(--f-ui);color:var(--ultra);cursor:pointer;min-height:44px}
.mstb-all:hover{border-color:var(--ultra)}
.mstb-none{font:14px var(--f-data);color:var(--ink-4);padding:13px 2px}

/* Emergency quick links — shown when the emergency guide's search is focused
   and empty. Coloured through the scale ramp's hi tokens, which are the site's
   existing red pair, so no new colour is introduced. */
.mstb-quick-lab{color:var(--hi)}
.mstb-quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:8px;padding:2px 2px 0}
.mstb-quick a{display:flex;align-items:center;min-height:44px;box-sizing:border-box;
  font:600 14px var(--f-ui);text-decoration:none;color:var(--hi);
  background:var(--hi-bg);border:1px solid var(--line);border-radius:var(--r);
  padding:9px 13px}
.mstb-quick a:hover{border-color:var(--hi);text-decoration:none}

/* --------------------------------------------------------------------------
   Narrow viewports. Search gets the top row, full width; the buttons share a
   scrollable second row. 16px input stops the iOS focus zoom.
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  .mstb-row{flex-wrap:wrap;gap:8px;padding-top:8px;padding-bottom:9px}
  .mstb-search{order:-1;flex-basis:100%}
  .mstb-q{font-size:16px;min-height:44px;padding:10px 16px}
  .mstb-ch{min-height:40px}
  .mstb-lnk{min-height:40px}
  .mstb-sep{display:none}
  .mstb-panel{max-height:70vh}
}
@media (max-width:400px){
  .mstb-lnk{padding:7px 11px;font-size:14px}
}

@media print{.mstb{display:none}}