/* =========================================================
   THE LOGIN  (studentregistration.html, tutorregistration.html, instituteregistration.html - js/phone-login.js adds
   the pieces)
   Phones and computers alike: the email step as one login - the logo and the name in the middle, Student | Tutor, the email
   box with its label and the round arrow inside, and what we promise under it.
   ========================================================= */
/* (once phones only - now the same login on a computer: see the end) */
@media all {
  body.pl-on #emailPage .intro, body.pl-on #emailPage .rf-card, body.pl-on #emailPage .rf-arrows { display: none !important; }
  body.pl-on #emailPage { position: relative; overflow: hidden; }
  body.pl-on #emailPage::before { content: none; }
  body.pl-on #emailPage .container, body.pl-on #emailPage .rf, body.pl-on #emailPage .rf-main { display: block; width: auto; max-width: none; min-width: 0; margin: 0; padding: 0; }
  body.pl-on #emailPage .container { padding: 26px 16px 28px; }

  /* the logo, the name, the line */
  .pl-head { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .pl-logo { width: 84px; height: auto; }
  .pl-logo.is-light { display: none; }
  html[data-theme="light"] .pl-logo.is-dark { display: none; }
  html[data-theme="light"] .pl-logo.is-light { display: block; }
  .pl-name { margin-top: 8px; font: 800 24px/1.1 Sora, Inter, -apple-system, "Segoe UI", sans-serif; letter-spacing: -0.02em; color: #f5f5f5; }
  .pl-name em { font-style: normal; color: #22c55e; }
  .pl-tag { margin-top: 6px; font: 600 10.5px/1 Inter, -apple-system, sans-serif; letter-spacing: 0.32em; text-transform: uppercase; color: #9ca3af; }
  .pl-sub { margin: 18px auto 0; text-wrap: balance; font: 400 15.5px/1.45 Inter, -apple-system, sans-serif; color: #b3b8bf; }

  /* Student | Tutor */
  .pl-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 320px; margin: 20px auto 0; padding: 4px;
    border-radius: 999px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
  .pl-switch button { position: relative; z-index: 1; display: grid; place-items: center; height: 42px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: none; color: #9ca3af;
    font: 700 15px/1 Inter, -apple-system, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .pl-switch button { transition: color 0.2s ease; }
  .pl-switch button.is-on { color: #ffffff; }
  .pl-switch i { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #16a34a; border: 0; box-shadow: none;
    transition: left 0.22s cubic-bezier(0.3, 0.9, 0.4, 1); }
  .pl-switch.is-tutor i { left: calc(50%); }

  /* the email card */
  body.pl-on #emailPage .email-card { margin: 20px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  body.pl-on #emailPage .email-card .section { padding: 0; margin: 0; }
  body.pl-on #emailPage .em-field { align-items: stretch; }
  body.pl-on #emailPage .pl-label { display: block; margin: 0 0 8px 4px; padding: 0; font: 600 14.5px/1.2 Inter, -apple-system, sans-serif; letter-spacing: 0; text-transform: none; text-align: left; color: #e5e7eb; }
  body.pl-on #emailPage .em-box { width: 100% !important; }
  body.pl-on #emailPage .em-box::before { content: ""; position: absolute; z-index: 1; left: 20px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: #9ca3af; pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") center / contain no-repeat; }
  body.pl-on #emailPage .em-box .float-field > span { display: none; }
  body.pl-on #emailPage .em-box::before { transition: opacity 0.15s ease; }
  body.pl-on #emailPage .em-box.has-text::before { opacity: 0; }
  body.pl-on #emailPage .em-box.has-text .float-field input[type="email"] { padding-left: 22px; }
  body.pl-on #emailPage .em-box .float-field input[type="email"] { height: 56px; padding: 0 62px 0 50px; text-align: left; font-size: 16px; border-radius: 999px; }
  body.pl-on #emailPage .em-box .float-field input[type="email"]::placeholder { color: #6b7280; opacity: 1; }
  body.pl-on #emailPage .em-go { right: 6px; width: 44px; height: 44px; border-radius: 50%; }
  body.pl-on #emailPage .field-error, body.pl-on #emailPage .message { text-align: center; }

  /* what we promise */
  .pl-trust { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 16px; padding: 16px; border-radius: 22px;
    background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
  .pl-who { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-right: 12px; border-right: 1px solid rgba(255, 255, 255, 0.08); text-align: center; }
  .pl-avs { display: flex; }
  .pl-avs i { display: grid; place-items: center; width: 38px; height: 38px; margin-left: -9px; border-radius: 50%; font: 800 12px/1 Inter, sans-serif; font-style: normal;
    box-shadow: 0 0 0 2.5px #0b0d0c; }
  .pl-avs i:first-child { margin-left: 0; }
  /* a face changing: the round stays; inside it the new face glides up in from below, the old one glides up out,
     softly blurred - its colour with it; a light ring passes round the round */
  .pl-avs i { position: relative; overflow: hidden; isolation: isolate; background: #1f2937; }
  .pl-avs .pl-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), filter 0.85s ease; }
  .pl-avs .pl-face.is-next { transform: translateY(100%); filter: blur(2px); transition: none; }
  .pl-avs .pl-face.is-gone { transform: translateY(-100%); filter: blur(2px); }
  .pl-avs i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 2;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0); }
  .pl-avs i.is-turn::after { animation: plTurn 1.1s ease-out; }
  @keyframes plTurn { 0% { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0); } 35% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75); } 100% { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0); } }
  @media (prefers-reduced-motion: reduce) { .pl-avs .pl-face { transition: opacity 0.4s ease; } .pl-avs .pl-face.is-next, .pl-avs .pl-face.is-gone { transform: none; filter: none; opacity: 0; } .pl-avs i.is-turn::after { animation: none; } }
  .pl-avs .pl-face[data-t="t1"] { background: linear-gradient(135deg, #86efac, #22c55e); color: #052e16; }
  .pl-avs .pl-face[data-t="t2"] { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #451a03; }
  .pl-avs .pl-face[data-t="t3"] { background: linear-gradient(135deg, #a5b4fc, #6366f1); color: #ffffff; }
  .pl-avs .pl-face[data-t="t4"] { background: linear-gradient(135deg, #f9a8d4, #ec4899); color: #ffffff; }
  .pl-avs .pl-face[data-t="t5"] { background: linear-gradient(135deg, #7dd3fc, #0ea5e9); color: #082f49; }
  .pl-avs .pl-face[data-t="t6"] { background: linear-gradient(135deg, #fdba74, #f97316); color: #431407; }
  .pl-who small { font: 500 12.5px/1.35 Inter, -apple-system, sans-serif; color: #d1d5db; }
  .pl-who b { color: #22c55e; }
  .pl-trust ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .pl-trust li { display: flex; align-items: center; gap: 9px; font: 500 13px/1.2 Inter, -apple-system, sans-serif; color: #e5e7eb; white-space: nowrap; }
  .pl-trust li svg { width: 19px; height: 19px; flex: none; fill: none; stroke: #22c55e; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

  /* light */
  html[data-theme="light"] .pl-name { color: #111418; }
  html[data-theme="light"] .pl-name em { color: #16a34a; }
  html[data-theme="light"] .pl-tag { color: #6b7280; }
  html[data-theme="light"] .pl-sub { color: #4b5563; }
  html[data-theme="light"] .pl-switch { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
  html[data-theme="light"] .pl-switch button { color: #6b7280; }
  html[data-theme="light"] .pl-switch button.is-on { color: #ffffff; }
  html[data-theme="light"] .pl-switch i { background: #16a34a; box-shadow: none; }
  html[data-theme="light"] body.pl-on #emailPage .email-card { background: none; box-shadow: none; }
  html[data-theme="light"] .pl-trust { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07), 0 18px 40px -30px rgba(15, 23, 42, 0.35); }
  html[data-theme="light"] body.pl-on #emailPage .pl-label { color: #111418; }
  html[data-theme="light"] .pl-who { border-right-color: rgba(0, 0, 0, 0.08); }
  html[data-theme="light"] .pl-who small, html[data-theme="light"] .pl-trust li { color: #374151; }
  html[data-theme="light"] .pl-avs i { box-shadow: 0 0 0 2.5px #ffffff; }


  /* ---------- the code step ---------- */
  body.pl-on #otpPage .container { padding: 26px 16px 28px; max-width: none; }
  .pl-otp-head .pl-logo { width: 68px; }
  .pl-otp-head .pl-name { font-size: 25px; }
  .pl-otp-head .pl-sub { margin-top: 10px; font-size: 14.5px; }
  body.pl-on #otpPage .otp-card { margin: 20px 0 0; padding: 20px 14px 16px; border-radius: 24px; background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
  body.pl-on #otpPage .otp-sent { margin: 0 0 16px; text-align: center; font-size: 13px; color: #9ca3af; }
  body.pl-on #otpPage .otp-email { display: block; margin-top: 4px; font-size: 15.5px; color: #f3f4f6; word-break: break-all; }
  body.pl-on #otpPage .otp-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 340px; margin: 0 auto; }
  body.pl-on #otpPage .otp-box { width: 100%; height: 58px; padding: 0; border-radius: 16px; font: 700 24px/1 Inter, -apple-system, sans-serif; text-align: center;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: #f9fafb; }
  body.pl-on #otpPage .otp-box:focus { outline: 0; border-color: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18); }
  body.pl-on #otpPage .otp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 18px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  body.pl-on #otpPage .otp-pair-btn { height: 46px; border-radius: 999px; font: 700 14px/1 Inter, -apple-system, sans-serif; border: 0; }
  body.pl-on #otpPage #otpBackButton { background: rgba(255, 255, 255, 0.07); color: #e5e7eb; }
  /* one pill cut in two, as on a computer: square where the two meet */
  body.pl-on #otpPage #otpBackButton { border-radius: 999px 0 0 999px; }
  body.pl-on #otpPage #resendButton { border-radius: 0 999px 999px 0; }
  body.pl-on #otpPage #resendButton { background: #22c55e; color: #04160b; }
  body.pl-on #otpPage #resendButton:disabled { background: rgba(34, 197, 94, 0.14); color: #4ade80; opacity: 1; }
  /* only what is needed: Code sent to (the email), the six boxes, Change Email | Resend, and the Spam line as a note */
  .pl-otp-head { display: none !important; }
  body.pl-on #otpPage .otp-card { margin-top: 0; }
  /* on one line: js/phone-login.js makes the words smaller till they fit the width */
  .pl-otp-tip { display: flex; align-items: center; gap: 7px; margin: 16px 0 0; padding: 11px 11px; border-radius: 14px; text-align: left; white-space: nowrap; overflow: hidden;
    font: 500 13px/1.45 Inter, -apple-system, sans-serif; color: #fb923c; background: rgba(249, 115, 22, 0.12); box-shadow: inset 3px 0 0 #f97316; }
  .pl-otp-tip .pl-tw { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .pl-otp-tip .pl-tt { display: inline-flex; }
  .pl-otp-tip .pl-tt i { flex: none; font-style: normal; }
  .pl-otp-tip.is-run .pl-tw { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 14px), transparent); }
  .pl-otp-tip.is-run .pl-tt { animation: plTip var(--pl-tip-s, 10s) linear infinite; }
  .pl-otp-tip.is-run .pl-tt i { padding-right: 40px; }
  @keyframes plTip { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .pl-otp-tip svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  html[data-theme="light"] .pl-otp-tip { color: #c2410c; background: #fff7ed; }
  /* the code step open, not in a box, in the middle of what is seen between the header and the menu at the bottom */
  body.pl-on #otpPage:not(.hidden):not([hidden]) { justify-content: center;
    min-height: calc(100svh - var(--ut-head-h, 0px) - var(--pl-bar)); }
  body.pl-on #otpPage .container { padding-top: 12px; padding-bottom: 12px; }
  body.pl-on #otpPage .otp-card, html[data-theme="light"] body.pl-on #otpPage .otp-card { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  html[data-theme="light"] body.pl-on #otpPage .otp-email { color: #111418; }
  html[data-theme="light"] body.pl-on #otpPage .otp-box { background: #f3f4f6; border-color: rgba(0, 0, 0, 0.1); color: #111418; }
  html[data-theme="light"] body.pl-on #otpPage #otpBackButton { background: #f3f4f6; color: #111418; }
  html[data-theme="light"] body.pl-on #otpPage #resendButton { color: #ffffff; background: #16a34a; }
  html[data-theme="light"] body.pl-on #otpPage #resendButton:disabled { background: rgba(22, 163, 74, 0.12); color: #15803d; }
}

/* ---------- the page around it: the header at the top, the login in the middle of what is left of the screen, the
   footer starting below it (on a phone: between the header and the menu at the bottom, the footer under the menu),
   whatever the screen's height ---------- */
:root { --pl-bar: 0px; }
@media (max-width: 760px) { :root { --pl-bar: calc(62px + env(safe-area-inset-bottom, 0px)); } }
body.pl-on #emailPage:not(.hidden):not([hidden]) { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;
  min-height: calc(100vh - var(--ut-head-h, 0px) - var(--pl-bar)); min-height: calc(100svh - var(--ut-head-h, 0px) - var(--pl-bar)); }
body.pl-on #otpPage:not(.hidden):not([hidden]) { display: flex; flex-direction: column; box-sizing: border-box; }
/* (the student's page lets its parts grow to fill the page: here the login is only as tall as the room above) */
body.pl-on #emailPage:not(.hidden):not([hidden]) { flex: 0 0 auto; padding-top: 0; padding-bottom: 0; }
body.pl-on #emailPage .container.rf { width: auto; }
/* a short phone (an iPhone SE...): a little less room round each part, so all of it fits between the header and the menu */
@media (max-width: 760px) and (max-height: 700px) {
  body.pl-on #emailPage .container { padding-top: 12px; padding-bottom: 12px; }
  body.pl-on #emailPage .pl-logo { width: 62px; }
  body.pl-on #emailPage .pl-name { margin-top: 4px; font-size: 22px; }
  body.pl-on #emailPage .pl-sub { margin-top: 10px; font-size: 14.5px; }
  body.pl-on #emailPage .pl-switch { margin-top: 12px; }
  body.pl-on #emailPage .email-card { margin-top: 12px; }
  body.pl-on #emailPage .pl-trust { margin-top: 12px; padding: 12px; }
}

/* ---------- a computer: the same login, as a column in the middle ---------- */
@media (min-width: 761px) {
  body.pl-on #emailPage .container, body.pl-on #otpPage .container { width: 100%; max-width: 460px; margin: 0 auto; padding: 32px 0; box-sizing: border-box; }
  body.pl-on #emailPage .container.rf { width: 100%; }   /* (the student's page: its own width rule made it only as wide as its words) */
  body.pl-on #emailPage::after { content: none; }
  .pl-logo { width: 92px; }
  .pl-name { font-size: 26px; }
  .pl-sub { font-size: 17px; }
}

/* ---------- from one step to the next (the email -> the form or the code -> done): the new step comes in softly -
   a short fade and rise - instead of appearing at once ---------- */
@keyframes plStepIn { from { opacity: 0; } to { opacity: 1; } }
body.pl-on #registrationPage:not(.hidden):not([hidden]),
body.pl-on #otpPage:not(.hidden):not([hidden]),
body.pl-on #successPage:not(.hidden):not([hidden]) { animation: plStepIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) {
  body.pl-on #registrationPage, body.pl-on #otpPage, body.pl-on #successPage { animation: none !important; }
}

/* the shortest phones (an iPhone SE first model, 568px high): a little less again, so it all fits between the header
   and the menu */
@media (max-width: 760px) and (max-height: 600px) {
  body.pl-on #emailPage .container { padding-top: 6px; padding-bottom: 6px; }
  body.pl-on #emailPage .pl-sub { margin-top: 8px; }
  body.pl-on #emailPage .pl-switch { margin-top: 10px; }
  body.pl-on #emailPage .email-card { margin-top: 10px; }
  body.pl-on #emailPage .pl-trust { margin-top: 10px; }
}

/* ---------- the login only once it is laid out (js/phone-login.js): the page's older layout never shows for a frame
   first. (If the script never came, it shows anyway after a moment.) ---------- */
html:not(.admin-embed) body:not(.pl-on) #emailPage:not(.hidden) { visibility: hidden; animation: plReveal 0s linear 1.2s forwards; }
@keyframes plReveal { to { visibility: visible; } }
/* (the height used is the screen's smallest - with the browser's bars showing: when they slide away on scrolling the
   page does not re-centre under the finger; "dvh" changed all through a scroll and the login moved with it) */

/* Student | Tutor | Institute: three, the green pill under the one picked */
.pl-switch.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pl-switch.is-3 button { font-size: 14.5px; }
.pl-switch.is-3 i { width: calc((100% - 8px) / 3); left: calc(4px + var(--pl-i, 0) * (100% - 8px) / 3); }
@media (max-width: 760px) {
  /* the box under it a little wider than the switch: the room at the sides made smaller */
  body.pl-on #emailPage .container { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 350px) { .pl-switch.is-3 button { font-size: 13.5px; } }