/* ============================================================
   PLAT5 Clickable Demo — Stylesheet
   Phase 1.1 update:
     - Banner + nav are CONTAINED inside .main-container (not full-width)
     - Tour highlight is a magenta ring on the target (no greyout)
     - Tour tooltip removed Pauli Nate header — just text + controls

   Brand:
     #9D2065 magenta — Pollinate logo, login heading, alerts
     #006FB9 blue    — buttons, links, mentor-view ring, KTI links
     #85ad54 green   — active nav underline, breadcrumbs, GrowCo text
     #FAFAFA gray    — page background
     #535353         — body text
     Open Sans font
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

:root {
  --pollinate-magenta: #9D2065;
  --pollinate-blue:    #006FB9;
  --pollinate-green:   #85ad54;
  --pollinate-purple:  #761E9B;
  --bg:                #FAFAFA;
  --ink:               #535353;
  --ink-strong:        #2c3e50;
  --ink-muted:         #67757c;
  --line:              #DBDBDB;
  --line-soft:         #E5E5E5;
  --sidebar-bg:        #E1ECF3;
  --match-bg-blue:     #E6F1F8;
  --shadow-card:       0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-nav:        0 2px 6px rgba(0, 0, 0, 0.08);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  font-family: 'Open Sans', arial, helvetica, sans-serif !important;
  color: var(--ink);
  font-size: 15px !important;
  background: var(--bg);
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
}

p { font-size: 15px !important; margin: 0 0 8px; }
a { text-decoration: none; }
button { font-family: inherit; }

/* Two-column page grid (main + sidebar) */
.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
}
.page-grid > * { min-width: 0; }
@media (max-width: 1100px) { .page-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PAGE-WIDTH CONTAINER (used by header AND main content)
   Banner + nav now sit INSIDE this width, not full-bleed.
   ============================================================ */
.contained-header,
.main-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}
.main-container { padding-bottom: 40px; }

.contained-header {
  padding-top: 16px;
  padding-bottom: 0;
}

/* ============================================================
   PROGRAM BANNER (rounded top of the contained header)
   ============================================================ */
.program-banner {
  width: 100%;
  display: block;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  background: white;
}
.program-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   TOP NAV CARD (joins the bottom of the banner; no horizontal margin)
   ============================================================ */
.nav-shell {
  background: white;
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 10px 10px;
  margin: 0 0 18px;
  position: relative;
  z-index: 5;
  box-shadow: var(--shadow-nav);
  overflow: hidden;
}
.nav-row {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  gap: 8px;
}
.nav-row .program-logo {
  width: 56px; height: 56px;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 18px;
}
.nav-items {
  display: flex;
  gap: 0;
  flex: 1;
  align-items: center;
}
.nav-items .main-menu-item {
  position: relative;
  padding: 16px 16px;
  color: var(--ink) !important;
  font-weight: 400;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}
.nav-items .main-menu-item:hover { color: var(--pollinate-green) !important; }
.nav-items .main-menu-item.active {
  color: var(--ink-strong) !important;
  font-weight: 700;
}
.nav-items .main-menu-item.active::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px;
  bottom: 8px;
  height: 3px;
  background: var(--pollinate-green);
  border-radius: 2px;
}
.nav-right {
  display: flex; align-items: center;
  gap: 22px;
  margin-left: auto;
}
.admin-space-link {
  color: var(--ink) !important;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.admin-space-link:hover { color: var(--pollinate-blue) !important; }
.admin-space-link i { color: var(--ink-muted); font-size: 17px; }
.user-dropdown-trigger {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink-strong);
  font-weight: 600;
}
.user-dropdown-trigger:hover { color: var(--pollinate-blue); }
.menu-user-profile-photo {
  width: 36px; height: 36px;
  object-fit: cover;
  border-radius: 50%;
}

/* Breadcrumb row INSIDE the nav card */
.breadcrumb-row {
  padding: 8px 24px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pollinate-green);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-top: 1px solid var(--line-soft);
  background: white;
}

/* ============================================================
   GENERAL CARDS / SECTIONS
   ============================================================ */
.card-panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 26px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}
.card-panel .card-title,
.card-panel h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-strong);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-panel .card-title .pollinate-dots {
  width: 28px; height: 28px;
  flex-shrink: 0;
}

/* ============================================================
   THREE-PANEL MATCH WIDGET (Home page hero)
   Class names match real PLAT5 CSS:
     .section-cards, .container-user-card, .container-cohorts,
     .profile-selected, .profile-selected-one, .header-cohort-buttons
   ============================================================ */
.section-cards {
  padding: 0;
  min-height: 345px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: 18px;
}
.section-cards > * { min-width: 0; }

.match-pane {
  padding: 22px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-right: 1px solid var(--line-soft);
  position: relative;
}
.match-pane:last-child { border-right: none; }

/* Left blue pane — rounded only on the left (matches real CSS) */
.container-user-card {
  background-color: var(--match-bg-blue);
  border-radius: 10px 0 0 10px;
  border-right: none;
}

.match-pane .pane-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 16px;
  width: 100%;
}
.match-pane .pane-header .pane-title {
  font-size: 16px;
  color: var(--ink-strong);
  font-weight: 600;
}

.header-cohort-buttons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  color: var(--ink-strong);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 18px;
  border-radius: 4px;
  transition: color .15s, background-color .15s;
}
.header-cohort-buttons:hover { color: var(--pollinate-blue); }
.header-cohort-buttons.disabled,
.header-cohort-buttons:disabled { pointer-events: none; opacity: .35; }

.match-pane .pane-photo { margin: 4px 0 14px; }
.match-pane .pane-name {
  font-weight: 700;
  font-size: 18px;
  color: var(--ink-strong);
  margin-bottom: 2px;
}
.match-pane .pane-email { font-size: 14px; color: var(--ink); }

/* Cohort grid — uses real class .container-cohorts.
   Flex row + nowrap keeps the two cohort photos side-by-side regardless of
   how wide the middle pane gets. */
.container-cohorts {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 6px 2px;
  margin: 8px 0;
}

/* Cohort mini-photo: 85px outer ring with 70px inner photo */
.profile-selected,
.profile-selected-one {
  position: relative;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s;
}
.profile-selected     { border: 4px solid white; }
.profile-selected-one { border: 4px solid var(--pollinate-blue); }
.profile-selected:hover { border-color: rgba(0,111,185,.4); }

.profile-selected img,
.profile-selected-one img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}

.match-pane .pane-link {
  margin-top: auto;
  padding-top: 14px;
  font-size: 15px;
  color: var(--pollinate-blue);
  font-weight: 600;
}
.match-pane .pane-link:hover { text-decoration: underline; }
.match-pane .pane-link i { font-size: 12px; margin-left: 4px; }

/* ============================================================
   PROFILE PICTURES (sized per real CSS)
   ============================================================ */
.profile-picture-xxl { width: 210px; height: 210px; object-fit: cover; border-radius: 50%; }
.profile-picture-l   { width: 110px; height: 110px; object-fit: cover; border-radius: 50%; }
.profile-picture-m   { width: 78px;  height: 78px;  object-fit: cover; border-radius: 50%; }
.profile-picture-s   { width: 56px;  height: 56px;  object-fit: cover; border-radius: 50%; }

.profile-picture-empty {
  border-radius: 50%;
  background: var(--pollinate-green);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.profile-picture-empty.profile-picture-m { font-size: 28px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 5px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  line-height: 1.4;
}
.btn-primary {
  background: var(--pollinate-blue);
  border-color: var(--pollinate-blue);
  color: white !important;
}
.btn-primary:hover {
  border-color: var(--pollinate-green);
  box-shadow: 0 0 0 1px var(--pollinate-green), inset 0 0 0 1px white;
  color: white !important;
}
.btn-outline-primary {
  background: white;
  border-color: var(--pollinate-blue);
  color: var(--pollinate-blue) !important;
}
.btn-outline-primary:hover {
  background: var(--pollinate-blue);
  color: white !important;
}
.btn-link {
  background: none;
  border: none;
  color: var(--pollinate-blue) !important;
  padding: 0;
  font-weight: 600;
}
.btn-link:hover { text-decoration: underline; }

/* ============================================================
   NEXT ACTIVITY SECTION
   ============================================================ */
.activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}
.activity-row .activity-text { min-width: 0; }
.activity-row .activity-line {
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 12px;
}
.activity-row .activity-line strong {
  color: var(--ink-strong);
  font-weight: 700;
}
.activity-row .activity-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.activity-row .activity-go {
  font-size: 14px;
  white-space: nowrap;
}
.activity-row .activity-go a {
  color: var(--pollinate-blue);
  font-weight: 600;
}
.activity-row .activity-go a:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .activity-row { grid-template-columns: 1fr; }
}

/* ============================================================
   PARTICIPANTS HORIZONTAL ROW
   ============================================================ */
.horizontal-scrollable > .row,
.participants-scroll {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  white-space: nowrap;
  flex-wrap: unset;
  padding: 6px 2px 14px;
  scrollbar-color: var(--pollinate-blue) var(--line-soft);
  scrollbar-width: thin;
}
.participants-scroll::-webkit-scrollbar,
.horizontal-scrollable > .row::-webkit-scrollbar { height: 8px; }
.participants-scroll::-webkit-scrollbar-track,
.horizontal-scrollable > .row::-webkit-scrollbar-track { background: var(--line-soft); border-radius: 4px; }
.participants-scroll::-webkit-scrollbar-thumb,
.horizontal-scrollable > .row::-webkit-scrollbar-thumb { background: var(--pollinate-blue); border-radius: 4px; }

.participant-tile {
  flex-shrink: 0;
  width: 110px;
  text-align: center;
}
.participant-tile .photo-wrap {
  width: 78px; height: 78px;
  margin: 0 auto 8px;
  border-radius: 50%;
  border: 3px solid transparent;
}
.participant-tile.has-ring .photo-wrap { border-color: var(--pollinate-purple); }
.participant-tile .photo-wrap img,
.participant-tile .photo-wrap .empty-avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.participant-tile .empty-avatar {
  background: var(--pollinate-green);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
}
.participant-tile .name {
  font-size: 13px;
  color: var(--ink-strong);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.participant-tile.has-link .name {
  color: var(--pollinate-blue);
}
.participant-tile.has-link .name::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f35d";
  font-size: 10px;
  margin-left: 4px;
}

/* ============================================================
   SIDEBAR CARDS
   ============================================================ */
.side-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.side-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-strong);
}
.side-card .side-link {
  color: var(--pollinate-blue);
  font-weight: 600;
  font-size: 14px;
  display: inline-block;
  margin-top: 6px;
}
.side-card .side-link:hover { text-decoration: underline; }
.side-card .side-button-wrap { padding: 6px 0; }
.side-card .side-button-wrap .btn { width: 100%; justify-content: center; }

/* From real CSS — used for welcome-style headers */
.assessments-complete-message {
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
  color: var(--ink-strong);
}

.doc-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--pollinate-blue);
  font-weight: 600;
  cursor: pointer;
  background: white;
  text-decoration: none;
}
.doc-pill:hover { border-color: var(--pollinate-blue); }
.doc-pill i { color: var(--pollinate-green); font-size: 16px; }

.contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.contact-row:last-child { border-bottom: none; }
.contact-row .name { font-weight: 700; color: var(--ink-strong); font-size: 14px; }
.contact-row .role-line {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 600;
}
.contact-row .email { font-size: 13px; color: var(--ink); }

/* ============================================================
   MEET YOUR MATCH PAGE — Match cards
   ============================================================ */
.mym-info-bar {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 22px;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}
.match-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 768px) { .match-card-grid { grid-template-columns: 1fr; } }

