@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
 * SGEG CANVAS THEME — CUSTOM CSS  (generated file, do not edit)
 *
 * Built by canvas-theme/build_theme_css.mjs from:
 *   1. vendor/ai_buddy_badge.css  — the Education Coach rules already live
 *   2. login.css                  — the SGEG sign-in screen
 *
 * Upload at: Canvas Admin → Themes → (active theme) → Upload → Custom CSS.
 * Canvas keeps ONE CSS file per theme: uploading anything narrower than this
 * removes whatever is missing from it.
 *
 * The theme's custom JavaScript (Invigilator loader + Coach badge) is a
 * separate upload and is untouched by this file — see vendor/canvas-theme.js.
 *
 * Built: 2026-08-31
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 1 · EDUCATION COACH BADGE (vendored, unchanged) ════════════════════ */

/*
 * SGEG Education Coach — Canvas Theme CSS
 * Append this to your existing Canvas theme CSS.
 * These rules are scoped to #sgeg-coach-* so they won't affect any other Canvas UI.
 */

/* Floating badge button */
#sgeg-coach-badge {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: #0A2240;
  box-shadow: 0 4px 16px rgba(10, 34, 64, 0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s, box-shadow 0.18s;
  outline: none;
}

#sgeg-coach-badge:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(10, 34, 64, 0.50);
}

#sgeg-coach-badge:focus-visible {
  box-shadow: 0 0 0 3px #007A87, 0 4px 16px rgba(10, 34, 64, 0.40);
}

/* Side panel */
#sgeg-coach-panel {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9998;
  width: 380px;
  height: 100vh;
  max-height: 100vh;
  background: #ffffff;
  box-shadow: -4px 0 24px rgba(10, 34, 64, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 1px solid #B8D8DC;
}

#sgeg-coach-panel.open {
  transform: translateX(0);
}

/* Panel header */
#sgeg-coach-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #0A2240;
  flex-shrink: 0;
}

#sgeg-coach-panel-head svg {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

#sgeg-coach-panel-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  flex: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#sgeg-coach-close {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.13s;
}

#sgeg-coach-close:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* Chat iframe */
#sgeg-coach-frame {
  flex: 1;
  border: none;
  width: 100%;
  background: #F0F4F7;
}

/* Loading state */
#sgeg-coach-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  background: #F0F4F7;
}

#sgeg-coach-loading svg {
  width: 56px;
  height: 56px;
  animation: sgeg-pulse 1.6s ease-in-out infinite;
}

@keyframes sgeg-pulse {
  0%,  100% { opacity: 1;   transform: scale(1); }
  50%        { opacity: 0.7; transform: scale(0.95); }
}

#sgeg-coach-loading p {
  color: #0A2240;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

/* Error state */
#sgeg-coach-error {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  background: #F0F4F7;
  text-align: center;
}

#sgeg-coach-error p {
  color: #6B7280;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
}

#sgeg-coach-error button {
  margin-top: 4px;
  padding: 8px 20px;
  background: #0A2240;
  color: #ffffff;
  border: none;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#sgeg-coach-error button:hover {
  background: #1a367e;
}

/* Mobile backdrop */
#sgeg-coach-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(10, 34, 64, 0.35);
}

@media (max-width: 440px) {
  #sgeg-coach-panel {
    width: 100vw;
  }

  #sgeg-coach-backdrop {
    display: block;
    opacity: 0;
    transition: opacity 0.28s;
    pointer-events: none;
  }

  #sgeg-coach-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  #sgeg-coach-badge {
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
  }
}


/* ═══ SECTION 2 — Sign-in screen ═══════════════════════════════════════════
 *
 * Brand: navy #26358C ground, white logo, gold #F9BE00 action.
 * Gold is the only saturated colour on the page, so the eye lands on Log In.
 * Gold on navy measures 8.9:1 and navy on gold 8.9:1 — both clear WCAG AA for
 * normal text, which matters because a learner may be reading this on a cheap
 * phone in direct sun.
 *
 * To switch to the "navy → teal, white card" alternative, change --sgeg-ground
 * to the gradient and set --sgeg-card to #FFFFFF; the rest follows.
 * ═════════════════════════════════════════════════════════════════════════ */

