/* The account door (/signin/). Page-local styles only: every colour, control,
   button and field comes from tokens.css and site.css, and the three step
   panels are the same .join-step contract the hero card uses, so everything
   inside the form is already styled by the shared system.

   What this file owns is the composition: one card, centred on the canvas, at
   a width that is read rather than skimmed. An account surface is somewhere a
   student arrives on purpose, so nothing here competes with the one button. */

/* Less air above than the other page shells carry. The card is the whole
   surface, and at 1440x900 the taller of its three states has to land inside
   the fold rather than being cut by it; this padding is what puts the card at
   roughly the same optical height whichever step is showing. */
.si-main { padding-block: clamp(var(--tud-space-8), 4vw, var(--tud-space-16)) clamp(var(--tud-space-16), 9vw, 112px); }

/* Narrower than the verify page's 560px panels. There is one decision on this
   screen and the measure should say so. */
.si-stage { width: min(100%, 512px); margin-inline: auto; }

.si-card { padding: clamp(var(--tud-space-6), 5vw, var(--tud-space-10)); }

/* One card, three steps, one height, and the primary button in one place.
   The code and success steps carry far less than the form does, so left alone
   the card shrank and left canvas beneath it, and the button climbed the screen
   between steps. Re-centring the stage would have closed the gap by making the
   whole card jump, which is worse: the reader is mid-task and the thing they
   are reading moves.
   So all three steps share one grid cell and the card takes the height of its
   tallest, measured rather than guessed at, which is why this is not a
   hard-coded height that would rot the moment a line of copy changes. Inactive
   steps keep their box and lose their visibility, which also takes them out of
   the accessibility tree and the tab order, exactly as display:none did. */
#si-steps .si-card { display: grid; }
#si-steps .si-card > .join-step { grid-area: 1 / 1; }
/* !important only to answer the site-wide `.hidden { display: none !important }`,
   which is doing exactly its job everywhere else and must keep doing it. */
#si-steps .si-card > .join-step.hidden { display: block !important; visibility: hidden; }

/* Each step is a column that fills the card, and the form inside it is too, so
   the flexible space lands in ONE declared place: above the submit button. That
   is what keeps "Continue with email" and "Verify and continue" on the same
   line of the card while the fields above them differ in number. Anything after
   the button, the fine print and the resend links, travels with it. */
#si-steps .join-step { display: flex; flex-direction: column; }
/* The gap is the FLOOR and the auto margin is the slack. margin-top: auto on
   its own resolves to zero the moment a step's content fills the card, which
   put the button flush against the field above it on a short viewport: the
   free space it was distributing had run out. A flex gap cannot be eaten that
   way, so the button keeps its distance first and only then absorbs whatever
   room is left. */
#si-steps .si-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--tud-space-5);
}
#si-steps .si-form > .btn { margin-top: auto; }

/* The drawn mark, and the only thing on the page that changes between steps:
   the cap you arrive under, the plane carrying the code, the high five when
   you are in.

   Centred over the card, on the founder's call: pinned to the corner against
   the card's own width it read as stranded rather than deliberate. Only the
   drawing centres. The heading, the fields and the fine print all keep the
   single left edge a form needs.

   Sized by HEIGHT, not width, because the three drawings do not share an
   aspect: the cap is portrait at 473x640, the plane landscape at 640x451. One
   width made the plane render at barely half the cap's height, so it read as a
   smaller drawing on the same page. One height reads as one size, whatever
   shape the drawing happens to be. */
.si-art {
  display: block;
  height: clamp(96px, 15vw, 118px);
  margin-inline: auto;
  margin-bottom: var(--tud-space-5);
  text-align: center;
}
.si-art img { width: auto; height: 100%; }

.si-title {
  max-width: 18ch;
  /* So the heading breaks at its own comma instead of orphaning "account." */
  text-wrap: balance;
  font-size: clamp(28px, 3.6vw, 36px);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.si-body {
  max-width: 44ch;
  margin-top: var(--tud-space-3);
  color: var(--tud-color-text-secondary);
  font-size: 16px;
  line-height: 1.55;
}

/* Both the address a code went to and the path we are returning someone to are
   strings they have to recognize, not read, so they take the label face. */
.si-path {
  font-family: var(--tud-font-secondary);
  font-weight: 700;
  color: var(--tud-color-text-primary);
  overflow-wrap: anywhere;
}

/* Only rendered when a gate sent the student here with ?next=. It sits under
   the body copy rather than above the heading: it is the answer to "why am I
   on this screen", which is a second thought, not the first one. */
.si-return {
  margin-top: var(--tud-space-4);
  padding-top: var(--tud-space-4);
  border-top: var(--tud-border-hairline) solid var(--tud-color-border-default);
  color: var(--tud-color-text-secondary);
  font-size: 15px;
  line-height: 1.5;
}

.si-form { margin-top: var(--tud-space-6); }

/* Stacked, unlike the hero card's two-up row. The card there is fighting a
   doodle for the fold; this page has the room, and two full-width fields read
   faster than two half ones. */
.si-fields { display: grid; gap: var(--tud-space-5); }

.si-foot {
  margin-top: var(--tud-space-6);
  color: var(--tud-color-text-muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.si-noscript { max-width: 46ch; margin-inline: auto; }

/* ---------- arriving with a session already live ---------- */

/* The head script sets data-session="checking" before first paint when a token
   is in sessionStorage, so a student who is already signed in never sees a
   sign-in form appear and vanish. signin.js clears the attribute if the token
   turns out to be stale, and the form is what was underneath all along.
   Deliberately not .hidden: that class needs JavaScript to lift, and the whole
   point of this pair is that the first frame is already right. */
.si-checking { display: none; }
.si-checking-line {
  color: var(--tud-color-text-muted);
  font-size: 17px;
  line-height: 1.5;
}

[data-session="checking"] .si-checking { display: block; }
[data-session="checking"] .si-steps { display: none; }

/* ---------- the signed-in moment ---------- */

/* .success in site.css already sizes the heading and the body copy; this only
   restores the spacing that panel loses by leading with a drawing rather than
   the round status tick the other success panels use. */
#join-step-done .si-art { margin-bottom: var(--tud-space-4); }
#join-step-done > p { margin-block: var(--tud-space-3) var(--tud-space-6); }

/* ---------- the one authored moment ---------- */

/* site.css already rises the code panel and pops the finished one, so the card
   itself is spoken for. What is left is the mark, and the mark is the thing
   that changes: it lands the way the hero doodle lands, a shade off-square and
   then settled, because it is the only element here that was drawn by hand.
   Nothing else on this page moves. */
@media (prefers-reduced-motion: no-preference) {
  .join-step:not(.hidden) > .si-art {
    animation: si-mark-land 360ms var(--tud-ease-decelerate) 40ms both;
  }

  @keyframes si-mark-land {
    from { opacity: 0; transform: translateY(9px) rotate(-2.5deg); }
    to { opacity: 1; transform: none; }
  }
}

@media (max-width: 560px) {
  .si-card { padding: var(--tud-space-6) var(--tud-space-5); }
  .si-title { font-size: 27px; }
  .si-art { width: 80px; }
}