/* The sign-in page, to Canvas's finalised design (inbox/Mir/website-preview/debs-workspace-signin-preview.html, 21 Oct).
   Values are the design's own; where they differ from debs-design-language.md the design wins (HS-SIGNIN brief).
   Copied unchanged from the Student Hub's apps/web/src/components/AuthForm.module.css (student-hub main); the class
   names are used as plain classes by src/views.mjs. Keep the two in step until the brand files land (D-419).
   The page's own rules, not the Hub's, are the last two blocks. Two changes from the copy: the reset below is the
   Hub's global one (apps/web/src/styles.css), which the module CSS relied on but did not carry; and the custom
   properties, font, line-height and body text colour sit on :root, not .root, so the embed box (which has no .root)
   gets them too. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --ultra: #2f3690;
  --ultra-80: #525ca9;
  --ultra-20: #d2d4ea;
  --ink: #272c45;
  --body: #3c4159;
  --red: #e44059;
  --red-hover: #cf3450;
  --orange: #f37421;
  --field-bg: #f9fafd;

  font-family: 'Nunito Sans', system-ui, sans-serif;
  line-height: 1.6;
  color: var(--body);
}

.root {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fafbfd;
}

/* Left half: the picture on white, the logo at its top left. */
.picture {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 40px;
  position: relative;
}
.image {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
}
.logo {
  position: absolute;
  top: 22px;
  left: 28px;
  line-height: 0;
}
.logo:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

/* Right half: the white card on ultramarine. */
.panel {
  background: var(--ultra);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}
.card {
  width: 100%;
  max-width: 402px;
  background: #fff;
  border-radius: 10px;
  padding: 44px 50px 36px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.heading {
  font-family: Lato, system-ui, sans-serif;
  color: var(--ink);
  font-weight: 900;
  font-size: 1.3rem;
  line-height: 1.25;
  margin: 0 0 34px;
}
.heading:focus {
  outline: none;
}

.field {
  margin-bottom: 18px;
}
.label {
  display: block;
  font-family: Lato, sans-serif;
  font-weight: 700;
  color: var(--ink);
  font-size: 0.9rem;
  margin: 0 0 6px;
}
.input {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  padding: 9px 12px;
  border: 1px solid #dcdfe8;
  border-radius: 4px;
  background: var(--field-bg);
  color: var(--ink);
}
.input::placeholder {
  color: #7a7f93;
}
.input:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 1px;
  border-color: var(--ultra);
}
.input[aria-invalid='true'] {
  border-color: var(--red);
}

/* The password field's eye sits inside the field, at its right edge. */
.passwordWrap {
  position: relative;
  --eye-gap: var(--field-bg);
}
.passwordInput {
  padding-right: 46px;
}
.eye {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ultra-80);
  cursor: pointer;
}
.eye:hover {
  color: var(--ultra);
}
.eye:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 0;
}

/* "you@example.com · Change" above the password, as on students.debs.co.in */
.who {
  font-size: 0.92rem;
  color: var(--body);
  margin: -20px 0 18px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
/* A general error above the shown email takes the place the row tucks into under the heading. */
.error + .who {
  margin-top: 0;
}
.whoEmail {
  overflow-wrap: anywhere;
}
.linkBtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--ultra-80);
  text-decoration: underline;
  cursor: pointer;
}

.btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  font-family: Lato, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  border: 0;
  border-radius: 4px;
  padding: 11px 20px;
  background: var(--red);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.btn:hover {
  background: var(--red-hover);
}
.btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.btn:focus-visible,
.linkBtn:focus-visible,
.card a:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.error {
  color: #b3203a;
  background: #fdecef;
  border-left: 3px solid var(--red);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.9rem;
  margin: -6px 0 12px;
}

.switch {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--ultra-20);
  text-align: center;
  font-size: 0.95rem;
}
.switch a {
  font-family: Lato, sans-serif;
  font-weight: 700;
  color: var(--ultra);
}

/* "Check your email", after Create account */
/* The envelope's own 40 × 30 box; its larger, mostly empty tile overflows it evenly on every side. */
.sentIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 30px;
  color: var(--ultra);
  margin-bottom: 14px;
}
.sentText {
  margin: -18px 0 12px;
}
.sentHint {
  font-size: 0.9rem;
  color: #6b6f85;
  margin: 0;
}

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 820px) {
  .root {
    grid-template-columns: 1fr;
  }
  .picture {
    padding: 64px 24px 20px;
  }
  .image {
    max-width: 360px;
  }
  .card {
    padding: 34px 26px 28px;
  }
}

/* This page's own: the embed box (boxPage's <main class="panel box">) is framed by a parent page that draws its own
   card, so the box drops the panel's ultramarine and padding and the card's padding, corners and shadow. */
.box {
  padding: 0;
  background: none;
}
.box .card {
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

/* This page's own: the browser's default body margin, zeroed. Kept out of the HTML because the page's CSP
   (style-src 'self') refuses an inline style. */
body {
  margin: 0;
}