/* ============================================================
   MOW NSW MEMBERS PORTAL — SHARED STYLESHEET
   Reference build for Kentico implementation.

   COLOUR NOTE (updated 22 Jul 2026): tokens below now match the
   live site's full :root custom-property dump (nswmealsonwheels.org.au),
   supplied directly rather than re-derived — confirms and extends the
   values already in use here:
     - --color-mow-navy #262E6D → --navy (headings/text)
     - --color-mow-indigo #031F73 → --navy-deep (topbar/strong CTAs)
     - --color-mow-navy-hover #0F2A47 → --navy-hover (new)
     - --color-mow-teal #2C8B88 / hover #236B66 → --teal / --teal-hover
     - --color-mow-teal-light #E8F8F7 → --teal-pale-bg
     - --color-mow-cyan #72DCD4 → --teal-pale (matches documented
       Brand Guidelines light teal exactly)
     - --color-mow-orange #D2491A / hover #B6421B → --orange / --orange-hover
     - --color-mow-blue #236B8A / hover #1A5269 → --blue / --blue-hover (new,
       available as a tertiary accent — not yet used anywhere on-page)
     - --color-mow-gradient #1B365D → --gradient (new; used in the
       navy→teal gradient panels so the stops match the live site)
   These still differ from the documented MOW NSW Brand & Comms
   Guidelines v2 palette (navy/teal/orange are all slightly different
   shades there) — a real discrepancy worth flagging to MOW NSW brand/
   comms, not a guess on our part.

   TYPE SCALE NOTE (added 22 Jul 2026): the live site runs noticeably
   larger type than this portal originally did (its --text-base is
   16px with headings scaling up to --text-5xl at 48px). Base body
   size bumped 15px → 16px and headings sized up throughout to feel
   more like the parent site, without going as large as its marketing
   hero sizes — this is a dense dashboard, not a landing page.

   FONT NOTE: the live site loads a licensed webfont ("Neue Haas
   Unica") via Adobe Typekit (use.typekit.net), scoped to MOW NSW's
   own domain. That kit is not embedded here — per-domain font
   licensing means pulling a third party's Typekit ID into an
   unrelated reference build isn't appropriate. Arial remains the
   fallback stack, which is also what the Brand Guidelines name as
   the web-safe font (section 5.1) and what any visitor without the
   licensed kit loaded would see anyway.

   FILE STRUCTURE: every page in this reference build links this
   one stylesheet. Keep all pages in the same folder so relative
   links between them (href="resources.html" etc.) resolve.
   ============================================================ */
:root {
  --navy: #262E6D;
  --navy-deep: #031F73;
  --navy-hover: #0F2A47;
  --sky-blue: #00A9E0;
  --green: #34B233;
  --teal: #2C8B88;
  --teal-hover: #236B66;
  --teal-light: #00C0B5;
  --teal-pale: #72DCD4;
  --teal-pale-bg: #E8F8F7;
  --orange: #D2491A;
  --orange-hover: #B6421B;
  --blue: #236B8A;
  --blue-hover: #1A5269;
  --gradient: #1B365D;
  --cream: #EEECE1;
  --ink: #1A1A1A;
  --muted: #666666;
  --border: #E2E0D8;
  --surface: #FFFFFF;
  --surface-tint: #F7F6F1;
  --warning-bg: #FDF1E7;
  --warning-text: #B24A0F;
  --success-bg: #E9F7EC;
  --success-text: #1F7A32;
  --danger-text: #B3261E;
  --font-body: Arial, Helvetica, sans-serif;
  --font-heading: Arial, Helvetica, sans-serif;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --radius: 14px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--surface-tint);
  font-size: 16px;
  line-height: 1.5;
}
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-heading); }

/* ---- Top bar (floating white card over the gradient hero) ---- */
.topbar {
  background: #fff; color: var(--navy);
  display: flex; flex-direction: column;
  padding: 12px 24px; position: fixed; top: 14px; left: 0; right: 0; z-index: 20;
  max-width: 1288px; margin: 0 auto; border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(3,31,115,0.16);
}
.topbar-row { display: flex; align-items: center; gap: 20px; }
.topbar .brand { display: flex; align-items: center; gap: 10px; margin-left: -16px; margin-right: 28px; font-family: var(--font-heading); font-weight: 700; font-size: 19px; color: var(--navy); text-decoration: none; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-title { font-size: 17px; font-weight: 700; color: var(--navy); }
.brand-sub { font-size: 10px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .06em; }
.topbar nav { margin-right: auto; position: relative; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 12px; font-weight: 700; color: var(--navy); flex-shrink: 0;
}
.brand .mark img { display: block; }
.topbar nav { display: flex; align-items: center; gap: 20px; font-size: 12.5px; flex-wrap: wrap; }
.topbar nav > a { display: flex; align-items: center; text-decoration: none; color: var(--navy); opacity: 0.72; padding: 6px 2px; white-space: nowrap; }
.topbar nav > a.active { opacity: 1; border-bottom: 2px solid var(--teal); }
.topbar .user {
  display: flex; align-items: center; gap: 10px; font-size: 13px; white-space: nowrap; color: var(--navy);
  position: relative; cursor: pointer; user-select: none; padding: 6px 4px; border-radius: var(--radius-sm);
}
.topbar .user:hover { background: var(--surface-tint); }
.topbar .user .chev { opacity: 0.6; transition: transform .15s ease; flex-shrink: 0; }
.topbar .user.open .chev { transform: rotate(180deg); }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.acct-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--navy-deep); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; flex-shrink: 0;
}

/* ---- Hamburger menu (mobile only — see the max-width: 900px breakpoint) ---- */
.mobile-nav-toggle {
  display: none; width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent;
  color: var(--navy); align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.mobile-nav-toggle:hover { background: var(--surface-tint); }
body.mnav-lock { overflow: hidden; }
.mnav-overlay { position: fixed; inset: 0; background: rgba(3,31,115,0.4); z-index: 100; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.mnav-overlay.open { opacity: 1; pointer-events: auto; }
.mnav-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 340px; max-width: 86vw; background: #fff; z-index: 101;
  transform: translateX(100%); transition: transform .25s ease; box-shadow: -10px 0 30px rgba(3,31,115,0.18);
  display: flex; flex-direction: column;
}
.mnav-drawer.open { transform: translateX(0); }
.mnav-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 10px 16px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.mnav-head .brand { margin: 0; }
.mnav-close { border: none; background: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 10px; }
/* .mnav-body holds, top to bottom: a static identity block, a search bar,
   a scrollable nav accordion (the only part that grows/scrolls), and the
   Account Settings accordion pinned at the bottom — see the four blocks
   below in that order. */
.mnav-body { padding: 0; overflow: hidden; flex: 1; display: flex; flex-direction: column; min-height: 0; }

.mnav-identity {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border);
  flex-shrink: 0; text-decoration: none; color: inherit;
}
.mnav-identity:hover { background: var(--surface-tint); }
.mnav-identity .n { font-size: 14px; font-weight: 700; color: var(--navy); }
.mnav-identity .r { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.mnav-search { padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.mnav-search-inner { display: flex; align-items: center; gap: 8px; background: var(--surface-tint); border-radius: var(--radius-sm); padding: 10px 12px; }
.mnav-search-inner svg { color: var(--muted); flex-shrink: 0; }
.mnav-search-inner input { border: none; outline: none; background: transparent; font-size: 13.5px; width: 100%; color: var(--ink); font-family: var(--font-body); }

.mnav-nav-scroll { flex: 1; overflow-y: auto; min-height: 0; padding: 6px 10px; }
.mnav-link {
  display: block; padding: 14px 12px; font-size: 15px; font-weight: 700; color: var(--navy); text-decoration: none;
  border-radius: var(--radius-sm); border-bottom: 1px solid var(--border); min-height: 44px;
}
.mnav-group { border-bottom: 1px solid var(--border); }
.mnav-group-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left;
  padding: 14px 12px; font-size: 15px; font-weight: 700; color: var(--navy); background: none; border: none;
  font-family: var(--font-body); cursor: pointer; min-height: 44px;
}
.mnav-group-btn.active { color: var(--teal); }
.mnav-group-btn .chev { transition: transform .2s ease; opacity: 0.5; }
.mnav-group.open .mnav-group-btn .chev { transform: rotate(180deg); }
.mnav-group-menu { display: none; padding: 0 12px 12px 22px; }
.mnav-group.open .mnav-group-menu { display: block; }
.mnav-group-menu a { display: block; padding: 10px 0; font-size: 13.5px; color: var(--ink); text-decoration: none; min-height: 44px; }
.mnav-group-menu a:hover { color: var(--teal); }

/* ---- Account Settings: pinned at the bottom of the drawer, collapsible.
   The panel sits BEFORE the toggle button in DOM order, so opening it grows
   the group upward (toward the middle of the screen) instead of pushing
   anything below — there's nothing below it to push. ---- */
.mnav-account { border-top: 1px solid var(--border); flex-shrink: 0; }
.mnav-account-panel { display: none; max-height: 45vh; overflow-y: auto; padding: 8px 6px; }
.mnav-account.open .mnav-account-panel { display: block; }
.mnav-account-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left;
  padding: 14px 16px; font-size: 14px; font-weight: 700; color: var(--navy); background: none; border: none;
  font-family: var(--font-body); cursor: pointer; min-height: 44px;
}
.mnav-account-head .chev { transition: transform .2s ease; opacity: 0.5; }
.mnav-account.open .mnav-account-head .chev { transform: rotate(180deg); }
.mnav-acct a, .mnav-acct button.um-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; font-family: var(--font-body); font-size: 13.5px; color: var(--ink);
  padding: 10px 6px; border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; min-height: 44px;
}
.mnav-acct a:hover, .mnav-acct button.um-item:hover { background: var(--surface-tint); }
.mnav-acct .um-sep { height: 1px; background: var(--border); margin: 6px 2px; }
.mnav-acct .um-item.danger { color: var(--danger-text); }
.mnav-acct .um-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 12px 6px 4px; }

/* ---- Nav dropdown (mega-menu style, click to open) ---- */
.nav-drop { position: relative; }
.nav-drop-btn {
  display: flex; align-items: center; gap: 5px; background: none; border: none;
  font-family: var(--font-body); font-size: 12.5px; color: var(--navy); opacity: 0.72;
  cursor: pointer; padding: 6px 2px; white-space: nowrap;
}
.nav-drop-btn .chev { opacity: 0.6; transition: transform .15s ease; }
.nav-drop.open .nav-drop-btn .chev { transform: rotate(180deg); }
.nav-drop-btn.active, .nav-drop.open .nav-drop-btn { opacity: 1; }
.nav-drop-btn.active { border-bottom: 2px solid var(--teal); }
.nav-drop-menu {
  display: none; position: absolute; top: calc(100% + 14px); left: 0;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 14px 30px rgba(3,31,115,0.18); min-width: 240px; padding: 8px; z-index: 35;
}
.nav-drop.open .nav-drop-menu { display: block; }
.nav-drop-menu a { display: block; padding: 9px 12px; font-size: 13px; color: var(--ink); text-decoration: none; border-radius: var(--radius-sm); white-space: nowrap; }
.nav-drop-menu a:hover { background: var(--surface-tint); color: var(--teal); }

/* ---- Topbar search: drops down as a second row inside the topbar card
   (not overlapping the nav), so it never covers menu items. ---- */
