/* ============================================================
   MedicOS — global navigation.
   Mobile: bottom tab bar (thumb reach, gloves, one hand).
   Desktop: top bar.
   ============================================================ */

/* ---------- top bar (all sizes) ---------- */
/* The pages set viewport-fit=cover, so content runs underneath the notch and
   status bar. Without this the brand row sits behind them and cannot be
   tapped - worst in an installed PWA, where there is no browser chrome to
   push it down. The +8px gives breathing room on phones with no notch, where
   the inset resolves to 0. Mirrors what .bar already does in the protocol app. */
.rh-top{
  position:sticky;top:0;z-index:40;background:var(--bg);
  border-bottom:1px solid var(--line-soft);
  padding-top:calc(env(safe-area-inset-top, 0px) + 8px);
}
.rh-top-in{
  max-width:900px;margin:0 auto;padding:0 16px;height:56px;
  display:flex;align-items:center;gap:11px;
}
.rh-brand{display:flex;align-items:center;gap:9px;min-width:0;margin-right:auto}
.rh-mark{width:30px;height:30px;flex:0 0 auto}
.rh-mark .hex{fill:var(--navy); stroke:none}
.rh-mark .core{fill:var(--accent); stroke:none}
.rh-mark .pls{fill:none; stroke:#fff; stroke-width:2.0; stroke-linecap:round; stroke-linejoin:round}
.rh-word{font-weight:700;font-size:17px;letter-spacing:.03em;line-height:1;white-space:nowrap}
.rh-word b{color:var(--accent);font-weight:700}

.rh-ico{
  width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:var(--r-sm);
  color:var(--muted);border:1px solid var(--line);background:var(--surface);
}
.rh-ico:hover{color:var(--accent);border-color:var(--accent)}
.rh-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* the one-tap route back to protocols — deliberately prominent */
.rh-protolink{
  display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;
  border-radius:var(--r-sm);background:var(--accent);color:#fff;
  font-size:13.5px;font-weight:700;white-space:nowrap;flex:0 0 auto;
}
.rh-protolink:hover{filter:brightness(1.08);text-decoration:none}
.rh-protolink svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rh-protolink .lg{display:inline}
@media(max-width:420px){ .rh-protolink .lg{display:none} .rh-protolink{padding:0 11px} }

/* ---------- page title strip ---------- */
.rh-head{padding:18px 0 14px}
.rh-head h1{margin:3px 0 0}
.rh-head .sub{margin-top:5px;font-size:14px;color:var(--muted);line-height:1.5;max-width:56ch}

/* ---------- bottom tabs (mobile) ---------- */
.rh-tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.rh-tabs-in{
  max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);
}
.rh-tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:56px;padding:7px 2px 8px;color:var(--faint);
  font-size:10px;font-weight:700;letter-spacing:.02em;position:relative;
}
.rh-tab svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rh-tab.on{color:var(--accent)}
.rh-tab.on::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:2.5px;border-radius:0 0 3px 3px;background:var(--accent);
}
.rh-tab:hover{text-decoration:none;color:var(--accent)}
.rh-tab .dot{
  position:absolute;top:8px;right:calc(50% - 17px);width:7px;height:7px;border-radius:50%;
  background:var(--bad);border:1.5px solid var(--surface);
}

/* Longer tab wording, shown only where the bar has room for it. */
.rh-tab .wide-only{display:none}

/* ---------- desktop: tabs move up top ---------- */
@media(min-width:860px){
  .rh-tab .wide-only{display:inline}
  .rh-tabs{
    position:static;border-top:none;border-bottom:1px solid var(--line-soft);
    background:var(--bg);
  }
  .rh-tabs-in{
    grid-template-columns:repeat(5,max-content);gap:2px;padding:0 16px;
    max-width:900px;
  }
  .rh-tab{
    flex-direction:row;gap:8px;min-height:44px;padding:0 14px;font-size:13.5px;
    border-radius:var(--r-sm) var(--r-sm) 0 0;
  }
  .rh-tab.on::before{top:auto;bottom:0;border-radius:3px 3px 0 0;width:100%}
  .rh-tab .dot{top:10px;right:6px}
}