/* =====================================================================
   MODERN FORM / AUTH / PHOTO-UPLOAD SYSTEM
   ---------------------------------------------------------------------
   Loaded after stylenew.css / template.css / stylenew-fixes.css so the
   cascade always wins, and driven entirely by the shared design tokens
   (--primary, --primary-mist, --border, --r-*, --shadow-*, --font-*)
   so the whole thing re-colours itself from School Settings → Theme.

   Components
   ----------
   .rf-*     Student / Parent registration forms
             student-registration.php, student-registration2.php
   .pp-*     Passport photo uploader
             upload-passport.php
   .cbt-up   CBT question & choice image uploader
             set-cbt2.php, set-cbt3.php
   .auth-*   Additions layered on the auth-page-v2 system
             login.php, admin.php

   Design notes (first principles)
   -------------------------------
   * One visual language: same radius, border, focus ring and typography
     as the rest of the portal, never a one-off style.
   * Compulsory fields are marked once, in one place: .req-star.
   * Every input is 4.8rem tall (48px) on desktop and 1.6rem font on
     phones (<16px triggers iOS auto-zoom — a real usability bug).
   * The uploader controls are *attached* to the preview: the camera
     button sits on the bottom-right edge of the avatar circle and the
     whole CBT tile is the file input, so there is no orphan button
     floating under the image.
   ===================================================================== */

/* =====================================================================
   0. SHARED PRIMITIVES
   ===================================================================== */

/* Compulsory-field marker — one class, used everywhere */
.req-star{
  color:#dc2626;
  font-weight:800;
  line-height:1;
  margin-left:.15rem;
  font-size:1.1em;
}

/* Accessible visually-hidden helper */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* =====================================================================
   1. REGISTRATION FORMS  (.rf-*)
   ===================================================================== */

.rf-page{
  position:relative;
  padding:4.2rem 0 6.4rem;
  min-height:60vh;
  background:
    radial-gradient(1100px 520px at 6% -12%, rgba(var(--primary-rgb),.10), transparent 62%),
    radial-gradient(900px 480px at 102% -4%, rgba(var(--gold-rgb),.13), transparent 58%),
    var(--bg);
  overflow:hidden;
}
.rf-page::before,
.rf-page::after{
  content:'';
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  opacity:.5;
}
.rf-page::before{
  width:34rem; height:34rem;
  bottom:-16rem; left:-12rem;
  background:radial-gradient(circle, rgba(var(--primary-rgb),.09), transparent 70%);
}
.rf-page::after{
  width:26rem; height:26rem;
  top:-10rem; right:-8rem;
  background:radial-gradient(circle, rgba(var(--gold-rgb),.14), transparent 70%);
}
.rf-page .container{ position:relative; z-index:1; }

.rf-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 31rem;
  gap:2.4rem;
  align-items:start;
  max-width:1120px;
  margin:0 auto;
}
.rf-layout--narrow{ grid-template-columns:minmax(0,1fr) 30rem; max-width:1040px; }

/* ---- Card ---- */
.rf-card{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-xl);
  box-shadow:0 20px 54px rgba(15,23,42,.09), 0 2px 8px rgba(15,23,42,.04);
  overflow:hidden;
  position:relative;
}
.rf-card::before{
  content:'';
  position:absolute; inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg, var(--primary), var(--primary-light) 55%, var(--gold));
}

.rf-card-head{
  display:flex;
  align-items:center;
  gap:1.5rem;
  padding:2.4rem 2.6rem 2.1rem;
  background:linear-gradient(135deg, rgba(var(--primary-rgb),.07) 0%, rgba(var(--gold-rgb),.05) 100%);
  border-bottom:1px solid var(--border-light);
}
.rf-card-icon{
  width:5.2rem; height:5.2rem;
  flex-shrink:0;
  border-radius:var(--r-lg);
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--white);
  font-size:2.1rem;
  box-shadow:0 10px 22px rgba(var(--primary-rgb),.34), inset 0 1px 0 rgba(255,255,255,.22);
}
.rf-card-head h2{
  margin:0 0 .35rem;
  font-family:var(--font-heading);
  font-size:2.05rem;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--text);
  line-height:1.2;
}
.rf-card-head p{
  margin:0;
  font-size:1.3rem;
  line-height:1.55;
  color:var(--text-secondary);
}

/* Identity strip: "who am I editing?" */
.rf-context{
  display:flex;
  align-items:center;
  gap:1.2rem;
  flex-wrap:wrap;
  margin:0 0 1.8rem;
  padding:1.2rem 1.4rem;
  background:linear-gradient(135deg, rgba(var(--primary-rgb),.06), rgba(var(--gold-rgb),.045));
  border:1px solid rgba(var(--primary-rgb),.16);
  border-radius:var(--r-md);
}
.rf-context-avatar{
  width:4.8rem;
  height:4.8rem;
  flex-shrink:0;
  border-radius:50%;
  object-fit:cover;
  background:var(--white);
  border:2px solid var(--white);
  box-shadow:0 4px 14px rgba(15,23,42,.12);
}
.rf-context-avatar--initials{
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:var(--white);
  border-color:rgba(255,255,255,.7);
  font-family:var(--font-heading);
  font-size:1.7rem;
  font-weight:800;
  letter-spacing:.03em;
}
.rf-context-body{ flex:1 1 20rem; min-width:0; }
.rf-context-body strong{
  display:block;
  font-family:var(--font-heading);
  font-size:1.35rem;
  font-weight:800;
  line-height:1.3;
  color:var(--text);
}
.rf-context-body span{
  display:block;
  margin-top:.15rem;
  font-size:1.15rem;
  line-height:1.45;
  color:var(--text-muted);
}
.rf-context-back{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.65rem 1rem;
  border-radius:var(--r-sm);
  background:var(--white);
  border:1px solid var(--border);
  color:var(--primary) !important;
  font-size:1.14rem;
  font-weight:700;
  text-decoration:none !important;
  white-space:nowrap;
  transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.rf-context-back:hover{
  border-color:var(--primary);
  background:var(--primary-mist);
  box-shadow:var(--shadow-sm);
}
.rf-context-actions{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
  margin-left:auto;
}
.rf-context-back--parent{
  background:var(--primary-mist);
  border-color:rgba(var(--primary-rgb),.24);
}
.rf-context-back--parent:hover{
  border-color:var(--primary);
  background:rgba(var(--primary-rgb),.12);
}
.rf-context-back--photo{
  background:rgba(var(--gold-rgb),.12);
  border-color:rgba(var(--gold-rgb),.34);
}
.rf-context-back--photo:hover{
  border-color:var(--primary);
  background:var(--primary-mist);
}

.rf-body{ padding:2.4rem 2.6rem 2.6rem; }

/* ---- Section + grid ---- */
.rf-section + .rf-section{
  margin-top:2.6rem;
  padding-top:2.4rem;
  border-top:1px dashed var(--border);
}
.rf-section-title{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin:0 0 1.6rem;
  font-family:var(--font-heading);
  font-size:1.22rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.rf-section-title i{
  width:2.4rem; height:2.4rem;
  display:inline-grid; place-items:center;
  border-radius:var(--r-xs);
  background:var(--primary-mist);
  color:var(--primary);
  font-size:1.15rem;
  letter-spacing:0;
}

.rf-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.5rem 1.7rem;
}
.rf-field--full{ grid-column:1 / -1; }

/* ---- Field ---- */
.rf-field{ min-width:0; }
.rf-label{
  display:flex;
  align-items:center;
  gap:.2rem;
  margin:0 0 .6rem;
  font-family:var(--font-heading);
  font-size:1.26rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:.005em;
}
.rf-hint{
  display:block;
  margin-top:.5rem;
  font-size:1.13rem;
  line-height:1.5;
  color:var(--text-muted);
}

.rf-control-wrap{ position:relative; }
.rf-field-icon{
  position:absolute;
  left:1.35rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--gray-400);
  font-size:1.45rem;
  line-height:1;
  pointer-events:none;
  transition:color var(--t-fast);
}
.rf-control-wrap--area .rf-field-icon{ top:1.75rem; transform:none; }
.rf-control-wrap:focus-within .rf-field-icon{ color:var(--primary); }

