@import url("/assets/member-responsive.css");
/* Shared bottom navigation (NAV-SWIPE-1/2).
   Lines 7-28 below are the pinned approved nav stylesheet
   docs/engineering/uieq/source/hub-roles-nav/member-nav-swipe2.css
   (SHA-256 7a63b390f02d6005321a1b3275055285af7ba7152ae587a84ad20942b9e8a257)
   byte-for-byte -- the exact file RENDER_CONTRACT.md pins as "NavCSS" and
   states matches the actual served UIUX bytes, superseding the older
   navigation-swipe-v1 CSS. The previous version of this file was an
   engineering re-derivation of My Hub v3.1's own `.bottom-nav` rules and
   deviated from the pin in nav height (70 vs 74px), arrow column (22 vs
   23px), entry box (74x56 vs 78x64, gap/padding), icon size/stroke (21px/1.8
   vs 22px/1.7), label size/colour (10px #8A817A vs 11px #716962), and the
   whole NAV-SWIPE-2 active treatment (a gold dot instead of the approved
   rose pill + 18x3 underbar). Those were real unapproved layout differences;
   see ../evidence/b3-result.md. Host adaptations are appended at the bottom,
   separately and explicitly, and change none of the pinned rules. */

/* NAV-SWIPE-1: discussion overlay only; original approved screen files stay immutable. */
:root{--member-nav-height:calc(74px + env(safe-area-inset-bottom,0px));--member-nav-rose:#8D5666}
html.member-nav-enabled,html.member-nav-enabled body{height:100%;overflow:hidden}
.member-nav-enabled .app{min-height:0}
.member-nav{position:absolute;left:0;right:0;bottom:0;width:100%;height:var(--member-nav-height);padding:0 0 env(safe-area-inset-bottom,0px);border:0;border-top:1px solid #E9E1D7;background:#FFFDF9;z-index:24;display:grid;grid-template-columns:23px minmax(0,1fr) 23px;align-items:stretch;box-sizing:border-box;isolation:isolate}
.member-nav-viewport{min-width:0;overflow-x:auto;overflow-y:hidden;display:flex;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x;-webkit-overflow-scrolling:touch;cursor:grab}
.member-nav-viewport::-webkit-scrollbar{display:none}.member-nav-viewport.dragging{cursor:grabbing;scroll-behavior:auto}
.member-nav-link{flex:0 0 25%;min-width:78px;min-height:64px;box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:8px 3px 10px;text-decoration:none;font:inherit;font-size:10px;font-weight:500;line-height:1.2;color:#8A817A;border:0;background:transparent;border-radius:10px;user-select:none;-webkit-user-drag:none;touch-action:pan-x;scroll-margin-inline:8px}
.member-nav-link svg{width:22px;height:22px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.member-nav-label{max-width:100%;min-height:24px;display:flex;align-items:center;justify-content:center;text-align:center;overflow-wrap:normal;pointer-events:none}
.member-nav-link[aria-current="page"]{color:#8D5666;font-weight:800;background:linear-gradient(180deg,#FAF0F1 0%,#FFFDF9 86%)}
.member-nav-link[aria-current="page"]:after{content:'';position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;background:#C8A96B}
.member-nav-arrow{display:grid;place-items:center;width:23px;height:72px;padding:0;border:0;background:transparent;color:#9B7380;cursor:pointer;font-size:24px;font-weight:400;line-height:1;touch-action:manipulation}
.member-nav-arrow:disabled{opacity:.2;cursor:default}.member-nav a:focus-visible,.member-nav button:focus-visible{outline:2px solid #8D5666;outline-offset:-3px}
.app[data-nav-host="hub"]>main{height:calc(100% - 76px - var(--member-nav-height));padding-bottom:24px;min-height:0}
.app[data-nav-host="roles"]>main{height:calc(100% - 64px - var(--member-nav-height));overflow-y:auto;overscroll-behavior-y:contain;padding-bottom:10px;scrollbar-width:none}
.app[data-nav-host="roles"]>main::-webkit-scrollbar{display:none}.app[data-nav-host="roles"] .savebar{position:sticky;bottom:0;z-index:6;padding-top:9px;padding-bottom:9px;background:#FBF8F2;border-top:1px solid #E9E1D7;box-shadow:0 -7px 12px #FBF8F2}
.app[data-nav-host="info"]{grid-template-rows:84px 82px minmax(0,1fr) var(--member-nav-height)}.app[data-nav-host="info"].no-manager{grid-template-rows:84px 50px minmax(0,1fr) var(--member-nav-height)}
#navLeaveDialog{width:min(350px,calc(100vw - 32px));padding:22px;border:1px solid #E9E1D7;border-radius:18px;background:#FFFDF9;color:#27313A;box-shadow:0 20px 60px #352b3333;max-height:calc(100dvh - 30px);overflow:auto}
#navLeaveDialog::backdrop{background:#332b394d}#navLeaveDialog h2{margin:0 0 10px;font-size:17px}#navLeaveDialog p{font-size:13px;line-height:1.6;color:#7D746D;margin:0 0 18px}.nav-leave-actions{display:grid;gap:8px}.nav-leave-actions button{min-height:43px;border:1px solid #E4D8CD;border-radius:10px;background:#FFFDF9;font:inherit;font-size:13px;font-weight:700}.nav-leave-actions #navSave{background:#8D5666;color:white;border-color:#8D5666}.nav-leave-actions #navDiscard{color:#A55757}
@media(max-height:700px){.app[data-nav-host="roles"]>main{height:calc(100% - 58px - var(--member-nav-height))}}
@media(prefers-reduced-motion:reduce){.member-nav-viewport{scroll-behavior:auto}.member-nav *{transition:none!important;animation:none!important}}

/* NAV-SWIPE-2: clearer active item, no rainbow per-route coloring. */
.member-nav-link{font-size:11px;color:#716962}.member-nav-link[aria-current="page"]{color:#66384B;background:#EBCDD6;box-shadow:inset 0 0 0 1px #BD8495;border-radius:10px;font-weight:800}.member-nav-link[aria-current="page"]:after{width:18px;height:3px;bottom:4px;border-radius:3px;background:#895366}

/* ---------------------------------------------------------------------------
   Host adaptations. Nothing above this line is changed; these rules only
   cover hosts the pinned discussion overlay never had to run in.

   1. Real hosts build the entries as <button> (My Hub / member shell, whose
      navigation is an in-app route action, not a document load) as well as
      <a href> (memberNavMount.mjs's four non-shell destinations). The pinned
      rule set assumes the anchor's default pointer cursor.
   2. Officer Hub / Timer / Video Library / Upcoming Events are ordinary
      documents with no `.app` phone frame, so the pinned `position:absolute`
      (which is anchored to My Hub's / Meeting Roles' own `.app`) has nothing
      to anchor to there. mountMemberNav() marks that page's own content
      container `.member-nav-page-content` and appends the nav inside it, so
      only those four pages take the fixed/centred phone-width fallback, and
      reserve room for it without any other change to their layout. The same
      94px figure shell.css's own `.content` rule already reserves.
   --------------------------------------------------------------------------- */
/*
   3. Officer Hub and the other feature documents load officer.css, which has
      a bare `nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
      gap:7px;margin-bottom:28px}` rule that leaks into this element and
      lifts the entry row off the bottom while inserting gaps between the
      arrows and the rail. The pinned overlay never had to defend against
      that (it ran in a standalone page); these two declarations restore the
      overlay's own defaulted values and change nothing else.
*/
.member-nav{margin:0;gap:0}
.member-nav-link{cursor:pointer}
.member-nav-page-content{padding-bottom:calc(94px + env(safe-area-inset-bottom,0px))}
.member-nav-page-content>.member-nav{position:fixed;left:50%;right:auto;transform:translateX(-50%);width:min(100%,430px)}