.ts-toggle {
  width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent; color: var(--navy);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.ts-toggle:hover { background: var(--surface-tint); }
.topbar.search-open .ts-toggle { background: var(--teal-pale-bg); color: var(--teal); }
.topbar-search-row {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .25s ease, opacity .2s ease, margin-top .25s ease;
}
.topbar.search-open .topbar-search-row { max-height: 70vh; opacity: 1; margin-top: 14px; overflow-y: auto; }
.topbar-search-inner {
  display: flex; align-items: center; gap: 10px; background: var(--surface-tint);
  border: 1px solid var(--border); border-radius: 999px; padding: 11px 18px;
}
.topbar-search-inner svg { color: var(--muted); flex-shrink: 0; }
.topbar-search-inner input { border: none; outline: none; background: transparent; font-family: var(--font-body); font-size: 14px; width: 100%; color: var(--ink); }
.ts-suggest { padding-top: 14px; }
.ts-suggest-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 12px 0 8px; }
.ts-suggest-label:first-child { margin-top: 0; }
.ts-suggest-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ts-suggest-item { display: block; text-decoration: none; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; }
.ts-suggest-item:hover { background: var(--teal-pale-bg); border-color: var(--teal); }
.ts-suggest-item .tsi-t { font-size: 11.5px; font-weight: 700; color: var(--navy); margin-bottom: 3px; line-height: 1.3; }
.ts-suggest-item .tsi-m { font-size: 10px; color: var(--muted); }
.ts-suggest-pages { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-suggest-pages a { font-size: 12px; font-weight: 600; color: var(--navy); background: var(--cream); border-radius: 999px; padding: 6px 12px; text-decoration: none; }
.ts-suggest-pages a:hover { background: var(--teal-pale-bg); color: var(--teal); }
.ts-suggest-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-suggest-tags .tstag { font-size: 11.5px; font-weight: 600; color: var(--teal); background: #fff; border: 1px solid var(--teal-pale); border-radius: 999px; padding: 5px 11px; text-decoration: none; }
.ts-suggest-tags .tstag:hover { background: var(--teal); color: #fff; }
.ts-suggest-all { display: block; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--teal); text-decoration: none; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.ts-suggest-all:hover { text-decoration: underline; }
@media (max-width: 640px) { .ts-suggest-cols { grid-template-columns: repeat(2, 1fr); } }

/* ---- Profile dropdown (under the topbar user badge) ---- */
.user-menu {
  display: none; position: absolute; top: calc(100% + 10px); right: 0;
  background: #fff; color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(3,31,115,0.22); min-width: 250px; padding: 8px; z-index: 30;
  cursor: default;
}
.user.open .user-menu { display: block; }
.user-menu .um-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.user-menu .um-head .n { font-size: 13.5px; font-weight: 700; color: var(--navy); }
.user-menu .um-head .r { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.user-menu a, .user-menu button.um-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; font-family: var(--font-body); font-size: 13px; color: var(--ink);
  padding: 9px 12px; border-radius: var(--radius-sm); text-decoration: none; cursor: pointer;
}
.user-menu a:hover, .user-menu button.um-item:hover { background: var(--surface-tint); }
.user-menu .um-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.user-menu .um-item.danger { color: var(--danger-text); }

/* ---- Gradient hero band + wave divider (matches nswmealsonwheels.org.au) ---- */
.bg-mow-gradient {
  background-color: var(--gradient);
  background-image: linear-gradient(120deg, var(--navy-deep) 0%, var(--gradient) 45%, var(--teal) 130%);
}
.hero { position: relative; color: #fff; padding-top: 72px; padding-bottom: 96px; }
/* hero-inner uses the same max-width + 24px gutter box model as .shell, so
   the hero H1 lines up exactly with page H2s underneath at wide viewports. */
.hero-inner {
  max-width: 1240px; margin: 0 auto; padding: 40px 24px 0;
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: flex-start;
}
.hero-text { min-width: 0; }
.hero-aside { min-width: 0; max-width: 420px; }
.hero-aside:empty { display: none; }
.hero-aside .alert { margin-bottom: 0; }
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } .hero-aside { max-width: none; } }
.hero .breadcrumb { font-size: 12px; color: rgba(255,255,255,0.8); margin-bottom: 10px; }
.hero .breadcrumb a { text-decoration: none; color: #fff; opacity: 0.9; }
.hero h1 { font-size: 38px; font-weight: var(--fw-bold); margin: 0 0 8px; color: #fff; }
.hero .sub { font-size: 17px; line-height: 1.5; color: rgba(255,255,255,0.9); max-width: 660px; }
.divider.wave { position: absolute; left: 0; right: 0; bottom: -1px; height: 96px; line-height: 0; }
.divider.wave svg { width: 100%; height: 100%; display: block; }

/* ---- Layout ---- */
.shell { max-width: 1240px; margin: 0 auto; padding: 26px 24px 70px; }
/* .page-head retained for any page still using an in-shell header */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }
.page-head h1 { color: var(--navy); font-size: 34px; font-weight: var(--fw-bold); margin: 0 0 6px; }
.page-head .sub { color: var(--muted); font-size: 16px; max-width: 620px; }
.breadcrumb { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.breadcrumb a { text-decoration: none; color: var(--teal); }

.search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 10px 18px; width: 340px; max-width: 100%; }
.search input { border: none; outline: none; font-size: 14px; width: 100%; font-family: var(--font-body); background: transparent; }
.search svg { flex-shrink: 0; opacity: 0.5; }

/* ---- Shared "contact a person" popup (Call / Email / Teams + portal message) ---- */
/* Always stacks above every other modal-overlay (info popups, the Support
   FAB, consultation popups) since it can be opened from within any of them. */
#contactPersonModal { z-index: 1100; }
.contact-action-row { display: flex; gap: 8px; margin-bottom: 4px; }
.contact-action {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--navy); background: var(--surface-tint);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 8px; text-decoration: none;
}
.contact-action:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-pale-bg); }

/* ---- Floating Support button + compact popup (bottom-right, every chrome page) ---- */
.modal-fab { max-width: 620px; }
.modal-lg { max-width: 760px; }
.fab-status-line { display: flex; align-items: center; gap: 8px; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.fab-status-line.on { background: var(--teal-pale-bg); color: var(--teal-hover); }
.fab-status-line.off { background: var(--surface-tint); color: var(--muted); }
.fab-status-line a { color: inherit; font-weight: 700; text-decoration: underline; }
.fab-status-line .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fab-status-line.on .status-dot { background: #2E9E5B; }
.fab-status-line.off .status-dot { background: var(--muted); }
.fab-nso {
  display: flex; align-items: center; gap: 12px; margin: 14px 0 16px;
  background: linear-gradient(120deg, var(--navy-deep), var(--teal) 160%); color: #fff;
  border-radius: var(--radius); padding: 13px 16px;
}
/* ---- Staff presence dot — small status badge on any avatar, reference-
   build mock of an Outlook-calendar-synced online indicator. ---- */
.presence-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; bottom: -2px; right: -2px; background: var(--muted); }
.presence-dot.on { background: #2E9E5B; }
.fab-nso .fn-avatar, .fab-contact-tile .fc-avatar, .navatar, .primary-contact .pc-avatar, .staff-card .sc-avatar, .im-author .ia-avatar { position: relative; }
.fab-nso .fn-avatar { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.fab-nso .fn-info { flex: 1; min-width: 0; }
.fab-nso .fn-flag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--teal-pale); }
.fab-nso .fn-name { font-size: 15px; font-weight: 700; }
.fab-nso .fn-role { font-size: 11.5px; color: rgba(255,255,255,0.85); }
.fab-nso .fn-actions { display: flex; gap: 6px; flex-shrink: 0; }
.fab-nso .fn-actions a, .fab-nso .fn-actions button {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); background: transparent;
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none;
}
.fab-nso .fn-actions a:hover, .fab-nso .fn-actions button:hover { background: rgba(255,255,255,0.18); }

.fab-grid-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 16px 0 8px; display: flex; align-items: center; gap: 6px; }
.fab-grid-label:first-of-type { margin-top: 0; }

.fab-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fab-contact-tile {
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  padding: 10px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff;
  cursor: pointer; font-family: var(--font-body);
}
.fab-contact-tile:hover { border-color: var(--teal); background: var(--teal-pale-bg); }
.fab-contact-tile .fc-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--teal-pale); color: var(--teal); display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; }
.fab-contact-tile .fc-name { font-size: 11px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.fab-contact-tile .fc-cat { font-size: 9px; color: var(--muted); line-height: 1.25; }

.fab-section-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fab-section-tile {
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
  padding: 14px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-tint);
  cursor: pointer; font-family: var(--font-body);
}
.fab-section-tile:hover { border-color: var(--teal); background: var(--teal-pale-bg); }
.fab-section-tile svg { color: var(--teal); }
.fab-section-tile .fs-label { font-size: 11px; font-weight: 700; color: var(--navy); line-height: 1.25; }

.fab-back { background: none; border: none; color: var(--teal); font-weight: 700; font-size: 12px; cursor: pointer; padding: 0 0 14px; display: flex; align-items: center; gap: 4px; }

/* ---- Full staff directory + in-drawer contact view (Support drawer) ---- */
.fab-directory-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.fab-directory-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; padding: 9px 12px;
  cursor: pointer; font-family: var(--font-body);
}
.fab-directory-row:hover { border-color: var(--teal); background: var(--teal-pale-bg); }
.fab-directory-row .fc-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--teal-pale); color: var(--teal); display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; flex-shrink: 0; position: relative; }
.fdr-info { min-width: 0; }
.fdr-name { display: block; font-size: 12.5px; font-weight: 700; color: var(--navy); }
.fdr-role { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.3; }
.fab-contact-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fab-contact-header .fc-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--teal-pale); color: var(--teal); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; flex-shrink: 0; position: relative; }
.fab-contact-header .fdr-name { font-size: 16px; }
.fab-contact-header .fdr-role { font-size: 12px; }
@media (max-width: 560px) { .fab-contact-grid, .fab-section-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Floating Support button (bottom-right, every chrome page) ---- */
.support-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display: flex; align-items: center; gap: 8px; background: var(--teal); color: #fff; border: none;
  border-radius: 999px; padding: 14px 20px; font-family: var(--font-body); font-size: 14px; font-weight: 700;
  cursor: pointer; box-shadow: 0 10px 26px rgba(3,31,115,0.28); transition: background .15s ease, transform .15s ease;
}
.support-fab:hover { background: var(--teal-hover); transform: translateY(-2px); }
@media (max-width: 640px) { .support-fab span { display: none; } .support-fab { padding: 14px; right: 16px; bottom: 16px; } }

/* ---- Onboarding modal (shows on first entry to the dashboard) ---- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(3,31,115,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
}
.modal-overlay.hide { display: none; }
.modal {
  background: #fff; border-radius: var(--radius); padding: 0;
  max-width: 560px; width: 100%; position: relative; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  transition: max-width .2s ease, max-height .2s ease;
}
/* Every popup can be expanded (wider + taller) via a button next to Close —
   .modal-lg sets a fixed size at open time; .expanded is the user's own
   toggle and always wins, since a two-pane .modal-wide needs much more
   width than a single-pane modal does. */
