/* =========================================================
   FWC (First World Community) — Design System
   LinkedIn-standard, professional, card-based UI
   Breakpoints: mobile <768px · tablet 768–1199px · desktop ≥1200px
   Spacing scale: 4/8px grid
   ========================================================= */

:root {
  /* Brand colors (from FWC logo: green -> blue gradient) */
  --fwc-green: #14b874;
  --fwc-green-dark: #0e9c60;
  --fwc-blue: #1e6fd9;
  --fwc-blue-dark: #1552a8;
  --fwc-gradient: linear-gradient(100deg, var(--fwc-green) 0%, #1aa5a0 45%, var(--fwc-blue) 100%);

  /* Neutral palette — Professional LinkedIn Light Theme */
  --navy-900: #ffffff;
  --navy-800: #f8fafc;
  --navy-700: #e2e8f0;
  --steel-600: #475569;
  --steel-400: #64748b;
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --line-200: #e2e8f0;
  --line-100: #f1f5f9;
  --bg-page: #f3f4f6;
  --white: #ffffff;

  /* Semantic */
  --success: #14b874;
  --warning: #e7a600;
  --danger: #e14b4b;
  --info: var(--fwc-blue);

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 10px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.14);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Spacing (4/8 grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  --nav-h: 64px;
  --container: 1128px;
}

* { box-sizing: border-box; }

/* The `hidden` attribute must always win. Browsers give it display:none at
   the weakest priority, so any class that sets display -- .icon-btn is
   inline-flex -- silently un-hides it. That is how the change-photo buttons,
   meant only for your own profile, appeared on every member's profile. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-900);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 { margin: 0 0 var(--sp-2); font-weight: 700; line-height: 1.25; color: var(--ink-900); }
h1 { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }
p { margin: 0 0 var(--sp-3); color: var(--ink-700); }
.text-muted { color: var(--ink-500); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 14px;
  border: 1.5px solid transparent;
  transition: all .15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--fwc-gradient); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { filter: brightness(1.06); box-shadow: var(--shadow-md); }
.btn-secondary { background: #fff; color: var(--fwc-blue-dark); border-color: var(--fwc-blue-dark); }
.btn-secondary:hover { background: #eef5ff; }
.btn-ghost { background: transparent; color: var(--ink-700); border-color: var(--line-200); }
.btn-ghost:hover { background: var(--line-100); }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-lg { padding: 13px 28px; font-size: 16px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
}
.badge-verified { background: #e7f8f0; color: var(--fwc-green-dark); }
.badge-top-seller { background: #fff4e0; color: #a5690a; }
.badge-new { background: #eaf1ff; color: var(--fwc-blue-dark); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: var(--sp-5); }

/* ============================================================
   TOP NAV — FWC Global Header (Clean White Theme)
   ============================================================ */
.appnav {
  position: sticky;
  top: 0;
  z-index: 300;
  min-height: 72px;
  background: #ffffff;
  border-bottom: 1px solid var(--line-200);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.appnav-inner {
  max-width: 1320px;
  margin: 0 auto;
  min-height: 72px;
  padding: 10px var(--sp-4);
  display: flex;
  align-items: center;
  gap: 14px;
}
.appnav-logo { display: flex; align-items: center; flex-shrink: 0; max-width: 45%; }
.appnav-logo img.logo-mark { height: 32px; width: auto; border-radius: 8px; background: #ffffff; padding: 2px 6px; }
.appnav-logo-full {
  height: 46px !important;
  width: auto !important;
  max-width: 190px !important;
  max-height: 46px !important;
  min-width: 0 !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 8px;
  background: #ffffff;
  padding: 4px 10px !important;
  box-sizing: content-box;
  flex-shrink: 0;
}
.appnav-logo-stack { display: flex; flex-direction: column; line-height: 1.15; gap: 2px; }
.appnav-logo-row { display: flex; align-items: center; gap: 7px; }
.appnav-wordmark { font-weight: 800; font-size: 16px; color: var(--ink-900); letter-spacing: .2px; }
.appnav-tagline { font-size: 10px; color: var(--ink-500); font-weight: 500; white-space: nowrap; }
.badge-global {
  background: rgba(16,185,129,.1);
  color: #059669;
  border: 1px solid rgba(16,185,129,.25);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}
.badge-global-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.2); flex-shrink: 0; }

/* Center navigation pill container inside .appnav */
.appnav-nav-pill, .appnav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f1f5f9;
  border: 1px solid var(--line-200);
  border-radius: 24px;
  padding: 5px 8px;
  margin: 0 auto;
  flex-wrap: nowrap;
}
.appnav-nav-pill a, .appnav-links a {
  color: var(--ink-700);
  font-weight: 700;
  font-size: 13.5px;
  padding: 8px 16px;
  border-radius: 18px;
  white-space: nowrap;
  transition: all .15s ease;
}
.appnav-nav-pill a:hover, .appnav-links a:hover {
  color: var(--ink-900);
  background: #e2e8f0;
}
.appnav-nav-pill a.active, .appnav-links a.active {
  background: var(--fwc-gradient);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(16,185,129,.35);
}