.mym-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
}
.mym-card .role-label {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-strong);
  margin-bottom: 14px;
}
.mym-card .card-body-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
}
.mym-card .partner-name {
  font-weight: 700;
  font-size: 17px;
  color: var(--ink-strong);
}
.mym-card .partner-email {
  font-size: 14px;
  color: var(--ink);
  margin-top: 2px;
}
.mym-card .actions-row {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
  margin-top: 14px;
}
.mym-card .actions-row a {
  color: var(--pollinate-blue);
  font-weight: 600;
  font-size: 14px;
}
.mym-card .actions-row a:hover { text-decoration: underline; }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-shell {
  min-height: 100vh;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.login-card {
  width: 100%;
  max-width: 540px;
  border: 1px solid var(--pollinate-magenta);
  border-radius: 12px;
  padding: 32px 38px 26px;
  background: white;
  position: relative;
}
.login-title {
  text-align: center;
  font-weight: 700;
  font-size: 28px;
  color: var(--pollinate-magenta);
  line-height: 1.25;
  margin: 4px 0 24px;
}
.login-signin {
  text-align: center;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink-strong);
  margin: 0 0 16px;
}
.login-field {
  position: relative;
  margin-bottom: 12px;
}
.login-field input {
  width: 100%;
  padding: 11px 44px 11px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: inherit;
  font-size: 15px;
  background: white;
}
.login-field input:focus {
  outline: none;
  border-color: var(--pollinate-blue);
  box-shadow: 0 0 0 2px rgba(0,111,185,.12);
}
.login-field .field-validator {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  background: #C0392B;
  color: white;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 1px;
}
.reset-link {
  display: block;
  text-align: right;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-strong);
  margin: 4px 0 16px;
}
.reset-link:hover { color: var(--pollinate-blue); }
.show-password-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 16px;
}
.login-button {
  width: 100%;
  background: var(--pollinate-blue);
  color: white;
  border: 1px solid var(--pollinate-blue);
  border-radius: 4px;
  padding: 11px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.login-button:hover { box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.login-pollinate-mark {
  text-align: right;
  margin-top: 14px;
}
.login-pollinate-mark img { height: 38px; }
.login-footer {
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.login-footer a { color: var(--ink-muted); margin: 0 4px; }
.login-footer a:hover { color: var(--pollinate-blue); }

/* ============================================================
   MODAL (Review Activities)
   ============================================================ */
.modal-content { border-radius: 10px; border: none; }
.modal-header {
  background: var(--pollinate-magenta);
  color: white;
  border-radius: 10px 10px 0 0;
  padding: 14px 20px;
}
.modal-header .modal-title { font-size: 18px; font-weight: 700; }
.modal-header .btn-close { filter: invert(1); }
#reviewActivitiesModal .modal-dialog {
  max-width: 70%;
  margin-top: 15dvh;
}
@media (max-width: 580px) { #reviewActivitiesModal .modal-dialog { max-width: 100%; margin: 0; } }

.activity-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  gap: 14px;
}
.activity-item:last-child { border-bottom: none; }
.activity-item.completed .activity-name {
  text-decoration: line-through;
  color: var(--ink-muted);
}
.activity-item input[type=checkbox] {
  width: 20px; height: 20px;
  flex-shrink: 0;
  accent-color: var(--pollinate-blue);
  cursor: pointer;
}
.activity-item .activity-name { flex: 1; font-size: 15px; }
.activity-item .activity-date { font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.activity-item .review-toggle {
  background: white;
  border: 1px solid var(--pollinate-blue);
  color: var(--pollinate-blue);
  padding: 4px 14px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.activity-item .review-toggle.active {
  background: var(--pollinate-blue);
  color: white;
}

/* ============================================================
   SITE FOOTER
   ============================================================ */
footer.site-footer {
  background: white;
  border-top: 1px solid var(--line);
  padding: 16px 32px;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-muted);
  flex-wrap: wrap;
  gap: 12px;
}
footer.site-footer .footer-links a { color: var(--ink-muted); margin: 0 8px; }
footer.site-footer .footer-links a:hover { color: var(--pollinate-blue); }
footer.site-footer img { height: 32px; }

/* ============================================================
   DEMO BAR — Pollinate magenta, full-width bg, contained inner content.
   3-column inner grid: [badge + prev]  [identity text]  [next + restart]
   space-between inside left/right cells pushes badge & restart to outer
   edges and prev/next close to the centered identity text.
   ============================================================ */
.demo-bar {
  background: var(--pollinate-magenta);
  color: white;
  font-size: 12px;
  padding: 7px 0;
}
.demo-bar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
}
.demo-bar .db-left,
.demo-bar .db-right {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  min-width: 0;
}
.demo-bar .db-text  { text-align: center; white-space: nowrap; }
.demo-bar .badge-demo {
  background: white;
  color: var(--pollinate-magenta);
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  font-size: 10px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.demo-bar a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.demo-bar a:hover { color: rgba(255,255,255,.8); }
.demo-bar .db-prev,
.demo-bar .db-next {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.30);
  padding: 4px 12px;
  border-radius: 4px;
}
.demo-bar .db-prev:hover,
.demo-bar .db-next:hover {
  background: rgba(255,255,255,.28);
  color: white;
}
.demo-bar .db-restart { color: rgba(255,255,255,.85); font-size: 11px; }
@media (max-width: 900px) {
  .demo-bar-inner { grid-template-columns: 1fr; gap: 6px; padding: 4px 12px; }
  .demo-bar .db-text { white-space: normal; }
  .demo-bar .db-left, .demo-bar .db-right { justify-content: center; }
}

/* ============================================================
   TOUR — Phase 1.1 redesign
     - No backdrop / no greyout. Page stays fully visible.
     - .tour-highlight is a magenta ring around the current target.
     - .tour-tooltip is body text + step controls (no Pauli Nate header).
   ============================================================ */
.tour-highlight {
  position: fixed;
  display: none;
  pointer-events: none;
  border: 3px solid var(--pollinate-magenta);
  border-radius: 12px;
  box-shadow: 0 0 0 3px rgba(157, 32, 101, 0.18),
              0 6px 20px rgba(157, 32, 101, 0.18);
  z-index: 1040;
  background: transparent;
}
.tour-highlight.active { display: block; }

.tour-tooltip {
  position: fixed;
  display: none;
  background: white;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.20);
  padding: 16px 20px 14px;
  width: 460px;
  max-width: calc(100vw - 32px);
  z-index: 1041;
}
.tour-tooltip.active { display: block; }
.tour-tooltip .tip-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 14px;
}
.tour-tooltip .tip-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
}
.tour-tooltip .step-counter {
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 500;
  white-space: nowrap;
}
.tour-tooltip .tip-buttons { display: flex; gap: 6px; }
.tour-tooltip button {
  border-radius: 5px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 13px;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.tour-tooltip button:hover { border-color: var(--pollinate-blue); color: var(--pollinate-blue); }
.tour-tooltip button.tip-next {
  background: var(--pollinate-blue);
  color: white;
  border-color: var(--pollinate-blue);
  font-weight: 600;
}
.tour-tooltip button.tip-next:hover { color: white; }

.tour-launcher {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--pollinate-magenta);
  color: white;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(157, 32, 101, .4);
  z-index: 1039; border: none; font-size: 22px;
  transition: transform .15s;
}
.tour-launcher:hover { transform: scale(1.08); background: #7c1850; }
.tour-launcher .pulse {
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--pollinate-magenta);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ============================================================
   LAUNCHER (index.html)
   ============================================================ */
.launcher-shell {
  min-height: 100vh; background: white;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.launcher-card {
  background: white;
  border: 1px solid var(--pollinate-magenta);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  max-width: 640px; width: 100%;
  padding: 40px;
  text-align: center;
}
.launcher-card .pollinate-logo { height: 62px; margin-bottom: 16px; }
.launcher-card h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--pollinate-magenta);
  margin: 8px 0;
  line-height: 1.25;
}
.launcher-card .tagline { color: var(--ink); margin-bottom: 24px; }
.launcher-card .demo-meta {
  background: var(--match-bg-blue);
  border-radius: 8px;
  padding: 18px 22px;
  text-align: left;
  margin: 20px 0;
  font-size: 14px;
  line-height: 1.7;
}
.launcher-card .demo-meta strong { color: var(--pollinate-blue); }
.launcher-card .start-btn {
  background: var(--pollinate-blue);
  color: white;
  border: 1px solid var(--pollinate-blue);
  padding: 12px 36px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.launcher-card .start-btn:hover {
  border-color: var(--pollinate-green);
  box-shadow: 0 0 0 1px var(--pollinate-green), inset 0 0 0 1px white;
  color: white;
}
.launcher-card .phase-note {
  margin-top: 20px;
  padding: 10px 14px;
  background: #fff8e1;
  border: 1px dashed #d4a72c;
  border-radius: 6px;
  font-size: 12px;
  color: #7a5e0d;
}

/* ============================================================
   ACTIVITIES & RESOURCES PAGE
   ============================================================ */
.ar-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) { .ar-grid { grid-template-columns: 1fr; } }

/* Left sidebar: Program Sections */
.ar-sections-card { padding: 18px 0; }
.ar-sections-card .card-title { padding: 0 22px 12px; margin-bottom: 0; }
.ar-section-list { list-style: none; margin: 0; padding: 0; }
.ar-section-list li {
  padding: 14px 22px;
  border-top: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background-color .15s;
  font-size: 15px;
  color: var(--ink);
}
.ar-section-list li:hover { background: var(--sidebar-bg); }
.ar-section-list li.section-active {
  background: var(--sidebar-bg);
  font-weight: 700;
  color: var(--ink-strong);
}
.ar-section-list li .section-meta {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* Learning Pathway banner */
.learning-pathway {
  background: linear-gradient(90deg, #e3eed3 0%, #d8e8c5 100%);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 22px;
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
}
.learning-pathway .lp-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--pollinate-green);
  letter-spacing: .5px;
  text-shadow: 1px 1px 0 rgba(255,255,255,.5);
  white-space: nowrap;
}
.learning-pathway .lp-circles {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
}
.learning-pathway .lp-circle {
  width: 50px; height: 50px;
  border: 2px solid var(--pollinate-green);
  border-radius: 50%;
  background: rgba(255,255,255,.4);
}
.learning-pathway .lp-circle.filled { background: rgba(133,173,84,.55); }
.learning-pathway .lp-arrow {
  color: var(--pollinate-green);
  font-size: 18px;
  opacity: .7;
}
.learning-pathway .lp-end {
  width: 56px; height: 56px;
  flex-shrink: 0;
}

.ar-banner {
  margin-bottom: 16px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.ar-banner img { display: block; width: 100%; height: auto; }

.search-resources-row { margin-bottom: 14px; }

/* Activities list */
.activity-card-pill .card-title { margin-bottom: 18px; }

.ar-activity {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
}
.ar-activity input[type=checkbox] {
  width: 18px; height: 18px;
  flex-shrink: 0;
  accent-color: var(--pollinate-blue);
  cursor: pointer;
}
.ar-activity .a-name { font-size: 15px; color: var(--ink); }
.ar-activity .a-due  { font-size: 14px; color: var(--ink); white-space: nowrap; }
.ar-activity.complete .a-name,
.ar-activity.complete .a-due { text-decoration: line-through; color: var(--ink-muted); }

.ar-resource-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 4px 0 8px 30px;
  background: white;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s, background-color .15s;
}
.ar-resource-pill:hover {
  border-color: var(--pollinate-blue);
  background: #f7fbff;
}
.ar-resource-pill .globe { color: var(--pollinate-green); font-size: 15px; }
.ar-resource-pill .ext   { color: var(--pollinate-blue); font-size: 12px; margin-left: auto; }

