/* yz-app-nav — shared mobile in-app navigation (Phase 1: doctor/admin/home).
   RTL right-side drawer + top-left hamburger trigger (auto-shifts beside a page's
   own top-left notification button so the two never overlap). Scoped under
   #yznav-root / .yznav-* so it never touches page styles. iOS/Android PWA
   safe-area aware. Sits above page chrome but below real page modals (root
   z 9998 < confirm/loading 9999+, toasts 11000) and also auto-hides while a
   full-screen page modal is open. */

#yznav-root,
#yznav-root * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

#yznav-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  font-family: inherit;
  direction: rtl;
}

/* hidden state (a page modal is open) */
#yznav-root.yznav-suppressed { display: none !important; }

/* ---------- Trigger button (top-left hamburger, RTL; drawer still opens right) ---------- */
#yznav-fab {
  position: fixed;
  /* Defaults = plain top-left. When a page has its own top-left notification
     button, yz-app-nav.js measures it and sets these vars so the hamburger sits
     just beside it (no overlap). Vars stay unset on every other page/state, so
     the fab keeps its normal top-left position. */
  top: var(--yznav-fab-top, calc(env(safe-area-inset-top, 0px) + 12px));
  left: var(--yznav-fab-left, calc(env(safe-area-inset-left, 0px) + 16px));
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(145deg, #163150, #0b1a2b);
  color: #f2f7fc;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32), 0 2px 5px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
#yznav-fab:active { transform: scale(0.94); }
#yznav-fab:focus-visible { outline: 2px solid #4c9ffe; outline-offset: 3px; }
#yznav-fab .yznav-fab-ic { display: flex; }
#yznav-fab .yznav-fab-ic svg { width: 24px; height: 24px; display: block; }
/* hide the trigger while the drawer is open */
#yznav-root.yznav-open #yznav-fab { opacity: 0; pointer-events: none; transform: scale(0.9); }

/* ---------- Mobile fixed top app bar (shown only on mobile/PWA widths) ----------
   Sits inside #yznav-root (z 9998) so it is above page content but below the
   overlay/drawer (which come later in DOM order) and below real page modals
   (root auto-hides while one is open). Hidden by default; the media query at the
   bottom of this file toggles it on for narrow widths and hides the floating fab.
   Body top padding is set from JS to the measured bar height so page content is
   never hidden beneath the bar. */
#yznav-topbar {
  display: none; /* -> flex under @media (max-width:768px) */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  align-items: center;
  gap: 12px;
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px)
           calc(env(safe-area-inset-right, 0px) + 14px)
           0
           calc(env(safe-area-inset-left, 0px) + 14px);
  /* At rest (page top) the dark bar is a soft navy glass — readable over both
     dark and light page tops. Once the user scrolls (root gets .yznav-scrolled)
     it deepens into a frosted sticky header with a subtle shadow — a polished
     frozen first row. (The homepage rests fully transparent instead — see the
     .yznav-condense overrides.) */
  background: rgba(13, 31, 52, 0.62);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  backdrop-filter: blur(10px) saturate(1.25);
  color: #eaf1fa;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  pointer-events: auto;
  direction: rtl;
}
#yznav-root.yznav-scrolled #yznav-topbar {
  background: rgba(11, 26, 43, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}
/* Homepage: fully transparent at rest (page hero shows through) */
#yznav-root.yznav-condense:not(.yznav-scrolled) #yznav-topbar {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
/* ...but keep the hamburger readable over the light hero: navy glass tile,
   matching the homepage's own dark round menu button. */
