/**
 * Member section M3 overlay – My cred CORE DESIGN SYSTEM
 * Apply layout and tokens for the four updated pages (Manage, View, Share, Reports).
 * Bulma remains for other member pages; this file scopes to #member_wrapper.
 * Public portfolio (portfolio/portfolio.php) also uses #member_wrapper (class portfolio-public).
 * Match Figma: My cred – CORE DESIGN SYSTEM (colors, typography, spacing).
 */

/* Server-rendered alerts: kept in DOM for mem-m3 toast textContent; hidden visually (see incl_mem_m3_toast). */
#member_wrapper .success_msg,
#member_wrapper .error_msg,
#member_wrapper .warning_msg,
#member_wrapper .app_success,
#member_wrapper .app_warning,
#member_wrapper .form_error {
  display: none !important;
}
/* -------------------------------------------------------------------------
   CORE DESIGN SYSTEM tokens (align with Figma CORE DESIGN SYSTEM)
   ------------------------------------------------------------------------- */

:root {
  --header-title-size: 20px;
  --header-title-weight: 700;
  --header-title-color: var(--mem-subtext-dark);
  --header-title-line-height: 24px;
  --header-title-letter-spacing: 0px;
  --subtitle-weight: 400;
  --subtitle-size: 13px;
  --subtitle-line-height: 150%;
  --subtitle-letter-spacing: 0px;
  --subtitle-color: #696F7A;
  --share-list-style: none;
  --share-nav-list-margin: 0;
  --share-nav-list-padding: 0;
  --share-nav-list-display: flex;
  --share-nav-list-flex-direction: row;
  --share-nav-list-flex-wrap: wrap;
  --share-nav-list-gap: 40px;
  --share-nav-list-align-items: flex-end;
  --share-nav-list-width: 1103px;
  --share-nav-list-height: 28px;
  --share-nav-list-angle: 0 deg;
  --share-nav-list-opacity: 1;
  --header-title-content-size: 18px;



  --main-border-outline:#C1C7CD;
  --mem-space-navigation: 32px;
  /* Primary / brand */
  --mem-primary: #096DD9;
  --mem-primary-hover: #075bb8;
  --mem-on-primary: #ffffff;
  /* Error / destructive (Figma Error/500; lock-unlocked affordance, destructive actions) */
  --mem-error: #CF1322;
  /* Surface & background */
  --mem-surface: #ffffff;
  --mem-surface-variant: #f5f5f5;
  --mem-outline: #e0e0e0;
  /* Text */
  --mem-on-surface: #1a1a1a;
  --mem-on-surface-variant: #5c5c5c;
  --mem-subtext: #4D535E;
  --mem-subtext-dark: #2E333B;
  /* Nav / sidebar – Figma SVG 242×1216 */
  --mem-nav-bg: #fff;
  --mem-nav-border: #E4E6EB;
  --mem-nav-header-bg: #F4F6FA;
  --mem-nav-top-line: #F0F2F5;
  --mem-nav-search-border: #86919D;
  --mem-nav-item-active-bg: #F0F7FF;
  --mem-nav-item-active-accent: var(--mem-primary);
  --mem-nav-item-text: #3C424D;
  --mem-nav-item-text-secondary: #414651;
  --mem-nav-item-active-text: #3C424D;
  /* Typography */
  --mem-font-family: 'Lato', sans-serif;
  --mem-headline-size: 1.5rem;
  --mem-title-size: 1.25rem;
  --mem-body-size: 1rem;
  --mem-label-size: 16px;
  --mem-font-weight-bold: 700;
  --mem-regular-size: 14px;
  --mem-regular-size-small: 13px;
  /* Spacing */
  --mem-space-xs: 4px;
  --mem-space-sm: 8px;
  --mem-space-md: 16px;
  --mem-space-lg: 24px;
  --mem-space-xl: 32px;
  /* Sticky top app bar (~64px) + gap: used for fragment scroll so #mod*, skip links land below header */
  --mem-sticky-top-scroll-padding: 88px;
  /* Reports Web vs Mobile charts: mobile-only gap (DRY – one value for grid + wrap) */
  --mem-m3-reports-charts-mobile-gap: var(--mem-space-lg);
  --mem-m3-reports-active-module-mobile-stack-gap: var(--mem-space-lg);
  /* Reports title card: horizontal bleed = .mem-m3-reports padding (DRY full-width divider on mobile) */
  --mem-m3-reports-title-full-bleed: var(--mem-space-lg);
  /* md-dialog sheet chrome: title row + action row (manage modules, share confirmations, etc.) */
  --mem-m3-dialog-title-bar-height: 56px;
  --mem-m3-dialog-footer-height: 76px;
}

html {
  scrollbar-gutter: stable;
}

/* -------------------------------------------------------------------------
   M3 global theme – one place for ALL M3 components (no repeat per class)
   Material Web inherits these tokens; override only where design differs.
   Components: buttons, text fields, list items, switch, dialog, icons (via system).
   ------------------------------------------------------------------------- */
#member_wrapper {
  /* ----- System colors (used by all M3 components) ----- */
  --md-sys-color-primary: var(--mem-primary);
  --md-sys-color-on-primary: var(--mem-on-primary);
  --md-sys-color-error: var(--mem-error);
  --md-sys-color-surface: var(--mem-surface);
  --md-sys-color-on-surface: var(--mem-on-surface);
  --md-sys-color-outline: #86919D;
  --md-sys-color-surface-container-highest: var(--mem-surface-variant);
  /* ----- Shape (system + components) ----- */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-large: 8px;
  /* Buttons */
  --md-outlined-button-container-shape: 8px;
  --md-filled-button-container-shape: 8px;
  --md-outlined-icon-button-container-shape: 8px;
  /* Text fields (md-outlined-text-field) — single-line target height ~40px (padding + body line-height) */
  --md-outlined-text-field-container-shape: 8px;
  --md-outlined-text-field-top-space: 8px;
  --md-outlined-text-field-bottom-space: 8px;
  /* ----- Buttons ----- */
  --md-filled-button-container-color: var(--mem-primary);
  --md-filled-button-label-text-color: var(--mem-on-primary);
  /* Outlined: label uses --md-sys-color-primary; outline default (grey) so Cancel can override */
  /* ----- Text fields ----- */
  /* Use --md-sys-color-surface, --md-sys-color-outline, --md-sys-color-on-surface (set above) */
  /* ----- List (md-list-item) defaults ----- */
  --md-list-item-container-color: var(--mem-surface);
  --md-list-item-label-text-color: var(--mem-on-surface);
  --md-list-item-container-min-height: 40px;
  /* ----- Switch (md-switch) ----- */
  /* Uses --md-sys-color-primary, --md-sys-color-on-primary, --md-sys-color-outline, --md-sys-color-surface-container-highest (set above) */
  /* ----- Dialog (md-dialog) ----- */
  /* Uses --md-sys-color-surface, --md-sys-color-on-surface (set above) */
  /* 8px radius: --md-sys-shape-corner-large (portfolio dialogs set --md-dialog-container-shape from it) */
  /* ----- Icons (md-icon) ----- */
  /* Inherit from parent or --md-sys-color-on-surface; override per context (header, nav) as needed */
}

body, h1, h2, h3, p, ul, li, #module_list {
    font-family: 'Lato', sans-serif !important;
}

/* Override md-dialog min-width for desktop */
@media (min-width: 1023px) {
  md-dialog {
    min-width: 520px;
  }
}

/* -------------------------------------------------------------------------
   Layout – header, nav sidebar, main content
   Preserves #member_wrapper, #header, #layout, #lc, #rc, #main-content
   ------------------------------------------------------------------------- */
#member_wrapper {
  font-family: var(--mem-font-family);
  color: var(--mem-on-surface);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--mem-surface-variant);
}

#member_wrapper #main-content {
  background: #FDFDFD;
}

/* Fragment / in-page links: keep targets below sticky top app bar (#mod*, skip to #main-content, etc.) */
html:has(#member_wrapper) {
  scroll-padding-top: var(--mem-sticky-top-scroll-padding, 88px);
}

/* -------------------------------------------------------------------------
  Top app bar – CORE MyCred (Figma SVG 1448×64: node 8866-18968)
   Colors: brand #00263C, logo #6CBC96, search border #86919D, search text #4D535E (--mem-subtext),
   grid #2E333B (--mem-subtext-dark), divider #C1C7CD, bottom border #E4E6EB
   ------------------------------------------------------------------------- */
#member_wrapper #header.mem-top-app-bar {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 110;
  background: #fff;
  border-bottom: 1px solid #E4E6EB;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 240px 1fr;
  align-items: stretch;
  gap: 24px;
  max-height: 64px;
}

/* Public portfolio: logo only (no search, no Sign in) */
#member_wrapper #header.mem-header-public-minimal {
  grid-template-columns: 240px 1fr;
}

#member_wrapper #header .mem-header-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  padding-right: 0;
  border-right: 1px solid #E4E6EB;
}

/* Public portfolio: menu button before logo */
#member_wrapper.portfolio-public #header .mem-header-left {
  justify-content: flex-start;
}

#member_wrapper.portfolio-public #header .mem-header-brand {
  flex: 1;
  justify-content: center;
}

#member_wrapper.portfolio-public #header .mem-sidebar-menu-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--mem-nav-item-text, #00263C);
  cursor: pointer;
  --md-icon-button-hover-state-layer-color: transparent;
  --md-icon-button-hover-state-layer-opacity: 0;
  --md-icon-button-focus-state-layer-color: transparent;
  --md-icon-button-focus-state-layer-opacity: 0;
  --md-icon-button-pressed-state-layer-color: transparent;
  --md-icon-button-pressed-state-layer-opacity: 0;
}

#member_wrapper.portfolio-public #header .mem-sidebar-menu-btn:hover {
  background: rgba(60, 66, 77, 0.08);
}

#member_wrapper.portfolio-public #header .mem-sidebar-menu-btn md-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

#member_wrapper #header .mem-header-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mem-space-md);
  color: #00263C;
  text-decoration: none;
  width: 100%;
  height: 100%;
}

#member_wrapper #header .mem-header-brand:hover {
  color: #00263C;
  opacity: 0.9;
}

#member_wrapper #header .mem-header-logo,
#member_wrapper #header #logo {
  max-height: 40px;
  width: auto;
  display: block;
  vertical-align: middle;
}

/* Override main.css absolute positioning on #logo so it stays in flex flow and centers */
#member_wrapper #header.mem-top-app-bar #logo {
  position: static;
  left: auto;
  top: auto;
}

#member_wrapper #header .mem-header-brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

#member_wrapper #header .mem-header-brand-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #00263C;
}

#member_wrapper #header .mem-header-brand-subtitle {
  font-size: 0.75rem;
  color: #00263C;
  opacity: 0.8;
}

#member_wrapper #header .mem-header-center {
  display: flex;
  align-items: center;
  justify-content: start;
}

#member_wrapper #header .mem-header-search {
  position: relative;
  width: 100%;
  max-width: 451px;
}

#member_wrapper #header .mem-header-search md-outlined-text-field.mem-header-search-input {
  width: 100%;
  --md-sys-color-surface: #fff;
}

#member_wrapper #header .mem-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#member_wrapper #header .mem-header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--mem-subtext-dark);
  cursor: pointer;
  border-radius: 8px;
}

#member_wrapper #header .mem-header-avatar-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--mem-subtext);
  cursor: pointer;
  border-radius: 8px;
}

#member_wrapper #header .mem-header-icon-btn:hover,
#member_wrapper #header .mem-header-avatar-wrap:hover {
  background: var(--mem-surface-variant);
}

#member_wrapper #header .mem-header-icon-btn md-icon {
  font-size: 24px;
  color: var(--mem-subtext-dark);
}


#member_wrapper #header .mem-header-avatar-wrap {
  gap: 2px;
}

#member_wrapper #header .mem-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

#member_wrapper #header .mem-header-avatar-initials {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mem-primary);
  color: var(--mem-on-primary);
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

#member_wrapper #header .mem-header-chevron {
  font-size: 20px;
  margin-left: 2px;
  color: var(--mem-subtext);
}

/* User dropdown menu */
#member_wrapper #header .mem-header-user-menu-wrap {
  position: relative;
}

#member_wrapper #header .mem-header-user-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  padding: 8px 0;
  background: #fff;
  border: 1px solid #E4E6EB;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 38, 60, 0.12);
  z-index: 1000;
  list-style: none;
  margin: 0;
}

#member_wrapper #header .mem-header-user-menu[hidden] {
  display: none !important;
}

#member_wrapper #header .mem-header-user-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: #00263C;
  text-decoration: none;
  font-size: 0.875rem;
  font-family: var(--mem-font-family);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
}

#member_wrapper #header .mem-header-user-menu-item:hover {
  background: rgba(0, 38, 60, 0.06);
}

#member_wrapper #header .mem-header-user-menu-item md-icon {
  font-size: 20px;
  width: 20px;
  height: 20px;
  color: var(--mem-subtext);
}

#member_wrapper #header .mem-header-user-menu-divider {
  height: 1px;
  background: #E4E6EB;
  margin: 6px 0;
}

/* Public portfolio: Sign in link in header (no user menu) */
#member_wrapper.portfolio-public #header .mem-header-signin-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  color: var(--mem-primary);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
}
#member_wrapper.portfolio-public #header .mem-header-signin-link:hover {
  background: var(--mem-surface-variant);
}

/* Main content area: nav + content (Bulma .container .columns or table #layout) */
#member_wrapper .container.is-fluid,
#member_wrapper .container.is-fluid .columns {
  flex: 1;
  margin: 0;
  padding: 0;
  max-width: none;
}

#member_wrapper .container.is-fluid .columns {
  display: flex;
  min-height: calc(100vh - 120px);
}

/* Nav column (sidebar) – only when explicitly marked role="navigation" so old layout is untouched */
#member_wrapper .container.is-fluid .columns .column[role="navigation"]:first-child {
  flex: 0 0 264px;
  max-width: 264px;
  background: var(--mem-nav-bg);
  border-right: 1px solid var(--mem-nav-border);
  border-top: 1px solid var(--mem-nav-top-line);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  transition: flex 0.25s ease, max-width 0.25s ease, min-width 0.25s ease;
}

/* Sidebar stays fixed (does not scroll with page) on desktop – below navbar (64px) */

/* Main content column */
#member_wrapper .container.is-fluid .columns .column.is-10,
#member_wrapper .container.is-fluid .columns .column[role="main"] {
  flex: 1;
  min-width: 0;
  padding: var(--mem-space-xl);
  background: var(--mem-surface);
  margin: 0;
}

/* Legacy table layout support (e.g. some pages use #layout) */
#member_wrapper #layout {
  width: 100%;
  border-collapse: collapse;
}

#member_wrapper #layout td#lc {
  width: 241px;
  vertical-align: top;
  background: var(--mem-nav-bg);
  border-right: 1px solid var(--mem-nav-border);
  border-top: 1px solid var(--mem-nav-top-line);
  padding: 0;
  transition: width 0.25s ease, min-width 0.25s ease;
}

/* Sidebar column (table layout) stays fixed when page scrolls – below navbar (64px) */

/* -------------------------------------------------------------------------
   M3 Navigation Drawer – standard (desktop) + modal (small screens)
   Standard: drawer shares space in #lc. Modal: overlay + scrim, toggled by menu icon.
   ------------------------------------------------------------------------- */
/* Drawer container: semantic wrapper for the sidebar list */
#member_wrapper .mem-nav-drawer {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--mem-nav-bg);
  overflow-x: hidden;
  transition: width 0.25s ease;
}

/* Scrim: hidden on desktop; used only in modal mode */
#member_wrapper .mem-nav-drawer-scrim {
  display: none;
}


/* -------------------------------------------------------------------------
   Sidebar collapsed state (desktop): narrow rail, hide search, truncate labels
   Toggled by sidebar hamburger (.mem-sidebar-menu-btn).
   ------------------------------------------------------------------------- */

#member_wrapper #layout td#rc,
#member_wrapper #layout td#rc_modules {
  vertical-align: top;
  padding: unset;
  /* Override main.css fixed widths (800px / 900px) so the main column can shrink with the viewport */
  width: auto;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Sidebar – Figma SVG 242×1216: header #F4F6FA, search box, items 40px, active #F0F7FF + #096DD9
   ------------------------------------------------------------------------- */
#member_wrapper .menu.mem-sidebar {
  background: transparent;
  padding: 0;
}

/* Sidebar header: "Menu" label + hamburger toggle */
#member_wrapper .mem-sidebar .mem-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--mem-nav-header-bg);
  padding: 10px 6px 10px 16px;
  border-bottom: none;
}

#member_wrapper .mem-sidebar .mem-sidebar-header-label {
  display: inline-block;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--mem-nav-item-text, #00263C);
  letter-spacing: 0.02em;
  overflow: hidden;
  white-space: nowrap;
  max-width: 8rem;
  opacity: 1;
  transition: max-width 0.22s ease, opacity 0.22s ease;
}

#member_wrapper .mem-sidebar .mem-sidebar-menu-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--mem-nav-item-text);
  cursor: pointer;
  /* Single hover: use custom background only; hide component’s state layers so no double indicator */
  --md-icon-button-hover-state-layer-color: transparent;
  --md-icon-button-hover-state-layer-opacity: 0;
  --md-icon-button-focus-state-layer-color: transparent;
  --md-icon-button-focus-state-layer-opacity: 0;
  --md-icon-button-pressed-state-layer-color: transparent;
  --md-icon-button-pressed-state-layer-opacity: 0;
}
#member_wrapper.mem-sidebar-collapsed .mem-sidebar .mem-sidebar-header-label{
    display: none !important;
}
#member_wrapper .mem-sidebar .mem-sidebar-menu-btn:hover {
  background: rgba(60, 66, 77, 0.08);
}

#member_wrapper .mem-sidebar .mem-sidebar-menu-btn md-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

#member_wrapper .mem-sidebar .mem-sidebar-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
}

#member_wrapper .mem-sidebar .mem-sidebar-search-wrap md-outlined-text-field.mem-sidebar-search-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  background: white;
  box-sizing: border-box;
}

/* Public portfolio sidebar: “Navigation search” row (Figma 9704:5968 — hamburger + outlined search) */
#member_wrapper.portfolio-public .mem-public-nav-search {
  background: var(--mem-nav-header-bg);
  border-bottom: 1px solid #d9d9d9;
  padding: 8px 16px;
  box-sizing: border-box;
}

#member_wrapper.portfolio-public .mem-public-nav-search-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

#member_wrapper.portfolio-public .mem-public-nav-search .mem-sidebar-search-wrap {
  flex: 1;
  min-width: 0;
  max-width: none;
}

/* M3 outlined field — same pattern as manage modules / standards list card search */
#member_wrapper.portfolio-public .mem-public-nav-search md-outlined-text-field.mem-sidebar-search-input {
  width: 100%;
  min-width: 0;
  --md-sys-color-surface: #fff;
  --md-sys-color-outline: var(--mem-nav-search-border);
  --md-outlined-text-field-input-text-size: 14px;
  --md-outlined-text-field-input-text-line-height: 20px;
  --md-outlined-text-field-input-text-color: var(--mem-nav-item-text);
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
}

/* Hamburger in this row: align with leading icon scale */
#member_wrapper.portfolio-public .mem-public-nav-search-inner > .mem-sidebar-menu-btn md-icon {
  font-size: 20px;
  width: 20px;
  height: 20px;
}

#member_wrapper.portfolio-public md-list-item.mem-public-nav-hidden {
  display: none !important;
}

#member_wrapper.portfolio-public md-list-item.mem-public-nav-no-results[hidden] {
  display: none;
}

#member_wrapper .menu .menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#member_wrapper .menu .menu-list li {
  margin: 0;
}

#member_wrapper .menu .menu-list .menu,
#member_wrapper .menu .menu-list .menu_sub {
  display: block;
  /* padding: var(--mem-space-sm) var(--mem-space-md); */
  border-radius: 0;
  color: var(--mem-nav-item-text);
  text-decoration: none;
  font-size: var(--mem-body-size);
  transition: background 0.2s, color 0.2s;
}

#member_wrapper .menu .menu-list a.menu:hover:not(.menu_unfunded),
#member_wrapper .menu .menu-list a.menu_sub:hover {
  background: rgba(60, 66, 77, 0.06);
}

#member_wrapper .menu .menu-list a.menu.is-active,
#member_wrapper .menu .menu-list a.menu_sub.is-active {
  background: var(--mem-nav-item-active-bg);
  color: var(--mem-nav-item-active-text);
  font-weight: 500;
}

#member_wrapper .menu .menu-list a.menu_unfunded {
  color: #a0a0a0;
  cursor: not-allowed;
}

#member_wrapper .menu .menu-list ul {
  list-style: none;
  /* padding-left: var(--mem-space-md); */
  margin-top: var(--mem-space-xs);
}

/* Material 3 list in sidebar – Figma: 40px rows, active = #F0F7FF + right accent #096DD9 */
#member_wrapper .menu md-list.menu-list {
  background: transparent;
  padding: 0;
  overflow-x: hidden;
}

/* Sidebar nav: Heroicons in list items (slot="start") */
#member_wrapper .menu md-list.menu-list .mem-nav-heroicon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: block;
  opacity: 0.85;
}
#member_wrapper .menu md-list.menu-list md-list-item[activated] .mem-nav-heroicon,
#member_wrapper .menu md-list.menu-list md-list-item.is-active .mem-nav-heroicon {
  opacity: 1;
}

/* Submenu items: dot icon (replaces per-item icons) */
#member_wrapper .menu md-list.menu-list .mem-nav-submenu-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--mem-on-surface-variant);
  opacity: 0.7;
}
#member_wrapper .menu md-list.menu-list .mem-nav-submenu-dot svg {
  width: 24px;
  height: 24px;
  display: block;
}
#member_wrapper .menu md-list.menu-list md-list-item.menu_sub[activated] .mem-nav-submenu-dot,
#member_wrapper .menu md-list.menu-list md-list-item.menu_sub.is-active .mem-nav-submenu-dot,
#member_wrapper .menu md-list.menu-list md-list-item.mem-portfolio-submenu-item[activated] .mem-nav-submenu-dot,
#member_wrapper .menu md-list.menu-list md-list-item.mem-portfolio-submenu-item.is-active .mem-nav-submenu-dot {
  color: var(--mem-nav-item-active-text);
  opacity: 0.85;
}

/* Nav list: override only what differs from global (container-color, min-height inherited) */
#member_wrapper .menu md-list.menu-list md-list-item {
  --md-list-item-hover-color: rgba(60, 66, 77, 0.06);
  --md-list-item-focus-color: rgba(60, 66, 77, 0.06);
  --md-list-item-label-text-color: var(--mem-nav-item-text);
  border-radius: 0;
  margin-bottom: 0;
  min-height: 40px;
  border-right: 3px solid transparent;
  box-sizing: border-box;
}

/* Current link: light blue background + blue vertical bar on right */
#member_wrapper .menu md-list.menu-list md-list-item[activated],
#member_wrapper .menu md-list.menu-list md-list-item.is-active {
  --md-list-item-container-color: var(--mem-nav-item-active-bg);
  --md-list-item-label-text-color: var(--mem-nav-item-active-text);
  border-right: 3px solid var(--mem-nav-item-active-accent);
  background: var(--mem-nav-item-active-bg);
  font-weight: 700;
}
#member_wrapper .menu md-list.menu-list md-list-item[activated] [slot="headline"],
#member_wrapper .menu md-list.menu-list md-list-item.is-active [slot="headline"] {
  font-weight: 700;
}


#member_wrapper .menu md-list.menu-list md-list-item.menu_unfunded,
#member_wrapper .menu md-list.menu-list md-list-item[disabled] {
  --md-list-item-label-text-color: #a0a0a0;
  cursor: not-allowed;
  opacity: 0.9;
}

/* Submenu items: whole row indented right of parent; left bar for grouping */
#member_wrapper .menu md-list.menu-list md-list-item.menu_sub,
#member_wrapper .menu md-list.menu-list md-list-item.mem-portfolio-submenu-item {
  margin-left: 0;
  padding-left: 12px;
  border-left: 3px solid var(--mem-outline-variant, #E4E6EB);
  background: rgba(60, 66, 77, 0.04);
  --md-list-item-container-shape-start-start-radius: 0;
  --md-list-item-container-shape-start-end-radius: 0;
  --md-list-item-container-shape-end-end-radius: 0;
  --md-list-item-container-shape-end-start-radius: 0;
  /* Minimal space for dot so text sits close to it */
  --md-list-item-start-space: 22px;
}
/* No gap between dot icon and label */
#member_wrapper .menu md-list.menu-list md-list-item.menu_sub [slot="headline"],
#member_wrapper .menu md-list.menu-list md-list-item.mem-portfolio-submenu-item [slot="headline"] {
  padding-inline-start: 0;
}
/* Submenu active: same full highlight as main nav (background + blue bar), not just the bar */
#member_wrapper .menu md-list.menu-list md-list-item.menu_sub[activated],
#member_wrapper .menu md-list.menu-list md-list-item.menu_sub.is-active {
  --md-list-item-container-color: var(--mem-nav-item-active-bg);
  --md-list-item-label-text-color: var(--mem-nav-item-active-text);
  border-right: 3px solid var(--mem-nav-item-active-accent);
  background: var(--mem-nav-item-active-bg);
  font-weight: 700;
}
#member_wrapper .menu md-list.menu-list md-list-item.menu_sub[activated] [slot="headline"],
#member_wrapper .menu md-list.menu-list md-list-item.menu_sub.is-active [slot="headline"] {
  font-weight: 700;
}
/* Parent item with submenu: show chevron (has sub-items) */
#member_wrapper .menu md-list.menu-list md-list-item.menu_has_sub .mem-nav-submenu-chevron,
#member_wrapper .menu md-list.menu-list md-list-item.menu_has_sub md-icon.mem-nav-submenu-chevron {
  color: var(--mem-nav-item-text);
  opacity: 0.8;
}
#member_wrapper .menu md-list.menu-list md-list-item.menu_has_sub[activated] .mem-nav-submenu-chevron,
#member_wrapper .menu md-list.menu-list md-list-item.menu_has_sub.is-active .mem-nav-submenu-chevron,
#member_wrapper .menu md-list.menu-list md-list-item.menu_has_sub[activated] md-icon.mem-nav-submenu-chevron,
#member_wrapper .menu md-list.menu-list md-list-item.menu_has_sub.is-active md-icon.mem-nav-submenu-chevron {
  color: var(--mem-nav-item-active-text);
}

/* View My ePortfolio submenu: closed by default; open on click */
#member_wrapper .menu md-list.menu-list.mem-portfolio-submenu-closed md-list-item.mem-portfolio-submenu-item {
  display: none;
}
#member_wrapper .menu md-list.menu-list:not(.mem-portfolio-submenu-closed) #mem-nav-portfolio-item .mem-nav-submenu-chevron,
#member_wrapper .menu md-list.menu-list:not(.mem-portfolio-submenu-closed) #mem-nav-portfolio-item md-icon.mem-nav-submenu-chevron {
  transform: rotate(180deg);
}

/* Account Settings submenu: closed by default; open on click or when on account page */
#member_wrapper .menu md-list.menu-list.mem-account-submenu-closed md-list-item.mem-account-submenu-item {
  display: none;
}
#member_wrapper .menu md-list.menu-list:not(.mem-account-submenu-closed) #mem-nav-account-item .mem-nav-submenu-chevron,
#member_wrapper .menu md-list.menu-list:not(.mem-account-submenu-closed) #mem-nav-account-item md-icon.mem-nav-submenu-chevron {
  transform: rotate(180deg);
}

/* Footer */
#member_wrapper #footer {
  flex-shrink: 0;
  background: var(--mem-surface);
  border-top: 1px solid var(--mem-outline);
  padding: var(--mem-space-md) var(--mem-space-lg);
  font-size: var(--mem-label-size);
  color: var(--mem-on-surface-variant);
  margin-top: auto;
}

/* Public portfolio: footer full-bleed in main column (touch sidebar and right edge) */
#member_wrapper.portfolio-public #footer {
  margin-left: calc(-1 * var(--mem-space-lg));
  margin-right: calc(-1 * var(--mem-space-lg));
  width: calc(100% + 2 * var(--mem-space-lg));
}

#member_wrapper #footer p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35em;
  margin: 0;
  line-height: 1.5;
}

#member_wrapper #footer a,
#member_wrapper #footer md-text-button {
  color: var(--mem-primary);
  text-decoration: none;
}
#member_wrapper #footer md-text-button {
  --md-text-button-label-text-color: var(--mem-primary);
  padding: 0;
  min-width: 0;
  height: auto;
  line-height: inherit;
  vertical-align: baseline;
  display: inline-flex;
  align-items: center;
}
#member_wrapper #footer md-text-button:hover {
  --md-text-button-hover-label-text-color: var(--mem-primary);
  text-decoration: underline;
}

#member_wrapper #footer a:hover {
  text-decoration: underline;
}

/* Skip link */
#skip a {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: var(--mem-space-sm) var(--mem-space-md);
  background: var(--mem-primary);
  color: var(--mem-on-primary);
  text-decoration: none;
}

#skip a:focus {
  left: var(--mem-space-md);
  top: var(--mem-space-md);
}


/* Section bars (Manage ePortfolio) – CORE primary */
#member_wrapper .section_bar {
  background-color: var(--mem-primary);
  color: var(--mem-on-primary);
  padding: var(--mem-space-sm) var(--mem-space-md);
  border-radius: 8px;
  font-size: var(--mem-label-size);
  font-weight: 500;
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Manage Portfolio – M3 Outlined cards (https://m3.material.io/components/cards/overview)
   Outlined style: border, no shadow; content clipped with overflow: hidden.
   ------------------------------------------------------------------------- */
#member_wrapper .mem-m3-card {
  position: relative;
  background: var(--mem-surface);
  border-radius: 12px;
  margin-bottom: var(--mem-space-lg);
  overflow: hidden;
  border: 1px solid var(--mem-outline);
}
#member_wrapper .mem-m3-card > * {
  position: relative;
  z-index: 1;
}

#member_wrapper .mem-m3-card-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mem-space-md);
  padding: var(--mem-space-lg);
  flex-wrap: wrap;
}

#member_wrapper .mem-m3-card-body {
  position: relative;
  z-index: 1;
  padding: 0 var(--mem-space-lg) var(--mem-space-lg);
}
/* Optional: uniform padding on all sides (use when card has no header/title bar) */
#member_wrapper .mem-m3-card-body-padded {
  padding: var(--mem-space-lg);
}

/* Reusable full-width subtle divider (single source of truth for line + spacing) */
#member_wrapper .mem-m3-divider {
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  margin-top: var(--mem-space-md);
  border: none;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Reusable full-bleed: extends to main column edges (sidebar + right border); matches column padding --mem-space-xl */
#member_wrapper .mem-m3-full-bleed {
  margin-left: calc(-1 * var(--mem-space-xl));
  margin-right: calc(-1 * var(--mem-space-xl));
  width: calc(100% + 2 * var(--mem-space-xl));
  box-sizing: border-box;
}