/* Sample Program Reports — collapsible folders */
.ar-folders { display: flex; flex-direction: column; gap: 10px; }
.ar-folder { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: white; }
.ar-folder-head {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: white; border: none; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--ink); text-align: left;
  transition: background-color .15s;
}
.ar-folder-head:hover { background: var(--sidebar-bg); }
.ar-folder-head.open { background: #eef4fb; }
.ar-folder-head > .fa-folder { color: var(--pollinate-green); font-size: 15px; }
.ar-folder-head > span { flex: 1; }
.ar-folder-caret { color: var(--ink-muted); font-size: 12px; transition: transform .2s; }
.ar-folder-head.open .ar-folder-caret { transform: rotate(180deg); }
.ar-folder-body { display: none; padding: 6px 16px 14px; border-top: 1px solid var(--line-soft); }
.ar-folder-body.open { display: block; }
.ar-folder-file {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 4px; font-size: 14px; color: var(--pollinate-blue); text-decoration: none;
}
.ar-folder-file:hover { text-decoration: underline; }
.ar-folder-file > .fa-file-lines { color: var(--pollinate-green); font-size: 15px; }

/* ============================================================
   NEWS & ALERTS PAGE
   ============================================================ */
.news-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 26px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}
.news-card .news-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 16px;
}
.news-card .news-header .news-icon {
  width: 28px; height: 28px;
}
.news-card .news-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-strong);
  text-align: center;
  padding: 0 12px;
}
.news-card .news-date {
  font-size: 14px;
  color: var(--ink-muted);
  white-space: nowrap;
}
.news-card .news-body p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 10px;
}
.news-card .news-body p:last-child { margin-bottom: 0; }
.news-card .news-body a { color: var(--pollinate-blue); }
.news-card .news-body a:hover { text-decoration: underline; }

.news-card .resource-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: var(--pollinate-blue);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  margin: 4px 0;
}
.news-card .resource-link:hover {
  border-color: var(--pollinate-blue);
  background: #f7fbff;
  text-decoration: none;
}
.news-card .resource-link i { font-size: 12px; }

/* ============================================================
   v1.6 — USER DROPDOWN MENU (header)
   ============================================================ */
.user-dropdown { position: relative; }
.user-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  min-width: 200px;
  padding: 6px 0;
  z-index: 200;
}
.user-dropdown-menu.open { display: block; }
.user-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
}
.user-dropdown-menu a:hover { background: var(--match-bg-blue); color: var(--pollinate-blue); }
.user-dropdown-menu a i { color: var(--ink-muted); width: 16px; text-align: center; }
.user-dropdown-menu a:hover i { color: var(--pollinate-blue); }

/* ============================================================
   v1.6 — PORTFOLIO PAGE (view + edit shared)
   ============================================================ */
.portfolio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
}
.portfolio-grid > * { min-width: 0; }
@media (max-width: 1100px) { .portfolio-grid { grid-template-columns: 1fr; } }

.portfolio-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 28px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}

/* ---- View mode: identity row ---- */
.portfolio-identity {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
}
.portfolio-photo-xxl {
  width: 140px; height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
  box-shadow: 0 0 0 1px var(--line);
}
.portfolio-name-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 4px 0 14px;
  flex-wrap: wrap;
}
.portfolio-name-line h1 {
  margin: 0;
  font-size: 32px;
  color: var(--ink-strong);
  font-weight: 700;
}
.portfolio-pronouns {
  color: var(--ink-muted);
  font-size: 14px;
}
.portfolio-meta-row {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.7;
}
.portfolio-meta-row .role-label {
  font-weight: 600;
  color: var(--ink-strong);
}
.portfolio-meta-row a { color: var(--pollinate-blue); font-weight: 600; }
.portfolio-meta-row a i { font-size: 11px; margin-left: 2px; }
.portfolio-meta-row .social-icons {
  margin-top: 6px;
  display: flex;
  gap: 8px;
}
.portfolio-meta-row .social-icons a {
  color: var(--pollinate-green);
  font-size: 16px;
}
.portfolio-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  min-width: 180px;
}
.portfolio-actions .btn { justify-content: center; }
.portfolio-connect-block {
  margin-top: 18px;
  text-align: right;
}
.portfolio-connect-block h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--ink-strong);
  font-weight: 700;
}

/* ---- View mode: section headings inside card ---- */
.portfolio-section {
  margin-top: 22px;
}
.portfolio-section:first-child { margin-top: 0; }
.portfolio-section h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-strong);
  margin: 0 0 8px;
}
.portfolio-section h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-strong);
  margin: 14px 0 6px;
}
.portfolio-section p { margin: 0 0 8px; }
.portfolio-section .privacy-note {
  font-size: 13px;
  color: var(--ink-muted);
  font-weight: 400;
  margin-left: 8px;
}
.portfolio-section .matching-line {
  font-size: 14px;
  margin: 4px 0;
}
.portfolio-section .matching-line strong {
  color: var(--ink-strong);
  font-weight: 700;
}

/* ---- Sidebar cards (portfolio variant) ---- */
.portfolio-side .side-card .card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.portfolio-side .side-card .card-head h3 { margin: 0; }
.portfolio-side .side-card .doc-pill { width: 100%; }
.portfolio-side .doc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.portfolio-side .doc-row .doc-pill { flex: 1; margin-top: 0; }
.portfolio-side .doc-row .doc-trash {
  color: var(--pollinate-blue);
  cursor: pointer;
  padding: 6px;
}
.portfolio-side .add-btn {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
.portfolio-side .stack-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.portfolio-side .stack-buttons .btn { width: 100%; justify-content: center; }

/* ---- Edit mode: form layout ---- */
.field-row {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}
.field-row.cols-2 { grid-template-columns: 1fr 1fr; }
.field-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 700px) {
  .field-row.cols-2, .field-row.cols-3 { grid-template-columns: 1fr; }
}

.form-field {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px 12px 8px;
  background: white;
}
.form-field label {
  position: absolute;
  top: 6px;
  left: 12px;
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 600;
  pointer-events: none;
}
.form-field input,
.form-field textarea,
.form-field select {
  border: none;
  outline: none;
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-strong);
  background: transparent;
  resize: vertical;
}
.form-field.disabled { background: #f5f5f5; }
.form-field .required-dot {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 14px;
  height: 14px;
  background: #c1272d;
  border-radius: 2px;
}

.form-textarea-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: white;
}
.form-textarea-card textarea {
  border: none;
  outline: none;
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  resize: vertical;
  min-height: 56px;
}

.checkbox-list {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  max-height: 140px;
  overflow-y: auto;
  padding: 8px 12px;
}
.checkbox-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 4px 0;
  cursor: pointer;
}
.checkbox-list input[type="checkbox"] { accent-color: var(--pollinate-blue); }

.inline-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  margin-top: 6px;
}

