/* =========================================================================
   Student portal.

   Loaded after style.css, and deliberately thin: everything that carries the
   brand - the palette, the fonts, .btn, .field, .container, .lead, .eyebrow -
   already comes from there and from the theme tokens the admin panel writes.
   What is here is only the furniture the public site has no equivalent of:
   the portal header, course cards, lesson lists, the player frames and the
   questionnaire.

   Every colour below is a token. Change a colour under Design and this moves
   with it.
   ========================================================================= */

/* The website has no "this is wrong" colour - it never needed one. The
   portal does, for a failed questionnaire and a payment that did not go
   through, so it declares one here rather than spelling the same red out
   in six places. Warm enough to sit next to the brand. */
:root {
  --portal-bad: #C0384F;
  --portal-bad-ink: #8F1E31;
  --portal-bad-soft: rgba(192, 56, 79, .07);
}

.portal {
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.portal-main { flex: 1 0 auto; }

.section--tight { padding-block: clamp(32px, 4vw, 56px); }

/* ------------------------------------------------------------------ head */

.portal-head {
  background: var(--color-header);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 40;
}

.portal-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
  flex-wrap: wrap;
  padding-block: 10px;
}

.portal-head__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--color-header-text);
}

.portal-head__logo { height: var(--logo-height); width: auto; display: block; }

.portal-head__wordmark {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--color-header-text);
}

.portal-head__label {
  font-family: var(--font-nav);
  font-size: .72rem;
  letter-spacing: var(--micro, .18em);
  text-transform: uppercase;
  color: var(--color-primary);
  padding-left: 14px;
  border-left: 1px solid var(--color-border);
}

.portal-head__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  flex-wrap: wrap;
}

.portal-head__link {
  font-family: var(--font-nav);
  font-size: var(--nav-size);
  font-weight: var(--nav-weight);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: var(--nav-transform);
  color: var(--color-header-text);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 1px solid transparent;
}

.portal-head__link:hover { color: var(--color-primary); }
.portal-head__link.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* --------------------------------------------------------------- notices */

.portal-notice {
  border-radius: var(--radius-base);
  padding: 14px 18px;
  margin: 20px auto 0;
  font-size: .94rem;
  border: 1px solid var(--color-border);
  background: var(--color-card);
}

.portal-notice--success { border-color: rgba(var(--rgb-primary), .45); background: rgba(var(--rgb-primary), .07); }
.portal-notice--error   { border-color: var(--portal-bad); background: var(--portal-bad-soft); color: var(--portal-bad-ink); }
.portal-notice--info    { border-color: var(--color-border); color: var(--color-muted); }

/* ------------------------------------------------------------------ hero */

.portal-hero {
  padding: clamp(36px, 5vw, 64px) 0 clamp(20px, 3vw, 32px);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}

/* The same clamp style.css puts on h1 and h2. These classes were setting the
   desktop token flat, which put a 74px heading on a 375px screen. */
.portal-hero__title,
.portal-h1 { font-size: clamp(var(--h1-size-mobile), 4.4vw + .9rem, var(--h1-size)); }
.portal-h2 { font-size: clamp(var(--h2-size-mobile), 2.6vw + .8rem, var(--h2-size)); }

.portal-hero__title { margin: 0 0 .25em; }
.portal-hero__lead { color: var(--color-muted); max-width: 46ch; margin: 0; }

.portal-hero__resume {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 22px;
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-base);
}

.portal-hero__resume-label {
  font-size: .74rem;
  letter-spacing: var(--micro, .18em);
  text-transform: uppercase;
  color: var(--color-muted);
}

.portal-hero__resume strong { flex: 1 1 200px; font-family: var(--font-heading); font-size: 1.1rem; }

/* --------------------------------------------------------------- cards */

.portal-card {
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-base);
  padding: clamp(22px, 2.6vw, 34px);
  margin-bottom: 24px;
}

.portal-card:last-child { margin-bottom: 0; }

.portal-h1 { margin-bottom: .6em; }
.portal-h2 { margin-bottom: .7em; }
.portal-card .portal-h2 { font-size: var(--h3-size); }

.portal-empty { text-align: center; }
.portal-empty h1, .portal-empty h2 { margin-bottom: .5em; }
.portal-empty p { color: var(--color-muted); max-width: 48ch; margin-inline: auto; }
.portal-empty .btn { margin-top: 20px; }

/* ------------------------------------------------------------- courses */

.portal-courses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--grid-gap, 28px);
}

.portal-course {
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-base);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .4s var(--lift, ease), box-shadow .4s var(--lift, ease);
}

.portal-course:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }

.portal-course__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.portal-course__media img { width: 100%; height: 100%; object-fit: cover; }

.portal-course__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  color: var(--color-primary);
  background: rgba(var(--rgb-primary), .08);
}

.portal-course__body { padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; flex: 1; }
.portal-course__title { font-size: var(--h3-size); margin-bottom: .4em; }
.portal-course__title a { color: inherit; text-decoration: none; }
.portal-course__title a:hover { color: var(--color-primary); }
.portal-course__summary { color: var(--color-muted); font-size: .94rem; margin-bottom: 1.2em; }
.portal-course__actions { margin-top: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 18px; }