/* Reusable content-edge: horizontal padding so content inside full-bleed aligns with main content area (mobile/tablet/desktop) */
#member_wrapper .mem-m3-content-edge {
  padding-left: var(--mem-space-xl);
  padding-right: var(--mem-space-xl);
  box-sizing: border-box;
}

#member_wrapper .mem-m3-card-title {
  font-size: var(--mem-title-size);
  font-weight: 600;
  color: var(--mem-subtext-dark);
  margin: 0 !important;
  letter-spacing: -0.01em;
}

#member_wrapper .mem-m3-card-subtitle {
  font-size: var(--mem-label-size);
  color: var(--mem-subtext);
  margin: 6px 0 0 0;
  line-height: 1.4;
}

/* Optional title bar inside card (full-width bar with border) */
#member_wrapper .mem-m3-card-title-bar {
  padding: var(--mem-space-lg) var(--mem-space-lg) var(--mem-space-md);
  margin: 0 calc(-1 * var(--mem-space-lg)) var(--mem-space-md) calc(-1 * var(--mem-space-lg));
  border-bottom: 1px solid #CCD1E0;
}
#member_wrapper .mem-m3-card-title-bar .mem-m3-card-title {
  margin: 0;
}

#member_wrapper .mem-m3-card-search-wrap {
  position: relative;
  flex-shrink: 0;
  width: 280px;
  min-width: 200px;
}

#member_wrapper .mem-m3-card-search-wrap .mem-m3-card-search {
  width: 100%;
  min-width: 180px;
}

#member_wrapper .mem-m3-card-search-wrap md-outlined-text-field.mem-m3-card-search {
  flex-shrink: 0;
  min-width: 180px;
  background-color: white;
}

#member_wrapper .mem-m3-search-clear-btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}

#member_wrapper .mem-m3-search-clear-btn[hidden] {
  display: none;
}

#member_wrapper .mem-m3-modules-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mem-body-size);
}

#member_wrapper .mem-m3-modules-table thead th {
  padding: 0px var(--mem-space-md);
  font-weight: 600;
  font-size: var(--mem-label-size);
  color: var(--mem-subtext);
  border-top: 1px solid #C1C7CD;
  border-bottom: 1px solid #C1C7CD;
  background: #F3F5F9;
  vertical-align: middle;
}

#member_wrapper .mem-m3-modules-table thead th:first-child {
  text-align: left;
  width: 100%;
}

#member_wrapper .mem-m3-modules-table thead th:nth-child(2) {
  text-align: right;
}

#member_wrapper .mem-m3-modules-table thead th:nth-child(3),
#member_wrapper .mem-m3-modules-table thead th:nth-child(4),
#member_wrapper .mem-m3-modules-table thead th:nth-child(5) {
  text-align: center;
}

#member_wrapper .mem-m3-modules-table .mem-m3-th-module {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#member_wrapper .mem-m3-th-module-label {
  vertical-align: middle;
}

#member_wrapper .mem-m3-sort-icons {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0 2px;
  vertical-align: middle;
}

#member_wrapper .mem-m3-sort-icons img {
  display: block;
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

/* Sort trigger: Material Web md-icon-button */
#member_wrapper .mem-m3-sort-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  vertical-align: middle;
}
#member_wrapper .mem-m3-sort-trigger md-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

#member_wrapper .mem-m3-card .mem-m3-modules-table {
  margin: 0;
}

/* Standards list – Back and page title OUTSIDE the card */
#member_wrapper .mem-m3-standards-page-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: var(--mem-space-md);
}
/* Back button – Figma variant: charcoal default, primary on hover, underline on label only */
#member_wrapper .mem-m3-back-link {
  --md-text-button-label-text-color: #333333;
  --md-text-button-label-text-font: var(--mem-font-family);
  --md-text-button-label-text-size: var(--mem-label-size);
  --md-text-button-label-text-weight: var(--mem-font-weight-bold);
  --md-text-button-hover-label-text-color: var(--mem-primary);
  --md-text-button-focus-label-text-color: var(--mem-primary);
  --md-text-button-pressed-label-text-color: var(--mem-primary);
  --md-text-button-icon-color: #333333;
  --md-text-button-icon-size: 20px;
  --md-text-button-hover-icon-color: var(--mem-primary);
  --md-text-button-focus-icon-color: var(--mem-primary);
  --md-text-button-pressed-icon-color: var(--mem-primary);
  --md-text-button-hover-state-layer-color: transparent;
  --md-text-button-hover-state-layer-opacity: 0;
  margin-bottom: 4px;
  min-width: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#member_wrapper .mem-m3-back-link .mem-m3-back-text {
  text-decoration: none;
  text-underline-offset: 2px;
}
#member_wrapper .mem-m3-back-link:hover .mem-m3-back-text {
  text-decoration: underline;
  text-decoration-color: var(--mem-primary);
}
#member_wrapper .mem-m3-back-link:focus-within .mem-m3-back-text {
  text-decoration: underline;
  text-decoration-color: var(--mem-primary);
}
#member_wrapper .mem-m3-back-link md-icon,
#member_wrapper .mem-m3-back-link .mem-m3-back-icon {
  flex-shrink: 0;
  display: block;
}
/* Heroicons chevron-left as img (optional): tint to ~#333 default, primary on hover */
#member_wrapper .mem-m3-back-link .mem-m3-back-icon {
  width: 20px;
  height: 20px;
  filter: invert(17%) sepia(5%) saturate(0%) hue-rotate(169deg) brightness(95%) contrast(88%);
}
#member_wrapper .mem-m3-back-link:hover .mem-m3-back-icon {
  filter: invert(27%) sepia(98%) saturate(2883%) hue-rotate(197deg) brightness(92%) contrast(97%);
}
/* Legacy back link (plain anchor + img + span) */
#member_wrapper .mem-m3-back-link.mem-m3-back-link-legacy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #333333;
  font-family: var(--mem-font-family);
  font-size: var(--mem-label-size);
  font-weight: var(--mem-font-weight-bold);
  text-decoration: none;
}
#member_wrapper .mem-m3-back-link.mem-m3-back-link-legacy:hover {
  color: var(--mem-primary);
}
#member_wrapper .mem-m3-back-link.mem-m3-back-link-legacy .mem-m3-back-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
#member_wrapper .mem-m3-back-link.mem-m3-back-link-legacy .mem-m3-back-text {
  vertical-align: middle;
  text-decoration: none;
  text-underline-offset: 2px;
}
#member_wrapper .mem-m3-back-link.mem-m3-back-link-legacy:hover .mem-m3-back-text {
  text-decoration: underline;
  text-decoration-color: var(--mem-primary);
}
#member_wrapper .mem-m3-back-link.mem-m3-back-link-legacy:focus-visible .mem-m3-back-text {
  text-decoration: underline;
  text-decoration-color: var(--mem-primary);
}
#member_wrapper .mem-m3-card-title-page {
  font-size: var(--mem-headline-size);
  font-weight: 600;
  margin: 0;
  color: var(--mem-subtext-dark);
}

/* Standards list card – only body; section title + toolbar row, then table */
#member_wrapper .mem-m3-card.mem-m3-card-standards-list .mem-m3-card-body {
  padding: var(--mem-space-lg) var(--mem-space-lg) 0;
}
#member_wrapper .mem-m3-card.mem-m3-card-standards-list {
  margin-bottom: var(--mem-space-md);
}
#member_wrapper .mem-m3-modules-list-wrap .mem-m3-card-body
{
    padding-bottom: 0px !important;
}
#member_wrapper .mem-m3-standards-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mem-space-lg);
  flex-wrap: wrap;
  margin-bottom: var(--mem-space-lg);
}

#member_wrapper .mem-m3-standards-section-title {
  font-size: var(--mem-title-size);
  font-weight: 600;
  color: var(--mem-subtext-dark);
  margin: 0 0 var(--mem-space-sm) 0;
}
#member_wrapper .mem-m3-standards-section-desc {
  font-size: var(--mem-body-size);
  color: var(--mem-subtext);
  margin: 8px 0 0 0;
  line-height: 1.5;
}
/* Search + Add new record on the RIGHT, next to each other */
#member_wrapper .mem-m3-standards-toolbar {
  display: flex;
  align-items: center;
  gap: var(--mem-space-md);
  flex-shrink: 0;
}

#member_wrapper .mem-m3-btn-add-record {
  text-decoration: none;
  flex-shrink: 0;
}
/* Add new record: lg size only (color + shape from global theme) */
#member_wrapper .mem-m3-btn-add-record md-filled-button {
  padding: 0 24px;
  font-size: var(--mem-label-size);
  font-weight: 500;
}

/* Table full width – break out of card body padding */
#member_wrapper .mem-m3-standards-table-wrap {
  margin-left: calc(-1 * var(--mem-space-lg));
  margin-right: calc(-1 * var(--mem-space-lg));
  width: calc(100% + 2 * var(--mem-space-lg));
  overflow-x: auto;
}
#member_wrapper .mem-m3-standards-save-bottom {
  padding: var(--mem-space-md) 0 0;
}
#member_wrapper .mem-m3-standards-save {
  margin-top: var(--mem-space-md);
  margin-bottom: var(--mem-space-md);
}

/* Standards table: 3 columns – Updated on right, Action right */
#member_wrapper .mem-m3-standards-table thead th:nth-child(3) {
  text-align: right;
}
#member_wrapper .mem-m3-standards-table tbody td:nth-child(3) {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
#member_wrapper .mem-m3-standards-table .mem-module-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
}
#member_wrapper .mem-m3-standards-table .mem-module-actions md-icon-button {
  display: inline-flex;
  border-radius: 8px;
}
#member_wrapper .mem-m3-standards-table .mem-module-actions md-icon-button:hover {
  background: var(--mem-surface-variant);
}

/* Edit icon primary blue in standards list */
#member_wrapper .mem-m3-standards-table .mem-module-actions a.mem-m3-icon-edit {
  color: var(--mem-primary);
}
#member_wrapper .mem-m3-standards-table .mem-module-actions a.mem-m3-icon-edit img {
  filter: invert(27%) sepia(95%) saturate(2500%) hue-rotate(208deg) brightness(95%) contrast(101%);
}

/* Duplicate icon – same primary blue as edit */
#member_wrapper .mem-m3-standards-table .mem-module-actions a.mem-m3-icon-dupe img {
  filter: invert(27%) sepia(95%) saturate(2500%) hue-rotate(208deg) brightness(95%) contrast(101%);
}
#member_wrapper .mem-m3-standards-table .mem-module-actions a.mem-m3-icon-dupe:hover {
  color: var(--mem-primary);
}

/* Delete icon – neutral grey, red on hover */
#member_wrapper .mem-m3-standards-table .mem-module-actions a.mem-m3-icon-delete {
  color: var(--mem-on-surface-variant);
}
#member_wrapper .mem-m3-standards-table .mem-module-actions a.mem-m3-icon-delete img {
  filter: invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg);
}
#member_wrapper .mem-m3-standards-table .mem-module-actions a.mem-m3-icon-delete:hover {
  color: #b71c1c;
}
#member_wrapper .mem-m3-standards-table .mem-module-actions a.mem-m3-icon-delete:hover img {
  filter: invert(16%) sepia(99%) saturate(7404%) hue-rotate(358deg) brightness(95%) contrast(118%);
}
/* Standards table: borderless icon buttons (anchor wraps md-icon-button), primary for edit/dupe */
#member_wrapper .mem-m3-standards-table .mem-module-actions a.mem-m3-icon-edit md-icon-button,
#member_wrapper .mem-m3-standards-table .mem-module-actions a.mem-m3-icon-dupe md-icon-button {
  --md-icon-button-icon-color: var(--mem-primary);
}
#member_wrapper .mem-m3-standards-table .mem-module-actions a.mem-m3-icon-edit md-icon-button md-icon,
#member_wrapper .mem-m3-standards-table .mem-module-actions a.mem-m3-icon-dupe md-icon-button md-icon {
  color: var(--mem-primary);
}
#member_wrapper .mem-m3-standards-table .mem-module-actions a.mem-m3-icon-delete md-icon-button {
  --md-icon-button-icon-color: var(--mem-on-surface-variant);
}
#member_wrapper .mem-m3-standards-table .mem-module-actions a.mem-m3-icon-delete md-icon-button md-icon {
  color: var(--mem-on-surface-variant);
}
#member_wrapper .mem-m3-standards-table .mem-module-actions a.mem-m3-icon-delete:hover md-icon-button {
  --md-icon-button-icon-color: #b71c1c;
}
#member_wrapper .mem-m3-standards-table .mem-module-actions a.mem-m3-icon-delete:hover md-icon-button md-icon {
  color: #b71c1c;
}

#member_wrapper .mem-m3-icon-lock-placeholder {
  display: inline-flex;
  padding: 6px;
  color: var(--mem-on-surface-variant);
  cursor: default;
  opacity: 0.7;
}
#member_wrapper .mem-m3-icon-lock-placeholder img {
  filter: invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg);
}
#member_wrapper .no_title_warning {
  font-size: 0.75rem;
  color: #b71c1c;
}

/* -------------------------------------------------------------------------
   Edit header content (mem_public_contact) – M3 layout
   ------------------------------------------------------------------------- */
#member_wrapper .mem-m3-public-contact-subtitle {
  font-size: var(--mem-body-size);
  color: var(--mem-on-surface-variant);
  margin: 4px 0 8px 0;
  line-height: 1.5;
}
#member_wrapper .mem-m3-card.mem-m3-card-security {
  margin-bottom: var(--mem-space-md);
}
#member_wrapper .mem-m3-card.mem-m3-card-public-contact {
  margin-bottom: var(--mem-space-lg);
}

/* Edit header content form: labels + M3 outlined fields — Lato, --mem-regular-size */
#member_wrapper .mem-m3-hint {
  font-size: var(--mem-regular-size);
}
#member_wrapper .mem-m3-field-input-wrap md-outlined-text-field {
  --md-outlined-text-field-input-text-size: var(--mem-regular-size);
  --md-outlined-text-field-input-text-font: 400 var(--mem-font-family);
  --md-outlined-text-field-input-text-line-height: 1.5;
  --md-outlined-text-field-label-text-size: var(--mem-regular-size);
  --md-outlined-text-field-label-text-populated-size: var(--mem-regular-size);
  --md-outlined-text-field-label-text-font: 400 var(--mem-font-family);
  --md-outlined-text-field-label-text-line-height: 1.5;
  --md-outlined-text-field-supporting-text-size: var(--mem-regular-size);
  --md-outlined-text-field-supporting-text-font: 400 var(--mem-font-family);
}
#member_wrapper .mem-m3-input {
  font-family: var(--mem-font-family);
  font-size: var(--mem-regular-size);
}

#member_wrapper .mem-m3-contact-section:last-of-type {
  margin-bottom: 0;
}
/* Separation bar between form sections (after Message, after Email) */
#member_wrapper #mem-public-contact-form .mem-m3-form-divider {
  height: 1px;
  background: var(--mem-outline);
  margin: var(--mem-space-xs) 0;
  border: none;
}
/* Security settings block (in its own card) */
#member_wrapper .mem-m3-security-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px var(--mem-space-md);
  padding: 0;
}
#member_wrapper .mem-m3-security-section > div {
  display: flex;
  align-items: center;
  gap: var(--mem-space-md);
}
#member_wrapper .mem-m3-security-section .mem-m3-section-heading {
  display: flex;
  align-items: center;
  gap: var(--mem-space-sm);
  font-size: var(--mem-title-size);
  font-weight: 600;
  color: var(--mem-on-surface);
  width: 100%;
  line-height: 1;
}
#member_wrapper .mem-m3-security-section .mem-m3-section-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: #CF1322;
  font-size: 30px;
}
#member_wrapper .mem-m3-security-text {
  flex: 1;
  min-width: 0;
  font-size: var(--mem-body-size);
  color: var(--mem-on-surface-variant);
  margin: 0;
  line-height: 1;
}
/* Outlined button per design: white fill, #096DD9 border and text */
#member_wrapper .mem-m3-btn-manage-key {
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
  margin-left: auto;
}
#member_wrapper .mem-m3-btn-manage-key md-outlined-button {
  --md-outlined-button-outline-color: var(--mem-primary);
}
/* Profile photo upload box */
#member_wrapper .mem-m3-profile-photo-section .mem-m3-field-row-label-lock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mem-space-md);
  margin-bottom: var(--mem-space-sm);
}
#member_wrapper .mem-m3-profile-photo-section .mem-m3-field-row-label-lock .mem-m3-field-lock-wrap {
  margin-left: auto;
}
#member_wrapper .mem-m3-profile-photo-section .mem-m3-field-row-label-lock #mem-profile-photo-heading,
#member_wrapper .mem-m3-profile-photo-section .mem-m3-field-row-label-lock .mem-m3-section-heading.mem-m3-inline-label {
  margin: 0;
}
#member_wrapper .mem-m3-profile-photo-section {
  margin-bottom: var(--mem-space-xl);
}

/* Form field rows – label + lock on one row, input below */
#member_wrapper .mem-m3-form-fields .mem-m3-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mem-space-md);
  margin-bottom: var(--mem-space-xs);
}

#member_wrapper .mem-m3-form-fields .mem-m3-field-label {
  margin-bottom: 12px
}

#member_wrapper .mem-m3-form-fields .mem-m3-section-heading {
  margin: 0;
}
#member_wrapper .mem-m3-form-fields .mem-m3-field-input-wrap {
  margin-bottom: var(--mem-space-md);
}
#member_wrapper .mem-m3-form-fields .mem-m3-field-input-wrap:last-child {
  margin-bottom: 0;
}
/* Full name + Alternate name side by side on desktop */
#member_wrapper .mem-m3-fullname-alt-section {
  margin-top: var(--mem-space-lg);
}
#member_wrapper .mem-m3-fullname-alt-section .mem-m3-fullname-alt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--mem-space-md);
  align-items: start;
}
#member_wrapper .mem-m3-fullname-alt-section .mem-m3-field-group {
  min-width: 0;
}
/* Same-height label rows so Full name and Alternate name align vertically */
#member_wrapper .mem-m3-fullname-alt-section .mem-m3-field-group .mem-m3-field-row {
  min-height: 40px;
  align-items: center;
}
#member_wrapper .mem-m3-fullname-alt-section .mem-m3-field-group .mem-m3-field-input-wrap {
  margin-bottom: var(--mem-space-md);
}
#member_wrapper .mem-m3-fullname-alt-section .mem-m3-field-group:last-child .mem-m3-field-input-wrap {
  margin-bottom: 0;
}
#member_wrapper .mem-m3-field-label {
  font-size: var(--mem-regular-size);
  font-weight: 600;
  color: var(--mem-on-surface);
}
/* Bracket / secondary line below field title (Edit header content — Figma) */
#member_wrapper .mem-m3-field-label-stacked.mem-m3-field-label-flex-stacked {
  display: flex;
  align-items: flex-end;
  gap: var(--mem-space-xs);
  flex-wrap: wrap;
}

/* Bracket / secondary line below field title (Edit header content — Figma) */
#member_wrapper .mem-m3-field-label-stacked.mem-m3-field-label-v-stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mem-space-xs);
  line-height: 1.35;
}

#member_wrapper .mem-m3-field-label-stacked .mem-m3-field-label-title {
  display: block;
  font-weight: 600;
  color: var(--mem-on-surface);
}
#member_wrapper .mem-m3-field-label-stacked .mem-m3-field-label-sub {
  display: block;
  font-weight: 400;
  font-size: var(--mem-regular-size);
  color: var(--mem-on-surface-variant);
}
#member_wrapper .mem-m3-fullname-alt-section .mem-m3-field-row-stacked-label {
  align-items: flex-start;
  min-height: auto;
}
#member_wrapper .mem-m3-form-fields .mem-m3-field-row-label-lock:has(.mem-m3-field-label-stacked) {
  align-items: flex-start;
}
#member_wrapper .mem-m3-required {
  color: #b71c1c;
}
#member_wrapper .mem-m3-hint {
  font-weight: 400;
  color: var(--mem-on-surface-variant);
  font-size: 0.8125rem;
}
#member_wrapper .mem-m3-field-lock-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  margin-left: auto;
}
#member_wrapper .mem-m3-field-lock-wrap .mem-m3-lock-text-btn.mem-m3-lock-icon {
  display: inline-flex;
  align-items: center;
  --md-text-button-label-text-size: 14px;
  --md-text-button-label-text-weight: 600;
  --md-text-button-icon-size: 22px;
  --md-text-button-hover-state-layer-color: transparent;
  --md-text-button-hover-state-layer-opacity: 0;
}
#member_wrapper .mem-m3-field-lock-wrap .icon_lock {
  cursor: pointer;
}
/* Public contact lock toggles — M3 text button + leading icon */
#member_wrapper .mem-m3-field-lock-wrap .mem-m3-lock-text-btn.mem-m3-lock-icon.unlocked {
  --md-text-button-label-text-color: var(--mem-primary);
  --md-text-button-icon-color: var(--mem-primary);
  --md-text-button-hover-label-text-color: var(--mem-primary);
  --md-text-button-hover-icon-color: var(--mem-primary);
  --md-text-button-focus-label-text-color: var(--mem-primary);
  --md-text-button-focus-icon-color: var(--mem-primary);
  --md-text-button-pressed-label-text-color: var(--mem-primary);
  --md-text-button-pressed-icon-color: var(--mem-primary);

    /* Lock label (field unlocked): error state layer + ripple (md-ripple reads these from host) */
    --md-text-button-hover-state-layer-color: var(--mem-primary);
    --md-text-button-hover-state-layer-opacity: 0.12;
    --md-text-button-pressed-state-layer-color: var(--mem-primary);
    --md-text-button-pressed-state-layer-opacity: 0.14;
    --md-ripple-hover-color: var(--mem-primary);
    --md-ripple-pressed-color: var(--mem-primary);
}
#member_wrapper .mem-m3-field-lock-wrap .mem-m3-lock-text-btn.mem-m3-lock-icon.locked {
  --md-text-button-label-text-color: var(--mem-error);
  --md-text-button-icon-color: var(--mem-error);
  --md-text-button-hover-label-text-color: var(--mem-error);
  --md-text-button-hover-icon-color: var(--mem-error);
  --md-text-button-focus-label-text-color: var(--mem-error);
  --md-text-button-focus-icon-color: var(--mem-error);
  --md-text-button-pressed-label-text-color: var(--mem-error);
  --md-text-button-pressed-icon-color: var(--mem-error);
  
  /* Unlock label (field locked): error state layer + ripple (md-ripple reads these from host) */
  --md-text-button-hover-state-layer-color: var(--mem-error);
  --md-text-button-hover-state-layer-opacity: 0.12;
  --md-text-button-pressed-state-layer-color: var(--mem-error);
  --md-text-button-pressed-state-layer-opacity: 0.14;
  --md-ripple-hover-color: var(--mem-error);
  --md-ripple-pressed-color: var(--mem-error);
}
#member_wrapper .mem-m3-field-lock-wrap .mem-m3-lock-text-btn.mem-m3-lock-icon.unlocked .mem-m3-lock-hint {
  color: var(--mem-primary);
}
#member_wrapper .mem-m3-field-lock-wrap .mem-m3-lock-text-btn.mem-m3-lock-icon.locked .mem-m3-lock-hint {
  color: var(--mem-error);
}
#member_wrapper .mem-m3-field-lock-wrap .mem-m3-lock-text-btn.mem-m3-lock-icon .mem-m3-lock-hint {
  font-size: 14px;
  white-space: nowrap;
  font-weight: 600;
  font-family: 'Lato', sans-serif;
}
/* M3 text field components (md-outlined-text-field) in contact form */
#member_wrapper .mem-m3-field-input-wrap md-outlined-text-field {
  width: 100%;
  max-width: 100%;
}
#member_wrapper .mem-m3-field-input-wrap md-outlined-text-field[type="textarea"] {
  resize: vertical;
  min-height: 100px;
}
#member_wrapper .mem-m3-textarea {
  min-height: 100px;
  resize: vertical;
}
#member_wrapper .mem-m3-field-note {
  font-size: 0.8125rem;
  color: var(--mem-on-surface-variant);
  margin: var(--mem-space-xs) 0 0 0;
}
#member_wrapper .mem-m3-char-count {
  display: block;
  font-size: 0.75rem;
  color: var(--mem-on-surface-variant);
  margin-top: var(--mem-space-xs);
}
#member_wrapper .mem-m3-inline-label {
  font-size: var(--mem-label-size);
  font-weight: 600;
  margin: 0;
}

/* Cancel: grey outline, white bg (override global primary outline) */
#member_wrapper md-outlined-button.mem-m3-btn-cancel {
  --md-outlined-button-outline-color: var(--mem-outline);
  --md-outlined-button-container-color: var(--mem-surface);
  --md-outlined-button-label-text-color: var(--mem-on-surface);
}
/* Save after reorder: primary filled (uses --mem-primary from #member_wrapper) */
#member_wrapper .mem-m3-reorder-save md-filled-button,
#member_wrapper .mem-m3-standards-save md-filled-button {
  --md-filled-button-container-color: var(--mem-primary);
  --md-filled-button-label-text-color: var(--mem-on-primary);
}
#member_wrapper .mem-m3-success-msg {
  font-size: var(--mem-body-size);
  color: #2e7d32;
  margin: var(--mem-space-md) 0 0 0;
}

#member_wrapper .mem-m3-modules-table tbody td {
  padding: var(--mem-space-md);
  height: 72px;
  border-bottom: 1px solid #C1C7CD;
  vertical-align: middle;
}
#member_wrapper .mem-m3-modules-table tbody tr:last-child td {
    border-bottom: 1px solid #c1c7cd00;
}

#member_wrapper .mem-m3-modules-table tbody td:nth-child(2) {
  text-align: right;
}

#member_wrapper .mem-m3-modules-table tbody td:nth-child(3),
#member_wrapper .mem-m3-modules-table tbody td:nth-child(4),
#member_wrapper .mem-m3-modules-table tbody td:nth-child(5) {
  text-align: center;
}

/* Updated on column: same font size and color as rest of table */
#member_wrapper .mem-m3-modules-table tbody td {
  font-size: var(--mem-regular-size);
  font-weight: inherit;
  color: var(--mem-subtext-dark);
  padding: 12px var(--mem-space-md);
}

#member_wrapper .mem-m3-modules-table .mem-module-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Active table only: draggable rows (reorder) */
#member_wrapper #mem-active-modules-tbody tr.mem-m3-row-hidden,
#member_wrapper #mem-inactive-modules-tbody tr.mem-m3-row-hidden,
#member_wrapper #mem-standards-list-tbody tr.mem-m3-row-hidden {
  display: none !important;
}

#member_wrapper #mem-active-modules-tbody tr.mem-m3-draggable-row {
  cursor: default;
}

#member_wrapper #mem-active-modules-tbody tr.mem-m3-draggable-row .mem-m3-drag-handle {
  cursor: grab;
}

#member_wrapper #mem-active-modules-tbody tr.mem-m3-draggable-row .mem-m3-drag-handle:active {
  cursor: grabbing;
}

#member_wrapper #mem-active-modules-tbody tr.mem-m3-draggable-row {
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

#member_wrapper #mem-active-modules-tbody tr.mem-m3-draggable-row.mem-m3-dragging {
  opacity: 0.9;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  background: var(--mem-surface) !important;
}

/* Drop indicator: absolutely positioned in first cell so table layout never shifts */
@keyframes mem-m3-drop-line-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Mobile card lists: pulse so the slot reads as “drop here”, not a border */
@keyframes mem-m3-drop-slot-pulse {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.82;
    filter: brightness(1.08);
  }
}

#member_wrapper #mem-active-modules-tbody tr.mem-m3-draggable-row.mem-m3-insert-before td:first-child {
  position: relative;
}

#member_wrapper #mem-active-modules-tbody tr.mem-m3-draggable-row.mem-m3-insert-before td:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 4px;
  background: var(--mem-primary);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(32, 118, 188, 0.6);
  animation: mem-m3-drop-line-in 0.2s ease forwards;
  z-index: 1;
}

#member_wrapper #mem-active-modules-tbody tr.mem-m3-draggable-row.mem-m3-insert-after td:first-child {
  position: relative;
}

#member_wrapper #mem-active-modules-tbody tr.mem-m3-draggable-row.mem-m3-insert-after td:first-child::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 4px;
  background: var(--mem-primary);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(32, 118, 188, 0.6);
  animation: mem-m3-drop-line-in 0.2s ease forwards;
  z-index: 1;
}

/* Standards list table: same drag/drop and drop indicators */
#member_wrapper #mem-standards-list-tbody tr.mem-m3-draggable-row {
  cursor: default;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
#member_wrapper #mem-standards-list-tbody tr.mem-m3-draggable-row .mem-m3-drag-handle {
  cursor: grab;
}
#member_wrapper #mem-standards-list-tbody tr.mem-m3-draggable-row .mem-m3-drag-handle:active {
  cursor: grabbing;
}
#member_wrapper #mem-standards-list-tbody tr.mem-m3-draggable-row.mem-m3-dragging {
  opacity: 0.9;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  background: var(--mem-surface) !important;
  /* Touch drag: let elementFromPoint hit the row under the finger */
  pointer-events: none;
}
#member_wrapper #mem-standards-list-tbody tr.mem-m3-draggable-row.mem-m3-insert-before td:first-child {
  position: relative;
}
#member_wrapper #mem-standards-list-tbody tr.mem-m3-draggable-row.mem-m3-insert-before td:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 4px;
  background: var(--mem-primary);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(32, 118, 188, 0.6);
  animation: mem-m3-drop-line-in 0.2s ease forwards;
  z-index: 1;
}
#member_wrapper #mem-standards-list-tbody tr.mem-m3-draggable-row.mem-m3-insert-after td:first-child {
  position: relative;
}
#member_wrapper #mem-standards-list-tbody tr.mem-m3-draggable-row.mem-m3-insert-after td:first-child::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 4px;
  background: var(--mem-primary);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(32, 118, 188, 0.6);
  animation: mem-m3-drop-line-in 0.2s ease forwards;
  z-index: 1;
}

#member_wrapper .mem-m3-drag-handle {
  display: inline-flex;
  cursor: grab;
  touch-action: none;
}

#member_wrapper .mem-m3-drag-handle:active {
  cursor: grabbing;
}

#member_wrapper .mem-m3-drag-icon {
  flex-shrink: 0;
  color: var(--mem-on-surface-variant);
  opacity: 0.7;
  pointer-events: none;
}

/* Icon-only tooltip (Manage/View/Share/Reports) */
#member_wrapper .mem-m3-tooltip-target {
  position: relative;
}

#member_wrapper .mem-m3-tooltip-target::before,
#member_wrapper .mem-m3-tooltip-target::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 9999;
}

#member_wrapper .mem-m3-tooltip-target::before {
  content: attr(data-m3-tooltip);
  bottom: calc(100% + 10px);
  transform: translate(-50%, 4px);
  background: #2f3542;
  color: #ffffff;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.05;
  white-space: nowrap;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

#member_wrapper .mem-m3-tooltip-target::after {
  content: '';
  bottom: calc(100% + 2px);
  transform: translate(-50%, 4px);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #2f3542;
}