#yznav-root.yznav-condense:not(.yznav-scrolled) #yznav-topbar .yznav-tb-menu {
  background: rgba(13, 31, 52, 0.72);
  border-color: rgba(255, 255, 255, 0.14);
}
.yznav-tb-menu {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #f2f7fc;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.15s ease, transform 0.12s ease;
}
.yznav-tb-menu:hover,
.yznav-tb-menu:active { background: rgba(255, 255, 255, 0.12); }
.yznav-tb-menu:active { transform: scale(0.94); }
.yznav-tb-menu:focus-visible { outline: 2px solid #4c9ffe; outline-offset: 2px; }
.yznav-tb-menu svg { width: 24px; height: 24px; display: block; }
.yznav-tb-logo {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #eaf1fa;
  background: linear-gradient(145deg, #1c3d63, #0b1a2b);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.yznav-tb-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.yznav-tb-title {
  font-size: 16px;
  font-weight: 800;
  color: #f6faff;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yznav-tb-sub {
  font-size: 12px;
  font-weight: 600;
  color: #8ba6c4;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yznav-tb-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Notification opt-in prompt (additive bottom card, RTL) ----------
   Lives inside #yznav-root so it inherits the modal auto-hide (root becomes
   display:none while a page modal is open) for free. Bottom-anchored + safe-area
   aware so it never sits under the top notification button / hamburger or the
   top pull-to-refresh, and it hides while the drawer is open. */
#yznav-notify {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 9990;
  width: min(430px, calc(100vw - 24px));
  display: flex;
  gap: 12px;
  padding: 14px 15px;
  border-radius: 18px;
  background: linear-gradient(150deg, #12314f, #0b1a2b);
  color: #eef4fb;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3);
  direction: rtl;
  text-align: right;
  /* hidden by default AND after dismiss: no hit-testing so it never blocks
     taps on page content beneath it (visibility is delayed so the fade plays). */
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-50%) translateY(14px);
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s linear 0.24s;
}
#yznav-notify.yznav-notify-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s linear 0s;
}
#yznav-root.yznav-open #yznav-notify { display: none; }
.yznav-notify-ico {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd66b;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.yznav-notify-ico svg { width: 20px; height: 20px; display: block; }
.yznav-notify-body { flex: 1 1 auto; min-width: 0; }
.yznav-notify-title { font-size: 15px; font-weight: 800; color: #f6faff; margin-bottom: 3px; }
.yznav-notify-text { font-size: 12.5px; line-height: 1.6; font-weight: 600; color: #b8cbe2; }
.yznav-notify-actions { display: flex; gap: 8px; margin-top: 11px; }
.yznav-notify-btn {
  flex: 0 0 auto;
  border-radius: 10px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.15s ease, transform 0.12s ease, opacity 0.15s ease;
}
.yznav-notify-btn:active { transform: scale(0.96); }
.yznav-notify-primary { border: 0; color: #06223d; background: linear-gradient(145deg, #ffd66b, #f2b73c); }
.yznav-notify-primary:hover { opacity: 0.94; }
.yznav-notify-later { border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: #cddaeb; }
.yznav-notify-later:hover { background: rgba(255, 255, 255, 0.06); }
.yznav-notify-primary:focus-visible,
.yznav-notify-later:focus-visible { outline: 2px solid #4c9ffe; outline-offset: 2px; }

/* ---------- Overlay ---------- */
#yznav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 8, 15, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
#yznav-root.yznav-anim #yznav-overlay { opacity: 1; pointer-events: auto; }

/* ---------- Right-side drawer ---------- */
#yznav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: min(76vw, 320px);
  background: linear-gradient(180deg, #0d1f34 0%, #0b1a2b 100%);
  color: #eaf1fa;
  border-top-left-radius: 22px;
  border-bottom-left-radius: 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -16px 0 44px rgba(0, 0, 0, 0.5);
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateX(110%);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: auto;
}
#yznav-root.yznav-anim #yznav-drawer { transform: translateX(0); }

/* ---------- Header ---------- */
.yznav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.yznav-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.yznav-badge {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #eaf1fa;
  background: linear-gradient(145deg, #1c3d63, #0b1a2b);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.yznav-brand-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.yznav-brand-name { font-size: 16px; font-weight: 700; color: #f2f7fc; }
.yznav-brand-sub { font-size: 12.5px; font-weight: 600; color: #7f97b3; letter-spacing: 0.02em; }
.yznav-close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #cfe0f2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.15s ease;
}
.yznav-close:hover,
.yznav-close:active { background: rgba(255, 255, 255, 0.12); }
.yznav-close:focus-visible { outline: 2px solid #4c9ffe; outline-offset: 2px; }
.yznav-close svg { width: 20px; height: 20px; display: block; }

/* ---------- List ---------- */
.yznav-nav { flex: 1 1 auto; }
.yznav-list { list-style: none; margin: 0; padding: 6px 0 0; }
.yznav-list li { margin: 0; }

.yznav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: right;
  background: transparent;
  border: 0;
  border-radius: 13px;
  padding: 14px 12px;
  color: #eaf1fa;
  font-size: 16px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}
.yznav-item:hover,
.yznav-item:active,
.yznav-item:focus-visible { background: rgba(255, 255, 255, 0.07); outline: none; }
.yznav-item .yznav-ico {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: #8fb0d6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yznav-item .yznav-ico svg { width: 22px; height: 22px; display: block; }
.yznav-item .yznav-lbl { flex: 1 1 auto; min-width: 0; }

/* ---------- Active route highlight ---------- */
.yznav-item.yznav-active {
  position: relative;
  background: rgba(76, 159, 254, 0.14);
  color: #ffffff;
  font-weight: 700;
}
.yznav-item.yznav-active .yznav-ico { color: #4c9ffe; }
/* accent bar on the start (right, RTL) edge of the active row */
.yznav-item.yznav-active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 3px;
  background: #4c9ffe;
}

/* ---------- Expandable login section (تسجيل دخول) ---------- */
.yznav-item.yznav-expander .yznav-chev {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: #7f97b3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.yznav-item.yznav-expander .yznav-chev svg { width: 18px; height: 18px; display: block; }
li.yznav-has-sub.yznav-open-sub .yznav-expander .yznav-chev { transform: rotate(180deg); }
.yznav-sub {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline-start: 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.26s ease;
}
li.yznav-has-sub.yznav-open-sub .yznav-sub { max-height: 220px; }
.yznav-subitem { font-size: 15px; padding: 12px 12px; }
.yznav-subitem .yznav-ico { color: #6f8bab; }

.yznav-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 8px 6px;
  border: 0;
}
.yznav-item.yznav-danger { color: #ff8585; }
.yznav-item.yznav-danger .yznav-ico { color: #ff8585; }

/* ---------- Footer (brand credit, pinned to drawer bottom) ---------- */
.yznav-foot {
  flex: 0 0 auto;
  margin-top: auto;
  padding: 14px 8px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.yznav-foot-name { font-size: 13.5px; font-weight: 700; color: #cfe0f2; letter-spacing: 0.02em; }
.yznav-foot-sub { font-size: 11.5px; font-weight: 600; color: #6f8bab; letter-spacing: 0.03em; }

/* ---------- Mobile: fixed top app bar replaces the floating trigger ----------
   On mobile/PWA widths the floating hamburger is removed and the fixed top app
   bar is shown instead. Desktop keeps the existing floating trigger unchanged. */
@media (max-width: 768px) {
  #yznav-fab { display: none !important; }
  #yznav-topbar { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  #yznav-fab,
  #yznav-overlay,
  #yznav-drawer,
  #yznav-notify,
  .yznav-notify-btn,
  .yznav-sub,
  .yznav-tb-menu,
  .yznav-item.yznav-expander .yznav-chev { transition: none; }
}

/* ============================================================
   Volunteer portal light theme (scoped: #yznav-root.yznav-light)
   Clean white/frosted surfaces, green/teal accents (--brand #079455,
   --accent #14B8A6), navy only as a small accent. Additive only —
   all other pages keep the default dark navy theme untouched.
   ============================================================ */
#yznav-root.yznav-light #yznav-fab {
  border: 1px solid rgba(16, 32, 24, 0.10);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #067647;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.10);
}
#yznav-root.yznav-light #yznav-fab:focus-visible { outline-color: #0F766E; }

#yznav-root.yznav-light #yznav-topbar {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(16, 32, 24, 0.08);
  box-shadow: 0 6px 22px rgba(16, 24, 40, 0.06);
}
#yznav-root.yznav-light .yznav-tb-menu {
  border: 1px solid rgba(16, 32, 24, 0.10);
  background: rgba(7, 148, 85, 0.08);
  color: #067647;
}
#yznav-root.yznav-light .yznav-tb-menu:hover,
#yznav-root.yznav-light .yznav-tb-menu:active { background: rgba(7, 148, 85, 0.16); }
#yznav-root.yznav-light .yznav-tb-menu:focus-visible { outline-color: #0F766E; }
#yznav-root.yznav-light .yznav-tb-logo {
  background: linear-gradient(145deg, #079455, #0F766E);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
}
#yznav-root.yznav-light .yznav-tb-title { color: #102018; }
#yznav-root.yznav-light .yznav-tb-sub { color: #34483D; }

#yznav-root.yznav-light #yznav-overlay {
  background: rgba(16, 32, 24, 0.32);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
#yznav-root.yznav-light #yznav-drawer {
  background: linear-gradient(180deg, #FFFFFF 0%, #F3FBF7 100%);
  border-left: 1px solid rgba(16, 32, 24, 0.08);
  box-shadow: -18px 0 44px rgba(16, 24, 40, 0.18);
  width: min(74vw, 300px);
}
#yznav-root.yznav-light .yznav-head { border-bottom: 1px solid rgba(16, 32, 24, 0.08); }
#yznav-root.yznav-light .yznav-badge {
  background: linear-gradient(145deg, #079455, #0F766E);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
}
#yznav-root.yznav-light .yznav-brand-name { color: #102018; }
#yznav-root.yznav-light .yznav-brand-sub { color: #667085; }
#yznav-root.yznav-light .yznav-close {
  border: 1px solid rgba(16, 32, 24, 0.10);
  background: rgba(16, 32, 24, 0.04);
  color: #34483D;
}
#yznav-root.yznav-light .yznav-close:hover,
#yznav-root.yznav-light .yznav-close:active { background: rgba(16, 32, 24, 0.10); }
#yznav-root.yznav-light .yznav-close:focus-visible { outline-color: #0F766E; }

#yznav-root.yznav-light .yznav-item { color: #102018; }
#yznav-root.yznav-light .yznav-item .yznav-ico { color: #0F766E; }
#yznav-root.yznav-light .yznav-item.yznav-active .yznav-ico { color: #067647; }
#yznav-root.yznav-light .yznav-subitem .yznav-ico { color: #667085; }
#yznav-root.yznav-light .yznav-item.yznav-danger .yznav-ico { color: #D92D20; }
#yznav-root.yznav-light .yznav-item.yznav-danger { color: #B42318; }
#yznav-root.yznav-light .yznav-item:hover,
#yznav-root.yznav-light .yznav-item:focus-visible { background: rgba(7, 148, 85, 0.08); }
#yznav-root.yznav-light .yznav-item.yznav-active {
  background: rgba(7, 148, 85, 0.12);
  color: #067647;
}
#yznav-root.yznav-light .yznav-item.yznav-active::before { background: #079455; }
#yznav-root.yznav-light .yznav-sub .yznav-subitem { color: #34483D; }
#yznav-root.yznav-light .yznav-foot { border-top: 1px solid rgba(16, 32, 24, 0.08); }
#yznav-root.yznav-light .yznav-foot-name { color: #34483D; }
#yznav-root.yznav-light .yznav-foot-sub { color: #667085; }

#yznav-root.yznav-light #yznav-notify {
  background: #FFFFFF;
  border: 1px solid rgba(16, 32, 24, 0.10);
  box-shadow: 0 18px 45px rgba(16, 24, 40, 0.14);
}
#yznav-root.yznav-light .yznav-notify-ico {
  background: rgba(7, 148, 85, 0.12);
  border: 1px solid rgba(7, 148, 85, 0.2);
  color: #067647;
}
#yznav-root.yznav-light .yznav-notify-title { color: #102018; }
#yznav-root.yznav-light .yznav-notify-text { color: #34483D; }
#yznav-root.yznav-light .yznav-notify-primary { color: #ffffff; background: linear-gradient(145deg, #079455, #067647); }
#yznav-root.yznav-light .yznav-notify-later { border: 1px solid rgba(16, 32, 24, 0.14); color: #34483D; }
#yznav-root.yznav-light .yznav-notify-later:hover { background: rgba(16, 32, 24, 0.05); }

/* Real YZ logo image inside the light-theme badges (volunteer pages only).
   The icon asset is a self-contained rounded navy tile, so the badge keeps
   its rounded frame and lets the image fill it edge-to-edge undistorted. */
#yznav-root.yznav-light .yznav-tb-logo,
#yznav-root.yznav-light .yznav-badge {
  overflow: hidden;
  padding: 0;
  background: #0b1a2b;
  border: 1px solid rgba(16, 32, 24, 0.12);
}
#yznav-root.yznav-light .yznav-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   Sticky logo header (v=20260707-sticky1, additive)
   - Real logo assets, clickable → homepage.
   - Bar is seamless at page top; frosted + shadow only after
     scrolling (.yznav-scrolled on #yznav-root, set by nav.js).
   - Homepage (.yznav-condense): brand identity stays in the hero;
     the bar's logo fades in only once the user scrolls.
   - Light pages keep the tile mark; dark pages use the official
     white horizontal wordmark (logo-horizontal.png).
   ============================================================ */

/* Clickable home anchor wrapping the bar logo (44px min tap target) */
.yznav-tb-home {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.yznav-tb-home:focus-visible { outline: 2px solid #4c9ffe; outline-offset: 2px; border-radius: 8px; }
#yznav-root.yznav-light .yznav-tb-home:focus-visible { outline-color: #0F766E; }

/* Official white horizontal wordmark — dark-theme bars only */
.yznav-tb-wordmark {
  height: 22px;
  width: auto;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

/* Drawer brand badge is clickable too */
.yznav-brand-home { text-decoration: none; display: inline-flex; border-radius: 11px; }
.yznav-brand-home:focus-visible { outline: 2px solid #4c9ffe; outline-offset: 2px; }

/* Light theme: bar rests transparent on the page's own light backdrop,
   frosting only after scroll (overrides the always-frosted v2 rule). */
#yznav-root.yznav-light #yznav-topbar {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
}
#yznav-root.yznav-light.yznav-scrolled #yznav-topbar {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(16, 32, 24, 0.08);
  box-shadow: 0 6px 22px rgba(16, 24, 40, 0.06);
}

/* Light + blue accent (interns/students medical-navy family). Reuses the
   whole yznav-light surface system; only accent hues change. */
#yznav-root.yznav-light.yznav-accent-blue #yznav-fab { color: #1D4ED8; }
#yznav-root.yznav-light.yznav-accent-blue #yznav-fab:focus-visible { outline-color: #1D4ED8; }
#yznav-root.yznav-light.yznav-accent-blue .yznav-tb-menu {
  background: rgba(29, 78, 216, 0.08);
  color: #1D4ED8;
}
#yznav-root.yznav-light.yznav-accent-blue .yznav-tb-menu:hover,
#yznav-root.yznav-light.yznav-accent-blue .yznav-tb-menu:active { background: rgba(29, 78, 216, 0.16); }
#yznav-root.yznav-light.yznav-accent-blue .yznav-tb-menu:focus-visible { outline-color: #1D4ED8; }
#yznav-root.yznav-light.yznav-accent-blue .yznav-item:hover,
#yznav-root.yznav-light.yznav-accent-blue .yznav-item:focus-visible { background: rgba(29, 78, 216, 0.08); }
#yznav-root.yznav-light.yznav-accent-blue .yznav-item.yznav-active {
  background: rgba(29, 78, 216, 0.12);
  color: #1D4ED8;
}
#yznav-root.yznav-light.yznav-accent-blue .yznav-item.yznav-active::before { background: #1D4ED8; }
#yznav-root.yznav-light.yznav-accent-blue .yznav-item.yznav-active .yznav-ico { color: #1D4ED8; }
#yznav-root.yznav-light.yznav-accent-blue .yznav-tb-home:focus-visible { outline-color: #1D4ED8; }

/* Doctor login: the same light navigation surface as the unified doctor
   portal, with its teal operational accent instead of a category color. */
#yznav-root.yznav-light.yznav-accent-doctor #yznav-fab { color: #137D70; }
#yznav-root.yznav-light.yznav-accent-doctor #yznav-fab:focus-visible { outline-color: #137D70; }
#yznav-root.yznav-light.yznav-accent-doctor .yznav-tb-menu {
  background: rgba(19, 125, 112, 0.09);
  color: #137D70;
}
#yznav-root.yznav-light.yznav-accent-doctor .yznav-tb-menu:hover,
#yznav-root.yznav-light.yznav-accent-doctor .yznav-tb-menu:active { background: rgba(19, 125, 112, 0.16); }
#yznav-root.yznav-light.yznav-accent-doctor .yznav-tb-menu:focus-visible { outline-color: #137D70; }
#yznav-root.yznav-light.yznav-accent-doctor .yznav-item:hover,
#yznav-root.yznav-light.yznav-accent-doctor .yznav-item:focus-visible { background: rgba(19, 125, 112, 0.08); }
#yznav-root.yznav-light.yznav-accent-doctor .yznav-item.yznav-active {
  background: rgba(19, 125, 112, 0.12);
  color: #0C665C;
}
#yznav-root.yznav-light.yznav-accent-doctor .yznav-item.yznav-active::before { background: #137D70; }
#yznav-root.yznav-light.yznav-accent-doctor .yznav-item.yznav-active .yznav-ico { color: #137D70; }
#yznav-root.yznav-light.yznav-accent-doctor .yznav-tb-home:focus-visible { outline-color: #137D70; }

/* Homepage condense: hero owns the brand at rest; bar logo fades in on scroll */
#yznav-root.yznav-condense .yznav-tb-home,
#yznav-root.yznav-condense .yznav-tb-titles {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}
#yznav-root.yznav-condense.yznav-scrolled .yznav-tb-home,
#yznav-root.yznav-condense.yznav-scrolled .yznav-tb-titles {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  #yznav-topbar,
  #yznav-root.yznav-condense .yznav-tb-home,
  #yznav-root.yznav-condense .yznav-tb-titles { transition: none; }
}

/* Drawer badge now always carries the real tile mark (both themes) */
.yznav-badge { overflow: hidden; padding: 0; }
.yznav-badge .yznav-logo-img,
.yznav-tb-logo .yznav-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

/* ------------------------------------------------------------
   Drawer/topbar hardening against page-level global button CSS.
   Some pages style bare `button` selectors aggressively (gradient
   ::before overlays, `color:#fff !important`, big radii, card
   shadows). Those bled into the drawer's <button> rows and made
   them look like blurred empty blocks with invisible text. The
   nav owns its controls: re-assert its own look at ID+class
   specificity, matching the page's !important where needed.
   ------------------------------------------------------------ */
#yznav-root button.yznav-item::before,
#yznav-root button.yznav-item::after,
#yznav-root .yznav-close::before,
#yznav-root .yznav-close::after,
#yznav-root .yznav-tb-menu::before,
#yznav-root .yznav-tb-menu::after { content: none !important; }
#yznav-root .yznav-item {
  position: relative !important;
  overflow: visible !important;
  color: #eaf1fa !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 13px !important;
  padding: 14px 12px !important;
  box-shadow: none !important;
  filter: none !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-align: right !important;
}
#yznav-root .yznav-item:not(.yznav-active):not(:hover):not(:active):not(:focus-visible) { background: transparent !important; }
#yznav-root .yznav-item.yznav-active { color: #ffffff !important; font-weight: 700 !important; }
#yznav-root .yznav-item.yznav-danger { color: #ff8585 !important; }
#yznav-root.yznav-light .yznav-item { color: #1D2939 !important; }
#yznav-root.yznav-light .yznav-item.yznav-active { color: #067647 !important; }
#yznav-root.yznav-light.yznav-accent-blue .yznav-item.yznav-active { color: #1D4ED8 !important; }
#yznav-root.yznav-light .yznav-item.yznav-danger { color: #B42318 !important; }
#yznav-root .yznav-close,
#yznav-root .yznav-tb-menu {
  min-height: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
}

/* Volunteer bilingual control — intentionally scoped so other portals retain
   their current navigation behavior and direction. */
#yznav-root .yznav-lang-toggle {
  position: fixed !important;
  top: 18px;
  z-index: 10002;
  pointer-events: auto !important;
  width: auto !important;
  min-width: 82px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(7, 148, 85, .22) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #067647 !important;
  box-shadow: 0 5px 14px rgba(16, 32, 24, .08) !important;
  font: 800 11.5px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  white-space: nowrap;
  cursor: pointer;
}
html[data-volunteer-language="en"] #yznav-root .yznav-lang-toggle { right: 20px; left: auto; }
html[data-volunteer-language="ar"] #yznav-root .yznav-lang-toggle { left: 20px; right: auto; }
#yznav-root .yznav-lang-toggle:hover,
#yznav-root .yznav-lang-toggle:active { background: #ecfdf3 !important; }
#yznav-root .yznav-lang-toggle:focus-visible {
  outline: 2px solid #079455 !important;
  outline-offset: 2px;
}

html[data-volunteer-language="en"] #yznav-root,
html[data-volunteer-language="en"] #yznav-topbar,
html[data-volunteer-language="en"] #yznav-drawer { direction: ltr; }

/* Volunteer navigation follows the reading edge: left in English, right in Arabic. */
html[data-volunteer-language="en"] body[data-portal="volunteers"] #yznav-drawer {
  left: 0;
  right: auto;
  border-right: 1px solid rgba(16, 32, 24, 0.08);
  border-left: 0;
  border-top-right-radius: 22px;
  border-bottom-right-radius: 22px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: 18px 0 44px rgba(16, 24, 40, 0.18);
  transform: translateX(-110%);
}
html[data-volunteer-language="en"] body[data-portal="volunteers"] #yznav-root.yznav-anim #yznav-drawer {
  transform: translateX(0);
}
html[data-volunteer-language="en"] #yznav-root .yznav-item,
html[data-volunteer-language="en"] #yznav-root .yznav-tb-titles,
html[data-volunteer-language="en"] #yznav-root .yznav-brand-txt { text-align: left !important; }

