/* Mentoring on the GROW member portal: the mentor's tabs
   (public/portal-mentor.js) and the mentee's Mentoring tab
   (public/portal-mentoring.js).

   The look is the portal's shared rules in styles.css, used as they are:
   the cards, the catch-up rows and their notes, the to-dos, the term
   cards, the status selects, the resources and the FAQs. What is here is
   what those have no rule for (removing a row, the sharing switch, a
   mentee's progress, a pairing not yet shown to be theirs), and what
   these pages need besides: room between sections, long words wrapping,
   and 44px targets for a finger. Colours come only from the palette in
   portal.css, as var(--p-...): see the note there. */

/* ---------- shared ---------- */
.gm-text { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--p-ink); }
.mentor-actions { margin: 14px 0 0; }
.mentor-own-sharing .gm-text { margin-top: 0; }
.gm-small { display: block; margin: 8px 0 0; font-size: 13px; line-height: 18px; color: var(--p-muted); }
.gm-stack { display: flex; flex-direction: column; gap: 22px; margin-top: 27px; max-width: 760px; }
.gm-section { margin-top: 44px; }
.gm-section-title {
  margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 26px; line-height: 1.25; color: var(--p-ink);
}
.gm-section > .portal-grid { margin-top: 22px; }
.gm-section > .portal-terms { margin-top: 22px; }

/* A page head: the words take the room, and the button keeps to the right
   until there is none. */
.portal-body .portal-page-head > div { flex: 1 1 320px; min-width: 0; }
.portal-body .portal-page-head .portal-lede { overflow-wrap: anywhere; }

/* A long name or objective wraps rather than pushing its pill off a phone. */
:is(.portal-tab-mentoring, .portal-tab-dashboard, .portal-tab-mentee, .portal-tab-catchups, .portal-tab-objectives)
  :is(.portal-row-title, .portal-row-sub, .portal-row-text, .portal-todo-text) { overflow-wrap: anywhere; }

/* Waiting to be introduced: the words, with the GROW character beside. */
.gm-waiting { padding-bottom: 92px; }
.gm-waiting .gm-text { margin-top: 0; max-width: 620px; }

/* A pairing not yet shown to be theirs: a calm card, its words first. */
.gm-unproven .gm-text { margin-top: 0; max-width: 620px; }
.gm-unproven .gm-small { max-width: 620px; }
.gm-unproven a { color: var(--p-blue); }

/* ---------- the little forms ---------- */
/* Schedule a catch-up and + Add objective sit under the page head; their
   note and any error take a line of their own. */
.gm-schedule-form .portal-field { flex: 0 1 190px; min-width: 0; }
.gm-schedule-form .portal-field input, .gm-schedule-form .portal-field select { width: 100%; }
.gm-form-note { flex-basis: 100%; margin: 2px 0 0; }
.gm-form-error { flex-basis: 100%; margin: 2px 0 0; }

/* ---------- catch-ups ---------- */
/* Its notes button and the way to remove it, side by side. */
.gm-row-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.portal-row-noted > .gm-row-actions { grid-area: button; }
.gm-catch-up .portal-row-main { flex: 1 1 auto; }

/* Remove: a quiet cross, red only under the pointer. */
.gm-remove {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px;
  margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--p-muted); cursor: pointer;
}
.gm-remove:hover { background: var(--p-danger-pale); color: var(--p-danger); }
.gm-remove:focus-visible { outline: 2px solid var(--p-blue); outline-offset: 2px; }
.gm-remove svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.gm-remove:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- objectives ---------- */
.portal-body .portal-objective { gap: 10px; }
.portal-body .portal-objective .portal-row-text { flex: 1 1 auto; min-width: 0; }
.gm-objective-side { display: flex; align-items: center; gap: 2px; flex: none; }
.portal-status-select:disabled { opacity: 0.7; cursor: progress; }
/* The dashboard's list of a pair's objectives. */
.gm-objective-rows .portal-row { padding: 11px 0 10px; }
.gm-objective-rows .portal-row-main { gap: 2px; }
.portal-empty a { color: var(--p-blue); }

/* ---------- the notes dialog ---------- */
.gm-notes-dialog .portal-dialog-sub { overflow-wrap: anywhere; }
.gm-notes-dialog textarea { box-sizing: border-box; }
.gm-dialog-error { margin: 0 0 14px; }
/* Their own words, kept beneath after the other person changed the same
   box: set apart, to copy from. */
.gm-notes-mine { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--p-bg); }
.gm-notes-mine .gm-small { margin: 0; }
.gm-notes-mine .portal-notes { margin-top: 4px; }

/* ---------- the mentee's choice to share their progress ---------- */
/* A switch: the box is the track's own size and on top of it, so a press
   on the track is a press on the box, and the whole row is the target. */