.rf-control{
  width:100%;
  height:4.8rem;
  padding:0 1.4rem 0 4.2rem;
  font-family:var(--font-body);
  font-size:1.4rem;
  font-weight:500;
  color:var(--text);
  background:var(--white);
  border:1px solid var(--gray-300);
  border-radius:var(--r-md);
  outline:none;
  line-height:1.4;
  transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  -webkit-appearance:none;
  appearance:none;
}
.rf-control::placeholder{ color:var(--gray-400); opacity:1; }
.rf-control:hover{ border-color:var(--gray-400); }
.rf-control:focus{
  border-color:var(--primary);
  background:var(--white);
  box-shadow:0 0 0 4px var(--primary-glow);
}
.rf-control:disabled{ background:var(--gray-50); color:var(--text-muted); cursor:not-allowed; }
.rf-control--plain{ padding-left:1.4rem; }

/* Select — custom chevron so it matches inputs on every browser */
select.rf-control{
  padding-right:4.2rem;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c737a' stroke-width='2.4' 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 1.4rem center;
  background-size:1.7rem;
  cursor:pointer;
}
select.rf-control:invalid,
select.rf-control.is-placeholder{ color:var(--gray-500); }

textarea.rf-control{
  height:auto;
  min-height:10.4rem;
  padding:1.35rem 1.4rem 1.35rem 4.2rem;
  line-height:1.65;
  resize:vertical;
}
textarea.rf-control--plain{ padding-left:1.4rem; }

/* Date input — normalise the native picker */
input.rf-control[type="date"]{ padding-right:1.2rem; }
input.rf-control[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:.55;
  transition:opacity var(--t-fast);
}
input.rf-control[type="date"]:hover::-webkit-calendar-picker-indicator{ opacity:1; }

/* ---- Alerts ---- */
.rf-alert{
  display:flex;
  align-items:flex-start;
  gap:1.1rem;
  padding:1.3rem 1.5rem;
  margin-bottom:2rem;
  border:1.5px solid;
  border-radius:var(--r-md);
  font-size:1.32rem;
  font-weight:600;
  line-height:1.55;
  animation:rfAlertIn .28s ease both;
}
.rf-alert i{ font-size:1.55rem; line-height:1.35; flex-shrink:0; }
.rf-alert--error{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.rf-alert--success{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.rf-alert--info{ background:var(--primary-mist); border-color:rgba(var(--primary-rgb),.2); color:var(--primary-dark); }
@keyframes rfAlertIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ---- Actions ---- */
.rf-actions{
  display:flex;
  align-items:center;
  gap:1.4rem;
  flex-wrap:wrap;
  margin-top:2.6rem;
  padding-top:2.2rem;
  border-top:1px solid var(--border-light);
}
.rf-actions .rf-note{
  font-size:1.2rem;
  color:var(--text-muted);
  line-height:1.5;
  flex:1 1 18rem;
  margin:0;
}
.rf-note-link{
  color:var(--primary);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
  white-space:nowrap;
}
.rf-note-link:hover{ color:var(--primary-dark); }
.rf-note-link i{ font-size:.95em; margin-left:.15rem; }
.rf-note-sep{ margin:0 .35rem; color:var(--text-muted); }
.rf-actions-btns{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-left:auto;
}
.rf-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  min-height:5rem;
  padding:1.3rem 2.8rem;
  border:0;
  border-radius:var(--r-md);
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--white) !important;
  font-family:var(--font-heading);
  font-size:1.45rem;
  font-weight:800;
  letter-spacing:.01em;
  cursor:pointer;
  text-decoration:none !important;
  box-shadow:0 8px 22px rgba(var(--primary-rgb),.32), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform var(--t-base), box-shadow var(--t-base), filter var(--t-base);
  white-space:nowrap;
}
.rf-submit:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 14px 30px rgba(var(--primary-rgb),.4), inset 0 1px 0 rgba(255,255,255,.18);
}
.rf-submit:active{ transform:translateY(0); }
.rf-submit i{ font-size:1.35rem; }
.rf-submit--ghost{
  background:var(--white) !important;
  color:var(--primary) !important;
  border:2px solid var(--primary);
  box-shadow:var(--shadow-sm);
}
.rf-submit--ghost:hover{ background:var(--primary-mist) !important; box-shadow:var(--shadow-md); }
.rf-submit--block{ width:100%; }
.rf-submit:disabled{ opacity:.6; cursor:not-allowed; transform:none !important; filter:none; }
/* A link cannot be `disabled`, so locked actions use aria-disabled */
.rf-submit[aria-disabled="true"]{
  opacity:.55;
  pointer-events:none;
  box-shadow:none;
  transform:none !important;
  filter:none;
}