html[data-volunteer-language="en"] body[data-portal="volunteers"] { direction: ltr; text-align: left; }
html[data-volunteer-language="en"] body[data-portal="volunteers"] .identity-copy,
html[data-volunteer-language="en"] body[data-portal="volunteers"] .portal-title,
html[data-volunteer-language="en"] body[data-portal="volunteers"] .portal-subtitle,
html[data-volunteer-language="en"] body[data-portal="volunteers"] .attendance-title-panel,
html[data-volunteer-language="en"] body[data-portal="volunteers"] .service-main-btn,
html[data-volunteer-language="en"] body[data-portal="volunteers"] .field-head,
html[data-volunteer-language="en"] body[data-portal="volunteers"] .vol-score-card,
html[data-volunteer-language="en"] body[data-portal="volunteers"] .notice-mini,
html[data-volunteer-language="en"] body[data-portal="volunteers"] .empty-state,
html[data-volunteer-language="en"] body[data-portal="volunteers"] .swap-step-title,
html[data-volunteer-language="en"] body[data-portal="volunteers"] .swap-step-desc,
html[data-volunteer-language="en"] body[data-portal="volunteers"] .yz-confirm-overlay { direction: ltr !important; text-align: left !important; }
html[data-volunteer-language="en"] body[data-portal="volunteers"] .action-grid { direction: ltr !important; }
html[data-volunteer-language="en"] body[data-portal="volunteers"] h1,
html[data-volunteer-language="en"] body[data-portal="volunteers"] h2,
html[data-volunteer-language="en"] body[data-portal="volunteers"] h3 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

