/* Instructor sign-in (design/pages/signin). The door of /instructor, `#login-view` in instructor.html.
 *
 * Two fields meet on one seam: the navy brand field (the reversed wordmark, the statement, an exchange
 * typeset as the transcript the instructor will read, the students' note) and the white sheet that holds
 * the form. Every part is the kit (components.css); this file is the page layout only, and every colour
 * is a token from theme.css. At 1440 the sheet is 480 wide with the page gutter (48) on each side and the
 * brand field takes the rest; its measures end on column edges of the 12-column grid (774 keeps the
 * statement's two balanced lines, 660 the excerpt, 432 the students' note). The phone stacks the same
 * fields in reading order -- navy (wordmark, statement), the sheet, a short navy band for students --
 * keyed on [data-layout='mobile'] (no width queries). The dashboard (#app-view) is instructor.css. */

.signin {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: stretch;
  background: var(--color-ground);
  color: var(--color-ink);
}

/* theme.css underlines every link on hover; the wordmark is a lockup, not a sentence link */
.signin .tt-logo:hover {
  text-decoration: none;
}

/* a link-button: only the chrome is reset; the kit's .tt-link / .tt-link--action set its colour and type */
.signin button.tt-link {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

/* -- the brand field: what this is ---------------------------------------- */

.signin__brand {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 48px 64px 48px var(--layout-gutter);
}

.signin__brand-main {
  display: flex;
  flex-direction: column;
}

.signin__brand-top {
  display: flex;
  align-items: center;
  height: 44px;
}

/* the statement starts at y = 152, level with the sheet's title */
.signin__brand-mid {
  display: flex;
  flex-direction: column;
  gap: 44px;
  margin-top: 60px;
}

.signin__statement {
  max-width: 774px;
  color: var(--color-ink);
}

.signin__brand-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 432px;
  padding-top: 48px;
}

.signin__brand-foot .tt-link {
  align-self: flex-start;
}

.signin__note {
  font: var(--text-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-ink-2);
}

/* -- the white sheet: the form ------------------------------------------- */

.signin__sheet {
  width: 480px;
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 0 var(--layout-gutter) var(--layout-gutter);
  background: var(--color-ground);
}

.signin__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 152px;
}

.signin__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.signin__title {
  font: var(--text-title-lg);
  letter-spacing: var(--tracking-title-lg);
  color: var(--color-ink);
}

.signin__blurb {
  font: var(--text-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-ink-2);
}

.signin__accounts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.signin__or {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 20px;
}

.signin__or .tt-rule {
  flex: 1;
  width: auto;
}

.signin__or-text {
  font: var(--text-body-sm);
  color: var(--color-ink-3);
}

.signin__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.signin__form .tt-btn {
  margin-top: 4px;
}

/* the Password field's foot: the hint that names the dependency, and the link beside it */
.signin__field-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
}

.signin__field-foot .tt-field__hint {
  flex: 1 1 auto;
  min-width: 0;
}

/* fixed height: the focused link (reset sent) must not break the row */
.signin__field-foot .tt-link {
  flex: none;
  height: 32px;
}

/* an arrow drawn inside an operator's message ("Authentication → Settings → Authorized domains"):
   the Inter subset carries no arrow glyph, and a fallback glyph in another face is the one thing in
   the banner that would look broken */
.signin__arrow {
  display: inline-block;
  vertical-align: -1px;
  margin: 0 3px;
}