/* ---- Sidebar ---- */
.rf-side{
  display:flex;
  flex-direction:column;
  gap:1.6rem;
  position:sticky;
  top:2rem;
}
.rf-side-card{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-lg);
  padding:1.9rem;
  box-shadow:var(--shadow-card);
}
.rf-side-card h3{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:0 0 1.5rem;
  font-family:var(--font-heading);
  font-size:1.32rem;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--text);
}
.rf-side-card h3 i{ color:var(--primary); font-size:1.3rem; }

/* Progress rail */
.rf-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.2rem; }
.rf-step{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:1.1rem;
  padding:.85rem 0;
}
.rf-step:not(:last-child)::after{
  content:'';
  position:absolute;
  left:1.55rem;
  top:4.3rem;
  bottom:-.2rem;
  width:2px;
  background:var(--border);
  border-radius:2px;
}
.rf-step.is-done:not(:last-child)::after{ background:var(--primary); }
.rf-step-dot{
  position:relative;
  z-index:1;
  width:3.2rem; height:3.2rem;
  flex-shrink:0;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--gray-100);
  color:var(--text-muted);
  font-family:var(--font-heading);
  font-size:1.24rem;
  font-weight:800;
  border:2px solid var(--white);
  box-shadow:0 0 0 1.5px var(--border);
  transition:all var(--t-base);
}
.rf-step-body{ padding-top:.15rem; min-width:0; }
.rf-step-title{
  display:block;
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:700;
  color:var(--text-secondary);
  line-height:1.3;
}
.rf-step-sub{
  display:block;
  margin-top:.15rem;
  font-size:1.13rem;
  color:var(--text-muted);
  line-height:1.45;
}
.rf-step.is-active .rf-step-dot{
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:var(--white);
  box-shadow:0 0 0 4px var(--primary-mist), 0 6px 14px rgba(var(--primary-rgb),.28);
}
.rf-step.is-active .rf-step-title{ color:var(--text); font-weight:800; }
.rf-step.is-done .rf-step-dot{
  background:var(--primary-mist);
  color:var(--primary);
  box-shadow:0 0 0 1.5px rgba(var(--primary-rgb),.28);
}
.rf-step.is-done .rf-step-title{ color:var(--primary); }

/* Checklist */
.rf-check{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem; }
.rf-check li{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  font-size:1.24rem;
  line-height:1.55;
  color:var(--text-secondary);
}
.rf-check li i{
  margin-top:.15rem;
  font-size:1.05rem;
  color:var(--primary);
  background:var(--primary-mist);
  width:2rem; height:2rem;
  display:inline-grid; place-items:center;
  border-radius:50%;
  flex-shrink:0;
}

/* ---- Student search / edit-student-info.php ------------------------- */
/* The suggestions are an absolutely positioned popover, so both the card
   and the page must let it escape instead of clipping it at the rounded
   edge. The card keeps its rounded top by rounding the head and accent bar
   explicitly. */
.rf-page--search,
.rf-card--search{ overflow:visible; }
/* The decorative blobs are clipped by .rf-page normally; this page opts out
   of clipping so the results popover can escape. Keep the soft background
   gradients but drop the two blobs instead of letting them widen the page. */
.rf-page--search::before,
.rf-page--search::after{ display:none; }
.rf-card--search::before,
.rf-card--search .rf-card-head{
  border-radius:calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px) 0 0;
}

.rf-card--search .autocomplete-suggestions{
  position:absolute;
  top:calc(100% + .6rem);
  left:0;
  right:0;
  z-index:90;
  max-height:min(34rem, 62vh);
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:0 18px 48px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.06);
}
.rf-card--search .autocomplete-suggestion{
  display:flex;
  align-items:center;
  gap:1.2rem;
  width:100%;
  margin:0;
  padding:1.05rem 1.3rem;
  border:0;
  border-bottom:1px solid var(--border-light);
  border-radius:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:background var(--t-fast);
}
.rf-card--search .autocomplete-suggestion:hover,
.rf-card--search .autocomplete-suggestion.is-active{ background:var(--primary-mist); }
.rf-card--search .autocomplete-suggestion:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:-2px;
}
.rf-card--search .autocomplete-suggestion:last-child{ border-bottom:none; }
.rf-card--search .suggestion-image,
.rf-card--search .no-image{
  width:4.2rem;
  height:4.2rem;
  flex-shrink:0;
  border-radius:50%;
  object-fit:cover;
  background:var(--gray-100);
  border:1px solid var(--border-light);
  place-items:center;
  color:var(--text-muted);
  font-size:1.7rem;
}
.rf-card--search .suggestion-image{ display:block; }
.rf-card--search .no-image{ display:grid; }
.rf-card--search .suggestion-content{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  flex:1 1 auto;
  min-width:0;
}
.rf-card--search .suggestion-name{
  font-family:var(--font-heading);
  font-size:1.35rem;
  font-weight:800;
  line-height:1.3;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rf-card--search .suggestion-details{
  font-size:1.15rem;
  line-height:1.4;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rf-card--search .suggestion-arrow{
  width:2.8rem;
  height:2.8rem;
  flex-shrink:0;
  margin-left:auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--gray-50);
  color:var(--gray-400);
  font-size:1.1rem;
  transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.rf-card--search .autocomplete-suggestion:hover .suggestion-arrow,
.rf-card--search .autocomplete-suggestion.is-active .suggestion-arrow{
  background:var(--primary);
  color:var(--white);
  transform:translateX(2px);
}

/* Empty, loading and error states */
.rf-card--search .autocomplete-empty{
  display:flex;
  align-items:flex-start;
  gap:1.1rem;
  padding:1.7rem 1.4rem;
  background:var(--white);
}
.rf-card--search .autocomplete-empty > i{
  width:3.8rem;
  height:3.8rem;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--gray-100);
  color:var(--gray-500);
  font-size:1.45rem;
}
.rf-card--search .autocomplete-empty--loading > i{
  background:var(--primary-mist);
  color:var(--primary);
}
.rf-card--search .autocomplete-empty strong{
  display:block;
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:800;
  color:var(--text);
  line-height:1.35;
}
.rf-card--search .autocomplete-empty span{
  display:block;
  margin-top:.15rem;
  font-size:1.14rem;
  line-height:1.5;
  color:var(--text-muted);
}

.rf-search-tip{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  margin-top:1.5rem;
  padding:1.1rem 1.3rem;
  border:1px solid rgba(var(--primary-rgb),.16);
  border-radius:var(--r-md);
  background:var(--primary-mist);
  color:var(--primary-dark);
  font-size:1.18rem;
  line-height:1.55;
}
.rf-search-tip i{ margin-top:.2rem; color:var(--primary); font-size:1.3rem; }

.rf-side-card p{
  margin:0 0 1.3rem;
  font-size:1.22rem;
  line-height:1.6;
  color:var(--text-secondary);
}
.rf-side-card .rf-submit--block{ width:100%; }
.rf-side-inline-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  width:100%;
  margin-top:.95rem;
  padding:.45rem 0;
  color:var(--primary) !important;
  font-size:1.2rem;
  font-weight:700;
  text-decoration:underline !important;
  text-underline-offset:2px;
}
.rf-side-inline-link:hover{ color:var(--primary-dark) !important; }
.rf-side-inline-link i{ font-size:1.15rem; }

