/* A member's own profile on the GROW member portal (public/portal-profile.js):
   the basic profile and a GROW mentee's details, as the form shown before
   anything else and as Your profile from the account menu.

   One column of questions on a white card, each with its label above it;
   choices as rows a finger can press; every field, choice and button 44px
   tall. Colours come only from the palette in portal.css, as
   var(--p-...): see the note there. */

.pp-gate { max-width: 760px; margin: 0 auto; }
.pp-gate .portal-hello:focus { outline: none; }
.pp-gate .pp-card { margin-top: 27px; }
.pp-cards { display: flex; flex-direction: column; gap: 22px; max-width: 760px; margin-top: 27px; }
.pp-intro { margin: 14px 0 0; font-size: 15px; line-height: 22px; color: var(--p-muted); }
.pp-small { margin: 16px 0 0; font-size: 13.5px; line-height: 20px; color: var(--p-muted); }

.pp-form { display: flex; flex-direction: column; gap: 22px; margin-top: 18px; }
.pp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pp-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pp-label { display: block; padding: 0; font-size: 15.5px; line-height: 22px; color: var(--p-ink); }
.pp-optional { color: var(--p-muted); }
.pp-help { margin: 0; font-size: 13.5px; line-height: 19px; color: var(--p-muted); }
.pp-small-label { display: block; margin: 0 0 4px; font-size: 13px; line-height: 18px; color: var(--p-muted); }

.pp-input { width: 100%; max-width: 520px; min-height: 44px; box-sizing: border-box; color: var(--p-ink); font: inherit; font-size: 15px; }
input.pp-input { padding: 8px 12px; border: 1px solid var(--p-line); border-radius: 10px; background: #fff; }
select.pp-input { padding-block: 8px; padding-left: 12px; }
.pp-input:focus-visible { outline: 2px solid var(--p-blue); outline-offset: 2px; }
.pp-input[aria-invalid="true"] { border-color: var(--p-danger); }
.pp-date { max-width: 220px; }
.pp-date:disabled { background: var(--p-wash); color: var(--p-muted); }
.pp-prefer { align-self: flex-start; }

/* Choices: each a row of its own, the whole row the target. */
.pp-choices { display: flex; flex-direction: column; gap: 2px; }
.pp-choice {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 10px; margin: 0 -10px;
  border-radius: 10px; font-size: 15px; line-height: 20px; color: var(--p-ink); cursor: pointer;
}
.pp-choice:hover { background: var(--p-hover); }
.pp-choice input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--p-blue); }

/* The languages and the A-levels: rows with Remove, then Add another. */
.pp-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-row > .pp-input { flex: 1 1 220px; }
.pp-result { align-items: flex-end; }
.pp-result-field { display: flex; flex-direction: column; flex: 1 1 220px; min-width: 0; }
.pp-result-grade { flex: 0 1 180px; }
.pp-remove, .pp-add, .pp-delete { min-height: 44px; font-size: 14px; }
/* Prefer not to say to every question, above the mentee details. */
.pp-prefer-all { align-self: flex-start; min-height: 44px; padding: 0 18px; font-size: 14px; }
.pp-add { align-self: flex-start; margin-top: 4px; padding: 0 18px; }
.pp-delete { color: var(--p-danger); }
.pp-delete:hover { color: var(--p-danger); background: var(--p-danger-pale); }

/* The box a GROW mentee ticks to agree, never ticked for them. */
.pp-consent { padding: 14px 16px; border-radius: 12px; background: var(--p-wash); display: flex; flex-direction: column; gap: 6px; }
.pp-consent-label {
  display: flex; align-items: flex-start; gap: 12px; min-height: 44px; font-size: 15px; line-height: 22px; color: var(--p-ink); cursor: pointer;
}
.pp-consent-label input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--p-blue); }

.pp-error { margin: 0; }
.pp-problem { margin: 0; }
.pp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pp-save { min-height: 44px; padding: 0 24px; font-size: 15px; }

@media (max-width: 760px) {
  /* iOS zooms the page into a field under 16px. */
  .pp-input { font-size: 16px; max-width: none; }
  .pp-date { max-width: none; }
  .pp-result-grade { flex: 1 1 140px; }
}