/* shell-ui.css — Frenzon member portal: the parts that frame every page.
   Top bar (title and notifications), page background, bottom navigation.
   5 Nov 2026. Load last. No inline styles are used (CSP style-src 'self'). */

/* ============ PAGE BACKGROUND: soft green and gold glows over a fine dot grid ============ */
body {
  background:
    radial-gradient(rgba(20, 67, 47, .075) 1px, transparent 1.3px) 0 0 / 22px 22px,
    radial-gradient(720px 340px at 100% -4%, rgba(31, 107, 74, .17), transparent 62%),
    radial-gradient(560px 300px at -12% 42%, rgba(224, 176, 74, .15), transparent 64%),
    radial-gradient(520px 300px at 110% 88%, rgba(31, 107, 74, .10), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}

/* ============ TOP BAR: deep green with a gold hairline ============ */
.topbar {
  color: #fff;
  background:
    radial-gradient(260px 120px at 100% 0, rgba(224, 176, 74, .30), transparent 70%),
    linear-gradient(120deg, #14432f 0%, #0f3825 62%, #0b2c1e 100%);
  border-bottom: 0;
  box-shadow: 0 12px 26px -18px rgba(8, 34, 24, .85);
}
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(224,176,74,0), #e0b04a 30%, #f6e3b0 50%, #e0b04a 70%, rgba(224,176,74,0)); }
.topbar-title { color: #fff; font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; }
.topbar .mobile-menu-button { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff; }
.topbar .mobile-menu-button:hover { background: rgba(255,255,255,.2); }
.topbar-member { background: rgba(224,176,74,.18); color: #f6e3b0; box-shadow: inset 0 0 0 1px rgba(224,176,74,.35); }
.topbar #notificationsButton { width: 42px; height: 42px; border-radius: 14px; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); box-shadow: none; }
.topbar #notificationsButton:hover { background: rgba(255,255,255,.22); }
.topbar .notification-badge { top: -4px; right: -4px; border-color: #14432f; background: #e0b04a; color: #3b2a02; box-shadow: 0 0 0 3px rgba(224,176,74,.28); }
.topbar :focus-visible { outline: 3px solid rgba(224,176,74,.75); outline-offset: 2px; }

/* ============ BOTTOM NAVIGATION: a dark green pill, the open page lights up gold ============ */
.bottom-nav {
  left: 14px; right: 14px; padding: 7px; gap: 3px; border-radius: 26px;
  background:
    radial-gradient(180px 80px at 50% -30%, rgba(224,176,74,.22), transparent 70%),
    linear-gradient(160deg, #164a33 0%, #0c3123 100%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 38px -14px rgba(8, 34, 24, .75), inset 0 1px 0 rgba(255,255,255,.08);
}
.bottom-nav-item { position: relative; gap: 3px; border-radius: 19px; color: #a9cdb9; font-size: .68rem; font-weight: 700; letter-spacing: .01em;
  transition: background .2s, color .2s, transform .15s; }
.bottom-nav-item:hover { color: #fff; background: rgba(255,255,255,.08); }
.bottom-nav-item:active { transform: scale(.94); }
.bottom-nav-item .bottom-nav-icon { display: grid; place-items: center; transition: transform .2s; }
.bottom-nav-item .bottom-nav-icon svg { width: 22px; height: 22px; }
.bottom-nav-item.active { color: #3b2a02; background: linear-gradient(145deg, #f6e3b0, #e0b04a); box-shadow: 0 10px 18px -10px rgba(224,176,74,.9); }
.bottom-nav-item.active .bottom-nav-icon { transform: translateY(-1px) scale(1.1); }
.bottom-nav-item.active span:last-child { font-weight: 800; }
.bottom-nav-item:focus-visible { outline: 3px solid #f6e3b0; outline-offset: -3px; }

@media (min-width: 900px) { .topbar { min-height: 68px; } }
@media (prefers-reduced-motion: reduce) { .bottom-nav-item, .bottom-nav-item .bottom-nav-icon { transition: none; } }


/* ====================================================================
   5 Nov, FIFTH PASS (revised): green top bar and dark green navigation are back,
   but SMALLER; duotone icons with a gold spark; page background a little calmer.
   These rules come last and win.
   ==================================================================== */
:root { --nav-h: 58px; }

body {
  background:
    radial-gradient(rgba(20, 67, 47, .06) 1px, transparent 1.3px) 0 0 / 22px 22px,
    radial-gradient(640px 300px at 100% -4%, rgba(31, 107, 74, .12), transparent 62%),
    radial-gradient(500px 280px at -12% 44%, rgba(224, 176, 74, .10), transparent 64%),
    radial-gradient(480px 280px at 110% 90%, rgba(31, 107, 74, .07), transparent 62%),
    #f3f7f4;
  background-attachment: fixed;
}

/* ---- Top bar: green design, slimmer ---- */
.topbar { min-height: 50px; padding: env(safe-area-inset-top, 0px) 12px 0; gap: 8px; }
.topbar-left { gap: 8px; }
.topbar-title { font-size: 1rem; }
.topbar .mobile-menu-button { width: 36px; height: 36px; border-radius: 12px; }
.topbar .mobile-menu-button .icon { width: 19px; height: 19px; }
.topbar-actions { gap: 8px; }
.topbar-member { padding: 4px 10px; font-size: .74rem; }
.topbar #notificationsButton { width: 36px; height: 36px; border-radius: 12px; }
.topbar #notificationsButton .icon { width: 19px; height: 19px; }
.topbar .notification-badge { min-width: 18px; height: 18px; font-size: .62rem; }
@media (min-width: 900px) { .topbar { min-height: 58px; } }

/* ---- Bottom navigation: dark green pill, a little smaller, gold for the open page ---- */
.bottom-nav { left: 16px; right: 16px; padding: 5px; gap: 2px; border-radius: 22px; }
.bottom-nav-item { gap: 2px; border-radius: 17px; font-size: .64rem; }
.bottom-nav-item .bottom-nav-icon svg { width: 23px; height: 23px; stroke-width: 1.7; overflow: visible; }

/* Duotone icons: .d = soft filled shape, .g = small gold spark */
.bottom-nav-icon svg .d { fill: currentColor; fill-opacity: .26; stroke: none; }
.bottom-nav-icon svg .g { fill: #e0b04a; stroke: #e0b04a; stroke-width: .6; }
.bottom-nav-item.active .bottom-nav-icon svg .d { fill: #fff; fill-opacity: .55; }
.bottom-nav-item.active .bottom-nav-icon svg .g { fill: #8a5a00; stroke: #8a5a00; }
.bottom-nav-item:not(.active) .bottom-nav-icon svg { filter: drop-shadow(0 0 5px rgba(224,176,74,.18)); }
.bottom-nav-item.active .bottom-nav-icon { transform: translateY(-1px) scale(1.08); }


/* ====================================================================
   5 Nov, SIXTH PASS: graphics blended into the top bar; navigation back to a
   SOFT GREEN TINT (light), the open page keeps the gold block.
   ==================================================================== */
.topbar > svg.tb-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.topbar-left, .topbar-actions { position: relative; z-index: 1; }

.bottom-nav {
  background:
    radial-gradient(200px 70px at 50% -40%, rgba(224,176,74,.20), transparent 70%),
    linear-gradient(170deg, #eef7f1 0%, #d9eadf 100%);
  border: 1px solid #bcd6c5;
  box-shadow: 0 14px 28px -14px rgba(20, 67, 47, .45), inset 0 1px 0 rgba(255,255,255,.9);
}
.bottom-nav-item { color: #2c6148; }
.bottom-nav-item:hover { color: #14432f; background: rgba(255,255,255,.55); }
.bottom-nav-item .bottom-nav-icon svg { filter: none !important; }
.bottom-nav-item:not(.active) .bottom-nav-icon svg .d { fill-opacity: .2; }
.bottom-nav-icon svg .g { fill: #d39b21; stroke: #d39b21; }
.bottom-nav-item.active { color: #3b2a02; background: linear-gradient(145deg, #f6e3b0, #e0b04a); box-shadow: 0 10px 18px -10px rgba(224,176,74,.95); }
.bottom-nav-item.active .bottom-nav-icon svg .g { fill: #8a5a00; stroke: #8a5a00; }
.bottom-nav-item:focus-visible { outline: 3px solid #1f6b4a; outline-offset: -3px; }


/* ====================================================================
   5 Nov, SEVENTH PASS: top bar smaller and styled like the navigation
   (soft green tint, light border, gold accents). No dark green left in it.
   ==================================================================== */
.topbar {
  min-height: 42px; padding: env(safe-area-inset-top, 0px) 10px 0; gap: 6px; color: #14432f;
  background:
    radial-gradient(200px 70px at 50% -40%, rgba(224,176,74,.20), transparent 70%),
    linear-gradient(170deg, #eef7f1 0%, #d9eadf 100%);
  border-bottom: 1px solid #bcd6c5;
  box-shadow: 0 10px 22px -16px rgba(20, 67, 47, .5), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: none;
}
.topbar::after { height: 2px; opacity: .9; background: linear-gradient(90deg, rgba(224,176,74,0), #e0b04a 30%, #f6e3b0 50%, #e0b04a 70%, rgba(224,176,74,0)); }
.topbar-left { gap: 6px; }
.topbar-title { color: #14432f; font-size: .92rem; font-weight: 800; }
.topbar .mobile-menu-button, .topbar #notificationsButton { width: 32px; height: 32px; border-radius: 11px; color: #2c6148;
  background: rgba(255,255,255,.7); border: 1px solid #bcd6c5; box-shadow: none; }
.topbar .mobile-menu-button:hover, .topbar #notificationsButton:hover { color: #14432f; background: #fff; }
.topbar .mobile-menu-button .icon, .topbar #notificationsButton .icon { width: 17px; height: 17px; }
.topbar-actions { gap: 6px; }
.topbar-member { padding: 3px 9px; font-size: .7rem; font-weight: 800; color: #3b2a02; background: linear-gradient(145deg, #f6e3b0, #e0b04a); box-shadow: none; }
.topbar .notification-badge { top: -5px; right: -5px; min-width: 16px; height: 16px; font-size: .58rem; border: 2px solid #eef7f1; background: #d94a38; color: #fff; box-shadow: none; }
.topbar :focus-visible { outline: 3px solid #1f6b4a; outline-offset: 2px; }
/* the drawing, recoloured to soft green and gold on the light bar */
.topbar > svg.tb-art g[stroke] { stroke: #2c6148; }
.topbar > svg.tb-art { opacity: .8; }
@media (min-width: 900px) { .topbar { min-height: 50px; } }