.signin__noacct {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.signin__noacct-text {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

.signin__noacct .tt-link {
  align-self: flex-start;
}

.signin__alt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: var(--rule-hair);
}

.signin__alt-hint {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

.signin__alt .tt-link {
  align-self: flex-start;
}

.signin__sheet-foot {
  margin-top: auto;
  display: flex;
  padding-top: 20px;
}

/* the note banner's icon: info for the domain notice, the envelope for the reset mail */
.signin__note-icon--mail,
.signin__note--mail .signin__note-icon--info {
  display: none;
}

.signin__note--mail .signin__note-icon--mail {
  display: block;
}

/* -- signed in, refused: the suspended account's card (showSuspended) ----- */

.signin__refused {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.signin__who {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.signin__who-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.signin__who-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.signin__who-name {
  font: var(--text-button-sm);
  color: var(--color-ink);
}

.signin__who-mail {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
  overflow-wrap: anywhere;
}

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

.signin__hint {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

/* a standalone action link in the stack (Sign out on the suspended card) hugs its text */
.signin__refused > .tt-link {
  align-self: flex-start;
}

/* -- phone: the fields stack in reading order ----------------------------- */

[data-layout='mobile'] .signin {
  flex-direction: column;
}

/* the brand field's two parts become siblings of the sheet and are ordered around it, so nothing is duplicated */
[data-layout='mobile'] .signin__brand {
  display: contents;
}

[data-layout='mobile'] .signin__brand-main {
  order: 0;
  gap: 16px;
  padding: 16px 16px 24px;
  background: var(--color-field-navy);
}

[data-layout='mobile'] .signin__brand-top {
  height: 32px;
}

/* the 22px lockup, a 44px target */
[data-layout='mobile'] .signin__brand-top .tt-logo {
  font: var(--text-logo);
  letter-spacing: var(--tracking-logo);
  padding: 9px 0 8px;
}

[data-layout='mobile'] .signin__brand-top .tt-logo__spark {
  width: 0.36em;
  height: 0.8em;
}

[data-layout='mobile'] .signin__brand-mid {
  margin-top: 0;
  gap: 0;
}

[data-layout='mobile'] .signin__statement {
  font: var(--text-title-lg);
  letter-spacing: var(--tracking-title-lg);
  max-width: 340px;
}

[data-layout='mobile'] .signin__sheet {
  order: 1;
  width: 100%;
  padding: 24px 16px;
}

[data-layout='mobile'] .signin__body {
  padding-top: 0;
}

[data-layout='mobile'] .signin__sheet-foot {
  margin-top: 4px;
  padding-top: 24px;
  border-top: var(--rule-hair);
}

/* the students' band: kicker, one line, the 44px link */
[data-layout='mobile'] .signin__brand-foot {
  order: 2;
  margin-top: 0;
  max-width: none;
  padding: 24px 16px calc(32px + env(safe-area-inset-bottom, 0px));
  background: var(--color-field-navy);
}

[data-layout='mobile'] .signin__note {
  font: var(--text-body-sm);
  letter-spacing: var(--tracking-body-sm);
}

/* on a phone the hint and the 44px link stack */
[data-layout='mobile'] .signin__field-foot {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

[data-layout='mobile'] .signin__field-foot .tt-link {
  height: auto;
}

/* every target 44px and inputs at 16px, as the kit's .tt-phone does; mobile.css's own input padding is
   for the old controls (it would push a 44px box past its height) */
[data-layout='mobile'] .signin .tt-btn {
  height: var(--size-control-phone);
  padding: 0 18px;
  font: var(--text-button-lg);
  letter-spacing: var(--tracking-button-lg);
}

[data-layout='mobile'] .signin .tt-input {
  height: var(--size-control-phone);
  padding: 0 12px;
  font: var(--text-body-lg);
  letter-spacing: var(--tracking-body-lg);
}

[data-layout='mobile'] .signin .tt-link--action {
  min-height: var(--size-control-phone);
}

/* the banner's next step drops under the text, aligned with it */
[data-layout='mobile'] .signin .tt-banner {
  flex-wrap: wrap;
}

[data-layout='mobile'] .signin .tt-banner__action {
  flex: 1 1 100%;
  margin-left: 28px;
  padding-top: 4px;
}

[data-layout='mobile'] .signin .tt-banner__action .tt-btn {
  align-self: flex-start;
}