/* The sign-in pages (round 24, the owner's mockups): the role chooser and every page in
   layouts/sign_in_form.html. Loaded after base.css, whose shared fields, code boxes and buttons
   keep working: here only the frame, the scale and the colours change. Sizes and colours come from
   tokens.css; the only typed numbers are breakpoints. No vermilion: buttons are navy. */

.sx {
  /* base.css's sign-in size set, moved onto the public scale */
  --signin-form-heading: var(--pub-section-title);
  --signin-heading-weight: 700;
  --signin-heading-tracking: var(--pub-title-tracking);
  --signin-form-text: var(--pub-body);
  --signin-input: var(--pub-body);
  --signin-control-height: var(--pub-field);
  --signin-button-label: var(--pub-body);
  --signin-help: var(--pub-small);
  --signin-note: var(--pub-small);
  --signin-code-box: var(--pub-button-tall);
  --signin-code-digit: var(--pub-lead);

  display: flex;
  flex-direction: column;
  min-height: var(--pub-full-height);
  background: var(--cream);
  color: var(--ink);
}

/* The crest on its round plate (its file has a white background): never clipped */
.sx .crest-plate {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--surface);
}
.sx .crest-plate img {
  width: 70%;
  height: auto;
}

/* The school's panel: centred on phones */
.sx__brand {
  position: relative;
  padding: var(--space-6) var(--pub-gutter) var(--space-5);
  text-align: center;
}
.sx__home {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--navy);
  text-decoration: none;
}
.sx__crest {
  width: calc(var(--pub-crest-hero) * 0.55);
}
.sx__school {
  font: 700 var(--pub-card-title) / 1.2 var(--font-serif);
}
.sx__rule {
  width: var(--pub-target);
  height: var(--space-1);
  border-radius: var(--radius);
  background: var(--gold);
}
/* Round 56: the owner's lockup sizes, docs/design/DESIGN.md ("The sign-in lockup"). */
.sx {
  --signin-mark: 40px;
  --signin-wordmark: 28px;
  --signin-descriptor: 18px;
  --signin-gap: 10px;
}
@media (min-width: 900px) {
  .sx {
    --signin-mark: 56px;
    --signin-wordmark: 36px;
    --signin-descriptor: 24px;
    --signin-gap: 14px;
  }
}
/* Round 52: on the light background (phones) the product's lockup takes the product's ink and
   primary (/brand.css, from the set's palette.json; the school's navy if the set has none). The
   wide screens' navy panel keeps it white, as the set's dark lockup. */
.sx__learn {
  display: inline-flex;
  align-items: center;
  gap: var(--signin-gap);
  color: var(--product-ink, inherit);
  font: 600 var(--signin-wordmark) / 1.1 var(--font-sans, inherit);
  letter-spacing: var(--pub-title-tracking);
  overflow-wrap: anywhere;
}
/* Round 50: the product's lockup, its mark and "<name> Portal" (static/brand/<set>/mark.svg) */
.sx__mark {
  flex: none;
  width: var(--signin-mark);
  height: var(--signin-mark);
}
.sx__portal {
  color: var(--product-primary, inherit);
  font-size: var(--signin-descriptor);
  font-weight: 500;
}
.sx__motto {
  margin: var(--space-2) 0 0;
  color: var(--gold-text); /* darker gold: 5.7:1 on cream (the mockup's gold is too light) */
  font: italic 600 var(--pub-card-title) / 1.3 var(--font-serif);
}
.sx__curve {
  display: none;
}

