/* ============================================================================
   PORTAL SHELL -- the tabbed frame shared by the login page and the membership
   application flow. JJE/Claude 08/20/2026.

   These rules used to live in Login.css, which only _LoginLayout links, so the
   frame existed on exactly one page: clicking "Apply Membership" or "View
   Application Status" from the Online Membership tab dropped the member onto
   _PortalLayout, a shell with no tabs at all, and the tab they were reading a
   moment earlier was gone. _PortalHeader grew a "Back to Online Membership"
   strip to compensate for that; the strip is gone now that both layouts draw
   the same frame.

   What belongs in this file: the container, the tab bar and the panes -- the
   chrome. What does NOT: .welcome-text, .info-card, the pill buttons and
   anything under #loginform or #loginCard. Those are the landing page's own
   content and stay in Login.css, because they must not reach the membership
   forms that now render inside the frame.

   No Bootstrap dependency here on purpose. The login page loads Bootstrap 4
   and the membership pages load Bootstrap 3; plain flexbox is the only thing
   that behaves identically on both.
   ============================================================================ */

/* The coop palette used to be declared here. JJE/Claude 08/23/2026 - it moved to
   Css\coop-theme.css, which every layout now links FIRST, so there is one :root
   block for both portals instead of one per stylesheet. No value changed, and
   the var() names below are the same ones. coop-theme.css is a hard dependency
   of this file: a layout that links portal-shell.css without it loses the blues. */

.portal-container {
    width: 100%;
    max-width: 1440px;
    margin: 30px auto;
    min-height: 0;
    box-shadow: 0 5px 20px rgba(0,0,0,.15);
}

/* TAB MENU */
.tab-menu {
    display: flex;
    gap: 8px;
    background: #f1efe8;
    border-radius: 30px;
    padding: 6px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto 20px;
}

/* The membership pages render the tab the member is NOT on as a link rather
   than a pane-switching button, so both element types are styled together. */