.yz-i18n-original {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid currentColor;
  font-size: .88em;
  opacity: .88;
}
.yz-i18n-original summary { cursor: pointer; font-weight: 750; }
.yz-i18n-original div { margin-top: 7px; text-align: right; }

@media (max-width: 380px) {
  body[data-portal="volunteers"] #yznav-root.yznav-light .yznav-tb-sub { display: none !important; }
  #yznav-root .yznav-lang-toggle { min-width: 76px !important; padding-inline: 7px !important; font-size: 10.8px !important; }
}

@media (max-width: 768px) {
  body[data-portal="volunteers"] #yznav-root.yznav-light #yznav-topbar { padding-inline-end: 108px; }
  #yznav-root .yznav-lang-toggle {
    top: calc(env(safe-area-inset-top, 0px) + 9px);
  }
  html[data-volunteer-language="en"] #yznav-root .yznav-lang-toggle {
    right: calc(env(safe-area-inset-right, 0px) + 14px);
    left: auto;
  }
  html[data-volunteer-language="ar"] #yznav-root .yznav-lang-toggle {
    left: calc(env(safe-area-inset-left, 0px) + 14px);
    right: auto;
  }
}

/* Homepage mobile command header
   A calm clinical surface with clear identity and one direct doctor action. */
@media (max-width: 768px) {
  #yznav-root.yznav-home #yznav-topbar,
  #yznav-root.yznav-home.yznav-condense:not(.yznav-scrolled) #yznav-topbar,
  #yznav-root.yznav-home.yznav-scrolled #yznav-topbar {
    min-height: calc(68px + env(safe-area-inset-top, 0px));
    padding:
      env(safe-area-inset-top, 0px)
      calc(env(safe-area-inset-right, 0px) + 12px)
      0
      calc(env(safe-area-inset-left, 0px) + 12px);
    gap: 9px;
    color: #172554;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    backdrop-filter: blur(18px) saturate(1.25);
    border-bottom: 1px solid rgba(23, 37, 84, 0.10);
    box-shadow: 0 8px 26px rgba(23, 37, 84, 0.10);
  }

  #yznav-root.yznav-home #yznav-topbar::after {
    position: absolute;
    inset-inline: 16px;
    bottom: -1px;
    height: 2px;
    border-radius: 999px;
    content: "";
    background: linear-gradient(90deg, transparent, #d8b65c 28%, #148b80 72%, transparent);
    opacity: .75;
  }

  #yznav-root.yznav-home .yznav-tb-menu,
  #yznav-root.yznav-home.yznav-condense:not(.yznav-scrolled) #yznav-topbar .yznav-tb-menu {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(23, 37, 84, 0.12);
    border-radius: 14px;
    color: #172554;
    background: #f2f5fa;
  }

  #yznav-root.yznav-home .yznav-tb-menu:hover,
  #yznav-root.yznav-home .yznav-tb-menu:active { background: #e8eef7; }
  #yznav-root.yznav-home .yznav-tb-menu:focus-visible { outline-color: #148b80; }

  #yznav-root.yznav-home .yznav-tb-home,
  #yznav-root.yznav-home .yznav-tb-titles,
  #yznav-root.yznav-home.yznav-scrolled .yznav-tb-home,
  #yznav-root.yznav-home.yznav-scrolled .yznav-tb-titles {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  #yznav-root.yznav-home .yznav-tb-logo {
    width: 44px;
    height: 44px;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(216, 182, 92, 0.65);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 7px 17px rgba(23, 37, 84, 0.13);
  }

  #yznav-root.yznav-home .yznav-tb-titles {
    display: flex !important;
    gap: 3px;
  }

  #yznav-root.yznav-home .yznav-tb-title {
    color: #172554;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.015em;
  }

  #yznav-root.yznav-home .yznav-tb-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 650;
  }

  #yznav-root.yznav-home .yznav-tb-sub::before {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    content: "";
    background: #148b80;
    box-shadow: 0 0 0 3px rgba(20, 139, 128, 0.10);
  }

  #yznav-root.yznav-home .yznav-tb-actions { gap: 6px; }

  #yznav-root.yznav-home .yznav-tb-doctor {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(20, 139, 128, 0.20);
    border-radius: 14px;
    color: #0f766e;
    background: rgba(20, 139, 128, 0.09);
    text-decoration: none;
    transition: transform .15s ease, background-color .15s ease;
  }

  #yznav-root.yznav-home .yznav-tb-doctor:active {
    transform: scale(.95);
    background: rgba(20, 139, 128, 0.16);
  }

  #yznav-root.yznav-home .yznav-tb-doctor:focus-visible {
    outline: 2px solid #148b80;
    outline-offset: 2px;
  }

  #yznav-root.yznav-home .yznav-tb-doctor svg { width: 23px; height: 23px; }
}

