/* The GROW member portal (/portal): the mentees' and mentors' own area of the site.

   It looks like GROW, exactly as the owner's mockup of the portal does.
   The top bar, the wordmark,
   the nav with its blue underline, the cards, the pills, the status pills,
   the Georgia greeting and the light blue card with the GROW character are
   that preview's own rules in /styles.css, from the comment
   "GROW Member Portal (once Mentee Demo)", used here as they are, so the
   portal and the preview cannot drift apart. This file adds the palette, defined once for the
   whole page, the page itself (the sign-in screen, the account menu, the
   toast) and what the preview has no need of.

   Every member-facing stylesheet (this one, portal-*.css, and the engage
   and unsubscribe pages' own) takes its colours from the palette below as
   var(--p-...) and writes none of its own: test/portal-colours.test.js
   fails on any other colour, and on any font but Jost (Georgia for the
   big greeting and dialog titles, monospace for codes). */

:root {
  --p-blue: #096ad3;
  --p-blue-dark: #0857ab;
  --p-blue-pale: #dbeeff;
  --p-wash: #f2f8ff;
  --p-hover: #eef6ff;
  --p-bg: #f6fafd;
  --p-line: #e3e8ec;
  --p-sep: #eef1f4;
  --p-ink: #14202b;
  --p-muted: #5c6b78;
  --p-box: #b9c2ca;
  --p-sky: #bfe8fa;
  --p-sky-line: rgba(9, 106, 211, 0.16);
  --p-shadow: rgba(9, 106, 211, 0.10);
  --p-orange: #fc9e49;
  --p-orange-ink: #4a2200;
  --p-lilac: #cbb5da;
  --p-lilac-ink: #3a2a4a;
  --p-green: #acd986;
  --p-green-ink: #1f3a0e;
  --p-sky-ink: #073b75;
  --p-good: #3c7a12;
  --p-danger: #b3261e;
  --p-danger-pale: #fdecea;
  --p-note: #fff3c4;
  --p-note-ink: #6b4e00;

  /* styles.css's own base (fields, [hidden], the Google button's holder)
     reads these names for its colours: on this page they are the
     portal's. */
  --blue: var(--p-blue);
  --blue-dark: var(--p-blue-dark);
  --blue-pale: var(--p-blue-pale);
  --blue-wash: var(--p-wash);
  --ink: var(--p-ink);
  --muted: var(--p-muted);
  --line: var(--p-line);
  --danger: var(--p-danger);
}

/* The page behind everything: the portal's pale blue, and the sign-in
   screen's wash. Nothing on the page may push
   it sideways on a phone; a long word wraps instead. */
body.portal-body { background: var(--p-bg); color: var(--p-ink); overflow-x: clip; overflow-wrap: break-word; }
body.portal-body.is-signed-out { background: var(--p-wash); }
:where(.portal-body) a { color: var(--p-blue); }
:where(.portal-body) a:hover { color: var(--p-blue-dark); }
.portal-body :focus-visible { outline: 2px solid var(--p-blue); outline-offset: 2px; }
.portal-body button, .portal-body input, .portal-body select, .portal-body textarea { font-family: inherit; }

/* For a screen reader only. */
.portal-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.portal-skip {
  position: absolute; left: 16px; top: -80px; z-index: 70; padding: 12px 18px; border-radius: 999px;
  background: #fff; color: var(--p-blue); border: 1px solid var(--p-blue); text-decoration: none;
}
.portal-skip:focus { top: 12px; }

.portal-loading { min-height: 70vh; display: flex; align-items: center; justify-content: center; color: var(--p-muted); }