.tab-menu button,
.tab-menu a,
.tab-menu .tab-current {
    flex: 1;
    /* A flex item will not shrink below its own content width unless told to.
       "Online Membership" plus its padding needs about 230px and "Online
       Banking" about 200px, so without this the pair forced the tab bar - and
       with it the whole page - to roughly 450px, and every narrower screen
       scrolled sideways. */
    min-width: 0;
    border: none;
    background: transparent;
    padding: 12px 20px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    color: #0c447c;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .tab-menu a:hover,
    .tab-menu a:focus {
        color: #0c447c;
        text-decoration: none;
    }

.tab-menu button.active,
.tab-menu .tab-current {
    background-color: #75d84c;
    color: #0c447c;
}

/* The current section is not a control, so it does not take a pointer. */
.tab-menu .tab-current {
    cursor: default;
}

/* Keyboard focus was invisible everywhere on this page. :focus rather than
   :focus-visible -- IE=edge is still declared in both layout heads. */
.tab-menu button:focus,
.tab-menu a:focus {
    outline: 2px solid var(--coop-blue);
    outline-offset: 2px;
}

/* CONTENT -- the panes.

   Named .portal-pane, NOT .tab-content. Bootstrap owns .tab-content, and the
   membership pages that now render inside this frame use it: Membertype has a
   Bootstrap tab widget of its own, so a rule saying ".tab-content { display:
   none }" here reached straight into that widget and hid the Regular/Associate
   member chooser. The shell and the page content have to be able to use tabs
   without one switching the other off. */
.portal-pane {
    background-color: transparent;
    /* Was a flat 50px. The panes are a two-column layout inside a container that
       already centres its content, so most of that was doubling up on space the
       grid provides. 24/40 keeps the content off the edges without spending a
       fifth of a laptop screen on margin. */
    padding: 24px 40px;
    min-height: 350px;
    display: none;
}

.portal-pane.active {
    display: block;
}

@media (min-width: 768px) {
    /* A calmer floor than the old 650px, but NOT tied to the viewport: on a tall
       screen calc(100vh - x) left a stretch of empty card below the form. */
    .portal-container {
        min-height: 600px;
    }
}

@media (max-width: 768px) {
    .tab-menu {
        max-width: 100%;
    }

    .tab-menu button,
    .tab-menu a,
    .tab-menu .tab-current {
        padding: 10px 12px;
        font-size: 14px;
    }
}

/* Small screens: 50px of padding on a 360px viewport left the form about 260px
   wide, and the container's top margin wasted another 30px. */
@media (max-width: 767px) {
    .portal-container {
        margin: 16px auto;
    }

    .portal-pane {
        padding: 20px 16px;
        min-height: 0;
    }

    /* The landing page sets its artwork as an inline style on .portal-container,
       and below this width it sits directly behind the welcome copy: the laptop
       and the pink accents run straight through the one sentence explaining what
       the page is for. Dropping it costs nothing and the text becomes readable.
       !important because nothing else can outrank an inline style.
       (The membership pages set no artwork at all - see _PortalLayout.) */
    .portal-container {
        background-image: none !important;
    }
}

@media (max-width: 575px) {
    /* Below this the two pills genuinely do not fit side by side at a legible
       size, so they stack rather than shrink into unreadability. */
    .tab-menu {
        flex-wrap: wrap;
    }

    .tab-menu button,
    .tab-menu a,
    .tab-menu .tab-current {
        flex: 1 1 100%;
    }
}

/* ============================================================================
   FLOW MODIFIER -- .portal-container.is-flow, set by _PortalLayout on the
   membership application pages. JJE/Claude 08/20/2026.

   The frame was measured for the landing page: one short card floating on
   artwork, where generous padding and a 600px floor are what make it read as a
   card rather than a stripe. The membership pages put a full form inside the
   same frame, and there those numbers cost about 180px of empty screen above
   the first line of content, on pages that already scroll.

   So: no artwork (background-size:cover behind a five-step form scales the
   image to something unreadable), no minimum height (the content sets it), and
   padding sized for a form rather than for a card.
   ============================================================================ */
.portal-container.is-flow {
    margin: 16px auto;
    min-height: 0;
    background: #ffffff;
}

/* The brand row. On the membership pages the coop logo shares this line with the
   tab bar instead of getting a full-width header strip of its own above it - the
   bar had empty space on both sides of the tabs anyway, so the mark costs no
   vertical space at all here. Three flex tracks: brand, tabs, and a spacer the
   same width as the brand, so the tabs stay on the page's centre line rather
   than the centre of the leftovers. */
.portal-flow-bar {
    display: flex;
    align-items: center;
    padding: 12px 20px 16px;
}

.portal-flow-brand,
.portal-flow-spacer {
    flex: 1 1 0;
    min-width: 0;
}

.portal-flow-brand img {
    /* Both dimensions, as everywhere else the configured logo is drawn: it is a
       wordmark, roughly 1167x204, so capping the height alone makes it 200px wide
       and max-width cannot pull it back while the height is pinned. */
    max-height: 34px;
    max-width: 100%;
    height: auto;
    width: auto;
    display: block;
}

.portal-flow-bar .tab-menu {
    flex: 0 1 520px;
    margin: 0;
}

@media (max-width: 767px) {
    /* Side by side, the brand and two pills do not fit. The brand goes above the
       bar and centres; the spacer has nothing left to balance. */
    .portal-flow-bar {
        flex-wrap: wrap;
        padding: 10px 12px 12px;
    }

    .portal-flow-brand {
        flex: 1 1 100%;
        margin-bottom: 10px;
    }

    .portal-flow-brand img {
        margin: 0 auto;
    }

    .portal-flow-spacer {
        display: none;
    }

    .portal-flow-bar .tab-menu {
        flex: 1 1 100%;
    }
}

.is-flow .portal-pane {
    padding: 20px 24px;
    min-height: 0;
}

@media (max-width: 767px) {
    .is-flow .portal-pane {
        padding: 16px 12px;
    }
}


/* ============================================================================
   SCROLL INSIDE THE TAB, NOT THE PAGE -- body.portal-shell-page.
   JJE/Claude 08/20/2026.

   Set by _LoginLayout on every login-page view, and by _PortalLayout on the
   membership pages only (the loan calculator stays a normal scrolling page).

   Without this the frame is just a tall box: registration on the Online Banking
   tab, or any of the longer application steps on Online Membership, pushed the
   document past the viewport, so the tab bar scrolled away with the content and
   the member lost both the section they were in and the way out of it.

   The body becomes the viewport-tall column, the frame takes what is left after
   the footer, and the ACTIVE pane is the only thing that scrolls. Only the
   active one: an inactive pane is display:none and has no box to scroll.

   min-height:0 appears three times below and is load-bearing every time - a flex
   item defaults to min-height:auto and will not shrink below its content, so
   without it nothing scrolls and the overflow is simply pushed off screen.
   ============================================================================ */
.portal-shell-page {
    height: 100vh;
    /* Modern mobile browsers, where 100vh is the tallest the viewport gets and
       the URL bar overlaps it. Older engines drop the declaration and keep the
       line above. */
    height: 100dvh;
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    /* The preloader and notification partials are body children too. They get a
       fixed track by default so only .main-wrapper absorbs the spare height. */
    .portal-shell-page > * {
        flex: 0 0 auto;
    }

    .portal-shell-page > .main-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

.portal-shell-page .portal-container {
    flex: 1 1 auto;
    /* Beats the 600px floor the landing page sets at >=768px, which would
       otherwise overflow a short viewport. */
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The chrome stays put: it is the thing the member steers with. */
.portal-shell-page .tab-menu,
.portal-shell-page .portal-flow-bar {
    flex: 0 0 auto;
}

.portal-shell-page .portal-pane.active {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* Reserve the scrollbar gutter whether or not it is needed. Without it, one
       tab scrolling and the other not shifts the whole layout sideways by the
       scrollbar width every time the member switches. Ignored by engines that do
       not know the property, which simply behave as before. */
    scrollbar-gutter: stable;

    /* Firefox. auto rather than thin: this is the page's only scrollbar and the
       member has to find it. */
    scrollbar-width: auto;
    scrollbar-color: #9bb7d4 #eef2f6;
}

/* The browser default is a pale grey thumb on a pale grey track, which against
   this page's near-white background is close to invisible - the frame looks like
   a page that simply ends mid-content. WebKit and Blink ignore scrollbar-color,
   so they need their own rules to match what Firefox gets above. */
.portal-shell-page .portal-pane.active::-webkit-scrollbar {
    width: 12px;
}

.portal-shell-page .portal-pane.active::-webkit-scrollbar-track {
    background: #eef2f6;
}

.portal-shell-page .portal-pane.active::-webkit-scrollbar-thumb {
    background: #9bb7d4;
    border-radius: 6px;
    /* Inset the thumb inside its track so it reads as a control sitting in a
       channel rather than as a second edge to the window. */
    border: 2px solid #eef2f6;
}

    .portal-shell-page .portal-pane.active::-webkit-scrollbar-thumb:hover {
        background: var(--coop-blue);
    }

/* Full bleed. The frame was built as a card floating on the page, so it carried a
   30px margin and a drop shadow (16px under .is-flow). Once the body stopped
   scrolling, that margin became a band of dead white above the tab bar and below
   the pane that nothing could ever fill - and a shadow cast against the edge of
   the viewport is not visible anyway. The frame is the page here, so it takes the
   whole of it.

   Last in the file deliberately: this ties on specificity with
   .portal-container.is-flow above, and source order is what settles it. */
.portal-shell-page .portal-container {
    margin: 0;
    max-width: none;
    box-shadow: none;
    /* The margin above paid for this before it was removed. Without it the tab
       bar sits hard against the top edge of the window, which reads as a
       rendering fault rather than as a design. */
    padding-top: 16px;
}