/* ============================================================================
   MEGA sign-in page.

   Loaded only by the login template, after tokens.css, base.css and
   components.css. The login page has no Bootstrap, so the shared THSTI files
   can be used there as they are.

   First the few brand.css rules the sign-in card depends on (VTS loads all
   of brand.css before signin.css; only these reach the login page), then the
   VTS signin.css verbatim, then the MEGA lockup: a lettermark where VTS has
   its logo file.
   ========================================================================= */

/* ---- from brand.css --------------------------------------------------------- */

:root {
  --shell-bg:          #2A2C2F;
  --shell-active:      var(--thsti-maroon);
  --shell-rule-active: var(--thsti-orange);

  /* type one step larger throughout */
  --fs-body:    16px;
  --fs-sm:      15px;
  --fs-xs:      14px;
  --fs-label:   13px;
  --fs-section: 21px;
}

.btn-primary:hover,
.btn-primary:active { background: var(--thsti-maroon-dark); border-color: var(--thsti-maroon-dark); }

.input:focus, .select:focus, .textarea:focus {
  border-color: var(--thsti-maroon);
  box-shadow: 0 0 0 3px var(--thsti-maroon-100);
}

a:hover { color: var(--thsti-maroon-dark); }

/* ---- VTS signin.css (verbatim) --------------------------------------------- */

/* Sign-in page: one card on a light field with the brand's red and orange
   moving through it.

   Loaded only by login.html, so none of this is parsed on a working screen.
   Nothing here animates anything but transform, so the whole field
   composites on the GPU. */

.signin {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-5);
  background: #F2F3F5;
}

/* ---- the field ----------------------------------------------------------
   Fixed rather than absolute, so a short window scrolls the card without
   the field scrolling out from behind it. */

.sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.sky > * { position: absolute; }

/* The palette lives here and nowhere else, so the whole field can be
   re-coloured by changing these six lines. The card carries the brand red;
   the field is its quiet counterpart. */
:root {
  --sky-ground: linear-gradient(168deg, #FAFAFB 0%, #ECEEF3 52%, #F1F0F6 100%);
  --sky-a: radial-gradient(circle, rgba(64, 64, 126, .58) 0%, rgba(64, 64, 126, .22) 42%, transparent 70%);
  --sky-b: radial-gradient(circle, rgba(90, 107, 140, .62) 0%, rgba(64, 64, 126, .24) 44%, transparent 70%);
  --sky-c: radial-gradient(circle, rgba(122, 138, 168, .44) 0%, transparent 64%);
  --sky-d: radial-gradient(circle, rgba(44, 44, 92, .34) 0%, transparent 62%);
  --sky-e: radial-gradient(circle, rgba(245, 137, 32, .30) 0%, transparent 62%);
}

.sky-base {
  inset: 0;
  background:
    radial-gradient(120% 85% at 50% -12%, #FFFFFF 0%, transparent 58%),
    var(--sky-ground);
}

/* Large fields of brand colour, drifting and swelling past each other.

   Everything here is big on purpose. Earlier versions added a dot
   grid, travelling lines and rings spreading from the middle; each of those
   is a shape, and shapes on top of one another read as clutter. This is one
   field with no edge to it, drifting and turning. */
.sky-glow {
  inset: -30%;
  will-change: transform;
  animation: sky-turn 40s linear infinite;
}
@keyframes sky-turn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.sky-glow i { position: absolute; border-radius: 50%; will-change: transform; }

.sky-glow i:nth-child(1) {
  width: 86vmax; height: 86vmax; left: -22%; top: -26%;
  background: var(--sky-a);
  animation: sky-drift-a 13s ease-in-out infinite;
}
.sky-glow i:nth-child(2) {
  width: 78vmax; height: 78vmax; right: -24%; bottom: -28%;
  background: var(--sky-b);
  animation: sky-drift-b 16s ease-in-out infinite;
}
.sky-glow i:nth-child(3) {
  width: 66vmax; height: 66vmax; left: 38%; top: 34%;
  background: var(--sky-c);
  animation: sky-drift-c 11s ease-in-out infinite;
}
.sky-glow i:nth-child(4) {
  width: 72vmax; height: 72vmax; right: -10%; top: -22%;
  background: var(--sky-d);
  animation: sky-drift-d 18s ease-in-out infinite;
}
.sky-glow i:nth-child(5) {
  width: 58vmax; height: 58vmax; left: -12%; bottom: -24%;
  background: var(--sky-e);
  animation: sky-drift-e 10s ease-in-out infinite;
}

@keyframes sky-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(22vw, 15vh, 0) scale(1.34); }
}
@keyframes sky-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.24); }
  50%      { transform: translate3d(-23vw, -17vh, 0) scale(.96); }
}
@keyframes sky-drift-c {
  0%, 100% { transform: translate3d(-14vw, 10vh, 0) scale(.82); }
  50%      { transform: translate3d(15vw, -12vh, 0) scale(1.30); }
}
@keyframes sky-drift-d {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.10); }
  50%      { transform: translate3d(-18vw, 20vh, 0) scale(.84); }
}
@keyframes sky-drift-e {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.90); }
  50%      { transform: translate3d(17vw, -14vh, 0) scale(1.28); }
}