.appnav-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  border: 1px solid var(--line-200);
  border-radius: 20px;
  padding: 7px 12px;
  color: var(--ink-500);
  font-size: 13px;
  flex: 0 1 200px;
  position: relative;
  transition: border-color .15s ease;
}
.appnav-search:focus-within { border-color: rgba(16,185,129,.5); }
.appnav-search input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink-900);
  font-size: 13px;
  width: 100%;
}
.appnav-search input::placeholder { color: var(--ink-400); }
.appnav-search .kbd-hint {
  background: #ffffff;
  border: 1px solid var(--line-200);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  color: var(--ink-500);
  flex-shrink: 0;
}
.appnav-search-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid var(--line-200);
  border-radius: 14px;
  padding: 6px;
  max-height: 340px;
  overflow-y: auto;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  z-index: 250;
}
.appnav-search-panel.open { display: block; }
.appnav-search-result {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--ink-900);
  font-size: 13px;
}
.appnav-search-result:hover, .appnav-search-result:focus-visible { background: #f1f5f9; }
.appnav-search-result img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.appnav-search-empty, .appnav-search-hint { padding: 12px 10px; color: var(--ink-500); font-size: 12.5px; }
.appnav-search-viewall { display: block; text-align: center; padding: 10px; font-weight: 700; font-size: 12.5px; color: #059669; border-top: 1px solid var(--line-200); margin-top: 4px; }

.appnav-action-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* Public marketing header: Log in/Join for guests, QR/notifications/profile for members */
.appnav-guestbar, .appnav-memberbar { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.appnav-guestbar a.btn-ghost {
  color: var(--ink-900) !important;
  border: 1px solid var(--line-200) !important;
  font-weight: 700;
  font-size: 13.5px;
  padding: 7px 16px;
  border-radius: 12px;
  background: #ffffff !important;
  transition: all .15s ease;
  white-space: nowrap;
}
.appnav-guestbar a.btn-ghost:hover {
  background: #f1f5f9 !important;
  border-color: var(--ink-400) !important;
  color: var(--ink-900) !important;
}
.appnav-guestbar a.btn-primary {
  background: var(--fwc-gradient) !important;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 13.5px;
  padding: 7px 18px;
  border-radius: 12px;
  border: none !important;
  box-shadow: 0 2px 10px rgba(16,185,129,.35);
  transition: all .15s ease;
  white-space: nowrap;
}
.appnav-guestbar a.btn-primary:hover {
  opacity: .95;
  box-shadow: 0 4px 14px rgba(16,185,129,.5);
}
.appnav-iconbtn {
  width: 38px; height: 38px;
  border-radius: 14px;
  background: #f1f5f9;
  border: 1px solid var(--line-200);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-700);
  position: relative;
  flex-shrink: 0;
}
.appnav-iconbtn:hover { background: #e2e8f0; color: var(--ink-900); }

.appnav-qrbtn {
  color: #d97706;
}

.appnav-userpill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  border: 1px solid var(--line-200);
  border-radius: 20px;
  padding: 4px 12px 4px 4px;
  color: var(--ink-900);
  font-size: 13px;
  font-weight: 700;
}
.appnav-userpill .chevron { color: var(--ink-500); flex-shrink: 0; transition: transform .15s ease; }
.appnav-userpill[aria-expanded="true"] .chevron { transform: rotate(180deg); }
/* Bound the display name so a long real name can never push the header wider
   than the icon buttons next to it were sized for. */
.appnav-userpill span[data-nav-name] {
  display: inline-block;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.appnav-useravatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #10b981;
}

.appnav-dot {
  position: absolute;
  top: 2px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  border: 1.5px solid #ffffff;
}
.appnav-dot.is-hidden { display: none; }

.appnav-burger {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  background: #f1f5f9;
  border: 1px solid var(--line-200);
  border-radius: 12px;
  color: var(--ink-900);
  flex-shrink: 0;
  order: 5;
}
.appnav-burger:hover { background: #e2e8f0; }

/* Dropdown panels shared by notifications + profile menu */
.appnav-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 240px;
  background: #ffffff;
  border: 1px solid var(--line-200);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 260;
  /* The height was unbounded. An admin's account menu is eleven items -- about
     390px -- and .appnav is sticky, so on a short window the bottom of the menu
     sat below the fold with no way to reach it: the page cannot scroll a pinned
     element into view. Log out was the item that disappeared. Capping to the
     space under the nav and scrolling inside keeps every item reachable at any
     window height. */
  max-height: calc(100vh - var(--nav-h) - 24px);
  /* 100vh is the tallest the viewport can be; on phones and resized windows the
     visible area is shorter, which cut the menu off under the browser's own
     toolbar. dvh is the height actually showing, where supported. */
  max-height: calc(100dvh - var(--nav-h) - 24px);
  overflow-y: auto;
  /* Don't hand the scroll to the page when the menu reaches its end. */
  overscroll-behavior: contain;
  /* Scroll shadows. When the menu is taller than the space and scrolls, a
     plain cut edge looked like the menu had failed to draw ("half visible").
     A soft shadow appears at whichever edge has more items beyond it, and
     disappears at the ends: the white covers ride along with the content
     (local), the shadows stay pinned to the panel (scroll). */
  background:
    linear-gradient(#ffffff 30%, rgba(255,255,255,0)) center top / 100% 28px no-repeat local,
    linear-gradient(rgba(255,255,255,0), #ffffff 70%) center bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(15,23,42,0.16), rgba(15,23,42,0)) center top / 100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(15,23,42,0.16), rgba(15,23,42,0)) center bottom / 100% 12px no-repeat scroll,
    #ffffff;
}
.appnav-panel.open { display: block; }
.appnav-panel a, .appnav-panel button.panel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink-900);
  background: none;
  border: none;
}
.appnav-panel a:hover, .appnav-panel button.panel-item:hover { background: var(--line-100); }
.appnav-panel hr { border: none; border-top: 1px solid var(--line-200); margin: 6px 4px; }
.appnav-panel .panel-danger { color: var(--danger); }
/* Short windows (a half-height snapped window, a laptop at 125-150% display
   scaling, a phone in landscape): tighten the rows so the whole account menu
   fits instead of scrolling. Eleven items go from ~440px to ~310px. */
@media (max-height: 760px) {
  .appnav-panel a, .appnav-panel button.panel-item { padding: 7px 12px; }
  .appnav-panel hr { margin: 4px; }
}
@media (max-height: 560px) {
  .appnav-panel { padding: 6px; }
  .appnav-panel a, .appnav-panel button.panel-item { padding: 5px 10px; font-size: 13px; }
  .appnav-panel hr { margin: 3px 4px; }
}

.appnav-notif-panel { width: 320px; padding: 0; overflow: hidden; }
.appnav-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line-200); }
.appnav-notif-head h4 { margin: 0; font-size: 14px; }
.appnav-notif-head button { background: none; border: none; color: var(--fwc-blue-dark); font-weight: 700; font-size: 12px; cursor: pointer; }
/* 340px on a normal window, but this panel also carries a header and a footer,
   so on a short one the fixed cap still pushed "View all notifications" out of
   reach. min() keeps the familiar size where there is room and yields where
   there is not. */
