/* =========================================================================
   Parents Booking — Parent login page
   Re-skin stylesheet. Mobile-first; the split-screen layout activates at
   the --bp-desktop breakpoint. All brand values are CSS custom properties
   at the top so they can be swapped without touching component rules.
   ========================================================================= */

:root {
  /* Brand colours (from parents-booking.com) */
  /* --pb-blue and --pb-blue-dark are darkened from the site's raw
     #2E9ED9 / #1B7FB8 to meet WCAG AA contrast (4.5:1) for white text on
     the button and for the blue text used on links — see README. */
  --pb-blue: #1976A8;
  --pb-blue-dark: #125E85;
  --pb-navy: #123650;
  --pb-teal: #59C3D3;

  /* Neutrals */
  --pb-ink: #22282C;
  --pb-ink-soft: #5B6670;
  --pb-line: #E3E8EC;
  --pb-paper: #F6F9FB;
  --pb-white: #FFFFFF;

  /* Status / accent */
  --pb-yellow: #FFE066;
  --pb-yellow-ink: #7A5B00;
  --pb-yellow-line: #F5D060;
  --pb-yellow-bg: #FFFBEE;
  --pb-red: #E1543C;

  /* Type */
  --pb-font: 'Overpass', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Layout */
  --bp-desktop: 900px;
  --panel-width: 480px;
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-btn: 0 8px 16px rgba(25, 118, 168, 0.28);
  --shadow-card: 0 8px 20px rgba(25, 118, 168, 0.24);
}

/* ---------------------------------------------------------------------- */
/* Reset / base                                                          */
/* ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body.pb-body {
  margin: 0;
  font-family: var(--pb-font);
  color: var(--pb-ink);
  background: var(--pb-paper);
  -webkit-font-smoothing: antialiased;
}

.pb-body a {
  color: var(--pb-blue);
  text-decoration: none;
}
.pb-body a:hover,
.pb-body a:focus-visible {
  color: var(--pb-blue-dark);
  text-decoration: underline;
}

.pb-body button {
  font-family: inherit;
  cursor: pointer;
}

.pb-body input {
  font-family: inherit;
}

.pb-body :focus-visible {
  outline: 2px solid var(--pb-blue);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* Page shell                                                            */
/* ---------------------------------------------------------------------- */

.pb-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Mobile top bar — brand + utility icons. Hidden on desktop, where the
   same brand identity + utilities live in the side panel / form panel. */
.pb-topbar {
  flex-shrink: 0;
  min-height: 76px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(120deg, var(--pb-navy) 0%, #1E76A8 60%, var(--pb-teal) 130%);
}

.pb-brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.pb-brand__mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: block;
}

