/* Video interview on the GROW member portal (public/portal-interview.js).

   The practice's layout is the one it was ported with: the practice test
   and the four categories of questions, a studio for each question (the
   camera's picture beside the clock and the buttons), the practice test
   filling the window with one question at a time, and its review of all
   six answers. Its paint is GROW's: the owner's mockup's white cards with
   their 1px lines and 18px corners, pill buttons, the light blue card with
   the GROW character, GROW blue for what can be pressed and Jost
   throughout. The four categories carry the portal's four status colours,
   in their order. The box the video plays in is the portal's ink, so a
   picture reads as a picture. Colours come only from the palette in
   portal.css, as var(--p-...): see the note there. */

/* ---------- the page ---------- */
.vi-lede { max-width: 780px; }
.vi-label { font-size: 11.5px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-blue); }

/* The practice test. */
.vi-practice-lede { margin: 16px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--p-ink); }
.vi-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.vi-flow li { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border-radius: 14px; background: var(--p-bg); }
.vi-flow strong { font-weight: 400; font-size: 17px; line-height: 1.3; color: var(--p-ink); -webkit-text-stroke: 0.25px currentColor; }
.vi-flow span { font-size: 13.5px; line-height: 1.4; color: var(--p-muted); }
.vi-practice-start { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 18px; }
.vi-practice-start .portal-pill { min-height: 44px; padding: 0 24px; font-size: 14.5px; }
.vi-practice-start span { font-size: 13.5px; line-height: 1.4; color: var(--p-muted); }
.vi-practice-notice { margin-top: 16px; }

/* How it works: the mockup's light blue card, with the GROW character. */
.vi-how { padding-bottom: 92px; }
.vi-how .portal-card-title { padding-bottom: 12px; }
.vi-how-list { display: grid; gap: 8px; margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--p-ink); }
.vi-how-note {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--p-sky-line);
  font-size: 14px; line-height: 1.5; color: var(--p-sky-ink);
}
.vi-how-note strong { font-weight: 400; -webkit-text-stroke: 0.3px currentColor; }

/* Questions you've practised, as the account keeps them: each prompt with
   its category over it and how often, and when, under it. */
.vi-practised .portal-card-head { flex-wrap: wrap; }
.vi-practised .portal-card-title[tabindex="-1"]:focus { outline: none; }
.vi-practised-item { display: flex; flex-direction: column; gap: 3px; padding: 12px 0 11px; }
.vi-practised-prompt { font-size: 15px; line-height: 1.45; color: var(--p-ink); overflow-wrap: anywhere; }
.vi-practised-meta { font-size: 13.5px; line-height: 18px; color: var(--p-muted); }
.vi-practised-foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px;
  padding-top: 8px; border-top: 1px solid var(--p-sep);
}
.vi-practised-foot .portal-pill { padding: 0 10px; font-size: 13.5px; }
.vi-practised-foot .portal-pill:first-child { margin-left: -10px; }
.vi-practised-foot .portal-pill:last-child { margin-left: auto; margin-right: -10px; }
.vi-practised-foot [data-vi-action="practised-more"] { color: var(--p-blue); }
.vi-practised-clear:not(:disabled):hover { color: var(--p-danger); }
.vi-practised-empty { margin: 14px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--p-muted); }

