/* 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, 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. The form is 384 wide; the sheet's right
 * padding grows with the window (48 up to 192), so on a wide screen the form sits in toward the middle of
 * the page instead of on its edge, and the brand field takes the rest. The statement and the form are each
 * centred top to bottom in their field; the statement grows from 48 to 64 with the window, on a 16em
 * measure, and the students' note keeps 432. 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 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

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

/* the statement sits midway between the wordmark and the students' note */
.signin__brand-mid {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 0;
}

/* display-md's face and leading, sized between display-md and display-lg by the window */
.signin__statement {
  font-size: clamp(48px, 3.4vw, 64px);
  max-width: 16em;
  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 ------------------------------------------- */

/* the right padding grows with the window: 48 up to about 1150, 192 from about 1730 */
.signin__sheet {
  --signin-sheet-end: clamp(var(--layout-gutter), (100vw - 960px) / 4, 192px);
  width: calc(384px + var(--layout-gutter) + var(--signin-sheet-end));
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 0 var(--signin-sheet-end) var(--layout-gutter) var(--layout-gutter);
  background: var(--color-ground);
}

/* centred in the height the sheet's foot leaves */
.signin__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-block: auto;
  padding-top: 48px;
}

.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 {
  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;
  flex: none;
  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 {
  flex: none;
  padding: 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 {
  margin-block: 0;
  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;
}