/* ============================================================
   Homepage portal chooser
   The public drawer reveals only the four entry portals. Internal
   navigation and administrative links stay inside the authenticated
   portal experience. Other portal drawers retain their existing
   theme and behavior.
   ============================================================ */
#yznav-root.yznav-home #yznav-overlay {
  background: rgba(15, 30, 55, .42);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

#yznav-root.yznav-home #yznav-drawer {
  width: min(92vw, 410px);
  padding:
    calc(env(safe-area-inset-top, 0px) + 14px)
    14px
    calc(env(safe-area-inset-bottom, 0px) + 14px);
  color: #172554;
  background:
    radial-gradient(circle at 84% 2%, rgba(20, 139, 128, .10), transparent 210px),
    linear-gradient(180deg, #f9fbfd 0%, #f1f6f8 100%);
  border-left: 1px solid rgba(23, 37, 84, .10);
  border-top-left-radius: 26px;
  border-bottom-left-radius: 26px;
  box-shadow: -24px 0 60px rgba(15, 30, 55, .24);
}

#yznav-root.yznav-home .yznav-head {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: -2px -2px 8px;
  padding: 4px 4px 14px;
  border-bottom-color: rgba(23, 37, 84, .10);
  background: linear-gradient(180deg, rgba(249, 251, 253, .98), rgba(249, 251, 253, .92));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