.pb-brand__name {
  color: var(--pb-white);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.pb-topbar .pb-utility { display: flex; }

/* ---------------------------------------------------------------------- */
/* Brand side panel (desktop only)                                       */
/* ---------------------------------------------------------------------- */

.pb-panel {
  display: none; /* shown at --bp-desktop */
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  width: var(--panel-width);
  flex-shrink: 0;
  padding: 56px;
  background: linear-gradient(155deg, var(--pb-navy) 0%, #1E76A8 45%, var(--pb-teal) 100%);
}

.pb-panel__decor {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.pb-panel__decor--1 { width: 420px; height: 420px; background: rgba(255,255,255,0.06); top: -140px; right: -140px; }
.pb-panel__decor--2 { width: 260px; height: 260px; background: rgba(255,255,255,0.07); bottom: 60px; left: -100px; }
.pb-panel__decor--3 { width: 120px; height: 120px; border: 2px solid rgba(255,255,255,0.18); bottom: 220px; right: 60px; }

.pb-panel__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.pb-panel__brand .pb-brand__mark { width: 36px; height: 36px; }
.pb-panel__brand .pb-brand__name { font-size: 19px; }

.pb-panel__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pb-panel__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 6px 14px;
  width: fit-content;
  color: var(--pb-white);
  font-size: 13px;
  font-weight: 600;
}

.pb-panel__heading {
  margin: 0;
  color: var(--pb-white);
  font-size: 34px;
  line-height: 1.2;
  font-weight: 800;
  max-width: 400px;
}

.pb-panel__text {
  margin: 0;
  color: rgba(255,255,255,0.82);
  font-size: 16px;
  line-height: 1.6;
  max-width: 380px;
}

/* ---------------------------------------------------------------------- */
/* Form panel                                                            */
/* ---------------------------------------------------------------------- */

.pb-main {
  flex-grow: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  padding: 28px 20px 40px;
}

.pb-main .pb-utility {
  display: none; /* mobile shows utilities in the topbar instead */
}

.pb-card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pb-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.pb-card__logo-wrap {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: linear-gradient(155deg, var(--pb-blue), var(--pb-teal));
  flex-shrink: 0;
}
.pb-card__logo-wrap--sm { width: 76px; height: 76px; border-radius: 20px; }

.pb-card__logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* If the school logo fails to load (or none is set yet), this hides the
   broken-image icon and lets the gradient placeholder behind it show. */
.pb-card__logo.is-broken { visibility: hidden; }

.pb-card__school {
  margin: 0 0 4px;
  font-size: 21px;
  font-weight: 800;
}

/* School contact details — phone/email, shown under the school name.
   Always visible (no click-to-reveal): stacks on mobile, one line with a
   separator once there's room (desktop breakpoint below). */
.pb-card__contact {
  margin: 0 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 12px;
  color: var(--pb-ink-soft);
}
.pb-card__contact strong {
  color: var(--pb-ink);
  font-weight: 700;
}
.pb-card__contact__sep { display: none; }

.pb-card__subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--pb-ink-soft);
}

/* ---------------------------------------------------------------------- */
/* Utility row: messages + language                                     */
/* ---------------------------------------------------------------------- */

.pb-utility {
  gap: 10px;
  align-items: center;
}

.pb-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--pb-white);
  border: 1px solid var(--pb-line);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pb-ink);
}
.pb-topbar .pb-pill {
  background: rgba(255,255,255,0.16);
  border: none;
  color: var(--pb-white);
  padding: 8px 12px;
}
.pb-topbar .pb-pill--icon-only {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  position: relative;
}

.pb-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pb-red);
  display: inline-block;
}
.pb-topbar .pb-pill--icon-only .pb-pill__dot {
  position: absolute;
  top: 6px;
  right: 7px;
  border: 1.5px solid #1E76A8;
}

.pb-flag {
  width: 22px;
  height: 15px;
  border-radius: 3px;
  display: block;
  flex-shrink: 0;
}

/* Language dropdown */
.pb-lang {
  position: relative;
}
.pb-lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--pb-white);
  border: 1px solid var(--pb-line);
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(18,54,80,0.16);
  padding: 8px;
  display: none;
  z-index: 30;
}
.pb-lang.is-open .pb-lang__menu { display: block; }
.pb-lang__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: none;
  background: transparent;
  border-radius: 9px;
  text-align: left;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pb-ink);
}
.pb-lang__option:hover { background: var(--pb-paper); }
.pb-lang__option[aria-current="true"] { background: #EAF5F9; }
.pb-lang__option-name { flex-grow: 1; }
.pb-lang__check { color: var(--pb-blue); flex-shrink: 0; }

/* ---------------------------------------------------------------------- */
/* Messages banner (collapsed / expanded)                                */
/* ---------------------------------------------------------------------- */

.pb-messages {
  border: 1px solid var(--pb-yellow-line);
  background: var(--pb-yellow-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pb-messages__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 12px 14px;
  text-align: left;
}

.pb-messages__icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--pb-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--pb-yellow-ink);
}

.pb-messages__label {
  flex-grow: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--pb-yellow-ink);
}