/* =====================================================================
   2. PASSPORT PHOTO UPLOADER  (.pp-*)
   ===================================================================== */

.pp-page{
  padding:4.2rem 0 6.4rem;
  min-height:60vh;
  background:
    radial-gradient(1000px 500px at 10% -10%, rgba(var(--primary-rgb),.10), transparent 62%),
    radial-gradient(820px 420px at 100% 0%, rgba(var(--gold-rgb),.13), transparent 58%),
    var(--bg);
}
.pp-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 31rem;
  gap:2.4rem;
  align-items:start;
  max-width:1040px;
  margin:0 auto;
}
.pp-card{
  position:relative;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-xl);
  box-shadow:0 20px 54px rgba(15,23,42,.09), 0 2px 8px rgba(15,23,42,.04);
  padding:3.2rem 2.6rem 3rem;
  text-align:center;
  overflow:hidden;
}
.pp-card::before{
  content:'';
  position:absolute; inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg, var(--primary), var(--primary-light) 55%, var(--gold));
}
.pp-card-head{ margin-bottom:2.4rem; }
.pp-back{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin:0 0 1.2rem;
  padding:.55rem 1rem;
  border-radius:var(--r-sm);
  background:var(--white);
  border:1px solid var(--border);
  color:var(--primary) !important;
  font-size:1.14rem;
  font-weight:700;
  text-decoration:none !important;
  white-space:nowrap;
  transition:border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.pp-back:hover{
  border-color:var(--primary);
  background:var(--primary-mist);
  box-shadow:var(--shadow-sm);
}
.pp-card-head .pp-badge{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem 1.2rem;
  margin-bottom:1.1rem;
  border-radius:var(--r-full);
  background:var(--primary-mist);
  border:1px solid rgba(var(--primary-rgb),.18);
  color:var(--primary-dark);
  font-family:var(--font-heading);
  font-size:1.08rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.pp-card-head h2{
  margin:0 0 .6rem;
  font-family:var(--font-heading);
  font-size:2.05rem;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--text);
  line-height:1.2;
}
.pp-card-head p{
  margin:0 auto;
  max-width:44rem;
  font-size:1.32rem;
  line-height:1.6;
  color:var(--text-secondary);
}

/* ---- Avatar: preview + camera button attached to the lower-right edge ---- */
.pp-avatar-wrap{
  display:flex;
  justify-content:center;
  margin:0 auto 1.4rem;
}
.pp-avatar{
  position:relative;
  width:22rem;
  height:22rem;
  flex-shrink:0;
  /* the camera button lives OUTSIDE the circle, so no clipping here */
}
.pp-avatar-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 30%, var(--gray-100), var(--gray-200) 95%);
  border:4px solid var(--white);
  box-shadow:
    0 0 0 2px var(--gray-300),
    0 20px 44px rgba(15,23,42,.16),
    inset 0 0 0 1px rgba(0,0,0,.03);
  display:grid;
  place-items:center;
  transition:box-shadow var(--t-base), background var(--t-base);
}
.pp-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
}
.pp-avatar.has-photo img{ display:block; }
.pp-avatar.has-photo .pp-avatar-empty{ display:none; }
.pp-avatar-empty{
  display:grid;
  place-items:center;
  gap:.8rem;
  color:var(--gray-400);
  pointer-events:none;
}
.pp-avatar-empty i{ font-size:7rem; line-height:1; opacity:.75; }
.pp-avatar-empty span{
  font-family:var(--font-heading);
  font-size:1.12rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gray-500);
}

/* The camera button — centre lands on the 45° lower-right point of the circle */
.pp-avatar-btn{
  position:absolute;
  right:-.3rem;
  bottom:-.3rem;
  z-index:4;
  width:6.4rem;
  height:6.4rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:4px solid var(--white);
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--white);
  font-size:2.15rem;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(var(--primary-rgb),.42), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform var(--t-spring), box-shadow var(--t-base), filter var(--t-base);
}
.pp-avatar-btn:hover,
.pp-avatar-btn:focus-visible{
  transform:scale(1.09) rotate(7deg);
  filter:brightness(1.08);
  box-shadow:0 14px 30px rgba(var(--primary-rgb),.5), inset 0 1px 0 rgba(255,255,255,.22);
  outline:none;
}
.pp-avatar-btn:active{ transform:scale(.98); }
.pp-avatar-btn i{ line-height:1; }

/* Drag & drop + upload states */
.pp-avatar.is-dragover .pp-avatar-ring{
  box-shadow:
    0 0 0 4px var(--primary-glow),
    0 0 0 9px rgba(var(--primary-rgb),.10),
    0 20px 44px rgba(15,23,42,.16);
  background:var(--primary-mist);
}
.pp-avatar-loader{
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:50%;
  display:none;
  place-items:center;
  background:rgba(4,31,18,.55);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  color:var(--white);
}
.pp-avatar.is-uploading .pp-avatar-loader{ display:grid; }
.pp-avatar.is-uploading .pp-avatar-btn{ pointer-events:none; opacity:.45; }

.pp-spinner{
  width:4.2rem;
  height:4.2rem;
  border-radius:50%;
  border:3.5px solid rgba(255,255,255,.28);
  border-top-color:var(--white);
  animation:ppSpin .7s linear infinite;
}
@keyframes ppSpin{ to{ transform:rotate(360deg); } }