.edit-photo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.edit-photo-btn {
  background: white;
  border: 1px solid var(--pollinate-blue);
  color: var(--pollinate-blue);
  border-radius: 5px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.social-row {
  display: grid;
  grid-template-columns: 28px 28px 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.social-row .icon-cell {
  width: 28px; height: 28px;
  border-radius: 4px;
  background: var(--match-bg-blue);
  color: var(--pollinate-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.social-row .at-cell {
  color: var(--pollinate-green);
  font-weight: 700;
  text-align: center;
}
.social-row input {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-strong);
  outline: none;
}

.add-language-btn {
  background: white;
  border: 1px solid var(--pollinate-blue);
  color: var(--pollinate-blue);
  border-radius: 5px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}

.portfolio-edit-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.portfolio-edit-actions .btn { flex: 0 0 auto; min-width: 100px; justify-content: center; }

/* ============================================================
   v1.7 — TOUR AUDIO TOGGLE BUTTON
   ============================================================ */
.tour-tooltip button.tour-audio-btn {
  padding: 6px 9px;
  color: var(--ink-muted);
}
.tour-tooltip button.tour-audio-btn:hover {
  border-color: var(--pollinate-magenta);
  color: var(--pollinate-magenta);
}
.tour-tooltip button.tour-audio-btn.active {
  background: var(--pollinate-magenta);
  border-color: var(--pollinate-magenta);
  color: white;
}
.tour-tooltip button.tour-audio-btn.active:hover {
  color: white;
}
.tour-tooltip button.tour-audio-btn i { font-size: 13px; }

/* ============================================================
   v1.25 ADDITIONS: A&R Resource modal, final summary, how-it-works list
   New components only. No existing rules modified.
   ============================================================ */

/* Resource modal opens during A&R tour Step 3. z-index 9050 sits ABOVE the
   tour-highlight (9000) and BELOW the tour-tooltip (9100) so the user can
   still click Next on the tooltip. pointer-events:none on the backdrop +
   pointer-events:auto on the card keeps clicks routed correctly. */
.plat-resource-modal {
  position: fixed; inset: 0;
  background: rgba(20, 32, 44, 0.55);
  z-index: 1040;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  pointer-events: none;
}
.plat-resource-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  max-width: 720px; width: 100%;
  max-height: 70vh; overflow: auto;
  border-top: 6px solid var(--pollinate-magenta);
  pointer-events: auto;
}
.plat-resource-head {
  padding: 18px 24px;
  font-size: 18px; font-weight: 700;
  color: var(--pollinate-magenta);
  border-bottom: 1px solid var(--line-soft);
}
.plat-resource-body {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 20px 24px 24px 24px;
}
.plat-resource-col-head {
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  color: var(--pollinate-blue);
  margin-bottom: 10px;
}
.plat-resource-col ul {
  list-style: none; padding: 0; margin: 0;
  font-size: 13px; line-height: 1.55;
  color: var(--ink);
}
.plat-resource-col li {
  padding: 4px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.plat-resource-col li:last-child { border-bottom: none; }

/* In-demo PDF popup (Final Evaluation tour step). Below the tour tooltip (1041). */
.plat-pdf-modal {
  position: fixed; inset: 0;
  background: rgba(20, 32, 44, 0.55);
  z-index: 1040;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  pointer-events: none;
}
.plat-pdf-card {
  background: white; border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  width: min(900px, 92vw); height: min(80vh, 900px);
  display: flex; flex-direction: column; overflow: hidden;
  border-top: 6px solid var(--pollinate-magenta);
  pointer-events: auto;
}
.plat-pdf-head {
  padding: 14px 20px; font-size: 16px; font-weight: 700;
  color: var(--pollinate-magenta); border-bottom: 1px solid var(--line-soft);
}
.plat-pdf-frame { flex: 1; width: 100%; border: none; }

/* Final summary modal shown after the last tour step on the last page. */
.plat-final-summary {
  position: fixed; inset: 0;
  background: rgba(20, 32, 44, 0.55);
  z-index: 9200;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.plat-final-card {
  background: #fff;
  margin: auto;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.20);
  max-width: 760px; width: 100%;
  overflow: hidden;
  animation: plat-final-rise .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes plat-final-rise { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform:none; } }
.plat-final-accent {
  height: 6px;
  background: linear-gradient(90deg, var(--pollinate-magenta) 0 33%, var(--pollinate-blue) 33% 66%, var(--pollinate-green) 66% 100%);
}
.plat-final-head { padding: 34px 44px 10px; text-align: center; }
.plat-final-dots { display:flex; gap:9px; justify-content:center; margin-bottom:18px; }
.plat-final-dots span { width:16px; height:16px; border-radius:50%; }
.plat-final-dots .d1 { background: var(--pollinate-green); }
.plat-final-dots .d2 { background: #E0582A; }
.plat-final-dots .d3 { background: var(--pollinate-magenta); }
.plat-final-head h1 {
  font-size: 27px; font-weight: 800; color: var(--pollinate-magenta);
  margin: 0 0 8px; letter-spacing: -.4px;
}
.plat-final-head p { font-size: 15px; line-height: 1.55; margin: 0 auto; max-width: 520px; color: var(--ink); }
.plat-final-recap { padding: 26px 44px 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.plat-final-recap h3 {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--line);
}
.plat-final-col-participant h3 { color: var(--pollinate-blue); }
.plat-final-col-admin h3 { color: var(--pollinate-magenta); }
.plat-final-recap-desc { font-size: 13.5px; line-height: 1.5; margin: 0 0 14px; color: var(--ink); }
.plat-final-recap ul { list-style: none; margin: 0; padding: 0; }
.plat-final-recap li {
  display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; padding: 9px 0;
  line-height: 1.45; color: var(--ink);
  opacity: 0; animation: plat-final-fade .4s ease forwards;
}
@keyframes plat-final-fade { to { opacity: 1; } }
.plat-final-recap li i {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff;
}
.plat-final-col-participant li i { background: var(--pollinate-blue); }
.plat-final-col-admin li i { background: var(--pollinate-magenta); }
.plat-final-recap li strong { font-weight: 700; }
.plat-final-value { padding: 24px 44px 6px; text-align: center; }
.plat-final-value p { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0; }
.plat-final-actions {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  padding: 22px 44px 30px;
}
.plat-final-btn {
  display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700;
  padding: 12px 24px; border-radius: 9px; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: .15s;
}
.plat-final-primary { background: var(--pollinate-magenta); color: #fff; }
.plat-final-primary:hover { background: #82184f; }
.plat-final-secondary { background: #fff; color: var(--pollinate-blue); border-color: var(--pollinate-blue); }
.plat-final-secondary:hover { background: rgba(0,111,185,.07); }
.plat-final-foot { text-align: center; padding: 0 0 26px; font-size: 12px; color: #9a9a9a; }
@media (max-width: 640px) { .plat-final-recap { grid-template-columns: 1fr; } }

/* Landing page 'How it works' bullet list (index.html). */
.how-it-works-list {
  list-style: disc;
  padding-left: 22px;
  margin: 8px 0 0 0;
  font-size: 14px;
  line-height: 1.55;
}
.how-it-works-list li { margin: 4px 0; }

/* v1.25 — 1:1 match card layout shown in the center pane on Home when the
   user has cycled to a one-to-one match (vs the cohort layout). */
.match-1to1-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 160px;
  margin: 12px 0;
  background: var(--pollinate-light-blue, #E6F1F8);
  border-radius: 12px;
  text-decoration: none;
  padding: 24px;
  text-align: center;
  transition: background .15s ease;
}
.match-1to1-card:hover { background: #D6E7F2; }
.match-1to1-text {
  color: var(--pollinate-blue);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
}
.match-1to1-text i { margin-left: 6px; font-size: 12px; }

/* ============================================================
   ADMIN SPACE block recovered from v1.19 (was missing in v1.25).
   ============================================================ */
   v1.11 — ADMIN SPACE (Phase 3 Batch 2)
   Admin pages use a left rail sidebar instead of the participant
   header. Demo bar still renders at the top.
   Sidebar adapted from PLAT5's ProgramAdminSideBar.css.
   ============================================================ */

/* --- Admin layout ---------------------------------------- */
body.admin-body {
  background: #FAFAFA;
  margin: 0;
  padding: 0;
}

body.admin-body .demo-bar {
  position: relative;
  z-index: 200;
}

.admin-main {
  padding: 0 24px 32px calc(68px + 32px);
  max-width: none;
  transition: padding-left 0.5s;
}

body.admin-body.body-pd .admin-main {
  padding-left: calc(68px + 200px + 16px);
}

.admin-banner {
  margin-top: 12px;
  margin-bottom: 4px;
}
.admin-banner img {
  max-width: 100%;
  height: auto;
  display: block;
}

.admin-page-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
  color: #000000;
  margin: 18px 0 8px 5px;
}

.admin-section {
  background: #FFFFFF;
  border: 1px solid #D4D4D4;
  border-radius: 4px;
  padding: 20px 18px;
  margin-top: 12px;
}

.admin-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #535353;
  letter-spacing: 0.5px;
  margin: 0 0 14px;
}

/* --- Admin sidebar (.l-navbar) --------------------------- */
.l-navbar {
  position: fixed;
  top: 36px;          /* sit below the demo bar */
  left: 0;
  width: 68px;
  height: calc(100vh - 36px);
  background-color: #E1ECF3;
  border-right: 1px solid #D4D4D4;
  padding: 0.5rem 1rem 0 0;
  transition: width 0.5s, left 0.5s;
  z-index: 100;
  overflow: hidden;
  font-family: 'Open Sans', sans-serif;
}

.l-navbar.show {
  width: calc(68px + 200px);
}

.side-nav {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;       /* Firefox: hide scrollbar, keep scroll */
  -ms-overflow-style: none;    /* legacy Edge */
}
.side-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }

.nav_logo,
.nav_link {
  display: grid;
  grid-template-columns: 28px max-content;
  align-items: center;
  column-gap: 1rem;
  padding: 0.5rem 0 0.5rem 1.5rem;
  text-decoration: none;
  color: #535353;
  margin-bottom: 0.4rem;
  transition: 0.2s;
}

.nav_logo { margin-bottom: 1.5rem; }

.nav_link:hover {
  color: #9D2065;
}

.nav_logo-name {
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: #9D2065;
  white-space: nowrap;
}

.nav_name {
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: #535353;
  white-space: nowrap;
}

.nav_icon {
  font-size: 1.15rem;
  color: #535353;
  width: 25px;
  text-align: center;
}

.nav_link:hover .nav_icon { color: #9D2065; }

#header-toggle { cursor: pointer; }

/* Active state: magenta text + 2px left border */
.nav_link.active-side-nav {
  position: relative;
  color: #9D2065;
}
.nav_link.active-side-nav .nav_icon,
.nav_link.active-side-nav .nav_name {
  color: #9D2065;
}
.nav_link.active-side-nav::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 32px;
  background-color: #9D2065;
}

/* Matching is out-of-scope for this batch — greyed */
.nav_link.nav-matching-disabled,
.nav_link.nav-matching-disabled:hover {
  opacity: 0.45;
  cursor: not-allowed;
}
.nav_link.nav-matching-disabled .nav_icon,
.nav_link.nav-matching-disabled:hover .nav_icon,
.nav_link.nav-matching-disabled .nav_name,
.nav_link.nav-matching-disabled:hover .nav_name {
  color: #535353;
}

/* View as Participant — visually separated, sits at bottom */
.nav_link.nav-view-as-participant {
  margin-top: 1.5rem;
  border-top: 1px solid #C7D7E0;
  padding-top: 1rem;
}

/* --- Dashboard: PROGRAM SUMMARY -------------------------- */
.program-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}

.summary-card {
  flex: 0 0 auto;
  width: 13.5rem;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 14px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.title-card {
  font-size: 14px;
  font-weight: 600;
  color: #9D2065;
  text-align: center;
  margin: 0 0 12px;
}

.summary-card-body {
  display: flex;
  align-items: center;
}

.summary-col {
  flex: 1;
  text-align: center;
  padding: 0 6px;
}

.summary-col + .summary-col {
  border-left: 1px solid var(--line-soft);
}

.numbers-card {
  font-size: 24px;
  font-weight: 700;
  color: #535353;
  line-height: 1.2;
}

.labels-card {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  margin-top: 3px;
}

.summary-pie {
  flex: 0 0 auto;
  width: 11rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.pie-title {
  font-size: 14px;
  font-weight: 600;
  color: #9D2065;
  margin-bottom: 8px;
  text-align: center;
}

.pie-svg {
  width: 134px;
  height: 134px;
  display: block;
  margin: 0 auto;
}

.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-self: center;
  padding-left: 8px;
}

.legend-row {
  font-size: 11px;
  color: #535353;
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-row .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.dot-mentor   { background: #006FB9; }
.dot-mentee   { background: #85AD54; }
.dot-unmatched{ background: #9D2065; }

/* --- Dashboard: PROGRAM DETAILS -------------------------- */
.details-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
}

.filter-block {
  background: #FFFFFF;
  border: 1px solid #D4D4D4;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 10px;
}

.filter-block h6 {
  font-size: 13px;
  font-weight: 700;
  color: #535353;
  margin: 0 0 10px;
}

.date-row {
  display: flex;
  gap: 8px;
}

.date-field {
  flex: 1;
}

.date-field label {
  display: block;
  font-size: 12px;
  color: #535353;
  margin-bottom: 4px;
}

.fake-input,
.fake-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid #B3B3B3;
  border-radius: 3px;
  padding: 6px 10px;
  font-size: 13px;
  color: #535353;
}

.fake-input i,
.fake-select i {
  color: #9D2065;
  font-size: 14px;
}

.filter-panel {
  background: #E1ECF3;
  padding: 14px;
  border-radius: 4px;
}

.filter-panel-title {
  font-size: 16px;
  font-weight: 700;
  color: #535353;
  margin: 0;
}

.filter-panel hr {
  border: none;
  border-top: 1px solid #C7D7E0;
  margin: 8px 0 10px;
}

.filter-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #535353;
  margin-bottom: 4px;
}

.filter-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}

.filter-actions .btn {
  font-size: 13px;
  padding: 5px 12px;
}

.details-table-wrap {
  background: #FFFFFF;
  border: 1px solid #D4D4D4;
  border-radius: 4px;
  padding: 14px;
}

.details-table-title {
  font-size: 13px;
  font-weight: 700;
  color: #535353;
  margin: 0 0 10px;
}

.details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #535353;
}

.details-table th {
  text-align: center;
  padding: 3px 20px;
  line-height: 1.2em;
  border-bottom: 2px solid #E1ECF3;
  font-weight: 700;
  background: #E1ECF3;
  color: #424242;
  white-space: normal;
  word-wrap: break-word;
}

.details-table td {
  padding: 3px 20px;
  border-bottom: 1px solid #E1ECF3;
}

.details-table tr:last-child td {
  border-bottom: none;
}

.status-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 12px;
}

.status-done {
  background: #E7F1DD;
  color: #4F7A2C;
}

.status-pending {
  background: #FBE7F0;
  color: #9D2065;
}

@media (max-width: 900px) {
  .details-grid { grid-template-columns: 1fr; }
  .summary-card, .summary-pie { width: 100%; }
}

/* ============================================================
   v1.12 — PROGRAM SETUP (Phase 3 Batch 2 / page 2)
   ============================================================ */

.ps-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ps-section-h2 {
  font-size: 18px;
  font-weight: 700;
  color: #535353;
  margin: 0;
}

.ps-section-h3 {
  font-size: 16px;
  font-weight: 700;
  color: #535353;
  margin: 0 0 12px;
}

.ps-h4 {
  font-size: 14px;
  font-weight: 700;
  color: #535353;
  margin: 0 0 12px;
}

.ps-actions {
  display: flex;
  gap: 8px;
}

.ps-row {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}

.ps-col {
  flex: 1;
  min-width: 220px;
  padding: 0 18px;
}

.ps-col:first-child { padding-left: 0; }

.ps-col-half {
  flex: 1 1 320px;
  min-width: 280px;
  padding: 0 18px;
}

.ps-col-half:first-child { padding-left: 0; }

.ps-col-divider {
  border-left: 1px solid #E1ECF3;
}

.ps-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #535353;
  margin-bottom: 6px;
  cursor: pointer;
}

.ps-radio input[type="radio"] {
  accent-color: #006FB9;
  width: 16px;
  height: 16px;
  margin: 0;
}

.ps-aliases {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ps-alias-field {
  position: relative;
  display: flex;
  flex-direction: column;
}

.ps-alias-field label {
  font-size: 12px;
  font-weight: 600;
  color: #535353;
  margin-bottom: 4px;
}

.ps-alias-field input[type="text"] {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid #B3B3B3;
  border-radius: 4px;
  background: #FFFFFF;
  color: #535353;
  width: 100%;
}

.ps-alias-field input[type="text"]:focus {
  outline: none;
  border-color: #006FB9;
  box-shadow: 0 0 0 1px #006FB9;
}

.ps-textarea {
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid #B3B3B3;
  border-radius: 4px;
  background: #FFFFFF;
  color: #535353;
  resize: vertical;
}

.ps-textarea:focus {
  outline: none;
  border-color: #006FB9;
  box-shadow: 0 0 0 1px #006FB9;
}

.ps-textarea-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.ps-restore-link {
  font-size: 12px;
  color: #888;
  text-decoration: underline;
}

.ps-counter {
  font-size: 12px;
  color: #888;
}

.ps-help {
  font-size: 13px;
  color: #777;
  margin: 4px 0 10px;
}

.ps-branding-block {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #E1ECF3;
}

.ps-branding-block:first-of-type {
  margin-top: 8px;
  padding-top: 0;
  border-top: none;
}

.ps-brand-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.ps-color-swatch {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  border: 1px solid #B3B3B3;
}

.ps-asset-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.ps-asset-logo {
  width: 200px;
  height: 100px;
  object-fit: contain;
  background: #f5f5f5;
  border: 1px solid #DBDBDB;
  border-radius: 4px;
  padding: 4px;
}

.ps-asset-meta {
  flex: 1;
  min-width: 240px;
}

.ps-asset-banner-wrap {
  width: 100%;
  overflow: hidden;
  border: 1px solid #DBDBDB;
  border-radius: 4px;
  background: #f5f5f5;
}

.ps-asset-banner {
  width: 100%;
  height: auto;
  display: block;
}

.ps-banner-controls {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 12px;
}

.ps-banner-toggle {
  flex: 0 0 auto;
}

.ps-optional {
  font-size: 13px;
  font-weight: 400;
  color: #888;
}

.btn-outline {
  background: #FFFFFF;
  color: #006FB9;
  border: 1px solid #006FB9;
  padding: 6px 14px;
  border-radius: 4px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-outline:hover {
  background: #E6F1F8;
}

/* ============================================================
   v1.14 — MANAGE PARTICIPANTS (rebuilt to match production HTML)
   ============================================================ */

/* --- Toolbar --- */
.mp-toolbar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.mp-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}

.mp-toolbar-kti {
  margin-left: auto;
}

.btn.btn-sm {
  font-size: 13px;
  padding: 6px 14px;
}

.mp-export-format {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid #B3B3B3;
  border-radius: 4px;
  background: #FFFFFF;
  color: #535353;
}

/* --- Section wrapper for tabs + grid --- */
.mp-section {
  background: #FFFFFF;
  border: 1px solid #D4D4D4;
  border-radius: 4px;
  padding: 0;
  margin-top: 4px;
  overflow: hidden;
}

/* --- Tabs --- */
.mp-tabs {
  list-style: none;
  margin: 0;
  padding: 0 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #B3B3B3;
  background: #FFFFFF;
}

.mp-tabs li {
  margin: 0;
}

.mp-tab {
  display: block;
  padding: 10px 16px;
  margin: 0 -1px -1px 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #535353;
  text-decoration: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s;
}

.mp-tab:hover {
  background: #F5FAFD;
  color: #006FB9;
}

.mp-tab.active-tab {
  background: #E1ECF3;
  border-color: #B3B3B3 #B3B3B3 #E1ECF3;
  color: #535353;
  position: relative;
  z-index: 2;
}

/* --- Grid meta bar --- */
.mp-grid-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: #E1ECF3;
  font-size: 13px;
  color: #535353;
  border-bottom: 1px solid #C7D7E0;
}

.mp-tab-label {
  color: #888;
}

/* --- Table --- */
.mp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #535353;
}

.mp-table th {
  text-align: center;
  padding: 3px 20px;
  line-height: 1.2em;
  background: #E1ECF3;
  border-bottom: 2px solid #E1ECF3;
  font-weight: 700;
  color: #424242;
  white-space: normal;
  word-wrap: break-word;
  font-size: 12px;
}

.mp-table th i { color: #B3B3B3; margin-left: 4px; font-size: 11px; }

.mp-th-expand    { width: 130px; text-align: center; }
.mp-th-name      { min-width: 160px; }
.mp-th-email     { min-width: 200px; }
.mp-th-date      { width: 150px; text-align: center; }
.mp-th-portfolio { width: 130px; text-align: center; }

.mp-table td {
  padding: 3px 20px;
  border-bottom: 1px solid #E1ECF3;
  vertical-align: middle;
}

.mp-master-row:hover {
  background: #F5FAFD;
}

.mp-master-row.expanded {
  background: #E6F1F8;
}

/* Expand caret column */
.mp-td-expand {
  text-align: center;
}

.mp-expand-caret {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: #006FB9;
  border: 1px solid transparent;
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.12s;
}

.mp-expand-caret:hover {
  background: #FFFFFF;
  border-color: #C7D7E0;
}

/* Email cell with edit pencil (visible on row hover) */
.mp-email-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mp-edit-icon {
  color: #B3B3B3;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

.mp-master-row:hover .mp-edit-icon {
  opacity: 1;
}

.mp-edit-icon:hover {
  color: #9D2065;
}

/* Date cells centred */
.mp-td-date {
  text-align: center;
}

/* KTI Date as link */
.mp-kti-link {
  color: #006FB9;
  text-decoration: none;
  cursor: pointer;
}
.mp-kti-link:hover {
  text-decoration: underline;
  color: #9D2065;
}

.mp-pending {
  font-size: 12px;
  color: #888;
  font-style: italic;
}

/* Portfolio book icon */
.mp-td-portfolio {
  text-align: center;
}

.mp-portfolio-link {
  color: #006FB9;
  text-decoration: none;
  font-size: 16px;
}

.mp-portfolio-link:hover { color: #9D2065; }

/* --- Detail row (Show Matches expanded) --- */
.mp-detail-row td {
  background: #F5FAFD;
  padding: 12px 16px 14px 56px;
  border-bottom: 1px solid #E1ECF3;
}

.mp-expand-empty {
  font-size: 13px;
  color: #888;
  font-style: italic;
}

.mp-expand-empty i {
  color: #B3B3B3;
  margin-right: 6px;
}

.mp-expand-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mp-match-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #FFFFFF;
  border: 1px solid #E1ECF3;
  border-radius: 4px;
  font-size: 13px;
}

.mp-match-icon {
  color: #006FB9;
  font-size: 13px;
}

.mp-match-name {
  font-weight: 600;
  color: #535353;
  min-width: 180px;
}

.mp-match-score {
  margin-left: auto;
  color: #888;
  font-size: 12px;
}

.mp-match-score strong {
  color: #4F7A2C;
  font-size: 13px;
  font-weight: 700;
}

/* Role pills (also used in expand-row) */
.mp-role-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 12px;
}

.mp-role-mentor { background: #E6F1F8; color: #006FB9; }
.mp-role-mentee { background: #E7F1DD; color: #4F7A2C; }
.mp-role-both   { background: #FBE7F0; color: #9D2065; }

/* --- KTI Comparison Modal (kept from v1.13, no behavioural changes) --- */
.mp-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9000;
  align-items: center;
  justify-content: center;
}

.mp-modal-backdrop.open {
  display: flex;
}

.mp-modal {
  background: #FFFFFF;
  border-radius: 1.5rem;
  width: 560px;
  max-width: 92vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.mp-modal-header {
  position: relative;
  padding: 20px 24px 12px;
  border-bottom: 1px solid #E1ECF3;
}

.mp-modal-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: #535353;
  margin: 0 0 4px;
}

.mp-modal-header .mp-help { margin: 0; font-size: 13px; }

.mp-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: none;
  color: #888;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}

.mp-modal-close:hover { color: #9D2065; }

.mp-modal-body {
  padding: 16px 24px;
  overflow-y: auto;
}

.mp-modal-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.mp-modal-label {
  font-size: 12px;
  font-weight: 600;
  color: #535353;
  margin-bottom: 4px;
}

.mp-fake-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid #B3B3B3;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  color: #535353;
}

.mp-fake-select i { color: #9D2065; }

.mp-help {
  font-size: 13px;
  color: #777;
  margin: 4px 0 8px;
}

.mp-kti-preview {
  margin-top: 16px;
  padding: 12px;
  background: #F5FAFD;
  border-radius: 6px;
}

.mp-kti-preview-row {
  display: grid;
  grid-template-columns: 90px 1fr 72px;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
}

.mp-kti-preview-row:last-child { margin-bottom: 0; }

.mp-kti-dim {
  font-weight: 600;
  color: #535353;
}

.mp-kti-bar {
  position: relative;
  height: 14px;
  background: #FFFFFF;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid #DBDBDB;
}

.mp-kti-bar-a, .mp-kti-bar-b {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 7px;
}

.mp-kti-bar-a { background: rgba(0, 111, 185, 0.55); z-index: 1; }
.mp-kti-bar-b { background: rgba(157, 32, 101, 0.55); z-index: 2; mix-blend-mode: multiply; }

.mp-kti-vals {
  font-weight: 600;
  color: #535353;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mp-modal-legend {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 12px;
  font-size: 12px;
  color: #535353;
}

.mp-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

.mp-dot-a { background: #006FB9; }
.mp-dot-b { background: #9D2065; }

.mp-modal-footer {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid #E1ECF3;
  background: #FAFAFA;
}

/* ============================================================
   v1.15 — Manage Participants additions
   - Column header sort/filter menu (3-dot icon + dropdown)
   - KTI Comparison Report modal: user 1 / user 2 comboboxes
   ============================================================ */

/* --- Column header menu --- */
.mp-table th {
  position: relative;
}

.mp-th-label {
  display: inline-block;
}

.mp-col-menu {
  display: inline-block;
  margin-left: 6px;
  color: #888;
  font-size: 11px;
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 3px;
  cursor: pointer;
  vertical-align: middle;
}
.mp-col-menu:hover {
  background: #E1ECF3;
  color: #535353;
}

.mp-col-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 8px;
  min-width: 200px;
  background: #FFFFFF;
  border: 1px solid #C7D7E0;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  padding: 4px 0;
  z-index: 50;
  font-size: 13px;
  font-weight: 400;
}

.mp-col-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: #006FB9;
  text-decoration: none;
  white-space: nowrap;
}

.mp-col-menu-item:hover {
  background: #F5FAFD;
}

.mp-col-menu-item i { width: 14px; text-align: center; }

.mp-submenu-chevron {
  margin-left: auto;
  color: #888;
  font-size: 10px;
}

/* --- KTI Comparison modal: user select container --- */
.mp-modal-body:has(.mp-kti-select-container) { min-height: 360px; }
.mp-kti-select-container {
  border: 1px solid #E1ECF3;
  border-radius: 6px;
  padding: 16px;
}

.mp-kti-select-title {
  font-size: 14px;
  font-weight: 600;
  color: #535353;
  margin: 0 0 12px;
}

.mp-kti-select-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.mp-kti-select-field {
  flex: 1;
  min-width: 180px;
}

.mp-kti-select-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #535353;
  margin-bottom: 4px;
}

.mp-kti-combo {
  position: relative;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #B3B3B3;
  border-radius: 4px;
  cursor: pointer;
}

.mp-kti-combo:hover {
  border-color: #006FB9;
}

.mp-kti-combo input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  padding: 8px 10px;
  color: #535353;
  cursor: pointer;
  outline: none;
}

.mp-kti-combo > i {
  padding: 0 10px;
  color: #888;
}

.mp-kti-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: #FFFFFF;
  border: 1px solid #C7D7E0;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  z-index: 30;
}

.mp-kti-dropdown-item {
  display: block;
  padding: 7px 12px;
  font-size: 13px;
  color: #535353;
  text-decoration: none;
  border-bottom: 1px solid #F0F4F7;
}

.mp-kti-dropdown-item:last-child {
  border-bottom: none;
}

.mp-kti-dropdown-item:hover {
  background: #F5FAFD;
  color: #006FB9;
}

/* ============================================================
   v1.16 — MANAGE SUB-GROUPS
   ============================================================ */

/* Add new sub-group row */
.sg-add-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 16px;
  flex-wrap: wrap;
}

.sg-add-label {
  font-weight: 700;
  font-size: 14px;
  color: #535353;
  min-width: 130px;
  text-align: right;
}

.sg-add-input {
  flex: 0 1 320px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  padding: 7px 10px;
  border: 1px solid #B3B3B3;
  border-radius: 4px;
  background: #FFFFFF;
  color: #535353;
}

.sg-add-input:focus {
  outline: none;
  border-color: #006FB9;
  box-shadow: 0 0 0 1px #006FB9;
}

/* Section + table */
.sg-section {
  background: #FFFFFF;
  border: 1px solid #D4D4D4;
  border-radius: 4px;
  padding: 0;
  overflow: hidden;
  max-width: 800px;
}

.sg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #535353;
}

.sg-table th {
  text-align: center;
  padding: 3px 20px;
  line-height: 1.2em;
  background: #E1ECF3;
  border-bottom: 2px solid #E1ECF3;
  font-weight: 700;
  color: #424242;
  white-space: normal;
  word-wrap: break-word;
  font-size: 12px;
}

.sg-th-icon { width: 80px; text-align: center; }
.sg-th-count { width: 130px; text-align: center; }
.sg-th-manage { width: 130px; text-align: center; }

.sg-filter-icon {
  color: #B3B3B3;
  margin-left: 6px;
  font-size: 11px;
}

.sg-table td {
  padding: 3px 20px;
  border-bottom: 1px solid #E1ECF3;
  vertical-align: middle;
}

.sg-row:hover {
  background: #F5FAFD;
}

.sg-row.sg-row-custom {
  background: #FBFCFD;
}

.sg-row.sg-row-custom:hover {
  background: #F0F7FB;
}

.sg-td-icon {
  text-align: center;
}

.sg-td-name {
  font-weight: 600;
}

.sg-td-count {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sg-td-manage {
  text-align: center;
}

/* Edit / delete icons */
.sg-action-link {
  color: #006FB9;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
  padding: 4px 6px;
  border-radius: 3px;
}

.sg-action-link:hover {
  background: #E1ECF3;
  color: #9D2065;
}

/* Disabled icons (system sub-groups) — match production .disabled-element */
.sg-disabled {
  color: #006FB9;
  font-size: 14px;
  opacity: 0.5;
  cursor: not-allowed;
}

/* Manage Sub-group arrow */
.sg-manage-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  color: #006FB9;
  text-decoration: none;
  font-size: 14px;
}

.sg-manage-arrow:hover {
  background: #E1ECF3;
  color: #9D2065;
}

/* Pager footer */
.sg-pager {
  padding: 8px 12px;
  background: #E1ECF3;
  font-size: 12px;
  color: #535353;
  border-top: 1px solid #C7D7E0;
}

/* ============================================================
   v1.17 — ACTIVITIES & RESOURCES ADMIN
   Section rail (left) + section content (right) with folder cards
   and resource grids. Manage Section / Manage Folder dropdowns.
   ============================================================ */

.ar-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  margin-top: 8px;
}