.appnav-notif-list { max-height: min(340px, calc(100vh - var(--nav-h) - 132px)); overflow-y: auto; }
.appnav-notif-item { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-100); position: relative; }
.appnav-notif-item:last-child { border-bottom: none; }
.appnav-notif-item img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.appnav-notif-item p { margin: 0; font-size: 13px; color: var(--ink-700); line-height: 1.4; }
.appnav-notif-item strong { color: var(--ink-900); }
.appnav-notif-item .text-xs { margin-top: 2px; }
.appnav-notif-item.unread { background: #f3f9ff; }
.appnav-notif-item.unread::before { content: ""; position: absolute; left: 6px; top: 20px; width: 7px; height: 7px; border-radius: 50%; background: var(--fwc-blue); }
.appnav-notif-empty { padding: 32px 16px; text-align: center; color: var(--ink-400); font-size: 13px; }
.appnav-notif-foot { padding: 10px 16px; text-align: center; border-top: 1px solid var(--line-200); }
.appnav-notif-foot a { font-size: 12.5px; font-weight: 700; color: var(--fwc-blue-dark); }

/* Mobile dropdown nav menu (replaces the nav pill + search under 1180px) */
.appnav-mobile-menu {
  display: none;
  flex-direction: column;
  background: #ffffff;
  border-top: 1px solid var(--line-200);
  padding: 14px 16px 22px;
}
.appnav-mobile-menu.open { display: flex; }
.appnav-mobile-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  border: 1px solid var(--line-200);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 12px;
  color: var(--ink-500);
}
.appnav-mobile-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--ink-900); font-size: 14px; }
.appnav-mobile-menu a {
  color: var(--ink-700);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line-100);
}
.appnav-mobile-menu a.active { color: #059669; }
.appnav-mobile-menu a:last-of-type { border-bottom: none; }


/* Accessibility helpers */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: #fff;
  color: var(--ink-900);
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  font-weight: 700;
  font-size: 13px;
  z-index: 1000;
}
.skip-link:focus { left: 0; }
.appnav-nav-pill a:focus-visible,
.appnav-mobile-menu a:focus-visible,
.appnav-iconbtn:focus-visible,
.appnav-burger:focus-visible,
.appnav-userpill:focus-visible,
.appnav-panel a:focus-visible,
.appnav-panel button:focus-visible {
  outline: 2px solid #34d399;
  outline-offset: 2px;
}

/* QR modal */
.qr-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8,11,17,.6);
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 20px;
}
.qr-modal-backdrop.open { display: flex; }
.qr-modal {
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.qr-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: var(--line-100); color: var(--ink-700);
  display: flex; align-items: center; justify-content: center;
}
.qr-modal img.qr-code { width: 200px; height: 200px; margin: 8px auto 16px; border-radius: 12px; border: 1px solid var(--line-200); }
.qr-modal-link { display: flex; align-items: center; gap: 8px; background: var(--line-100); border-radius: 10px; padding: 8px 10px; margin-top: 14px; }
.qr-modal-link input { flex: 1; border: none; background: transparent; outline: none; font-size: 12.5px; color: var(--ink-700); }

/* Mobile bottom tab bar */
.bottomnav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 58px;
  background: #ffffff;
  border-top: 1px solid var(--line-200);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
  z-index: 100;
  align-items: center;
  justify-content: space-around;
}
.bottomnav a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--ink-500); font-size: 10px; font-weight: 700;
}
.bottomnav a.active { color: var(--fwc-blue-dark); }
.bottomnav svg { width: 22px; height: 22px; }

/* ============================================================
   PUBLIC NAV — marketing pages (white background)
   ============================================================ */
.pubnav {
  position: sticky;
  top: 0;
  z-index: 300;
  min-height: 76px;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-200);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.pubnav-inner {
  max-width: var(--container);
  margin: 0 auto;
  min-height: 76px;
  padding: 0 var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.pubnav-logo { display: flex; align-items: center; gap: 10px; }
.pubnav-logo img.logo-mark { height: 32px; width: auto; border-radius: 5px; }
.pubnav-links { display: flex; gap: var(--sp-6); margin-left: var(--sp-6); }
.pubnav-links a { color: var(--ink-700); font-weight: 600; font-size: 14px; }
.pubnav-links a:hover { color: var(--fwc-blue-dark); }
.pubnav-cta { margin-left: auto; display: flex; gap: var(--sp-3); align-items: center; }
.pubnav-cta a.btn-ghost { color: var(--ink-700); border-color: var(--line-200); }
.pubnav-cta a.btn-ghost:hover { background: var(--line-100); }
.pubnav-burger {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line-200);
  border-radius: 10px;
  color: var(--ink-900);
  margin-left: auto;
}
.pubnav-mobile-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: #ffffff;
  border-top: 1px solid var(--line-200);
  padding: 14px 20px 20px;
}
.pubnav-mobile-menu.open { display: flex; }
.pubnav-mobile-menu a { color: var(--ink-700); font-weight: 600; padding: 11px 4px; border-bottom: 1px solid var(--line-100); }
.pubnav-mobile-menu a:last-of-type { border-bottom: none; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.grid-3col {
  display: grid;
  grid-template-columns: 240px 1fr 300px;
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-5) 0 var(--sp-12);
}
.grid-2col {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-5) 0 var(--sp-12);
}
.sticky-col { position: sticky; top: calc(var(--nav-h) + var(--sp-5)); }

.section { padding: var(--sp-12) 0; }
.section-title { text-align: center; max-width: 640px; margin: 0 auto var(--sp-8); }
.section-title h2 { margin-bottom: var(--sp-2); }

/* Marketing-page content grids — collapse responsively instead of the fixed
   inline column counts the landing page used to hard-code. */
.grid-responsive-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-responsive-2 { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
  .grid-responsive-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-responsive-2 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .grid-responsive-3 { grid-template-columns: 1fr; }
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-200);
  background: #fff;
  font-size: 13px; font-weight: 600; color: var(--ink-700);
  white-space: nowrap;
}
.chip.active { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.chip-row { display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-1) 0; }

.avatar { border-radius: 50%; object-fit: cover; background: var(--line-100); }
.avatar-sm { width: 32px; height: 32px; }
.avatar-md { width: 48px; height: 48px; }
.avatar-lg { width: 88px; height: 88px; border: 3px solid #fff; }
.avatar-xl { width: 128px; height: 128px; border: 4px solid #fff; }

.tabs { display: flex; gap: var(--sp-6); border-bottom: 1px solid var(--line-200); }
.tab { padding: 12px 2px; font-weight: 700; font-size: 14px; color: var(--ink-500); background: transparent; border: 0; border-bottom: 2.5px solid transparent; }
.tab.active { color: var(--ink-900); border-color: var(--fwc-blue); }

.form-group { margin-bottom: var(--sp-4); }
.form-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--ink-700); }
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--line-200);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  color: var(--ink-900);
  background: #fff;
  outline: none;
  transition: border-color .15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--fwc-blue); }
.form-input.error { border-color: var(--danger); }
.form-error { color: var(--danger); font-size: 12px; margin-top: 4px; }
.form-hint { color: var(--ink-400); font-size: 12px; margin-top: 4px; }