/* The form column */
.sx__main {
  flex: 1;
  padding: 0 var(--pub-gutter) var(--space-7);
}
.sx .signin-card {
  width: 100%;
  max-width: var(--pub-form-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.sx .signin-form-heading {
  margin: 0 0 var(--space-5);
  color: var(--navy);
  font-family: var(--font-serif);
  line-height: 1.1;
  text-align: left;
}
.sx .field + .field {
  margin-top: var(--space-5);
}
.sx .field__label {
  margin-bottom: var(--space-2);
}
.sx .input input {
  padding: 0 var(--space-4);
}
.sx .input__prefix {
  padding-left: var(--space-4);
  color: var(--ink);
}
.sx .input__action {
  min-width: var(--pub-target);
  margin: var(--space-2) 0;
  color: var(--steel-ink);
}
/* The chooser's choices sit straight on the page, as in the mockup */
.sx .chooser__options.signin-card {
  padding: 0;
  border: 0;
  background: none;
}
.sx .btn-primary {
  height: var(--pub-button-tall);
  margin-top: var(--space-5);
  background: var(--navy);
  color: var(--on-dark);
  font: 700 var(--pub-body) / 1 var(--font-sans);
}
.sx .signin-card__send,
.sx .signin-card__verify {
  margin-top: var(--space-5);
}
.sx .field-help,
.sx .signin-note,
.sx .signin-sent,
.sx .signin-resend {
  color: var(--steel-ink);
}
.sx .signin-note {
  margin: var(--space-5) 0 0;
  text-align: center;
}
.sx .signin-note--close {
  margin-top: var(--space-2);
}
.sx .signin-card__rule {
  margin: var(--space-5) 0;
}
.sx .signin-card__links a,
.sx .signin-card .link {
  display: inline-flex;
  align-items: center;
  min-height: var(--pub-target-min);
  color: var(--navy);
}
/* Round 62: text or email, when the school has both on. Two halves of one control. */
.sx .signin-via {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 var(--space-5);
  border: var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.sx .signin-via__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pub-target-min);
  padding: 0 var(--space-3);
  color: var(--navy);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
/* Round 66: up to four ways, two to a row; an odd last one takes the whole row */
.sx .signin-via__link:nth-child(even) {
  border-left: var(--rule);
}
.sx .signin-via__link:nth-child(n + 3) {
  border-top: var(--rule);
}
.sx .signin-via__link:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.sx .signin-via__link.is-current {
  background: var(--navy);
  color: var(--on-dark);
}
.sx .signin-device {
  margin-bottom: var(--space-3);
}
.sx .signin-device .btn-primary {
  margin-top: var(--space-3);
}
/* The three main sign-in pages: the heading above a white panel holding the form */
.sx .signin-card:has(.sx__panel) {
  padding: 0;
  border: 0;
  background: none;
}
.sx .sx__panel {
  padding: var(--space-6) var(--space-5);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.sx .review-code {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--gold-wash);
}

/* The role chooser (screen 24) */
.sx .chooser__heading {
  margin: 0 0 var(--space-5);
  color: var(--navy);
  font: 700 var(--pub-section-title) / 1.1 var(--font-serif);
}
.sx .roles {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sx .role {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.sx .role__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pub-icon-circle);
  height: var(--pub-icon-circle);
  border-radius: 50%;
  background: var(--gold-wash);
  color: var(--navy);
}
.sx .role__name {
  margin: 0;
  color: var(--navy);
  font: 700 var(--pub-card-title) / 1.2 var(--font-serif);
}
.sx .role__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--pub-target-min); /* the whole card is the target; the link is one too */
  color: inherit;
  text-decoration: none;
}
.sx .role__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
.sx .role:hover .role__name {
  text-decoration: underline;
}
@supports selector(:has(a)) {
  .sx .role__link:focus-visible {
    outline: none;
  }
  .sx .role:has(.role__link:focus-visible) {
    outline: var(--focus);
    outline-offset: var(--focus-offset);
  }
}
.sx .role__what {
  margin: var(--space-1) 0 0;
  color: var(--steel-ink);
}
.sx .role > .icon {
  color: var(--navy);
}
.sx .first-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--pub-button-tall);
  margin-top: var(--space-4);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--navy);
  font: 700 var(--pub-body) / 1 var(--font-serif);
  text-decoration: none;
}
.sx .install-tip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--gold-wash);
  color: var(--ink);
}
.sx .back-home {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--pub-target-min);
  margin-top: var(--space-4);
  color: var(--navy);
  font-weight: 600;
}

/* Wide screens: the navy panel beside the form, filling the height */
@media (min-width: 1024px) {
  .sx {
    /* the mockups' proportions on a wide screen: larger words, fields and button */
    --signin-form-heading: calc(var(--pub-hero-title) * 1.25);
    --signin-control-height: calc(var(--pub-button-tall) * 1.4);
    --signin-form-text: calc(var(--pub-lead) * 1.15);
    --signin-input: calc(var(--pub-lead) * 1.1);
    --signin-help: var(--pub-lead);
    --signin-note: var(--pub-lead);

    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
  .sx__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--space-8) var(--space-6) calc(var(--space-8) * 2);
    background: var(--navy);
  }
  .sx__home {
    position: relative;
    z-index: 1;
    color: var(--on-dark);
  }
  .sx__home:focus-visible {
    outline: var(--focus-on-dark);
  }
  .sx__crest {
    width: calc(var(--pub-crest-hero) * 1.25);
  }
  .sx__learn,
  .sx__portal {
    color: inherit;
  }
  .sx .btn-primary {
    height: calc(var(--pub-button-tall) * 1.4);
    font-size: calc(var(--pub-lead) * 1.15);
  }
  .sx__school {
    font-size: calc(var(--pub-section-title) * 0.8);
  }
  .sx .role__what {
    font-size: var(--pub-lead);
  }
  .sx__school {
    font-size: var(--pub-section-title);
  }
  .sx__rule {
    width: calc(var(--pub-target) * 3);
  }
  .sx__motto {
    position: relative;
    z-index: 1;
    color: var(--gold); /* bright gold on navy: 7.0:1 */
    font-size: var(--pub-hero-motto);
  }
  .sx__curve {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 16%;
  }
  .sx__curve-fill {
    fill: var(--navy-deep);
  }
  .sx__curve-line {
    fill: none;
    stroke: var(--gold);
    stroke-width: 3;
  }
  .sx__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-8) var(--space-8);
  }
  .sx .signin-card,
  .sx .chooser__options {
    max-width: var(--pub-form-width-wide);
    margin: 0;
  }
  .sx .signin-card {
    padding: var(--space-7) var(--space-6);
  }
  .sx .sx__panel {
    padding: var(--space-7) var(--space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx .btn-primary:active {
    transform: none;
  }
}

/* Round 31 (A7): Forgot password inside the sign-in frame. Its first design was a 650px form beside
   a reply column, wider than the frame's card from 1024px up (sideways scroll at 1024 and
   1280px), and its paddings stacked at 320px. It stays one column at every width, as it already
   was below 1024px; the reply appears under the form. The spacing scales down from the desktop
   values, so at 1440px the form sits exactly where it did. */
.sx .forgot { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 0 0 0 clamp(0px, 5.07vw, 73px); }
.sx .forgot::before { display: none; }
.sx .forgot__form, .sx .forgot__sent { grid-column: 1; grid-row: auto; min-width: 0; }
.sx .forgot__form { padding: clamp(24px, 5.28vw, 76px) clamp(0px, 0.97vw, 14px) 0 0; }
@media (min-width: 1024px) { .sx .forgot { min-height: 520px; } }
.sx .forgot__sent { padding: var(--space-6) 0 0; }
.sx .forgot__heading { overflow-wrap: anywhere; }