/* --- Left rail: sections --- */
.ar-sections {
  background: #FFFFFF;
  border: 1px solid #D4D4D4;
  border-radius: 4px;
  overflow: hidden;
  align-self: flex-start;
}

.ar-sections-head {
  background: #E1ECF3;
  padding: 14px;
  position: relative;
}

.ar-add-section {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

.ar-sections-title {
  font-size: 16px;
  font-weight: 700;
  color: #535353;
  margin: 0 0 4px;
}

.ar-visible-on-text {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #9D2065;
  text-align: right;
}

.ar-section-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ar-section-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  font-size: 13px;
  color: #535353;
  border-bottom: 1px solid #E1ECF3;
  cursor: pointer;
  transition: background 0.12s;
}

.ar-section-item:hover {
  background: #F5FAFD;
}

.ar-section-item.ar-section-active {
  background: #E1ECF3;
  font-weight: 700;
}

.ar-section-name {
  flex: 1;
}

.ar-section-date {
  font-size: 11px;
  color: #777;
  font-weight: 400;
  margin-left: 10px;
}

/* --- Right pane: section content --- */
.ar-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ar-section-header {
  background: #E1ECF3;
  border: 1px solid #C7D7E0;
  border-radius: 4px;
  padding: 14px 16px;
}

.ar-section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.ar-section-h2 {
  font-size: 18px;
  font-weight: 700;
  color: #535353;
  margin: 0;
}