/* Lifts the middle so the card sits on a calm ground, and settles the edges. */
.sky-veil {
  inset: 0;
  background:
    radial-gradient(30% 26% at 50% 46%, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .08) 58%, transparent 84%),
    radial-gradient(80% 70% at 50% 46%, transparent 58%, rgba(62, 24, 27, .08) 100%);
}

/* ---- the card ----------------------------------------------------------- */

.signin-card {
  position: relative;
  z-index: 1;
  place-self: center;
  width: 100%;
  max-width: 372px;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  background-color: var(--thsti-surface);
  background-image: var(--thsti-gradient);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: top left;
  border-radius: var(--r-1);
  box-shadow: 0 18px 44px rgba(62, 24, 27, .14), 0 2px 8px rgba(62, 24, 27, .08);
}

.signin-lockup {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-bottom: var(--sp-6);
}
.signin-lockup .row { display: flex; align-items: center; gap: 10px; }
.signin-lockup img { height: 40px; width: auto; display: block; }
.signin-lockup .abbr {
  font-family: var(--thsti-font-heading);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--thsti-text);
}
.signin-lockup .full {
  font-family: var(--thsti-font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--thsti-text-2nd);
}

.signin-fields { display: grid; gap: var(--sp-3); }
.signin-fields .input { height: 46px; }
.signin-card .btn-primary { width: 100%; height: 46px; margin-top: var(--sp-2); }