#member_wrapper .mem-m3-tooltip-target:hover::before,
#member_wrapper .mem-m3-tooltip-target:hover::after,
#member_wrapper .mem-m3-tooltip-target:focus-visible::before,
#member_wrapper .mem-m3-tooltip-target:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  #member_wrapper .mem-m3-tooltip-target::before,
  #member_wrapper .mem-m3-tooltip-target::after {
    transition: none;
  }
}

.mem-m3-tooltip-pop {
  position: fixed;
  z-index: 100000;
  background: #2f3542;
  color: #ffffff;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.05;
  white-space: nowrap;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.mem-m3-tooltip-pop::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #2f3542;
}

.mem-m3-tooltip-pop.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Inactive/Library table: no drag (⋮⋮ is visual only) */
#member_wrapper .mem-m3-modules-table .mem-module-drag {
  color: var(--mem-on-surface-variant);
  cursor: default;
}

#member_wrapper .mem-m3-modules-table .mem-module-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#member_wrapper .mem-m3-modules-table .mem-module-actions a,
#member_wrapper .mem-m3-modules-table .mem-module-actions md-icon-button {
  display: inline-flex;
  color: var(--mem-on-surface-variant);
  border-radius: 8px;
}
/* Anchor wrap: let click pass through to <a> so navigation works */
#member_wrapper .mem-module-actions a.mem-m3-action-link-wrap {
  text-decoration: none;
}
#member_wrapper .mem-module-actions a.mem-m3-action-link-wrap md-icon-button {
  pointer-events: none;
}

#member_wrapper .mem-m3-modules-table .mem-module-actions a:hover,
#member_wrapper .mem-m3-modules-table .mem-module-actions md-icon-button:hover {
  background: var(--mem-surface-variant);
}

/* Edit icon: borderless (md-icon-button) – primary icon only */
#member_wrapper .mem-m3-icon-edit img,
#member_wrapper .mem-m3-icon-edit {
  color: var(--mem-primary);
}
#member_wrapper .mem-module-actions a.mem-m3-icon-edit md-icon-button {
  --md-icon-button-icon-color: var(--mem-primary);
}
#member_wrapper .mem-module-actions a.mem-m3-icon-edit md-icon-button md-icon {
  color: var(--mem-primary);
}

/* Lock icon: borderless – primary when unlocked, red when locked */
#member_wrapper .mem-m3-icon-lock img {
  filter: invert(27%) sepia(95%) saturate(2500%) hue-rotate(208deg) brightness(95%) contrast(101%);
}
#member_wrapper .mem-module-actions a.mem-m3-icon-lock md-icon-button {
  --md-icon-button-icon-color: var(--mem-primary);
}
#member_wrapper .mem-module-actions a.mem-m3-icon-lock md-icon-button md-icon {
  color: var(--mem-primary);
}
#member_wrapper .mem-module-actions a.mem-m3-icon-lock.mem-m3-locked md-icon-button {
  --md-icon-button-icon-color: #b71c1c;
}
#member_wrapper .mem-module-actions a.mem-m3-icon-lock.mem-m3-locked md-icon-button md-icon {
  color: #b71c1c;
}

#member_wrapper .mem-m3-icon-lock.mem-m3-locked img {
  filter: invert(16%) sepia(99%) saturate(7404%) hue-rotate(358deg) brightness(95%) contrast(118%);
}

#member_wrapper .mem-module-actions .mem-m3-heroicon,
#member_wrapper .mem-module-actions img.mem-m3-heroicon {
  display: block;
}

/* Profile card (Manage) – photo, details, View portfolio, Connect, quote */
#member_wrapper .mem-m3-profile-card {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-space-lg);
  padding: var(--mem-space-lg);
  align-items: flex-start;
}

#member_wrapper .mem-m3-profile-photo {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--mem-surface-variant);
}

#member_wrapper .mem-m3-profile-details {
  flex: 1;
  min-width: 0;
}

#member_wrapper .mem-m3-profile-name {
  font-size: var(--mem-title-size);
  font-weight: 600;
  color: var(--mem-on-surface);
  margin: 0 0 4px 0;
}

#member_wrapper .mem-m3-profile-title,
#member_wrapper .mem-m3-profile-meta {
  font-size: var(--mem-body-size);
  color: var(--mem-on-surface-variant);
  margin: 0 0 8px 0;
}

#member_wrapper .mem-m3-profile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

#member_wrapper .mem-m3-connect {
  margin-top: var(--mem-space-md);
  padding-top: var(--mem-space-md);
  border-top: 1px solid var(--mem-outline);
}

#member_wrapper .mem-m3-connect-title {
  font-size: var(--mem-label-size);
  font-weight: 600;
  color: var(--mem-on-surface-variant);
  margin: 0 0 8px 0;
}

#member_wrapper .mem-m3-connect-icons a {
  display: inline-flex;
  margin-right: 8px;
  color: var(--mem-on-surface-variant);
}

#member_wrapper .mem-m3-connect-icons a:hover {
  color: var(--mem-primary);
}

#member_wrapper .mem-m3-profile-quote {
  font-style: italic;
  font-size: var(--mem-body-size);
  color: var(--mem-on-surface-variant);
  margin: var(--mem-space-md) 0 0 0;
  padding-top: var(--mem-space-md);
  border-top: 1px solid var(--mem-outline);
}

/* When contact block is the only card (e.g. in #modules_wrapper), give it card look; no nested card */
/* Contact block on manage portfolio: when inside M3 card, card provides outline. Also public portfolio. */
#member_wrapper .mem-m3-card-contact {
  margin-bottom: var(--mem-space-lg);
}
#member_wrapper .mem-m3-card-contact #static_contact_info {
  border: none !important;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

/* Contact block – profile header (photo, details, actions, footer) – single selector */
#member_wrapper #static_contact_info.mem-m3-contact-block {
  padding: 0;
  overflow: hidden;
  /* Square avatar, rounded “squircle” (matches ePortfolio card design) */
  --mem-contact-photo-size: 213px;
  --mem-contact-photo-radius: 8px;
}

#member_wrapper #static_contact_info .mem-m3-profile-header {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--mem-space-lg);
  row-gap: 0;
  align-items: flex-start;
  padding: var(--mem-space-md);
  text-align: start;
}

#member_wrapper #static_contact_info .mem-m3-profile-head-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--mem-space-md);
  width: 100%;
  min-width: 0;
}

#member_wrapper #static_contact_info .mem-m3-profile-actions {
    margin-left: calc(var(--mem-contact-photo-size) + 40px);
}

/* Contact header design: Connect + social icons */
#member_wrapper #static_contact_info .mem-m3-social-block {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--mem-space-md);
  flex-wrap: wrap;
}


#member_wrapper #static_contact_info .mem-m3-social-block .mem-m3-connect-label {
  font-size: var(--mem-label-size);
  font-weight: 500;
  color: var(--mem-on-surface);
}

#member_wrapper #static_contact_info .mem-m3-social-block .mem-m3-social-icons-row {
  display: flex;
  align-items: center;
  flex:1 0 0;
}

#member_wrapper #static_contact_info .mem-m3-social-block a {
  display: inline-block;
}

/* Contact “desktop” layout: from 745px up — social column top-right, compact action row (see max 744 for stacked CTA) */
@media screen and (min-width: 745px) {
  #member_wrapper #static_contact_info .mem-m3-profile-name-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 20px;
    align-items: start;
  }

  #member_wrapper #static_contact_info .mem-m3-profile-name-wrap .mem-m3-social-block {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    margin-top: 0;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  #member_wrapper #static_contact_info .mem-m3-profile-name-wrap .mem-m3-social-block .mem-m3-social-icons-row {
    width: 100%;
    justify-content: flex-start;
  }

  #member_wrapper #static_contact_info .mem-m3-profile-name-wrap .mem-m3-profile-name,
  #member_wrapper #static_contact_info .mem-m3-profile-name-wrap .mem-m3-profile-title,
  #member_wrapper #static_contact_info .mem-m3-profile-name-wrap .mem-m3-profile-meta {
    grid-column: 1;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-name-wrap .mem-m3-profile-title {
    margin-top: 0;
  }

  #member_wrapper #static_contact_info .mem-m3-profile-name .mem-m3-profile-aka-line {
    display: inline;
    white-space: nowrap;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-name-wrap .mem-m3-profile-title {
    /* margin-top: -20px; */
  }

  /* Refined right alignment + action row position (previously 1024px+ only) */
  #member_wrapper #static_contact_info .mem-m3-social-block {
    position: absolute;
    top: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0;
    gap: 6px;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-head-row {
    position: relative;
    padding-right: 180px;
  }
  

  #member_wrapper.portfolio-public #header .mem-sidebar-menu-btn {
    display: none !important;
  }
}


#member_wrapper #static_contact_info .mem-m3-profile-name-wrap {
  min-width: 0;
  flex: 1;
  overflow-wrap: break-word;
  word-break: break-word;
}

#member_wrapper #static_contact_info .mem-m3-profile-aka {
  display: inline;
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  color: var(--mem-on-surface-variant);
  margin-left: 0.35em;
}

#member_wrapper #static_contact_info .mem-m3-profile-alt-name {
  display: inline;
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
  color: var(--mem-subtext-dark);
  margin-left: 0.15em;
}

#member_wrapper #static_contact_info .mem-m3-social-top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-left: 0;
}

#member_wrapper #static_contact_info .mem-m3-social-top-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#member_wrapper #static_contact_info .mem-m3-social-icons-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mem-m3-social-icons-row {
  width: 162px !important;
  flex-wrap: wrap !important;
}

#member_wrapper #static_contact_info .mem-m3-connect-label {
  font-size: var(--mem-label-size);
  font-weight: 500;
  color: var(--md-list-item-label-text-color);
}

#member_wrapper #static_contact_info .mem-m3-social-top a {
  display: inline-block;
}
/* Social icon locked: same icon with overlay lock (no separate locked icon) */
#member_wrapper #static_contact_info .mem-m3-social-top a.mem-m3-social-icon-locked .mem-m3-social-icon-wrap,
#member_wrapper #static_contact_info .mem-m3-social-block a.mem-m3-social-icon-locked .mem-m3-social-icon-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

/* Social icon locked: same icon with overlay lock (no separate locked icon) */
#member_wrapper #static_contact_info .mem-m3-social-top a.mem-m3-social-icon-locked .mem-m3-social-icon-wrap >  img,
#member_wrapper #static_contact_info .mem-m3-social-block a.mem-m3-social-icon-locked .mem-m3-social-icon-wrap > img {
  min-height: 26px !important;
  min-width: 26px !important;
}

#member_wrapper #static_contact_info .mem-m3-social-top a.mem-m3-social-icon-locked .mem-m3-social-lock-overlay,
#member_wrapper #static_contact_info .mem-m3-social-block a.mem-m3-social-icon-locked .mem-m3-social-lock-overlay {
  position: absolute;
  right: -12px;
  bottom: -12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--mem-surface);
  border-radius: 50%;
  border:1px solid var(--mem-error)
}
#member_wrapper #static_contact_info .mem-m3-social-top a.mem-m3-social-icon-locked .mem-m3-social-lock-overlay img,
#member_wrapper #static_contact_info .mem-m3-social-block a.mem-m3-social-icon-locked .mem-m3-social-lock-overlay img {
  width: 16px;
  height: 16px;
  display: block;
  filter: invert(27%) sepia(98%) saturate(7471%) hue-rotate(355deg) brightness(91%) contrast(118%)
}

/* No legacy oval/shadow: override main.css #profile_photo box-shadow that shows before image loads */
#member_wrapper #static_contact_info .mem-m3-profile-photo-wrap,
#member_wrapper #static_contact_info .mem-m3-profile-photo-wrap #profile_photo,
#member_wrapper #static_contact_info .mem-m3-profile-photo-wrap .mem-m3-profile-photo,
#member_wrapper #static_contact_info .mem-m3-profile-photo-wrap a#profile_photo {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

#member_wrapper #static_contact_info .mem-m3-profile-photo-wrap {
  flex-shrink: 0;
  width: var(--mem-contact-photo-size);
  height: 252px;
  border-radius: var(--mem-contact-photo-radius);
  overflow: hidden;
  background: #F3F4F5;
}

#member_wrapper #static_contact_info .mem-m3-profile-photo-placeholder {
  border: 2px dashed #CFD4D7;
  display: flex;
  align-items: center;
  justify-content: center;
}

#member_wrapper #static_contact_info .mem-m3-profile-photo-wrap .mem-m3-profile-photo,
#member_wrapper #static_contact_info .mem-m3-profile-photo-wrap #profile_photo {
  width: 100%;
  height: 100%;
  display: block;
}

#member_wrapper #static_contact_info .mem-m3-profile-photo-wrap .mem-m3-profile-photo img,
#member_wrapper #static_contact_info .mem-m3-profile-photo-wrap #profile_photo img,
#member_wrapper #static_contact_info .mem-m3-profile-photo-wrap .mem-m3-profile-photo-img,
#member_wrapper #static_contact_info .mem-m3-profile-photo-wrap a#profile_photo .mem-m3-profile-photo-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#member_wrapper #static_contact_info .mem-m3-profile-photo-wrap--member-lock {
  position: relative;
}


#member_wrapper #static_contact_info .mem-m3-profile-photo-inner {
  display: block;
  width: 100%;
  height: 100%;
}

#member_wrapper #static_contact_info .mem-m3-profile-photo-lock-overlay-container {
  position: absolute;
  bottom: 8%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#member_wrapper #static_contact_info .mem-m3-profile-photo-lock-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px;
  background: #F0F2F5;
  text-align: center;
  pointer-events: none;
  border-radius: 32px;
  color: #3C424D;
}

@media (max-width: 992px) {
  #member_wrapper #static_contact_info .mem-m3-profile-photo-lock-overlay .mem-m3-lock-hint-muted {
   display: none !important;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-photo-unlock-pill-label {
    display: none !important;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-photo-unlock-sub {
    display: none !important;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-photo-unlock-pill {
    padding: 4px !important;
    background: #F0F2F5 !important;
    text-align: center;
    pointer-events: none !important;
    border-radius: 32px !important;
    color: #3C424D !important;
    width: 100% !important;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-photo-unlock-cta-inner {
    width: 80% !important;
    margin-top: auto !important;
    margin-bottom: 8% !important;
  }
}

#member_wrapper #static_contact_info .mem-m3-profile-photo-lock-overlay .mem-m3-lock-hint-muted {
  font-size: 14px;
  line-height: 1.3;
  max-width: 11rem;
}
#member_wrapper #static_contact_info .mem-m3-profile-photo-lock-overlay .mem-m3-photo-lock-overlay-img {
  width: 16px !important;
  height: 16px !important;
}


#member_wrapper #static_contact_info .mem-m3-profile-photo-wrap--unlock-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#member_wrapper.portfolio-public #static_contact_info .mem-m3-profile-photo-wrap--unlock-cta .mem-m3-profile-photo-unlock-underlay-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

#member_wrapper.portfolio-public #static_contact_info .mem-m3-profile-photo-wrap--unlock-cta .mem-m3-profile-photo-unlock-underlay-wrap .mem-m3-profile-photo-unlock-underlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: blur(12px);
}

#member_wrapper.portfolio-public #static_contact_info .mem-m3-profile-photo-wrap--unlock-cta .mem-m3-profile-photo-unlock-underlay-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, gray 100%);
}

#member_wrapper.portfolio-public #static_contact_info .mem-m3-profile-photo-wrap--unlock-cta .mem-m3-profile-photo-unlock-cta {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

#member_wrapper.portfolio-public #static_contact_info .mem-m3-profile-photo-unlock-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  margin-top: 12px;
}

#member_wrapper.portfolio-public #static_contact_info .mem-m3-profile-photo-unlock-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}

#member_wrapper.portfolio-public #static_contact_info .mem-m3-profile-photo-unlock-pill-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

#member_wrapper.portfolio-public #static_contact_info .mem-m3-profile-photo-unlock-pill-label {
  font-family: var(--mem-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--mem-error, #cf1322);
}

#member_wrapper.portfolio-public #static_contact_info .mem-m3-profile-photo-unlock-sub {
  margin: 0;
  font-size: 14px;
  font-style: italic;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  line-height: 1.35;
}

#member_wrapper .mem-m3-share-contact-preview #static_contact_info {
  margin: 0;
}

#member_wrapper .mem-m3-share-contact-preview .mem-m3-profile-header {
  flex-wrap: wrap;
}

#member_wrapper #static_contact_info .mem-m3-profile-details {
  flex: 1;
  min-width: 12rem;
  color: var(--mem-subtext-dark);
  position: relative;
  text-align: start;
}

@media (min-width: 1200px) {
  #member_wrapper:not(.portfolio-public) #static_contact_info .mem-m3-profile-details {
    margin-bottom: 48px;
  }
}

#member_wrapper #static_contact_info .mem-m3-profile-name {
  font-size: 30px;
  font-weight: 600;
  color: var(--mem-subtext-dark);
  margin: 0 0 0.35rem 0;
  line-height: 1.25;
  max-width: 100%;
  min-width: 0;
}

/* Alternate-only name (full name locked): lock + KeyCode hint next to display name */
#member_wrapper #static_contact_info .mem-m3-profile-name .mem-m3-profile-name-unlock {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em 0.35em;
  margin-left: 0.35em;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

#member_wrapper #static_contact_info .mem-m3-profile-title,
#member_wrapper #static_contact_info .mem-m3-profile-meta {
  font-size: var(--mem-body-size);
  color: var(--mem-subtext-dark);
  margin: 0 0 0.5em 0;
  line-height: 1.4;
}

#member_wrapper #static_contact_info .mem-m3-profile-meta.mem-m3-contact-row {
  margin-bottom: var(--mem-space-sm);
}

#member_wrapper #static_contact_info .mem-m3-profile-title {
  font-size: 20px;
  margin-bottom: 0.35em;
}

#member_wrapper #static_contact_info .mem-m3-contact-icon {
  color: var(--mem-subtext-dark);
  width: 1em;
  margin-right: 6px;
  opacity: 0.85;
}

#member_wrapper #static_contact_info .mem-m3-heroicon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

#member_wrapper #static_contact_info .mem-m3-contact-icon.mem-m3-heroicon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

#member_wrapper #static_contact_info .mem-m3-contact-row {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 14px;
}

#member_wrapper #static_contact_info .mem-m3-contact-row .mem-m3-contact-icon {
  margin-right: 8px;
  flex-shrink: 0;
}

#member_wrapper #static_contact_info .mem-m3-contact-lock-inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em 0.35em;
  margin-left: 0.35em;
  vertical-align: middle;
  font-family: var(--mem-font-family);
}

#member_wrapper .mem-m3-portfolio-view .mem-m3-contact-row:has(.mem-m3-lock-unlock-link) {
  flex-wrap: wrap;
}

#member_wrapper #static_contact_info .mem-m3-contact-lock-inline img {
  width: 18px;
  height: 18px;
}

#member_wrapper #static_contact_info .mem-m3-contact-lock-inline a:not(.mem-m3-lock-unlock-link) {
  display: flex;
}

#member_wrapper #static_contact_info a.mem-m3-lock-unlock-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  text-decoration: none;
  color: #cf1322;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.35;
  min-height: 24px;
  min-width: 24px;
}

#member_wrapper #static_contact_info a.mem-m3-lock-unlock-link .mem-m3-icon-locked {
  flex-shrink: 0;
}

#member_wrapper #static_contact_info .mem-m3-lock-unlock-label {
  color: var(--mem-error, #cf1322);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.35;
}
#member_wrapper #static_contact_info .mem-m3-lock-hint-muted {
  color: var(--mem-subtext, #4D535E);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  font-style: italic;
}

@media (max-width: 767px) {
  #member_wrapper #static_contact_info .mem-m3-lock-hint-muted {
    display: none;
  }
  #member_wrapper #static_contact_info .mem-m3-contact-lock-inline img {
    width: 16px;
    height: 16px;
  }
}

@media (min-width: 768px) {
  #member_wrapper #static_contact_info .mem-m3-contact-row {
    flex-wrap: wrap;
  }
}

#member_wrapper #static_contact_info .mem-m3-profile-actions {
  display: flex;
  align-items: center;
  gap: var(--mem-space-sm);
  flex-basis: 100%;
  margin-bottom: var(--mem-space-md);
}

#member_wrapper:not(.portfolio-public) #static_contact_info  .mem-m3-profile-actions {
    margin-top: -3.5rem;
}

#member_wrapper.portfolio-public  #static_contact_info .mem-m3-profile-actions {
    display: none;
}

#member_wrapper #static_contact_info .mem-m3-profile-actions .mem-m3-profile-action-link {
  text-decoration: none;
}


/* Contact block outlined icon button: primary outline + icon (shape from global) */
#member_wrapper #static_contact_info .mem-m3-profile-actions md-outlined-icon-button {
  --md-outlined-icon-button-outline-color: var(--mem-primary);
  --md-icon-button-icon-color: var(--mem-primary);
}

/* Slotted icon: ensure primary color (icon may stay in light DOM) */
#member_wrapper #static_contact_info .mem-m3-profile-actions md-outlined-icon-button md-icon {
  color: var(--mem-primary);
  fill: var(--mem-primary);
}

#member_wrapper #static_contact_info .mem-m3-profile-footer {
  background: #F0F2F5;
  padding: var(--mem-space-md);
  border-top: 1px solid #E4E6EB;
}

#member_wrapper #static_contact_info .mem-m3-profile-footer .mem-m3-profile-message {
  font-size: var(--mem-body-size);
  color: var(--mem-subtext-dark);
  line-height: 1.4;
  font-family: var(--mem-font-family);
  font-weight: 700;
}

#member_wrapper #static_contact_info .mem-m3-profile-footer .mem-m3-profile-message::before {
  content: '"';
}

#member_wrapper #static_contact_info .mem-m3-profile-footer .mem-m3-profile-message::after {
  content: '"';
}

/* Override legacy post-note oval/shadow from modules_manage inline styles */
#member_wrapper #static_contact_info .mem-m3-profile-footer #message_block {
  background-image: none !important;
  background-repeat: no-repeat !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  position: static !important;
  top: auto !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

#member_wrapper #static_contact_info .mem-m3-profile-footer #message_text {
  margin-left: 0;
  width: 100%;
  height: auto;
  padding: 0;
  font-family: var(--mem-font-family);
}

/*
 * Contact profile card — mobile only (≤767px): white bordered card, Connect label above icons,
 * full-width action row(s). Uses design tokens so tablet/desktop rules stay unchanged above 768px.
 */
@media (max-width: 767px) {
  #member_wrapper .mem-m3-card-contact #static_contact_info.mem-m3-contact-block {
    --mem-m3-contact-card-bg: #fff;
    --mem-m3-contact-card-border: 1px solid #d7dce3;
    --mem-m3-contact-card-radius: 12px;
    --mem-m3-contact-card-pad: 16px;
    border: var(--mem-m3-contact-card-border) !important;
    background: var(--mem-m3-contact-card-bg) !important;
    border-radius: var(--mem-m3-contact-card-radius) !important;
  }

  #member_wrapper #static_contact_info .mem-m3-profile-header {
    padding: var(--mem-m3-contact-card-pad);
    column-gap: 12px;
    row-gap: 0;
  }

  #member_wrapper #static_contact_info .mem-m3-profile-details {
    min-width: 0;
  }

  #member_wrapper #static_contact_info .mem-m3-social-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
  }

  #member_wrapper #static_contact_info .mem-m3-social-block .mem-m3-connect-label {
    width: auto;
    max-width: none;
    white-space: normal;
    font-weight: 600;
    color: #3c424d;
  }

  

  #member_wrapper:not(.portfolio-public) #static_contact_info .mem-m3-profile-actions {
    margin-left: 0 !important;
    margin-top: 4px !important;
    margin-right: 0 !important;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 0 var(--mem-m3-contact-card-pad) var(--mem-m3-contact-card-pad);
    box-sizing: border-box;
    gap: 10px;
  }

  #member_wrapper:not(.portfolio-public) #static_contact_info .mem-m3-profile-actions .mem-m3-profile-action-link {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

}

#member_wrapper .mem-m3-empty-state {
  padding: 0 var(--mem-space-lg) var(--mem-space-lg);
  margin: 0;
  color: var(--mem-on-surface-variant);
  font-size: var(--mem-body-size);
}

#member_wrapper .mem-m3-empty-state-wrap {
  padding: var(--mem-space-lg) var(--mem-space-lg);
  text-align: center;
}

#member_wrapper .mem-m3-empty-state-title {
  margin: 0 0 var(--mem-space-xs);
  color: var(--mem-on-surface);
  font-size: var(--mem-title-size);
  font-weight: var(--mem-font-weight-bold);
  line-height: 1.3;
}

#member_wrapper .mem-m3-module-records-empty .mem-m3-empty-state-cta {
  display: inline-flex;
  margin-top: var(--mem-space-md);
  margin-bottom: 0;
  text-decoration: none;
}

#member_wrapper .mem-m3-module-records-empty .mem-m3-empty-state-cta-legacy {
  margin-top: var(--mem-space-md);
  margin-bottom: 0;
}

/* Toggle pill for Activate column (legacy) */
#member_wrapper .mem-m3-toggle-link {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--mem-label-size);
  font-weight: 500;
  text-decoration: none;
  background: var(--mem-primary);
  color: var(--mem-on-primary);
}

#member_wrapper .mem-m3-toggle-link.off {
  background: var(--mem-surface-variant);
  color: var(--mem-on-surface-variant);
}

#member_wrapper .mem-m3-toggle-link:hover {
  opacity: 0.9;
}

/* md-switch uses M3 tokens from #member_wrapper (primary, surface-container-highest, etc.) */

/* Module tables (Manage) – surfaces and borders */
#member_wrapper .module_row {
  background: var(--mem-surface) !important;
  border-bottom: 1px solid var(--mem-outline);
}

#member_wrapper .module_row_highlight,
#member_wrapper .module_row:hover td {
  background-color: var(--mem-surface-variant) !important;
}

#member_wrapper .module_title_highlight {
  color: var(--mem-primary) !important;
}

#member_wrapper .module_column {
  border-top-color: var(--mem-outline);
}

#member_wrapper .module_icons a,
#member_wrapper .module_icons .title_highlight {
  opacity: 0.85;
}

#member_wrapper .module_icons a:hover,
#member_wrapper .module_icons .title_highlight:hover {
  opacity: 1;
}

/* Save button (Manage) – show when reorder changes */
#member_wrapper .save_button {
  padding: var(--mem-space-md) 0;
}

#member_wrapper .mem-m3-save-hint {
  margin: 0 0 var(--mem-space-sm) 0;
  font-size: var(--mem-label-size);
  color: var(--mem-on-surface-variant);
}

/* Legacy native .save_button button.red (not M3 component) */
#member_wrapper .save_button button.red {
  background: var(--mem-primary);
  color: var(--mem-on-primary);
  border: none;
  padding: var(--mem-space-sm) var(--mem-space-lg);
  border-radius: 8px;
  font-size: var(--mem-body-size);
  font-weight: 500;
  cursor: pointer;
  font-family: var(--mem-font-family);
}

#member_wrapper .save_button button.red:hover {
  background: var(--mem-primary-hover);
}

/* Share page – content cards */
#member_wrapper .content_pad {
  margin-bottom: var(--mem-space-lg);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--mem-outline);
  background: var(--mem-surface);
}

#member_wrapper .content_header {
  background: var(--mem-surface-variant);
  padding: var(--mem-space-sm) var(--mem-space-md);
  font-size: var(--mem-title-size);
  font-weight: 500;
  color: var(--mem-on-surface);
}

#member_wrapper .content_body {
  padding: var(--mem-space-md);
}

#member_wrapper .content_body .button.blue,
#member_wrapper .content_body button.blue {
  background: var(--mem-primary);
  color: var(--mem-on-primary);
  border: none;
  padding: var(--mem-space-sm) var(--mem-space-lg);
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--mem-font-family);
}

#member_wrapper .content_body .button.blue:hover,
#member_wrapper .content_body button.blue:hover {
  background: var(--mem-primary-hover);
}

/* Reports page */
#member_wrapper .m_total {
  color: var(--mem-primary) !important;
}

#member_wrapper .m_label {
  color: var(--mem-on-surface-variant) !important;
}

/* Form error / success messages */
#member_wrapper .form_error {
  background: #ffebee;
  color: #c62828;
  padding: var(--mem-space-md);
  border-radius: 8px;
  margin-bottom: var(--mem-space-md);
  border: 1px solid #ef9a9a;
}

#member_wrapper .app_success {
  background: #e8f5e9;
  color: #2e7d32;
  padding: var(--mem-space-md);
  border-radius: 8px;
  margin-bottom: var(--mem-space-md);
}

#member_wrapper .app_warning {
  background: #fff8e1;
  color: #f57f17;
  padding: var(--mem-space-md);
  border-radius: 8px;
  margin-bottom: var(--mem-space-md);
}

/* Module description popup (bPopup) – CORE DESIGN SYSTEM */
#info_popup {
  background: var(--mem-surface) !important;
  border: 1px solid var(--mem-outline) !important;
  border-radius: 12px !important;
  padding: var(--mem-space-lg) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

#info_popup #info_title {
  font-size: var(--mem-title-size);
  font-weight: 500;
  color: var(--mem-on-surface);
  margin-bottom: var(--mem-space-sm);
}

#info_popup #info_description {
  font-size: var(--mem-body-size);
  color: var(--mem-on-surface-variant);
  line-height: 1.5;
}

#close_popup {
  background: var(--mem-primary) !important;
  color: var(--mem-on-primary) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: var(--mem-space-sm) var(--mem-space-md) !important;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--mem-font-family);
}

#close_popup:hover {
  background: var(--mem-primary-hover) !important;
}

/* -------------------------------------------------------------------------
   Phase D – Manage sub-pages (module list/form, public contact, etc.)
   ------------------------------------------------------------------------- */
/* Contact info block (incl_contact_info on modules_manage) */
#member_wrapper #static_contact_info {
  border: 1px solid var(--mem-outline) !important;
  border-radius: 8px;
  background: var(--mem-surface);
  margin-right: 0;
}

#member_wrapper #static_contact_info h2,
#member_wrapper #static_contact_info h3 {
  font-size: var(--mem-body-size);
  font-weight: 500;
  color: var(--mem-on-surface);
}

/* Back to Manage Modules / generic content links */
#member_wrapper #main-content .buttons a,
#member_wrapper #rc .buttons a,
#member_wrapper #rc_modules .buttons a {
  color: var(--mem-primary);
  text-decoration: none;
  font-weight: 500;
}

#member_wrapper #main-content .buttons a:hover,
#member_wrapper #rc .buttons a:hover {
  text-decoration: underline;
}

#share-url-unlocked{
  width: 466px !important;
}
#share-url-locked{
  width: 466px !important;
}

#member_wrapper #main-content input[type="text"],
#member_wrapper #main-content input[type="password"],
#member_wrapper #main-content input.noborder,
#member_wrapper #rc input[type="text"],
#member_wrapper #rc input[type="password"],
#member_wrapper #rc input.noborder {
  border: 1px solid var(--mem-outline);
  border-radius: 8px;
  padding: var(--mem-space-sm) var(--mem-space-md);
  font-size: var(--mem-body-size);
  font-family: var(--mem-font-family);
  width: 100%;
  max-width: 100%;
  /* padding-left: 2.5rem; */
}
#alternative_folio_name input[type="text"]{
  max-width: 400px !important;
}