.ar-section-meta {
  font-size: 12px;
  color: #535353;
  font-style: italic;
  text-align: right;
}

/* --- Dropdowns (Manage Section / Manage Folder) --- */
.ar-dropdown-wrap {
  position: relative;
  display: inline-block;
}

.ar-manage-section,
.ar-manage-folder {
  white-space: nowrap;
}

.ar-manage-section i,
.ar-manage-folder i {
  margin-left: 4px;
  font-size: 11px;
}

.ar-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: #FFFFFF;
  border: 1px solid #C7D7E0;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  z-index: 60;
}

.ar-dropdown-menu li {
  margin: 0;
}

.ar-dropdown-item {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  color: #006FB9;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.ar-dropdown-item:hover {
  background: #F5FAFD;
}

.ar-dropdown-item.ar-dropdown-danger {
  color: #9D2065;
}

.ar-dropdown-item.ar-dropdown-danger:hover {
  background: #FBE7F0;
}

/* --- Folder card --- */
.ar-folder {
  background: #FFFFFF;
  border: 1px solid #D4D4D4;
  border-radius: 4px;
  padding: 14px 16px;
}

.ar-folder-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.ar-folder-name {
  font-size: 16px;
  font-weight: 700;
  color: #535353;
  margin: 0;
}

/* --- Resource grid --- */
.ar-resource-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #535353;
}

.ar-resource-table th {
  text-align: center;
  padding: 3px 20px;
  line-height: 1.2em;
  background: #E1ECF3;
  border-bottom: 2px solid #E1ECF3;
  font-weight: 700;
  color: #424242;
  white-space: normal;
  word-wrap: break-word;
  font-size: 12px;
}

.ar-th-reorder { width: 30px; }
.ar-th-name    { min-width: 240px; }
.ar-th-date    { width: 110px; text-align: center; }
.ar-th-type    { width: 80px;  text-align: center; }
.ar-th-actions { width: 90px;  text-align: center; }
.ar-th-remove  { width: 70px;  text-align: center; }

.ar-resource-table td {
  padding: 3px 20px;
  border-bottom: 1px solid #E1ECF3;
  vertical-align: middle;
}

.ar-resource-table tr:last-child td {
  border-bottom: none;
}

.ar-resource-table tr:hover {
  background: #F5FAFD;
}

.ar-td-reorder {
  text-align: center;
  color: #B3B3B3;
  cursor: grab;
}

.ar-td-date,
.ar-td-type,
.ar-td-actions,
.ar-td-remove {
  text-align: center;
}

.ar-td-type {
  font-family: 'Courier New', monospace;
  color: #006FB9;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
}

.ar-resource-link {
  color: #006FB9;
  text-decoration: none;
}

.ar-resource-link:hover {
  text-decoration: underline;
  color: #9D2065;
}

.ar-edit-link {
  color: #9D2065;
  text-decoration: none;
  font-size: 12px;
  font-style: italic;
}

.ar-edit-link:hover {
  color: #9D2065;
  text-decoration: underline;
}

.ar-remove-btn {
  background: transparent;
  border: none;
  color: #9D2065;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 3px;
}

.ar-remove-btn:hover {
  background: #FBE7F0;
}

@media (max-width: 1100px) {
  .ar-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   v1.19 — NEWS & ALERTS ADMIN
   Mirrors production Alerts_cshtml.css patterns:
   .container-header-alert (title row), .label-title-post,
   .label-date-post, .hyperlink-description-alert.
   ============================================================ */

.al-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 5px 16px;
  flex-wrap: wrap;
}

.al-page-header .admin-page-title {
  margin: 0;
  flex: 1;
}

.al-add-alert {
  margin-right: 5px;
  white-space: nowrap;
}

.al-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.al-card {
  background: #FFFFFF;
  border: 1px solid #DBDBDB;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
}

.al-card-header {
  background: #E1ECF3;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  flex-wrap: wrap;
}

.al-card-meta {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.al-icon {
  color: #9D2065;
  font-size: 1.25rem;
}

.al-title {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  color: #535353;
  margin-left: 20px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.al-date {
  font-weight: 400;
  font-size: 1rem;
  text-align: left;
  margin-left: 20px;
  color: #535353;
  white-space: nowrap;
}

.al-card-body {
  padding: 14px 18px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #535353;
}

.al-card-body p {
  margin: 0 0 10px;
}

.al-card-body p:last-child {
  margin-bottom: 0;
}

.al-card-body a {
  color: #006FB9;
  text-decoration: underline;
}

.al-card-body a:hover {
  color: #9D2065;
}

.al-card-body .resource-link {
  display: inline-block;
  margin-top: 4px;
  font-weight: 600;
}

/* --- Manage Alert dropdown --- */
.al-dropdown-wrap {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.al-manage-alert {
  white-space: nowrap;
}

.al-manage-alert i {
  margin-left: 4px;
  font-size: 11px;
}

.al-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: #FFFFFF;
  border: 1px solid #C7D7E0;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  z-index: 60;
}

.al-dropdown-menu li {
  margin: 0;
}

.al-dropdown-item {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  color: #006FB9;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.al-dropdown-item:hover {
  background: #F5FAFD;
}

.al-dropdown-item.al-dropdown-danger {
  color: #9D2065;
}

.al-dropdown-item.al-dropdown-danger:hover {
  background: #FBE7F0;
}

/* ============================================================
   Matching batch (Phase 3 Batch A) — v1.26
   Sidebar Matching group, Import Files page, matching drill-down
   ============================================================ */

/* --- Sidebar: expanded Matching group --- */
.nav-matching-parent { cursor: default; }
.nav-matching-parent:hover { background: transparent; }
.nav-subgroup {
  display: none;
  flex-direction: column;
  padding-left: 24px;
}
.nav-subgroup.open { display: flex; }
.nav-group-parent { cursor: pointer; }
.nav_link_M {
  display: flex;
  align-items: center;
  column-gap: 0;
  padding: 7px 0 7px 18px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  transition: color .2s;
}
.nav_link_M:hover { color: var(--pollinate-magenta); }
.nav_icon_M {
  font-size: 17px;
  min-width: 36px;
  text-align: center;
  color: var(--pollinate-magenta);
}
.nav_link_M.active-side-nav,
.nav_link_M.active-side-nav .nav_name { color: var(--pollinate-magenta); font-weight: 700; }

/* --- Import Files page --- */
.imp-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
  margin-top: 14px;
  max-width: 720px;
}
.imp-card h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-strong);
  margin: 0 0 16px;
}
.imp-file-row { margin-bottom: 18px; }
.imp-file-row label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-strong);
  margin-bottom: 6px;
}
.imp-file-input {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 9px 12px;
  background: var(--bg);
  color: var(--ink-muted);
  font-size: 13px;
}
.imp-file-input i { color: var(--pollinate-magenta); }
.imp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