/* Success tick on the ring */
.pp-avatar.is-saved .pp-avatar-ring{
  box-shadow:
    0 0 0 2px var(--primary),
    0 0 0 7px var(--primary-mist),
    0 20px 44px rgba(15,23,42,.16);
}

.pp-hint{
  margin:0 auto 1.6rem;
  max-width:40rem;
  font-size:1.2rem;
  line-height:1.6;
  color:var(--text-muted);
}

/* Status line */
.pp-status{
  display:none;
  align-items:flex-start;
  justify-content:center;
  gap:.7rem;
  margin:0 auto 1.6rem;
  padding:1.1rem 1.4rem;
  max-width:44rem;
  border:1.5px solid;
  border-radius:var(--r-md);
  font-size:1.28rem;
  font-weight:600;
  line-height:1.5;
  text-align:left;
}
.pp-status.is-visible{ display:flex; }
.pp-status.is-uploading{ background:var(--primary-mist); border-color:rgba(var(--primary-rgb),.2); color:var(--primary-dark); }
.pp-status.is-success{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.pp-status.is-error{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }

/* Full-width fallback button (important on phones) */
.pp-choose{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  width:100%;
  min-height:5rem;
  padding:1.3rem 2rem;
  border-radius:var(--r-md);
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--white) !important;
  font-family:var(--font-heading);
  font-size:1.42rem;
  font-weight:800;
  cursor:pointer;
  text-decoration:none !important;
  box-shadow:0 8px 22px rgba(var(--primary-rgb),.32), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform var(--t-base), box-shadow var(--t-base), filter var(--t-base);
  margin:0;
}
.pp-choose:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 14px 30px rgba(var(--primary-rgb),.4), inset 0 1px 0 rgba(255,255,255,.18);
}
.pp-choose:active{ transform:translateY(0); }

.pp-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin-top:1.6rem;
}
.pp-continue{ /* share the .rf-submit look */ margin-top:0; }

/* ---- Sidebar summary ---- */
.pp-summary{ display:flex; flex-direction:column; gap:1.6rem; position:sticky; top:2rem; }
.pp-summary-card{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:1.9rem;
}
.pp-summary-card h3{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:0 0 1.5rem;
  font-family:var(--font-heading);
  font-size:1.32rem;
  font-weight:800;
  color:var(--text);
}
.pp-summary-card h3 i{ color:var(--primary); }
.pp-student{
  display:flex;
  align-items:center;
  gap:1.2rem;
  padding-bottom:1.5rem;
  margin-bottom:1.5rem;
  border-bottom:1px dashed var(--border);
}
.pp-student-avatar{
  width:4.6rem; height:4.6rem;
  flex-shrink:0;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--primary-mist);
  color:var(--primary);
  font-family:var(--font-heading);
  font-size:1.75rem;
  font-weight:800;
  border:2px solid var(--white);
  box-shadow:0 0 0 1.5px var(--border);
}
.pp-student-name{
  font-family:var(--font-heading);
  font-size:1.42rem;
  font-weight:800;
  color:var(--text);
  line-height:1.3;
  word-break:break-word;
}
.pp-student-meta{ margin-top:.25rem; font-size:1.15rem; color:var(--text-muted); }

.pp-info{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; }
.pp-info li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  font-size:1.24rem;
  color:var(--text-secondary);
  line-height:1.5;
}
.pp-info li span:first-child{ color:var(--text-muted); }
.pp-info li strong{
  font-family:var(--font-heading);
  font-weight:700;
  color:var(--text);
  text-align:right;
  word-break:break-word;
}
.pp-portal-no{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem 1.1rem;
  margin-top:1.5rem;
  width:100%;
  justify-content:center;
  border-radius:var(--r-md);
  background:var(--primary-mist);
  border:1px dashed rgba(var(--primary-rgb),.28);
  color:var(--primary-dark) !important;
  font-family:var(--font-heading);
  font-size:1.7rem;
  font-weight:800;
  letter-spacing:.08em;
}

/* =====================================================================
   3. CBT IMAGE UPLOADER  (.cbt-up)
   ---------------------------------------------------------------------
   One tile = thumbnail + label + invisible full-size file input.
   Click anywhere or drag a file onto it. The camera badge stays attached
   to the thumbnail instead of floating underneath it.
   ===================================================================== */

.cbt-up{
  position:relative;
  display:flex;
  align-items:center;
  gap:1.4rem;
  margin-top:.9rem;
  padding:1rem;
  background:var(--white);
  border:1.5px dashed var(--gray-300);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
  overflow:hidden;
}
/* The legacy sheet has `.ed_teacher_form label{display:block}` (0,1,1),
   which outranks `.cbt-up` (0,1,0). Re-assert the row at equal weight —
   this file loads later, so it wins the tie. */
label.cbt-up{ display:flex; }
.cbt-up:hover{
  border-color:var(--primary);
  background:var(--primary-mist);
}
/* The invisible file input is what Tab actually reaches — show that */
.cbt-up:focus-within{
  border-color:var(--primary);
  background:var(--primary-mist);
  box-shadow:0 0 0 4px var(--primary-glow);
}
.cbt-up.is-dragover{
  border-style:solid;
  border-color:var(--primary);
  background:var(--primary-mist);
  box-shadow:0 0 0 4px var(--primary-glow);
}
.cbt-up.is-saved{
  border-style:solid;
  border-color:rgba(var(--primary-rgb),.34);
  background:#f5fcf8;
}
.cbt-up.is-saved:hover{ background:var(--primary-mist); }

/* The whole tile is the hit-area — no separate button to align */
.cbt-up input[type="file"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  z-index:3;
}

.cbt-up-thumb{
  position:relative;
  width:8rem;
  height:8rem;
  flex-shrink:0;
  border-radius:var(--r-sm);
  overflow:hidden;
  background:var(--gray-100);
  border:1px solid var(--border-light);
  display:grid;
  place-items:center;
}
.cbt-up-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform var(--t-slow);
}
.cbt-up-thumb > i{
  font-size:2.8rem;
  color:var(--gray-400);
  transition:color var(--t-base), transform var(--t-base);
}
.cbt-up:hover .cbt-up-thumb > i{
  color:var(--primary);
  transform:scale(1.06);
}
.cbt-up:hover .cbt-up-thumb img{ transform:scale(1.04); }