#member_wrapper input.field_error {
  border-color: #c62828;
  background: #ffebee;
}

/* -------------------------------------------------------------------------
   Reports & Stats page – dark main area, white cards (design PNG)
   ------------------------------------------------------------------------- */
#member_wrapper .mem-m3-reports {
  background: #FDFDFD;
  margin: calc(-1 * var(--mem-space-lg));
  padding: var(--mem-space-lg);
  min-height: 60vh;
}
/* Page title card – full bleed: touches sidebar and right content edge; uses .mem-m3-divider for underline */
#member_wrapper .mem-m3-reports-title-card {
  margin-top: calc(-1 * var(--mem-space-lg));
  margin-left: calc(-1 * var(--mem-space-xl));
  margin-right: calc(-1 * var(--mem-space-xl));
  margin-bottom: var(--mem-space-lg);
  width: calc(100% + 2 * var(--mem-space-xl));
  box-sizing: border-box;
}
/* Page title card – uses .mem-m3-full-bleed + .mem-m3-divider for edge-to-edge underline */
#member_wrapper .mem-m3-reports-title-card {
  margin-top: calc(-1 * var(--mem-space-lg));
  margin-bottom: var(--mem-space-lg);
  border-radius: 0;
  border: none;
}
#member_wrapper .mem-m3-reports-title-card .mem-m3-card-body-padded {
  padding-bottom: 0;
}
#member_wrapper .mem-m3-reports-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--mem-subtext-dark);
  margin: 0 0 var(--mem-space-xs) 0;
}
#member_wrapper .mem-m3-reports-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: var(--subtitle-color);
  margin: 0;
}
/* Reports page: card overrides (same .mem-m3-card, different radius/border) */
#member_wrapper .mem-m3-reports .mem-m3-card {
  border-color: #CCD1E0;
  background: #fff;
}
#member_wrapper .mem-m3-reports .mem-m3-card:last-child {
  margin-bottom: 0;
}
/* Active Module metric card: fixed size per design (518×77) */
#member_wrapper .mem-m3-reports .mem-m3-reports-active-module-card {
  width: 518px;
  max-width: 100%;
  height: 77px;
  box-sizing: border-box;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  background: #fff;
}
#member_wrapper .mem-m3-reports .mem-m3-reports-active-module-card .mem-m3-card-body {
  height: 100%;
  box-sizing: border-box;
}
#member_wrapper .mem-m3-reports-active-body {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mem-space-xl);
  padding: 0 var(--mem-space-lg) !important;
  min-height: 77px;
  box-sizing: border-box;
}
#member_wrapper .mem-m3-reports-active-module-card .mem-m3-reports-active-body {
  min-height: 75px;
  padding: 0 20px !important;
}
#member_wrapper .mem-m3-reports-active-header {
  display: flex;
  align-items: center;
  gap: var(--mem-space-sm);
}
#member_wrapper .mem-m3-reports-active-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #3C424D;
}
#member_wrapper .mem-m3-reports-active-icon svg,
#member_wrapper .mem-m3-reports-active-icon .mem-m3-reports-active-icon-img {
  width: 24px;
  height: 24px;
  display: block;
}
#member_wrapper .mem-m3-reports-active-label {
  font-size: var(--mem-title-size);
  font-weight: 600;
  color: var(--mem-subtext-dark);
}
#member_wrapper .mem-m3-reports-active-metrics {
  display: flex;
  align-items: center;
  gap: var(--mem-space-xl);
  margin-left: auto;
}
#member_wrapper .mem-m3-reports-metric {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}
#member_wrapper .mem-m3-reports-metric-label {
  font-size: var(--mem-label-size);
  color: var(--subtitle-color);
}
#member_wrapper .mem-m3-reports-metric-value {
  font-size: 2rem;
  font-weight: var(--mem-font-weight-bold);
  color: #096DD9;
}
#member_wrapper .mem-m3-reports-metric-value-average {
  color: var(--mem-subtext-dark);
}
/* Reports: card body with title bar uses standard .mem-m3-card-title-bar */
/* Web vs Mobile – two charts side by side */
#member_wrapper .mem-m3-reports-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mem-space-lg);
}
#member_wrapper .mem-m3-reports-chart-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--mem-space-lg);
}
#member_wrapper .mem-m3-reports-chart-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 300px;
}
#member_wrapper .mem-m3-reports-chart-title {
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Lato', -apple-system, sans-serif;
  color: #2E333B;
  margin: 0 0 var(--mem-space-sm, 0.5rem) 0;
  line-height: 1.3;
}
#member_wrapper .mem-m3-reports-chart {
  flex-shrink: 0;
  width: 300px;
  height: 220px;
  overflow: visible;
}
/* Google Charts: tooltip overlaps the slice; without this, hover leaves the slice and the tooltip toggles (flicker). */
#member_wrapper .mem-m3-reports .google-visualization-tooltip {
  pointer-events: none;
}
#member_wrapper .mem-m3-reports-legend {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--mem-space-sm);
  font-size: var(--mem-label-size);
  color: var(--mem-subtext-dark);
}
#member_wrapper .mem-m3-reports-legend-value {
  font-weight: 700;
}
#member_wrapper .mem-m3-reports-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
#member_wrapper .mem-m3-reports-legend-web {
  background: #096DD9;
}
#member_wrapper .mem-m3-reports-legend-mobile {
  background: #B39DDB;
}
/* Login history table */
#member_wrapper .mem-m3-reports-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--mem-space-md);
  margin-left: calc(-1 * var(--mem-space-lg));
  margin-right: calc(-1 * var(--mem-space-lg));
  width: calc(100% + 2 * var(--mem-space-lg));
}
#member_wrapper .mem-m3-reports-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--mem-body-size);
}
#member_wrapper .mem-m3-reports-table thead th {
  text-align: left;
  padding: 0 var(--mem-space-md);
  font-weight: 600;
  color: var(--mem-subtext-dark);
  background: #F0F1F3;
  border-bottom: 1px solid #E0E2E6;
  height: 44px;
  box-sizing: border-box;
  vertical-align: middle;
}
/* Time Stamp header: label + sort icon left-aligned, vertically centered – DRY */
#member_wrapper .mem-m3-reports-table thead th {
  display: flex;
  align-items: center;
}
#member_wrapper .mem-m3-reports-th-inner {
  margin-right: 8px;
}
/* Sort: double-arrow only (no button chrome), dark grey, matches screenshot */
#member_wrapper .mem-m3-reports-sort-btn {
  --md-icon-button-icon-color: var(--mem-subtext-dark);
  --md-icon-button-container-color: transparent;
  --md-icon-button-outline-color: transparent;
  min-width: 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  vertical-align: middle;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
#member_wrapper a.mem-m3-reports-sort-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#member_wrapper .mem-m3-reports-sort-arrows {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0;
  gap: 0;
}
#member_wrapper .mem-m3-reports-sort-arrows .mem-m3-reports-sort-arrow {
  font-size: 18px;
  width: 18px;
  height: 18px;
  color: var(--mem-subtext-dark);
  display: block;
  margin: -3px 0;
}
#member_wrapper .mem-m3-reports-sort-arrows .mem-m3-reports-sort-arrow:first-child {
  margin-bottom: -6px;
}
#member_wrapper .mem-m3-reports-sort-arrows .mem-m3-reports-sort-arrow:last-child {
  margin-top: -6px;
}
#member_wrapper .mem-m3-reports-table tbody tr {
  height: 72px;
}
#member_wrapper .mem-m3-reports-table tbody td {
  padding: 0 var(--mem-space-md);
  border-bottom: 1px solid #E8EAED;
  color: var(--mem-subtext-dark);
  background: #fff;
  height: 72px;
  box-sizing: border-box;
  vertical-align: middle;
}
#member_wrapper .mem-m3-reports-table tbody tr:last-child td {
  /* border-bottom: none; */
}
/* Pagination — Figma My-cred Pagination (node 8884:15934): top rule, Lato 13/14, Gray/400 borders #C1C7CD */
#member_wrapper .mem-m3-reports-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mem-space-md);
  padding: 12px 24px 16px;
  border-top: 1px solid #c1c7cd;
  box-sizing: border-box;
}
/* Match login history table full-bleed; inner 24px matches Figma px-[24px] */
#member_wrapper .mem-m3-reports .mem-m3-reports-pagination {
  margin-left: calc(-1 * var(--mem-space-lg));
  margin-right: calc(-1 * var(--mem-space-lg));
  width: calc(100% + 2 * var(--mem-space-lg));
  padding: 12px 24px 16px;
  box-sizing: border-box;
}
#member_wrapper .mem-m3-reports-pagination-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#member_wrapper .mem-m3-reports-per-page-label {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: var(--mem-subtext);
  white-space: nowrap;
}
#member_wrapper .mem-m3-reports-pagination-left-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
#member_wrapper .mem-m3-reports-per-page-value,
#member_wrapper .mem-m3-reports-per-page-select {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  padding: 8px;
  border: 1px solid #c1c7cd;
  border-radius: 8px;
  background: #fff;
  min-width: 71px;
  width: auto;
  max-width: 96px;
  color: var(--mem-subtext);
  cursor: pointer;
}
#member_wrapper .mem-m3-reports-per-page-value::after {
  content: '';
  flex-shrink: 0;
  margin-left: 4px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--mem-subtext);
}
#member_wrapper .mem-m3-reports-per-page-select {
  cursor: pointer;
  appearance: auto;
  padding-right: 8px;
}
#member_wrapper .mem-m3-reports-per-page-select:hover,
#member_wrapper .mem-m3-reports-per-page-select:focus {
  border-color: var(--mem-primary);
  outline: none;
}
#member_wrapper .mem-m3-reports-range {
  font-size: 13px;
  line-height: 18px;
  color: #595959;
  white-space: nowrap;
}
#member_wrapper .mem-m3-reports-range-part {
  font-weight: 400;
}
#member_wrapper .mem-m3-reports-range-total {
  font-weight: 700;
}
#member_wrapper .mem-m3-reports-pagination-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  /* DRY: one tone for disabled prev/next (no stacked opacity on host + icon) */
  --mem-pagination-nav-icon-disabled: #5f6368;
}
/* Reports pagination: Material Web md-icon-button (prev/next) and md-text-button (page numbers) */
#member_wrapper .mem-m3-reports-pagination-right md-icon-button.mem-m3-reports-page-btn,
#member_wrapper .mem-m3-reports-pagination-right md-text-button.mem-m3-reports-page-btn {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #c1c7cd;
  background: #fff;
}
/* Prev/next: outer ends 8px radius (Figma _Pagination button group) */
#member_wrapper .mem-m3-reports-pagination-right md-icon-button.mem-m3-reports-page-btn {
  background: #fff !important;
  border: 1px solid #c1c7cd !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
  --md-icon-button-icon-color: #3c424d;
}
#member_wrapper .mem-m3-reports-pagination-right md-icon-button.mem-m3-reports-page-btn:first-of-type {
  border-radius: 8px 0 0 8px;
}
#member_wrapper .mem-m3-reports-pagination-right md-icon-button.mem-m3-reports-page-btn:last-of-type {
  border-radius: 0 8px 8px 0;
}
#member_wrapper .mem-m3-reports-pagination-right md-icon-button.mem-m3-reports-page-btn:hover:not([disabled]) {
  --md-icon-button-icon-color: var(--mem-primary);
  background: #fff !important;
  border: 1px solid #c1c7cd !important;
}
#member_wrapper .mem-m3-reports-pagination-right md-icon-button.mem-m3-reports-page-btn md-icon {
  color: #3c424d;
  font-size: 20px;
  width: 20px;
  height: 20px;
}
#member_wrapper .mem-m3-reports-pagination-right md-icon-button.mem-m3-reports-page-btn:hover:not([disabled]) md-icon {
  color: var(--mem-primary);
}
#member_wrapper .mem-m3-reports-pagination-right md-icon-button.mem-m3-reports-page-nav-btn[disabled] {
  opacity: 1 !important;
  cursor: not-allowed;
  --md-icon-button-icon-color: var(--mem-pagination-nav-icon-disabled);
  --md-icon-button-disabled-icon-color: var(--mem-pagination-nav-icon-disabled);
}
#member_wrapper .mem-m3-reports-pagination-right md-icon-button.mem-m3-reports-page-nav-btn[disabled] md-icon {
  color: var(--mem-pagination-nav-icon-disabled);
  opacity: 1;
}
#member_wrapper .mem-m3-reports-pagination-right md-text-button.mem-m3-reports-page-btn {
  --md-text-button-label-text-color: #3c424d;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
#member_wrapper .mem-m3-reports-pagination-right md-text-button.mem-m3-reports-page-btn:hover {
  --md-text-button-hover-label-text-color: var(--mem-primary);
}
/* md-text-button[disabled] uses disabled label tokens — set them so the current page stays white on blue */
#member_wrapper .mem-m3-reports-pagination-right md-text-button.mem-m3-reports-page-btn-active:disabled,
#member_wrapper .mem-m3-reports-pagination-right md-text-button.mem-m3-reports-page-btn-active[disabled] {
  cursor: default;
}
/* Active page: Brand/500 #096DD9, white label (Figma) */
/* md-text-button[disabled] applies disabled label color + opacity (default 0.38) — force full-opacity white */
#member_wrapper .mem-m3-reports-pagination-right md-text-button.mem-m3-reports-page-btn-active {
  opacity: 1 !important;
  color: #ffffff !important;
  --md-text-button-container-color: #096dd9;
  --md-text-button-label-text-color: #ffffff !important;
  --md-text-button-disabled-label-text-color: #ffffff;
  --md-text-button-disabled-label-text-opacity: 1;
  --md-text-button-disabled-container-color: #096dd9;
  --md-text-button-disabled-container-opacity: 1;
  --md-sys-color-primary: #096dd9;
  --md-sys-color-on-primary: #ffffff;
  background: #096dd9 !important;
  border: 1px solid #096dd9 !important;
  border-radius: 4px;
  cursor: default;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}
#member_wrapper .mem-m3-reports-pagination-right md-text-button.mem-m3-reports-page-btn-active .mem-m3-reports-page-num {
  color: #ffffff !important;
}
#member_wrapper .mem-m3-reports-pagination-right md-text-button.mem-m3-reports-page-btn-active:hover {
  opacity: 1 !important;
  color: #ffffff !important;
  --md-text-button-hover-container-color: #096dd9;
  --md-text-button-hover-label-text-color: #ffffff !important;
  --md-text-button-hover-state-layer-color: rgba(255, 255, 255, 0.1);
}
#member_wrapper .mem-m3-reports-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  min-width: 40px;
  height: 40px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid #c1c7cd;
  border-radius: 4px;
  background: #fff;
  color: #3c424d;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* Pagination — mobile & tablet only: stack rows, center wrapped page controls, consistent gaps (40×40 targets unchanged) */
@media (max-width: 1023px) {
  #member_wrapper {
    --mem-pagination-mobile-pad-x: clamp(12px, 3vw, 24px);
  }
  #member_wrapper .mem-m3-reports-pagination {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mem-space-md);
    padding: 12px var(--mem-pagination-mobile-pad-x) 16px;
  }
  #member_wrapper .mem-m3-reports .mem-m3-reports-pagination {
    padding: 12px var(--mem-pagination-mobile-pad-x) 16px;
  }
  #member_wrapper .mem-m3-reports-pagination-left {
    justify-content: center;
    width: 100%;
    gap: var(--mem-space-sm);
  }
  #member_wrapper .mem-m3-reports-pagination-left-meta {
    justify-content: center;
    gap: var(--mem-space-md);
  }
  #member_wrapper .mem-m3-reports-pagination-right {
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* row-gap separates wrapped lines; column-gap matches desktop (touch-friendly spacing between controls) */
    gap: 8px 4px;
    padding-top: 2px;
  }
}

#member_wrapper .mem-m3-reports-pagination-right .mem-m3-reports-page-goto-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--mem-outline-variant, #CCD1E0);
}
#member_wrapper .mem-m3-reports-page-goto-label {
  font-size: var(--mem-label-size);
  color: var(--mem-subtext);
  margin: 0;
}
#member_wrapper .mem-m3-reports-page-goto-input {
  width: 56px;
  padding: 6px 8px;
  font-size: var(--mem-label-size);
  border: 1px solid var(--mem-outline-variant, #CCD1E0);
  border-radius: 6px;
  text-align: center;
}
#member_wrapper .mem-m3-reports-page-goto-btn {
  padding: 6px 12px;
  font-size: var(--mem-label-size);
  background: var(--mem-primary, #096DD9);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#member_wrapper .mem-m3-reports-page-goto-btn:hover {
  opacity: 0.9;
}

/* View ePortfolio (mem portfolio) page – dark cards layout. Also public portfolio (#member_wrapper). */
#member_wrapper .mem-m3-portfolio-view {
  padding-bottom: var(--mem-space-lg);
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-card-contact {
  margin-bottom: var(--mem-space-lg);
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-card {
  background: var(--mem-surface);
  border-radius: 12px;
  border: 1px solid #CCD1E0;
  margin-bottom: var(--mem-space-lg);
  color: var(--mem-on-surface);
  scroll-margin-top: 80px;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-header {
  display: flex;
  flex-wrap: wrap;
  /* align-items: center; */
  justify-content: space-between;
  gap: var(--mem-space-md);
  padding: var(--mem-space-md);
  border-bottom: 1px solid var(--mem-outline-variant, #CCD1E0);
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-header .mem-m3-card-title {
  margin: 0;
  color: var(--mem-on-surface);
  font-size: var(--mem-title-size);
  font-weight: 600;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mem-space-md);
  font-size: var(--mem-label-size);
  color: var(--mem-on-surface-variant);
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-updated {
  font-style: italic;
  font-size: var(--mem-regular-size);
  color: var(--mem-subtext);
}

/* Module card header: member = red lock + muted “Locked for public view”; public = same unlock row as contact (outside #static_contact_info) */
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-lock--member {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  min-width: 24px;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-lock--member .mem-m3-portfolio-module-lock-icon-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-lock--member .mem-m3-lock-hint-muted {
  color: var(--mem-subtext, #4d535e);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  font-style: italic;
}

#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-header .mem-m3-contact-lock-inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em 0.35em;
  margin-left: 0;
  vertical-align: middle;
  font-family: var(--mem-font-family);
}



#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-header .mem-m3-contact-lock-inline img {
  width: 16px;
  height: 16px;
}

#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-header a.mem-m3-lock-unlock-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  text-decoration: none;
  color: #cf1322;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.35;
  min-height: 24px;
  min-width: 24px;
  cursor: pointer;
}

#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-header a.mem-m3-lock-unlock-link .mem-m3-icon-locked {
  flex-shrink: 0;
}

#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-header .mem-m3-lock-unlock-label {
  color: inherit;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.35;
}

#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-header .mem-m3-lock-hint-muted {
  color: var(--mem-subtext, #4d535e);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  font-style: italic;
}



/* Lock icon: red (SVG img tint via filter) */
#member_wrapper .mem-m3-icon-locked {
  filter: invert(27%) sepia(98%) saturate(7471%) hue-rotate(355deg) brightness(91%) contrast(118%);
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-body {
  padding:  var(--mem-space-md);
  color: var(--mem-subtext);
  font-size: var(--mem-regular-size);
  font-weight: 400;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-body a {
  color: var(--mem-primary);
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-body .module_record:not(:last-child){
    padding-bottom: var(--mem-space-md);
    margin-bottom: var(--mem-space-md) !important;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-body .module_record :is(p){
    color: var(--mem-subtext);
    font-size: var(--mem-regular-size);
    font-weight: 400;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-body .module_record :is(ol, ul){
    padding-left: var(--mem-space-md);
}
/* Last sub-module / record in each module: no bottom border */
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-body .module_record:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

/* Long text: show more / show less (200 mobile, 500 tablet/desktop via inline script) */
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-clamp-wrap {
  margin-top: 0.25em;
  margin-bottom: 0.5em;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-text-clamp__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0 0;
  padding: 0;
  font: inherit;
  font-size: var(--mem-label-size);
  font-weight: 500;
  color: var(--mem-primary);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-text-clamp__label {
  line-height: 1.2;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-text-clamp__chevron {
  display: inline-flex;
  width: 24px;
  height: 24px;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-text-clamp__chevron svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-text-clamp__toggle:hover,
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-text-clamp__toggle:focus-visible {
  color: var(--mem-primary-hover, #5a4fcf);
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-text-clamp__toggle:focus-visible {
  outline: 2px solid var(--mem-primary);
  outline-offset: 2px;
}

/* Module record: Resource + Download buttons (filled blue + outlined) */
#member_wrapper .mem-m3-portfolio-view .mem-m3-module-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mem-space-md);
  margin-top: var(--mem-space-md);
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: var(--mem-label-size);
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-btn-resource {
  background: var(--mem-primary);
  color: #fff !important;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-btn-resource:hover .mem-m3-btn-label {
  background: var(--mem-primary-hover, #5a4fcf);
}
/* Resource: icon outside the button – only the label span is the “button” */
#member_wrapper .mem-m3-portfolio-view .mem-m3-resource-wrap.mem-m3-btn {
  padding: 0;
  background: transparent;
  border-radius: 0;
  gap: 8px;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-resource-wrap .mem-m3-btn-label {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: var(--mem-label-size);
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  background: var(--mem-primary);
  color: #fff !important;
  transition: background-color 0.2s;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-btn-download {
  background: transparent;
  color: var(--mem-primary);
  border: 1px solid var(--mem-primary);
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-btn-download:hover {
  background: rgba(91, 138, 251, 0.08);
  color: var(--mem-primary);
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-btn .mem-m3-btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Resource: icon outside button, larger (24px) and visible */
#member_wrapper .mem-m3-portfolio-view .mem-m3-resource-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--mem-space-sm);
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-resource-wrap .mem-m3-resource-icon {
  height: 48px;
  width: auto;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

#member_wrapper .artifact-panel .mem-m3-resource-form-icon-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-space-sm);
}

#member_wrapper .artifact-panel .mem-m3-resource-form-icon-list .mem-m3-resource-form-icon {
  height: 48px;
  width: auto;
  object-fit: contain;
}

/* ===================================================================
   Attachment cards: photo, video, and document presentation
   Figma node 10042:8073
   =================================================================== */

/* -- Shared "View →" link button ----------------------------------- */
.mem-m3-attach-view-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--mem-primary);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
}
.mem-m3-attach-view-link:hover {
  text-decoration: underline;
  color: var(--mem-primary-hover);
}
.mem-m3-attach-view-link .mem-m3-attach-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  filter: invert(29%) sepia(93%) saturate(1500%) hue-rotate(196deg) brightness(96%) contrast(96%);
}

/* -- Media card (photo & video) ------------------------------------ */
.mem-m3-attach-media-card {
  display: inline-flex;
  flex-direction: column;
  width: 243px;
  border: 1px solid #C1C7CD;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.mem-m3-attach-media-thumb {
  position: relative;
  width: 100%;
  height: 162px;
  overflow: hidden;
  background: #F0F2F5;
}
.mem-m3-attach-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Video: gradient overlay */
.mem-m3-attach-media-card--video .mem-m3-attach-media-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 45%);
  pointer-events: none;
}

/* Video: play button */
.mem-m3-attach-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 39px;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
  background: rgba(2,9,13,0.5);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.mem-m3-attach-play-btn img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

/* Video: duration badge */
.mem-m3-attach-duration {
  position: absolute;
  bottom: 6px;
  left: 4px;
  z-index: 2;
  padding: 2px 8px;
  font-family: 'Lato', sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 18px;
  color: #3C424D;
  background: #F0F2F5;
  border-radius: 16px;
  text-align: center;
}

/* Media card body (name + view link) */
.mem-m3-attach-media-body {
  padding: 5px 8px 8px;
}
.mem-m3-attach-media-name {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #3C424D;
  line-height: normal;
  margin: 0 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -- Document bar -------------------------------------------------- */
.mem-m3-attach-doc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  min-width: 320px;
  min-height: 64px;
  padding: 8px 16px;
  background: #EEF6FF;
  border: 1px solid var(--mem-primary);
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
  gap: var(--mem-space-md);
}
.mem-m3-attach-doc-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mem-m3-attach-doc-name {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #4D535E;
  line-height: normal;
  word-break: break-word;
}
.mem-m3-attach-doc-size {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #A2A2A2;
  line-height: normal;
}

/* -- Responsive: stack media cards on narrow viewports ------------- */
@media (max-width: 600px) {
  .mem-m3-attach-media-card {
    width: 100%;
    max-width: 280px;
  }
  .mem-m3-attach-doc-bar {
    max-width: 100%;
  }
}

#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-locked-msg {
  margin: 0;
  color: var(--mem-on-surface-variant);
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-empty {
  margin: 0;
  color: var(--mem-on-surface-variant);
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-empty a {
  color: var(--mem-primary);
}

/* Public portfolio – KeyCode unlock modal (md-dialog; inherits mem-m3-portfolio-dialog chrome) */
#member_wrapper md-dialog.mem-m3-portfolio-unlock-dialog {
  --md-dialog-container-max-width: min(612px, 92vw);
}

#member_wrapper md-dialog.mem-m3-portfolio-unlock-dialog .mem-m3-portfolio-unlock-dialog-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  line-height: 1.35;
}

#member_wrapper md-dialog.mem-m3-portfolio-unlock-dialog .mem-m3-portfolio-unlock-modal__error {
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #b3261e;
  background: #f9dedc;
  border-radius: 8px;
}

#member_wrapper md-dialog.mem-m3-portfolio-unlock-dialog .mem-m3-portfolio-unlock-modal__label {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--mem-on-surface, #1a1a1a);
  margin-bottom: 12px;
  font-weight: 400 !important
}

#member_wrapper md-dialog.mem-m3-portfolio-unlock-dialog .mem-m3-portfolio-unlock-modal__required {
  color: #b3261e;
  margin-left: 2px;
}

#member_wrapper md-dialog.mem-m3-portfolio-unlock-dialog .mem-m3-portfolio-unlock-modal__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--mem-on-surface, #1a1a1a);
  border: 1px solid var(--mem-outline, #cac4d0);
  border-radius: 8px;
  background: #fff;
}

#member_wrapper md-dialog.mem-m3-portfolio-unlock-dialog .mem-m3-portfolio-unlock-modal__input::placeholder {
  color: var(--mem-on-surface-variant, #8e8e8e);
}

#member_wrapper md-dialog.mem-m3-portfolio-unlock-dialog .mem-m3-portfolio-unlock-modal__input:focus {
  outline: 2px solid var(--mem-primary, #6750a4);
  outline-offset: 1px;
  border-color: var(--mem-primary, #6750a4);
}

#member_wrapper md-dialog.mem-m3-portfolio-dialog > .mem-m3-module-dialog-headline-row.mem-m3-portfolio-unlock-dialog-headline {
  max-height: 120px;
  height: unset ! important;
  padding: 8px 14px 8px 22px !important;
}

@media (max-width: 639px) {

  #member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-header {
    gap: 4px;
  }
  #member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-meta {
    gap: 4px;
  }
  #member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-lock--public {
    flex-basis: 100%;
  }
  #member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-module-header .mem-m3-lock-hint-muted {
    display: none;
  }
}

@media (min-width: 640px) {
  #member_wrapper md-dialog.mem-m3-portfolio-unlock-dialog .mem-m3-portfolio-unlock-dialog-title {
    -webkit-line-clamp: 2;
  }
  #member_wrapper md-dialog.mem-m3-portfolio-unlock-dialog .mem-m3-portfolio-unlock-modal__label {
    white-space: nowrap;
  }
}

/* Share section – M3 card with social icons + QR */
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-share {
  margin-top: var(--mem-space-lg);
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-share .mem-m3-portfolio-share-header {
  padding: var(--mem-space-md);
  border-bottom: 1px solid var(--mem-outline);
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-share .mem-m3-portfolio-share-header .mem-m3-card-title {
  margin: 0;
  font-size: var(--mem-title-size);
  font-weight: 600;
  color: var(--mem-on-surface);
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-share .mem-m3-portfolio-share-body {
  padding: var(--mem-space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--mem-space-xl);
  flex-direction: column;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-share-icons {
  display: flex;
  align-items: center;
  gap: var(--mem-space-md);
  flex-wrap: wrap;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-share-link {
  color: #5c5c5c;
  text-decoration: none;
  transition: color 0.2s ease;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-share-link:hover {
  color: var(--mem-primary);
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-share-qr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mem-space-sm);
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-share-qr img {
  display: block;
  border: 1px solid var(--mem-outline);
  border-radius: 8px;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-share-download {
  font-size: var(--mem-label-size);
  color: var(--mem-primary);
  text-decoration: none;
  font-weight: 500;
}
#member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-share-download:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Toast — card style (success: white card, green accent bar, check icon)
   ------------------------------------------------------------------------- */
.mem-m3-toast-stack {
  position: fixed;
  right: 24px;
  bottom: 24px;
  left: auto;
  top: auto;
  z-index: 10050;
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 10px;
  pointer-events: none;
  width: min(420px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
}

.mem-m3-toast {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  font-family: var(--mem-font-family, "Roboto", sans-serif);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(
    145deg,
    rgba(236, 253, 245, 0.65) 0%,
    #ffffff 42%,
    #ffffff 100%
  );
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.mem-m3-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.mem-m3-toast-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 14px 14px;
  padding: 18px 12px 22px 18px;
}

.mem-m3-toast-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1b7a4d;
  margin-top: 2px;
}

.mem-m3-toast-icon svg {
  display: block;
}

.mem-m3-toast-text {
  min-width: 0;
  padding-right: 4px;
}

.mem-m3-toast-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1a1a;
  letter-spacing: -0.01em;
  margin: 0 0 4px 0;
}

.mem-m3-toast-desc {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  color: #5c5c5c;
  margin: 0;
}

.mem-m3-toast-close {
  flex-shrink: 0;
  margin: 0;
  padding: 6px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: #5c5c5c;
  cursor: pointer;
  line-height: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.mem-m3-toast-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #333;
}

.mem-m3-toast-close:focus-visible {
  outline: 2px solid var(--mem-primary, #1976d2);
  outline-offset: 2px;
}

.mem-m3-toast-close-icon {
  display: block;
}

.mem-m3-toast-accent {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: #2ecc71;
  border-radius: 0 0 9px 9px;
}

/* Error variant */
.mem-m3-toast.is-error {
  background: linear-gradient(
    145deg,
    rgba(255, 235, 238, 0.7) 0%,
    #ffffff 45%,
    #ffffff 100%
  );
}

.mem-m3-toast.is-error .mem-m3-toast-icon {
  color: #c62828;
}

.mem-m3-toast.is-error .mem-m3-toast-accent {
  background: #e53935;
}

/* Desktop layout: keep mobile/tablet stacked, arrange share content side‑by‑side on larger screens */
@media screen and (min-width: 1024px) {
  #member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-share .mem-m3-portfolio-share-body {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  #member_wrapper .mem-m3-portfolio-view .mem-m3-portfolio-share-icons {
    flex-wrap: nowrap;
  }
}

/* -------------------------------------------------------------------------
   Share my portfolio page – title, horizontal tabs, content (DRY: single border color)
   ------------------------------------------------------------------------- */
#member_wrapper .mem-m3-share {
  --mem-share-border: #E0E0E0;
  --mem-share-border-width: 1px;
  --mem-share-input-width: 466px;
  --mem-share-th-bg: #f8f8f8;
  --mem-share-th-color: #333;
  --mem-share-th-padding-y: 5px;
  --mem-share-th-padding-x: 16px;
  --mem-share-th-font-weight: 500;
  --mem-share-th-label-gap: 6px;
  --mem-share-thead-height: 44px;
  padding: 0;
  position: relative;
}
#member_wrapper .mem-m3-share-header {
  margin-bottom: var(--mem-space-md);
}
#member_wrapper .mem-m3-share-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 var(--mem-space-xs) 0;
  letter-spacing: -0.01em;
}

/* Horizontal tab bar: uses .mem-m3-full-bleed for edge-to-edge divider; active underline = text width */
#member_wrapper .mem-m3-share-nav {
  --mem-share-nav-separator: var(--mem-share-border);
  --mem-share-nav-active: var(--mem-primary);
  --mem-share-nav-underline-height: 3px;
  --mem-share-nav-underline-gap: 4px;
  margin-bottom: 0;
  padding-left: var(--mem-space-xl);
  padding-right: var(--mem-space-xl);
  border-bottom: var(--mem-share-border-width) solid var(--mem-share-nav-separator);
}
#member_wrapper .mem-m3-share-nav-link {
  display: inline-block;
  position: relative;
  color: var(--subtitle-color);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.5;
  padding: 10px 0 var(--mem-share-nav-underline-gap);
  margin-bottom: -1px;
  transition: color 0.2s;
}
#member_wrapper .mem-m3-share-nav-link:hover {
  color: var(--mem-share-nav-active);
}
#member_wrapper .mem-m3-share-nav-link.is-active {
  font-weight: 600;
  color: var(--mem-share-nav-active);
}
#member_wrapper .mem-m3-share-nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: var(--mem-share-nav-underline-height);
  background: var(--mem-share-nav-active);
}
#member_wrapper .mem-m3-share-content {
  padding-top: var(--mem-space-lg);
  min-width: 0;
}
#member_wrapper .mem-m3-share-panel {
  display: none;
}
#member_wrapper .mem-m3-share-panel.is-active {
  display: block;
}