.pb-messages__chevron {
  color: var(--pb-yellow-ink);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.pb-messages.is-open .pb-messages__chevron { transform: rotate(90deg); }

.pb-messages__body {
  display: none;
  padding: 0 14px 16px;
}
.pb-messages.is-open .pb-messages__body { display: block; }

.pb-messages__date {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--pb-blue-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.pb-messages__text {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--pb-ink);
}

.pb-messages__dismiss {
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: var(--pb-blue);
  color: var(--pb-white);
  font-size: 13.5px;
  font-weight: 700;
}

/* Hide the whole banner when a school has no messages — the backend
   should simply omit this element rather than render it empty. */
.pb-messages[hidden] { display: none; }

/* ---------------------------------------------------------------------- */
/* SSO buttons                                                           */
/* ---------------------------------------------------------------------- */

.pb-sso-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.pb-sso-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pb-sso-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  background: var(--pb-white);
  border: 1px solid var(--pb-line);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--pb-ink);
}
.pb-sso-btn:hover { border-color: #C9D3DA; background: #FAFCFD; }
.pb-sso-btn svg, .pb-sso-btn img { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------------------------------------------------------------------- */
/* Divider                                                                */
/* ---------------------------------------------------------------------- */

.pb-divider {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pb-divider::before,
.pb-divider::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: var(--pb-line);
}
.pb-divider span {
  font-size: 12px;
  color: var(--pb-ink-soft);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* Form fields                                                           */
/* ---------------------------------------------------------------------- */

.pb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pb-field__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pb-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--pb-ink);
}

.pb-field__control {
  position: relative;
}

.pb-input {
  width: 100%;
  height: 48px;
  border: 1px solid var(--pb-line);
  border-radius: var(--radius-md);
  padding: 0 14px;
  font-size: 14px;
  color: var(--pb-ink);
  background: var(--pb-white);
}
.pb-input::placeholder { color: #9AA7B0; }
.pb-input:focus {
  outline: none;
  border-color: var(--pb-blue);
  box-shadow: 0 0 0 3px rgba(25, 118, 168, 0.18);
}
.pb-input--with-icon { padding-left: 42px; }
.pb-input--with-toggle { padding-right: 42px; }

.pb-field__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9AA7B0;
  display: flex;
  pointer-events: none;
}

.pb-field__toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: #9AA7B0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.pb-field__toggle:hover { color: var(--pb-ink-soft); background: var(--pb-paper); }

select.pb-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6670' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* Personal-information form sections */
.pb-form-card {
  background: var(--pb-white);
  border: 1px solid var(--pb-line);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pb-form-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pb-blue-dark);
}
.pb-form-section__title svg { flex-shrink: 0; }

.pb-form-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.pb-form-divider {
  height: 1px;
  background: var(--pb-line);
}

/* ---------------------------------------------------------------------- */
/* Primary button                                                        */
/* ---------------------------------------------------------------------- */

.pb-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  background: var(--pb-blue);
  border: none;
  border-radius: var(--radius-md);
  color: var(--pb-white);
  font-size: 15px;
  font-weight: 700;
  box-shadow: var(--shadow-btn);
}
.pb-btn-primary:hover { background: var(--pb-blue-dark); }
.pb-btn-primary svg { flex-shrink: 0; }

.pb-help-text {
  margin: 4px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--pb-ink-soft);
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */

.pb-footer {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--pb-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pb-footer__links {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.pb-footer__links a {
  font-size: 12.5px;
  color: var(--pb-ink-soft);
}
.pb-footer__copyright {
  margin: 0;
  text-align: center;
  font-size: 11px;
  color: #9AA7B0;
}

/* ---------------------------------------------------------------------- */
/* Auth utility pages (forgotten username/password, reset password,     */
/* magic link sent) — confirmation states, secondary link rows          */
/* ---------------------------------------------------------------------- */

.pb-intro {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--pb-ink-soft);
}

.pb-input:disabled {
  background: var(--pb-paper);
  color: var(--pb-ink-soft);
  cursor: not-allowed;
}

/* Confirmation state (e.g. "we've emailed you a link") */
.pb-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.pb-confirm__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #E7F7EC;
  color: #1F9254;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pb-confirm__heading {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
}