.footer {
  background: #ffffff;
  color: var(--ink-700);
  border-top: 1px solid var(--line-200);
  padding: var(--sp-10) 0 var(--sp-6);
  margin-top: var(--sp-12);
}
.footer h4 { color: var(--ink-900) !important; }
.footer a { color: var(--ink-500); }
.footer a:hover { color: var(--fwc-blue-dark); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--sp-6); }
.footer-bottom {
  border-top: 1px solid var(--line-200);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-500);
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.locked {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}
.lock-overlay {
  position: relative;
}
.lock-overlay::after {
  content: "🔒 Members only — Join to view";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.55);
  font-weight: 700;
  color: var(--ink-900);
  border-radius: inherit;
  font-size: 13px;
  text-align: center;
  padding: var(--sp-4);
}

.skeleton { background: linear-gradient(90deg, var(--line-100) 25%, var(--line-200) 37%, var(--line-100) 63%); background-size: 400% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Dropdown menus (avatar menu, etc.) ---------- */
[data-dropdown] { display: none; }
[data-dropdown].open { display: block; }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink-900);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: all .25s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */

/* Below ~1520px the 7-item nav pill + inline search no longer reliably fit
   alongside the logo and QR/notification/profile icons — their un-wrappable
   content needs ~1330px at minimum, and a long real display name (bounded to
   130px by the ellipsis rule above, but still real width) can push that past
   1440px — collapse into the burger menu instead of letting the header
   overflow. */
/* Prevent a horizontal scrollbar on the page.
   This was `html, body { overflow-x: hidden }`. With `hidden` on BOTH elements,
   html's value moves to the viewport but body's stays on body -- and `hidden`
   on one axis forces the other to `auto`, so body became its own scroll box
   exactly as tall as the page content. The account menu hangs out of the nav
   below that box, so on any short page (an empty marketplace, an empty business
   directory, the seller dashboard) it was cut off wherever the content ended,
   Log out included, with a second scrollbar beside the menu. Long pages hid the
   bug because their body was taller than the menu.
   `clip` hides horizontal overflow without creating a scroll box, so body stays
   an ordinary element. Browsers without `clip` (Safari < 16) get `hidden` on
   html only, which still reaches the viewport and leaves body alone. */
html { overflow-x: hidden; }
body { max-width: 100%; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

/* ---------- Responsive Header Navigation ---------- */

/* Desktop & Laptop Screens (>= 768px):
   Display top navigation items horizontally with proper spacing. */
@media (min-width: 768px) {
  .appnav-nav-pill { display: flex !important; }
  .appnav-search { display: flex !important; }
  .appnav-guestbar { display: flex !important; }
  .appnav-action-group { display: flex !important; }
  .appnav-burger { display: none !important; visibility: hidden !important; }
  .appnav-mobile-menu { display: none !important; visibility: hidden !important; }
  .appnav-mobile-menu.open { display: none !important; visibility: hidden !important; }
}

/* Responsive adjustment between 768px and 1280px */
@media (max-width: 1280px) {
  .appnav-tagline { display: none; }
  .appnav-logo-full { height: 40px !important; max-height: 40px !important; }
  .appnav-search { flex: 0 1 160px; }
  .appnav-inner { gap: 10px; padding: 8px 12px; }
}

@media (max-width: 992px) {
  .appnav-search .kbd-hint { display: none; }
  .appnav-nav-pill a { padding: 7px 12px; font-size: 13px; }
  .appnav-guestbar a.btn-primary, .appnav-guestbar a.btn-ghost { padding: 6px 12px; font-size: 13px; }
}

/* The header must never push the account controls off the right edge.
   Eight-link pages (feed, blog, write, events, chapters, directory, investors,
   programs) need ~1340px for pill + search + bell + name, and the pill had the
   flex default `min-width: auto`, so it refused to shrink below its content and
   shoved the notifications bell, the name and the account menu past the edge
   of a 1270px laptop window. overflow-x on html/body only hid the damage.
   Now the pill is the element that gives: it may shrink, and scrolls sideways
   (no visible scrollbar; the active link is scrolled into view by app.js) when
   there is truly not enough room. The link spacing tightens first, so at
   ordinary laptop widths every link still fits without scrolling. */
.appnav-nav-pill {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.appnav-nav-pill::-webkit-scrollbar { display: none; }
.appnav-search { min-width: 0; }
/* The inner row was capped at 1320px, narrower than an eight-link header needs,
   so even a 1920px screen squeezed it. Wide screens get the room they have. */
@media (min-width: 1440px) {
  .appnav-inner { max-width: 1600px; }
}
@media (max-width: 1480px) {
  .appnav-nav-pill a { padding: 8px 10px; }
  .appnav-search { flex-basis: 160px; }
  .appnav-search .kbd-hint { display: none; }
}
@media (max-width: 1400px) {
  .appnav-inner { gap: 8px; }
  .appnav-nav-pill { gap: 2px; padding: 5px 6px; }
  .appnav-nav-pill a { padding: 7px 9px; font-size: 13px; }
  .appnav-search { flex-basis: 140px; }
}
@media (max-width: 1100px) {
  .appnav-nav-pill a { padding: 7px 8px; }
}

/* Mobile Phone Screens (< 768px):
   Show compact burger button for small handheld mobile devices. */
@media (max-width: 767px) {
  .appnav-nav-pill { display: none !important; }
  .appnav-search { display: none !important; }
  .appnav-burger { display: flex !important; }
  .appnav-guestbar { display: none !important; }
}

@media (max-width: 1199px) {
  .grid-3col { grid-template-columns: 220px 1fr; }
  .grid-3col .col-right { display: none; }
}

@media (max-width: 520px) {
  .appnav-userpill span[data-nav-name] { display: none; }
  .appnav-userpill { padding: 4px; gap: 0; }
  .appnav-userpill .chevron { display: none; }
  .appnav-action-group { gap: 6px; }
  .appnav-inner { gap: 8px; padding: 10px 12px; }
  .badge-global { font-size: 0; padding: 5px; }
  .appnav-logo img.logo-mark { height: 28px; }
  .appnav-wordmark { font-size: 14px; }
  .appnav-logo-full { height: 34px !important; max-height: 34px !important; max-width: 140px !important; padding: 3px 8px !important; }
}

/* Very small phones (iPhone SE and similar) — tighten one notch further. */
@media (max-width: 360px) {
  .appnav-inner { gap: 4px; padding: 8px 10px; }
  .appnav-logo { gap: 6px; }
  .appnav-logo img.logo-mark { height: 24px; padding: 1px 4px; }
  .appnav-wordmark { font-size: 13px; }
  .appnav-logo-full { height: 28px !important; max-height: 28px !important; max-width: 116px !important; padding: 2px 6px !important; }
  .appnav-iconbtn { width: 34px; height: 34px; border-radius: 11px; }
  .appnav-qrbtn { display: none; }
  .appnav-useravatar { width: 24px; height: 24px; }
  .appnav-userpill { padding: 2px; }
  .appnav-burger { width: 34px; height: 34px; }
}

@media (max-width: 767px) {
  :root { --nav-h: 56px; }
  .container { padding: 0 var(--sp-4); }
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }

  .appnav-tagline { display: none; }

  .pubnav-links { display: none; }
  .pubnav-burger { display: flex; }
  .pubnav-cta { display: none; }

  .grid-3col, .grid-2col { grid-template-columns: 1fr; padding-bottom: 76px; }
  .grid-3col .col-left, .grid-2col .col-left { display: none; }
  .grid-3col .col-right { display: none; }

  .bottomnav { display: flex; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* Auth-aware nav visibility.
   The responsive rules above set `display: flex !important` on .appnav-guestbar,
   which beats an inline style — so session state is expressed as a class that
   carries !important too, rather than via element.style. Set by FWC.renderNav(). */
[data-guest-only].is-hidden,
[data-member-only].is-hidden,
.appnav-guestbar.is-hidden,
.appnav-memberbar.is-hidden { display: none !important; }

/* =========================================================
   Article body — long-form blog typography.
   Applied to the output of FWC.renderMarkdown(), which emits a fixed,
   escaped subset of tags, so these selectors cover everything possible.
   ========================================================= */
.article-body { font-size: 17px; line-height: 1.75; color: var(--ink-700); }
.article-body > *:first-child { margin-top: 0; }
.article-body p { margin: 0 0 1.15em; }
.article-body h2 { font-size: 26px; line-height: 1.3; margin: 1.8em 0 .6em; }
.article-body h3 { font-size: 21px; line-height: 1.35; margin: 1.6em 0 .5em; }
.article-body h4 { font-size: 17px; margin: 1.4em 0 .4em; }
.article-body h5 { font-size: 15px; margin: 1.3em 0 .4em; }
.article-body ul,
.article-body ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.article-body li { margin: .35em 0; }
.article-body a { color: var(--fwc-blue-dark); text-decoration: underline; text-underline-offset: 2px; }
.article-body blockquote {
  margin: 1.4em 0;
  padding: .2em 0 .2em 1.1em;
  border-left: 3px solid var(--fwc-blue);
  color: var(--ink-500);
  font-style: italic;
}
.article-body hr { border: 0; border-top: 1px solid var(--line-200); margin: 2em 0; }
.article-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: var(--line-100);
  padding: .15em .4em;
  border-radius: 4px;
}
.article-body .article-code,
.article-code {
  background: var(--line-100);
  border: 1px solid var(--line-200);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0 0 1.15em;
}
.article-code code { background: none; padding: 0; font-size: 13px; line-height: 1.6; }
.article-body img { max-width: 100%; height: auto; border-radius: 10px; }

@media (max-width: 640px) {
  .article-body { font-size: 16px; }
  .article-body h2 { font-size: 22px; }
  .article-body h3 { font-size: 19px; }
}

/* =========================================================
   Unconfirmed-email banner. Injected by FWC.renderVerifyBanner() on every
   page, so it is styled here rather than in any one page's markup.
   ========================================================= */
#fwc-verify-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 18px;
  background: #fff7ed;
  border-bottom: 1px solid #fed7aa;
  color: #7c2d12;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
}
#fwc-verify-banner strong { font-weight: 700; }
#fwc-verify-banner .btn {
  border-color: #fdba74;
  color: #7c2d12;
  background: #ffffff;
  flex-shrink: 0;
}
#fwc-verify-banner .btn:hover:not(:disabled) { background: #ffedd5; }
#fwc-verify-banner .btn:disabled { opacity: .55; cursor: default; }