/* Share page tabs: single horizontal row + overflow scroll on tablet and mobile (≤1023px). DRY — one block; JS scrolls active tab into view. */
@media (max-width: 1023px) {
  #member_wrapper .mem-m3-share-nav {
    --mem-share-nav-active: var(--mem-primary);
    --mem-share-nav-separator: var(--mem-outline-variant, #e0e2e6);
    --mem-share-nav-underline-height: 2px;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    padding-left: var(--mem-space-sm);
    padding-right: var(--mem-space-sm);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    background: var(--mem-surface, #fff);
    box-sizing: border-box;
  }
  #member_wrapper .mem-m3-share-nav .mem-m3-share-nav-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--mem-space-md);
    width: max-content;
    min-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  #member_wrapper .mem-m3-share-nav .mem-m3-share-nav-list > li,
  #member_wrapper .mem-m3-share-nav .mem-m3-share-nav-link {
    flex-shrink: 0;
  }
  #member_wrapper .mem-m3-share-nav .mem-m3-share-nav-link {
    white-space: nowrap;
    color: #5f6368;
    font-weight: 500;
  }
  #member_wrapper .mem-m3-share-nav .mem-m3-share-nav-link:hover,
  #member_wrapper .mem-m3-share-nav .mem-m3-share-nav-link.is-active {
    color: var(--mem-share-nav-active);
  }
  #member_wrapper .mem-m3-share-nav .mem-m3-share-nav-link.is-active {
    font-weight: 600;
  }
}

#member_wrapper .mem-m3-share-card {
  margin-bottom: var(--mem-space-lg);
  border: var(--mem-share-border-width) solid var(--main-border-outline);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
#member_wrapper .mem-m3-share-card .mem-m3-card-body {
  padding: var(--mem-space-lg);
}

/* DRY: full-bleed bands inside padded share card body — line touches card inner side edges (matches promo header) */
#member_wrapper .mem-m3-share-weblinks-header,
#member_wrapper .mem-m3-share-promo-header,
#member_wrapper .mem-m3-share-pdf-highlight,
#member_wrapper .mem-m3-gallery-separator {
  box-sizing: border-box;
  width: calc(100% + 2 * var(--mem-space-lg));
  margin-left: calc(-1 * var(--mem-space-lg));
  margin-right: calc(-1 * var(--mem-space-lg));
}
#member_wrapper .mem-m3-share-section-title {
  font-size: var(--mem-title-size);
  font-weight: 700;
  color: #333;
  margin: 0 0 var(--mem-space-md) 0;
}
#member_wrapper .mem-m3-share-section-desc {
  font-size: var(--mem-regular-size);
  color: var(--mem-subtext);
  margin: 0 0 var(--mem-space-md) 0;
  line-height: 1.5;
}
/* Web links card: full-width underline under title + description */
#member_wrapper .mem-m3-share-weblinks-header {
  border-bottom: var(--mem-share-border-width) solid var(--mem-share-border);
  padding: 0 var(--mem-space-lg) var(--mem-space-md) var(--mem-space-lg);
  margin-bottom: var(--mem-space-lg);
}
#member_wrapper .mem-m3-share-weblinks-header .mem-m3-share-section-desc {
  margin: 0;
}
/* PDF card: light blue highlight box, spacing, prominent download button */
#member_wrapper .mem-m3-share-pdf-card .mem-m3-card-body {
  padding: var(--mem-space-lg);
}
#member_wrapper .mem-m3-share-pdf-highlight {
  background: none;
  color: var(--mem-subtext);
  padding: 0 var(--mem-space-lg) var(--mem-space-md) var(--mem-space-lg);
  margin-bottom: var(--mem-space-lg);
  font-size: var(--mem-regular-size);
  line-height: 1.5;
  border-bottom: var(--mem-share-border-width) solid var(--mem-share-border);
}
#member_wrapper .mem-m3-share-pdf-card .mem-m3-share-field-row {
  margin-bottom: var(--mem-space-md);
}
#member_wrapper .mem-m3-share-pdf-card .mem-m3-share-btn-download {
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 500;
}
#member_wrapper .mem-m3-share-pdf-card .mem-m3-share-note {
  margin-top: var(--mem-space-md);
  font-size: var(--mem-regular-size);
  color: var(--mem-subtext);
  line-height: 1.5;
}
#member_wrapper .mem-m3-share-field-row {
  margin-bottom: var(--mem-space-md);
}
#member_wrapper .mem-m3-share-input-group {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
/* Share URL row: M3 outlined text field + Copy (DRY: --mem-share-input-width) */
#member_wrapper .mem-m3-share-input-group md-outlined-text-field.mem-m3-share-url-field {
  flex: 1 1 auto;
  min-width: 0;
  width: var(--mem-share-input-width);
  max-width: 100%;
}
/* Share URL input: fixed width per design (DRY: --mem-share-input-width) */

#member_wrapper .mem-m3-share-input-group md-outlined-button.mem-m3-share-btn-copy {
  --md-outlined-button-outline-color: var(--mem-primary);
  --md-outlined-button-label-text-color: var(--mem-primary);
  flex-shrink: 0;
  /* height: 56px; */
  align-self: flex-end;
}
#member_wrapper .mem-m3-share-input-group md-outlined-button.mem-m3-share-btn-copy:hover {
  --md-outlined-button-hover-outline-color: var(--mem-primary);
  --md-outlined-button-hover-label-text-color: var(--mem-primary-hover);
}
#member_wrapper .mem-m3-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: var(--mem-label-size);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
#member_wrapper button.mem-m3-share-btn-copy,
#member_wrapper .mem-m3-share-btn-primary {
  background: var(--mem-primary);
  color: var(--mem-on-primary);
}
#member_wrapper button.mem-m3-share-btn-copy:hover,
#member_wrapper .mem-m3-share-btn-primary:hover {
  background: var(--mem-primary-hover);
  color: var(--mem-on-primary);
}
#member_wrapper .mem-m3-share-btn-outline {
  background: #fff;
  color: var(--mem-primary);
  border: 1px solid var(--mem-primary);
}
#member_wrapper .mem-m3-share-btn-outline:hover {
  background: var(--mem-nav-item-active-bg);
  color: var(--mem-primary-hover);
  border-color: var(--mem-primary-hover);
}
#member_wrapper .mem-m3-share-btn-download {
  background: var(--mem-primary);
  color: var(--mem-on-primary);
}
#member_wrapper .mem-m3-share-btn-download:hover {
  background: var(--mem-primary-hover);
  color: var(--mem-on-primary);
}
/* Material Design outlined Download button (share_download_button partial) */
#member_wrapper .mem-m3-share .mem-m3-share-download-link {
  text-decoration: none;
  display: inline-block;
}
/* Share page: outlined buttons use primary border + label (Figma); download was only getting filled-button tokens */
#member_wrapper .mem-m3-share md-outlined-button {
  --md-outlined-button-outline-color: var(--mem-primary);
  --md-outlined-button-label-text-color: var(--mem-primary);
}
#member_wrapper .mem-m3-share md-outlined-button:hover {
  --md-outlined-button-hover-outline-color: var(--mem-primary-hover);
  --md-outlined-button-hover-label-text-color: var(--mem-primary-hover);
}
#member_wrapper .mem-m3-share md-filled-button.mem-m3-share-btn-outlined-primary {
  --md-filled-button-container-color: var(--mem-primary);
  --md-filled-button-label-text-color: #fff;
}
#member_wrapper .mem-m3-share md-filled-button.mem-m3-share-btn-outlined-primary:hover {
  --md-filled-button-hover-container-color: var(--mem-primary-hover);
  --md-filled-button-hover-label-text-color: #fff;
}
#member_wrapper .mem-m3-share-btn-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.2em;
}
#member_wrapper .mem-m3-share-note {
  font-size: var(--mem-label-size);
  color: var(--mem-on-surface-variant);
  margin: var(--mem-space-sm) 0 0 0;
}
/* KeyCode Management card: two-column layout, left form / right illustration */
#member_wrapper .mem-m3-share-keycode-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: var(--mem-share-border-width) solid var(--main-border-outline);
  border-radius: 10px;
  overflow: hidden;
}
#member_wrapper .mem-m3-share-keycode-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-space-xl);
  align-items: flex-start;
  padding: var(--mem-space-lg);
}
#member_wrapper .mem-m3-share-keycode-main {
  flex: 1;
  min-width: 280px;
}
/* Single-column layout: hide illustration */
#member_wrapper .mem-m3-share-keycode-single .mem-m3-share-keycode-illus {
  display: none;
}
/* KeyCode header: full-width underline touching card borders */
#member_wrapper .mem-m3-share-keycode-header {
  border-bottom: var(--mem-share-border-width) solid var(--mem-share-border);
  padding: 0 var(--mem-space-lg) var(--mem-space-md) var(--mem-space-lg);
  margin: 0 calc(-1 * var(--mem-space-lg)) var(--mem-space-md) calc(-1 * var(--mem-space-lg));
}
#member_wrapper .mem-m3-share-keycode-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #333;
  margin: 0;
}
#member_wrapper .mem-m3-share-keycode-intro {
  font-size: var(--mem-regular-size);
  color: var(--mem-subtext);
  line-height: 1.6;
  margin: var(--mem-space-md) 0 0 0;
}
#member_wrapper .mem-m3-share-keycode-intro strong {
  font-weight: 700;
}
#member_wrapper .mem-m3-share-keycode-note-block {
  margin: var(--mem-space-md) 0 var(--mem-space-lg) 0;
}
#member_wrapper .mem-m3-share-keycode-note {
  font-size: var(--mem-regular-size);
  color: var(--mem-subtext);
  line-height: 1.6;
  margin: 0;
}
#member_wrapper .mem-m3-share-keycode-note strong {
  font-weight: 700;
}
#member_wrapper .mem-m3-share-keycode-field-row {
  margin-bottom: var(--mem-space-lg);
}
#member_wrapper .mem-m3-share-keycode-field-row .mem-m3-share-keycode-label {
  display: block;
  font-weight: 700;
  font-size: var(--mem-label-size);
  color: var(--mem-subtext-dark);
  margin: 0 0 var(--mem-space-sm) 0;
}
#member_wrapper .mem-m3-share-keycode-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: var(--mem-space-sm);
  width: 100%;
}
#member_wrapper .mem-m3-share-keycode-input-wrap md-outlined-text-field.mem-m3-share-keycode-field {
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
  max-width: none;
}
#member_wrapper .mem-m3-share-keycode-input-wrap .mem-m3-share-keycode-copy {
  --md-outlined-button-outline-color: var(--mem-primary);
  --md-outlined-button-label-text-color: var(--mem-primary);
  --md-outlined-button-container-color: #fff;
  flex-shrink: 0;
  /* height: 56px; */
  align-self: flex-end;
}
#member_wrapper .mem-m3-share-keycode-input-wrap .mem-m3-share-keycode-copy:hover {
  --md-outlined-button-hover-outline-color: var(--mem-primary-hover);
  --md-outlined-button-hover-label-text-color: var(--mem-primary-hover);
  --md-outlined-button-hover-state-layer-color: transparent;
  --md-outlined-button-hover-container-color: var(--mem-nav-item-active-bg);
}
#member_wrapper .mem-m3-share-keycode-label {
  display: block;
  font-size: var(--mem-label-size);
  font-weight: 500;
  color: var(--mem-on-surface);
  margin: 0 0 var(--mem-space-xs) 0;
}
/* md-filled-button styled as outlined: transparent fill + primary label. Without focus/pressed
   label tokens, Material Web keeps default on-primary (white) for those states — text vanishes on white. */
#member_wrapper .mem-m3-share-btn-keycode-save {
  --md-filled-button-container-color: var(--mem-primary);
  --md-filled-button-label-text-color: var(--mem-primary);
  letter-spacing: 0.02em;
}
#member_wrapper .mem-m3-share-btn-keycode-save:hover {
  --md-filled-button-hover-container-color: var(--mem-primary-hover);
  --md-filled-button-hover-label-text-color: var(--mem-primary);
}
#member_wrapper .mem-m3-share-keycode-illus {
  flex-shrink: 0;
  max-width: 360px;
}
#member_wrapper .mem-m3-share-keycode-illus img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
/* Search engine visibility card */
#member_wrapper .mem-m3-share-seo-card .mem-m3-card-body {
  padding: var(--mem-space-lg);
}
#member_wrapper .mem-m3-share-seo-header {
  border-bottom: var(--mem-share-border-width) solid var(--mem-share-border);
  padding: 0 var(--mem-space-lg) var(--mem-space-md) var(--mem-space-lg);
  margin: 0 calc(-1 * var(--mem-space-lg)) var(--mem-space-lg) calc(-1 * var(--mem-space-lg));
}
#member_wrapper .mem-m3-share-seo-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 var(--mem-space-xs) 0;
}
#member_wrapper .mem-m3-share-seo-desc {
  font-size: var(--mem-regular-size);
  color: var(--mem-subtext);
  line-height: 1.5;
  margin: 0;
}
#member_wrapper .mem-m3-share-seo-form {
  margin: 0;
}
#member_wrapper .mem-m3-share-seo-radios {
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-md);
  margin-bottom: var(--mem-space-lg);
}
#member_wrapper .mem-m3-share-seo-radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--mem-regular-size);
  color: var(--mem-nav-item-active-text);
  font-weight: normal;
}
#member_wrapper .mem-m3-share-seo-radio {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  accent-color: var(--mem-primary);
}
#member_wrapper .mem-m3-share-seo-save {
  background: var(--mem-primary);
  color: var(--mem-on-primary);
  border: none;
  padding: 10px 24px;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
}
#member_wrapper .mem-m3-share-seo-save:hover {
  background: var(--mem-primary-hover);
  color: var(--mem-on-primary);
}
/* Enable social sharing card */
#member_wrapper .mem-m3-share-social-card .mem-m3-card-body {
  padding: var(--mem-space-lg);
}
#member_wrapper .mem-m3-share-social-header {
  border-bottom: var(--mem-share-border-width) solid var(--mem-share-border);
  padding: 0 var(--mem-space-lg) var(--mem-space-md) var(--mem-space-lg);
  margin: 0 calc(-1 * var(--mem-space-lg)) var(--mem-space-lg) calc(-1 * var(--mem-space-lg));
}
#member_wrapper .mem-m3-share-social-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 var(--mem-space-xs) 0;
}
#member_wrapper .mem-m3-share-social-desc {
  font-size: var(--mem-regular-size);
  color: var(--mem-subtext);
  line-height: 1.5;
  margin: 0;
}
#member_wrapper .mem-m3-share-social-form {
  margin: 0;
}
#member_wrapper .mem-m3-share-social-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--mem-regular-size);
  color: var(--mem-nav-item-active-text);
  font-weight: normal;
  margin-bottom: var(--mem-space-lg);
}
#member_wrapper .mem-m3-share-social-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  accent-color: var(--mem-primary);
}
#member_wrapper .mem-m3-share-social-card input[type="checkbox"] {
  display: inline-block !important;
}
#member_wrapper .mem-m3-share-social-save {
  background: var(--mem-primary);
  color: var(--mem-on-primary);
  border: none;
  padding: 10px 24px;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
}
#member_wrapper .mem-m3-share-social-save:hover {
  background: var(--mem-primary-hover);
  color: var(--mem-on-primary);
}
/* Auto-generated promotional materials card (DRY: single source for spacing and frame) */
#member_wrapper .mem-m3-share-promo-card {
  --mem-promo-gap: var(--mem-space-lg);
  --mem-promo-item-gap: var(--mem-space-sm);
  --mem-promo-frame-outer: #d0d0d0;
  --mem-promo-frame-inner: #b3d9f7;
  --mem-promo-frame-padding: 2px;
}
#member_wrapper .mem-m3-share-promo-card .mem-m3-card-body {
  padding: var(--mem-space-lg);
}
#member_wrapper .mem-m3-share-promo-header {
  border-bottom: var(--mem-share-border-width) solid var(--main-border-outline);
  padding: 0 var(--mem-space-lg) var(--mem-space-md) var(--mem-space-lg);
  margin-bottom: var(--mem-space-lg);
}
#member_wrapper .mem-m3-share-promo-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #333;
  margin: 0;
}
#member_wrapper .mem-m3-share-promo-section {
  margin-bottom: var(--mem-space-xl);
}
#member_wrapper .mem-m3-share-promo-section:last-child {
  margin-bottom: 0;
}
#member_wrapper .mem-m3-share-promo-subtitle {
  font-size: var(--mem-label-size);
  font-weight: 700;
  color: var(--mem-subtext-dark);
  margin: 0 0 var(--mem-space-sm) 0;
}
#member_wrapper .mem-m3-share-promo-desc {
  font-size: var(--mem-regular-size);
  color: var(--mem-subtext);
  line-height: 1.5;
  margin: 0 0 var(--mem-space-lg) 0;
}
#member_wrapper .mem-m3-share-promo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mem-space-lg);
}
#member_wrapper .mem-m3-share-promo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  align-content: flex-start;
  flex-wrap: wrap;
}
/* Avery labels grid: same distance from image/label to button for all items; outline button style */
#member_wrapper .mem-m3-share-promo-avery-grid {
  align-items: start;
}
#member_wrapper .mem-m3-share-promo-avery-grid .mem-m3-share-promo-item {
  min-width: 0;
}
#member_wrapper .mem-m3-share-promo-avery-grid .mem-m3-share-promo-dl {
  margin-top: var(--mem-space-md);
  flex-shrink: 0;
}
#member_wrapper .mem-m3-share-promo-avery-grid .mem-m3-share-promo-dl md-outlined-button {
  --md-outlined-button-outline-color: var(--mem-primary);
  --md-outlined-button-label-text-color: var(--mem-primary);
}
#member_wrapper .mem-m3-share-promo-avery-grid .mem-m3-share-promo-dl:hover md-outlined-button {
  --md-outlined-button-hover-outline-color: var(--mem-primary-hover);
  --md-outlined-button-hover-label-text-color: var(--mem-primary-hover);
}
#member_wrapper .mem-m3-share-promo-thumb {
  display: block;
  width: 150px;
  height: auto;
  border: var(--mem-share-border-width) solid var(--mem-share-border);
  border-radius: 6px;
  margin-bottom: var(--mem-space-sm);
}
/* Frames grid: start from card left edge (DRY: --mem-promo-gap), 6-col layout, row 2 centered, buttons at bottom */
#member_wrapper .mem-m3-share-promo-frames-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--mem-promo-gap);
  align-items: stretch;
  margin-left: calc(-1 * var(--mem-space-lg));
  width: calc(100% + var(--mem-space-lg));
}
#member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-item {
  display: flex;
  align-items: center;
  text-align: center;
  min-width: 0;
  align-self: stretch;
  min-height: 0;
  margin-top: auto;
  flex-direction: column;
  flex-wrap: nowrap;
}
#member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-item > a:first-of-type {
  flex-shrink: 0;
}
#member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-label {
  flex-shrink: 0;
}
#member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-item:nth-child(1) {
  grid-column: 1 / 3;
}
#member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-item:nth-child(2) {
  grid-column: 3 / 5;
}
#member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-item:nth-child(3) {
  grid-column: 5 / 7;
}
#member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-item:nth-child(4) {
  grid-column: 1 / 3;
}
#member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-item:nth-child(5) {
  grid-column: 3 / 5;
}
/* DRY: frame = outer gray border, white margin (padding), inner blue border; single definition on wrap */
#member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-thumb-wrap {
  display: block;
  box-sizing: border-box;
  border: 1px solid var(--mem-promo-frame-outer);
  padding: var(--mem-promo-frame-padding);
  background: #fff;
  border-radius: 6px;
  margin-bottom: var(--mem-promo-item-gap);
  box-shadow: inset 0 0 0 1px var(--mem-promo-frame-inner);
}
#member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-thumb {
  display: block;
  width: 100%;
  height: auto;
  border: none;
  border-radius: 2px;
}
#member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-thumb-8x11-p {
  width: 125px;
}
#member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-thumb-5x7-p {
  width: 100px;
}
#member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-thumb-3x4-p {
  width: 75px;
}
#member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-thumb-8x11-l {
  width: 165px;
}
#member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-thumb-7x5-l {
  width: 135px;
}
#member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-label {
  margin: 0 0 var(--mem-promo-item-gap) 0;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}
#member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-dl {
  margin-top: auto;
  flex-shrink: 0;
}
#member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-dl md-outlined-button {
  --md-outlined-button-outline-color: var(--mem-primary);
  --md-outlined-button-label-text-color: var(--mem-primary);
}
#member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-dl:hover md-outlined-button {
  --md-outlined-button-hover-outline-color: var(--mem-primary);
  --md-outlined-button-hover-label-text-color: var(--mem-primary-hover);
}
#member_wrapper .mem-m3-share-promo-label {
  font-size: var(--mem-label-size);
  color: var(--mem-subtext-dark);
  margin-bottom: var(--mem-space-sm);
  display: block;
}
#member_wrapper .mem-m3-gallery-desc {
  font-size: var(--mem-regular-size);
  color: var(--mem-subtext);
}
#member_wrapper .mem-m3-gallery-subtitle {
  font-size: var(--mem-label-size);
  color: var(--mem-subtext-dark);
  font-weight: 700;
}
#member_wrapper .mem-m3-gallery-sizes {
  font-size: var(--mem-regular-size);
  color: var(--mem-nav-item-active-text);
}
#member_wrapper .mem-m3-share-promo-dl {
  margin-top: auto;
}
#member_wrapper .mem-m3-share-promo-frames .mem-m3-share-promo-desc {
  margin-bottom: var(--mem-space-lg);
}
#member_wrapper .mem-m3-share-promo-frames-grid {
  margin-bottom: 0;
}
#member_wrapper .mem-m3-share-qr-header .mem-m3-share-section-desc {
  margin: 0;
}
#member_wrapper .mem-m3-share-qr-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#member_wrapper .mem-m3-share-qr-block {
  padding: var(--mem-space-lg) 0;
  border-bottom: var(--mem-share-border-width) solid var(--mem-share-border);
}
#member_wrapper .mem-m3-share-qr-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
#member_wrapper .mem-m3-share-qr-block:first-child {
  padding-top: 0;
}
#member_wrapper .mem-m3-share-qr-block-title {
  font-size: var(--mem-label-size);
  font-weight: 700;
  color: var(--mem-subtext-dark);
  margin: 0 0 var(--mem-space-sm) 0;
}
#member_wrapper .mem-m3-share-qr-link-text {
  font-size: var(--mem-regular-size);
  color: var(--mem-nav-item-text);
  margin: 0 0 var(--mem-space-md) 0;
  line-height: 1.5;
}
#member_wrapper .mem-m3-share-qr-url {
  /* color: var(--mem-primary); */
  font-weight: 500;
}
#member_wrapper .mem-m3-share-qr-row {
  display: flex;
  align-items: center;
  gap: var(--mem-space-lg);
  flex-wrap: wrap;
}
#member_wrapper .mem-m3-share-qr-img {
  display: block;
  flex-shrink: 0;
  border: var(--mem-share-border-width) solid var(--mem-share-border);
  border-radius: 4px;
}
#member_wrapper .mem-m3-share-qr-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
#member_wrapper .mem-m3-share-qr-actions md-filled-button.mem-m3-share-btn-copy {
  --md-filled-button-container-color: var(--mem-primary);
  --md-filled-button-label-text-color: #fff;
}
#member_wrapper .mem-m3-share-qr-actions md-filled-button.mem-m3-share-btn-copy:hover {
  --md-filled-button-hover-container-color: var(--mem-primary-hover);
  --md-filled-button-hover-label-text-color: #fff;
}
/* Alternative portfolio views card: header underline, form, table */
#member_wrapper .mem-m3-share-alt-header {
  border-bottom: var(--mem-share-border-width) solid var(--mem-share-border);
  padding: 0 var(--mem-space-lg) var(--mem-space-md) var(--mem-space-lg);
  margin: 0 calc(-1 * var(--mem-space-lg)) var(--mem-space-lg) calc(-1 * var(--mem-space-lg));
}
#member_wrapper .mem-m3-share-alt-header .mem-m3-share-section-desc {
  margin: 0;
}
#member_wrapper .mem-m3-share-alt-form {
  margin-bottom: var(--mem-space-lg);
  padding: 0;
  background: transparent;
}
#member_wrapper .mem-m3-share-alt-form-title {
  font-size: var(--mem-label-size);
  font-weight: 700;
  color: var(--mem-subtext-dark);
  margin: 0 0 var(--mem-space-md) 0;
}
#member_wrapper .mem-m3-share-alt-label {
  display: block;
  font-size: var(--mem-regular-size);
  font-weight: 500;
  color: var(--mem-nav-item-text);
  margin-bottom: var(--mem-space-xs);
}
#member_wrapper .mem-m3-share-alt-input {
  width: 100%;
  max-width: 400px !important;
  padding: 10px 12px;
  border: var(--mem-share-border-width) solid var(--mem-share-border);
  border-radius: 8px;
  font-size: var(--mem-body-size);
  margin-bottom: var(--mem-space-md);
  background: #fff;
  color: var(--mem-on-surface);
}
#member_wrapper .mem-m3-share-alt-field-wrap {
  width: 100%;
  max-width: 400px;
  margin-bottom: var(--mem-space-md);
}
#member_wrapper .mem-m3-share-alt-field-wrap md-outlined-text-field.mem-m3-share-alt-m3-field {
  width: 100%;
  max-width: 100%;
}
#member_wrapper .mem-m3-share-edit-panel .mem-m3-share-edit-alt-label {
  margin-top: 0;
}
#member_wrapper .mem-m3-share-alt-modules-label {
  font-weight: 600;
  color: var(--mem-subtext-dark);
  margin: 0 0 var(--mem-space-sm) 0;
}
#member_wrapper .mem-m3-share-alt-checkboxes {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--mem-space-sm);
  margin-bottom: var(--mem-space-md);
}
#member_wrapper .mem-m3-share-alt-checkboxes label {
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
  min-height: 24px;
}
#member_wrapper .mem-m3-share-check-label {
  cursor: pointer;
  font-weight: normal;
  color: var(--mem-nav-item-active-text);
}
/* Override global input[type=checkbox]{ display:none } from public.css so share form checkboxes are visible */
#member_wrapper .mem-m3-share-alt-checkboxes input[type="checkbox"],
#member_wrapper .mem-m3-share-edit-panel .mem-m3-share-alt-checkboxes input[type="checkbox"] {
  display: inline-block !important;
}
#member_wrapper .mem-m3-share-check-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  flex-shrink: 0;
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
  accent-color: var(--mem-primary);
}
#member_wrapper .mem-m3-share-table-wrap {
  overflow-x: auto;
  margin-top: var(--mem-space-lg);
  margin-bottom: var(--mem-space-md);
  border: var(--mem-share-border-width) solid var(--mem-share-border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  background: #fff;
}
#member_wrapper .mem-m3-share-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mem-label-size);
  background: #fff;
}
#member_wrapper .mem-m3-share-table thead tr,
#member_wrapper .mem-m3-share-table thead th {
  height: var(--mem-share-thead-height);
}
#member_wrapper .mem-m3-share-table thead th {
  box-sizing: border-box;
  padding: var(--mem-share-th-padding-y) var(--mem-share-th-padding-x);
  text-align: left;
  font-weight: var(--mem-share-th-font-weight);
  font-size: 1rem;
  color: var(--mem-share-th-color);
  background: var(--mem-share-th-bg);
  border-bottom: var(--mem-share-border-width) solid var(--mem-share-border);
  vertical-align: middle;
}
#member_wrapper .mem-m3-share-table thead th:first-child {
  border-radius: 8px 0 0 0;
}
#member_wrapper .mem-m3-share-table thead th:last-child {
  border-radius: 0 8px 0 0;
}
/* Sortable th: label + swap_vert icon – shared by share table and reports table (DRY) */
#member_wrapper .mem-m3-share-table thead th .mem-m3-share-th-inner,
#member_wrapper .mem-m3-reports-table thead th .mem-m3-share-th-inner {
  margin-right: var(--mem-share-th-label-gap);
  color: var(#000000 · 87%, rgba(0, 0, 0, 0.87));
}
#member_wrapper .mem-m3-share-table thead th md-icon-button.mem-m3-share-sort-icon,
#member_wrapper .mem-m3-reports-table thead th md-icon-button.mem-m3-share-sort-icon {
  --md-icon-button-icon-color: var(--mem-share-th-color);
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
#member_wrapper .mem-m3-share-table thead th md-icon-button.mem-m3-share-sort-icon:hover,
#member_wrapper .mem-m3-reports-table thead th md-icon-button.mem-m3-share-sort-icon:hover {
  --md-icon-button-hover-icon-color: var(--mem-primary);
}
#member_wrapper .mem-m3-reports-table thead th a.mem-m3-sort-icon-link {
  text-decoration: none;
  display: inline-flex;
  vertical-align: middle;
}
#member_wrapper .mem-m3-share-table tbody td {
  padding: var(--mem-share-th-padding-y) var(--mem-share-th-padding-x);
  border-bottom: var(--mem-share-border-width) solid var(--mem-share-border);
  background: #fff;
  vertical-align: middle;
}