.gm-switch {
  position: relative; display: flex; align-items: flex-start; gap: 14px; min-height: 44px; padding: 14px 0 4px;
  cursor: pointer; font-size: 15px; line-height: 1.5; color: var(--p-ink);
}
.gm-switch input { position: absolute; left: 0; top: 14px; width: 44px; height: 26px; margin: 0; opacity: 0; cursor: pointer; }
.gm-switch-track {
  position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--p-box); transition: background 0.15s;
}
.gm-switch-track::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px var(--p-shadow); transition: transform 0.15s;
}
.gm-switch input:checked + .gm-switch-track { background: var(--p-blue); }
.gm-switch input:checked + .gm-switch-track::after { transform: translateX(18px); }
.gm-switch input:focus-visible + .gm-switch-track { outline: 2px solid var(--p-blue); outline-offset: 2px; }
.gm-switch input:disabled + .gm-switch-track { opacity: 0.6; }
/* Not to be turned on yet (no mentor introduced): no hand over it. */
.gm-switch:has(input:disabled), .gm-switch input:disabled { cursor: default; }
.gm-switch-words { min-width: 0; padding-top: 1px; }
.gm-share .gm-small { margin-top: 8px; }

/* ---------- the mentor's dashboard ---------- */
.mentor-stage .portal-card-head { flex-wrap: wrap; }
.mentor-stage .portal-status { white-space: normal; }

/* A to-do: the box and its words, and the cross at the end of the row. */
.mentor-todos .portal-todo { display: flex; align-items: flex-start; gap: 8px; }
.mentor-todos .portal-check { flex: 1 1 auto; min-width: 0; }
.mentor-todos .portal-todo .gm-remove { margin: -6px -6px -6px 0; }

/* A mentee's progress in a few numbers. */
.mentor-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 16px 0 0; }
.mentor-stats > div { padding: 12px 14px; border-radius: 14px; background: var(--p-bg); }
.mentor-stats dt { font-size: 12.5px; line-height: 16px; color: var(--p-muted); }
.mentor-stats dd { margin: 6px 0 0; font-size: 24px; line-height: 1.1; color: var(--p-ink); }
.mentor-progress .mentor-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mentor-progress-link { margin-top: 16px; }

/* GROW's events, as on Home: the light blue card with the character. */
.mentor-events { display: flex; flex-direction: column; align-items: flex-start; }
.mentor-events .portal-card-title { align-self: stretch; }
.mentor-events .portal-event-list { align-self: stretch; margin-bottom: 16px; }
.mentor-events .portal-event-list > li { gap: 2px; }
.mentor-event-link { color: inherit; text-decoration: none; }
.mentor-event-link:hover { color: var(--p-blue-dark); text-decoration: underline; text-underline-offset: 3px; }
.mentor-event-status { margin-top: 6px; }
.mentor-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);
}

/* ---------- Your mentee ---------- */
.mentor-mentee + .mentor-mentee { margin-top: 44px; }
.mentor-mentee > .portal-grid { margin-top: 22px; }
.mentor-mentee:first-of-type { margin-top: 27px; }
.mentor-who-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.mentor-who-head .portal-row-main { flex: 1 1 240px; gap: 4px; }
.mentor-who-name { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 26px; line-height: 1.25; color: var(--p-ink); }
.mentor-who .gm-text { max-width: 680px; }
.mentor-pills { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; flex: none; }
.mentor-app { align-items: flex-start; }
.mentor-app .portal-row-main { flex: 1 1 auto; gap: 2px; }
.mentor-app .gm-small { margin-top: 2px; }
.mentor-score { font-size: 14px; color: var(--p-muted); }
.mentor-summary { margin: 12px 0 0; }
.mentor-questions .portal-row-main { gap: 4px; }

/* ---------- a finger, or a phone ---------- */
/* Every control a thumb can press is 44px, wherever a finger is used. */
@media (max-width: 760px), (pointer: coarse) {
  .gm-remove { width: 44px; height: 44px; }
  .mentor-todos .portal-todo .gm-remove { margin: 0 -10px 0 0; }
  .portal-body .portal-status-select { min-height: 44px; }
  /* The to-do's whole row is its target: 12px above and below its line. */
  .mentor-todos .portal-todo { padding: 0; }
  .mentor-todos .portal-check { padding: 12px 0; }
  .mentor-todos .portal-check input { top: 14px; }
  .portal-body .portal-inline-form > input[type="text"] { min-height: 44px; box-sizing: border-box; }
  .portal-body .portal-objective-form .portal-field select, .portal-body .portal-objective-form .portal-field input { height: 44px; }
  .portal-body a.portal-resource, .portal-body .portal-resource { min-height: 44px; }
  .mentor-event-link { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 760px) {
  .gm-section { margin-top: 32px; }
  .gm-section-title, .mentor-who-name { font-size: 24px; }
  .gm-stack { gap: 16px; margin-top: 22px; }
  .gm-section > .portal-grid, .gm-section > .portal-terms, .mentor-mentee > .portal-grid { margin-top: 16px; }
  .mentor-mentee + .mentor-mentee { margin-top: 32px; }
  /* The page head's button goes under the words, at full width. */
  .portal-body .portal-page-head > .portal-pill { flex: 1 1 100%; }
  .gm-schedule-form .portal-field { flex: 1 1 100%; }
  .gm-schedule-form > .portal-pill { flex: 1 1 auto; }
  /* A catch-up's buttons keep to the top of its row, as a lone button does
     once its notes go under it. */
  .portal-row-noted > .gm-row-actions { align-self: start; }
  .gm-switch { font-size: 14.5px; }
  .gm-dialog-error { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-switch-track, .gm-switch-track::after { transition: none; }
}