@media (max-width: 640px) {
  #fwc-verify-banner { font-size: 12.5px; padding: 9px 14px; gap: 10px; }
}

/* ============================================================
   PROFILE — member profile: hero, stacked sections, timeline
   ============================================================ */

.profile-page {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--sp-5) 0 var(--sp-12);
  display: grid;
  gap: var(--sp-4);
}

/* ---------- Hero ---------- */
/* Not `overflow: hidden`, which is the obvious way to keep the cover inside
   the card's rounded corners and also clips anything that has to escape the
   card — the profile's "…" menu was cut off halfway down. The cover is the
   only thing that needed clipping, so it rounds its own top corners instead
   and the hero can let a menu overflow it. */
.profile-hero { overflow: visible; }

.profile-cover {
  position: relative;
  height: 210px;
  background: var(--fwc-gradient);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.profile-cover-btn { position: absolute; top: 14px; right: 14px; }

.profile-id { padding: 0 var(--sp-6) var(--sp-6); }

.profile-avatar-wrap { position: relative; width: 152px; margin: -84px 0 var(--sp-4); }
.profile-avatar {
  width: 152px;
  height: 152px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  background: var(--line-100);
  box-shadow: var(--shadow-sm);
}
.profile-avatar-btn { position: absolute; right: 2px; bottom: 2px; }

.profile-name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: 30px;
  margin: 0 0 4px;
}
.profile-headline { font-size: 16px; color: var(--ink-900); font-weight: 500; margin: 0 0 6px; }
.profile-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--ink-500);
  margin: 0;
}
.profile-meta a { color: var(--fwc-blue); font-weight: 600; }
.profile-meta a:hover { text-decoration: underline; }

.profile-stats { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin: var(--sp-3) 0 0; font-size: 14px; }
.profile-stats b { color: var(--ink-900); }
.profile-stats span { color: var(--ink-500); }

/* A stat that goes somewhere. Rendered as <a> or <button> depending on the
   destination, so both are reset to look like the plain stat they replace —
   the only difference being that they respond to a pointer. Stats with
   nowhere to go stay as bare text and are left alone. */
.profile-stat-link {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--radius-sm, 6px);
}
.profile-stat-link:hover b,
.profile-stat-link:hover span,
.profile-stat-link:focus-visible b,
.profile-stat-link:focus-visible span { color: var(--fwc-blue-dark); }
.profile-stat-link:hover { text-decoration: underline; }
.profile-stat-link:focus-visible { outline: 2px solid var(--fwc-blue-dark); outline-offset: 2px; }

.profile-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5); }