/* One question at a time: the four categories as an accordion. */
.vi-bank { margin-top: 22px; }
.vi-bank .portal-card-head { flex-wrap: wrap; }
.vi-count { color: var(--p-muted); font-size: 13.5px; white-space: nowrap; }
.vi-bank-lede { margin: 14px 0 4px; font-size: 15px; line-height: 1.5; color: var(--p-muted); }
.vi-cat-list, .vi-question-list { list-style: none; margin: 0; padding: 0; }
.vi-cat + .vi-cat { border-top: 1px solid var(--p-sep); }
.vi-cat[data-vi-cat="competency"] { --vi-accent: var(--p-lilac); --vi-accent-ink: var(--p-lilac-ink); }
.vi-cat[data-vi-cat="motivational"] { --vi-accent: var(--p-orange); --vi-accent-ink: var(--p-orange-ink); }
.vi-cat[data-vi-cat="firm-specific"] { --vi-accent: var(--p-sky); --vi-accent-ink: var(--p-sky-ink); }
.vi-cat[data-vi-cat="commercial-awareness"] { --vi-accent: var(--p-green); --vi-accent-ink: var(--p-green-ink); }
.vi-cat-toggle {
  width: 100%; min-height: 78px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 14px; align-items: center;
  gap: 14px; margin: 0; padding: 14px 4px; border: 0; background: none; color: var(--p-ink); font: inherit;
  text-align: left; cursor: pointer;
}
.vi-cat-toggle:hover .vi-cat-name { color: var(--p-blue); }
.vi-cat-toggle:disabled { cursor: not-allowed; opacity: 0.6; }
.vi-cat-number {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--vi-accent); color: var(--vi-accent-ink); font-size: 15px; font-variant-numeric: tabular-nums;
}
.vi-cat-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vi-cat-name { font-size: 17px; line-height: 1.3; color: var(--p-ink); -webkit-text-stroke: 0.25px currentColor; }
.vi-cat-sub { font-size: 14px; line-height: 1.4; color: var(--p-muted); }
.vi-cat-count { font-size: 13.5px; color: var(--p-muted); white-space: nowrap; }
.vi-chevron {
  width: 9px; height: 9px; margin-top: -4px; justify-self: center;
  border-right: 2px solid var(--p-blue); border-bottom: 2px solid var(--p-blue);
  transform: rotate(45deg); transition: transform 0.18s ease;
}
.vi-cat.is-open > .vi-cat-toggle .vi-chevron, .vi-question.is-open > .vi-question-toggle .vi-chevron,
.vi-review.is-open > .vi-review-toggle .vi-chevron { margin-top: 4px; transform: rotate(225deg); }
/* The open category's questions line up with its name, edged in its colour. */
.vi-cat-body { margin: 0 0 18px 62px; border-left: 3px solid var(--vi-accent); }
.vi-question + .vi-question { border-top: 1px solid var(--p-sep); }
.vi-question-toggle {
  width: 100%; min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; align-items: center;
  gap: 14px; margin: 0; padding: 12px 4px 12px 18px; border: 0; background: none; color: var(--p-ink); font: inherit;
  text-align: left; cursor: pointer;
}
.vi-question-toggle:hover .vi-question-prompt, .vi-question.is-open .vi-question-prompt { color: var(--p-blue); }
.vi-question-toggle:disabled { cursor: not-allowed; opacity: 0.6; }
.vi-question.is-open .vi-question-toggle:disabled { opacity: 1; }
.vi-question-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vi-question-prompt { font-size: 15.5px; line-height: 1.45; color: var(--p-ink); }
.vi-take-pill { justify-self: end; }

/* ---------- the studio: one question, recorded ---------- */
.vi-studio {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 22px; align-items: start;
  margin: 2px 0 0 18px; padding: 16px 0 22px; border-top: 1px solid var(--p-sep);
}
.vi-media {
  position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px;
  background: var(--p-ink); color: #fff;
}
.vi-media video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--p-ink); }
.vi-media video[controls] { object-fit: contain; }
/* The live picture is a mirror, as people expect to see themselves; what
   is recorded, and played back, is the right way round. */
#portalVideoPreview { transform: scaleX(-1); }
.vi-placeholder {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
  text-align: center; font-size: 14.5px; line-height: 1.45; color: var(--p-box);
}
.vi-rec-badge {
  position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px; background: var(--p-danger); color: #fff;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
.vi-rec-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .vi-rec-badge::before { animation: vi-pulse 1.4s ease-in-out infinite; }
}
@keyframes vi-pulse { 50% { opacity: 0.35; } }

