/* Home on the GROW member portal (public/portal-home.js).

   The owner's mockup is the layout and the paint: the greeting, the two
   columns (one under 900px, from styles.css), white cards with their 1px
   lines and 18px corners, the light blue Events card with the GROW
   character, pill buttons and the four status colours. What is here is
   only what the mockup has no rule for: the application's steps, the
   engagement email's answer, the opportunity rows and small text. Colours
   come only from the palette in portal.css, as var(--p-...): see the note
   there. */

/* ---------- shared within Home ---------- */
.home-text { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--p-ink); }
.home-small { display: block; font-size: 13px; line-height: 18px; color: var(--p-muted); }
.home-term {
  display: block; margin-bottom: 2px; font-size: 11px; line-height: 16px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--p-muted);
}
.home-ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.92em; }
.home-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
/* Their tier, as a pill under the greeting (portal.css .portal-tier). */
.home-tier { margin: 8px 0 0; }
.home-counts { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--p-sep); }
.home-grid .portal-card-head { flex-wrap: wrap; }
.home-grid .portal-card-head .portal-pill { margin-left: auto; }
.home-grid .portal-row-main { gap: 2px; }
/* A row's pill sits beside its words while there is room for both, and
   goes under them when there is not (the side column, a phone). */
.home-grid .portal-row { flex-wrap: wrap; }
.home-grid .portal-row > .portal-row-main { flex: 1 1 220px; }
/* A long firm or event name wraps rather than pushing the pill off a phone. */
.home-grid .portal-row-title, .home-grid .portal-row-sub { overflow-wrap: anywhere; }

/* A heading or an answer given the focus by the page, once the button just
   pressed has gone (portal-home.js focusIn), is words, not a control: no
   ring, as the page itself has none (portal.css .portal-main:focus). */
.home-grid .portal-card-title[tabindex="-1"]:focus, .home-offer[tabindex="-1"]:focus { outline: none; }

/* ---------- the engagement email ---------- */
.home-action .portal-card-head { border-bottom-color: var(--p-sky-line); }
.home-offer + .home-offer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--p-sky-line); }
.home-place .home-offer + .home-offer { border-top-color: var(--p-sep); }
.home-offer .portal-row { padding-bottom: 4px; }
/* The expectations as the team sent them, on white so they read easily. */
.home-message {
  margin: 14px 0 0; padding: 14px 18px; border-radius: 14px; background: #fff;
  font-size: 15px; line-height: 1.55; color: var(--p-ink); max-height: 360px; overflow-y: auto;
}
.home-message p { margin: 0 0 10px; }
.home-message ul { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; }
.home-message > :last-child { margin-bottom: 0; }
.home-note { margin-top: 14px; }
.home-action .portal-field span { color: var(--p-sky-ink); }
.home-note textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 84px; }
.home-answers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.home-answers .portal-pill { min-height: 40px; padding: 0 18px; font-size: 14px; }
/* A finger, on any screen: the portal's 44px (this rule outranks
   portal.css's own). */
@media (pointer: coarse) {
  .home-answers .portal-pill { min-height: 44px; }
}
.home-action .portal-pill-quiet { color: var(--p-sky-ink); }
.home-action .portal-pill-quiet:hover { color: var(--p-ink); text-decoration: underline; }
.home-quote {
  margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--p-blue); border-radius: 0 10px 10px 0;
  background: var(--p-bg); font-size: 14.5px; line-height: 1.5; color: var(--p-ink); white-space: pre-line;
}
.home-action .home-quote { background: #fff; }

/* ---------- sharing their progress with their mentor ---------- */
/* An invitation, not a task: a white card edged in GROW blue, the words of
   the choice on the pale wash, as the account keeps them. */
.home-share { border-color: var(--p-blue); }
.home-share .portal-card-title[tabindex="-1"]:focus { outline: none; }
.home-share-words { padding: 12px 16px; border-radius: 14px; background: var(--p-wash); }
.home-share-note { margin-top: 10px; }

/* ---------- their mentoring application ---------- */
.home-app { padding: 4px 0 16px; }
.home-app + .home-app { padding-top: 14px; }
.home-app:last-child { padding-bottom: 2px; }
/* The four steps, the one they are at in GROW blue. */
.home-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  margin: 10px 0 4px; padding: 0; list-style: none;
}
.home-step {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; font-size: 12.75px; line-height: 16px; color: var(--p-muted);
}
.home-step::before {
  content: ""; position: absolute; top: 8px; left: -50%; right: 50%; height: 2px; background: var(--p-sep);
}
.home-step:first-child::before { display: none; }
.home-step.is-done::before, .home-step.is-current::before { background: var(--p-blue); }
.home-step-dot {
  position: relative; z-index: 1; width: 18px; height: 18px; box-sizing: border-box;
  border: 2px solid var(--p-box); border-radius: 50%; background: #fff;
}
.home-step.is-done .home-step-dot { background: var(--p-blue); border-color: var(--p-blue); }
.home-step.is-done .home-step-dot::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.home-step.is-current { color: var(--p-blue); }
.home-step.is-current .home-step-dot { border-color: var(--p-blue); background: var(--p-blue); box-shadow: 0 0 0 4px var(--p-blue-pale); }
.home-pairing, .home-keyinfo { display: grid; gap: 8px 18px; margin: 12px 0 0; }
.home-pairing { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); padding: 12px 16px; border-radius: 14px; background: var(--p-bg); }
.home-pairing dt, .home-keyinfo dt { font-size: 11px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-muted); }
.home-pairing dd, .home-keyinfo dd { margin: 0; font-size: 15px; line-height: 1.4; color: var(--p-ink); overflow-wrap: anywhere; }
.home-keyinfo { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.home-details { margin-top: 12px; border-top: 1px solid var(--p-sep); }
.home-details summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px;
  list-style: none; cursor: pointer; font-size: 15px; color: var(--p-blue);
}
.home-details summary::-webkit-details-marker { display: none; }
.home-details summary::after { content: "+"; font-size: 20px; line-height: 1; }
.home-details[open] summary::after { content: "\2212"; }
.home-details summary:focus-visible { outline: 2px solid var(--p-blue); outline-offset: 2px; border-radius: 4px; }
.home-details .home-small { margin-top: 12px; }