body.ic-Login-Body {
  --sgeg-navy:   #26358C;
  --sgeg-navy-d: #1B2668;
  --sgeg-gold:   #F9BE00;
  --sgeg-gold-d: #E0AA00;
  --sgeg-teal:   #26BBC1;
  --sgeg-ink:    #1A2140;

  background: var(--sgeg-navy);
  font-family: 'Inter', Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── header: logo, then the account link — never side by side ─────────────
   Canvas lays the header out as a flex ROW, so `.ic-Login-header__logo`
   (160px) and `.ic-Login-header__links` ("Parent of a Canvas User? Click Here
   For an Account") share one line. Giving the logo a usable size made it
   overflow its 160px slot and run straight underneath that link text — worse
   on a phone, where the link wraps to three lines beside a squashed logo.
   Stacking the two is the fix, and it lets the logo be as big as it deserves. */
body.ic-Login-Body .ic-Login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;                 /* the two slogan lines live in adjacent blocks; a
                             flex gap would drive a wedge between them */
  margin-bottom: 30px;
}

body.ic-Login-Body .ic-Login-header__logo {
  width: 100%;
  max-width: 260px;
  flex: 0 0 auto;        /* Canvas sets `flex: 0 0 160px` here. In its own row
                            layout that is a 160px WIDTH; once this header is a
                            column, the identical declaration becomes a 160px
                            HEIGHT and opens a 116px hole under a 44px logo. */
  height: auto;
  margin: 0;
}

body.ic-Login-Body .ic-Login-header__logo img,
body.ic-Login-Body .ic-Login-header__logo svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80px;
  object-fit: contain;
}

/* Requesting an account is a real Canvas feature, so the link stays — just
   quieter, centred, and on a line of its own where it cannot touch the logo. */
body.ic-Login-Body .ic-Login-header__links {
  width: 100%;
  /* Canvas ships this block with padding-left:12px and padding-right:0. That
     asymmetry pushed the bold slogan line and the gold rule 6px right of the
     line above them — measured, not guessed. */
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  opacity: .85;
}

/* ── the form column ──────────────────────────────────────────────────────
   Canvas's default column is narrow and top-heavy. This gives it breathing
   room without moving anything, so the markup stays exactly as Canvas ships
   it and a Canvas upgrade cannot break the layout. */
