/* Member portal / PWA - touch-first layout (BRD 6.22)
   Reads the same theme tokens as the back office, so light and dark
   both work without a second palette. */

.portal-body {
    background: var(--gg-surface);
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

.portal-offline {
    position: sticky;
    top: 0;
    z-index: 1060;
    background: var(--gg-warning);
    color: #fff;
    font-size: .8125rem;
    font-weight: 500;
    text-align: center;
    padding: .5rem .75rem;
}

.portal-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    padding-top: calc(.5rem + env(safe-area-inset-top));
    background: var(--gg-topbar-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gg-border);
}

.portal-main {
    padding: 1rem;
    max-width: 640px;
    margin: 0 auto;
}

.portal-tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1050;
    display: flex;
    background: var(--gg-topbar-bg);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--gg-border);
    padding-bottom: env(safe-area-inset-bottom);
}

.portal-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .125rem;
    padding: .625rem .25rem;
    color: var(--gg-faint);
    font-size: .6875rem;
    font-weight: 500;
    min-height: 58px;          /* comfortable touch target */
    text-align: center;
    transition: color .15s ease;
}

.portal-tab i { font-size: 1.25rem; }
.portal-tab.active { color: var(--gg-brand); font-weight: 600; }

/* Membership status hero */
.portal-hero {
    background: linear-gradient(135deg, var(--gg-brand-deep), var(--gg-brand-deeper));
    color: #fff;
    border-radius: 1.25rem;
    padding: 1.375rem;
    box-shadow: var(--gg-shadow);
}

.portal-hero h2 { color: #fff; font-size: 1.25rem; margin: 0; }
.portal-hero .label { font-size: .75rem; opacity: .82; letter-spacing: .03em; text-transform: uppercase; }
.portal-hero .value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.portal-hero .badge.bg-white { background: rgba(255, 255, 255, .92) !important; color: var(--gg-brand-deep) !important; }

.portal-hero.is-expired { background: linear-gradient(135deg, #d9534f, #8b1f1f); }
.portal-hero.is-none { background: linear-gradient(135deg, #64707d, #39424c); }

.portal-quick {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}

.portal-quick a {
    background: var(--gg-card);
    border: 1px solid var(--gg-border);
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .375rem;
    color: var(--gg-body);
    box-shadow: var(--gg-shadow-sm);
    min-height: 92px;
}

.portal-quick a:hover { border-color: var(--gg-brand); }
.portal-quick i { font-size: 1.25rem; color: var(--gg-brand); }
.portal-quick .t { font-weight: 600; font-size: .875rem; letter-spacing: -.01em; }
.portal-quick .s { font-size: .75rem; color: var(--gg-muted); }

/* Install prompt */
.portal-install {
    background: var(--gg-brand-soft);
    border: 1px solid var(--gg-border);
    border-radius: 1rem;
    padding: .875rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .8125rem;
    color: var(--gg-on-soft);
}

/* A row of two equal buttons, used on the activity and plan screens */
.portal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

@media (min-width: 768px) {
    .portal-tabbar {
        position: sticky;
        border-radius: 1rem;
        margin-top: 1.5rem;
        border: 1px solid var(--gg-border);
    }
    .portal-body { padding-bottom: 1.5rem; }
}

/* ==========================================================================
   Member sign-in (BRD 6.22)

   Built to read as a native app rather than a web form: a brand hero, a sheet
   that rises over it with a grabber, and touch-sized fields. On a phone it
   fills the viewport without scrolling; on a desktop it settles into a card.
   ========================================================================== */

.signin-body {
    margin: 0;
    min-height: 100dvh;
    background: var(--gg-brand);
}

.signin {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background:
        radial-gradient(120% 70% at 15% 0%, var(--gg-brand-dark) 0%, transparent 60%),
        linear-gradient(160deg, var(--gg-brand) 0%, var(--gg-brand-darker) 100%);
}

/* ---- hero -------------------------------------------------------------- */

.signin__hero {
    flex: 0 0 auto;
    padding: calc(env(safe-area-inset-top, 0px) + 3rem) 1.5rem 2.5rem;
    display: flex;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.signin__hero-inner { width: 100%; max-width: 420px; }

.signin__mark {
    width: 84px;
    height: 84px;
    margin: 0 auto 1.25rem;
    display: grid;
    place-items: center;
    padding: .75rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .5);
}

/* An uploaded logo usually carries its own white background, so the tile goes
   solid white and the two blend. The lettermark keeps the tinted glass. */
.signin__mark--logo {
    background: #fff;
    padding: .625rem;
}

.signin__mark img { max-width: 100%; max-height: 100%; object-fit: contain; }
.signin__mark span { font-size: 2.25rem; font-weight: 700; color: #fff; line-height: 1; }

.signin__title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 .375rem;
    color: #fff;
}

.signin__tagline {
    margin: 0;
    font-size: .9375rem;
    color: rgba(255, 255, 255, .78);
}

/* ---- sheet ------------------------------------------------------------- */

.signin__sheet {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    background: var(--gg-card);
    border-radius: 1.75rem 1.75rem 0 0;
    box-shadow: 0 -8px 32px -12px rgba(0, 0, 0, .28);
    padding: 1rem 1.5rem calc(env(safe-area-inset-bottom, 0px) + 2rem);
}

.signin__sheet-inner { width: 100%; max-width: 420px; }

.signin__grabber {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--gg-border);
    margin: 0 auto 1.5rem;
}

.signin__heading {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--gg-ink);
    margin: 0 0 .25rem;
}

.signin__sub {
    font-size: .875rem;
    color: var(--gg-muted);
    margin: 0 0 1.5rem;
}

/* ---- fields ------------------------------------------------------------ */

.signin__field { margin-bottom: 1.125rem; }

.signin__field .form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--gg-muted);
    margin-bottom: .375rem;
}

.signin__input { position: relative; }

.signin__input > .bi {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gg-faint);
    font-size: 1.0625rem;
    pointer-events: none;
}