.pb-confirm__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--pb-ink-soft);
}
.pb-confirm__text strong {
  color: var(--pb-ink);
  font-weight: 700;
}

.pb-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--pb-yellow-bg);
  border: 1px solid var(--pb-yellow-line);
  border-radius: var(--radius-md);
  padding: 14px;
}
.pb-notice__icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--pb-yellow);
  color: var(--pb-yellow-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.pb-notice__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--pb-yellow-ink);
}

.pb-help-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  width: 100%;
}
.pb-help-list__title {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pb-ink);
  margin-bottom: 2px;
}
.pb-help-list li {
  font-size: 13px;
  color: var(--pb-ink-soft);
  padding-left: 16px;
  position: relative;
  line-height: 1.5;
}
.pb-help-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pb-ink-soft);
}

/* Secondary link row (Go back / Need to find your username?) */
.pb-subnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.pb-subnav a {
  font-size: 13px;
  font-weight: 600;
}
.pb-subnav__back {
  color: var(--pb-ink-soft) !important;
}

/* ---------------------------------------------------------------------- */
/* Desktop breakpoint                                                    */
/* ---------------------------------------------------------------------- */

@media (min-width: 900px) {
  .pb-topbar { display: none; }

  .pb-page { flex-direction: row; }

  .pb-panel { display: flex; }

  .pb-main {
    align-items: center;
    padding: 40px;
  }

  .pb-main .pb-utility {
    display: flex;
    position: absolute;
    top: 32px;
    right: 40px;
  }

  /* Phone · Email on one line once there's room. */
  .pb-card__contact { flex-direction: row; gap: 8px; font-size: 12.5px; }
  .pb-card__contact__sep { display: inline-block; width: 1px; height: 12px; background: var(--pb-line); }

  .pb-card { max-width: 440px; }
  .pb-card--wide { max-width: 520px; }
}

/* =========================================================================
   Parents Booking integration — PEBS-1297
   ========================================================================= */

/* The SSO assets are whole buttons (1188x276), not icons, so the image is
   the button. Height follows the artwork's ratio — against a fixed height
   it either left dead space or cropped the label on narrow cells. */
.pb-sso-btn--image {
  height: auto;
  aspect-ratio: 1188 / 276;
  padding: 0;
  border: none;
  background: none;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.pb-sso-btn--image:hover { background: none; opacity: 0.85; }
.pb-sso-grid > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: 50%;
  justify-self: center;
}
.pb-sso-btn--image img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Not in the handoff. The recovery pages keep an empty error label in the
   DOM for their validation scripts to write into, so it must not show its
   border and fill until it actually holds a message. */
.pb-field__error:empty { display: none; }

/* PEBS-1297: Will asked for this line to be more prominent, so a parent
   landing here knows it is the parent login. Up from 14px / ink-soft. */
.pb-card__subtitle {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--pb-ink);
}
.pb-field__error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--pb-red);
  border-radius: var(--radius-sm);
  background: #FDF1EF;
  color: var(--pb-red);
  font-size: 13px;
  font-weight: 600;
}

/* A help list's first item is its heading, not a bullet. */
.pb-help-list li.pb-help-list__heading { padding-left: 0; }
.pb-help-list li.pb-help-list__heading::before { display: none; }

/* Bootstrap is still loaded for the modals; keep its reboot off the type scale. */
.pb-body .modal { font-family: var(--pb-font); }

/* The cookie and forthcoming-evenings dialogs are stock Bootstrap modals;
   bring them onto the design tokens. */
.pb-body .modal-content {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(18, 54, 80, 0.22);
  overflow: hidden;
}
.pb-body .modal-header,
.pb-body .modal-footer {
  border-color: var(--pb-line);
  padding: 15px 20px;
}
.pb-body .modal-body { padding: 18px 20px; }
.pb-body .modal-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--pb-ink);
}
.pb-body .modal-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--pb-ink-soft);
}
.pb-body .modal .close {
  color: var(--pb-ink-soft);
  opacity: 1;
  text-shadow: none;
  font-weight: 400;
}
.pb-body .modal .close:hover { color: var(--pb-ink); opacity: 1; }
.pb-body .modal .btn-secondary {
  background: var(--pb-blue);
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pb-white);
}
.pb-body .modal .btn-secondary:hover,
.pb-body .modal .btn-secondary:not(:disabled):not(.disabled):active {
  background: var(--pb-blue-dark);
}