#member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-table tbody tr.mem-m3-share-alt-data-row td.mem-m3-share-td-actions .mem-m3-share-td-actions-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--mem-space-sm);
}

#member_wrapper .mem-m3-share-table tbody tr:last-child td {
  border-bottom: none;
}
#member_wrapper .mem-m3-share-table tbody td a {
  color: var(--mem-primary);
  text-decoration: underline;
}
#member_wrapper .mem-m3-share-table tbody td a:hover {
  text-decoration: underline;
  opacity: 0.9;
}
#member_wrapper .mem-m3-share-table tbody td a[aria-label="Download QR code"] md-icon-button {
  --md-icon-button-icon-color: var(--mem-primary);
}
#member_wrapper .mem-m3-share-icon-edit {
  display: inline-flex;
  text-decoration: none;
  margin: 0 2px;
}
#member_wrapper .mem-m3-share-icon-edit md-icon-button {
  --md-icon-button-icon-color: var(--mem-primary);
}
#member_wrapper .mem-m3-share-icon-edit:hover md-icon-button {
  --md-icon-button-hover-icon-color: var(--mem-primary-hover);
}
#member_wrapper .mem-m3-share-icon-delete {
  display: inline-flex;
  text-decoration: none;
  margin: 0 2px;
}
#member_wrapper .mem-m3-share-icon-delete md-icon-button {
  --md-icon-button-icon-color: #CF1322;
}
#member_wrapper .mem-m3-share-icon-delete:hover md-icon-button {
  --md-icon-button-hover-icon-color: #b71c1c;
  --md-icon-button-hover-state-layer-color: rgba(183, 28, 28, 0.08);
}

/* Delete alternative portfolio confirmation dialog – padding, spacing, no highlight */
#member_wrapper md-dialog.mem-share-delete-dialog {
  --md-dialog-container-shape: 16px;
  --md-dialog-container-max-width: min(520px, 90vw);
  --md-dialog-container-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
#member_wrapper md-dialog.mem-share-delete-dialog > .mem-share-delete-dialog-headline {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 24px;
  height: var(--mem-m3-dialog-title-bar-height);
  min-height: var(--mem-m3-dialog-title-bar-height);
  border-bottom: 1px solid var(--mem-nav-border, #e4e6eb);
  background: transparent !important;
  color: var(--mem-on-surface, #1a1a1a);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  user-select: none;
  -webkit-user-select: none;
}
#member_wrapper md-dialog.mem-share-delete-dialog > .mem-share-delete-dialog-content {
  padding: 16px 24px 16px 24px;
  border-bottom: 1px solid var(--mem-nav-border, #e4e6eb);
}
#member_wrapper md-dialog.mem-share-delete-dialog > .mem-share-delete-dialog-content .mem-share-delete-dialog-text {
  margin: 0;
  padding: 0;
  color: var(--mem-on-surface-variant, #444);
  font-size: 0.9375rem;
  line-height: 1.5;
}
#member_wrapper md-dialog.mem-share-delete-dialog > .mem-share-delete-dialog-actions {
  box-sizing: border-box;
  margin: 0;
  padding: 0 24px;
  min-height: var(--mem-m3-dialog-footer-height);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
/* Match Copy/Download: outlined primary style */
#member_wrapper md-dialog.mem-share-delete-dialog .mem-share-delete-dialog-actions md-outlined-button.mem-m3-share-dialog-cancel {
  --md-outlined-button-label-text-color: #2E333B;
  --md-outlined-button-container-shape: 8px;
  box-sizing: border-box;
}
#member_wrapper md-dialog.mem-share-delete-dialog .mem-share-delete-dialog-actions md-outlined-button.mem-m3-share-dialog-cancel:hover {
  --md-outlined-button-hover-label-text-color:#2E333B;
}
/* Match primary Save/Download button: filled primary */
#member_wrapper md-dialog.mem-share-delete-dialog .mem-share-delete-dialog-actions md-filled-button.mem-m3-share-btn-outlined-primary {
  --md-filled-button-container-color: #CF1322;
  --md-filled-button-label-text-color: #fff;
  --md-filled-button-container-shape: 8px;
  box-sizing: border-box;
}
#member_wrapper md-dialog.mem-share-delete-dialog .mem-share-delete-dialog-actions md-filled-button.mem-m3-share-btn-outlined-primary:hover {
  --md-filled-button-hover-container-color: var(--mem-primary-hover);
  --md-filled-button-hover-label-text-color: #fff;
}

/* Prevent FOUC: hide md-dialog until @material/web upgrades it.
   Without this, server-rendered [open] dialogs flash their slotted
   children inline at the bottom of #member_wrapper while
   esm.run/@material/web/all.js downloads. */
#member_wrapper md-dialog:not(:defined) {
  display: none !important;
}

/* Manage modules: module info + activate/deactivate — md-dialog layout (sheet: header / divider / body / divider / actions) */
#member_wrapper md-dialog.mem-m3-portfolio-dialog {
  --md-dialog-container-color: #ffffff;
  --md-dialog-container-shape: var(--md-sys-shape-corner-large);
  --md-dialog-container-max-width: min(560px, 92vw);
  --md-dialog-headline-color: var(--mem-on-surface, #1a1a1a);
  --md-dialog-headline-font: var(--mem-font-family);
  --md-dialog-headline-size: 1rem;
  --md-dialog-headline-line-height: 1.35;
  --md-dialog-headline-weight: 700;
  --md-dialog-supporting-text-color: var(--mem-on-surface-variant, #5c5c5c);
  --md-dialog-supporting-text-font: var(--mem-font-family);
  --md-dialog-supporting-text-size: 0.9375rem;
  --md-dialog-supporting-text-line-height: 1.55;
  --md-dialog-supporting-text-weight: 400;
}

#member_wrapper md-dialog.mem-m3-portfolio-dialog > .mem-m3-module-dialog-headline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0 14px 0 22px !important;
  border-bottom: 1px solid var(--mem-nav-border, #e4e6eb);
  background: transparent !important;
  color: var(--mem-on-surface, #1a1a1a);
  font-family: var(--mem-font-family);
  font-weight: var(--mem-font-weight-bold, 700);
  font-size: 1rem;
  line-height: 1.35;
  user-select: none;
  -webkit-user-select: none;
  height: var(--mem-m3-dialog-title-bar-height);
  min-height: var(--mem-m3-dialog-title-bar-height);
}

#member_wrapper md-dialog.mem-m3-portfolio-dialog .mem-m3-module-dialog-title {
  flex: 1;
  min-width: 0;
  text-align: left;
}

#member_wrapper md-dialog.mem-m3-module-info-dialog .mem-m3-module-dialog-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.35;
  white-space: normal;
}

#member_wrapper md-dialog.mem-m3-portfolio-dialog .mem-m3-module-dialog-close {
  flex-shrink: 0;
  --md-icon-button-icon-size: 22px;
}

#member_wrapper md-dialog.mem-m3-portfolio-dialog .mem-m3-module-dialog-close:hover {
  --md-icon-button-hover-state-layer-color: rgba(0, 0, 0, 0.06);
}

#member_wrapper md-dialog.mem-m3-portfolio-dialog > .mem-m3-module-dialog-content {
  box-sizing: border-box;
  margin: 0 !important;
  padding: 22px 24px !important;
  border-bottom: 1px solid var(--mem-nav-border, #e4e6eb);
}

#member_wrapper md-dialog.mem-m3-portfolio-dialog .mem-m3-module-dialog-body-text {
  margin: 0;
  padding: 0;
  color: var(--mem-subtext, #4d535e);
  font-family: var(--mem-font-family);
  font-size: 0.9375rem;
  line-height: 1.55;
  font-weight: 400;
  text-align: left;
}

#member_wrapper md-dialog.mem-m3-portfolio-dialog > .mem-m3-module-dialog-actions {
  box-sizing: border-box;
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end !important;
  align-items: center;
  margin: 0 !important;
  padding: 0 22px !important;
  min-height: var(--mem-m3-dialog-footer-height);
}

#member_wrapper md-dialog.mem-m3-portfolio-dialog .mem-m3-module-dialog-primary-btn {
  --md-filled-button-container-color: var(--mem-primary);
  --md-filled-button-label-text-color: #fff;
  --md-filled-button-container-shape: 8px;
  min-width: 88px;
  font-weight: 600;
  font-size: 0.8125rem;
  box-sizing: border-box;
}

#member_wrapper md-dialog.mem-m3-portfolio-dialog .mem-m3-module-dialog-ok-btn {
  letter-spacing: 0.06em;
}

#member_wrapper md-dialog.mem-m3-portfolio-dialog .mem-m3-module-dialog-primary-btn:hover {
  --md-filled-button-hover-container-color: var(--mem-primary-hover);
  --md-filled-button-hover-label-text-color: #fff;
}

/* Deactivate confirmation: primary action destructive red (Figma Error/500 #CF1322) */
#member_wrapper md-dialog.mem-module-toggle-dialog md-filled-button.mem-m3-dialog-danger-btn,
#member_wrapper md-dialog.mem-standards-delete-dialog md-filled-button.mem-m3-dialog-danger-btn {
  --md-filled-button-container-color: #cf1322;
  --md-filled-button-label-text-color: #fff;
  --md-filled-button-container-shape: 8px;
}
#member_wrapper md-dialog.mem-module-toggle-dialog md-filled-button.mem-m3-dialog-danger-btn:hover,
#member_wrapper md-dialog.mem-standards-delete-dialog md-filled-button.mem-m3-dialog-danger-btn:hover {
  --md-filled-button-hover-container-color: #a61d24;
  --md-filled-button-hover-label-text-color: #fff;
}

#member_wrapper md-dialog.mem-m3-portfolio-dialog .mem-m3-module-dialog-secondary-btn {
  --md-outlined-button-outline-color: var(--mem-primary);
  --md-outlined-button-label-text-color: var(--mem-primary);
  --md-outlined-button-container-shape: 8px;
  box-sizing: border-box;
}

#member_wrapper md-dialog.mem-m3-portfolio-dialog .mem-m3-module-dialog-secondary-btn:hover {
  --md-outlined-button-hover-outline-color: var(--mem-primary);
  --md-outlined-button-hover-label-text-color: var(--mem-primary-hover);
}

/* Share page: KeyCode updated success dialog (body copy per design) */
#member_wrapper md-dialog.mem-share-keycode-success-dialog .mem-share-keycode-success-line1 {
  margin: 0 0 8px 0;
  padding: 0;
  color: var(--mem-subtext, #3c424d);
  font-family: var(--mem-font-family);
  font-size: 0.9375rem;
  line-height: 1.55;
  font-weight: 700;
}
#member_wrapper md-dialog.mem-share-keycode-success-dialog .mem-share-keycode-success-line2 {
  margin: 0;
}

#member_wrapper .mem-m3-share-edit-row {
  background: var(--mem-surface-variant);
}
#member_wrapper .mem-m3-share-edit-panel {
  padding: var(--mem-space-md);
}
#member_wrapper .mem-m3-share-edit-panel md-filled-button[type="submit"] {
  --md-filled-button-container-color: var(--mem-primary);
  --md-filled-button-label-text-color: #fff;
}
#member_wrapper .mem-m3-share-edit-panel h3 {
  margin: 0 0 var(--mem-space-sm) 0;
  font-size: var(--mem-title-size);
}
#member_wrapper .mem-m3-share-errors {
  margin-bottom: var(--mem-space-md);
}
#member_wrapper .mem-m3-share-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mem-primary);
  color: var(--mem-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(9, 109, 217, 0.4);
  transition: background 0.2s, transform 0.2s;
  z-index: 50;
}
#member_wrapper .mem-m3-share-fab:hover {
  background: var(--mem-primary-hover);
  color: var(--mem-on-primary);
  transform: scale(1.05);
}

/* -------------------------------------------------------------------------
   Page content – CORE DESIGN SYSTEM (Manage, Share, Reports)
   ------------------------------------------------------------------------- */
/* #member_wrapper #main-content h1,
#member_wrapper #rc h1,
#member_wrapper #rc_modules h1 {
  font-size: var(--mem-headline-size);
  font-weight: 500;
  color: var(--mem-on-surface);
  margin: var(--mem-space-sm) 0 0 0;
}
#member_wrapper .mem-m3-share-subtitle {
  font-size: 1rem;
  color: #666;
  margin: 0;
  line-height: 1.5;
}
  #member_wrapper .mem-m3-share-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--mem-space-navigation);
  align-items: flex-end;
}
*/

/* Headings use sentence case in copy; do not force title case via CSS (module hub copy stays title case in markup). */
#member_wrapper #main-content h1,
#member_wrapper #main-content h2,
#member_wrapper #main-content h3,
#member_wrapper #main-content h4,
#member_wrapper #main-content h5,
#member_wrapper #main-content h6,
#member_wrapper #rc h1,
#member_wrapper #rc h2,
#member_wrapper #rc h3,
#member_wrapper #rc h4,
#member_wrapper #rc h5,
#member_wrapper #rc h6,
#member_wrapper #rc_modules h1,
#member_wrapper #rc_modules h2,
#member_wrapper #rc_modules h3,
#member_wrapper #rc_modules h4,
#member_wrapper #rc_modules h5,
#member_wrapper #rc_modules h6 {
    text-transform: none;
}
#member_wrapper #main-content h1,
#member_wrapper #rc h1,
#member_wrapper #rc_modules h1 {
    font-size: var(--header-title-size);;
    font-weight: var(--header-title-weight);
    color: var(--header-title-color);
    line-height: var(--header-title-line-height);
    letter-spacing: var(--header-title-letter-spacing);
}
#member_wrapper .mem-m3-share-subtitle {
  font-weight: var(--subtitle-weight);
  font-size: var(--subtitle-size);
  line-height: var(--subtitle-line-height);
  letter-spacing: var(--subtitle-letter-spacing);
  color: var(--subtitle-color);
}

#member_wrapper .mem-m3-share-nav-list {
  list-style: var(--share-list-style);
  margin: var(--share-nav-list-margin);
  padding: var(--share-nav-list-padding);
  display: var(--share-nav-list-display);
  flex-direction: var(--share-nav-list-flex-direction);
  flex-wrap: var(--share-nav-list-flex-wrap);
  gap: var(--share-nav-list-gap);
  align-items: var(--share-nav-list-align-items);
}

#member_wrapper #main-content h2,
#member_wrapper #rc h2,
#member_wrapper #rc_modules h2 {
  font-size: var(--header-title-content-size);
  font-weight: var(--header-title-weight);
  color: var(--header-title-color);
  line-height: var(--header-title-line-height);
  letter-spacing: var(--header-title-letter-spacing);
}

/* Form labels and inputs (module forms, etc.) */
#member_wrapper .mem-m3-share-field-label {
  display: block;
  font-size: var(--mem-label-size);
  font-weight: var(--header-title-weight);
  color: var(--mem-subtext-dark);
  margin-bottom: var(--mem-space-xs);
}
#member_wrapper .mem-m3-share-table thead tr {
  height: 44px;
}
/* Reports title card: full-bleed underline (DRY – same pattern as share weblinks/keycode headers) */
.mem-m3-card.mem-m3-reports-title-card {
  border: 0 !important;
}
.mem-m3-card.mem-m3-reports-title-card::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--mem-outline);
  margin: 0 calc(-1 * var(--mem-space-lg));
}

.mem-m3-card-title-bar-reports {
  padding: 15px 0px 15px;
}

.required-asterisk {
  color: #B42318;
  font-weight: 700;
}

/* Nav drawer + tablet header: max-width 1023px only (iPad Pro 1024 CSS px = persistent sidebar above) */
@media (max-width: 1023px) {
  /* Tablet: header dark bar (member area only) — same bar 0–1023px */
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar {
    background: #102739;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: unset;
    padding: 0 16px;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-left {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    width: auto;
    border-right: none;
    padding: 0;
    justify-content: flex-start;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-left .mem-header-brand {
    flex: 1;
    justify-content: center;
    margin: 0;
    min-width: 0;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-logo,
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar #logo {
    filter: brightness(0) invert(1);
    opacity: 0.95;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-menu-btn-mobile,
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-menu-btn-mobile md-icon {
    color: rgba(255, 255, 255, 0.92);
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-right {
    flex-shrink: 0;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-avatar-wrap {
    color: rgba(255, 255, 255, 0.92);
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-avatar-wrap:hover,
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-avatar-wrap:focus,
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-avatar-wrap:focus-visible,
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-avatar-wrap:active {
    background: rgba(255, 255, 255, 0.12);
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-avatar-initials {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-chevron {
    color: rgba(255, 255, 255, 0.92);
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-search,
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-center {
    display: none !important;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-menu-btn-mobile {
    display: inline-flex !important;
  }

  /* Scrim: full viewport, only visible when drawer is open; above main content so cards dim too */
  /* Reports title card: full-bleed underline (DRY – same pattern as share weblinks/keycode headers) */
.mem-m3-card.mem-m3-reports-title-card {
  border: 0 !important;
}
.mem-m3-card.mem-m3-reports-title-card::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--mem-outline);
  margin: 0 calc(-1 * var(--mem-space-lg));
}

.mem-m3-card-title-bar-reports {
  padding: 15px 0px 15px;
}

/* Responsive CSS with media queries */
/* =========================================================================
  RESPONSIVE STYLES – All breakpoint CSS in one place
  Breakpoints: $screen-sm: 576px | $screen-md: 768px | $screen-lg: 992px
    $screen-xl: 1200px | $screen-xxl: 1600px
  Mixins: include-xs (max ≤575) | include-sm (576–767) | include-md (768–991)
    include-lg (992–1199) | include-xl (1200–1599) | include-xxl (≥1600)
    include-*-up / include-*-down | mobile-portrait | mobile-landscape
========================================================================= */
/* --- include-xl-down (max-width: 1199px) -------------------------------- */
@media (max-width: 1199px) {
  #member_wrapper #header.mem-top-app-bar {
    grid-template-columns: 200px 1fr;
    gap: 16px;
    padding: 0 16px;
  }

  #member_wrapper #header .mem-header-left {
    width: 200px;
  }

  #member_wrapper #header .mem-header-search {
    max-width: 350px;
  }

  #member_wrapper .container.is-fluid .columns .column[role="navigation"]:first-child {
    flex: 0 0 220px;
    max-width: 220px;
  }

  #member_wrapper #layout td#lc {
    width: 220px;
  }

  #member_wrapper .mem-m3-reports .mem-m3-reports-active-module-card {
    width: 100%;
  }

  #member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-thumb-8x11-l {
    width: 140px;
  }

  #member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-thumb-7x5-l {
    width: 115px;
  }

  #member_wrapper #static_contact_info .mem-m3-profile-photo-wrap {
    width: 60px;
    height: 60px;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-head-row{
   margin-top: 0px !important;
    }
  #member_wrapper #static_contact_info .mem-m3-profile-name-wrap .mem-m3-profile-name{
   font-size: var(--mem-label-size);
    }
  #member_wrapper #static_contact_info .mem-m3-profile-name-wrap .mem-m3-profile-title{
   font-size: var(--mem-regular-size);
    }
  #member_wrapper #static_contact_info .mem-m3-profile-name-wrap :is(.mem-m3-profile-aka, .mem-m3-profile-alt-name){
   font-size: var(--mem-regular-size-small);
    }
    #member_wrapper #static_contact_info .mem-m3-contact-row{
        font-size: var(--mem-regular-size-small);
    }
    /* No fixed width: narrow viewports need “Connect” on one line (matches mobile card design). */
    #member_wrapper #static_contact_info .mem-m3-social-block .mem-m3-connect-label {
      font-size: var(--mem-regular-size-small);
      white-space: nowrap;
    }
    #member_wrapper #static_contact_info .mem-m3-profile-header{
        gap: var(--mem-space-md);
    }
    #member_wrapper #static_contact_info .mem-m3-profile-head-row{
        padding-bottom: var(--mem-space-sm);
    }
}
/* --- include-lg-down (max-width: 991px) ---------------------------------
   Nav drawer + dark header: single source at max-width 1023px (see below) — avoids 992–1023px overlap with min-width 1024px sidebar. */