body.ic-Login-Body .ic-Login__content {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

body.ic-Login-Body .ic-Login__innerContent {
  padding: 0 8px;
}

/* ── field labels ─────────────────────────────────────────────────────── */
/* !important because Canvas compiles ic-brand-Login-Content-label-text-color
   into a rule that outranks this one — when that variable was briefly dark for
   a white-card experiment, the labels went unreadable on navy. */
body.ic-Login-Body .ic-Label {
  font-family: 'Poppins', Lato, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
  color: #FFFFFF !important;
  margin-bottom: 6px;
}

/* ── inputs ───────────────────────────────────────────────────────────────
   16px is deliberate and not a style choice: iOS Safari zooms the whole page
   when a focused input is under 16px, which throws a parent straight off the
   login screen on their phone. 46px min-height clears the 44px touch target. */
body.ic-Login-Body .ic-Input {
  font-family: 'Inter', Lato, sans-serif;
  font-size: 16px;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: #FFFFFF;
  color: var(--sgeg-ink);
  transition: box-shadow .15s, border-color .15s;
}

body.ic-Login-Body .ic-Input:focus {
  outline: none;
  border-color: var(--sgeg-teal);
  box-shadow: 0 0 0 3px rgba(38, 187, 193, .55);
}

/* ── the one action ───────────────────────────────────────────────────── */
body.ic-Login-Body .Button--login {
  font-family: 'Poppins', Lato, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em;
  min-height: 50px;
  border-radius: 999px;
  border: none;
  background: var(--sgeg-gold);
  color: var(--sgeg-ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  transition: background-color .15s, transform .1s;
}

body.ic-Login-Body .Button--login:hover,
body.ic-Login-Body .Button--login:focus {
  background: var(--sgeg-gold-d);
  color: var(--sgeg-ink);
}

body.ic-Login-Body .Button--login:active {
  transform: translateY(1px);
}

body.ic-Login-Body .Button--login:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px rgba(38, 187, 193, .8);
}

/* ── links ────────────────────────────────────────────────────────────── */
body.ic-Login-Body .ic-Login__link,
body.ic-Login-Body .ic-Login__forgot .ic-Login__link {
  color: var(--sgeg-gold) !important;
  font-weight: 500;
  text-decoration: none;
}

body.ic-Login-Body .ic-Login__link:hover,
body.ic-Login-Body .ic-Login__link:focus {
  color: #FFFFFF;
  text-decoration: underline;
}

/* ── the actions row ──────────────────────────────────────────────────────
   Canvas makes this a flex row of two columns: "Stay signed in" and
   "Forgot Password?" on the left, the button on the right. The columns are
   different heights and nothing aligns them, so a taller button rides up
   beside the checkbox while the forgot link hangs below it, level with
   nothing. Centring both columns puts everything on one axis. */
body.ic-Login-Body .ic-Login__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

/* Left column left as Canvas ships it. Its children are
   [hidden input, checkbox, label, .ic-Login__forgot] — making it a flex column
   puts each on its own row and tears the checkbox off "Stay signed in". */
body.ic-Login-Body .ic-Login__actions-timeout {
  display: block;
}

body.ic-Login-Body label[for="pseudonym_session_remember_me"] {
  vertical-align: middle;
}

body.ic-Login-Body .ic-Login__forgot {
  margin-top: 12px;
}

body.ic-Login-Body .ic-Login__forgot-text {
  color: rgba(255, 255, 255, .9);
  font-size: 14px;
  line-height: 1.55;
}

/* "Stay signed in" sits next to the checkbox and must stay readable. */
body.ic-Login-Body label[for="pseudonym_session_remember_me"] {
  color: rgba(255, 255, 255, .92);
  font-size: 14px;
}

/* ── footer ───────────────────────────────────────────────────────────────
   The legally required links (Privacy, Cookie Notice, Terms) stay exactly
   where Canvas puts them and stay reachable — only their weight comes down. */
body.ic-Login-Body .ic-Login-footer {
  padding-top: 26px;
}

body.ic-Login-Body .ic-Login-footer__links a {
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  text-decoration: none;
}

body.ic-Login-Body .ic-Login-footer__links a:hover,
body.ic-Login-Body .ic-Login-footer__links a:focus {
  color: #FFFFFF;
  text-decoration: underline;
}

body.ic-Login-Body .ic-Login-footer__logo-link {
  opacity: .55;
}

body.ic-Login-Body .ic-Login-footer__logo-link:hover {
  opacity: .85;
}

/* ── narrow screens ───────────────────────────────────────────────────────
   Most SGEG families sign in on a phone. */
@media (max-width: 480px) {
  body.ic-Login-Body .ic-Login-header__logo {
    max-width: 210px;
  }

  body.ic-Login-Body .ic-Login__content {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Stack the row and let the button take the full width. The previous rule
     targeted `.Button--login` alone and lost to Canvas's own selector, so the
     button stayed 123px wide in the corner of a 390px screen — a miss waiting
     to happen for a six-year-old or anyone with a tremor. */
  body.ic-Login-Body .ic-Login__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  body.ic-Login-Body .ic-Login__actions .ic-Form-control--login,
  body.ic-Login-Body .ic-Login__actions .Button--login {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ic-Login-Body .Button--login,
  body.ic-Login-Body .ic-Input {
    transition: none;
  }
}

/* ── the slogan ───────────────────────────────────────────────────────────
   "The power of education is in your own hands."

   Attached to the logo block rather than inserted into the page, because
   `ic-brand-Login-custom-message` has no field in this Canvas version's Theme
   Editor and the alternative was appending to the theme's JavaScript — the
   same file that carries the Invigilator proctoring loader. A pseudo-element
   costs nothing and cannot break that.

   Rendering it inside the logo container also puts it in the right place:
   under the wordmark and ABOVE the "Parent of a Canvas User?" link, so the
   identity reads as one block instead of being split by a utility link.

   Caveat worth knowing: CSS-generated text is announced by current screen
   readers but is not selectable or translatable. That is acceptable for a
   slogan, which repeats the brand rather than carrying information a learner
   needs to sign in. If it ever has to be real text, it moves to the theme JS.

   Set quieter than the button on purpose — white at 88% rather than gold, so
   the eye still lands on Log In. */
body.ic-Login-Body .ic-Login-header__logo::after {
  content: "The power of education is in";
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 34ch;
  margin: 24px auto 0;
  padding: 0 16px;
  font-family: 'Poppins', Lato, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.01em;
  text-align: center;
  color: rgba(255, 255, 255, .92);
}

/* Line two, carrying the emphasis. A single `content` string cannot be part
   bold — it is one text run — so the sentence is split across the two header
   blocks, which sit directly above one another in this column layout. The
   alternative was injecting real markup from the theme JavaScript, and that is
   the same file that loads Invigilator proctoring for the whole school. Not a
   trade worth making for a bold phrase. */
body.ic-Login-Body .ic-Login-header__links::before {
  content: "your own hands.";
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 34ch;
  margin: 2px auto 22px;
  padding: 0 16px 18px;
  font-family: 'Poppins', Lato, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
  text-align: center;
  color: #FFFFFF;
  border-bottom: 3px solid var(--sgeg-gold);
}

/* The logo box has to be wide enough to hold the slogan on one line, but the
   wordmark itself must NOT grow with it — widening the container alone pushed
   the logo from 260px to ~370px. So the box grows and the image is capped. */
body.ic-Login-Body .ic-Login-header__logo {
  max-width: 420px;
}

body.ic-Login-Body .ic-Login-header__logo img,
body.ic-Login-Body .ic-Login-header__logo svg {
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 480px) {
  body.ic-Login-Body .ic-Login-header__logo::after {
    font-size: 17px;
    margin-top: 18px;
    padding: 0 14px;
  }

  body.ic-Login-Body .ic-Login-header__links::before {
    font-size: 17px;
    margin-bottom: 18px;
    padding: 0 14px 14px;
  }
}