/* The label is in the placeholder; kept here for anyone using a screen reader. */
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.signin-reveal {
  position: absolute;
  right: 5px; top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 34px; height: 34px;
  background: none;
  border: 0;
  border-radius: var(--r-1);
  color: var(--thsti-muted);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.signin-reveal:hover { color: var(--thsti-maroon); background: var(--thsti-panel); }
.signin-reveal .icon { width: 17px; height: 17px; }
.signin-reveal .when-shown { display: none; }
.signin-reveal.is-shown .when-hidden { display: none; }
.signin-reveal.is-shown .when-shown { display: block; }
.input-icon .input.has-reveal { padding-right: 44px; }

.signin-msg {
  margin-bottom: var(--sp-4);
  padding: 10px 12px;
  border-left: 3px solid var(--thsti-error);
  border-radius: var(--r-1);
  background: var(--thsti-error-bg);
  color: #96201F;
  font-size: var(--fs-xs);
}
.signin-msg.is-ok {
  border-left-color: var(--thsti-success);
  background: var(--thsti-success-bg);
  color: #1F5C32;
}

.signin-foot {
  position: relative;
  z-index: 1;
  font-size: var(--fs-xs);
  color: var(--thsti-text-2nd);
  text-align: center;
}

/* ---- signing in ---------------------------------------------------------
   Over the card rather than instead of it, so the field carries on behind
   and the page does not appear to jump somewhere else. */

.signing {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: none;
  justify-items: center;
  align-content: center;
  gap: var(--sp-4);
  background: rgba(244, 245, 248, .94);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.signing.is-on { display: grid; animation: signing-in var(--dur-3) var(--ease) both; }
@keyframes signing-in { from { opacity: 0; } to { opacity: 1; } }

.signing img { height: 48px; width: auto; display: block; }
.signing p { margin: 0; font-size: var(--fs-sm); color: var(--thsti-text-2nd); }

.signing .dots { display: flex; gap: 7px; }
.signing .dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--thsti-maroon);
  animation: signing-beat 1.3s var(--ease) infinite both;
}
.signing .dots i:nth-child(2) { background: var(--thsti-orange-mid); animation-delay: .16s; }
.signing .dots i:nth-child(3) { background: var(--thsti-orange);     animation-delay: .32s; }
@keyframes signing-beat {
  0%, 80%, 100% { transform: scale(.35); opacity: .45; }
  40%           { transform: scale(1);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .signing.is-on { animation: none; }
  .signing .dots i { animation: none; opacity: .8; transform: none; }
}

@media (max-width: 560px) {
  .signin { padding: var(--sp-6) var(--sp-4); }
  .signin-card { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
}

/* Motion is decoration here: none of it carries meaning, so it can all go. */
@media (prefers-reduced-motion: reduce) {
  .sky-glow, .sky-glow i { animation: none; }
}

/* ---- MEGA: signing-in progress ------------------------------------------------
   VTS shows its logo and three beating dots here. MEGA has no logo, and the
   wait includes building the first dashboard page, so the cover shows the
   name, a bar in the brand gradient and the percentage. */

.signing-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--thsti-font-heading);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--thsti-text);
}
.signing .signing-name img { width: 36px; height: 36px; }
.signing-bar {
  width: min(320px, 72vw);
  height: 6px;
  background: var(--thsti-divider);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.signing-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--thsti-gradient);
  background-size: 320px 100%;    /* the gradient is laid over the full bar, not stretched over the fill */
  border-radius: var(--r-pill);
  transition: width .12s linear;
}
.signing-pct {
  font-family: var(--thsti-font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--thsti-text-2nd);
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .signing-bar i { transition: none; }
}

/* ============================================================================
   MEGA sign-in: two panels in one card. The study on the left, in the warm
   graphite of the dashboard's sidebar; the form on the right. Carries the
   details the original page had, in the THSTI look.
   ========================================================================= */

.signin-card.signin-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  max-width: 880px;
  padding: 0;
  overflow: hidden;
  background-color: var(--thsti-surface);
}

/* ---- the study ------------------------------------------------------------ */
.signin-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-8);
  padding: 44px 40px 32px;
  overflow: hidden;
  color: #fff;
  /* the dashboard sidebar's graphite with its faint warm wash, plus a soft
     glow of the brand orange from the lower corner */
  background:
    radial-gradient(90% 60% at 100% 110%, rgba(245, 137, 32, 0.16), transparent 70%),
    radial-gradient(70% 55% at -10% -10%, rgba(168, 37, 43, 0.20), transparent 70%),
    linear-gradient(180deg, rgba(245, 137, 32, 0.022), rgba(168, 37, 43, 0.038)),
    #2A2C2F;
}
/* the logo again, large and very faint, cropped by the corner */
.signin-brand-mark {
  position: absolute;
  right: -70px; bottom: -70px;
  width: 260px; height: 260px;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}
.signin-brand-top { position: relative; }
.signin-brand-logo { display: block; width: 52px; height: 52px; margin-bottom: 26px; }
.signin-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #F6A55E;                       /* the brand orange, lifted for the dark panel */
}
.signin-title {
  margin: 8px 0 14px;
  font-family: var(--thsti-font-heading);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: #fff;
}
.signin-tag {
  margin: 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
}
.signin-brand-foot {
  position: relative;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.60);
}