@media (max-width: 991px) {
  /* Tablet: header dark bar (member area only) */
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar {
    background: #102739;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: unset;
    padding: 0 16px;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-left {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    width: auto;
    border-right: none;
    padding: 0;
    justify-content: flex-start;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-left .mem-header-brand {
    flex: 1;
    justify-content: space-between;
    grid-template-columns: unset;
    padding: 0 16px;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-left {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    width: auto;
    border-right: none;
    padding: 0;
    justify-content: flex-start;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-left .mem-header-brand {
    flex: 1;
    justify-content: center;
    margin: 0;
    min-width: 0;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-logo,
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar #logo {
    filter: brightness(0) invert(1);
    opacity: 0.95;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-menu-btn-mobile,
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-menu-btn-mobile md-icon {
    color: rgba(255, 255, 255, 0.92);
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-right {
    flex-shrink: 0;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-avatar-wrap {
    color: rgba(255, 255, 255, 0.92);
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-avatar-wrap:hover,
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-avatar-wrap:focus,
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-avatar-wrap:focus-visible,
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-avatar-wrap:active {
    background: rgba(255, 255, 255, 0.12);
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-avatar-initials {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-chevron {
    color: rgba(255, 255, 255, 0.92);
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-search,
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-center {
    display: none !important;
  }

  /* Drawer modal mode: collapse #lc, scrim, fixed drawer sheet */
  #member_wrapper #layout td#lc {
    width: 0;
    min-width: 0;
    max-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
  }
  #member_wrapper.mem-drawer-open #layout td#lc {
    pointer-events: auto;
  }
  #member_wrapper .mem-nav-drawer-scrim {
    display: block;
    position: fixed;
    inset: 0;
    top: 64px;
    z-index: 100;
    background: rgba(0, 0, 0, 0.32);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    cursor: pointer;
  }
  #member_wrapper.mem-drawer-open .mem-nav-drawer-scrim {
    opacity: 1;
    visibility: visible;
  }
  #member_wrapper .mem-nav-drawer {
    position: fixed;
    left: 0;
    top: 64px;
    bottom: 0;
    width: 241px;
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-right: 1px solid var(--mem-nav-border);
    z-index: 101;
    overflow: auto;
  }
  #member_wrapper.mem-drawer-open .mem-nav-drawer {
    transform: translateX(0);
  }
  /* Keep navbar visible when drawer is open (sticky can hide it when page was scrolled) */
  #member_wrapper.mem-drawer-open #header.mem-top-app-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 110;
    width: 100%;
  }

  /* Prevent navbar/page scroll when drawer is open on tablet/mobile */
  html:has(#member_wrapper.mem-drawer-open) {
    overflow: hidden;
  }
  #member_wrapper.mem-drawer-open {
    overflow: hidden;
    touch-action: none;
  }
  #member_wrapper .mem-drawer-toggle {
    display: flex !important;
  }
  #member_wrapper .container.is-fluid .columns > .column:first-child {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    border: none;
    margin: 0;
    overflow: visible;
  }
  #member_wrapper #mem-active-modules-tbody .mem-m3-drag-handle,
  #member_wrapper #mem-standards-list-tbody .mem-m3-drag-handle {
    padding-left: 0px !important;
    margin-right: 0 !important;
    margin-left: -2px !important;
  }

  /* Contact profile tablet (< iPad Pro): photo left, details right; Connect + icons in one row */
  /* Contact profile tablet (< iPad Pro): photo left, details right; Connect + icons in one row */
  #member_wrapper #static_contact_info .mem-m3-profile-header {
    padding: var(--mem-space-sm);
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--mem-space-md);
  }
  #member_wrapper #static_contact_info .mem-m3-profile-photo-wrap {
    flex-shrink: 0;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-details {
    flex: 1;
    min-width: 0;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-head-row {
    flex-wrap: wrap;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-details-top {
    flex-direction: column;
    align-items: stretch;
    gap: var(--mem-space-sm);
  }
  #member_wrapper #static_contact_info .mem-m3-social-top {
    flex-basis: auto;
    justify-content: flex-start;
    margin-top: 0;
    margin-left: 0;
    width: 100%;
    align-self: stretch;
  }
  #member_wrapper #static_contact_info .mem-m3-social-top-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
  #member_wrapper #static_contact_info .mem-m3-social-block {
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-details-main .mem-m3-profile-actions {
    flex-basis: 100%;
    margin-left: 0;
    margin-block: var(--mem-space-md);
    margin-top: -13px;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-actions .mem-m3-profile-action-link:first-child {
    flex: 1;
    min-width: 0;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-actions .mem-m3-profile-action-link:first-child md-filled-button {
    width: 100%;
  }

  #member_wrapper .container.is-fluid .columns .column.is-10,
  #member_wrapper .container.is-fluid .columns .column[role="main"] {
    padding: var(--mem-space-lg);
    min-width: 0;
    overflow-x: hidden;
  }

  /* Prevent module list (and other content) from overflowing right – table layout */
  #member_wrapper #layout {
    table-layout: fixed;
    max-width: 100%;
  }
  #member_wrapper #layout td#rc,
  #member_wrapper #layout td#rc_modules {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
  #member_wrapper #modules_wrapper {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  #member_wrapper .mem-m3-card-header {
    padding: var(--mem-space-md);
  }

  #member_wrapper .mem-m3-card-search-wrap {
    width: 100%;
    min-width: 0;
  }

  #member_wrapper .mem-m3-standards-top-row {
    flex-direction: column;
    align-items: stretch;
  }

  #member_wrapper .mem-m3-standards-toolbar {
    width: 100%;
  }

  #member_wrapper .mem-m3-standards-toolbar md-outlined-text-field.mem-m3-card-search {
    flex: 1;
    width: 100%;
    min-width: 0;
  }

  #member_wrapper .mem-m3-share-nav {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  #member_wrapper .mem-m3-reports .mem-m3-reports-active-module-card {
    width: 100%;
    height: auto;
    min-height: 77px;
  }

  #member_wrapper .mem-m3-reports-chart-wrap {
    justify-content: flex-start;
  }

  #member_wrapper .mem-m3-share-keycode-layout {
    flex-direction: column;
  }

  #member_wrapper .mem-m3-share-keycode-illus {
    max-width: 100%;
  }

  #member_wrapper .mem-m3-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mem-space-lg);
  }

  #member_wrapper .mem-m3-share-promo-frames-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  #member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-item:nth-child(n) {
    grid-column: auto;
  }

  #member_wrapper #footer {
    padding: var(--mem-space-md);
  }

  #member_wrapper .mem-m3-reports {
    margin: calc(-1 * var(--mem-space-lg));
    padding: var(--mem-space-md);
  }

  #member_wrapper .mem-m3-reports-title-card {
    margin-left: calc(-1 * var(--mem-space-md));
    margin-right: calc(-1 * var(--mem-space-md));
    width: calc(100% + 2 * var(--mem-space-md));
  }

  #member_wrapper .mem-sidebar .mem-sidebar-header {
    display: none;
  }

  /* Module list – tablet/mobile: Figma design – dark bg, white search + cards */
  #member_wrapper .mem-m3-modules-list-wrap {
    margin: 0 0 var(--mem-space-lg);
    border-radius: 0;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-card.mem-m3-module-section {
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: var(--mem-space-xl);
    overflow: visible;
    min-width: 0;
    max-width: 100%;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-card.mem-m3-module-section:last-child {
    margin-bottom: 0;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-card-header {
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 var(--mem-space-md);
    gap: var(--mem-space-sm);
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-card-title {
    color: var(--subtitle-color);
    font-size: 1rem;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-card-search-wrap {
    width: 100%;
    margin-top: var(--mem-space-sm);
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-empty-state {
    color: var(--subtitle-color);
    padding: var(--mem-space-md) 0;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-empty-state-wrap {
    padding: var(--mem-space-md) 0;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table thead {
    display: none;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table {
    min-width: 0;
    max-width: 100%;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto auto;
    background: #ffffff;
    border-radius: 8px;
    padding: var(--mem-space-sm);
    margin-bottom: var(--mem-space-md);
    border: 1px solid #E4E6EB;
    gap: 0;
    min-width: 0;
    width: 100%;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table tbody tr[hidden],
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table tbody tr[hidden] {
    display: none !important;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table tbody tr:last-child {
    margin-bottom: 0;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table tbody td {
    display: block;
    padding: 0;
    height: auto;
    border: none;
    color: var(--mem-subtext);
    text-align: left;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table tbody td:nth-child(1) {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: var(--mem-space-sm);
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table tbody td:nth-child(2) {
    grid-column: 1 / -1;
    margin-bottom: 2px;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table tbody td:nth-child(2)::before {
    content: "Count: ";
    color: var(--mem-subtext);
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table tbody td:nth-child(3) {
    grid-column: 1 / -1;
    color: #697077;
    width: 100%;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table tbody td:nth-child(3)::before {
    content: "Updated on: ";
    color: var(--mem-subtext);
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table tbody td:nth-child(4) {
    grid-column: 1;
    grid-row: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #E4E6EB;
    margin-top: var(--mem-space-sm);
    padding-top: var(--mem-space-xs);
    margin-bottom: -0.3rem;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table tbody td:nth-child(4)::before {
    content: "Active";
    color: var(--mem-subtext);
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table tbody td:nth-child(5) {
    grid-column: 2;
    grid-row: 4;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    border-top: 1px solid #E4E6EB;
    margin-top: var(--mem-space-sm);
    padding-top: var(--mem-space-xs);
    margin-bottom: -0.3rem;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table .mem-module-name-cell {
    flex: 1;
    min-width: 0;
    gap: 0;
  }

  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-module-section:nth-child(1) .mem-m3-modules-table:not(.mem-m3-standards-table) .mem-module-name-cell {
    margin-left: -.3rem;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table:not(.mem-m3-standards-table) .mem-module-name-cell .mem-module-title-cluster {
    display: inline-flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 8px;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table:not(.mem-m3-standards-table) .mem-module-name-cell strong {
    color: var(--mem-subtext-dark);
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-drag-handle {
    flex-shrink: 0;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-drag-icon {
    opacity: 0.6;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table:not(.mem-m3-standards-table) .mem-module-actions a,
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table:not(.mem-m3-standards-table) .mem-module-actions md-icon-button {
    --md-icon-button-icon-color: #096DD9;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table:not(.mem-m3-standards-table) .mem-module-actions a.mem-m3-icon-lock.mem-m3-locked md-icon-button {
    --md-icon-button-icon-color: #b71c1c;
  }
  /* Standards record list – stacked card rows (same visual language as module list; 3 columns → title / updated / actions) */
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table thead {
    display: none;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table tbody tr {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    background: #ffffff;
    border-radius: 8px;
    padding: var(--mem-space-sm);
    margin-bottom: var(--mem-space-md);
    border: 1px solid #E4E6EB;
    gap: 0;
    min-width: 0;
    width: 100%;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table tbody tr:last-child {
    margin-bottom: 0;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table tbody td {
    display: block;
    padding: 0;
    height: auto;
    border: none;
    color: var(--mem-subtext);
    text-align: left;
    width: 100%;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table tbody td:nth-child(1) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: var(--mem-space-sm);
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table tbody td:nth-child(2) {
    color: var(--mem-subtext-dark);
    width: 100%;
    margin-bottom: 2px;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table tbody td:nth-child(2)::before {
    content: "Updated on: ";
    color: var(--mem-subtext);
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table tbody td:nth-child(3) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    border-top: 1px solid #E4E6EB;
    margin-top: var(--mem-space-sm);
    padding-top: var(--mem-space-xs);
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table .mem-module-name-cell {
    flex: 1;
    min-width: 0;
    gap: 0;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table .mem-module-name-cell .mem-module-title-cluster {
    display: inline-flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 8px;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table .mem-module-name-cell strong {
    color: var(--mem-subtext-dark);
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table .mem-m3-drag-handle {
    flex-shrink: 0;
    padding-right: var(--mem-space-md);
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table .mem-m3-drag-icon {
    opacity: 0.6;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table .mem-module-actions {
    width: 100%;
    justify-content: flex-end;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table .mem-module-actions a.mem-m3-icon-edit md-icon-button,
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table .mem-module-actions a.mem-m3-icon-dupe md-icon-button {
    --md-icon-button-icon-color: #096DD9;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table .mem-module-actions a.mem-m3-icon-delete md-icon-button {
    --md-icon-button-icon-color: #697077;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table .mem-module-actions a.mem-m3-icon-delete:hover md-icon-button {
    --md-icon-button-icon-color: #b71c1c;
  }
  /*
   * Card rows (≤991px): td ::before/::after hidden. JS maps “insert after A” → same bar as “insert before B”
   * so the slot stays in the *margin between* cards (not top/bottom inside each card).
   * insert-after class is only used for “after last item” (no next row).
   */
  #member_wrapper .mem-m3-modules-list-wrap #mem-active-modules-tbody tr.mem-m3-draggable-row.mem-m3-insert-before td:first-child::before,
  #member_wrapper .mem-m3-modules-list-wrap #mem-active-modules-tbody tr.mem-m3-draggable-row.mem-m3-insert-after td:first-child::after,
  #member_wrapper .mem-m3-modules-list-wrap #mem-standards-list-tbody tr.mem-m3-draggable-row.mem-m3-insert-before td:first-child::before,
  #member_wrapper .mem-m3-modules-list-wrap #mem-standards-list-tbody tr.mem-m3-draggable-row.mem-m3-insert-after td:first-child::after {
    display: none;
  }
  /* Room for gap-centered bar so horizontal scroll wrappers clip less */
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table-wrap {
    padding-top: 10px;
    padding-bottom: 12px;
    box-sizing: border-box;
    /* width: 100%; */
  }
  #member_wrapper .mem-m3-modules-list-wrap #mem-active-reorder-form {
    padding-top: 10px;
    padding-bottom: 12px;
    box-sizing: border-box;
  }
  #member_wrapper .mem-m3-modules-list-wrap #mem-active-modules-tbody tr.mem-m3-draggable-row.mem-m3-insert-before,
  #member_wrapper .mem-m3-modules-list-wrap #mem-active-modules-tbody tr.mem-m3-draggable-row.mem-m3-insert-after,
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table tbody tr.mem-m3-draggable-row.mem-m3-insert-before,
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table tbody tr.mem-m3-draggable-row.mem-m3-insert-after {
    position: relative;
    z-index: 1;
    overflow: visible;
  }
  /* Bar centered in the vertical gap above this card (= between previous card and this one) */
  #member_wrapper .mem-m3-modules-list-wrap #mem-active-modules-tbody tr.mem-m3-draggable-row.mem-m3-insert-before::before,
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table tbody tr.mem-m3-draggable-row.mem-m3-insert-before::before {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(-0.5 * var(--mem-space-md));
    height: 5px;
    margin-top: -3.5px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mem-primary) 0%, #42a5f5 50%, var(--mem-primary) 100%);
    box-shadow:
      0 0 0 3px rgba(9, 109, 217, 0.22),
      0 4px 16px rgba(9, 109, 217, 0.4);
    z-index: 5;
    pointer-events: none;
    animation: mem-m3-drop-line-in 0.2s ease forwards, mem-m3-drop-slot-pulse 1.15s ease-in-out infinite;
  }
  /* After last card only: bar in the margin below this row */
  #member_wrapper .mem-m3-modules-list-wrap #mem-active-modules-tbody tr.mem-m3-draggable-row.mem-m3-insert-after::after,
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-standards-table tbody tr.mem-m3-draggable-row.mem-m3-insert-after::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: calc(-0.5 * var(--mem-space-md));
    height: 5px;
    margin-bottom: -2.5px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mem-primary) 0%, #42a5f5 50%, var(--mem-primary) 100%);
    box-shadow:
      0 0 0 3px rgba(9, 109, 217, 0.22),
      0 4px 16px rgba(9, 109, 217, 0.4);
    z-index: 5;
    pointer-events: none;
    animation: mem-m3-drop-line-in 0.2s ease forwards, mem-m3-drop-slot-pulse 1.15s ease-in-out infinite;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-reorder-save {
    margin-top: var(--mem-space-md);
    padding: 0;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-card-body .mem-m3-reorder-save {
    margin-left: calc(-1 * var(--mem-space-lg));
    margin-right: calc(-1 * var(--mem-space-lg));
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-save-hint {
    color: var(--subtitle-color);
    margin: 0 0 var(--mem-space-sm);
    font-size: 0.875rem;
  }
  /* Active switch – Figma blue #096DD9 when on; inactive uses grey #696F7A */
  #member_wrapper .mem-m3-modules-list-wrap #mem-active-modules-tbody md-switch[selected] {
    --md-switch-selected-handle-color: #096DD9;
    --md-switch-selected-track-color: rgba(9, 109, 217, 0.5);
  }
  #member_wrapper .mem-m3-modules-list-wrap #mem-inactive-modules-tbody md-switch {
    --md-switch-unselected-handle-color: var(--subtitle-color);
    --md-switch-unselected-track-color: rgba(105, 111, 122, 0.5);
  }
  #member_wrapper .mem-m3-security-section {
    flex-direction: column;
    align-items: flex-start;
  }
  #member_wrapper .mem-m3-security-section .mem-m3-section-heading {
    margin:  0 0 var(--mem-space-sm) 0;
  }
  #member_wrapper .mem-m3-security-section .mem-m3-btn-manage-key {
    margin: var(--mem-space-md) 0 0 3rem;
  }
  /* Full-bleed header without 100vw (avoids horizontal scrollbar from viewport width including scrollbar gutter) */
  #member_wrapper .mem-m3-standards-page-header {
    background-color: white;
    border-bottom: 1px solid var(--mem-outline);
    width: calc(100% + 2 * var(--mem-space-lg));
    max-width: none;
    margin-left: calc(-1 * var(--mem-space-lg));
    margin-right: calc(-1 * var(--mem-space-lg));
    padding: 0 var(--mem-space-lg) var(--mem-space-md);
    box-sizing: border-box;
  }
  #member_wrapper .mem-m3-public-contact-subtitle {
    margin-bottom: 0;
  }

  #member_wrapper .mem-m3-security-section .mem-m3-section-icon {
    align-self: self-start;
  }
  .save_button{
    float: unset !important;
  }


  #member_wrapper .mem-m3-security-section {
    flex-direction: column;
    align-items: flex-start;
  }
  #member_wrapper .mem-m3-security-section .mem-m3-section-heading {
    margin:  0 0 var(--mem-space-sm) 0;
  }
  #member_wrapper .mem-m3-security-section .mem-m3-btn-manage-key {
    margin: var(--mem-space-md) 0 0 3rem;
  }
  #member_wrapper #layout #rc{
    width: 100%;
  }
  #member_wrapper .mem-m3-standards-page-header{
    background-color: white;
    border-bottom: 1px solid var(--mem-outline);
    width: 100vw;
    margin-left: -1.5rem;
    padding: 0 0 var(--mem-space-md) 1.5rem;
  }
  #member_wrapper .mem-m3-public-contact-subtitle{
    margin-bottom: 0;
  }

  #member_wrapper .mem-m3-security-section .mem-m3-section-icon{
    align-self: self-start;
  }
  .save_button{
    float: unset !important;
  }
}

/* --- include-md-down (max-width: 767px) --------------------------------- */
@media (max-width: 767px) {
  #member_wrapper .mem-m3-reports-charts {
    grid-template-columns: 1fr;
  }

  :root {
    --mem-headline-size: 1.25rem;
    --mem-title-size: 1.125rem;
  }

  #member_wrapper .container.is-fluid .columns .column.is-10,
  #member_wrapper .container.is-fluid .columns .column[role="main"] {
    padding: var(--mem-space-md);
  }

  /* Align full-bleed page header with tighter main-column padding (see max-width:991px rule) */
  #member_wrapper .mem-m3-standards-page-header {
    width: calc(100% + 2 * var(--mem-space-md));
    margin-left: calc(-1 * var(--mem-space-md));
    margin-right: calc(-1 * var(--mem-space-md));
    padding-left: var(--mem-space-md);
    padding-right: var(--mem-space-md);
  }

  #member_wrapper .mem-m3-card-body {
    padding: 0 var(--mem-space-md) var(--mem-space-md);
  }

  #member_wrapper .mem-m3-card-body-padded {
    padding: var(--mem-space-md);
  }

  #member_wrapper .mem-m3-card-header {
    gap: var(--mem-space-sm);
    padding: var(--mem-space-md);
  }

  #member_wrapper .mem-m3-modules-table thead th,
  #member_wrapper .mem-m3-modules-table tbody td {
    padding: var(--mem-space-sm);
    font-size: 0.875rem;
  }

  #member_wrapper .mem-m3-modules-table tbody td {
    height: 56px;
  }

  #member_wrapper .mem-m3-modules-list-wrap {
    padding: var(--mem-space-md);
    margin: 0 0 var(--mem-space-md);
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table:not(.mem-m3-standards-table) tbody tr {
    padding: var(--mem-space-sm);
  }
  #member_wrapper .mem-m3-modules-list-wrap.mem-m3-standards-list-wrap .mem-m3-btn-add-record {
    width: 100%;
  }
  #member_wrapper .mem-m3-modules-list-wrap.mem-m3-standards-list-wrap .mem-m3-btn-add-record md-filled-button {
    width: 100%;
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table tbody tr {
    padding: var(--mem-space-sm);
  }

  #member_wrapper #static_contact_info .mem-m3-profile-head-row {
    flex-wrap: wrap;
  }

  #member_wrapper #static_contact_info .mem-m3-profile-photo-wrap {
    width: 64px;
    height: 64px;
  }
  #member_wrapper #static_contact_info.mem-m3-contact-block {
    --mem-contact-photo-size: 72px;
    --mem-contact-photo-radius: 12px;
  }

  #member_wrapper #static_contact_info .mem-m3-profile-name {
    font-size: 22px;
  }

  /* Move "(Aka)" + alt name to the next line as one unit on narrow screens */
  #member_wrapper #static_contact_info .mem-m3-profile-aka-line {
    display: block;
  }

  #member_wrapper #static_contact_info .mem-m3-profile-aka {
    margin-left: 0;
  }

  #member_wrapper #static_contact_info .mem-m3-profile-alt-name {
    margin-left: 0;
  }

  #member_wrapper #static_contact_info .mem-m3-profile-title {
    font-size: 16px;
  }

  #member_wrapper .mem-m3-upload-profile-box {
    width: 100%;
    max-width: 217px;
    height: auto;
    min-height: 180px;
  }

  #member_wrapper .mem-m3-share-input-group {
    flex-direction: column;
    align-items: stretch;
  }

  #share-url-unlocked,
  #share-url-locked {
    width: 100% !important;
  }

  #member_wrapper .mem-m3-share-keycode-input-wrap md-outlined-text-field.mem-m3-share-keycode-field {
    max-width: 100%;
  }

  #member_wrapper .mem-m3-reports-title {
    font-size: 20px;
  }

  #member_wrapper .mem-m3-reports-active-body {
    flex-wrap: wrap;
    gap: var(--mem-space-md);
    padding: var(--mem-space-md) !important;
  }

  #member_wrapper .mem-m3-reports-active-metrics {
    gap: var(--mem-space-lg);
    margin-left: 0;
  }

  #member_wrapper .mem-m3-reports-metric-value {
    font-size: 1.5rem;
  }

  #member_wrapper #footer p {
    justify-content: center;
    text-align: center;
  }

  #member_wrapper .mem-m3-share-nav-list {
    gap: var(--mem-space-lg);
  }

  #member_wrapper .mem-m3-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mem-space-md);
  }

  #member_wrapper .mem-m3-share-promo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #member_wrapper .mem-m3-share-promo-frames-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #member_wrapper .mem-m3-security-section {
    flex-direction: column;
    align-items: flex-start;
  }

  #member_wrapper .mem-m3-btn-manage-key {
    margin-left: 0;
  }


  #member_wrapper .mem-m3-reports-table thead th,
  #member_wrapper .mem-m3-reports-table tbody td {
    padding: 0 var(--mem-space-sm);
    font-size: 0.875rem;
  }

  #member_wrapper .mem-m3-reports-table tbody tr,
  #member_wrapper .mem-m3-reports-table tbody td {
    height: 56px;
  }

  #member_wrapper .mem-m3-share-table-wrap {
    margin: 0 auto;
    width: 100%;
  }

  #member_wrapper .mem-m3-reports-table-wrap {
    margin-left: calc(-1 * var(--mem-space-md));
    margin-right: calc(-1 * var(--mem-space-md));
    width: calc(100% + 2 * var(--mem-space-md));
  }

  #member_wrapper .mem-m3-share-card .mem-m3-card-body {
    padding: var(--mem-space-md);
  }

  #member_wrapper .mem-m3-share-weblinks-header,
  #member_wrapper .mem-m3-share-pdf-highlight,
  #member_wrapper .mem-m3-share-keycode-header,
  #member_wrapper .mem-m3-share-seo-header,
  #member_wrapper .mem-m3-share-social-header,
  #member_wrapper .mem-m3-share-promo-header,
  #member_wrapper .mem-m3-share-qr-header,
  #member_wrapper .mem-m3-share-alt-header,
  #member_wrapper .mem-m3-gallery-separator {
    padding-left: var(--mem-space-md);
    padding-right: var(--mem-space-md);
    margin-left: calc(-1 * var(--mem-space-md));
    margin-right: calc(-1 * var(--mem-space-md));
    width: calc(100% + 2 * var(--mem-space-md));
  }

  #member_wrapper .mem-m3-gallery-separator {
    padding-left: 0;
    padding-right: 0;
  }

  #member_wrapper .mem-m3-share-qr-row {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* --- include-sm-down (max-width: 575px) --------------------------------- */
@media (max-width: 575px) {
  :root {
    --header-title-size: 18px;
    --header-title-line-height: 24px;
    --header-title-letter-spacing: 0px;
    --header-title-content-size: 16px;
    --subtitle-size: 12px;
    --subtitle-line-height: 140%;
    --subtitle-letter-spacing: 0px;
    --mem-headline-size: 1.125rem;
    --mem-title-size: 1rem;
    --mem-label-size: 14px;
    --mem-regular-size: 13px;
    --mem-body-size: 13px;
    --md-outlined-button-width: 86px;
    --static-contact-head-row-margin-bottom: -23px;
  }
  #member_wrapper .mem-m3-share-input-group md-outlined-button.mem-m3-share-btn-copy {
      width: var(--md-outlined-button-width) !important;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-head-row {
    margin-bottom: var(--static-contact-head-row-margin-bottom);
  }
  #member_wrapper .mem-m3-share-promo-grid {
    grid-template-columns: 1fr;
  }
  #member_wrapper .mem-m3-share-promo-frames-grid {
    grid-template-columns: 1fr;
  }
  #member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-item:nth-child(n) {
    grid-column: auto;
  }
  #member_wrapper .mem-m3-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #member_wrapper .container.is-fluid .columns .column.is-10,
  #member_wrapper .container.is-fluid .columns .column[role="main"] {
    padding: var(--mem-space-md);
    padding: var(--mem-space-md);
  }

  #member_wrapper .mem-m3-card {
    border-radius: 8px;
    margin-bottom: var(--mem-space-md);
  }

  #member_wrapper .mem-m3-card-header {
    padding: var(--mem-space-sm);
    flex-direction: column;
    align-items: stretch;
  }

  #member_wrapper .mem-m3-card-body:not(.mem-m3-portfolio-module-body) {
    padding: 0 var(--mem-space-sm) var(--mem-space-sm) !important;
  }


  #member_wrapper .mem-m3-card-body-padded, #member_wrapper .mem-m3-share-header {
    padding: var(--mem-space-sm);
    margin-left: 19px;
  }

  #member_wrapper .mem-m3-card.mem-m3-card-security .mem-m3-card-body-padded, 
  #member_wrapper .mem-m3-card.mem-m3-card-public-contact .mem-m3-card-body-padded {
    padding: var(--mem-space-sm) !important;
    margin-left: 0 !important;
  }

  #member_wrapper .mem-m3-modules-table thead th,
  #member_wrapper .mem-m3-modules-table tbody td {
    padding: var(--mem-space-xs) var(--mem-space-sm);
    font-size: 0.8125rem;
  }

  #member_wrapper .mem-m3-modules-table tbody td {
    height: 48px;
  }

  #member_wrapper .mem-m3-modules-table .mem-module-name-cell {
    gap: 8px;
  }

  #member_wrapper .mem-m3-modules-list-wrap,
  #member_wrapper .mem-m3-card-contact {
    margin: var(--mem-space-sm);
  }

  #member_wrapper .mem-m3-modules-list-wrap {
    padding: 0;
    margin-top: var(--mem-space-lg);
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-card.mem-m3-module-section {
    margin-bottom: var(--mem-space-lg);
  }
  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-modules-table tbody tr {
    padding: var(--mem-space-sm);
    margin-bottom: var(--mem-space-sm);
  }

  #member_wrapper #static_contact_info .mem-m3-profile-photo-wrap {
    width: 56px;
    height: 56px;
  }
  #member_wrapper #static_contact_info.mem-m3-contact-block {
    --mem-contact-photo-size: 64px;
    --mem-contact-photo-radius: 10px;
  }

  #member_wrapper #static_contact_info .mem-m3-profile-name {
    font-size: 18px;
  }

  #member_wrapper #static_contact_info .mem-m3-profile-title {
    font-size: 14px;
  }

  #member_wrapper #static_contact_info .mem-m3-profile-alt-name {
    font-size: 16px;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-alt-name {
    font-size: 16px;
  }

  #member_wrapper #static_contact_info .mem-m3-profile-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-left: 0;
    gap: var(--mem-space-sm);
  }

  #member_wrapper #static_contact_info .mem-m3-profile-actions .mem-m3-profile-action-link:has(md-filled-button) {
    flex: 1;
    min-width: 0;
  }

  #member_wrapper #static_contact_info .mem-m3-profile-actions .mem-m3-profile-action-link:has(md-filled-button) md-filled-button {
    width: 100%;
  }

  #member_wrapper #static_contact_info .mem-m3-profile-actions .mem-m3-profile-action-link:not(:has(md-filled-button)) {
    flex-shrink: 0;
  }

  #member_wrapper .mem-m3-reports, #member_wrapper .mem-m3-share-header {
    margin: calc(-1 * var(--mem-space-sm));
    /* padding: var(--mem-space-sm); */
  }

  #member_wrapper .mem-m3-reports-title-card {
    margin-top: calc(-1 * var(--mem-space-sm));
    margin-left: calc(-1 * var(--mem-space-sm));
    margin-right: calc(-1 * var(--mem-space-sm));
    width: calc(100% + 2 * var(--mem-space-sm));
  }

  #member_wrapper .mem-m3-reports-chart {
    width: 100%;
    max-width: 300px;
    height: auto;
    min-height: 180px;
  }

  #member_wrapper .mem-m3-share-title {
    font-size: 1.25rem;
  }

  #member_wrapper .mem-m3-share-nav-list {
    gap: var(--mem-space-md);
  }

  #member_wrapper .mem-m3-share-card .mem-m3-card-body {
    padding: var(--mem-space-sm);
  }

  #member_wrapper .mem-m3-share-weblinks-header,
  #member_wrapper .mem-m3-share-pdf-highlight,
  #member_wrapper .mem-m3-share-keycode-header,
  #member_wrapper .mem-m3-share-seo-header,
  #member_wrapper .mem-m3-share-social-header,
  #member_wrapper .mem-m3-share-promo-header,
  #member_wrapper .mem-m3-share-qr-header,
  #member_wrapper .mem-m3-share-alt-header,
  #member_wrapper .mem-m3-gallery-separator {
    padding-left: var(--mem-space-sm);
    padding-right: var(--mem-space-sm);
    margin-left: calc(-1 * var(--mem-space-sm));
    margin-right: calc(-1 * var(--mem-space-sm));
    width: calc(100% + 2 * var(--mem-space-sm));
  }

  #member_wrapper .mem-m3-gallery-separator {
    padding-left: 0;
    padding-right: 0;
  }

  #member_wrapper .mem-m3-standards-save-bottom md-filled-button {
    width: 100%;
  }

  #member_wrapper #footer {
    padding: var(--mem-space-sm);
    font-size: 0.875rem;
  }

  #member_wrapper.portfolio-public #footer {
    margin-left: calc(-1 * var(--mem-space-sm));
    margin-right: calc(-1 * var(--mem-space-sm));
    width: calc(100% + 2 * var(--mem-space-sm));
  }

  #alternative_folio_name input[type="text"] {
    max-width: 100% !important;
  }

  #info_popup {
    width: calc(100vw - 32px) !important;
    max-width: 400px;
  }

  #member_wrapper .mem-m3-share-table-wrap {
    margin: 0 auto;
    width: 100%;
  }

  #member_wrapper .mem-m3-reports-table-wrap {
    margin-left: calc(-1 * var(--mem-space-sm));
    margin-right: calc(-1 * var(--mem-space-sm));
    width: calc(100% + 2 * var(--mem-space-sm));
  }

  #member_wrapper .mem-m3-standards-table-wrap {
    margin-left: calc(-1 * var(--mem-space-sm));
    margin-right: calc(-1 * var(--mem-space-sm));
    width: calc(100% + 2 * var(--mem-space-sm));
  }

  #member_wrapper .mem-m3-share-nav {
    margin-left: calc(-1 * var(--mem-space-sm));
    margin-right: calc(-1 * var(--mem-space-sm));
    width: calc(100% + 2 * var(--mem-space-sm));
    padding-left: var(--mem-space-sm);
    padding-right: var(--mem-space-sm);
  }
  #member_wrapper .mem-m3-form-fields .mem-m3-field-input-wrap{
    margin-bottom: 3rem;
  }
  #member_wrapper #mem-public-contact-form .mem-m3-form-fields .mem-m3-field-input-wrap {
    margin-bottom: var(--mem-space-md);
  }
  #member_wrapper .mem-m3-standards-page-header{
    margin-left: -1rem;
  }

  #member_wrapper .mem-m3-modules-list-wrap .mem-m3-card-body .mem-m3-reorder-save {
    margin-left: calc(-1 * var(--mem-space-sm));
    margin-right: calc(-1 * var(--mem-space-sm));
  }
}

/* --- include-md-up (min-width: 768px) ----------------------------------- */
@media (min-width: 768px) {
  #member_wrapper .mem-m3-fullname-alt-section .mem-m3-fullname-alt-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--mem-space-lg);
  }
  #member_wrapper .mem-m3-fullname-alt-section .mem-m3-field-group:last-child .mem-m3-field-input-wrap {
    margin-bottom: var(--mem-space-md);
  }
}
/* --- Member desktop nav (min-width: 1024px) — one breakpoint with JS incl_js_footer MEM_NAV_DESKTOP_MIN_PX */
@media (min-width: 1024px) {
  /* Keep sidebar header (Menu + hamburger) visible on desktop widths, including 1024-1199px. */
  #member_wrapper .mem-sidebar .mem-sidebar-header {
    display: flex;
  }
  #member_wrapper .mem-m3-fullname-alt-section .mem-m3-field-group:last-child .mem-m3-field-input-wrap {
    margin-bottom: var(--mem-space-md);
  }
  #member_wrapper .container.is-fluid .columns .column[role="navigation"]:first-child {
    position: sticky;
    top: 64px;
    align-self: flex-start;
    height: calc(100vh - 64px);
    max-height: calc(100vh - 64px);
  }
  #member_wrapper #layout td#lc {
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  #member_wrapper .mem-drawer-toggle {
    display: none;
  }
  /* Mobile-only header drawer toggle — sidebar has its own hamburger next to “Menu”. */
  #member_wrapper #header .mem-header-menu-btn-mobile {
    display: none !important;
  }
  /* Sidebar collapsed state */
  #member_wrapper.mem-sidebar-collapsed #layout td#lc {
    width: 72px;
    min-width: 72px;
  }
  #member_wrapper.mem-sidebar-collapsed .container.is-fluid .columns .column[role="navigation"]:first-child {
    flex: 0 0 72px;
    max-width: 72px;
    min-width: 72px;
  }
  #member_wrapper.mem-sidebar-collapsed .mem-sidebar .mem-sidebar-header {
    padding: 10px;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  /* Fully remove “Menu” from layout — max-width/opacity alone can still leave traces under the hamburger. */
  #member_wrapper.mem-sidebar-collapsed .mem-sidebar .mem-sidebar-header-label {
    display: none !important;
  }
  #member_wrapper.mem-sidebar-collapsed .mem-sidebar .mem-sidebar-menu-btn {
    position: relative;
    z-index: 1;
  }
  #member_wrapper.mem-sidebar-collapsed .mem-sidebar .mem-sidebar-search-wrap {
    display: none;
  }
  #member_wrapper.mem-sidebar-collapsed .mem-nav-drawer {
    width: 72px;
  }
  #member_wrapper.mem-sidebar-collapsed .mem-sidebar md-list.menu-list {
    display: block;
  }
  #member_wrapper .mem-sidebar md-list.menu-list [slot="headline"] {
    max-width: 220px;
    opacity: 1;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.2s ease, opacity 0.2s ease;
  }
  /* Labels only — same row geometry as expanded; icons stay in the start slot (no repositioning). */
  #member_wrapper.mem-sidebar-collapsed .mem-sidebar md-list.menu-list [slot="headline"] {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
  }
  #member_wrapper .mem-sidebar md-list.menu-list .mem-nav-submenu-chevron,
  #member_wrapper .mem-sidebar md-list.menu-list md-icon[slot="end"] {
    transition: opacity 0.15s ease;
  }
  #member_wrapper.mem-sidebar-collapsed .mem-sidebar md-list.menu-list .mem-nav-submenu-chevron,
  #member_wrapper.mem-sidebar-collapsed .mem-sidebar md-list.menu-list md-icon[slot="end"] {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
  }
  #member_wrapper .mem-sidebar md-list.menu-list md-list-item.menu_sub,
  #member_wrapper .mem-sidebar md-list.menu-list md-list-item.mem-portfolio-submenu-item {
    max-height: 80px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }
  #member_wrapper.mem-sidebar-collapsed .mem-sidebar md-list.menu-list md-list-item.menu_sub,
  #member_wrapper.mem-sidebar-collapsed .mem-sidebar md-list.menu-list md-list-item.mem-portfolio-submenu-item {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    min-height: 0;
    border: none;
  }

  /*
   * Public portfolio: same collapsed rail as member nav — extra specificity + !important so Bulma / M3
   * list hosts cannot keep the nav column or drawer at full width (JS toggles .mem-sidebar-collapsed; layout must follow).
   */
  #member_wrapper.portfolio-public.mem-sidebar-collapsed .container.is-fluid .columns .column[role="navigation"]:first-child {
    flex: 0 0 72px !important;
    max-width: 72px !important;
    min-width: 72px !important;
  }
  #member_wrapper.portfolio-public.mem-sidebar-collapsed .mem-nav-drawer {
    width: 72px !important;
    max-width: 72px !important;
    box-sizing: border-box;
  }
  #member_wrapper.portfolio-public.mem-sidebar-collapsed .mem-sidebar .mem-sidebar-search-wrap {
    display: none !important;
  }
  #member_wrapper.portfolio-public.mem-sidebar-collapsed .mem-public-nav-search-inner {
    justify-content: center;
    gap: 0;
  }
  #member_wrapper.portfolio-public.mem-sidebar-collapsed .mem-public-nav-search {
    padding: 8px;
  }
}
/* --- Mobile portrait (max-width: 576px, portrait) ----------------------- */
@media screen and (orientation: portrait) and (max-width: 576px) {
  /* Share page tabs stay one horizontal row (see @media (max-width: 1023px) .mem-m3-share-nav); this list is share-only. */

  #member_wrapper #static_contact_info .mem-m3-profile-head-row {
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
  }

  #member_wrapper #static_contact_info .mem-m3-social-top {
    justify-content: flex-start;
    width: 100%;
    margin-left: 0;
    margin-left: 0;
  }

  #member_wrapper #static_contact_info .mem-m3-profile-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: start;
    column-gap: var(--mem-space-md);
  }

  #member_wrapper #static_contact_info .mem-m3-profile-actions {
    align-self: stretch;
    margin-left: 0;
  }
}

/* Contact card: stacked layout at ≤1023px uses same square avatar; bump size only 992–1023 (not ≤991, which sets its own vars) */
@media (max-width: 1023px) and (min-width: 992px) {
  #member_wrapper #static_contact_info.mem-m3-contact-block {
    --mem-contact-photo-size: 120px;
    --mem-contact-photo-radius: 14px;
  }
}