/* ---------- signed out: the sign-in card ---------- */
.portal-signin { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.portal-signin-card {
  position: relative; width: 100%; max-width: 440px; text-align: center; background: #fff;
  border: 1px solid var(--p-line); border-radius: 24px; padding: 40px 36px 100px;
  box-shadow: 0 12px 40px var(--p-shadow);
}
.portal-signin-card .portal-brand { align-items: center; margin: 0 0 22px; }
.portal-signin-card .portal-hello { font-size: 32px; }
.portal-signin-lede { color: var(--p-muted); font-size: 15.5px; line-height: 22px; margin: 8px 0 22px; }
.portal-signin .google-btn-holder { min-height: 44px; }
.portal-signin-note { color: var(--p-muted); font-size: 13.5px; line-height: 20px; margin: 14px 0 0; text-align: left; }
.portal-signin-foot { color: var(--p-muted); font-size: 13.5px; line-height: 20px; margin: 18px 0 0; text-align: left; }
.portal-signin-card .portal-character { right: 28px; bottom: 22px; }

/* The box to agree to partners' emails: unticked until they tick it, the
   whole row a target. */
.portal-optin {
  display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; margin: 14px 0 0;
  text-align: left; font-size: 14px; line-height: 20px; color: var(--p-ink); cursor: pointer;
}
.portal-optin input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--p-blue); }

/* Test mode's sign-in (DEV_LOGIN alone): any email, beside the box. */
.portal-dev { display: flex; gap: 8px; margin: 14px 0 0; }
.portal-dev input { flex: 1 1 auto; min-width: 0; min-height: 44px; }

/* Member sign in, under Google: "or" between them with a rule either
   side, then the heading, the two fields the card's width and Sign in
   beneath them, then the smaller way back in for someone who has signed in
   before, a link that opens a form of its own. */
.portal-or {
  display: flex; align-items: center; gap: 14px; margin: 26px 0 18px;
  color: var(--p-muted); font-size: 13px; line-height: 20px; letter-spacing: 0.08em; text-transform: uppercase;
}
.portal-or::before, .portal-or::after { content: ""; flex: 1 1 0; height: 1px; background: var(--p-line); }
.portal-member-signin { margin: 22px 0 0; text-align: left; }
.portal-or:not([hidden]) + .portal-member-signin { margin-top: 0; }
.portal-member-title { margin: 0; font-size: 19px; font-weight: 400; line-height: 1.4; color: var(--p-ink); }
.portal-member-lede { margin: 4px 0 16px; color: var(--p-muted); font-size: 14px; line-height: 20px; }
.portal-member-form { display: flex; flex-direction: column; gap: 12px; }
.portal-member-form .portal-field input { width: 100%; min-height: 44px; box-sizing: border-box; }
.portal-member-form .portal-error { margin: 0; }
.portal-member-form > .portal-pill { min-height: 44px; font-size: 15px; }
.portal-member-form > .portal-pill-solid { width: 100%; }
.portal-member-form > .portal-pill-outline { align-self: flex-start; padding: 0 20px; }
/* The whole code fits in its box, placeholder and all, on a 360px phone. */
.portal-code-input::placeholder { letter-spacing: 0; }
.portal-link-toggle {
  display: inline-flex; align-items: center; min-height: 44px; margin: 8px 0 0; padding: 0;
  border: 0; background: none; color: var(--p-blue); font-size: 14px; line-height: 20px; text-align: left;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.portal-link-toggle:hover { color: var(--p-blue-dark); }
.portal-link-form { margin: 4px 0 0; }
.portal-link-sent {
  margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--p-wash); color: var(--p-ink);
  font-size: 14px; line-height: 20px;
}

/* A message on the sign-in card (signed out, account deleted), and an
   error anywhere. */
.portal-notice {
  background: var(--p-note); color: var(--p-note-ink); border-radius: 10px; padding: 10px 14px;
  margin: 0 0 18px; text-align: left; font-size: 14px; line-height: 20px;
}
.portal-error { color: var(--p-danger); font-size: 14px; line-height: 20px; margin: 12px 0 0; text-align: left; }
.portal-error-card { background: var(--p-danger-pale); border-color: var(--p-danger-pale); color: var(--p-danger); }

/* ---------- signed in: the top bar ---------- */
/* The bar runs the width of the window; what is in it lines up with the
   page's column, which stops at the preview's 1240px. */