/* ---------- Profile overflow ("…") menu ---------- */
.profile-more { position: relative; display: inline-flex; }
.profile-more-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line-200);
  background: #fff;
  color: var(--ink-700);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.profile-more-btn:hover { background: #f4f6f8; }
.profile-more-btn:focus-visible { outline: 2px solid var(--fwc-blue-dark); outline-offset: 2px; }

.profile-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 260;
  min-width: 232px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line-200);
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
}
.profile-more-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--ink-900);
  text-align: left;
  cursor: pointer;
}
.profile-more-item:hover { background: #f4f6f8; }
.profile-more-item:focus-visible { outline: 2px solid var(--fwc-blue-dark); outline-offset: -2px; }
.profile-more-item svg { flex: none; }
.profile-more-item.danger { color: var(--danger, #c0392b); }

/* "About this member" rows */
.about-member-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.about-member-list dt { color: var(--ink-500); font-size: 13px; }
.about-member-list dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-900); }

/* ---------- Stacked sections ---------- */
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.section-head h3 { margin: 0; font-size: 20px; }
.section-tools { display: flex; gap: 2px; flex-shrink: 0; }
.section-empty { margin: 0; font-size: 14px; color: var(--ink-500); }
.section-text { margin: 0; font-size: 15px; color: var(--ink-700); white-space: pre-wrap; }

.icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-500);
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--line-100); color: var(--ink-900); }
.icon-btn.danger:hover { background: #fdecec; color: var(--danger); }
/* Sitting on a photo, the button needs its own ground to stay legible. */
.icon-btn.on-media { background: rgba(255, 255, 255, .92); color: var(--ink-900); box-shadow: var(--shadow-sm); }
.icon-btn.on-media:hover { background: #fff; }

/* ---------- Experience / education timeline ---------- */
.timeline { display: block; }
.tl-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line-100);
}
.tl-item:first-child { border-top: 0; padding-top: 0; }
.tl-item:last-child { padding-bottom: 0; }

.tl-logo {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--line-100);
  color: var(--ink-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  overflow: hidden;
}
.tl-logo img { width: 100%; height: 100%; object-fit: cover; }

.tl-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink-900); }
.tl-sub { margin: 2px 0 0; font-size: 14px; color: var(--ink-700); }
.tl-dates { margin: 2px 0 0; font-size: 13px; color: var(--ink-500); }
.tl-desc { margin: var(--sp-2) 0 0; font-size: 14px; color: var(--ink-700); white-space: pre-wrap; }

/* Row controls stay hidden until the row is hovered or keyboard-focused, so a
   long timeline is not a wall of icons. */
.tl-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.tl-item:hover .tl-actions,
.tl-actions:focus-within { opacity: 1; }

.tl-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--line-100);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-500);
  vertical-align: middle;
}

/* ---------- Skills ---------- */
.skill-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.skill-chip-del {
  border: 0;
  background: transparent;
  color: var(--ink-400);
  font-size: 15px;
  line-height: 1;
  padding: 0;
  margin-left: 2px;
}
.skill-chip-del:hover { color: var(--danger); }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  z-index: 900;
}
.modal-backdrop.open { display: flex; }

.modal {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line-200);
}
.modal-head h3 { margin: 0; }
.modal-body { padding: var(--sp-5); overflow-y: auto; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line-200);
}
.modal-close {
  border: 0;
  background: transparent;
  color: var(--ink-500);
  font-size: 20px;
  line-height: 1;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--line-100); color: var(--ink-900); }

/* auto-fit, not `1fr 1fr`: when one field of the pair is hidden — employment
   type on an education entry — the empty track collapses and the field that
   is left fills the row instead of sitting at half width. */
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); }
.form-check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-700); }
.form-check input { width: 16px; height: 16px; accent-color: var(--fwc-blue); }
.form-select { appearance: auto; }

@media (max-width: 640px) {
  .profile-cover { height: 140px; }
  .profile-id { padding: 0 var(--sp-4) var(--sp-5); }
  .profile-avatar-wrap { width: 104px; margin-top: -56px; }
  .profile-avatar { width: 104px; height: 104px; border-width: 3px; }
  .profile-name { font-size: 24px; }
  .profile-actions .btn { flex: 1 1 auto; }
  .tl-item { grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--sp-3); }
  .tl-logo { width: 44px; height: 44px; }
  /* No hover on touch, so the row controls have to stay visible. */
  .tl-actions { opacity: 1; }
  .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE HEADER DRAWER — the phone-width nav.
   Markup is generated by buildAppMobileNav() in app.js.
   ============================================================ */

/* Burger: three bars that fold into an X while the drawer is open. */
.appnav-burger-bars {
  position: relative;
  display: block;
  width: 18px;
  height: 12px;
}
.appnav-burger-bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .22s ease, opacity .18s ease, top .22s ease;
}
.appnav-burger-bars i:nth-child(1) { top: 0; }
.appnav-burger-bars i:nth-child(2) { top: 5px; }
.appnav-burger-bars i:nth-child(3) { top: 10px; }
.appnav-burger.is-open .appnav-burger-bars i:nth-child(1) { top: 5px; transform: rotate(45deg); }
.appnav-burger.is-open .appnav-burger-bars i:nth-child(2) { opacity: 0; }
.appnav-burger.is-open .appnav-burger-bars i:nth-child(3) { top: 5px; transform: rotate(-45deg); }

/* Compact guest CTA, shown only where the full guest bar cannot fit. */
.appnav-mobile-cta { display: none; }

.appnav-drawer-backdrop {
  position: fixed;
  inset: var(--appnav-h, var(--nav-h)) 0 0;
  background: rgba(15, 23, 42, .45);
  z-index: 98;
  animation: drawer-fade .18s ease;
}
@keyframes drawer-fade { from { opacity: 0; } to { opacity: 1; } }

/* Locks the page behind the drawer. Without it the body scrolls under the
   panel, which on a phone reads as the drawer being broken. */
body.drawer-open { overflow: hidden; }

.appnav-drawer-head { margin-bottom: var(--sp-2); }

.appnav-drawer-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--line-100);
}
.appnav-drawer-user img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  flex-shrink: 0;
}
.appnav-drawer-user span { display: flex; flex-direction: column; min-width: 0; }
.appnav-drawer-user b {
  font-size: 15px;
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appnav-drawer-user small { font-size: 12px; color: var(--fwc-blue); font-weight: 700; }

.appnav-drawer-guest p {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--ink-500);
}
.appnav-drawer-guest .btn { margin-bottom: 8px; }