/* Camera badge pinned to the lower-right corner of the thumbnail */
.cbt-up-cam{
  position:absolute;
  right:-.1rem;
  bottom:-.1rem;
  z-index:2;
  width:3.2rem;
  height:3.2rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:var(--white);
  font-size:1.3rem;
  border:2.5px solid var(--white);
  box-shadow:0 4px 10px rgba(var(--primary-rgb),.38);
  transition:transform var(--t-fast);
}
.cbt-up:hover .cbt-up-cam{ transform:scale(1.1); }

.cbt-up-loader{
  position:absolute;
  inset:0;
  z-index:4;
  display:none;
  place-items:center;
  background:rgba(4,31,18,.55);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
}
.cbt-up.is-uploading .cbt-up-loader{ display:grid; }
.cbt-up.is-uploading input[type="file"]{ pointer-events:none; }
.cbt-up-loader .cbt-spinner{
  width:2.8rem;
  height:2.8rem;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.3);
  border-top-color:var(--white);
  animation:ppSpin .7s linear infinite;
}

.cbt-up-meta{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  min-width:0;
  flex:1 1 auto;
}
.cbt-up-title{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-heading);
  font-size:1.28rem;
  font-weight:800;
  color:var(--text);
  line-height:1.3;
}
.cbt-up-title .cbt-up-tick{
  display:none;
  color:var(--primary);
  font-size:1.15rem;
}
.cbt-up.is-saved .cbt-up-tick{ display:inline-block; }
.cbt-up-name{
  font-size:1.15rem;
  color:var(--text-secondary);
  line-height:1.4;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cbt-up.is-saved .cbt-up-name{ color:var(--primary-dark); font-weight:600; }
.cbt-up-hint{
  font-size:1.06rem;
  color:var(--text-muted);
  line-height:1.4;
}
.cbt-up.is-error .cbt-up-name{ color:#b91c1c; font-weight:600; }

/* Wide variant for the two question images: a vertical card, so the
   preview spans the tile and the caption sits underneath it — the same
   "control attached to the image" language as the passport uploader. */
.cbt-up--wide{
  flex-direction:column;
  align-items:stretch;
  gap:.9rem;
  padding:.8rem;
  width:100%;
  max-width:100%;
}
.cbt-up--wide .cbt-up-thumb{
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  border-radius:var(--r-sm);
}
.cbt-up--wide .cbt-up-meta{ padding:0 .25rem .25rem; }

/* Two question images side by side */
.cbt-up-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.4rem;
  margin-top:.9rem;
  width:100%;
  max-width:100%;
}
.cbt-up-grid .cbt-up{ margin-top:0; }

/* =====================================================================
   4. AUTH ADDITIONS  (.auth-*)
   ===================================================================== */

/* page variant used on pages that already sit under the site header */
.auth-page-v2--site{
  min-height:auto;
  padding:4.6rem 2rem 6.4rem;
}
.auth-page-v2--site .container{
  position:relative;
  z-index:2;
  width:100%;
}

/* top accent bar (opt-in modifier so the `--dev` red gate is untouched) */
.auth-card-v2--accent{
  border-top:4px solid var(--primary);
}

.auth-field-hint{
  display:block;
  margin-top:.5rem;
  font-size:1.16rem;
  line-height:1.5;
  color:var(--text-muted);
}

/* Password toggle as a real <button> (keyboard accessible) */
button.pwd-toggle-v2{
  border:0;
  background:transparent;
  line-height:1;
  display:grid;
  place-items:center;
  font-size:1.5rem;
  padding:.7rem;
  width:auto;
  height:auto;
  color:var(--text-muted);
}
button.pwd-toggle-v2:hover{ color:var(--primary); background:var(--primary-mist); }
button.pwd-toggle-v2:focus-visible{
  outline:none;
  color:var(--primary);
  background:var(--primary-mist);
  box-shadow:0 0 0 3px var(--primary-glow);
}

.auth-divider{
  position:relative;
  margin:2.2rem 0 1.5rem;
  text-align:center;
}
.auth-divider::before{
  content:'';
  position:absolute;
  left:0; right:0; top:50%;
  height:1px;
  background:var(--border-light);
}
.auth-divider span{
  position:relative;
  display:inline-block;
  padding:0 1.2rem;
  background:var(--white);
  font-family:var(--font-heading);
  font-size:1.02rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.auth-extras{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  flex-wrap:wrap;
}
.auth-alt-link{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.7rem 1.2rem;
  border-radius:var(--r-full);
  border:1.5px solid var(--border-light);
  background:var(--white);
  color:var(--text-secondary) !important;
  font-family:var(--font-heading);
  font-size:1.18rem;
  font-weight:700;
  text-decoration:none !important;
  transition:all var(--t-fast);
}
.auth-alt-link:hover{
  color:var(--primary) !important;
  border-color:rgba(var(--primary-rgb),.3);
  background:var(--primary-mist);
  transform:translateY(-1px);
}
.auth-alt-link i{ font-size:1.15rem; color:var(--primary); }

/* Role / trust chips under the form */
.auth-chips{
  display:flex;
  justify-content:center;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:1.8rem;
}
.auth-chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .95rem;
  border-radius:var(--r-full);
  background:var(--gray-50);
  border:1px solid var(--border-light);
  color:var(--text-muted);
  font-size:1.06rem;
  font-weight:600;
}
.auth-chip i{ color:var(--primary); font-size:1rem; }

/* =====================================================================
   5. REGISTRATION COMPLETE  (.sf-*)
   ---------------------------------------------------------------------
   The last screen of the admin-led registration flow: one clear success
   message, the student's full details, and the two things an admin does
   next — edit this student or start the next one immediately.
   ===================================================================== */

.sf-success{
  display:flex;
  align-items:center;
  gap:1.6rem;
  flex-wrap:wrap;
  margin:0 0 1.8rem;
  padding:1.9rem 2.1rem;
  background:linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 55%, var(--white) 100%);
  border:1px solid #a7f3d0;
  border-left:5px solid #059669;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
}
.sf-success-icon{
  width:5.4rem;
  height:5.4rem;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg, #10b981, #059669);
  color:var(--white);
  font-size:2.4rem;
  box-shadow:0 10px 24px rgba(5,150,105,.3);
}
.sf-success-copy{ flex:1 1 28rem; min-width:0; }
.sf-success-copy h2{
  margin:0 0 .35rem;
  font-family:var(--font-heading);
  font-size:2rem;
  font-weight:800;
  color:#064e3b;
  letter-spacing:-.01em;
}
.sf-success-copy p{
  margin:0;
  font-size:1.3rem;
  line-height:1.55;
  color:#065f46;
}
.sf-success-copy strong{ color:#022c22; }
.sf-success-actions{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
}

/* Buttons shared by the success bar */
.sf-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  min-height:4.6rem;
  padding:0 1.8rem;
  border-radius:var(--r-md);
  border:1px solid transparent;
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:800;
  line-height:1.2;
  text-decoration:none !important;
  cursor:pointer;
  white-space:nowrap;
  transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.sf-btn--next{
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:var(--white) !important;
  box-shadow:0 8px 20px rgba(var(--primary-rgb),.28);
}
.sf-btn--next:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(var(--primary-rgb),.36);
}
.sf-btn--edit{
  background:var(--white);
  border-color:var(--gray-300);
  color:var(--text) !important;
}
.sf-btn--edit:hover{
  background:var(--primary-mist);
  border-color:var(--primary);
  color:var(--primary) !important;
  transform:translateY(-1px);
}
.sf-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--primary-glow);
}
.sf-btn-chevron{
  font-size:1rem;
  opacity:.8;
  margin-left:.1rem;
  transition:transform var(--t-fast);
}
.sf-btn[aria-expanded="true"] .sf-btn-chevron{ transform:rotate(180deg); }