/* No sign-up yet: the way in, and the box for an access code. */
.home-code { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin: 16px 0 0; }
.home-code .portal-field { flex: 1 1 260px; min-width: 0; }
/* 44px, the portal's tap target: these rules come after portal.css's
   phone rule and outrank it, so they must say 44px themselves. */
.home-code .portal-field input { width: 100%; box-sizing: border-box; min-height: 44px; }
.home-code > .portal-pill { min-height: 44px; }
.home-code .portal-error { flex-basis: 100%; margin-top: 0; }
.home-application > .home-small { margin-top: 12px; }

/* ---------- their tracker, and partners' opportunities ---------- */
.home-when { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; text-align: right; }
.home-opp { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; padding: 12px 0 11px; }
.home-opp .portal-row-main { flex: 1 1 auto; }
.home-opp .home-small { margin-top: 2px; }
.home-opp-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; max-width: 52%; }
.home-opp-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.home-opp-actions .portal-pill-quiet { padding: 0 6px; color: var(--p-blue); white-space: normal; text-align: right; line-height: 1.3; }
.home-opp-actions .portal-pill-quiet:hover { color: var(--p-blue-dark); text-decoration: underline; }
.home-tracked .portal-status, .home-signed .portal-status { display: inline-flex; align-items: center; min-height: 26px; }

/* ---------- GROW's events, and their sign-ups ---------- */
.home-events { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.home-events .portal-card-title { align-self: stretch; }
.home-events .portal-event-list { align-self: stretch; margin-bottom: 16px; }
.home-events .portal-event-list > li { gap: 2px; }
.home-event-action { margin-top: 8px; }
/* An event's name goes to its form while there is a sign-up to make. */
.home-event-link { color: inherit; text-decoration: none; }
.home-event-link:hover { color: var(--p-blue); text-decoration: underline; text-underline-offset: 3px; }
.home-event-link:focus-visible { outline: 2px solid var(--p-blue); outline-offset: 2px; border-radius: 4px; }
/* A finger: the name is a press target of its own, 44px tall. */
@media (pointer: coarse), (max-width: 760px) {
  .home-event-link { display: inline-flex; align-items: center; min-height: 44px; }
}
.home-event-new { margin-bottom: 4px; }
.home-event-blurb { margin-top: 4px; font-size: 13.5px; line-height: 19px; color: var(--p-sky-ink); overflow-wrap: anywhere; }
.home-events > .portal-pill-white { margin-bottom: 0; }

/* Just announced: an event a press from its form, at the top of Home. */
.home-fresh { border-color: var(--p-blue); box-shadow: 0 6px 22px var(--p-shadow); }
.home-fresh-row { align-items: center; }
.home-fresh-blurb { margin-top: 2px; overflow-wrap: anywhere; }
.home-fresh-row > .portal-pill { min-height: 40px; padding: 0 20px; font-size: 14px; }
/* A finger, on any screen: 44px (this rule outranks portal.css's own). */
@media (pointer: coarse) {
  .home-fresh-row > .portal-pill { min-height: 44px; }
}
.home-events-empty {
  align-self: stretch; margin: 0 0 16px; padding: 12px 0 0; border-top: 1px solid var(--p-sky-line);
  font-size: 14.5px; line-height: 1.5; color: var(--p-sky-ink);
}
.home-signup { align-items: flex-start; row-gap: 8px; }
.home-signup .portal-status { white-space: normal; }

/* ---------- partners' emails ---------- */
.home-optin { margin-top: 6px; }
.home-emails .home-small { margin-top: 2px; }

/* ---------- a phone ---------- */
@media (max-width: 760px) {
  /* The pill and the buttons go under the name, all at full width. */
  .home-opp { flex-direction: column; align-items: stretch; }
  .home-opp-side { max-width: none; align-items: flex-start; }
  .home-opp-actions { justify-content: flex-start; align-items: center; }
  .home-opp-actions .portal-pill-quiet { text-align: left; }
  /* A deadline under its firm: the pill, then the day beside it. */
  .home-grid .portal-row { row-gap: 8px; }
  .home-when { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; text-align: left; }
  .home-answers .portal-pill { flex: 1 1 100%; min-height: 44px; }
  .home-fresh-row > .portal-pill { min-height: 44px; }
  .home-note textarea { font-size: 16px; }
  .home-message { padding: 12px 14px; }
  .home-step { font-size: 12px; }
}