.vi-panel { display: grid; align-content: start; gap: 14px; min-width: 0; }
.vi-limits { display: flex; flex-wrap: wrap; gap: 8px; }
.vi-limits span {
  padding: 5px 12px; border: 1px solid var(--p-line); border-radius: 999px; background: #fff;
  font-size: 13px; line-height: 18px; color: var(--p-muted);
}
.vi-limits strong { font-weight: 400; color: var(--p-ink); -webkit-text-stroke: 0.25px currentColor; }
.vi-timer { display: grid; gap: 8px; }
.vi-timer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vi-timer-head span { font-size: 13.5px; color: var(--p-muted); }
.vi-timer-head strong { font-weight: 400; font-size: 28px; line-height: 1; color: var(--p-ink); font-variant-numeric: tabular-nums; }
.vi-timer.is-recording .vi-timer-head strong { color: var(--p-danger); }
.vi-timer-track { overflow: hidden; height: 6px; border-radius: 3px; background: var(--p-sep); }
.vi-timer-fill { display: block; width: var(--vi-progress, 0%); height: 100%; border-radius: 3px; background: var(--p-blue); transition: width 0.2s linear; }
.vi-timer.is-recording .vi-timer-fill { background: var(--p-danger); }
.vi-status { min-height: 21px; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--p-muted); }
.vi-status:focus { outline: none; }
.vi-notice {
  margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--p-blue-pale); color: var(--p-sky-ink);
  font-size: 14px; line-height: 1.45;
}
/* Why the camera did not start, and how to put it right. */
.vi-problem {
  display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--p-danger-pale);
  text-align: left;
}
/* It takes the focus only so a screen reader reads it at once. */
.vi-problem:focus { outline: none; }
.vi-problem strong { font-weight: 400; font-size: 15.5px; line-height: 1.35; color: var(--p-danger); -webkit-text-stroke: 0.3px currentColor; }
.vi-problem p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--p-ink); }
.vi-problem ol { display: grid; gap: 4px; margin: 2px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--p-ink); }
.vi-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vi-actions .portal-pill { min-height: 44px; padding: 0 20px; font-size: 14px; }
.vi-pill-danger { background: var(--p-danger); border-color: var(--p-danger); color: #fff; }
.vi-pill-danger:hover { box-shadow: 0 0 0 3px var(--p-danger-pale); }
.vi-privacy { margin: 0; padding-top: 12px; border-top: 1px solid var(--p-sep); font-size: 13px; line-height: 1.5; color: var(--p-muted); }

/* ---------- the practice test fills the window ---------- */
/* Above the portal's top bar (z-index 10) and its account menu (30), below
   the toast (60). It scrolls by itself, so the page behind is held still;
   its header, with the progress bar, stays at its top. */
body.portal-vi-open { overflow: hidden; }
.vi-experience {
  position: fixed; inset: 0; z-index: 50; overflow: auto; overscroll-behavior: contain;
  background: var(--p-bg); color: var(--p-ink);
}
.vi-head { position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid var(--p-line); }
.vi-bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px;
  min-height: 76px; box-sizing: border-box;
  padding: 12px max(40px, calc((100% - 1160px) / 2));
}
.vi-brand { padding-right: 24px; border-right: 1px solid var(--p-sep); }
.vi-identity { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vi-identity span, .vi-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vi-identity span { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-blue); }
.vi-identity strong { font-weight: 400; font-size: 17px; color: var(--p-ink); }
.vi-bar-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 0 18px;
  border: 1px solid var(--p-line); border-radius: 999px; background: #fff; color: var(--p-ink);
  font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer;
}
.vi-bar-btn:hover { border-color: var(--p-blue); color: var(--p-blue); }
.vi-bar-btn.vi-exit:hover { border-color: var(--p-danger); background: var(--p-danger-pale); color: var(--p-danger); }
.vi-progress { height: 5px; background: var(--p-sep); }
.vi-progress > span { display: block; width: 0; height: 100%; border-radius: 0 3px 3px 0; background: var(--p-blue); transition: width 0.2s ease; }
.vi-progress[data-done="1"] > span { width: 16.67%; }
.vi-progress[data-done="2"] > span { width: 33.33%; }
.vi-progress[data-done="3"] > span { width: 50%; }
.vi-progress[data-done="4"] > span { width: 66.67%; }
.vi-progress[data-done="5"] > span { width: 83.33%; }
.vi-progress[data-done="6"] > span { width: 100%; }