.portal-body .portal-top {
  position: relative; z-index: 10;
  padding-left: max(40px, calc((100% - 1160px) / 2)); padding-right: max(40px, calc((100% - 1160px) / 2));
}
a.portal-brand { text-decoration: none; min-height: 44px; justify-content: center; }
a.portal-nav-item { display: inline-flex; align-items: center; text-decoration: none; }
/* Inside the bar, as the preview has it: on a phone the tabs scroll
   sideways, and a ring drawn outside a tab would be cut off. */
.portal-body .portal-nav-item:focus-visible { outline-offset: -2px; }
.portal-body .portal-main { max-width: 1240px; margin: 0 auto; padding-bottom: 8px; }
.portal-body .portal-main:focus { outline: none; }

/* The person's initial opens their account menu: the preview's 34px
   avatar inside a 44px button. */
.portal-account { position: relative; flex: none; }
.portal-account-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
}
.portal-account-btn:hover .portal-avatar, .portal-account-btn[aria-expanded="true"] .portal-avatar { box-shadow: 0 0 0 2px var(--p-blue); }
.portal-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(320px, calc(100vw - 32px));
  padding: 8px; background: #fff; border: 1px solid var(--p-line); border-radius: 14px;
  box-shadow: 0 12px 40px var(--p-shadow); text-align: left;
}
.portal-menu-who { padding: 10px 12px 12px; margin: 0 0 6px; border-bottom: 1px solid var(--p-sep); }
.portal-menu-name { display: block; font-size: 15.5px; color: var(--p-ink); overflow-wrap: anywhere; }
/* Their tier under their name: GROW member, GROW mentee or GROW mentor. */
.portal-menu-tier { display: block; margin: 2px 0; font-size: 13px; color: var(--p-blue-dark); }
.portal-menu-tier:empty { display: none; }

/* A GROW mentee's star, on the edge of their initial. */
.portal-account-btn { position: relative; }
.portal-star {
  position: absolute; right: 0; bottom: 1px; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--p-orange); color: var(--p-orange-ink); font-size: 11px; line-height: 1; box-shadow: 0 0 0 2px #fff;
}
.portal-star[hidden] { display: none; }

/* The same words as a pill, on Home's greeting: a GROW mentee's in the
   orange of their star, a mentor's sky, a member's neutral. */
.portal-tier {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px;
  font-size: 12.75px; line-height: 16px; white-space: nowrap;
}
.portal-tier-mentee { background: var(--p-orange); color: var(--p-orange-ink); }
.portal-tier-mentor { background: var(--p-sky); color: var(--p-sky-ink); }
.portal-tier-community { background: var(--p-sep); color: var(--p-muted); }
.portal-menu-email { display: block; font-size: 13px; color: var(--p-muted); overflow-wrap: anywhere; }
.portal-menu-label { display: block; padding: 8px 12px 0; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-muted); }
.portal-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 8px 12px;
  border: 0; border-radius: 10px; background: none; color: var(--p-ink); font-size: 15px; line-height: 20px;
  text-align: left; text-decoration: none; cursor: pointer;
}
:where(.portal-body) a.portal-menu-item { color: var(--p-ink); }
.portal-menu-item:hover { background: var(--p-hover); color: var(--p-ink); }
.portal-menu-pref { align-items: flex-start; font-size: 14px; }
.portal-menu-pref input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--p-blue); }
.portal-menu-danger, :where(.portal-body) a.portal-menu-danger { color: var(--p-danger); }
.portal-menu-danger:hover { background: var(--p-danger-pale); color: var(--p-danger); }
.portal-menu-sep { height: 1px; margin: 6px 0; background: var(--p-sep); }

/* ---------- the page ---------- */
/* Shown while a tab is on its way, and a tab that could not be shown. */
.portal-tab-loading { padding: 24px 0; color: var(--p-muted); }
.portal-tab-failed { margin-top: 27px; max-width: 720px; }

/* Status pills in the mockup's four colours, and the two quieter ones,
   for every tab: Received, Planning and Opens soon are lilac; Accepted,
   Writing and Closes soon orange; Paired, Submitted and Rolling sky; Place
   confirmed, Offer and Open green; anything over neutral. */