/* modals.css painted this header row and is no longer loaded here. */
.pb-body .modal .table { margin: 0; font-size: 13.5px; }
.pb-body .modal .table thead th {
  background: var(--pb-paper);
  color: var(--pb-ink);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-top: none;
  border-bottom: 1px solid var(--pb-line);
  white-space: nowrap;
}
.pb-body .modal .table td,
.pb-body .modal .table th {
  border-color: var(--pb-line);
  vertical-align: middle;
}
.pb-body .modal .table tbody th { font-weight: 600; }

/* Four columns do not fit a phone: scroll as a last resort, and let the
   headers wrap so it usually fits without needing to. */
.pb-body .modal-body { overflow-x: auto; }

@media (max-width: 575px) {
  .pb-body .modal-content { border-radius: var(--radius-md); }
  .pb-body .modal-body { padding: 14px; }
  .pb-body .modal-header,
  .pb-body .modal-footer { padding: 13px 14px; }
  .pb-body .modal .table { font-size: 12.5px; }
  .pb-body .modal .table thead th { white-space: normal; font-size: 10px; }
  .pb-body .modal .table td,
  .pb-body .modal .table th { padding: 8px 6px; }
  .pb-body .modal .btn-secondary { width: 100%; }
}

/* Bootstrap's `button:focus` ring is plain :focus, so it fires on mouse
   click. The design uses :focus-visible. */
.pb-body button:focus { outline: none; }
.pb-body button:focus-visible {
  outline: 2px solid var(--pb-blue);
  outline-offset: 2px;
}

/* These clip their own outline (overflow: hidden), so draw it inside. */
.pb-messages__toggle:focus-visible,
.pb-messages__dismiss:focus-visible,
.pb-sso-btn--image:focus-visible { outline-offset: -2px; }
.pb-messages__toggle:focus-visible { border-radius: var(--radius-md); }
/* The handoff carries this as an inline style on each multi-field form. */
.pb-form-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Fields have a 6px inner gap, so an equal gap above the button reads
   tighter. The handoff adds 12px on the button for the same reason. */
.pb-form-stack .pb-btn-primary { margin-top: 12px; }
/* The handoff leaves this link at the inherited 16px beside a 13px label. */
.pb-field__row a { font-size: 13px; }
.pb-field__row { align-items: baseline; }

/* Small print under a field (email usage note, child-details intro). */
.pb-field__hint {
  display: block;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--pb-ink-soft);
}
.pb-form-section__title + .pb-field__hint { margin: -6px 0 12px; }

/* combodate swaps the date input for three selects in a .combodate span. */
.pb-field--dob .combodate { display: flex; gap: 8px; }
.pb-field--dob .combodate select {
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  border: 1px solid var(--pb-line);
  border-radius: var(--radius-md);
  padding: 0 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--pb-ink);
  background: var(--pb-white);
}
.pb-field--dob .combodate select:focus {
  outline: none;
  border-color: var(--pb-blue);
  box-shadow: 0 0 0 3px rgba(25, 118, 168, 0.18);
}

/* The handoff sets these column counts inline, which would also apply on a
   phone. Single column below the breakpoint, per .pb-form-section__grid. */
.pb-form-section__grid + .pb-form-section__grid { margin-top: 10px; }

@media (min-width: 900px) {
  .pb-form-section__grid--2 { grid-template-columns: 1fr 1fr; }
  .pb-form-section__grid--3 { grid-template-columns: 90px 1fr 1fr; }
}

/* Failure variant of the confirmation block; the handoff designed only
   the success state. */
.pb-confirm--error .pb-confirm__icon {
  background: #FDF1EF;
  color: var(--pb-red);
}
/* Script-submitted only; as a flex child it claimed a row gap for nothing. */
#microsoftLiginId { display: none; }