.appnav-drawer-section { padding-top: var(--sp-3); }
.appnav-drawer-label {
  margin: 0 0 4px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* Overrides the plain-list rules above: drawer rows are icon + label targets,
   not underlined text links. */
.appnav-mobile-menu .appnav-drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 10px 12px;
  border-bottom: 0;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-700);
}
.appnav-mobile-menu .appnav-drawer-link:hover { background: var(--line-100); }
.appnav-drawer-link svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink-400); }
.appnav-mobile-menu .appnav-drawer-link.active {
  background: #eaf1ff;
  color: var(--fwc-blue-dark);
  font-weight: 800;
}
.appnav-drawer-link.active svg { color: var(--fwc-blue); }
.appnav-mobile-menu .appnav-drawer-link.danger { color: var(--danger); }
.appnav-drawer-link.danger svg { color: var(--danger); }

.appnav-drawer-foot {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-200);
}

@media (max-width: 767px) {
  .appnav-mobile-cta { display: inline-flex; }

  /* The nav pill carries `margin: 0 auto`, and that is what pushes the header
     actions to the right on desktop. It is display:none at this width, so
     without an anchor of its own the logo, the Join button and the burger all
     bunch together on the left. */
  .appnav-logo { margin-right: auto; }

  /* A right-hand panel rather than a pushdown: it keeps the header in place,
     scrolls independently, and matches how the rest of the app's overlays
     behave. */
  .appnav-mobile-menu {
    position: fixed;
    top: var(--appnav-h, var(--nav-h));
    right: 0;
    bottom: 0;
    width: min(86vw, 340px);
    z-index: 99;
    padding: var(--sp-4) var(--sp-4) var(--sp-8);
    border-top: 1px solid var(--line-200);
    border-left: 1px solid var(--line-200);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    /* display:flex is what .open used to toggle; the panel is always laid out
       now and animates in, so open/closed is carried by the transform.
       visibility is held back until the slide finishes so a closed drawer
       keeps its links out of the tab order and off screen readers. */
    display: flex;
    visibility: hidden;
    transition: transform .24s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .24s;
  }
  .appnav-mobile-menu.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .24s cubic-bezier(.32, .72, 0, 1), visibility 0s;
  }
}

/* Respect a reduced-motion preference: the drawer still opens, it just does
   not slide. */
@media (prefers-reduced-motion: reduce) {
  .appnav-mobile-menu { transition: none; }
  .appnav-drawer-backdrop { animation: none; }
  .appnav-burger-bars i { transition: none; }
}

/* The indicative "in your currency" figure beside a price. Deliberately quiet:
   the seller's price is the one that is charged, so it stays dominant and this
   reads as a footnote, never as a competing number. */
.price-approx {
  margin-left: 8px;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--ink-400);
  white-space: nowrap;
  cursor: help;
}

/* On a plan card the price is 34px, so the inline 0.85em would tower over the
   listing-grid version. Own line, fixed small size, still clearly secondary. */
[data-plan-currency] .price-approx {
  display: block;
  margin: 2px 0 0;
  font-size: 14px;
}

/* ---------- Required fields ----------
   Industry practice: a red asterisk marks what must be filled in, and
   anything unmarked is optional. app.js adds the star to the label of every
   input, select or textarea carrying `required`, so a form declares the rule
   once, on the field, and the marking cannot drift from it. */
.req-star { color: var(--danger); font-weight: 700; margin-left: 2px; }
.form-legend { font-size: 12px; color: var(--ink-500); margin: 0 0 var(--sp-3); }
.form-legend .req-star { margin: 0 2px 0 0; }
.field-error { color: var(--danger); font-size: 12px; margin-top: 4px; }
.form-select.error, .form-textarea.error { border-color: var(--danger); }