/* Expanded fills most of the page but keeps a clear margin of backdrop on
   every side, so the overlay stays clickable (click-out to close) and the
   popup reads as a layer above the page rather than a new page. */
.modal.expanded { max-width: 94vw; width: 94vw; max-height: 90vh; height: 90vh; }
.modal.modal-wide.expanded { max-width: 94vw; width: 94vw; max-height: 90vh; height: 90vh; }
/* The close/expand buttons live outside the scrollable region (a flex
   sibling of .info-modal-body, not a descendant of it) so they stay pinned
   to the modal's top-right corner no matter how far the content scrolls. */
.modal > .info-modal-body, .modal > .modal-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 28px 30px; }
.modal .close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  border: none; background: var(--surface-tint); color: var(--navy); cursor: pointer; font-size: 18px;
  line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease;
  z-index: 2; flex-shrink: 0;
}
.modal .close:hover { background: var(--border); color: var(--navy); }
.modal-expand-btn {
  position: absolute; top: 14px; right: 56px; width: 32px; height: 32px; border-radius: 50%;
  border: none; background: var(--surface-tint); color: var(--navy); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s ease;
  z-index: 2; flex-shrink: 0;
}
.modal-expand-btn:hover { background: var(--border); }
@media (max-width: 760px) { .modal-expand-btn { display: none; } }
/* Near-full-screen on mobile — a small centred dialog wastes most of a
   phone viewport and leaves little room for actual content. */
@media (max-width: 640px) {
  .modal-overlay { padding: 8px; }
  .modal, .modal.expanded, .modal.modal-wide, .modal.modal-wide.expanded {
    max-width: 100%; width: 100%; max-height: 96vh; height: 96vh;
  }
}
.modal h2 { color: var(--navy); font-size: 24px; font-weight: var(--fw-bold); margin: 0 0 10px; padding-right: 80px; }
.modal p { font-size: 14px; color: var(--ink); line-height: 1.6; margin: 0 0 14px; }
.modal ul { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 10px; }
.modal li { font-size: 13.5px; color: var(--ink); display: flex; align-items: flex-start; gap: 9px; }
.modal li svg { color: var(--teal); flex-shrink: 0; margin-top: 2px; }
.modal .btn-primary { width: 100%; justify-content: center; }