.signin__input .form-control {
    height: 54px;
    padding-left: 2.875rem;
    padding-right: 1rem;
    border-radius: .875rem;
    font-size: 1rem;          /* 16px keeps iOS from zooming on focus */
    background: var(--gg-input-bg);
    border-color: var(--gg-border);
}

.signin__input .form-control:focus {
    border-color: var(--gg-brand);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .16);
}

.signin__input:has(.signin__reveal) .form-control { padding-right: 3rem; }

.signin__reveal {
    position: absolute;
    right: .375rem;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: .625rem;
    background: none;
    color: var(--gg-faint);
    cursor: pointer;
}

.signin__reveal:hover { color: var(--gg-brand); background: var(--gg-hover); }

.signin__error { font-size: .8125rem; color: var(--gg-danger); margin-top: .375rem; }

.signin__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.signin__row .form-check-label { font-size: .875rem; color: var(--gg-muted); }

.signin__forgot {
    font-size: .875rem;
    font-weight: 600;
    color: var(--gg-brand);
    text-decoration: none;
    white-space: nowrap;
}

.signin__forgot:hover { text-decoration: underline; }

/* ---- actions ----------------------------------------------------------- */

.signin__submit {
    width: 100%;
    height: 54px;
    border-radius: .875rem;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.signin__submit .bi { transition: transform .16s ease; }
.signin__submit:hover .bi { transform: translateX(3px); }

.signin__install {
    margin-top: 1.5rem;
    padding: .875rem 1rem;
    border-radius: 1rem;
    background: var(--gg-brand-soft);
    border: 1px solid var(--gg-border);
    color: var(--gg-on-soft);
    font-size: .8125rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.signin__help {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: .8125rem;
    color: var(--gg-faint);
}

.signin__help a { color: var(--gg-brand); font-weight: 600; }

/* ---- desktop ----------------------------------------------------------- */

@media (min-width: 768px) {
    .signin { justify-content: center; padding: 2rem 0; }
    .signin__hero { padding: 0 1.5rem 2rem; }

    .signin__sheet {
        flex: 0 0 auto;
        border-radius: 1.5rem;
        margin: 0 1.5rem;
        padding: 2rem;
        align-self: center;
        max-width: 480px;
        width: calc(100% - 3rem);
        box-shadow: 0 24px 64px -24px rgba(0, 0, 0, .45);
    }

    .signin__grabber { display: none; }
}

/* On a short screen the hero tightens up rather than pushing the form away */
@media (max-height: 700px) and (max-width: 767.98px) {
    .signin__hero { padding-top: calc(env(safe-area-inset-top, 0px) + 1.5rem); padding-bottom: 1.5rem; }
    .signin__mark { width: 64px; height: 64px; margin-bottom: .875rem; border-radius: 1.25rem; }
    .signin__mark span { font-size: 1.75rem; }
    .signin__title { font-size: 1.25rem; }
    .signin__tagline { font-size: .875rem; }
}

/* Announcement cards (BRD 6.17 / 6.22) */
.announcement-card { transition: transform .12s ease, box-shadow .12s ease; }
.announcement-card:hover { transform: translateY(-1px); box-shadow: var(--gg-shadow); }
.announcement-card.is-new { border-left: 3px solid var(--gg-brand); }

/* Unread bell in the app header */
.portal-bell { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: .625rem; background: none; color: var(--gg-muted); }
.portal-bell:hover { background: var(--gg-hover); color: var(--gg-brand); }
.portal-bell__count {
    position: absolute; top: 4px; right: 4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px;
    background: var(--gg-danger); color: #fff;
    font-size: .625rem; font-weight: 700; line-height: 16px; text-align: center;
    border: 2px solid var(--gg-card);
    box-sizing: content-box;
}

/* Foreground push notice (BRD 6.22) - a message arriving while the app is
   open does not raise a system notification, so it is shown here instead. */
.portal-toast {
    position: fixed;
    left: 50%;
    top: calc(env(safe-area-inset-top, 0px) + .75rem);
    transform: translate(-50%, -140%);
    z-index: 1080;
    width: min(420px, calc(100vw - 1.5rem));
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    border-radius: 1rem;
    background: var(--gg-card);
    border: 1px solid var(--gg-border);
    box-shadow: var(--gg-shadow-lg);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}

.portal-toast.is-in { transform: translate(-50%, 0); }
.portal-toast > .bi { color: var(--gg-brand); font-size: 1.125rem; margin-top: .0625rem; }
.portal-toast strong { display: block; font-size: .875rem; color: var(--gg-ink); }
.portal-toast span { display: block; font-size: .8125rem; color: var(--gg-muted); }

/* A light-ink logo sits straight on the brand ground with no tile behind it */
.signin__mark--bare {
    background: none;
    backdrop-filter: none;
    box-shadow: none;
    padding: 0;
    width: auto;
    max-width: 260px;
    height: 84px;
}