/* ------------------------------------------------------------ progress */

.portal-progress { margin-bottom: 4px; }

.portal-progress__track {
  height: 8px;
  border-radius: 99px;
  background: rgba(var(--rgb-heading), .09);
  overflow: hidden;
}

.portal-progress__fill {
  height: 100%;
  border-radius: 99px;
  background: var(--color-primary);
  transition: width .6s var(--lift, ease);
}

.portal-progress__text { font-size: .86rem; color: var(--color-muted); margin: 10px 0 0; }
.portal-progress--wide { max-width: 420px; margin-block: 26px; }

/* ----------------------------------------------------------- course head */

.portal-coursehead {
  padding: clamp(28px, 4vw, 52px) 0;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}

.portal-coursehead__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.portal-coursehead__title { font-size: var(--h1-size); margin-bottom: .3em; }
.portal-coursehead__media img { width: 100%; border-radius: var(--radius-base); display: block; }

.portal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  letter-spacing: var(--micro, .18em);
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  margin-bottom: 22px;
}

.portal-back:hover { color: var(--color-primary); }
.portal-back svg { width: 16px; height: 16px; }

.portal-lessonhead { padding: clamp(28px, 4vw, 48px) 0 0; }
.portal-lessonhead__title { font-size: var(--h2-size); margin-bottom: .3em; }

/* --------------------------------------------------------- lesson list */

.portal-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: none; }

.portal-lesson__link {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-base);
  text-decoration: none;
  color: inherit;
  transition: border-color .3s, transform .3s var(--lift, ease);
}

.portal-lesson__link:hover { border-color: var(--color-primary); transform: translateX(3px); }

.portal-lesson__no {
  flex: 0 0 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  background: rgba(var(--rgb-primary), .1);
  color: var(--color-primary);
  font-size: .86rem;
  font-variant-numeric: tabular-nums;
}

.portal-lesson--completed .portal-lesson__no { background: var(--color-primary); color: var(--color-btn-text); }
.portal-lesson__body { flex: 1; min-width: 0; }
.portal-lesson__title { display: block; font-family: var(--font-heading); font-size: 1.02rem; }
.portal-lesson__meta { display: block; font-size: .84rem; color: var(--color-muted); margin-top: 3px; }
.portal-lesson__state { flex: 0 0 auto; }

/* ------------------------------------------------------------- tags */

.portal-tag {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: var(--micro, .18em);
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 99px;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  white-space: nowrap;
}

.portal-tag--done { border-color: var(--color-primary); color: var(--color-primary); background: rgba(var(--rgb-primary), .08); }
.portal-tag--muted { opacity: .7; }

/* ------------------------------------------------------- media frames */

.portal-video, .portal-pdf {
  border-radius: var(--radius-base);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--color-card-border);
}

.portal-video video, .portal-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.portal-pdf iframe { display: block; width: 100%; height: min(78vh, 900px); border: 0; background: var(--color-bg-alt); }

/* A PDF viewer at phone width is close to unusable, so the frame gets out of
   the way and the "open in a new tab" button becomes the real control. */
@media (max-width: 640px) {
  .portal-pdf iframe { height: 60vh; }
}

.portal-filebar { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 16px; }

.portal-prose { max-width: 68ch; }
.portal-prose img { border-radius: var(--radius-base); }

/* ---------------------------------------------------------- questionnaire */

.portal-quiz { list-style: none; margin: 0; padding: 0; counter-reset: q; display: grid; gap: 18px; }

.portal-q {
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-base);
  padding: clamp(18px, 2.2vw, 26px);
  counter-increment: q;
}

.portal-q__prompt { font-family: var(--font-heading); font-size: 1.04rem; margin-bottom: 1em; }
.portal-q__prompt::before { content: counter(q) ". "; color: var(--color-primary); }

.portal-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  margin-bottom: 9px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.portal-choice:hover { border-color: var(--color-primary); }
.portal-choice:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.portal-choice input { margin-top: 3px; accent-color: var(--color-primary); flex: 0 0 auto; }
.portal-choice:has(input:checked) { border-color: var(--color-primary); background: rgba(var(--rgb-primary), .06); }

.portal-q__input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
}

.portal-q__input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--rgb-primary), .16); }
.portal-q__hint { font-size: .86rem; color: var(--color-muted); margin-top: .8em; }
.portal-quizform__note { color: var(--color-muted); font-size: .88rem; margin-bottom: 20px; }

/* marked-up answers */
.portal-q--right { border-color: rgba(var(--rgb-primary), .5); }
.portal-q--wrong { border-color: var(--portal-bad); }
.portal-q__options { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.portal-q__options li { padding: 9px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-base); font-size: .94rem; }
.portal-q__options .is-right { border-color: var(--color-primary); color: var(--color-primary); }
.portal-q__options .is-chosen { font-weight: 600; }
.portal-q__options .is-chosen:not(.is-right) { border-color: var(--portal-bad); color: var(--portal-bad-ink); }
.portal-q__tick { float: right; }
.portal-q__yours, .portal-q__right { font-size: .94rem; margin-bottom: .4em; }