#yznav-root.yznav-home .yznav-badge {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(216, 182, 92, .58);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(23, 37, 84, .11);
}

#yznav-root.yznav-home .yznav-brand-name {
  color: #172554;
  font-size: 16px;
  font-weight: 800;
}

#yznav-root.yznav-home .yznav-brand-sub {
  color: #718096;
  font-size: 10.5px;
  letter-spacing: .01em;
}

#yznav-root.yznav-home .yznav-close {
  width: 44px;
  height: 44px;
  color: #172554;
  border: 1px solid rgba(23, 37, 84, .12);
  border-radius: 14px;
  background: #eef3f8;
}

#yznav-root.yznav-home .yznav-close:hover,
#yznav-root.yznav-home .yznav-close:active { background: #e4ebf3; }
#yznav-root.yznav-home .yznav-close:focus-visible { outline-color: #148b80; }
#yznav-root.yznav-home .yznav-nav { min-height: 0; }
#yznav-root.yznav-home .yznav-home-map { display: grid; gap: 9px; padding: 4px 0 10px; }

.yznav-map-section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 5px 2px;
  color: #172554;
  font-size: 13px;
  font-weight: 800;
}

.yznav-map-section small {
  color: #718096;
  font-size: 10.5px;
  font-weight: 600;
}