/* Nav drawer + tablet header: max-width 1023px only (iPad Pro 1024 CSS px = persistent sidebar above) */
@media (max-width: 1023px) {
  /* Tablet: header dark bar (member area only) — same bar 0–1023px */
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar {
    background: #102739;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: unset;
    padding: 0 16px;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-left {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    width: auto;
    border-right: none;
    padding: 0;
    justify-content: flex-start;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-left .mem-header-brand {
    flex: 1;
    justify-content: center;
    margin: 0;
    min-width: 0;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-logo,
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar #logo {
    filter: brightness(0) invert(1);
    opacity: 0.95;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-menu-btn-mobile,
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-menu-btn-mobile md-icon {
    color: rgba(255, 255, 255, 0.92);
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-right {
    flex-shrink: 0;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-avatar-wrap {
    color: rgba(255, 255, 255, 0.92);
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-avatar-wrap:hover,
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-avatar-wrap:focus,
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-avatar-wrap:focus-visible,
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-avatar-wrap:active {
    background: rgba(255, 255, 255, 0.12);
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-avatar-initials {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-chevron {
    color: rgba(255, 255, 255, 0.92);
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-search,
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-center {
    display: none !important;
  }
  #member_wrapper:not(.portfolio-public) #header.mem-top-app-bar .mem-header-menu-btn-mobile {
    display: inline-flex !important;
  }

  /* Public portfolio: same dark top app bar as member dashboard (tablet / mobile, ≤1023px) */
  #member_wrapper.portfolio-public #header.mem-top-app-bar {
    background: #102739;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: unset;
    gap: 0;
    padding: 0 16px;
    min-height: 64px;
    max-height: none;
  }
  #member_wrapper.portfolio-public #header.mem-top-app-bar .mem-header-left {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    width: auto;
    border-right: none;
    padding: 0;
    justify-content: flex-start;
  }
  #member_wrapper.portfolio-public #header.mem-top-app-bar .mem-header-left .mem-header-brand {
    flex: 1;
    justify-content: center;
    margin: 0;
    min-width: 0;
  }
  #member_wrapper.portfolio-public #header.mem-top-app-bar .mem-header-logo,
  #member_wrapper.portfolio-public #header.mem-top-app-bar #logo {
    filter: brightness(0) invert(1);
    opacity: 0.95;
  }
  #member_wrapper.portfolio-public #header.mem-top-app-bar .mem-sidebar-menu-btn,
  #member_wrapper.portfolio-public #header.mem-top-app-bar .mem-sidebar-menu-btn md-icon {
    color: rgba(255, 255, 255, 0.92);
  }
  #member_wrapper.portfolio-public #header.mem-top-app-bar .mem-sidebar-menu-btn:hover,
  #member_wrapper.portfolio-public #header.mem-top-app-bar .mem-sidebar-menu-btn:focus-visible {
    background: rgba(255, 255, 255, 0.12);
  }
  #member_wrapper.portfolio-public #header.mem-top-app-bar .mem-sidebar-menu-btn {
    --md-icon-button-hover-state-layer-color: rgba(255, 255, 255, 0.12);
    --md-icon-button-focus-state-layer-color: rgba(255, 255, 255, 0.12);
  }

  @media (max-width: 576px) {
    #member_wrapper.portfolio-public #header.mem-top-app-bar {
      padding: 0 12px;
    }
    #member_wrapper.portfolio-public #header.mem-top-app-bar .mem-header-logo,
    #member_wrapper.portfolio-public #header.mem-top-app-bar #logo {
      max-height: 36px;
      width: auto;
    }
  }

  /* Scrim: full viewport, only visible when drawer is open; above main content so cards dim too */
  .mem-m3-card-title-bar-reports {
          margin: 15px 0px 15px;
  }
  /* Modal mode: #lc becomes full-viewport overlay container */
  #member_wrapper #layout td#lc {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none;
    padding: 0;
    border: none;
    border-right: none;
    border-top: none;
    background: transparent;
  }

  #member_wrapper.mem-drawer-open #layout td#lc {
    pointer-events: auto;
  }

  /* Scrim: full viewport, only visible when drawer is open; above main content so cards dim too */
  #member_wrapper .mem-nav-drawer-scrim {
    display: block;
    position: fixed;
    inset: 0;
    top: 72px;
    z-index: 100;
    background: rgba(0, 0, 0, 0.32);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    cursor: pointer;
  }

  #member_wrapper.mem-drawer-open .mem-nav-drawer-scrim {
    opacity: 1;
    visibility: visible;
  }

  /* Drawer sheet: fixed left, slides in from -100% */
  #member_wrapper .mem-nav-drawer {
    position: fixed;
    left: 0;
    top: 72px;
    bottom: 0;
    width: 241px;
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-right: 1px solid var(--mem-nav-border);
    z-index: 101;
    overflow: auto;
  }

  #member_wrapper.mem-drawer-open .mem-nav-drawer {
    transform: translateX(0);
  }

  /* Header: show drawer toggle on small screens */
  #member_wrapper .mem-drawer-toggle {
    display: flex !important;
  }

  #member_wrapper .container.is-fluid .columns > .column:first-child {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    border: none;
    margin: 0;
    overflow: visible;
  }

  /* Columns layout: nav is overlay only — after :first-child so [role="navigation"] wins specificity for position */
  #member_wrapper .container.is-fluid .columns .column[role="navigation"]:first-child {
    position: relative;
    top: auto;
    align-self: stretch;
    height: auto;
    max-height: none;
    flex: 0 0 0;
    min-width: 0;
    max-width: 0;
    overflow: hidden;
    padding: 0;
    border: none;
    margin: 0;
  }

  /* Bulma .is-10 stays ~83% width; main should fill row when nav column is collapsed */
  #member_wrapper .container.is-fluid .columns .column.is-10,
  #member_wrapper .container.is-fluid .columns .column[role="main"] {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  /* Drag handle: larger touch target for tablet reorder */
  #member_wrapper #mem-active-modules-tbody .mem-m3-drag-handle {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin: -10px 4px -10px 0;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-details {
    min-width: 0;
    width: 100%;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-head-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mem-space-sm);
    margin-bottom: 0;
    margin-top: var(--mem-space-sm);
    padding-bottom: var(--mem-space-md);
  }
  #member_wrapper #static_contact_info .mem-m3-profile-head-row .mem-m3-social-top {
    justify-content: flex-start;
  }
  #member_wrapper .mem-m3-share-promo-grid,
  #member_wrapper .mem-m3-share-promo-frames-grid,
  #member_wrapper .mem-m3-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  #member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-item:nth-child(n) {
    grid-column: auto;
  }
  /* Avery: match Frames — center items in grid cells; lone last row when odd count */
  #member_wrapper .mem-m3-share-promo-avery-grid {
    align-items: center;
    justify-items: center;
  }
  #member_wrapper .mem-m3-share-promo-avery-grid .mem-m3-share-promo-item:last-child:nth-child(odd) {
    justify-self: center;
    width: max-content;
    max-width: 100%;
  }
}

/* Contact card (≤744px): align "Connect" with social icons; stack View + Edit full width — one block, overrides narrower breakpoints */
@media (max-width: 744px) {

  #member_wrapper:not(.portfolio-public) #static_contact_info .mem-m3-profile-actions .mem-m3-profile-action-link:has(md-outlined-icon-button) {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    border: 1px solid var(--mem-primary, #0b5fd9);
    border-radius: 10px;
    text-decoration: none;
  }

  #member_wrapper:not(.portfolio-public) #static_contact_info .mem-m3-profile-actions .mem-m3-profile-action-link:not(.mem-m3-profile-action-link--icon-only):has(md-outlined-icon-button) {
    padding: 0 12px;
  }

  #member_wrapper:not(.portfolio-public) #static_contact_info .mem-m3-profile-actions .mem-m3-profile-action-link:has(md-outlined-icon-button) md-outlined-icon-button {
    --md-outlined-icon-button-outline-width: 0px;
  }
  #member_wrapper #static_contact_info .mem-m3-social-block .mem-m3-connect-label {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
  }
  #member_wrapper #static_contact_info .mem-m3-social-block a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }
  #member_wrapper #static_contact_info .mem-m3-social-block a img {
    display: block;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-actions {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    width: 100%;
    /* Override include-xl-down side inset only; leave vertical margins from existing rules */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-actions .mem-m3-profile-action-link {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-actions .mem-m3-profile-action-link md-filled-button {
    width: 100%;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-actions .mem-m3-profile-action-link md-outlined-icon-button {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }
}

/* Reports mobile: prevent horizontal scroll and constrain full-bleed (DRY – single breakpoint) */
@media (max-width: 768px) {
  #member_wrapper .mem-m3-share-content {
      padding: var(--mem-space-sm);
      min-width: 0;
  }
  #member_wrapper .mem-m3-share-header {
    margin: 0px;
  }
  #member_wrapper .container.is-fluid .columns .column[role="main"] {
    overflow-x: hidden;
  }
  #member_wrapper .mem-m3-reports {
    /* max-width: 100%; */
    overflow-x: hidden;
    box-sizing: border-box;
  }
  #member_wrapper .mem-m3-reports-title-card {
    width: calc(100% + 2 * var(--mem-m3-reports-title-full-bleed));
    margin-left: calc(-1 * var(--mem-m3-reports-title-full-bleed));
    margin-right: calc(-1 * var(--mem-m3-reports-title-full-bleed));
    box-sizing: border-box;
    overflow: visible;
  }
  #member_wrapper .mem-m3-reports-title-card .mem-m3-divider {
    border-top: 1px solid var(--mem-outline);
    height: 0;
    margin-top: var(--mem-space-md);
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
  }
  #member_wrapper .mem-m3-card.mem-m3-reports-title-card::after,
  .mem-m3-card.mem-m3-reports-title-card::after {
    content: none !important;
    display: none !important;
  }
  /* Center both Web vs Mobile charts on mobile only – DRY, one block for both charts (e.g. iPhone 14 Pro Max 430px); tablet/desktop unchanged */
  #member_wrapper .mem-m3-reports-charts {
    justify-items: center;
    gap: var(--mem-m3-reports-charts-mobile-gap, var(--mem-space-lg));
    grid-template-columns: 1fr;
  }
  #member_wrapper .mem-m3-reports-chart-wrap {
    max-width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mem-m3-reports-charts-mobile-gap, var(--mem-space-lg));
  }
  #member_wrapper .mem-m3-reports-chart-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: -17px !important;
  }
  #member_wrapper .mem-m3-reports-chart {
    max-width: 100%;
    box-sizing: border-box;
  }
  #member_wrapper .mem-m3-reports-legend {
    align-self: center;
  }
  #member_wrapper .mem-m3-reports .mem-m3-reports-login-card .mem-m3-reports-table-wrap {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  #member_wrapper .mem-m3-attach-doc-bar {
    min-width: 100%;
  }

}
@media (min-width: 769px) {
  #member_wrapper .mem-m3-fullname-alt-section .mem-m3-fullname-alt-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--mem-space-lg);
  }
  #member_wrapper .mem-m3-fullname-alt-section .mem-m3-field-group:last-child .mem-m3-field-input-wrap {
    margin-bottom: var(--mem-space-md);
  }
}
@media (max-width: 640px) {
  #member_wrapper .mem-m3-share-promo-grid {
    grid-template-columns: 1fr;
  }
  #member_wrapper .mem-m3-share-promo-frames-grid {
    grid-template-columns: 1fr;
  }
  #member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-item:nth-child(n) {
    grid-column: auto;
  }
  #member_wrapper .mem-m3-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #member_wrapper .mem-m3-reports-charts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mem-m3-reports-charts-mobile-gap, var(--mem-space-lg));
  }

  /* Chart containers take only necessary width; do not stretch to 100% */
  #member_wrapper .mem-m3-reports-charts > div {
    width: max-content;
    max-width: 100%;
  }

  #member_wrapper .mem-m3-reports-chart-wrap {
    justify-content: flex-start;
  }
}
@media (max-width: 600px) {
  #member_wrapper .mem-m3-reports .mem-m3-reports-active-module-card {
    width: 100%;
    height: auto;
    min-height: 0;
  }
  #member_wrapper .mem-m3-reports .mem-m3-reports-active-module-card .mem-m3-card-body {
    height: auto;
    min-height: 0;
  }
  #member_wrapper .mem-m3-reports .mem-m3-reports-active-module-card .mem-m3-reports-active-body {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--mem-m3-reports-active-module-mobile-stack-gap);
    min-height: 0;
    padding: var(--mem-space-lg) !important;
  }
  #member_wrapper .mem-m3-reports .mem-m3-reports-active-module-card .mem-m3-reports-active-header {
    align-self: flex-start;
    align-items: center;
  }
  #member_wrapper .mem-m3-reports .mem-m3-reports-active-module-card .mem-m3-reports-active-metrics {
    width: 50%;
    margin-left: 0;
    justify-content: space-between;
    align-items: baseline;
    gap: 0;
    box-sizing: border-box;
  }
  #member_wrapper .mem-m3-reports .mem-m3-reports-active-module-card .mem-m3-reports-metric-value {
    font-size: var(--mem-headline-size);
    font-weight: var(--mem-font-weight-bold);
  }
  /* Web vs Mobile charts: stack and center on mobile; DRY gap */
  #member_wrapper .mem-m3-reports-charts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mem-m3-reports-charts-mobile-gap, var(--mem-space-lg));
  }
  #member_wrapper .mem-m3-reports-chart-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mem-m3-reports-charts-mobile-gap, var(--mem-space-lg));
  }

  /* Share gallery (Name Badges, Desktop and Wall Displays): one column */
  #member_wrapper .mem-m3-gallery-grid {
    grid-template-columns: 1fr;
  }
  /* Share promo (Avery labels, Frames): center items on mobile */
  #member_wrapper .mem-m3-share-promo-grid {
    justify-items: center;
  }
  #member_wrapper .mem-m3-share-promo-avery-grid {
    align-items: center;
  }
}

  /* Modal mode: #lc becomes full-viewport overlay container */
  #member_wrapper #layout td#lc {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none;
    padding: 0;
    border: none;
    border-right: none;
    border-top: none;
    background: transparent;
  }

  #member_wrapper.mem-drawer-open #layout td#lc {
    pointer-events: auto;
  }

  /* Scrim: full viewport, only visible when drawer is open; above main content so cards dim too */
  #member_wrapper .mem-nav-drawer-scrim {
    display: block;
    position: fixed;
    inset: 0;
    top: 64px;
    z-index: 100;
    background: rgba(0, 0, 0, 0.32);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    cursor: pointer;
  }

  #member_wrapper.mem-drawer-open .mem-nav-drawer-scrim {
    opacity: 1;
    visibility: visible;
  }

  /* Drawer sheet: fixed left, slides in from -100% */
  #member_wrapper .mem-nav-drawer {
    position: fixed;
    left: 0;
    top: 64px;
    bottom: 0;
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-right: 1px solid var(--mem-nav-border);
    z-index: 101;
    overflow: auto;
  }

  #member_wrapper.mem-drawer-open .mem-nav-drawer {
    transform: translateX(0);
  }

  /* Header: show drawer toggle on small screens */
  #member_wrapper .mem-drawer-toggle {
    display: flex !important;
  }

  #member_wrapper .container.is-fluid .columns > .column:first-child {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    border: none;
    margin: 0;
    overflow: visible;
  }

  /* Columns layout: nav is overlay only — after :first-child so [role="navigation"] wins specificity for position */
  #member_wrapper .container.is-fluid .columns .column[role="navigation"]:first-child {
    position: relative;
    top: auto;
    align-self: stretch;
    height: auto;
    max-height: none;
    flex: 0 0 0;
    min-width: 0;
    max-width: 0;
    overflow: hidden;
    padding: 0;
    border: none;
    margin: 0;
  }

  /* Bulma .is-10 stays ~83% width; main should fill row when nav column is collapsed */
  #member_wrapper .container.is-fluid .columns .column.is-10,
  #member_wrapper .container.is-fluid .columns .column[role="main"] {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  /* Drag handle: larger touch target for tablet reorder */
  #member_wrapper #mem-active-modules-tbody .mem-m3-drag-handle {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin: -10px 4px -10px 0;
  }
  /* Contact profile: stack photo above details so text has full width and doesn’t squeeze */
  #member_wrapper #static_contact_info .mem-m3-profile-header {
    align-items: flex-start;
    gap: var(--mem-space-lg);
  }
  #member_wrapper #static_contact_info .mem-m3-profile-details {
    min-width: 0;
    width: 100%;
  }
  #member_wrapper #static_contact_info .mem-m3-profile-head-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mem-space-sm);
    /* margin-bottom: 0; */
    /* margin-top: var(--mem-space-sm); */
    padding-bottom: var(--mem-space-md);
  }
  #member_wrapper #static_contact_info .mem-m3-profile-head-row .mem-m3-social-top {
    justify-content: flex-start;
  }
  #member_wrapper .mem-m3-share-promo-grid,
  #member_wrapper .mem-m3-share-promo-frames-grid,
  #member_wrapper .mem-m3-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  #member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-item:nth-child(n) {
    grid-column: auto;
  }
  /* Avery: match Frames — center items in grid cells; lone last row when odd count */
  #member_wrapper .mem-m3-share-promo-avery-grid {
    align-items: center;
    justify-items: center;
  }
  #member_wrapper .mem-m3-share-promo-avery-grid .mem-m3-share-promo-item:last-child:nth-child(odd) {
    justify-self: center;
    width: max-content;
    max-width: 100%;
  }
}
/* Reports mobile: prevent horizontal scroll and constrain full-bleed (DRY – single breakpoint) */
@media (max-width: 768px) {
  #member_wrapper .mem-m3-share-content {
      padding: var(--mem-space-sm);
      min-width: 0;
  }
  #member_wrapper .mem-m3-share-header {
    margin: 0px;
  }
  #member_wrapper .container.is-fluid .columns .column[role="main"] {
    overflow-x: hidden;
  }
  #member_wrapper .mem-m3-reports {
    /* max-width: 100%; */
    overflow-x: hidden;
    box-sizing: border-box;
  }
  #member_wrapper .mem-m3-reports-title-card {
    width: calc(100% + 2 * var(--mem-m3-reports-title-full-bleed));
    margin-left: calc(-1 * var(--mem-m3-reports-title-full-bleed));
    margin-right: calc(-1 * var(--mem-m3-reports-title-full-bleed));
    box-sizing: border-box;
    overflow: visible;
  }
  #member_wrapper .mem-m3-reports-title-card .mem-m3-divider {
    border-top: 1px solid var(--mem-outline);
    height: 0;
    margin-top: var(--mem-space-md);
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
  }
  #member_wrapper .mem-m3-card.mem-m3-reports-title-card::after,
  .mem-m3-card.mem-m3-reports-title-card::after {
    content: none !important;
    display: none !important;
  }
  /* Center both Web vs Mobile charts on mobile only – DRY, one block for both charts (e.g. iPhone 14 Pro Max 430px); tablet/desktop unchanged */
  #member_wrapper .mem-m3-reports-charts {
    justify-items: center;
    gap: var(--mem-m3-reports-charts-mobile-gap, var(--mem-space-lg));
    grid-template-columns: 1fr;
  }
  #member_wrapper .mem-m3-reports-chart-wrap {
    max-width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mem-m3-reports-charts-mobile-gap, var(--mem-space-lg));
  }
  #member_wrapper .mem-m3-reports-chart-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: -17px !important;
  }
  #member_wrapper .mem-m3-reports-chart {
    max-width: 100%;
    box-sizing: border-box;
  }
  #member_wrapper .mem-m3-reports-legend {
    align-self: center;
  }
  #member_wrapper .mem-m3-reports .mem-m3-reports-login-card .mem-m3-reports-table-wrap {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}
@media (min-width: 769px) {
  #member_wrapper .mem-m3-fullname-alt-section .mem-m3-fullname-alt-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--mem-space-lg);
  }
  #member_wrapper .mem-m3-fullname-alt-section .mem-m3-field-group:last-child .mem-m3-field-input-wrap {
    margin-bottom: var(--mem-space-md);
  }
}
@media (max-width: 640px) {
  #member_wrapper .mem-m3-share-promo-grid {
    grid-template-columns: 1fr;
  }
  #member_wrapper .mem-m3-share-promo-frames-grid {
    grid-template-columns: 1fr;
  }
  #member_wrapper .mem-m3-share-promo-frames-grid .mem-m3-share-promo-item:nth-child(n) {
    grid-column: auto;
  }
  #member_wrapper .mem-m3-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #member_wrapper .mem-m3-reports-charts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mem-m3-reports-charts-mobile-gap, var(--mem-space-lg));
  }

  /* Chart containers take only necessary width; do not stretch to 100% */
  #member_wrapper .mem-m3-reports-charts > div {
    width: max-content;
    max-width: 100%;
  }

  #member_wrapper .mem-m3-reports-chart-wrap {
    justify-content: flex-start;
  }
}
@media (max-width: 600px) {
  #member_wrapper .mem-m3-reports .mem-m3-reports-active-module-card {
    width: 100%;
    height: auto;
    min-height: 0;
  }
  #member_wrapper .mem-m3-reports .mem-m3-reports-active-module-card .mem-m3-card-body {
    height: auto;
    min-height: 0;
  }
  #member_wrapper .mem-m3-reports .mem-m3-reports-active-module-card .mem-m3-reports-active-body {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--mem-m3-reports-active-module-mobile-stack-gap);
    min-height: 0;
    padding: var(--mem-space-lg) !important;
  }
  #member_wrapper .mem-m3-reports .mem-m3-reports-active-module-card .mem-m3-reports-active-header {
    align-self: flex-start;
    align-items: center;
  }
  #member_wrapper .mem-m3-reports .mem-m3-reports-active-module-card .mem-m3-reports-active-metrics {
    width: 50%;
    margin-left: 0;
    justify-content: space-between;
    align-items: baseline;
    gap: 0;
    box-sizing: border-box;
  }
  #member_wrapper .mem-m3-reports .mem-m3-reports-active-module-card .mem-m3-reports-metric-value {
    font-size: var(--mem-headline-size);
    font-weight: var(--mem-font-weight-bold);
  }
  /* Web vs Mobile charts: stack and center on mobile; DRY gap */
  #member_wrapper .mem-m3-reports-charts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mem-m3-reports-charts-mobile-gap, var(--mem-space-lg));
  }
  #member_wrapper .mem-m3-reports-chart-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mem-m3-reports-charts-mobile-gap, var(--mem-space-lg));
  }

  /* Share gallery (Name Badges, Desktop and Wall Displays): one column */
  #member_wrapper .mem-m3-gallery-grid {
    grid-template-columns: 1fr;
  }
  /* Share promo (Avery labels, Frames): center items on mobile */
  #member_wrapper .mem-m3-share-promo-grid {
    justify-items: center;
  }
  #member_wrapper .mem-m3-share-promo-avery-grid {
    align-items: center;
  }
}

#member_wrapper .mem-m3-gallery-separator {
  border-bottom: var(--mem-share-border-width) solid var(--main-border-outline);
  padding: var(--mem-gallery-sep-space) 0 0;
  margin-bottom: var(--mem-gallery-sep-space);
}
#member_wrapper .mem-m3-gallery-section {
  margin-bottom: var(--mem-space-lg);
}
#member_wrapper .mem-m3-gallery-section:last-child {
  margin-bottom: 0;
}
#member_wrapper .mem-m3-gallery-subtitle {
  font-size: 1rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 var(--mem-space-xs) 0;
}
#member_wrapper .mem-m3-gallery-sizes {
  font-size: 0.9375rem;
  color: #555;
  margin: 0 0 var(--mem-space-md) 0;
}
#member_wrapper .mem-m3-gallery-note {
  color: #E00000;
}
#member_wrapper .mem-m3-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--mem-space-xl) var(--mem-space-xl);
  align-items: stretch;
}
@media (max-width: 640px) {
  #member_wrapper .mem-m3-gallery-grid {
    grid-template-columns: 1fr;
    row-gap: var(--mem-space-xl);
  }
  #member_wrapper .mem-m3-gallery-thumb,
  #member_wrapper .mem-m3-gallery-thumb-frame {
    width: 100%;
    max-width: 100%;
  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  #member_wrapper .mem-m3-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--mem-space-xl);
    row-gap: var(--mem-space-xxl);
  }
  #member_wrapper .mem-m3-gallery-thumb,
  #member_wrapper .mem-m3-gallery-thumb-frame {
    width: 100%;
    max-width: 260px;
  }
}
#member_wrapper .mem-m3-gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  align-self: stretch;
  min-height: 0;
  margin-top: auto;
}
#member_wrapper .mem-m3-gallery-thumb {
  display: block;
  width: 165px;
  height: auto;
  border: 1px solid #b3d9f7;
  border-radius: 4px;
  margin-bottom: var(--mem-space-sm);
  flex-shrink: 0;
  object-fit: cover;
}
#member_wrapper .mem-m3-gallery-thumb-frame {
  width: 165px;
  object-fit: cover;
}

/*
 * Member dashboard only: #mem-header-menu-btn is the mobile overlay toggle.
 * Hide it on desktop — the sidebar “Menu” row has its own hamburger (initMemNavDrawer also enforces this).
 */
@media (min-width: 1024px) {
  #member_wrapper:not(.portfolio-public) #mem-header-menu-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
#member_wrapper .mem-m3-share-table thead th:nth-child(3) {
  text-align: center;
}
#member_wrapper .mem-m3-share-table thead th:nth-child(5) {
  text-align: right;
}
#member_wrapper .mem-m3-share-table tbody td a[aria-label="Download QR code"] {
  display: flex;
  justify-content: center;
}

/* Alternative portfolio views: card layout on tablet + mobile only (single table markup, DRY) */
@media (max-width: 1023px) {
  #member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-table-wrap {
    overflow: visible;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    margin-top: var(--mem-space-md);
    margin-bottom: var(--mem-space-sm);
  }

  #member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-table,
  #member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-table tbody {
    display: block;
    width: 100%;
  }

  #member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-table thead {
    display: none;
  }

  #member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-table tbody tr.mem-m3-share-alt-data-row,
  #member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-table tbody tr.mem-m3-share-edit-row {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  #member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-table tbody tr.mem-m3-share-alt-data-row {
    border: 1px solid var(--mem-share-border);
    border-radius: 8px;
    background: #fff;
    margin-bottom: var(--mem-space-md);
    padding: var(--mem-space-md);
  }

  #member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-table tbody tr.mem-m3-share-edit-row {
    margin-bottom: var(--mem-space-lg);
    margin-top: var(--mem-space-sm);
    border: 1px solid var(--mem-share-border);
    border-radius: 8px;
    overflow: hidden;
  }

  #member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-table tbody tr.mem-m3-share-edit-row td {
    display: block;
    width: 100%;
    border-bottom: none;
    padding: 0;
  }

  /* Label and value on one line: "Label: value" (same data-label + cell markup as desktop — DRY) */
  #member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-table tbody tr.mem-m3-share-alt-data-row td:not(.mem-m3-share-td-actions) {
    display: block;
    width: 100%;
    padding: 0 0 var(--mem-space-sm) 0;
    border: none;
    text-align: left;
    vertical-align: top;
  }

  #member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-table tbody tr.mem-m3-share-alt-data-row td:not(.mem-m3-share-td-actions)::before {
    content: attr(data-label) ": ";
    display: inline;
    font-weight: 400;
    font-size: var(--mem-label-size);
    color: var(--mem-on-surface, rgba(0, 0, 0, 0.87));
  }

  #member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-table tbody tr.mem-m3-share-alt-data-row td:not(.mem-m3-share-td-actions) .mem-m3-share-cell-value {
    display: inline;
  }

  /* QR row: label + icon share one line; flex aligns text with md-icon-button (mobile/tablet only) */
  #member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-table tbody tr.mem-m3-share-alt-data-row td:not(.mem-m3-share-td-actions):has(.mem-m3-share-cell-value--qr) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.25em;
  }

  #member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-table tbody tr.mem-m3-share-alt-data-row td:not(.mem-m3-share-td-actions):has(.mem-m3-share-cell-value--qr) .mem-m3-share-cell-value--qr {
    display: inline-flex;
    align-items: center;
    line-height: 0;
  }

  #member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-table tbody tr.mem-m3-share-alt-data-row td:not(.mem-m3-share-td-actions):has(.mem-m3-share-cell-value--qr) a[aria-label="Download QR code"] {
    display: inline-flex;
    align-items: center;
    line-height: 0;
  }

  #member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-table tbody tr.mem-m3-share-alt-data-row td:last-of-type {
    padding-bottom: 0;
  }

  #member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-table tbody tr.mem-m3-share-alt-data-row td.mem-m3-share-td-actions {
    border-top: 1px solid var(--mem-share-border);
    margin-top: var(--mem-space-sm);
    padding-top: var(--mem-space-sm);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--mem-space-sm);
    border-bottom: none !important;
  }

  #member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-table tbody tr.mem-m3-share-alt-data-row td.mem-m3-share-td-actions::before {
    content: none;
    display: none;
  }

  #member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-cell-value--name {
    font-weight: 700;
  }

  #member_wrapper #mem-share-alt-portfolios-section .mem-m3-share-table tbody tr.mem-m3-share-alt-data-row .mem-m3-share-cell-value--link a {
    word-break: break-word;
  }
}

.mem-m3-reports-per-page-select {
  height: 36px !important;
  display: inline-flex;
  align-items: center;
}

form textarea,
.tox.tox-tinymce {
  width: 100% !important;
  max-width: 900px !important;
}

span.mem-m3-keycode-hint {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em 0.35em;
  margin-left: 0.35em;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

/* iPad Pro tuning (DRY): keep desktop-like contact card density on 992-1199px */
@media (min-width: 992px) and (max-width: 1199px) {
  #member_wrapper #static_contact_info.mem-m3-contact-block {
    --mem-contact-photo-size-ipad: 213px;
    --mem-contact-photo-height-ipad: 252px;
    --mem-contact-name-size-ipad: 30px;
    --mem-contact-title-size-ipad: 20px;
    --mem-contact-meta-size-ipad: var(--mem-body-size);
  }

  #member_wrapper #static_contact_info .mem-m3-profile-photo-wrap {
    width: var(--mem-contact-photo-size-ipad);
    height: var(--mem-contact-photo-height-ipad);
  }

  #member_wrapper #static_contact_info .mem-m3-profile-name-wrap .mem-m3-profile-name {
    font-size: var(--mem-contact-name-size-ipad);
  }

  #member_wrapper #static_contact_info .mem-m3-profile-name-wrap .mem-m3-profile-title {
    font-size: var(--mem-contact-title-size-ipad);
  }

  #member_wrapper #static_contact_info .mem-m3-profile-name-wrap :is(.mem-m3-profile-aka, .mem-m3-profile-alt-name),
  #member_wrapper #static_contact_info .mem-m3-contact-row {
    font-size: var(--mem-contact-meta-size-ipad);
  }

  #member_wrapper #static_contact_info .mem-m3-social-block .mem-m3-connect-label {
    font-size: var(--mem-contact-meta-size-ipad);
  }
}

/* Contact card responsive alignment (DRY): one action-row pattern for mobile/tablet. */
@media (max-width: 1199px) {
  #member_wrapper #static_contact_info .mem-m3-profile-name .mem-m3-profile-aka-line {
    display: inline;
    white-space: nowrap;
  }

  #member_wrapper #static_contact_info .mem-m3-social-block {
    align-items: flex-start;
  }

  #member_wrapper #static_contact_info .mem-m3-social-block .mem-m3-social-icons-row {
    justify-content: flex-start;
  }

  #member_wrapper:not(.portfolio-public) #static_contact_info .mem-m3-profile-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--mem-space-sm);
    width: 100%;
    max-width: 100%;
    margin: var(--mem-space-sm) 0 var(--mem-space-md) !important;
    box-sizing: border-box;
    padding: 0 var(--mem-space-md);
  }

  #member_wrapper:not(.portfolio-public) #static_contact_info .mem-m3-profile-actions .mem-m3-profile-action-link {
    width: auto;
    max-width: none;
  }

  #member_wrapper:not(.portfolio-public) #static_contact_info .mem-m3-profile-actions .mem-m3-profile-action-link:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  #member_wrapper:not(.portfolio-public) #static_contact_info .mem-m3-profile-actions .mem-m3-profile-action-link:first-child md-filled-button {
    width: 100%;
  }

  #member_wrapper:not(.portfolio-public) #static_contact_info .mem-m3-profile-actions .mem-m3-profile-action-link:not(:first-child) {
    flex: 0 0 auto;
  }
}

@media (max-width: 767px) {
  /* Keep both actions on a single row at mobile widths (match 768px layout). */
  #member_wrapper:not(.portfolio-public) #static_contact_info .mem-m3-profile-actions {
    flex-direction: row;
    align-items: center;
  }
}