/* ---------------------------------------------------------------------- */
/* Responsive hardening — the handoff has a single 900px breakpoint.      */
/* ---------------------------------------------------------------------- */

/* 100vh exceeds the visible viewport on mobile. */
@supports (min-height: 100dvh) {
  .pb-page { min-height: 100dvh; }
}

/* Long names and emails must wrap, not push the page sideways. */
.pb-card__school,
.pb-card__contact,
.pb-messages__label,
.pb-help-list li { overflow-wrap: anywhere; }
.pb-messages__label { min-width: 0; }
.pb-footer__links { flex-wrap: wrap; row-gap: 6px; }

@media (min-width: 900px) {
  /* Was a fixed 480px: needed 1000px before the card fit beside it, and
     shrank to a stripe when wide. Still exactly 480px at 1440px. */
  :root { --panel-width: clamp(320px, 33.33vw, 560px); }

  /* As a flex child it stretched to the document height, so its copy slid
     down whenever the form column grew. Size it to the viewport instead. */
  .pb-panel {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
  }

  /* The utility row was absolute, so it painted over the card header with
     only 15px of clearance. Normal flow puts it in the same place safely. */
  .pb-main {
    flex-direction: column;
    align-items: center;
    padding: 16px 40px;
    row-gap: 12px;
  }

  /* Tightened from the handoff: the generous spacing overflowed every
     laptop screen. One density avoids a taller window scrolling more. */
  .pb-card { gap: 10px; }
  .pb-card__header { gap: 8px; }
  .pb-card__logo-wrap { width: 64px; height: 64px; border-radius: 17px; }
  .pb-sso-grid { gap: 8px; }
  .pb-form-stack { gap: 14px; }
  .pb-form-stack .pb-btn-primary { margin-top: 6px; }
  .pb-footer { margin-top: 0; padding-top: 10px; gap: 5px; }
  .pb-main .pb-utility {
    position: static;
    top: auto;
    right: auto;
    align-self: flex-end;
    flex-shrink: 0;
  }
  /* Centres in the height left; collapses rather than overflowing upwards. */
  .pb-card { margin-top: auto; margin-bottom: auto; }
}

/* Large monitors: both ceilings bite at once — the panel clamps to 560px
   (22% of a 27" screen, against the 33% it was drawn at) and the card stays
   440px, leaving a small form in a very wide column. Lift both so the split
   keeps its proportions. Nothing below 1600px changes. */
@media (min-width: 1600px) {
  :root { --panel-width: clamp(560px, 33.33vw, 820px); }
  .pb-card { max-width: 520px; }
  .pb-panel { padding: 72px; }
  .pb-panel__heading { font-size: 40px; max-width: 540px; }
  .pb-panel__text { font-size: 17px; max-width: 480px; }
  .pb-main { padding-left: 56px; padding-right: 56px; }
}

/* Scale the panel's padding and type with the panel itself. */
@media (min-width: 900px) and (max-width: 1199px) {
  .pb-panel { padding: 40px 36px; }
  .pb-panel__heading { font-size: 28px; }
  .pb-panel__text { font-size: 15px; }
  .pb-panel__decor--3 { display: none; }
}

/* Short desktop viewports. */
@media (min-width: 900px) and (max-height: 820px) {
  .pb-panel { padding-top: 36px; padding-bottom: 36px; }
}

/* One fragment serves both the top bar and the desktop row; the top bar
   shows the flag alone. */
.pb-topbar .pb-lang__trigger {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
}
.pb-topbar .pb-lang__trigger-name,
.pb-topbar .pb-lang__trigger svg { display: none; }

/* The brand name and three pills do not fit one line at 320px. */
@media (max-width: 359px) {
  .pb-topbar { padding: 12px 14px; }
  .pb-brand__name { font-size: 13px; }
  .pb-main { padding-left: 14px; padding-right: 14px; }
  .pb-card__school { font-size: 19px; }
  .pb-sso-grid { gap: 8px; }
}