/* The two ways to register the next student */
.sf-next-options{
  margin:0 0 1.8rem;
  padding:1.6rem;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  animation:sfDrop .18s ease both;
}
@keyframes sfDrop{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}
.sf-next-title{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:0 0 1.1rem;
  font-family:var(--font-heading);
  font-size:1.24rem;
  font-weight:800;
  color:var(--text-secondary);
}
.sf-next-title i{ color:var(--primary); }
.sf-next-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.1rem;
}
.sf-option{
  position:relative;
  display:flex;
  align-items:center;
  gap:1.25rem;
  padding:1.55rem 1.6rem;
  border:1px solid transparent;
  border-radius:14px;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--white) !important;
  text-decoration:none !important;
  overflow:hidden;
  box-shadow:0 12px 26px rgba(var(--primary-rgb),.26), inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.sf-option::before{
  content:'';
  position:absolute;
  top:-5.5rem;
  right:-3.5rem;
  width:13rem;
  height:13rem;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  pointer-events:none;
}
.sf-option::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
}
.sf-option:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:0 16px 34px rgba(var(--primary-rgb),.36), inset 0 1px 0 rgba(255,255,255,.2);
}
.sf-option:active{
  transform:translateY(0);
  filter:brightness(.98);
}
.sf-option:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--primary-glow), 0 12px 26px rgba(var(--primary-rgb),.3);
}
.sf-option--alt{
  background:linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow:0 12px 26px rgba(217,119,6,.26), inset 0 1px 0 rgba(255,255,255,.18);
}
.sf-option--alt:hover{
  box-shadow:0 16px 34px rgba(217,119,6,.36), inset 0 1px 0 rgba(255,255,255,.22);
}
.sf-option--alt:focus-visible{
  box-shadow:0 0 0 4px rgba(217,119,6,.22), 0 12px 26px rgba(217,119,6,.3);
}
.sf-option-icon{
  width:4.6rem;
  height:4.6rem;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
  color:var(--white);
  font-size:1.9rem;
}
.sf-option--alt .sf-option-icon{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.24);
  color:var(--white);
}
.sf-option-body{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  flex:1;
  min-width:0;
}
.sf-option-body strong{
  font-family:var(--font-heading);
  font-size:1.32rem;
  font-weight:800;
  line-height:1.3;
  color:var(--white);
}
.sf-option-body span{
  font-size:1.16rem;
  line-height:1.45;
  color:rgba(255,255,255,.82);
}
.sf-option-arrow{
  color:rgba(255,255,255,.9);
  font-size:1.45rem;
  transition:transform var(--t-fast), color var(--t-fast);
}
.sf-option:hover .sf-option-arrow{
  color:var(--white);
  transform:translateX(4px);
}

/* Summary-card edit links */
.sf-page .stu-view-info-head{ flex-wrap:wrap; }
.sf-card-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-left:auto;
  padding:.2rem .1rem;
  font-size:1.12rem;
  font-weight:700;
  color:var(--primary) !important;
  text-decoration:none !important;
}
.sf-card-link + .sf-card-link{ margin-left:.9rem; }
.sf-card-link:hover{ text-decoration:underline !important; }

/* Initials fallback when the passport is missing */
.sf-avatar-initials{
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.18);
  color:var(--white);
  font-family:var(--font-heading);
  font-size:2.6rem;
  font-weight:800;
  letter-spacing:.04em;
}

/* Muted "Not provided" text inside summary rows */
.sf-page .stu-view-info-value .sf-muted{
  color:var(--text-muted);
  font-weight:500;
}

.sf-footnote{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  margin:1.6rem 0 0;
  font-size:1.18rem;
  line-height:1.55;
  color:var(--text-muted);
}
.sf-footnote i{ color:var(--primary); margin-top:.15rem; }

/* =====================================================================
   6. RESPONSIVE — MOBILE FIRST-PRINCIPLES
   ---------------------------------------------------------------------
   * 1 column everywhere below 992px (no side-by-side squeeze)
   * 16px inputs on phones (stops iOS zoom)
   * 48px minimum touch targets
   * sanity gutters so cards never touch the screen edge
   ===================================================================== */