/* ---------- Marketplace ---------- */
.mkt-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mkt-toolbar .form-input, .mkt-toolbar .form-select { padding: 8px 12px; font-size: 13px; }
.mkt-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 12px; font-size: 13px; }
.mkt-filters label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-700); font-weight: 600; }
.mkt-filters .form-input, .mkt-filters .form-select { padding: 6px 10px; font-size: 13px; width: auto; }
.mkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.mkt-card { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.mkt-card-img { display: block; width: 100%; height: 170px; object-fit: cover; background: var(--line-100); }
.mkt-card-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mkt-card-title { font-weight: 700; font-size: 14px; margin: 0; color: var(--ink-900); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mkt-card-meta { font-size: 12px; color: var(--ink-500); margin: 0; }
.mkt-wish { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); box-shadow: var(--shadow-sm); font-size: 17px; line-height: 1; cursor: pointer; color: var(--ink-400); }
.mkt-wish[aria-pressed="true"] { color: #e5484d; }
.mkt-off-tag { position: absolute; top: 10px; left: 10px; background: var(--fwc-green-dark); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: var(--radius-pill); }
.mkt-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 2px 0; }
.mkt-price-now { font-weight: 800; color: var(--fwc-blue-dark); font-size: 16px; }
.mkt-price-unit { font-size: 12px; color: var(--ink-500); font-weight: 600; }
.mkt-price-mrp { font-size: 12px; color: var(--ink-400); text-decoration: line-through; }
.mkt-price-off { font-size: 12px; color: var(--fwc-green-dark); font-weight: 800; }
.mkt-price.lg .mkt-price-now { font-size: 30px; }
.mkt-price.lg .mkt-price-mrp, .mkt-price.lg .mkt-price-off { font-size: 15px; }
.mkt-stars { color: #f5a524; letter-spacing: 1px; font-size: 13px; white-space: nowrap; }
.mkt-stars .off { color: var(--line-200); }
.mkt-stock-low { color: #c2410c; font-weight: 700; }
.mkt-stock-out { color: var(--danger); font-weight: 700; }
.mkt-section { margin-top: var(--sp-6); }
.mkt-section > h3 { font-size: 18px; margin: 0 0 var(--sp-3); }
.mkt-spec { width: 100%; border-collapse: collapse; font-size: 14px; }
.mkt-spec th, .mkt-spec td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line-200); vertical-align: top; }
.mkt-spec th { width: 38%; color: var(--ink-500); font-weight: 600; background: var(--line-100); }
.mkt-info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; }
.mkt-info-list li { display: flex; gap: 10px; align-items: flex-start; }
.mkt-info-list .ico { width: 22px; text-align: center; flex-shrink: 0; }
.mkt-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--line-200); border-radius: var(--radius-md); overflow: hidden; background: #fff; }
.mkt-qty button { width: 34px; border: 0; background: var(--line-100); font-size: 16px; font-weight: 700; cursor: pointer; color: var(--ink-700); }
.mkt-qty input { width: 64px; border: 0; text-align: center; font-weight: 700; font-size: 14px; padding: 8px 4px; }
.mkt-bars { display: grid; gap: 6px; font-size: 13px; }
.mkt-bar-row { display: grid; grid-template-columns: 34px 1fr 30px; gap: 8px; align-items: center; }
.mkt-bar { height: 8px; border-radius: 4px; background: var(--line-100); overflow: hidden; }
.mkt-bar span { display: block; height: 100%; background: #f5a524; }
.mkt-line { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: var(--sp-4); border-bottom: 1px solid var(--line-200); }
.mkt-line:last-child { border-bottom: 0; }
.mkt-line img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--radius-md); background: var(--line-100); }
@media (max-width: 600px) { .mkt-line { grid-template-columns: 64px minmax(0, 1fr); } .mkt-line img { width: 64px; height: 64px; } .mkt-line > :last-child { grid-column: 1 / -1; } }
.mkt-issue { color: var(--danger); font-size: 12px; font-weight: 700; margin: 4px 0 0; }
.mkt-summary { position: sticky; top: calc(var(--nav-h) + 16px); }
.mkt-two { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .mkt-two { grid-template-columns: minmax(0, 1fr); } .mkt-summary { position: static; } }
.mkt-status { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; text-transform: capitalize; background: var(--line-100); color: var(--ink-700); }
.mkt-status.placed, .mkt-status.open { background: #fff4e0; color: #a5690a; }
.mkt-status.confirmed { background: #eaf1ff; color: var(--fwc-blue-dark); }
.mkt-status.shipped { background: #efe9ff; color: #6b3fd1; }
.mkt-status.delivered, .mkt-status.replied { background: #e7f8f0; color: var(--fwc-green-dark); }
.mkt-status.cancelled, .mkt-status.closed { background: #fdecec; color: #b42318; }
.mkt-order { padding: 0; overflow: hidden; }
.mkt-order-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 12px var(--sp-4); background: var(--line-100); font-size: 12px; color: var(--ink-500); }
.mkt-order-head strong { color: var(--ink-900); display: block; font-size: 13px; }
.mkt-order-body { padding: var(--sp-4); display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
.mkt-order-body img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-md); background: var(--line-100); }
.mkt-order-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--sp-4) var(--sp-4); }
.mkt-timeline { display: flex; margin: 12px 0 4px; font-size: 11px; color: var(--ink-400); }
.mkt-timeline span { flex: 1; position: relative; padding-top: 16px; text-align: center; }
.mkt-timeline span::before { content: ''; position: absolute; top: 4px; left: 0; right: 0; height: 3px; background: var(--line-200); }
.mkt-timeline span::after { content: ''; position: absolute; top: 0; left: 50%; width: 11px; height: 11px; margin-left: -5px; border-radius: 50%; background: var(--line-200); }
.mkt-timeline span.done { color: var(--fwc-green-dark); font-weight: 700; }
.mkt-timeline span.done::before, .mkt-timeline span.done::after { background: var(--fwc-green); }
.mkt-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 20px; font-size: 13px; margin: 10px 0 0; }
.mkt-kv dt { color: var(--ink-500); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.mkt-kv dd { margin: 2px 0 0; color: var(--ink-900); overflow-wrap: anywhere; }
.mkt-choice { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line-200); border-radius: var(--radius-md); cursor: pointer; font-size: 14px; }
.mkt-choice:has(input:checked) { border-color: var(--fwc-blue); background: #f3f8ff; }
.mkt-choice input { margin-top: 3px; }
.mkt-choices { display: grid; gap: 8px; }
.mkt-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); }
.mkt-grid-2 .wide { grid-column: 1 / -1; }
@media (max-width: 600px) { .mkt-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.mkt-modal .modal { max-width: 720px; max-height: calc(100dvh - 32px); }
.mkt-modal.wide .modal { max-width: 900px; }
.mkt-fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-5); min-width: 0; }
.mkt-fieldset legend { font-weight: 800; font-size: 15px; margin-bottom: var(--sp-3); color: var(--ink-900); padding: 0; }
.mkt-img-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.mkt-img-tile { position: relative; width: 92px; height: 92px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line-200); background: var(--line-100); }
.mkt-img-tile img { width: 100%; height: 100%; object-fit: cover; }
.mkt-img-tile button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(15,23,42,.7); color: #fff; font-size: 12px; cursor: pointer; }
.mkt-img-tile .main-tag { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(15,23,42,.7); color: #fff; font-size: 10px; text-align: center; padding: 2px; }
.mkt-img-add { width: 92px; height: 92px; border-radius: var(--radius-md); border: 1.5px dashed var(--line-200); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; color: var(--ink-500); cursor: pointer; }
.mkt-spec-row { display: grid; grid-template-columns: 1fr 1.4fr 34px; gap: 8px; margin-bottom: 8px; }
.mkt-table-wrap { overflow-x: auto; }
.mkt-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 760px; }
.mkt-table th { text-align: left; padding: 10px 12px; background: var(--line-100); color: var(--ink-500); font-size: 12px; font-weight: 700; white-space: nowrap; }
.mkt-table td { padding: 10px 12px; border-top: 1px solid var(--line-200); vertical-align: middle; }
.mkt-table img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: var(--line-100); }
.mkt-stat { padding: var(--sp-4); }
.mkt-stat-label { font-size: 11px; font-weight: 700; color: var(--ink-500); text-transform: uppercase; letter-spacing: .3px; margin: 0; }
.mkt-stat-value { font-size: 26px; font-weight: 800; margin: 4px 0 0; color: var(--ink-900); }
.mkt-stat-sub { font-size: 12px; color: var(--ink-500); margin: 2px 0 0; }
.mkt-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.mkt-steps { display: flex; gap: 8px; margin: 14px 0 18px; }
.mkt-steps span { flex: 1; font-size: 11px; font-weight: 700; color: var(--ink-400); padding-top: 8px; border-top: 4px solid var(--line-200); }
.mkt-steps span.active { color: var(--fwc-blue-dark); border-color: var(--fwc-blue); }
.mkt-steps span.done { color: var(--fwc-green-dark); border-color: var(--fwc-green); }
.mkt-count { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; }

/* Several pages set an inline `padding: 44px 0` (or similar) on .container for
   vertical spacing, which also zeroed its side padding. On anything narrower
   than the container -- phones, tablets, small laptops -- headings and cards
   then sat flush against the screen edge. Restore the gutter at those widths
   only; wide screens, where the container is centred with room to spare, are
   unchanged. */
@media (max-width: 1167px) {
  .container[style*="padding"] { padding-left: var(--sp-5) !important; padding-right: var(--sp-5) !important; }
}
@media (max-width: 767px) {
  .container[style*="padding"] { padding-left: var(--sp-4) !important; padding-right: var(--sp-4) !important; }
}