/* ---- the form ---------------------------------------------------------------- */
.signin-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 44px 32px;
}
.signin-heading {
  margin: 0 0 6px;
  font-family: var(--thsti-font-heading);
  font-weight: 700;
  font-size: 26px;
  color: var(--thsti-text);
}
.signin-note { margin: 0 0 26px; font-size: 15px; color: var(--thsti-text-2nd); }

.signin-split .signin-msg {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 18px;
}
.signin-split .signin-msg .icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }

.signin-split .signin-fields { gap: 14px; }
.signin-split .btn-primary { display: flex; align-items: center; justify-content: center; gap: 8px; }
.signin-split .btn-primary .icon { width: 17px; height: 17px; transition: transform var(--dur-2) var(--ease); }
.signin-split .btn-primary:hover .icon { transform: translateX(3px); }

.signin-form-foot {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--thsti-rule);
  font-size: 13px;
  color: var(--thsti-text-2nd);
}
.signin-form-foot .icon { width: 15px; height: 15px; color: var(--thsti-maroon); }

/* ---- centring: widely tracked words carry their spacing after the last
   letter too, which pushes the visible letters off centre. Indent the start
   by the same amount so the letters themselves sit in the middle. ---------- */
.signin-lockup .abbr { padding-left: 0.06em; }
.signin-lockup .full { padding-left: 0.16em; }
.signing .signing-word { padding-left: 0.06em; }

/* ---- narrow screens: the study stacks above the form ---------------------------- */
@media (max-width: 760px) {
  .signin-card.signin-split { grid-template-columns: minmax(0, 1fr); max-width: 440px; }
  .signin-brand { gap: var(--sp-5); padding: 28px 26px 22px; }
  .signin-brand-logo { width: 42px; height: 42px; margin-bottom: 16px; }
  .signin-title { font-size: 26px; margin-bottom: 10px; }
  .signin-tag { font-size: 14px; }
  .signin-brand-mark { width: 180px; height: 180px; right: -50px; bottom: -50px; }
  .signin-form { padding: 30px 26px 24px; }
  .signin-form-foot { margin-top: 24px; }
}

/* ---- the field, a little livelier ----------------------------------------------
   About a third faster and about a quarter stronger than the VTS original
   (kept verbatim above), with the veil behind the card thinned a touch so the
   colour reads, while the card still sits on a calm middle. */
:root {
  --sky-a: radial-gradient(circle, rgba(64, 64, 126, .70) 0%, rgba(64, 64, 126, .28) 42%, transparent 70%);
  --sky-b: radial-gradient(circle, rgba(90, 107, 140, .74) 0%, rgba(64, 64, 126, .30) 44%, transparent 70%);
  --sky-c: radial-gradient(circle, rgba(122, 138, 168, .54) 0%, transparent 64%);
  --sky-d: radial-gradient(circle, rgba(44, 44, 92, .42) 0%, transparent 62%);
  --sky-e: radial-gradient(circle, rgba(245, 137, 32, .38) 0%, transparent 62%);
}
.sky-glow { animation-duration: 26s; }
.sky-glow i:nth-child(1) { animation-duration: 9s; }
.sky-glow i:nth-child(2) { animation-duration: 11s; }
.sky-glow i:nth-child(3) { animation-duration: 7.5s; }
.sky-glow i:nth-child(4) { animation-duration: 12s; }
.sky-glow i:nth-child(5) { animation-duration: 7s; }
.sky-veil {
  background:
    radial-gradient(30% 26% at 50% 46%, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .06) 58%, transparent 84%),
    radial-gradient(80% 70% at 50% 46%, transparent 58%, rgba(62, 24, 27, .08) 100%);
}
/* anyone who asked their system for less motion still gets none */
@media (prefers-reduced-motion: reduce) {
  .sky-glow, .sky-glow i { animation: none; }
}