.vi-stage { width: min(1080px, 100%); box-sizing: border-box; margin: 0 auto; padding: 28px 20px 56px; }
.vi-experience h2[tabindex="-1"]:focus { outline: none; }
/* One question, in the middle of the window. */
.vi-centre { width: min(860px, 100%); margin: 0 auto; display: grid; justify-items: center; gap: 14px; text-align: center; }
.vi-phase { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-blue); }
.vi-question-text { max-width: 820px; margin: 0; font-weight: 400; font-size: 26px; line-height: 1.35; color: var(--p-ink); }
/* The picture as large as the window allows with the clock still in view. */
.vi-practice-media { width: min(760px, 100%, calc(56vh * 16 / 9)); box-shadow: 0 12px 40px var(--p-shadow); }
.vi-practice-timing { width: min(560px, 100%); text-align: left; }
.vi-centre .vi-status { max-width: 640px; }
.vi-centre .vi-problem { width: min(640px, 100%); box-sizing: border-box; }
.vi-centre-actions { justify-content: center; }
.vi-setup-icon {
  width: 56px; height: 56px; box-sizing: border-box; padding: 14px; border-radius: 50%; background: var(--p-sky);
  fill: none; stroke: var(--p-blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- the review of all six ---------- */
.vi-review-stage { width: min(1000px, 100%); }
.vi-review-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px;
  padding-bottom: 20px; border-bottom: 1px solid var(--p-line);
}
.vi-review-intro-copy { display: grid; gap: 6px; }
.vi-review-intro-copy h2 { margin: 0; font-weight: 400; font-size: 27px; line-height: 1.25; color: var(--p-ink); }
.vi-review-intro-copy p { max-width: 680px; margin: 0; font-size: 15px; line-height: 1.55; color: var(--p-muted); }
.vi-expiry { display: grid; justify-items: end; gap: 2px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-muted); }
.vi-expiry strong { font-weight: 400; font-size: 28px; letter-spacing: 0; color: var(--p-ink); font-variant-numeric: tabular-nums; }
.vi-review-progress {
  display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 10px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-muted);
}
.vi-review-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.vi-review { overflow: hidden; background: #fff; border: 1px solid var(--p-line); border-radius: 18px; }
.vi-review-toggle {
  width: 100%; min-height: 76px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 14px; align-items: center;
  gap: 14px; margin: 0; padding: 14px 20px; border: 0; background: none; color: var(--p-ink); font: inherit;
  text-align: left; cursor: pointer;
}
.vi-review-toggle:hover .vi-review-prompt { color: var(--p-blue); }
.vi-review-number { font-size: 20px; color: var(--p-blue); font-variant-numeric: tabular-nums; }
.vi-review-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vi-review-prompt { font-size: 15px; line-height: 1.45; color: var(--p-ink); }
.vi-review-body {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr); gap: 22px; align-items: start;
  padding: 18px 20px 20px; border-top: 1px solid var(--p-sep);
}
.vi-self { display: grid; gap: 10px; }
.vi-self > strong { font-weight: 400; font-size: 16px; color: var(--p-ink); -webkit-text-stroke: 0.25px currentColor; }
.vi-self ul { display: grid; gap: 6px; margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--p-muted); }
.vi-review-actions { display: flex; justify-content: flex-end; margin-top: 22px; }
.vi-review-actions .portal-pill { min-height: 44px; padding: 0 24px; font-size: 14.5px; }

/* ---------- narrower windows, and phones ---------- */
@media (max-width: 900px) {
  .vi-studio { grid-template-columns: minmax(0, 1fr); }
  .vi-review-intro { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .vi-expiry { justify-items: start; }
  .vi-review-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .vi-flow { grid-template-columns: minmax(0, 1fr); }
  .vi-flow li { flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .vi-practice-start .portal-pill { width: 100%; }
  .vi-cat-toggle { grid-template-columns: 36px minmax(0, 1fr) 14px; gap: 12px; padding: 14px 0; }
  .vi-cat-number { width: 36px; height: 36px; font-size: 14px; }
  .vi-cat-count { display: none; }
  .vi-cat-body { margin: 0 0 16px; }
  .vi-question-toggle { grid-template-columns: minmax(0, 1fr) 14px; gap: 6px 10px; padding: 12px 0 12px 14px; }
  .vi-take-pill { grid-column: 1; grid-row: 2; justify-self: start; }
  .vi-question-toggle > .vi-chevron { grid-column: 2; grid-row: 1 / span 2; }
  .vi-studio { margin-left: 14px; gap: 16px; padding-bottom: 18px; }
  .vi-actions .portal-pill { flex: 1 1 100%; white-space: normal; }
  .vi-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; min-height: 64px; padding: 10px 16px; }
  .vi-brand { display: none; }
  .vi-identity strong { font-size: 15.5px; }
  .vi-stage { padding: 18px 16px 40px; }
  .vi-question-text { font-size: 20px; line-height: 1.4; }
  .vi-centre-actions { width: 100%; }
  .vi-review-intro-copy h2 { font-size: 23px; }
  .vi-review-toggle { grid-template-columns: 30px minmax(0, 1fr) 14px; gap: 6px 10px; padding: 12px 14px; }
  .vi-review-number { grid-row: 1 / span 2; font-size: 17px; }
  .vi-review-toggle > .portal-status { grid-column: 2; justify-self: start; }
  .vi-review-toggle > .vi-chevron { grid-column: 3; grid-row: 1 / span 2; }
  .vi-review-body { padding: 14px; }
  .vi-review-actions .portal-pill { width: 100%; }
}