.portal-result {
  border-radius: var(--radius-base);
  padding: clamp(20px, 2.6vw, 30px);
  margin-bottom: 26px;
  border: 1px solid var(--color-border);
  background: var(--color-card);
}

.portal-result h2 { font-size: var(--h3-size); margin-bottom: .4em; }
.portal-result p { margin: 0; color: var(--color-muted); }
.portal-result--pass   { border-color: var(--color-primary); background: rgba(var(--rgb-primary), .07); }
.portal-result--pass h2 { color: var(--color-primary); }
.portal-result--fail   { border-color: var(--portal-bad); }
.portal-result--review { border-color: var(--color-border); }

/* ------------------------------------------------------- done + pager */

.portal-done { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--color-border); }
.portal-done__state { margin-bottom: .6em; }

.portal-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--color-border);
}

.portal-pager__link {
  display: block;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  text-decoration: none;
  color: inherit;
  transition: border-color .3s;
}

.portal-pager__link:hover { border-color: var(--color-primary); }
.portal-pager__link--next { text-align: right; }
.portal-pager__dir { display: block; font-size: .72rem; letter-spacing: var(--micro, .18em); text-transform: uppercase; color: var(--color-muted); }
.portal-pager__name { display: block; font-family: var(--font-heading); margin-top: 4px; }

/* ------------------------------------------------------------------ Q&A */

.portal-qa { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); }
.portal-qa__list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 16px; }

.portal-qa__item {
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-base);
  padding: clamp(18px, 2.2vw, 26px);
}

.portal-qa__who { font-size: .82rem; color: var(--color-muted); margin-bottom: .5em; }
.portal-qa__q { margin-bottom: 0; }

.portal-qa__answer {
  margin-top: 18px;
  padding: 16px 18px;
  border-left: 3px solid var(--color-primary);
  background: rgba(var(--rgb-primary), .05);
  border-radius: 0 var(--radius-base) var(--radius-base) 0;
}

.portal-qa__answer p:last-child { margin-bottom: 0; }
.portal-qa__pending { font-size: .86rem; margin: .8em 0 0; }
.portal-qa__form { margin-top: 30px; max-width: 60ch; }

/* -------------------------------------------------------------- sign in */

.portal-signin { padding: clamp(48px, 8vw, 110px) 0; }
.portal-card--signin { max-width: 440px; margin-inline: auto; }
.portal-signin__title { font-size: var(--h2-size); margin-bottom: .2em; text-align: center; }
.portal-signin__sub { color: var(--color-muted); text-align: center; margin-bottom: 2em; }
.portal-signin__help { font-size: .86rem; color: var(--color-muted); margin: 1.8em 0 0; text-align: center; }

.portal-account__courses { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.portal-account__courses li { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.portal-account__courses li:last-child { border-bottom: 0; padding-bottom: 0; }

/* ------------------------------------------------------------------ foot */

.portal-foot {
  border-top: 1px solid var(--color-border);
  padding: 28px 0;
  margin-top: auto;
  font-size: .86rem;
  color: var(--color-muted);
}

.portal-foot__inner { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.portal-foot p { margin: 0; }
.portal-foot a { color: inherit; }

/* ------------------------------------------------------------- narrow */

@media (max-width: 880px) {
  .portal-coursehead__grid { grid-template-columns: 1fr; }
  .portal-coursehead__media { order: -1; }
}

@media (max-width: 768px) {
  /* The site scales the logo down here; the portal header was reading the
     desktop height at every width and eating a third of a phone screen. */
  .portal-head__logo { height: var(--logo-height-mobile); }
}

@media (max-width: 640px) {
  .portal-head__inner { min-height: 0; }
  .portal-head__label { display: none; }
  .portal-head__nav { width: 100%; justify-content: space-between; gap: 12px; }
  .portal-lesson__link { flex-wrap: wrap; }
  .portal-lesson__state { flex-basis: 100%; padding-left: 52px; }
  .portal-pager { grid-template-columns: 1fr; }
  .portal-pager__link--next { text-align: left; }
  .portal-hero__resume { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------------ shop */

.portal-product__kind {
  font-size: .72rem;
  letter-spacing: var(--micro, .18em);
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 .5em;
}

.portal-price {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--color-heading);
  margin: 0 0 1em;
}

.portal-price--lg { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-block: .6em; }

.portal-receipt { margin-block: 1.4em; }
.portal-receipt li { padding-block: 9px; }

.portal-checkout__small { font-size: .86rem; color: var(--color-muted); margin-top: 1.4em; }

/* One block per payment method, stacked, each its own form. */
.portal-methods { display: grid; gap: 14px; margin-top: 1.4em; }
.portal-methods form { margin: 0; }
.portal-methods .btn { width: 100%; justify-content: center; }
.portal-methods__note { font-size: .82rem; color: var(--color-muted); margin: .6em 0 0; text-align: center; }

@media (min-width: 620px) {
  .portal-methods { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
}