.portal-status-lilac { background: var(--p-lilac); color: var(--p-lilac-ink); }
.portal-status-orange { background: var(--p-orange); color: var(--p-orange-ink); }
.portal-status-sky { background: var(--p-sky); color: var(--p-sky-ink); }
.portal-status-green { background: var(--p-green); color: var(--p-green-ink); }
.portal-status-neutral { background: var(--p-sep); color: var(--p-muted); }
.portal-status-note { background: var(--p-note); color: var(--p-note-ink); }

/* Words on the light blue cards (Events, Action needed, How it works) and
   the initial on its light blue circle. The preview's GROW blue on light
   blue is 4.0:1 and its muted grey 4.2:1, under the 4.5:1 small text needs,
   so on the member portal (a live page every member reads) the blue is
   the darker blue (5.5:1) and the grey the ink for text on light blue
   (8.5:1). */
.portal-body .portal-events .portal-card-title,
.portal-body .portal-card-sky .portal-card-title,
.portal-body .portal-event-when,
.portal-body .portal-avatar { color: var(--p-blue-dark); }
.portal-body .portal-card-sky .portal-row-sub,
.portal-body .portal-events .portal-row-sub { color: var(--p-sky-ink); }

/* A part of the portal still being built. */
.portal-soon-card { margin-top: 27px; max-width: 720px; padding-bottom: 92px; }
.portal-soon-card p { margin: 14px 0 0; font-size: 15.5px; line-height: 22px; color: var(--p-muted); }

/* The footer under every tab, with the privacy notice. */
.portal-body .portal-footer { max-width: 1240px; margin: 0 auto; }
.portal-footer a { color: var(--p-muted); }
.portal-footer a:hover { color: var(--p-ink); }

/* ---------- dialogs and the toast ---------- */
.portal-body .portal-dialog {
  border: 1px solid var(--p-line); padding: 24px 28px; background: #fff; box-shadow: 0 20px 60px var(--p-shadow);
}
.portal-body .portal-dialog::backdrop { background: var(--p-ink); opacity: 0.35; }
.portal-dialog .portal-field input { width: 100%; }
.portal-code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.portal-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  width: max-content; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 12px;
  background: var(--p-ink); color: #fff; font-size: 15px; line-height: 1.4; box-shadow: 0 12px 40px var(--p-shadow);
}
.portal-toast.is-error { background: var(--p-danger); }

/* A narrow laptop, or a tablet held upright: a mentee's six tabs or a
   mentor's seven sit closer together, and any that still do not fit
   between the wordmark and the initial scroll sideways inside the bar, as
   on a phone, rather than push the initial off the page. */
@media (min-width: 761px) and (max-width: 1000px) {
  .portal-body .portal-top { gap: 20px; padding-left: 24px; padding-right: 24px; }
  .portal-body .portal-nav {
    gap: 24px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .portal-body .portal-nav::-webkit-scrollbar { display: none; }
}

/* ---------- a phone, or a finger ---------- */
/* Every pill a thumb can press is 44px tall, wherever a finger is used. */
@media (max-width: 760px), (pointer: coarse) {
  .portal-body .portal-pill { min-height: 44px; }
}
@media (max-width: 760px) {
  /* The preview's phone bar: the wordmark and the initial, then the tabs
     scrolling sideways inside it. */
  .portal-body .portal-top { padding: 14px 16px 0; }
  .portal-body .portal-account { grid-area: avatar; }
  /* While a form must be filled in first, the bar holds the wordmark and
     the initial alone, with no row of tabs beneath them. */
  .portal-body.is-gated .portal-top { grid-template-areas: "brand avatar"; padding-bottom: 14px; }
  /* The tab shown is scrolled into view inside the bar (portal.js
     revealTab), landing clear of the bar's 16px gutter, not on its edge. */
  .portal-body .portal-nav { scroll-padding-inline: 16px; }
  .portal-signin { padding: 16px; align-items: flex-start; }
  .portal-signin-card { padding: 32px 20px 96px; }
  .portal-signin-card .portal-hello { font-size: 28px; }
  /* iOS zooms the page into a field under 16px. */
  .portal-dialog .portal-field input { font-size: 16px; }
  .portal-body .portal-dialog { padding: 20px 18px; }
  .portal-toast { bottom: 16px; }
}