/* ---- Alert banner ---- */
.alert {
  display: flex; align-items: center; gap: 14px;
  background: var(--warning-bg); border: 1px solid #F3D9C0;
  border-radius: var(--radius); padding: 16px 20px; margin-bottom: 26px;
}
.alert .icon { color: var(--warning-text); flex-shrink: 0; }
.alert .txt { flex: 1; }
.alert .txt .t { font-weight: 700; color: var(--warning-text); font-size: 15px; }
.alert .txt .d { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.alert .cta { font-size: 13px; font-weight: 700; color: var(--navy); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 16px; text-decoration: none; white-space: nowrap; }

/* ---- Masonry grid ---- */
.masonry { column-count: 3; column-gap: 20px; }
/* ---- Dashboard: explicit 3-column layout (not column-count) so each card
   lands in a specific, intentional column rather than being auto-balanced
   by height. ---- */
.dashboard-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.dash-col .mcard { margin-bottom: 0; }
@media (max-width: 1000px) { .dashboard-cols { grid-template-columns: repeat(2, 1fr); } .dash-col:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .dashboard-cols { grid-template-columns: 1fr; } }
/* ---- News Overview: dashboard-style cards, but a true row-major 3-col
   grid (not column-count) so reading order is strictly left-to-right,
   top-to-bottom in the order the cards appear in the markup. ---- */
.news-overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.news-overview-grid .mcard { margin-bottom: 0; }
@media (max-width: 1000px) { .news-overview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .news-overview-grid { grid-template-columns: 1fr; } }
.mcard {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; margin-bottom: 16px; break-inside: avoid; -webkit-column-break-inside: avoid; display: block;
}
.mcard-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mcard-head .mi { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--cream); color: var(--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mcard-head h2 { font-size: 16px; font-weight: var(--fw-bold); color: var(--navy); margin: 0; }
.mcard-head .count { margin-left: auto; font-size: 11.5px; color: var(--muted); background: var(--surface-tint); padding: 3px 10px; border-radius: 999px; }

.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-item { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--radius-sm); background: var(--surface-tint); text-decoration: none; color: var(--ink); transition: background .15s ease; border: none; cursor: pointer; font-family: inherit; text-align: left; width: 100%; }
.quick-item:hover { background: var(--cream); }
.quick-item svg { color: var(--navy); }
.quick-item span { font-size: 13px; font-weight: 700; }

.row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--ink); width: 100%; background: none; border-left: none; border-right: none; border-top: none; font-family: inherit; text-align: left; cursor: pointer; }
.row:last-child { border-bottom: none; padding-bottom: 0; }
.row:first-child { padding-top: 0; }
.row .rt { flex: 1; font-size: 15px; font-weight: 600; }
.row .rt .meta { color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 3px; }
.tag { font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.tag.warn { background: var(--warning-bg); color: var(--warning-text); }
.tag.ok { background: var(--success-bg); color: var(--success-text); }
.tag.neutral { background: var(--cream); color: var(--navy); }
.tag.lock { background: var(--surface-tint); color: var(--muted); border: 1px solid var(--border); }

/* ---- Training module progress bar ---- */
.module-progress { margin-top: 10px; }
.module-progress-bar { height: 6px; border-radius: 999px; background: var(--surface-tint); overflow: hidden; }
.module-progress-fill { height: 100%; background: var(--teal); border-radius: 999px; }
.module-progress-label { display: block; font-size: 11.5px; color: var(--muted); margin-top: 5px; }

.deadline-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.deadline-row:last-child { border-bottom: none; padding-bottom: 0; }
.deadline-row:first-child { padding-top: 0; }
.deadline-row .dt { font-size: 14px; font-weight: 600; }
.deadline-row .dd { font-size: 13px; font-weight: 700; }
.dd.due { color: var(--danger-text); }
.dd.ok { color: var(--muted); font-weight: 400; }

.nso-row { display: flex; align-items: center; gap: 14px; }
.navatar { width: 46px; height: 46px; border-radius: 50%; background: var(--teal-pale); color: var(--teal); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.nso-row .nn { font-size: 15px; font-weight: 700; }
.nso-row .nr { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.nso-cta { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 700; color: #fff; background: var(--teal); border-radius: var(--radius-sm); padding: 10px 16px; text-decoration: none; text-align: center; width: 100%; transition: background .15s ease; }
.nso-cta:hover { background: var(--teal-hover); }

.snapshot p { font-size: 13.5px; color: var(--ink); line-height: 1.6; margin: 0 0 14px; }
.snapshot .stat-row { display: flex; gap: 14px; margin-bottom: 16px; }
.snapshot .stat { flex: 1; background: var(--surface-tint); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.snapshot .stat .n { font-family: var(--font-heading); font-size: 26px; font-weight: 700; color: var(--navy); }
.snapshot .stat .l { font-size: 11px; color: var(--muted); margin-top: 2px; }
.snapshot a.link { font-size: 13px; font-weight: 700; color: var(--teal); text-decoration: none; }

.training-card .thumb { background: linear-gradient(135deg, var(--gradient), var(--teal)); border-radius: var(--radius-sm); height: 110px; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 14px; }
.training-card .tdate { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.training-card .ttitle { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.ttitle-btn { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0; font-family: var(--font-body); color: var(--navy); cursor: pointer; }
.ttitle-btn:hover { color: var(--teal); text-decoration: underline; }
.training-card .tdesc { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.tcta { display: inline-block; font-size: 13px; font-weight: 700; color: var(--navy); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 16px; text-decoration: none; cursor: pointer; background: none; font-family: var(--font-body); }
.tcta.registered { background: var(--success-bg); color: var(--success-text); border-color: transparent; }

/* ---- Featured "next session" banner (compact, horizontal) ---- */
.next-session { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; }
.next-session .thumb-lg { height: 100%; min-height: 120px; margin: 0; }
.thumb-lg { background: linear-gradient(135deg, var(--gradient), var(--teal)); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: #fff; }

/* ---- Shared card thumbnail (event/training/news cards) — a base rule so
   any .n-thumb gets the gradient treatment regardless of its parent card. ---- */
.n-thumb { height: 90px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--gradient), var(--teal)); margin-bottom: 12px; display: flex; align-items: center; justify-content: center; color: #fff; }
.res-card-hero .n-thumb { height: 190px; }
.ns-flag { font-size: 11.5px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.lh-title { font-size: 21px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.lh-desc { font-size: 13.5px; color: var(--muted); margin-bottom: 10px; }
.ns-agenda { font-size: 12.5px; color: var(--ink); background: var(--surface-tint); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 14px; }
@media (max-width: 640px) { .next-session { grid-template-columns: 1fr; } .next-session .thumb-lg { min-height: 90px; } }

/* ---- Learning lower row: modules / reading / suggest, three-up ---- */
.learn-lower { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; margin-top: 8px; }
.learn-lower .section-title { margin-top: 0; }
@media (max-width: 900px) { .learn-lower { grid-template-columns: 1fr; } }

/* ---- Netflix-style horizontal carousels (upcoming webinars, past recordings) ---- */
.carousel-nav-wrap { position: relative; }
.carousel { display: flex; gap: 16px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel-card { flex: 0 0 240px; scroll-snap-align: start; }
.carousel-arrow {
  position: absolute; top: 45%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff; color: var(--navy); display: flex; align-items: center;
  justify-content: center; cursor: pointer; box-shadow: 0 8px 20px rgba(3,31,115,0.16); z-index: 5;
  transition: opacity .15s ease, background .15s ease;
}
.carousel-arrow:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.carousel-arrow.prev { left: -6px; }
.carousel-arrow.next { right: -6px; }
.carousel-arrow.hide { opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .carousel-arrow { display: none; } }
.carousel .training-card, .carousel .rec-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; height: 100%; }
.rec-card .thumb-sm { background: linear-gradient(135deg, var(--teal), var(--gradient)); border-radius: var(--radius-sm); height: 90px; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 12px; }
.rec-card .rtitle { font-size: 14px; }
.rec-card .rmeta { margin-top: 8px; }

/* ---- Training-topic suggestion box ---- */
.suggest-box { max-width: 560px; }
.suggest-box .field textarea { min-height: 56px; }
.suggest-thanks { background: var(--success-bg); color: var(--success-text); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; }
.suggest-thanks.hide { display: none; }
.suggest-box form.hide { display: none; }

/* ---- Local media / auto-fed alerts feed (News) ---- */
.feed-header { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }
.feed-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success-text); flex-shrink: 0; animation: feed-pulse 2s ease-in-out infinite; }
@keyframes feed-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ============ News page (Google-News style) ============ */
.news-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .news-layout { grid-template-columns: 1fr; } }

.news-colhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.news-colhead h2 { font-size: 20px; font-weight: var(--fw-bold); color: var(--navy); margin: 0; }
.news-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 18px; }
.news-side .news-panel { padding: 6px 16px; }

/* source line: favicon chip + source name */
.src { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--navy); }
.favicon { width: 18px; height: 18px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.n-meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; }

/* hero article */
.news-hero { display: block; text-decoration: none; color: inherit; padding: 16px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.news-hero .n-thumb { height: 150px; }
.news-hero .n-title { font-size: 20px; font-weight: 700; color: var(--navy); margin: 8px 0 6px; line-height: 1.25; }
.news-hero .n-blurb { font-size: 13.5px; color: var(--ink); line-height: 1.55; margin: 0; }

/* standard article row */
.news-item { display: block; text-decoration: none; color: inherit; padding: 14px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.news-item:last-child { border-bottom: none; }
.news-item .n-title { font-size: 15px; font-weight: 700; color: var(--navy); margin: 6px 0 5px; line-height: 1.3; }
.news-item .n-blurb { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0; }
.news-hero:hover .n-title, .news-item:hover .n-title { color: var(--teal); }

/* slide-in article drawer */
.drawer-overlay { position: fixed; inset: 0; background: rgba(3,31,115,0.4); z-index: 100; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.side-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 460px; max-width: 92vw; background: #fff; z-index: 101;
  box-shadow: -12px 0 32px rgba(3,31,115,0.18); transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; }
.side-drawer.open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: flex-end; padding: 14px 18px 0; position: relative; }
.drawer-close { border: none; background: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px; }
.drawer-body { padding: 4px 26px 34px; }
.drawer-body .n-thumb { height: 170px; margin: 6px 0 16px; }
.drawer-body h2 { font-size: 24px; font-weight: 700; color: var(--navy); margin: 10px 0 8px; line-height: 1.25; }
.drawer-body p { font-size: 14px; line-height: 1.65; color: var(--ink); margin: 0 0 13px; }
.drawer-src { display: flex; align-items: center; gap: 10px; margin: 12px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; align-items: center; }
.share-label { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; width: 100%; }
.share-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--navy); cursor: pointer; text-decoration: none; }
.share-btn:hover { border-color: var(--teal); color: var(--teal); }

/* ---- Shared "Add to calendar" control (see portal.js — self-rendering,
   used consistently everywhere an event appears) ---- */
.ics-add { position: relative; display: inline-block; }
.ics-add-btn {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--navy);
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; padding: 9px 12px 9px 11px;
  cursor: pointer; font-family: var(--font-body); transition: border-color .15s ease, color .15s ease;
}
.ics-add-btn:hover { border-color: var(--teal); color: var(--teal); }
.ics-add-btn svg:first-child { flex-shrink: 0; }
.ics-add-btn svg:last-child { flex-shrink: 0; opacity: .55; margin-left: 1px; }
.ics-add-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 210px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(3,31,115,0.16);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.ics-add-menu.hide { display: none; }
.ics-add-opt {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; background: none; border: none;
  cursor: pointer; font-family: var(--font-body); text-align: left; width: 100%;
}
.ics-add-opt svg { flex-shrink: 0; color: var(--teal); }
.ics-add-opt:hover { background: var(--surface-tint); color: var(--navy); }
.drawer-source-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--teal); text-decoration: none; }
.side-drawer .fab-contact-grid, .side-drawer .fab-section-grid { grid-template-columns: repeat(2, 1fr); }
.announce-btn { font-size: 12.5px; padding: 8px 14px; }
/* compose-announcement fields reuse .field */
.announce-form.hide, .announce-thanks.hide { display: none; }
.announce-thanks { background: var(--success-bg); color: var(--success-text); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; }

/* ---- Section headers within a page (non-card) ---- */
.section-title { display: flex; align-items: center; gap: 10px; margin: 24px 0 12px; }
.section-title:first-child { margin-top: 0; }
.section-title h2 { font-size: 22px; font-weight: var(--fw-bold); color: var(--navy); margin: 0; }
.section-title .desc { font-size: 13px; color: var(--muted); }

/* ---- Generic same-page category filter (see portal.js) ---- */
.cat-hidden { display: none !important; }

/* ---- Category tabs / pills ---- */
.tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.tab { background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.tab.active { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.tab.active:hover { background: var(--navy-hover); border-color: var(--navy-hover); }

/* ============ Connect page: Filter/Overview sticky control bar ============
   A trial design replacing the plain tab row: a small Overview/Filter
   toggle sits above a row that swaps between the section pills and an
   inline filter row for whichever section is active. Sticks just under
   the floating topbar pill as the page scrolls. */
.cc-bar {
  position: sticky; top: 84px; z-index: 25; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; box-shadow: 0 8px 22px rgba(3,31,115,0.1);
}
.cc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cc-mode-toggle { flex-shrink: 0; }
.cc-mode-toggle .dir-toggle-btn { padding: 7px 16px; font-size: 12.5px; }
.cc-pills, .cc-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 auto; min-width: 0; }
.cc-filters.hide, .cc-pills.hide { display: none; }
.cc-bar[data-mode="overview"] .cc-pills { animation: ccRowIn .2s ease; }
.cc-bar[data-mode="filter"] .cc-filters { animation: ccRowIn .2s ease; }
@keyframes ccRowIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.cc-filter-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cc-filter-group.hide { display: none; }
.cc-field input[type=text], .cc-field select {
  font-family: var(--font-body); font-size: 13px; color: var(--ink); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 16px; background: #fff;
}
.cc-field input[type=text] { min-width: 240px; }
.cc-clear { border-radius: 999px; padding: 9px 16px; font-size: 12.5px; }

.cc-tag-dd { position: relative; }
.cc-tag-dd-btn {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--navy);
  background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; cursor: pointer; font-family: var(--font-body);
}
.cc-tag-dd-btn:hover { border-color: var(--teal); color: var(--teal); }
.cc-tag-dd-btn.active { background: var(--teal-pale-bg); border-color: var(--teal); color: var(--teal); }
.cc-tag-dd-btn svg { opacity: 0.6; transition: transform .15s ease; }
.cc-tag-dd-btn.active svg { transform: rotate(180deg); }
.cc-tag-dd-menu {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 260px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 14px 30px rgba(3,31,115,0.16);
  padding: 12px; flex-wrap: wrap; gap: 6px;
}
.cc-tag-dd-menu.open { display: flex; }

/* Discussions/Escalated content, now that filters live in the sticky bar
   instead of a left rail: main content + an optional right-hand rail. */
.connect-main-side { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .connect-main-side { grid-template-columns: 1fr; } }

@media (max-width: 900px) { .cc-bar { top: 78px; } }
@media (max-width: 640px) {
  .cc-bar { position: static; }
  .cc-field input[type=text] { min-width: 0; width: 100%; }
}

/* ---- Tag-filter banner (topbar search → resources.html?tag=) ---- */
.tag-filter-banner { background: var(--teal-pale-bg); color: var(--teal-hover); border-radius: var(--radius-sm); padding: 10px 16px; font-size: 13px; margin-bottom: 16px; }
.tag-filter-banner.hide { display: none; }
.im-note.hide { display: none; }
.tag-filter-banner a { color: var(--navy); font-weight: 700; text-decoration: underline; }

/* ---- Filter bar ---- */
/* ---- Shared 3-column [filters | main | side widgets] layout, used by
   Resources, Connect's Discussions, and Updates & Advocacy. One set of
   classes so all three stay visually consistent. ---- */
.sidebar-layout { display: grid; grid-template-columns: 220px 1fr 280px; gap: 24px; align-items: start; }
.sidebar-filters { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.sidebar-filters .field { margin-bottom: 12px; }
.sidebar-main { min-width: 0; }
.sidebar-side { display: flex; flex-direction: column; gap: 16px; }
.sidebar-side .mcard { margin-bottom: 0; }
.sidebar-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.sidebar-tag-chip { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--ink); cursor: pointer; font-family: var(--font-body); }
.sidebar-tag-chip.active { background: var(--teal); border-color: var(--teal); color: #fff; }
@media (max-width: 1100px) { .sidebar-layout { grid-template-columns: 220px 1fr; } .sidebar-side { grid-column: span 2; flex-direction: row; } .sidebar-side .mcard { flex: 1; } }
@media (max-width: 900px) { .sidebar-layout { grid-template-columns: 1fr; } .sidebar-side { grid-column: 1; flex-direction: column; } }
/* Same [filters | main] pattern, no right-side widgets column (e.g. Submissions). */
.sidebar-layout-2col { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .sidebar-layout-2col { grid-template-columns: 1fr; } }

/* ---- Reusable empty-state + suggestion CTA: every filtered list on the
   site (Resources, Discussions, Escalated Issues, Training, Promote) shows
   this instead of a bare "no results" note, so a dead end always offers a
   specific next action. ---- */
.empty-state { text-align: center; background: var(--surface-tint); border: 1px dashed var(--border); border-radius: var(--radius); padding: 26px 20px; margin-bottom: 16px; }
.empty-state.hide { display: none; }
.empty-state .es-msg { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; }
.empty-state .es-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---- "More filters" disclosure inside a sidebar-filters panel: keeps
   search + one primary filter always visible, everything else tucked away
   until asked for. ---- */
.more-filters-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 12.5px; font-weight: 700; color: var(--ink); cursor: pointer; margin-bottom: 12px; }
.more-filters-toggle:hover { border-color: var(--teal); color: var(--teal); }
.more-filters-toggle .mf-count { background: var(--teal); color: #fff; border-radius: 999px; padding: 1px 7px; font-size: 10.5px; margin-left: 6px; }
.more-filters-toggle .mf-count.hide { display: none; }
.more-filters-toggle .chev { transition: transform .15s ease; margin-left: auto; }
.more-filters-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.more-filters-panel.hide { display: none; }
/* Inline variant for the Connect filter bar's horizontal row layout. */
.cc-filter-group .more-filters-toggle { width: auto; margin-bottom: 0; border-radius: 999px; padding: 8px 14px; }
.cc-filter-group .more-filters-panel { flex: 1 1 100%; margin-top: 0; padding-top: 10px; border-top: none; }

/* ---- Resource cards (Resources & Templates, grid layout) ---- */
.res-section { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 24px; }
.res-section .section-title { margin-top: 0; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 8px; }
.res-card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.res-card.hide { display: none; }

/* ---- Minimal tile grid: dashboard popups that should show just a
   clickable title (Find a resource, See what's changed) — 3 columns. ---- */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile-grid .hide { display: none; }
.popup-tile {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 64px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; text-decoration: none; color: var(--navy); font-size: 13px; font-weight: 700; line-height: 1.3;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.popup-tile:hover { border-color: var(--teal); background: var(--teal-pale-bg); color: var(--teal); }
.popup-tile-dated { flex-direction: column; gap: 4px; }
.popup-tile-dated .pt-date { font-size: 10.5px; font-weight: 400; color: var(--muted); }
.popup-tile-dated:hover .pt-date { color: inherit; }
@media (max-width: 560px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
.res-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.res-card-hero { margin-bottom: 14px; }
.res-card-hero .rtitle { font-size: 19px; }
.res-card .rhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.res-card .ri { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--cream); color: var(--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.res-card .rtitle { font-size: 15px; font-weight: 700; margin: 0 0 3px; }
.res-card .rdesc { font-size: 12.5px; color: var(--muted); margin: 0; }
.res-card .rmeta { display: flex; gap: 12px; margin-top: 12px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.res-card .rtags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.rtags .tag { cursor: pointer; transition: background .15s ease, color .15s ease; }
.rtags .tag:hover { background: var(--teal); color: #fff; }

/* ---- Forms (Ask for Help, service details) ---- */
.form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.field .hint { font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: 4px; }
/* Tighter variant for popup forms (e.g. the Escalate an issue / Member Voice
   popup) — smaller field gaps and checkboxes that align with the first line
   of wrapped label text instead of floating mid-block. */
.field-tight { margin-bottom: 9px; }
.field-tight .checkbox-row { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; line-height: 1.4; }
.field-tight .checkbox-row input { width: auto; flex: 0 0 auto; margin-top: 3px; }
.field-tight .checkbox-row span { flex: 1 1 auto; min-width: 0; }
.field-tight .checkbox-row + .checkbox-row { margin-top: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 13.5px; color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: #fff;
}
.field textarea { resize: vertical; min-height: 100px; }
.field.readonly input { background: var(--surface-tint); color: var(--muted); }
.field.hide { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.field-check-grid { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.field-check-grid label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; }
@media (max-width: 560px) { .field-row-4 { grid-template-columns: repeat(2, 1fr); } }
.btn-primary { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #fff; background: var(--teal); border: none; border-radius: var(--radius-sm); padding: 11px 20px; cursor: pointer; text-decoration: none; transition: background .15s ease; }
.btn-primary:hover { background: var(--teal-hover); }
.btn-secondary { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--navy); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 20px; cursor: pointer; text-decoration: none; transition: background .15s ease, border-color .15s ease; }
.btn-secondary:hover { background: var(--surface-tint); border-color: var(--navy); }

/* ---- FAQ accordion (native details/summary, no JS needed) ---- */
.faq-list { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list details:last-child { border-bottom: none; }
.faq-list summary { padding: 15px 18px; font-size: 13.5px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 18px; color: var(--teal); font-weight: 400; }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list .faq-a { padding: 0 18px 16px; font-size: 13px; color: var(--muted); line-height: 1.6; }

/* ---- Generic 2-column layout (Escalated Issues: list + submit form) ---- */
.two-col-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .two-col-layout { grid-template-columns: 1fr; } }

/* ---- Directory / people cards (Connect & Member Voice) ---- */
.dir-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.dir-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: flex; gap: 12px; align-items: flex-start; }
.dir-card .davatar { width: 40px; height: 40px; border-radius: 50%; background: var(--teal-pale); color: var(--teal); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.dir-card .dname { font-size: 13.5px; font-weight: 700; margin: 0 0 2px; }
.dir-card .dregion { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.dir-card .dtags { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- Support: primary NSO contact (standout) + staff-by-category grid ---- */
.primary-contact { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
  background: linear-gradient(120deg, var(--navy-deep), var(--teal) 160%); color: #fff;
  border-radius: var(--radius); padding: 22px 24px; margin-bottom: 8px; }
.primary-contact .pc-avatar { width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,0.18); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; flex-shrink: 0; }
.primary-contact .pc-flag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--teal-pale); }
.primary-contact .pc-name { font-size: 21px; font-weight: 700; margin: 2px 0; }
.primary-contact .pc-role { font-size: 13px; color: rgba(255,255,255,0.85); }
.primary-contact .pc-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.primary-contact .pc-actions a, .primary-contact .pc-actions button {
  font-size: 13px; font-weight: 700; padding: 10px 18px; border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; text-align: center; border: 1px solid rgba(255,255,255,0.5); background: transparent; color: #fff; }
.primary-contact .pc-actions .pc-primary { background: #fff; color: var(--navy); border-color: #fff; }
@media (max-width: 700px) { .primary-contact { grid-template-columns: 1fr; text-align: center; } .primary-contact .pc-avatar { margin: 0 auto; } }

.staff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.staff-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.staff-card .sc-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--teal); margin-bottom: 8px; }
.staff-card .sc-person { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.staff-card .sc-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--teal-pale); color: var(--teal); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.staff-card .sc-name { font-size: 14px; font-weight: 700; color: var(--navy); }
.staff-card .sc-role { font-size: 11.5px; color: var(--muted); }
.staff-card .sc-btn { width: 100%; font-size: 12.5px; font-weight: 700; padding: 9px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #fff; color: var(--navy); cursor: pointer; }
.staff-card .sc-btn:hover { border-color: var(--teal); color: var(--teal); }
.staff-card .sc-btn-row { display: flex; gap: 8px; }
.staff-card .sc-btn-row .sc-btn { flex: 1; }
.staff-card .sc-email { flex: 0 0 auto; width: 38px; display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 9px 0; }

/* ============ Directory page (find-a-service, with map) ============ */
.dir-filter-bar { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.dfb-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.dfb-row + .dfb-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.dfb-row .field { margin-bottom: 0; }
.dfb-row .field label { font-size: 12px; display: block; margin-bottom: 6px; }
.dfb-field-layers { flex: 1; min-width: 260px; }
.layer-toggle-list { display: flex; flex-wrap: wrap; gap: 8px; }
.layer-toggle {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--navy);
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: #fff; cursor: pointer; user-select: none;
}
.layer-toggle input { accent-color: var(--teal); width: 14px; height: 14px; cursor: pointer; }
.layer-toggle.on { border-color: var(--teal); background: var(--teal-pale-bg); }
.map-legend { margin-top: 10px; }
.map-legend div + div { margin-top: 4px; }
.dir-body { display: grid; grid-template-columns: 380px 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .dir-body { grid-template-columns: 1fr; } }
.finder-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.finder-panel .field { margin-bottom: 14px; }
.finder-panel .field label { font-size: 12px; }
.dir-filter-bar input[type=text] { width: 100%; font-family: var(--font-body); font-size: 13.5px; color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.radio-row, .check-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-opt { font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--navy); cursor: pointer; user-select: none; }
.pill-opt.on { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.finder-count { font-size: 12px; color: var(--muted); margin: 4px 0 10px; }
.result-list { display: flex; flex-direction: column; gap: 10px; max-height: 640px; overflow-y: auto; }
.result-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; cursor: pointer; }
.result-card:hover, .result-card.active { border-color: var(--teal); box-shadow: 0 3px 12px rgba(3,31,115,0.08); }
.result-card.hide { display: none; }
.rc-name { font-size: 14.5px; font-weight: 700; color: var(--navy); }
.rc-region { font-size: 12px; color: var(--muted); margin: 2px 0 8px; }
.rc-dist { font-weight: 700; color: var(--teal); }
.rc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.rc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-actions a, .rc-actions button { font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; border: 1px solid var(--border); background: #fff; color: var(--navy); }
.rc-actions .rc-primary { background: var(--teal); color: #fff; border-color: transparent; }
.rc-actions .rc-primary:hover { background: var(--teal-hover); }
#map { height: 640px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-tint); }
.map-fallback { height: 640px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-tint); display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px; color: var(--muted); font-size: 13px; }
.map-popup { font-size: 12.5px; line-height: 1.5; }
.map-popup a { color: var(--teal); font-weight: 700; }
.leaflet-tooltip.map-dist-label { font-size: 11px; font-weight: 700; color: var(--navy); background: #fff; border-color: var(--teal); }

/* ---- Directory: switch between member services and individuals ---- */
#viewServices.hide, #viewIndividuals.hide { display: none; }
.dir-toggle { display: inline-flex; gap: 4px; background: var(--surface-tint); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.dir-toggle-btn {
  border: none; background: transparent; color: var(--navy); font-family: var(--font-body); font-size: 13px; font-weight: 700;
  padding: 8px 18px; border-radius: 999px; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.dir-toggle-btn:hover { color: var(--teal); }
.dir-toggle-btn.active { background: var(--navy-deep); color: #fff; }
.dir-toggle-btn.active:hover { color: #fff; }
.hero-aside .dir-toggle { background: rgba(255,255,255,0.92); box-shadow: 0 6px 18px rgba(3,31,115,0.18); }
.dir-toggle-sm { flex-shrink: 0; }
.dir-toggle-sm .dir-toggle-btn { padding: 5px 12px; font-size: 11.5px; }

/* Individuals directory: fixed 3-column card grid */
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1000px) { .people-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .people-grid { grid-template-columns: 1fr; } }

/* ---- Our People (My Service tab): stat cards, team breakdown bars, and
   the collapsible reports-to hierarchy list. ---- */
.people-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0 24px; }
.people-stat-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; text-align: center; }
.people-stat-card .n { font-family: var(--font-heading); font-size: 32px; font-weight: 700; color: var(--navy); line-height: 1.1; }
.people-stat-card .l { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
@media (max-width: 640px) { .people-stats { grid-template-columns: repeat(2, 1fr); } .people-stats .people-stat-card:last-child { grid-column: span 2; } }

.team-bar-chart { display: flex; flex-direction: column; gap: 12px; }
.team-bar-row { display: grid; grid-template-columns: 110px 1fr 32px; align-items: center; gap: 10px; font-size: 12.5px; }
.team-bar-track { background: var(--surface-tint); border-radius: 999px; height: 10px; overflow: hidden; }
.team-bar-fill { background: var(--teal); height: 100%; border-radius: 999px; }
.team-bar-row .n { text-align: right; color: var(--muted); font-weight: 700; }
@media (max-width: 560px) { .team-bar-row { grid-template-columns: 84px 1fr 28px; font-size: 11.5px; } }

.people-hier-group { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; background: #fff; }
.people-hier-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; cursor: pointer; font-weight: 700; font-size: 13.5px; min-height: 44px; }
.people-hier-head .chev { transition: transform .15s ease; color: var(--muted); flex-shrink: 0; }
.people-hier-group.open .people-hier-head .chev { transform: rotate(180deg); }
.people-hier-body { display: none; padding: 0 14px 12px; }
.people-hier-group.open .people-hier-body { display: block; }
.people-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.people-row:first-child { border-top: none; }
.people-row .pr-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--teal-pale); color: var(--teal); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.people-row .pr-body { min-width: 0; flex: 1; }
.people-row .pr-name { font-weight: 700; }
.people-row .pr-meta { color: var(--muted); font-size: 11.5px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.people-nested { margin-left: 22px; border-left: 2px solid var(--border); padding-left: 12px; margin-top: 6px; }
@media (max-width: 640px) { .people-nested { margin-left: 12px; padding-left: 8px; } }

/* ---- Simple search + one filter bar (Our People) ---- */
.list-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.list-search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; flex: 1 1 220px; max-width: 340px; }
.list-search svg { color: var(--muted); flex-shrink: 0; }
.list-search input { border: none; outline: none; font-size: 13px; width: 100%; background: transparent; color: var(--ink); }
.list-filter-bar > select { font-size: 12.5px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #fff; color: var(--ink); }
.person-card {
  display: flex; gap: 13px; align-items: flex-start; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.person-av {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--teal); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: var(--fw-bold);
}
.person-body { flex: 1; min-width: 0; }
.person-name { font-size: 14.5px; font-weight: 700; color: var(--navy); }
.person-role { font-size: 12.5px; color: var(--teal); font-weight: 600; margin: 1px 0 2px; }
.person-svc { font-size: 12px; color: var(--muted); line-height: 1.4; margin-bottom: 10px; }
.person-actions button {
  font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent; background: var(--teal); color: #fff;
}
.person-actions button:hover { background: var(--teal-hover); }
.people-empty { grid-column: 1 / -1; font-size: 13px; color: var(--muted); background: var(--surface-tint); border-radius: var(--radius); padding: 18px; text-align: center; }

/* ---- Directory search + tag filter controls (Connect) ---- */
.dir-controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.dir-controls .tabs { margin-bottom: 0; }
.dir-controls .tab { padding: 7px 14px; font-size: 12px; }
.dir-card.dir-hidden { display: none; }

/* ---- Directory teaser card (Connect → links to full directory page) ---- */
.dir-teaser { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; }
.dir-teaser .dt-map { width: 120px; height: 84px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--teal), var(--gradient)); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.dir-teaser h3 { margin: 0 0 4px; color: var(--navy); font-size: 17px; font-weight: var(--fw-bold); }
.dir-teaser p { margin: 0; font-size: 13px; color: var(--muted); }
.dir-teaser .dt-left { display: flex; gap: 18px; align-items: center; }
@media (max-width: 640px) { .dir-teaser { grid-template-columns: 1fr; } .dir-teaser .dt-left { flex-direction: column; text-align: center; } }

/* ---- Discussions: LinkedIn-style post feed + left filter rail ---- */

/* ---- Discussion thread (functional: post / edit / delete own, message
   members) — styled to read like a LinkedIn feed post. ---- */
.thread-list { display: flex; flex-direction: column; gap: 12px; }
.thread-post { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.tp-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.tp-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--teal-pale); color: var(--teal); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; position: relative; }
.tp-who { flex: 1; min-width: 0; }
.tp-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tp-author { font-size: 14px; font-weight: 700; color: var(--navy); }
.tp-mine-flag { font-size: 10px; font-weight: 700; color: var(--teal); background: var(--teal-pale-bg); padding: 1px 7px; border-radius: 999px; }
.tp-headline { font-size: 12px; color: var(--muted); margin-top: 1px; }
.tp-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.tp-meta svg { opacity: .7; flex-shrink: 0; }
.tp-title { font-size: 14.5px; font-weight: 700; color: var(--ink); margin: 2px 0 4px; }
.tp-body { font-size: 13.5px; color: var(--ink); line-height: 1.55; margin: 0 0 8px; }
.tp-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.tp-tag { font-size: 12.5px; font-weight: 700; color: var(--teal); text-decoration: none; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-body); }
.tp-tag:hover { text-decoration: underline; }
.tp-btn { font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--navy); cursor: pointer; text-decoration: none; }
.tp-btn:hover { border-color: var(--teal); color: var(--teal); }
.tp-btn.danger { color: var(--danger-text); }

/* Aggregate reaction/reply counts, LinkedIn-style, above the action row */
.tp-stats { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); padding: 4px 0 8px; border-bottom: 1px solid var(--border); }
.tp-stat-likes { display: inline-flex; align-items: center; gap: 5px; }
.tp-stat-likes .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--teal); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tp-stat-likes .dot svg { width: 9px; height: 9px; }
.tp-stat-replies { background: none; border: none; padding: 0; font-size: 12px; color: var(--muted); cursor: pointer; font-family: var(--font-body); }
.tp-stat-replies:hover { text-decoration: underline; color: var(--navy); }

/* ---- LinkedIn-style action row: icon-only buttons, evenly spaced ---- */
.tp-actions { display: flex; align-items: center; gap: 2px; padding: 2px 0 8px; }
.tp-action {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: none; border: none; padding: 8px 4px; border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; font-family: var(--font-body);
}
.tp-action:hover { background: var(--surface-tint); color: var(--navy); }
.tp-action.on { background: var(--teal-pale-bg); color: var(--teal-hover); }
.tp-action.on svg { stroke-width: 2.75; }
.tp-action-count { font-weight: 700; }

/* Comment composer pill, LinkedIn-style — always visible, no need to click
   "Reply" first. */
.tp-comment-box { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.tp-avatar-sm { width: 30px; height: 30px; border-radius: 50%; background: var(--teal-pale); color: var(--teal); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; flex-shrink: 0; }
.tp-comment-input { flex: 1; border: 1px solid var(--border); border-radius: 999px; padding: 9px 14px; font-size: 13px; font-family: var(--font-body); background: var(--surface-tint); }
.tp-comment-input:focus { outline: none; border-color: var(--teal); background: #fff; }

/* ---- Kebab menu (top-right of the card): Edit/Delete or Message, tucked
   away instead of cluttering the action row. ---- */
.tp-popout { background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tp-popout:hover { background: var(--surface-tint); color: var(--teal); }
.tp-kebab-wrap { position: relative; margin-left: auto; flex-shrink: 0; }
.tp-kebab { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px 8px; font-size: 18px; line-height: 1; border-radius: 50%; }
.tp-kebab:hover { background: var(--surface-tint); color: var(--navy); }
.tp-kebab-menu {
  display: none; position: absolute; top: calc(100% + 2px); right: 0; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 10px 24px rgba(3,31,115,0.16);
  min-width: 160px; padding: 6px; z-index: 5;
}
.tp-kebab-menu.open { display: block; }
.tp-kebab-menu button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 8px 10px; font-size: 13px; color: var(--ink); border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-body); }
.tp-kebab-menu button:hover { background: var(--surface-tint); }
.tp-kebab-menu button.danger { color: var(--danger-text); }
.tp-org { font-weight: 400; color: var(--muted); font-size: 12.5px; }

/* ---- Two-pane consultation/paper popup: the document on the left
   (scrollable), your response or MOW NSW's commentary on the right. The
   right pane gets a tinted card treatment so it reads as a distinct
   register from the document, not a continuation of the same column. ---- */
[data-consult], [data-paper] { cursor: pointer; }
[data-consult]:focus-visible, [data-paper]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.modal.modal-wide { max-width: 960px; }
.modal-wide .consult-layout { flex: 1 1 auto; min-height: 0; padding: 30px 32px 28px; margin-top: 0; }
.consult-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: stretch; transition: grid-template-columns .2s ease; }
.consult-layout.expanded { grid-template-columns: 2.6fr 1fr; }
.consult-pane-left { padding-right: 22px; overflow-y: auto; min-height: 0; }
.consult-pane-left h2 { font-size: 21px; padding-right: 0; }
.consult-pane-left h3 { color: var(--navy); font-size: 20px; font-weight: var(--fw-bold); margin: 0 0 10px; }
.consult-pane-left p { font-size: 13px; color: var(--ink); line-height: 1.65; margin: 0 0 12px; }
.consult-pane-right { display: flex; flex-direction: column; background: var(--cream); border-radius: var(--radius); padding: 20px 22px; overflow-y: auto; min-height: 0; }
.consult-pane-right p { font-size: 13px; color: var(--ink); line-height: 1.65; margin: 0 0 12px; }
.consult-fields-head { font-size: 11.5px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 12px; }
.consult-pane-right form { display: flex; flex-direction: column; gap: 14px; }
.consult-thanks { background: var(--success-bg); color: var(--success-text); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; margin-top: 12px; }
.consult-thanks.hide { display: none; }
.paper-status { margin-bottom: 10px; }
.paper-subhead { font-size: 11.5px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .03em; margin: 18px 0 10px; display: flex; align-items: center; gap: 6px; }
.paper-subhead:first-child { margin-top: 0; }
.paper-subhead svg { color: var(--teal); flex-shrink: 0; }
.paper-quote { margin: 0; padding: 12px 14px; background: #fff; border-left: 3px solid var(--teal); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.paper-quote p { font-size: 13.5px; font-style: italic; color: var(--ink); margin: 0 0 6px; line-height: 1.55; }
.paper-quote cite { font-style: normal; font-size: 12px; font-weight: 700; color: var(--navy); }
@media (max-width: 760px) {
  .consult-layout, .consult-layout.expanded { grid-template-columns: 1fr; overflow-y: auto; }
  .consult-pane-left, .consult-pane-right { overflow-y: visible; }
  .consult-pane-left { padding-right: 0; padding-bottom: 20px; }
  .consult-pane-right { padding: 18px 20px; }
}

/* ---- Word-review-style inline comments on the consultation paper (Have Your Say) ---- */
.consult-pane-left { position: relative; }
.consult-para { position: relative; padding-right: 34px; border-radius: var(--radius-sm); transition: background .15s ease; }
.consult-para:hover { background: var(--teal-pale-bg); }
.consult-para .cp-add {
  position: absolute; top: 2px; right: 0; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff; color: var(--teal); font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s ease;
}
.consult-para:hover .cp-add, .consult-para.has-comments .cp-add { opacity: 1; }
.consult-para.has-comments .cp-add { background: var(--teal); color: #fff; border-color: var(--teal); }
.consult-para .cp-count {
  position: absolute; top: -6px; right: -6px; background: var(--orange); color: #fff; font-size: 9px; font-weight: 700;
  width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.consult-comments { margin-top: 6px; padding: 10px 12px; background: var(--surface-tint); border-left: 3px solid var(--teal); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; display: flex; flex-direction: column; gap: 8px; }
.consult-comments.hide { display: none; }
.cc-item { font-size: 12.5px; }
.cc-item .cc-who { font-weight: 700; color: var(--navy); }
.cc-item .cc-when { color: var(--muted); font-size: 11px; margin-left: 6px; }
.cc-item .cc-text { margin-top: 2px; color: var(--ink); }
.cc-actions { display: flex; gap: 10px; margin-top: 4px; }
.cc-actions button { font-size: 11px; font-weight: 700; color: var(--teal); background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-body); }
.cc-actions button:hover { text-decoration: underline; }
.cc-actions button.liked { color: var(--navy); }
.cc-reply-form { margin-top: 6px; }
.cc-replies { margin: 8px 0 0; padding-left: 14px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.cc-item.cc-reply { padding-top: 2px; }
.cc-cancel { align-self: flex-start; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-body); }
.cc-cancel:hover { color: var(--ink); text-decoration: underline; }
.consult-comment-form { display: flex; gap: 8px; margin-top: 2px; }
.consult-comment-form input { flex: 1; font-size: 12.5px; font-family: var(--font-body); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; }
.consult-comment-form button { font-size: 11.5px; font-weight: 700; color: #fff; background: var(--teal); border: none; border-radius: var(--radius-sm); padding: 0 12px; cursor: pointer; }

/* ---- Generic reusable comment thread (issues, submissions, visual assets) ---- */
.comment-thread { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.comment-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; max-height: 220px; overflow-y: auto; }

/* ---- Generic popup "summary, then Read more" ---- */
.im-more-toggle { background: none; border: none; color: var(--teal); font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 2px 0 0; }
.im-more { margin-top: 10px; }
.im-more.hide { display: none; }
.consult-attach { margin-top: 10px; }
.consult-attach .hint { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ---- @mentions ---- */
.mention { color: var(--teal); font-weight: 700; background: var(--teal-pale-bg); border-radius: 4px; padding: 0 4px; }
.mention-suggest { position: absolute; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 10px 24px rgba(3,31,115,0.18); z-index: 50; min-width: 200px; max-height: 220px; overflow-y: auto; display: none; }
.mention-suggest.show { display: block; }
.mention-suggest .ms-item { padding: 8px 12px; font-size: 12.5px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.mention-suggest .ms-item:hover, .mention-suggest .ms-item.hi { background: var(--surface-tint); }
.mention-suggest .ms-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--teal-pale); color: var(--teal); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---- Threaded replies with a curved connector line, LinkedIn-style ---- */
.thread-reply-list { margin: 10px 0 2px 24px; padding-left: 20px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 14px; }
.thread-reply-list.hide { display: none; }
.thread-reply { position: relative; font-size: 13px; }
.thread-reply::before { content: ""; position: absolute; left: -22px; top: 13px; width: 14px; height: 14px; border-left: 2px solid var(--border); border-bottom: 2px solid var(--border); border-bottom-left-radius: 10px; }
.thread-reply .tr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.thread-reply .tr-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--teal-pale); color: var(--teal); font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.thread-reply .tr-author { font-weight: 700; color: var(--navy); font-size: 12.5px; }
.thread-reply .tr-author-badge { font-size: 9.5px; font-weight: 700; color: var(--teal); background: var(--teal-pale-bg); padding: 1px 6px; border-radius: 999px; }
.thread-reply .tr-when { color: var(--muted); font-size: 11px; }
.thread-reply .tr-body { color: var(--ink); line-height: 1.5; }
.thread-reply .tr-actions { display: flex; gap: 14px; margin-top: 4px; }
.thread-reply .tr-action { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 2px 4px; font-size: 11.5px; font-weight: 700; color: var(--muted); cursor: pointer; font-family: var(--font-body); border-radius: var(--radius-sm); }
.thread-reply .tr-action:hover { background: var(--surface-tint); color: var(--navy); }
.thread-reply .tr-action.on { color: var(--teal-hover); }
.tp-toggle-replies { background: none; border: none; color: var(--teal); font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 8px 0 0; }


/* ---- News: previous Weekly Windup archive ---- */
.windup-archive { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.windup-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.windup-row:last-child { border-bottom: none; }
.windup-row:hover .wr-title { color: var(--teal); }
.windup-row .wr-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--cream); color: var(--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.windup-row .wr-title { font-size: 13.5px; font-weight: 700; color: var(--navy); }
.windup-row .wr-date { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.windup-row .wr-cta { font-size: 12px; font-weight: 700; color: var(--teal); white-space: nowrap; }

/* ---- Popup-triggering elements (opened via portal.js + <template class="popup-content">) ---- */
[data-popup] { cursor: pointer; }
[data-popup]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.cat-card[data-popup]:hover, .res-card[data-popup]:hover, .res-card[data-consult]:hover, .res-card[data-article]:hover { border-color: var(--teal); box-shadow: 0 4px 14px rgba(3,31,115,0.08); }
.res-card[data-article] { cursor: pointer; }
.row[data-consult]:hover, .row[data-popup]:hover, .row[data-paper]:hover { background: var(--surface-tint); }
.info-modal-body h2 { color: var(--navy); font-size: 22px; font-weight: var(--fw-bold); margin: 0 0 4px; padding-right: 150px; }
.info-modal-body .im-meta, .consult-pane-left .im-meta, .consult-pane-right .im-meta { font-size: 12px; color: var(--muted); margin: 0 0 14px; }

/* ---- Author / owner contact chip (top-right of resource popups) ---- */
.info-modal-body .im-author {
  float: right; width: 140px; margin: 2px 0 12px 18px; padding: 12px 10px;
  background: var(--surface-tint); border: 1px solid var(--border); border-radius: var(--radius-sm);
  text-align: center; text-decoration: none; display: block;
}
.info-modal-body .im-author:hover { border-color: var(--teal); background: var(--teal-pale-bg); }
.im-author .ia-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--teal-pale); color: var(--teal); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; margin: 0 auto 6px; }
.im-author .ia-name { display: block; font-size: 12.5px; font-weight: 700; color: var(--navy); }
.im-author .ia-role { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
.im-author .ia-contact { display: block; font-size: 11.5px; font-weight: 700; color: var(--teal); margin-top: 8px; }
@media (max-width: 560px) {
  .info-modal-body h2 { padding-right: 40px; }
  .info-modal-body .im-author { float: none; width: auto; margin: 0 0 14px; }
}
.info-modal-body p { font-size: 13.5px; color: var(--ink); line-height: 1.6; margin: 0 0 12px; }
.info-modal-body ul { display: block; margin: 0 0 14px; padding-left: 18px; list-style: disc; }
.info-modal-body li { display: list-item; font-size: 13px; color: var(--ink); line-height: 1.6; margin-bottom: 4px; }
.info-modal-body .im-note { font-size: 12px; color: var(--muted); background: var(--surface-tint); border-radius: var(--radius-sm); padding: 10px 12px; }
.consult-pane-left .im-note, .consult-pane-right .im-note { font-size: 12px; color: var(--muted); background: #fff; border-radius: var(--radius-sm); padding: 10px 12px; }

/* ---- Download list (inside popups: AGM templates, Brand guidelines pack) ---- */
.dl-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.dl-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--surface-tint); border-radius: var(--radius-sm); padding: 10px 14px; }
.dl-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.dl-desc { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.dl-btn { padding: 7px 14px; font-size: 12px; flex-shrink: 0; }
.dl-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ---- Inline document viewer: a lodged/draft paper's own dl-row, with a
   "View" toggle that expands a preview panel right below it (in place of
   an actual embedded PDF, which this reference build has no file for). ---- */
.doc-block { margin-bottom: 4px; }
.doc-preview { margin-top: 8px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
.doc-preview.hide { display: none; }
.doc-preview-head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px; }
.doc-preview-head svg { color: var(--teal); flex-shrink: 0; }
.doc-preview p { font-size: 13px; line-height: 1.65; color: var(--ink); margin: 0 0 10px; }
.doc-preview p:last-child { margin-bottom: 0; }

/* ---- Secondary actions inline on an .mcard .row (e.g. Upcoming Submissions):
   a download link and a "Get involved" trigger, sitting under the title/meta
   without turning the whole row into a button group. ---- */
.row-actions { display: flex; gap: 16px; align-items: center; margin-top: 8px; }
.row-action { font-size: 12px; font-weight: 700; color: var(--teal); background: none; border: none; padding: 0; margin: 0; cursor: pointer; font-family: var(--font-body); text-decoration: none; }
.row-action:hover { text-decoration: underline; }

/* ---- Profile field display (My Service & Membership) ---- */
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-bottom: 18px; }
.profile-item .k { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.profile-item .v { font-size: 14px; font-weight: 600; }
.profile-item .v.editable { color: var(--teal); }
.profile-item .v-edit.hide { display: none; }
.profile-item input.v-edit {
  width: 100%; font-size: 14px; font-weight: 600; color: var(--ink); font-family: var(--font-body);
  border: 1px solid var(--teal); border-radius: var(--radius-sm); padding: 6px 8px; background: #fff;
}
.approval-note { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.approval-note .request-change { color: var(--teal); font-weight: 700; cursor: pointer; text-decoration: underline; }
.profile-actions { display: flex; gap: 10px; margin-top: 4px; }
.profile-actions.hide { display: none; }

.benefit-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); gap: 12px; }
.benefit-row:last-child { border-bottom: none; padding-bottom: 0; }
.benefit-row:first-child { padding-top: 0; }
.benefit-row .bname { font-size: 13.5px; font-weight: 600; }
.benefit-row .bprice { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.benefit-row .badd { padding: 7px 14px; font-size: 12px; }
.benefit-row .badd.added { background: var(--success-bg); color: var(--success-text); border-color: transparent; }

/* ---- Login page ---- */
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--navy-deep); padding: 20px; }
.login-card { background: #fff; border-radius: var(--radius); padding: 36px 34px; max-width: 400px; width: 100%; }
.login-card .lmark { width: 44px; height: 44px; border-radius: 50%; background: var(--teal-light); color: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; margin-bottom: 18px; }
.login-card h1 { font-size: 30px; font-weight: var(--fw-bold); color: var(--navy); margin: 0 0 6px; }
.login-card .sub { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.login-card .fine { font-size: 11.5px; color: var(--muted); margin-top: 16px; text-align: center; }

/* ---- Site footer (every chrome page) — structure and content mirror
   nswmealsonwheels.org.au's real footer. ---- */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,0.85); margin-top: 48px; position: relative; }
/* Same swirl technique as the hero's divider, mirrored: the wave's fill
   matches the footer background exactly, so its flat base blends invisibly
   into .site-footer while its curved top edge dips up into the page,
   connecting the main body area with the footer. */
.footer-wave { position: absolute; top: -69px; left: 0; right: 0; height: 70px; line-height: 0; }
.footer-wave svg { width: 100%; height: 100%; display: block; }
.footer-inner { max-width: 1240px; margin: 0 auto; padding: 48px 24px 30px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.footer-col-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--teal-pale); margin-bottom: 6px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 15.5px; color: #fff; margin-bottom: 10px; }
.footer-brand .mark { width: 28px; height: 28px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.site-footer p { font-size: 12.5px; line-height: 1.6; margin: 0 0 12px; color: rgba(255,255,255,0.75); }
.site-footer a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 12.5px; }
.site-footer a:hover { color: var(--teal-pale); text-decoration: underline; }
.footer-ack { font-size: 11.5px; color: rgba(255,255,255,0.58); margin-top: 4px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15); padding: 16px 24px; max-width: 1240px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: 11.5px; color: rgba(255,255,255,0.58);
}
.footer-legal { display: flex; gap: 16px; }
.footer-legal a { font-size: 11.5px; }

@media (max-width: 1000px) {
  .masonry { column-count: 2; }
  .topbar { border-radius: var(--radius); margin: 12px 12px 0; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
/* Below this, the mega-menu gives way to the hamburger drawer. The collapsed
   header keeps just the favicon + "Members Hub / Dashboard" wordmark on the
   left, and notifications + hamburger on the right — nothing else, so the
   full wordmark stays visible (search and the account button both move into
   the drawer, which is what frees up the room). */
@media (max-width: 900px) {
  .topbar nav { display: none; }
  .mobile-nav-toggle { display: flex; }
  .topbar-row { flex-wrap: nowrap; gap: 10px; }
  .topbar .user { display: none; }
  .ts-toggle { display: none; }
  .topbar-search-row { display: none !important; }
  /* nav is what pushes everything after it to the right on desktop (via its
     own margin-right:auto) — with nav hidden, the brand needs to take over
     that job so notifications + hamburger still land on the far right.
     The desktop brand also carries a -16px left margin (to align with the
     hero h1 below it) and a 28px right margin (spacing before the mega-menu)
     — neither makes sense once the brand is the only thing on the left and
     nav is gone, and at narrow widths the negative margin pushes the logo
     past the topbar's own padding, clipping it against the rounded corner. */
  .topbar .brand { margin-left: 0; margin-right: auto; }
}
@media (max-width: 640px) {
  .masonry { column-count: 1; }
  .hero h1 { font-size: 30px; }
  .quick-grid { grid-template-columns: 1fr; }
  .profile-grid, .field-row { grid-template-columns: 1fr; }
  .ts-suggest-cols { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; padding: 36px 24px 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .topbar { padding: 10px 14px; }
  .topbar-row { gap: 6px; }
}

/* ============================================================
   Marketing calendar: month grid on the left, events list on
   the right, with an "add your event" card at the top of the list.
   ============================================================ */
.cal-wrap { display: grid; grid-template-columns: 1.45fr 1fr; gap: 20px; align-items: start; }
.cal-panel {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 18px 16px;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-month { font-weight: var(--fw-bold); color: var(--navy); font-size: 16px; }
.cal-nav {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: #fff; color: var(--navy); cursor: pointer; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background .15s ease, border-color .15s ease;
}
.cal-nav:hover { background: var(--surface-tint); border-color: var(--teal); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow-row { margin-bottom: 4px; }
.cal-dow { text-align: center; font-size: 10.5px; letter-spacing: -0.28px; text-transform: uppercase; font-weight: 600; color: var(--muted); padding: 4px 0; }
.cal-day {
  position: relative; aspect-ratio: 1 / 1; border: 1px solid transparent; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 13px; color: var(--ink); background: var(--surface-tint);
}
.cal-day.empty { background: transparent; }
.cal-day.today { outline: 2px solid var(--teal-pale); outline-offset: -2px; font-weight: 600; }
.cal-day[data-date] { cursor: pointer; }
.cal-day[data-date]:hover { border-color: var(--teal); background: var(--surface-tint); }
.cal-day.has-event { background: #fff; border-color: var(--border); font-weight: 600; color: var(--navy); }
.cal-day.has-event:hover { background: var(--teal-pale-bg); }
.cal-dots { display: flex; gap: 3px; margin-top: 3px; height: 6px; align-items: center; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.cal-dot.mine { background: var(--orange); }
.cal-legend { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.cal-legend .cal-dot { display: inline-block; }
.cal-legend-mine { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); display: inline-block; }

.cal-events { display: flex; flex-direction: column; gap: 12px; }
.cal-add-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface-tint); border: 1.5px dashed var(--teal); border-radius: var(--radius);
  padding: 14px 16px; transition: background .15s ease, border-color .15s ease;
}
.cal-add-card:hover { background: #fff; border-color: var(--navy); }
.cal-add-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--teal); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; font-weight: 400;
}
.cal-add-text { display: flex; flex-direction: column; }
.cal-add-title { font-weight: var(--fw-bold); color: var(--navy); font-size: 14px; }
.cal-add-sub { font-size: 12px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.cal-day-evlist { display: flex; flex-direction: column; gap: 8px; }
.cal-day-ev {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease;
}
.cal-day-ev:hover { border-color: var(--teal); box-shadow: 0 6px 18px rgba(3,31,115,0.08); }
.cal-day-ev-title { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--navy); }
.cal-day-ev-more { font-size: 12px; color: var(--teal); white-space: nowrap; }
.cal-events-head { font-size: 12px; text-transform: uppercase; letter-spacing: -0.28px; font-weight: 600; color: var(--muted); margin-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal-events-head button { background: none; border: none; color: var(--teal); font-size: 12px; cursor: pointer; font-family: inherit; padding: 0; text-transform: none; letter-spacing: 0; }
.cal-events-head button:hover { text-decoration: underline; }
.cal-event {
  display: flex; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
  text-decoration: none; color: inherit;
}
.cal-event:hover { border-color: var(--teal); box-shadow: 0 6px 18px rgba(3,31,115,0.08); }
.cal-event:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.cal-event.is-mine { border-left: 3px solid var(--orange); }
.cal-ev-date {
  flex-shrink: 0; width: 46px; text-align: center; border-radius: 10px; background: var(--surface-tint);
  padding: 6px 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cal-ev-day { font-size: 18px; font-weight: var(--fw-bold); color: var(--navy); line-height: 1; }
.cal-ev-mon { font-size: 10px; text-transform: uppercase; letter-spacing: -0.28px; color: var(--teal); font-weight: 600; margin-top: 2px; }
.cal-ev-body { flex: 1; min-width: 0; }
.cal-ev-title { font-weight: var(--fw-bold); color: var(--navy); font-size: 14px; margin: 0 0 3px; }
.cal-ev-meta { font-size: 12px; color: var(--muted); margin: 0 0 6px; line-height: 1.45; }
.cal-ev-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.cal-ev-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0; font-family: inherit; }
.cal-ev-remove:hover { color: var(--orange); text-decoration: underline; }
.cal-empty-note { font-size: 13px; color: var(--muted); padding: 14px; text-align: center; background: var(--surface-tint); border-radius: var(--radius); }

/* Add-event popup internals */
.cal-fetch-row { display: flex; gap: 8px; align-items: flex-end; }
.cal-fetch-row .field { flex: 1; margin-bottom: 0; }
.cal-involve { display: grid; gap: 8px; margin: 4px 0 6px; }
.cal-involve label { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--ink); font-weight: 400; cursor: pointer; }
.cal-involve input { margin-top: 2px; flex-shrink: 0; }
.cal-louie {
  display: flex; gap: 12px; align-items: flex-start; background: var(--surface-tint);
  border-left: 3px solid var(--teal); border-radius: 10px; padding: 12px 14px; margin: 4px 0 16px;
}
.cal-louie-avatar {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: var(--fw-bold);
}
.cal-louie-text { font-size: 13px; color: var(--ink); line-height: 1.5; }
.cal-louie-text strong { color: var(--navy); }
.cal-louie-name { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }

@media (max-width: 820px) {
  .cal-wrap { grid-template-columns: 1fr; }
}

/* Marketing overview: main content + a synced "upcoming dates" column */
.mkt-ov-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.mkt-ov-aside .mcard { margin-bottom: 0; }
.mkt-up-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.mkt-up-row {
  display: flex; gap: 11px; align-items: center; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px;
  font-family: var(--font-body); transition: border-color .15s ease, background .15s ease;
}
.mkt-up-row:hover { border-color: var(--teal); background: var(--surface-tint); }
.mkt-up-date {
  flex-shrink: 0; width: 40px; text-align: center; border-radius: 8px; background: var(--surface-tint);
  padding: 4px 0; display: flex; flex-direction: column; align-items: center;
}
.mkt-up-day { font-size: 16px; font-weight: var(--fw-bold); color: var(--navy); line-height: 1; }
.mkt-up-mon { font-size: 9.5px; text-transform: uppercase; letter-spacing: -0.28px; color: var(--teal); font-weight: 600; margin-top: 2px; }
.mkt-up-title { font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.35; display: block; }
.mkt-up-flag { font-size: 11px; color: var(--orange); font-weight: 600; margin-top: 2px; display: block; }
@media (max-width: 900px) { .mkt-ov-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Notifications bell + dropdown (topbar)
   ============================================================ */
.notif { position: relative; flex-shrink: 0; }
.notif-toggle {
  position: relative; width: 34px; height: 34px; border-radius: 50%; border: none;
  background: transparent; color: var(--navy); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.notif-toggle:hover { background: var(--surface-tint); }
.notif.open .notif-toggle { background: var(--teal-pale-bg); color: var(--teal); }
.notif-badge {
  position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--orange); color: #fff; font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid #fff;
}
.notif-badge.hide { display: none; }
.notif-menu {
  display: none; position: absolute; top: calc(100% + 10px); right: 0;
  background: #fff; color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(3,31,115,0.22); width: 360px; max-width: calc(100vw - 32px); z-index: 30;
  overflow: hidden; cursor: default;
}
.notif.open .notif-menu { display: block; }
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  font-size: 13.5px; font-weight: 700; color: var(--navy);
}
.notif-head button { background: none; border: none; color: var(--teal); font-size: 12px; cursor: pointer; font-family: inherit; padding: 0; }
.notif-head button:hover { text-decoration: underline; }
.notif-list { max-height: 60vh; overflow-y: auto; }
.notif-item {
  display: flex; gap: 11px; align-items: flex-start; padding: 12px 16px; text-decoration: none;
  border-bottom: 1px solid var(--border); position: relative; transition: background .12s ease;
}
.notif-item:hover { background: var(--surface-tint); }
.notif-item.unread { background: var(--teal-pale-bg); }
.notif-item.unread:hover { background: #dcf3f1; }
.notif-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.notif-reply { background: var(--teal); }
.notif-like { background: var(--orange); }
.notif-renewal { background: var(--navy); }
.notif-consult { background: var(--blue); }
.notif-event { background: var(--teal-hover); }
.notif-body { flex: 1; min-width: 0; }
.notif-text { display: block; font-size: 13px; color: var(--ink); line-height: 1.45; }
.notif-text strong { color: var(--navy); font-weight: 700; }
.notif-time { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.notif-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); margin-top: 6px; }
.notif-foot {
  display: block; text-align: center; padding: 12px; font-size: 12.5px; font-weight: 600;
  color: var(--teal); text-decoration: none; background: var(--surface-tint);
}
.notif-foot:hover { background: var(--teal-pale-bg); }
@media (max-width: 640px) { .notif-menu { position: fixed; top: 66px; right: 12px; left: 12px; width: auto; } }

/* Notification popups (thread / consultation / renewal opened from the bell) */
.npop-banner {
  display: flex; align-items: flex-start; gap: 9px; background: var(--teal-pale-bg); border-radius: 10px;
  padding: 11px 14px; font-size: 13px; color: var(--ink); line-height: 1.5; margin: 0 0 16px;
}
.npop-banner strong { color: var(--navy); }
.npop-banner-ic { color: var(--teal); font-size: 15px; line-height: 1.3; flex-shrink: 0; }
.npop-thread { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 18px; }
.npop-msg { display: flex; gap: 11px; align-items: flex-start; }
.npop-av {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--fw-bold);
}
.npop-msg.mine .npop-av { background: var(--teal); }
.npop-msg-body { flex: 1; min-width: 0; background: var(--surface-tint); border-radius: 12px; padding: 10px 13px; }
.npop-msg.hl .npop-msg-body { background: var(--teal-pale-bg); border: 1px solid var(--teal-pale); }
.npop-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.npop-name { font-size: 13px; font-weight: var(--fw-bold); color: var(--navy); }
.npop-role { font-size: 11.5px; color: var(--teal); }
.npop-time { font-size: 11.5px; color: var(--muted); margin-left: auto; }
.npop-text { font-size: 13px; color: var(--ink); line-height: 1.5; margin: 0; }
.npop-reply { display: flex; flex-direction: column; gap: 8px; }
.npop-reply textarea {
  width: 100%; min-height: 70px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  font-family: var(--font-body); font-size: 13.5px; color: var(--ink); resize: vertical; box-sizing: border-box;
}
.npop-reply textarea:focus { outline: none; border-color: var(--teal); }
.npop-reply .btn-primary { align-self: flex-start; }
.npop-thanks { font-size: 13px; color: var(--success-text); background: var(--success-bg); border-radius: 10px; padding: 11px 14px; }
.npop-quote { border-left: 3px solid var(--teal); background: var(--surface-tint); border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; }
.npop-quote-label { font-size: 11px; text-transform: uppercase; letter-spacing: -0.28px; font-weight: 600; color: var(--muted); margin: 0 0 4px; }
.npop-quote p:last-child { margin: 0; font-size: 13.5px; color: var(--ink); font-style: italic; line-height: 1.5; }

/* ============================================================
   Get involved (engagement.html) — member engagement hub
   ============================================================ */
.eng-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.eng-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 18px 16px; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.eng-card:hover { border-color: var(--teal); box-shadow: 0 8px 22px rgba(3,31,115,0.10); }
.eng-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.eng-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: var(--teal-pale-bg);
  color: var(--teal); display: flex; align-items: center; justify-content: center;
}
.eng-card h3 { font-size: 15px; color: var(--navy); font-weight: var(--fw-bold); margin: 0; line-height: 1.3; }
.eng-card p { font-size: 13px; color: var(--ink); line-height: 1.5; margin: 0 0 12px; }
.eng-card .eng-why { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 14px; }
.eng-card .eng-why strong { color: var(--navy); }
.eng-cta { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--teal); }
.eng-card:hover .eng-cta { text-decoration: underline; }