.yznav-map-current,
.yznav-doctor-hub-head,
.yznav-portal-card,
.yznav-system-link,
.yznav-map-tree-link {
  box-sizing: border-box;
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  color: #172554;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.yznav-map-current:focus-visible,
.yznav-doctor-hub-head:focus-visible,
.yznav-portal-card:focus-visible,
.yznav-system-link:focus-visible,
.yznav-map-tree-link:focus-visible {
  outline: 2px solid #148b80;
  outline-offset: 2px;
}

.yznav-map-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #137d70;
  background: #e5f4f1;
}

.yznav-map-icon svg { width: 21px; height: 21px; display: block; }
.yznav-map-copy { min-width: 0; display: block; }
.yznav-map-copy strong { display: block; color: inherit; font-size: 14px; font-weight: 800; line-height: 1.35; }
.yznav-map-copy small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #718096;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yznav-map-arrow { color: #8291a5; font-size: 24px; font-weight: 500; line-height: 1; }

.yznav-map-current {
  padding: 10px 11px;
  border: 1px solid rgba(19, 125, 112, .20);
  border-radius: 15px;
  background: rgba(229, 244, 241, .76);
}

.yznav-map-current > b,
.yznav-system-link > b,
.yznav-map-tree-link > b {
  padding: 5px 7px;
  color: #526477;
  border-radius: 999px;
  background: #edf2f6;
  font-size: 9.5px;
  font-weight: 800;
  white-space: nowrap;
}