/* --- matching.html drill-down --- */
.mt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 6px 5px;
}
.mt-back {
  font-size: 13px;
  color: var(--pollinate-blue);
  text-decoration: none;
}
.mt-back:hover { text-decoration: underline; }
.mt-subhead {
  font-size: 14px;
  color: var(--ink-muted);
  margin: 0 0 14px 5px;
}
.mt-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--match-bg-blue);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--ink);
  max-width: 760px;
  margin-bottom: 18px;
}
.mt-note i { color: var(--pollinate-blue); margin-top: 2px; }
.mt-candidates {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
}
.mt-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  padding: 14px 18px;
}
.mt-card img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
}
.mt-card-info { flex: 1; }
.mt-card-name { font-size: 15px; font-weight: 700; color: var(--ink-strong); }
.mt-card-title { font-size: 13px; color: var(--ink-muted); }
.mt-card-tags { margin-top: 5px; display: flex; gap: 8px; flex-wrap: wrap; }
.mt-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 10px;
  background: #EFEFEF;
  color: var(--ink-strong);
}
.mt-tag-role { background: #E6F1F8; color: var(--pollinate-blue); }
.mt-tag-kti  { background: #ECF5E2; color: #5a7d33; }

/* ============================================================
   Matching batch B (Phase 3) — v1.27
   Match Counts, Match Optimizer, Matched Users
   ============================================================ */

/* --- Shared admin data table --- */
.mtab-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  margin-top: 14px;
  overflow-x: auto;
  max-width: 100%;
}
table.mtab {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: var(--ink);
}
table.mtab thead th {
  background: #e1ecf3;
  color: #424242;
  font-weight: 700;
  text-align: center;
  padding: 6px 18px;
  border-bottom: 2px solid var(--line);
  white-space: normal;
  word-wrap: break-word;
}
table.mtab tbody td {
  padding: 6px 18px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
table.mtab tbody td.mtab-name { text-align: left; font-weight: 600; }
table.mtab tbody tr:nth-child(even) { background: #FBFCFD; }
table.mtab tbody tr:hover { background: #f0f0f0; }
table.mtab a { color: var(--pollinate-blue); text-decoration: none; font-weight: 700; }
table.mtab a:hover { text-decoration: underline; }
.mtab-role { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 10px; }
.mtab-role.is-mentor { background: #E6F1F8; color: var(--pollinate-blue); }
.mtab-role.is-mentee { background: #ECF5E2; color: #5a7d33; }
.mtab-role.is-both   { background: #F1E6F5; color: var(--pollinate-purple); }
.mc-name-plain { color: var(--ink-strong); font-weight: 600; }

/* --- Match Optimizer --- */
.opt-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
  margin-top: 14px;
}
.opt-card h2 { font-size: 16px; font-weight: 700; color: var(--ink-strong); margin: 0 0 14px; }
.opt-range { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.opt-field { display: flex; flex-direction: column; gap: 5px; }
.opt-field label { font-size: 13px; font-weight: 600; color: var(--ink-strong); }
.opt-field input {
  width: 90px; padding: 8px 10px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--ink);
}
.opt-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.opt-results-title { font-size: 16px; font-weight: 700; color: var(--ink-strong); margin: 24px 0 0 5px; }

/* --- Matched Users --- */
.md-pair { font-weight: 600; color: var(--ink-strong); }
.md-score { font-weight: 700; color: var(--pollinate-blue); }
.md-status { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 10px; background: #ECF5E2; color: #5a7d33; }

/* ============================================================
   Import page — PROD-matching two-panel layout — v1.28
   ============================================================ */
.imp-accordion { max-width: 1180px; }
.imp-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  margin-top: 16px;
  overflow: hidden;
}
.imp-panel-header {
  background: var(--match-bg-blue);
  color: var(--pollinate-blue);
  font-size: 17px;
  font-weight: 600;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
}
.imp-panel-body { padding: 22px 24px; }
.imp-field { margin-bottom: 6px; }
.imp-field > label {
  display: block;
  font-size: 14px;
  color: var(--ink);
  margin: 12px 0 6px;
}
.imp-field input[type="file"] {
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 7px 10px;
  background: #fff;
  color: var(--ink);
  max-width: 480px;
  width: 100%;
}
.imp-check { display: flex; align-items: center; gap: 8px; margin: 18px 0 4px; font-size: 14px; color: var(--ink-strong); }
.imp-review { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px 48px; }
.imp-review .lbl { font-weight: 700; color: var(--ink-strong); font-size: 15px; margin-top: 14px; }
.imp-review .val { color: var(--ink-muted); font-size: 14px; margin: 3px 0 0 8px; }
.imp-counts { padding-top: 14px; }
.imp-counts label { display: block; font-weight: 700; color: var(--ink-strong); font-size: 15px; margin-bottom: 8px; }

/* ============================================================
   Matching pages — PROD-matching redesign — v1.29
   Nav bar, table grid lines + column menus, master-detail grid,
   optimizer config/results, toggles
   ============================================================ */

/* --- Horizontal matching nav button bar --- */
.match-nav { display: flex; gap: 14px; margin: 16px 0 10px; flex-wrap: wrap; }
.match-nav-btn {
  flex: 1 1 0; min-width: 150px; text-align: center;
  background: var(--pollinate-blue); color: #fff;
  padding: 11px 14px; border-radius: 5px;
  font-weight: 600; font-size: 15px; text-decoration: none;
}
.match-nav-btn:hover { filter: brightness(1.08); color: #fff; }
.match-nav-btn.active { background: var(--pollinate-magenta); }

/* --- Vertical grid lines + cosmetic column menus on .mtab --- */
table.mtab th, table.mtab td { border-right: 1px solid var(--line-soft); }
table.mtab th:last-child, table.mtab td:last-child { border-right: none; }
.mtab-menu  { color: #B3B3B3; font-size: 12px; margin-left: 6px; }
.mtab-sort  { color: #6b6b6b; font-size: 11px; margin-left: 4px; }
.mtab th .mtab-head-inner { display: inline-flex; align-items: center; justify-content: center; gap: 2px; }

/* --- Toggle pills (cosmetic) --- */
.tgl-row { display: flex; gap: 14px; align-items: center; margin: 10px 0 14px; flex-wrap: wrap; }
.tgl-pill {
  border: 1px solid var(--pollinate-magenta); border-radius: 10px;
  padding: 9px 16px; font-size: 14px; background: #fff;
  display: inline-flex; gap: 10px; cursor: pointer;
}
.tgl-pill .on  { font-weight: 700; color: var(--ink-strong); }
.tgl-pill .off { font-weight: 700; color: var(--pollinate-magenta); }
.tgl-update {
  border: 1px solid var(--pollinate-blue); color: var(--pollinate-blue);
  background: #fff; border-radius: 7px; padding: 9px 16px; font-size: 14px; cursor: pointer;
}
.btn-remove-users {
  border: 1px solid var(--pollinate-magenta); color: var(--pollinate-magenta);
  background: #fff; border-radius: 7px; padding: 10px 18px;
  font-weight: 700; font-size: 15px; cursor: pointer;
}

/* --- matching.html master-detail grid --- */
.mtg-master .mtab thead th { background: #e1ecf3; }
.mtg-master-row td { background: #FFF7DB !important; font-weight: 600; color: var(--ink-strong); }
.mtg-grid { margin-top: 18px; }
.mtg-grid .mtab thead th { background: #d0e0bc; color: #424242; }
.mtg-status { color: #006FB9; font-size: 15px; }
.mtg-status-unmatched { color: var(--pollinate-magenta); font-size: 15px; }
.mtg-caret { color: var(--ink-muted); }
.mtg-drag  { color: #B3B3B3; }
.mtg-mentor-name { color: #569fd1; }
.mtg-mentee-name { color: #78a450; }

/* Role cells coloured like PROD (background, not text) */
.mtab-role-cell { text-align: center !important; }
.mtab-role-cell.is-mentor { background: #add0e8; }
.mtab-role-cell.is-mentee { background: #d0e0bc; }

/* --- Optimizer config (image 5) --- */
.optc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 48px; }
.optc-col h2 { font-size: 18px; font-weight: 700; color: var(--ink-strong); margin: 0 0 14px; }
.optc-field { margin-bottom: 16px; }
.optc-field label { display: block; font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.optc-field input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 5px; font-size: 14px; background: #fff; color: var(--ink);
}
.optc-process { text-align: center; margin-top: 12px; }

/* --- Optimizer results (image 6) --- */
.optr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.optr-head, .optr-chart-title { font-size: 20px; font-weight: 700; color: var(--ink-strong); text-align: center; margin: 0 0 14px; }
.optr-nomatch { text-align: center; font-size: 15px; margin: 4px 0; color: var(--ink); }
.optr-nomatch b { color: var(--pollinate-magenta); }
.optr-maxscore { text-align: center; font-size: 14px; color: var(--ink); margin-bottom: 14px; }
.optr-actions { text-align: center; margin-top: 18px; }
.optr-chart { width: 100%; height: auto; }

/* ============================================================
   Matching refinement — v1.31
   Optimizer reveal, Pre-Match scripted set-match, Matching
   Utilities dropdown, Side by Side page, toast
   ============================================================ */

/* --- Optimizer: results hidden until Process Match Optimizer --- */
.opt-hidden { display: none; }

/* --- Pre-Match: scripted set-match feedback --- */
#pm-setmatch { cursor: pointer; }
#pm-setmatch:hover { filter: brightness(1.2); }
tr.pm-row-fade { transition: opacity 0.6s ease; opacity: 0; }

/* --- Toast (set-match confirmation) --- */
.plat-toast {
  position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%);
  background: var(--pollinate-blue); color: #fff; font-size: 14px; font-weight: 600;
  padding: 10px 22px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  z-index: 9999; opacity: 0; transition: opacity 0.3s ease;
}
.plat-toast.show { opacity: 1; }

/* --- Matched Users: Matching Utilities dropdown --- */
.mu-wrap { position: relative; display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: -2px 0 10px; }
.mu-label { font-size: 15px; font-weight: 900; color: #000; }
.mu-trigger { cursor: pointer; color: var(--pollinate-magenta); font-size: 20px; }
.mu-menu {
  display: none; position: absolute; top: 30px; right: 0; min-width: 250px;
  background: #E1ECF3; border: 1px solid #D9D9D9; border-radius: 4px;
  padding: 8px 12px; z-index: 999; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.mu-menu.open { display: block; }
.mu-menu ul { list-style: none; margin: 0; padding: 3px; }
.mu-menu li { padding: 5px 2px; font-size: 14px; white-space: nowrap; }
.mu-menu li span { cursor: pointer; color: var(--ink-strong); }
.mu-menu li span:hover { color: #0d6efd; }
.mu-menu li i.fa-circle-info { color: var(--pollinate-blue); font-size: 12px; margin-left: 6px; }
.mu-menu hr { margin: 6px 0; border: 0; border-top: 1px solid #c9d6e2; }

/* --- Side by Side --- */
.sbs-actions { display: flex; justify-content: space-between; margin: 0 0 14px; }
table.mtab th.sbs-prop-head, table.mtab tbody td.sbs-prop { text-align: left; font-weight: 700; background: #e1ecf3; color: #424242; }
table.mtab th.sbs-mentor-head { background: #add0e8; color: #424242; text-align: left; font-size: 13px; }
table.mtab th.sbs-mentee-head { background: #d0e0bc; color: #424242; text-align: left; font-size: 13px; }
table.mtab th.sbs-score-head { background: #e1ecf3; }
table.mtab tbody td.sbs-val { text-align: left; font-weight: 400; }
table.mtab tbody td.sbs-score { font-weight: 700; color: var(--pollinate-blue); }
.sbs-unmatch { color: var(--pollinate-magenta); font-size: 15px; cursor: pointer; }

/* ============================================================
   Matching refinement — v1.32
   Side by Side column wrapping + Close, final summary third
   column (matching admin)
   ============================================================ */

/* --- Side by Side: fixed layout so both value columns fit on screen --- */
#sbs-grid table.mtab { table-layout: fixed; width: 100%; }
#sbs-grid td.sbs-val, #sbs-grid td.sbs-prop { overflow-wrap: anywhere; word-break: break-word; }
.sbs-close-row { display: flex; justify-content: flex-end; margin: 0 0 14px; }

/* --- Final summary: three recap columns --- */
.plat-final-recap { grid-template-columns: 1fr 1fr 1fr; }
.plat-final-col-matching h3 { color: #85ad54; }
@media (max-width: 900px) { .plat-final-recap { grid-template-columns: 1fr; } }

/* ============================================================
   Matching refinement — v1.33
   Side by Side wrapping fix (base td nowrap override)
   ============================================================ */
#sbs-grid table.mtab tbody td { white-space: normal; }

/* ============================================================
   Manage Emails + Manage Notes — v1.39
   Items 122 / 131: the em-* / nt-* layout classes were never in
   the stylesheet, so both pages rendered unstyled. This block
   styles the tab bar, recipient picker, composer, tag chips,
   log tables, and the Notes visibility controls to match the
   rest of the admin space.
   ============================================================ */

/* --- Tab bar (Send Emails / Email Log, Add A Note / Note Log) --- */
.em-tabs { list-style: none; display: flex; gap: 4px; margin: 18px 0 0; padding: 0; border-bottom: 2px solid var(--line); }
.em-tabs li { margin: 0; }
.em-tab {
  display: block; padding: 9px 20px; text-decoration: none;
  font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--ink-muted); border: 1px solid transparent; border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.em-tab:hover { color: var(--pollinate-blue); }
.em-tab.active-tab {
  color: var(--pollinate-magenta); background: #fff;
  border-color: var(--line); border-bottom: 2px solid #fff; margin-bottom: -2px;
}

.em-pane { padding-top: 18px; }

/* --- Send grid: recipient picker (left) + composer (right) --- */
.em-send-grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }

.em-recipients {
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  box-shadow: var(--shadow-card); padding: 14px; max-height: 620px; overflow-y: auto;
}
.em-recipients-search { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px; font-size: 13px; margin-bottom: 10px; }
.em-recipients-bulk { display: flex; gap: 16px; margin-bottom: 12px; }
.em-link-bulk { font-size: 12px; font-weight: 700; letter-spacing: .3px; color: var(--pollinate-blue); text-decoration: none; }
.em-link-bulk:hover { text-decoration: underline; }

.em-subgroup-list { border-top: 1px solid var(--line-soft); margin-bottom: 12px; }
.em-subgroup-row { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--line-soft); }
.em-sg-view, .em-sg-add { color: var(--pollinate-blue); text-decoration: none; font-size: 13px; }
.em-sg-view:hover, .em-sg-add:hover { color: var(--pollinate-magenta); }
.em-sg-name { flex: 1; font-size: 13px; color: var(--ink); }
.em-sg-add { font-weight: 700; }

.em-participant-list-head { font-size: 12px; color: var(--ink-muted); margin: 8px 0; }
.em-participant-table { width: 100%; border-collapse: collapse; }
.em-participant-table td { padding: 5px 4px; font-size: 13px; border-bottom: 1px solid var(--line-soft); }
.em-pt-add a { color: var(--pollinate-blue); text-decoration: none; font-weight: 700; }
.em-pt-add a:hover { color: var(--pollinate-magenta); }
.em-pt-name { color: var(--ink); }
.em-pt-email { color: var(--ink-muted); font-size: 12px; }

/* --- Composer --- */
.em-composer { border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow-card); padding: 18px; }
.em-composer-notice { background: #eef5fb; border: 1px solid #cfe2f2; color: #2c5777; font-size: 13px; padding: 8px 12px; border-radius: 6px; margin-bottom: 16px; }
.em-form-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.em-form-row-full { display: block; }
.em-field { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 5px; }
.em-field label, .em-field-inline label { font-size: 13px; color: var(--ink); }
.em-field-inline { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.em-field-inline label { padding-top: 7px; min-width: 56px; }
.em-select, .em-input, .em-datetime input { padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px; font-size: 13px; color: var(--ink); background: #fff; width: 100%; }
.em-datetime { position: relative; flex: 1; }
.em-datetime i { position: absolute; right: 10px; top: 9px; color: var(--ink-muted); pointer-events: none; }

.em-to-chips { flex: 1; min-height: 38px; border: 1px dashed var(--line); border-radius: 5px; padding: 8px 10px; background: #fafafa; }
.em-chip-empty { font-size: 12.5px; color: var(--ink-muted); }

.em-tags-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 14px; }
.em-tags-label { font-size: 12.5px; color: var(--ink-muted); }
.em-tag-chip { font-size: 12px; font-family: 'Courier New', monospace; color: var(--pollinate-magenta); background: #faf0f5; border: 1px solid #e7c7d8; border-radius: 14px; padding: 3px 11px; cursor: pointer; }
.em-tag-chip:hover { background: #f3dde9; }

.em-body-wrap { margin-bottom: 16px; }
.em-body { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 11px; font-size: 13.5px; color: var(--ink); resize: vertical; font-family: 'Open Sans', sans-serif; }

.em-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Log tables (Email Log / Note Log) --- */
.em-log-meta { font-size: 13px; color: var(--ink-muted); margin-bottom: 10px; }
.em-log-table { width: 100%; border-collapse: collapse; font-size: 12.5px; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-card); background: #fff; }
.em-log-table thead th { background: #e1ecf3; color: #424242; font-weight: 700; text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--line); white-space: nowrap; }
.em-log-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.em-log-table tbody tr:nth-child(even) { background: #FBFCFD; }
.em-log-td-delete a, .nt-log-td-edit a { color: var(--ink-muted); text-decoration: none; }
.em-log-td-delete a:hover { color: var(--pollinate-magenta); }
.nt-log-td-edit a:hover { color: var(--pollinate-blue); }
.em-log-td-from, .em-log-td-replyto { color: var(--ink-muted); }

/* --- Notes: visibility controls --- */
.nt-visibility-radios { display: flex; gap: 16px; padding-top: 4px; }
.nt-radio { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); cursor: pointer; }
.nt-vis-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 12px; white-space: nowrap; }
.nt-vis-display { background: #eaf3e1; color: #4f6f2e; }
.nt-vis-hide { background: #f3e1ea; color: #8a2057; }

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

/* ============================================================
   Dashboard — Program Details tabbed grid (matches PLAT5)
   ============================================================ */
.db-tabbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-bottom: 2px solid var(--line); }
.db-tabs { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.db-tab { display: block; padding: 9px 18px; text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 600; color: var(--ink-muted); border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; }
.db-tab:hover { color: var(--pollinate-blue); }
.db-tab.active-tab { color: #000; background: #fff; border-color: var(--line); border-bottom: 2px solid #fff; margin-bottom: -2px; }
.db-export { white-space: nowrap; margin-bottom: 6px; }
.db-pane { padding-top: 14px; }
.db-grid { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--ink); }
.db-grid thead th { background: #E1ECF3; color: #424242; text-align: left; font-weight: 700; padding: 9px 12px; border-bottom: 2px solid var(--line); cursor: pointer; }
.db-grid tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.db-grid tbody tr:nth-child(even):not(.db-detail-row) { background: #FBFCFD; }
.db-col-num { text-align: center; width: 130px; }
.db-grid thead th.db-col-num { text-align: center; }
.db-col-expand { width: 34px; text-align: center; }
.db-col-img { width: 90px; }
.db-row-expandable { cursor: pointer; }
.db-row-expandable:hover { background: #F2F7FB !important; }
.db-chevron { color: var(--ink-muted); transition: transform .15s ease; }
.db-chevron.open { transform: rotate(90deg); }
.db-detail-row > td { background: #F7FAFC; padding: 0 12px 10px 12px; }
.db-detail-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 6px 0; }
.db-detail-table th { text-align: left; font-weight: 600; color: var(--ink-muted); padding: 6px 10px; border-bottom: 1px solid var(--line-soft); }
.db-detail-table td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); }
.db-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.db-avatar-fallback { display: flex; align-items: center; justify-content: center; background: var(--pollinate-green); color: #fff; font-size: 13px; font-weight: 600; }

/* Item 167 — faux file picker (demo opens a popup instead of the OS dialog) */
.imp-filepick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 480px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  padding: 6px 8px;
  cursor: pointer;
}
.imp-filepick-btn {
  background: #ECECEC;
  border: 1px solid #C4C4C4;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 13px;
  color: #333;
  white-space: nowrap;
}
.imp-filepick:hover .imp-filepick-btn { background: #E0E0E0; }
.imp-filepick-name { font-size: 13px; color: var(--ink-muted); }

/* ============================================================
   Note: popup (replaces native browser alert)
   ============================================================ */
.plat-note-pop {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(20,32,44,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.plat-note-box {
  background: #fff; border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  max-width: 440px; width: 100%; overflow: hidden;
  border-top: 4px solid var(--pollinate-magenta);
}
.plat-note-head { font-weight: 700; font-size: 15px; color: var(--pollinate-magenta); padding: 16px 22px 4px; }
.plat-note-body { padding: 4px 22px 18px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.plat-note-actions { display: flex; justify-content: flex-end; padding: 0 18px 16px; }
.plat-note-ok {
  background: var(--pollinate-green); color: #fff; border: none; border-radius: 999px;
  padding: 8px 26px; font-weight: 600; font-size: 14px; font-family: inherit; cursor: pointer;
}
.plat-note-ok:hover { filter: brightness(.95); }

/* ============================================================
   Note Log (participant view)
   ============================================================ */
.nl-topbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.nl-back { text-decoration: none; }
.nl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.nl-table thead th {
  background: #E1ECF3; color: var(--ink); font-weight: 700; text-align: center;
  padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.nl-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.nl-table td.nl-c { text-align: center; white-space: nowrap; }
.nl-table td.nl-note { white-space: normal; line-height: 1.45; color: var(--ink); }
.nl-table tbody tr:nth-child(even) { background: #FAFBFC; }
.nl-icon-btn { color: var(--pollinate-blue); cursor: pointer; }
.nl-title { font-weight: 600; }

/* ============================================================
   Add a Note (participant view)
   ============================================================ */
.an-grid { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.an-search { width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; font-family: inherit; font-size: 14px; margin-bottom: 12px; }
.an-plist { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.an-plist-head { background: #E1ECF3; padding: 10px 12px; font-size: 12.5px; line-height: 1.4; }
.an-prow { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.an-add { color: var(--pollinate-green); cursor: pointer; }
.an-intro { font-size: 13.5px; color: var(--ink-muted); margin-bottom: 14px; }
.an-field { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.an-label { width: 56px; font-weight: 700; font-size: 14px; }
.an-input { flex: 1; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; font-family: inherit; font-size: 14px; }
.an-badge { display: inline-flex; align-items: center; gap: 8px; background: #6c757d; color: #fff; border-radius: 6px; padding: 5px 10px; font-size: 13px; }
.an-badge i { cursor: pointer; }
.an-editor { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.an-toolbar { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); background: #FAFBFC; }
.an-tool { width: 30px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--ink); cursor: pointer; border-radius: 4px; }
.an-tool:hover { background: #eef1f4; }
.an-body { min-height: 180px; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.an-actions { margin-top: 16px; display: flex; gap: 8px; }