@media (max-width: 1024px){
  .rf-layout,
  .rf-layout--narrow,
  .pp-layout{
    grid-template-columns:minmax(0,1fr);
    gap:2rem;
    max-width:720px;
  }
  .rf-side,
  .pp-summary{ position:static; }
  .rf-side{ order:2; }
  .pp-summary{ order:2; }

  /* Completion summary: 4 stats -> 2 x 2 on tablets */
  .sf-page .stu-view-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width: 767px){
  .rf-page,
  .pp-page{ padding:2.4rem 0 4.2rem; }
  .rf-page .container,
  .pp-page .container{ padding-left:1.4rem; padding-right:1.4rem; }

  .rf-card-head,
  .pp-card{ border-radius:var(--r-lg); }
  .rf-card-head{
    padding:1.9rem 1.7rem 1.7rem;
    gap:1.1rem;
    align-items:flex-start;
  }
  .rf-card-icon{ width:4.4rem; height:4.4rem; font-size:1.75rem; border-radius:var(--r-md); }
  .rf-card-head h2{ font-size:1.75rem; }
  .rf-card-head p{ font-size:1.22rem; }
  .rf-body{ padding:1.9rem 1.7rem 2.1rem; }

  .rf-grid{ grid-template-columns:minmax(0,1fr); gap:1.4rem; }

  /* 16px inputs — anything smaller makes iOS Safari zoom on focus */
  .rf-control,
  select.rf-control,
  textarea.rf-control{ font-size:1.6rem; }
  .rf-control{ height:5.2rem; }
  textarea.rf-control{ min-height:9.6rem; }
  .rf-label{ font-size:1.32rem; }
  .rf-hint{ font-size:1.16rem; }

  .rf-actions{ flex-direction:column-reverse; align-items:stretch; gap:1.1rem; }
  .rf-actions .rf-note{ text-align:center; flex:none; }
  .rf-actions-btns{ width:100%; margin-left:0; }
  .rf-submit{ width:100%; }

  .rf-context{ padding:1.1rem 1.2rem; }
  .rf-context-actions{ width:100%; margin-left:0; }
  .rf-context-actions .rf-context-back{ flex:1 1 100%; }
  .rf-context-back{ width:100%; justify-content:center; }

  /* Student search popover */
  .rf-card--search .autocomplete-suggestions{ max-height:min(30rem, 58vh); }
  .rf-card--search .autocomplete-suggestion{ gap:1rem; padding:.95rem 1rem; }
  .rf-card--search .suggestion-image,
  .rf-card--search .no-image{ width:3.8rem; height:3.8rem; font-size:1.5rem; }
  .rf-card--search .suggestion-name{ font-size:1.28rem; }
  .rf-card--search .suggestion-details{ font-size:1.1rem; }
  .rf-card--search .suggestion-arrow{ width:2.6rem; height:2.6rem; }
  .rf-search-tip{ font-size:1.16rem; }

  .rf-side-card,
  .pp-summary-card{ padding:1.6rem; border-radius:var(--r-md); }

  /* -- Passport -- */
  .pp-card{ padding:2.2rem 1.6rem 2.2rem; }
  .pp-card-head{ margin-bottom:1.8rem; }
  .pp-card-head h2{ font-size:1.8rem; }
  .pp-card-head p{ font-size:1.24rem; }
  .pp-avatar{ width:17rem; height:17rem; }
  .pp-avatar-btn{ width:5.4rem; height:5.4rem; font-size:1.75rem; border-width:3.5px; }
  .pp-avatar-empty i{ font-size:5.6rem; }
  .pp-avatar-empty span{ font-size:1rem; }
  .pp-hint{ font-size:1.16rem; }

  /* -- CBT uploader -- */
  .cbt-up{ padding:.9rem; gap:1.1rem; }
  .cbt-up-thumb{ width:7rem; height:7rem; }
  .cbt-up--wide .cbt-up-meta{ padding:.2rem .2rem .3rem; }
  .cbt-up-grid{ grid-template-columns:minmax(0,1fr); gap:1rem; }
  .cbt-up-name{ font-size:1.1rem; }

  /* -- Auth -- */
  .auth-page-v2--site{ padding:2.6rem 1.2rem 4rem; }
  .auth-chips{ gap:.45rem; }
  .auth-chip{ font-size:1rem; }

  /* -- Registration complete -- */
  .sf-success{ padding:1.5rem; gap:1.2rem; }
  .sf-success-icon{ width:4.6rem; height:4.6rem; font-size:2rem; }
  .sf-success-copy h2{ font-size:1.7rem; }
  .sf-success-copy p{ font-size:1.22rem; }
  .sf-success-actions{ width:100%; }
  .sf-btn{ flex:1 1 14rem; }
  .sf-next-options{ padding:1.3rem; }
  .sf-next-grid{ grid-template-columns:minmax(0,1fr); }
  .sf-page .stu-view-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:.9rem; }
  .sf-page .stu-view-info-grid{ grid-template-columns:minmax(0,1fr); }
  .sf-page .stu-view-profile-top{ padding:1.8rem 1.6rem; gap:1.4rem; }
  .sf-page .stu-view-avatar{ width:7.4rem; height:7.4rem; }
  .sf-page .stu-view-name-wrap h2{ font-size:1.7rem; }
  .sf-page .stu-view-stat-card{ padding:1.2rem .8rem; }
  .sf-page .stu-view-stat-value{ font-size:1.45rem; }
}

@media (max-width: 420px){
  .rf-page .container,
  .pp-page .container{ padding-left:1.1rem; padding-right:1.1rem; }
  .rf-card-head{ padding:1.6rem 1.4rem 1.5rem; }
  .rf-card-icon{ width:3.9rem; height:3.9rem; font-size:1.5rem; }
  .rf-card-head h2{ font-size:1.58rem; }
  .rf-body{ padding:1.6rem 1.4rem 1.8rem; }
  .pp-card{ padding:1.9rem 1.3rem 2rem; }
  .pp-avatar{ width:15rem; height:15rem; }
  .pp-avatar-btn{ width:4.9rem; height:4.9rem; font-size:1.55rem; }
  .pp-student-name{ font-size:1.32rem; }
  .pp-info li{ font-size:1.18rem; }
  .pp-portal-no{ font-size:1.5rem; }
  .auth-page-v2--site{ padding:2rem .9rem 3.2rem; }
}

/* Auth on phones: one consistent gutter for student + admin login, 16px
   controls (stops iOS zoom) and a full 44px password-toggle target. */
@media (max-width: 767px){
  .auth-page-v2,
  .auth-page-v2.auth-page-v2--site{ padding-left:1.6rem; padding-right:1.6rem; }
  .auth-page-v2 .container{ padding-left:0; padding-right:0; }
  .auth-page-v2 .form-control-v2{ font-size:1.6rem; }
  button.pwd-toggle-v2{
    width:4.4rem;
    height:4.4rem;
    right:.35rem;
    padding:0;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .rf-alert,
  .pp-avatar-btn,
  .pp-choose,
  .rf-submit,
  .cbt-up,
  .cbt-up-thumb img,
  .cbt-up-cam{ transition:none !important; animation:none !important; }
  .pp-spinner,
  .cbt-spinner{ animation-duration:2s !important; }
}