.yznav-doctor-hub {
  overflow: hidden;
  border: 1px solid rgba(41, 76, 143, .18);
  border-inline-start: 4px solid #294c8f;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(23, 37, 84, .08);
}

.yznav-doctor-hub-head { padding: 13px 12px 11px; }
.yznav-doctor-hub-head .yznav-map-icon {
  color: #294c8f;
  background: #eaf0fb;
}
.yznav-doctor-hub-head .yznav-map-copy strong { color: #203d78; font-size: 15px; }
.yznav-doctor-pulse { width: 42px; color: #148b80; }
.yznav-doctor-pulse svg { width: 42px; height: 27px; display: block; }

.yznav-map-tree {
  position: relative;
  display: grid;
  margin: 0 18px 12px 12px;
  padding-inline-start: 13px;
  border-inline-start: 1px solid rgba(41, 76, 143, .24);
}

.yznav-map-tree-link {
  position: relative;
  min-height: 43px;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 10px;
}

.yznav-map-tree-link::before {
  position: absolute;
  inset-inline-start: -14px;
  top: 50%;
  width: 13px;
  height: 1px;
  content: "";
  background: rgba(41, 76, 143, .24);
}

.yznav-map-tree-link:hover,
.yznav-map-tree-link:active { background: #f1f5fb; }
.yznav-map-tree-link .yznav-map-icon { width: 26px; height: 26px; color: #5572aa; border-radius: 8px; background: transparent; }
.yznav-map-tree-link .yznav-map-icon svg { width: 17px; height: 17px; }
.yznav-map-tree-link .yznav-map-copy strong { color: #334b75; font-size: 12px; font-weight: 700; }
.yznav-map-tree-link > b { font-size: 8.5px; }

.yznav-portal-card,
.yznav-system-link {
  padding: 11px;
  border: 1px solid rgba(23, 37, 84, .10);
  border-inline-start: 4px solid var(--yznav-map-tone);
  border-radius: 15px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 5px 16px rgba(23, 37, 84, .045);
}

.yznav-portal-card:hover,
.yznav-portal-card:active,
.yznav-system-link:hover,
.yznav-system-link:active { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(23, 37, 84, .09); }
.yznav-portal-card.doctors { --yznav-map-tone: #294c8f; }
.yznav-portal-card.volunteers { --yznav-map-tone: #12a15e; }
.yznav-portal-card.interns { --yznav-map-tone: #7357c8; }
.yznav-portal-card.students { --yznav-map-tone: #3b5ceb; }
.yznav-portal-card.doctors .yznav-map-icon { color: #294c8f; background: #eaf0fb; }
.yznav-portal-card.volunteers .yznav-map-icon { color: #087b46; background: #e5f6ed; }
.yznav-portal-card.interns .yznav-map-icon { color: #6044b5; background: #f0ecfb; }
.yznav-portal-card.students .yznav-map-icon { color: #294bdd; background: #eaf0ff; }
.yznav-system-link { --yznav-map-tone: #d8b65c; }
.yznav-system-link .yznav-map-icon { color: #8b6a17; background: #fff7dc; }
.yznav-system-link > b { color: #765915; background: #fff3c6; }

#yznav-root.yznav-home .yznav-foot {
  margin-top: 10px;
  padding-top: 12px;
  border-top-color: rgba(23, 37, 84, .10);
}
#yznav-root.yznav-home .yznav-foot-name { color: #526477; }
#yznav-root.yznav-home .yznav-foot-sub { color: #8a98a8; }

@media (max-width: 380px) {
  #yznav-root.yznav-home #yznav-drawer { width: 94vw; padding-inline: 11px; }
  .yznav-map-copy small { font-size: 10px; }
  .yznav-map-tree { margin-inline-end: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .yznav-portal-card,
  .yznav-system-link { transition: none; }
}