/* ════════════════════════════════════════════════════════════════════════════
 * THE MO SCHOOL — Canvas theme override (v23 — comprehensive)
 * Aligned with the marketing site (themoschool.org).
 *
 *   Palette:    Oxford ink · Ivory paper · Burgundy seal · Aged gold
 *   Typography: EB Garamond (body + heading) · IBM Plex Mono (labels)
 *
 *   1. Login — custom split-panel via DOM replacement (see mo-school-login.js)
 *   2. Post-login — comprehensive brand layer:
 *      · sidebar, footer, brand mark    (chrome)
 *      · typography across all pages    (serif headings, mono labels)
 *      · dashboard course cards         (palette overrides on canvas chrome)
 *      · right-side widgets             (Coming Up, View Calendar, etc.)
 *      · buttons, links, focus rings    (palette)
 *      · footer copy override           (replaces "Open Source LMS")
 *      We still defer Canvas's structural layout — flex grids, column widths,
 *      form-control sizing — so dense surfaces (gradebook, SpeedGrader,
 *      modules tree) keep their native interactions. Only paint changes.
 *   3. Polish & responsive
 * ════════════════════════════════════════════════════════════════════════════ */

/* TODO: self-host EB Garamond + IBM Plex Mono under /theme/fonts/ and replace
 * this @import with @font-face declarations. Removes the cross-origin Google
 * Fonts dependency and the @import-induced render-blocking chain. */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=IBM+Plex+Mono:wght@300;400;500;600&display=swap');

:root {
  /* Oxford — primary deep navy, nearly black. */
  --mo-oxford:    #0A1219;
  --mo-oxford-2:  #141E2C;

  /* Ivory — warm paper. */
  --mo-ivory:     #F5EFE0;
  --mo-ivory-2:   #EDE6D2;
  --mo-card:      #FBF7EC;

  /* Burgundy — the seal red. Primary CTA + accent. */
  --mo-burgundy:  #7E1F2C;
  --mo-burgundy-2:#5E1620;

  /* Aged gold — restrained ornament. */
  --mo-gold:      #A8884C;
  --mo-gold-2:    #8A6E36;

  /* Type colors */
  --mo-ink:       #0F1419;
  --mo-charcoal:  #3A3A3A;
  --mo-graphite:  #5C5C5C;
  --mo-soft:      #7A8294;

  /* Rules */
  --mo-rule:      #C9C1AB;
  --mo-rule-soft: #D9D2BD;

  /* Fonts */
  --mo-serif: 'EB Garamond', Georgia, serif;
  --mo-mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* Mobile chrome. env() keeps the Canvas header clear of iPhone notches
   * when students add the LMS to the home screen or use mobile Safari. */
  --mo-mobile-header-base: 56px;
  --mo-mobile-safe-top: env(safe-area-inset-top, 0px);
  --mo-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mo-mobile-header-height: calc(var(--mo-mobile-header-base) + var(--mo-mobile-safe-top));
}


/* ════════════════════════════════════════════════════════════════════════════
 * 1. LOGIN
 * ════════════════════════════════════════════════════════════════════════════ */

html,
body.ic-Login-Body,
body.ic-Login-Body #application,
body.ic-Login-Body #wrapper,
body.ic-Login-Body #main,
body.ic-Login-Body #not_right_side,
body.ic-Login-Body #content-wrapper,
body.ic-Login-Body #content,
body.ic-Login-Body .ic-Login,
body.ic-Login-Body .ic-Login__container,
body.ic-Login-Body .ic-Login__content,
body.ic-Login-Body .ic-Login__innerContent,
body.ic-Login-Body .ic-Login__body,
body.ic-Login-Body .ic-Layout-wrapper,
body.ic-Login-Body .ic-Layout-columns,
body.ic-Login-Body .ic-Layout-contentWrapper,
body.ic-Login-Body .ic-Layout-contentMain,
body.ic-Login-Body .ic-app-main-content,
body.ic-Login-Body .ms-page {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100vw !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

body.ic-Login-Body {
  background: linear-gradient(to right, var(--mo-oxford) 0%, var(--mo-oxford) 50%, var(--mo-ivory) 50%, var(--mo-ivory) 100%) !important;
  font-family: var(--mo-serif) !important;
  color: var(--mo-ink);
  font-size: 17px;
  line-height: 1.5;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga", "calt";
}
body.ic-Login-Body::-webkit-scrollbar,
body.ic-Login-Body *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body.ic-Login-Body .ic-Login-header,
body.ic-Login-Body .ic-Login-footer,
body.ic-Login-Body #right-side-wrapper { display: none !important; }

body.ic-Login-Body input[type="hidden"] {
  display: none !important;
  width: 0 !important; height: 0 !important;
  opacity: 0 !important; visibility: hidden !important;
}

/* FOUC kill — hide original DOM until JS replaces it.
 * `[data-mo-school-replaced]` is a presence check, so any non-empty value
 * (including the fallback "fallback" string) reveals the content. */
body.ic-Login-Body .ic-Login,
body.ic-Login-Body .ic-Login__container,
body.ic-Login-Body .ic-Login__content { background: transparent !important; }
body.ic-Login-Body .ic-Login__content:not([data-mo-school-replaced]) {
  visibility: hidden !important;
  opacity: 0 !important;
}
body.ic-Login-Body .ic-Login__content[data-mo-school-replaced] {
  visibility: visible !important;
  opacity: 1 !important;
  transition: opacity 200ms ease;
}

/* Split-panel layout */
.ms-page {
  display: grid !important;
  grid-template-columns: 50vw 50vw !important;
  width: 100vw !important;
  min-height: 100vh;
  position: relative;
}
.ms-brand     { width: 50vw !important; max-width: 50vw !important; box-sizing: border-box !important; }
.ms-form-side { width: 50vw !important; max-width: 50vw !important; box-sizing: border-box !important; }
.ms-brand, .ms-form-side {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* ── Brand side (oxford) ────────────────────────────────────────────── */
.ms-brand {
  background: var(--mo-oxford);
  color: var(--mo-ivory);
  padding: 56px 64px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
}
/* Burgundy top rule — echoes the marketing site Header bar */
.ms-brand::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--mo-burgundy);
}

.ms-brand-header { display: flex; flex-direction: column; gap: 8px; }

.ms-logo {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--mo-serif);
  font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--mo-ivory);
}
.ms-mark {
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--mo-burgundy);
  transform: rotate(45deg);
  flex-shrink: 0;
  position: relative;
  top: -2px;
}
.ms-wordmark { font-family: var(--mo-serif); }
.ms-brand-suffix {
  font-family: var(--mo-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--mo-gold);
  margin-left: 4px;
}

.ms-brand-eyebrow {
  font-family: var(--mo-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--mo-gold);
  margin: 0;
}

.ms-brand-center {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px 0;
}

.ms-brand-text {
  color: var(--mo-ivory) !important;
  font-family: var(--mo-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(36px, 4.4vw, 56px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em !important;
  margin: 0 !important;
  font-style: italic;
}
.ms-brand-text strong { font-style: normal; color: var(--mo-gold); font-weight: 500; }

.ms-brand-motto {
  margin: 24px 0 0;
  font-family: var(--mo-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(245, 239, 224, 0.55);
}

.ms-brand-foot {
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid rgba(245, 239, 224, 0.12);
  padding-top: 20px;
}
.ms-brand-foot p {
  margin: 0;
  font-family: var(--mo-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(245, 239, 224, 0.5);
}

/* ── Form side (ivory) ───────────────────────────────────────────── */
.ms-form-side {
  background: var(--mo-ivory);
  padding: 56px 72px;
  display: flex; flex-direction: column;
  position: relative;
}

.ms-top-link {
  position: fixed !important;
  top: 28px !important;
  right: 40px !important;
  font-family: var(--mo-mono) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mo-graphite) !important;
  white-space: nowrap !important;
  z-index: 100 !important;
}
.ms-top-link a {
  color: var(--mo-burgundy);
  font-weight: 500;
  margin-left: 10px;
  text-decoration: none;
}
.ms-top-link a:hover { text-decoration: underline; text-underline-offset: 3px; }

.ms-form-wrap {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 420px; width: 100%; margin: 0 auto;
}

.ms-form-eyebrow {
  font-family: var(--mo-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--mo-burgundy);
  font-weight: 500;
  margin: 0 0 14px;
}

.ms-form-wrap h1 {
  font-family: var(--mo-serif) !important;
  font-weight: 500;
  font-size: 44px; line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--mo-oxford);
  margin: 0 0 12px;
}
.ms-form-wrap h1 em {
  font-style: italic;
  color: var(--mo-burgundy);
  font-weight: 400;
}

.ms-lede {
  color: var(--mo-charcoal);
  font-family: var(--mo-serif);
  font-size: 16px;
  margin: 0 0 36px;
  line-height: 1.55;
}

/* Flash / error messages preserved from Canvas's response */
.ms-flash {
  margin: 0 0 28px;
  padding: 14px 16px;
  background: rgba(126, 31, 44, 0.06);
  border-left: 3px solid var(--mo-burgundy);
  font-family: var(--mo-serif);
  font-size: 15px;
  color: var(--mo-burgundy-2);
}
.ms-flash p { margin: 0; }
.ms-flash p + p { margin-top: 6px; }

.ms-field { margin-bottom: 22px; }
.ms-field label {
  display: block;
  font-family: var(--mo-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mo-burgundy);
  margin-bottom: 10px;
}
input.ms-text-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-family: var(--mo-serif);
  font-size: 16px;
  color: var(--mo-ink);
  background: var(--mo-card);
  border: 1px solid var(--mo-rule);
  border-radius: 0;
  outline: none;
  transition: border-color 150ms ease;
}
input.ms-text-input::placeholder {
  color: var(--mo-soft);
  font-style: italic;
}
input.ms-text-input:hover { border-color: var(--mo-gold); }
input.ms-text-input:focus {
  border-color: var(--mo-burgundy);
  box-shadow: 0 0 0 1px var(--mo-burgundy);
}

.ms-row { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 32px; }
.ms-check {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  font-family: var(--mo-serif);
  font-size: 15px;
  color: var(--mo-ink);
  position: relative;
}
.ms-check input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.ms-box {
  width: 16px; height: 16px;
  border: 1px solid var(--mo-rule);
  background: var(--mo-card);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: all 150ms ease;
}
.ms-box svg { width: 11px; height: 11px; color: var(--mo-ivory); opacity: 0; transition: opacity 150ms ease; }
.ms-check input[type="checkbox"]:checked + .ms-box {
  background: var(--mo-burgundy);
  border-color: var(--mo-burgundy);
}
.ms-check input[type="checkbox"]:checked + .ms-box svg { opacity: 1; }

.ms-forgot {
  font-family: var(--mo-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mo-burgundy);
  font-weight: 500;
  text-decoration: none;
}
.ms-forgot:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Primary CTA — mono uppercase, matches .ms-btn-primary from the marketing site */
.ms-btn {
  width: 100%;
  padding: 14px 20px;
  font-family: var(--mo-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mo-ivory);
  background: var(--mo-oxford);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 180ms ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.ms-btn:hover { background: var(--mo-burgundy); }
.ms-btn-arrow {
  color: var(--mo-gold);
  font-family: var(--mo-serif);
}

.ms-foot {
  margin-top: auto; padding-top: 32px;
  display: flex; gap: 24px;
  font-family: var(--mo-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.ms-foot a { color: var(--mo-graphite); text-decoration: none; }
.ms-foot a:hover { color: var(--mo-burgundy); }


/* ════════════════════════════════════════════════════════════════════════════
 * 2. POST-LOGIN  —  RESTRAINED brand layer
 *
 * Canvas's post-login UI (dashboard, courses, gradebook, modules, files,
 * SpeedGrader, etc.) is dense and intricate. Heavy CSS overrides break it —
 * forced flex layouts collide with Canvas's responsive grid, font swaps
 * mis-size form controls, link-color overrides leak into chrome the user
 * doesn't expect. We keep changes to the three places that say "Mo School"
 * without fighting Canvas:
 *
 *   ① Sidebar (left nav)  — Oxford navy + burgundy stripe + diamond mark
 *   ② Sidebar mark/logo   — Burgundy diamond replacing Canvas's icon
 *   ③ Footer              — Oxford strip with burgundy top rule
 *
 * Everything else (typography, layout, buttons, links, cards, forms, course
 * pages, flash messages, etc.) keeps Canvas's native styling. Canvas's
 * own brand-variables system handles colour cohesion if you ever want to
 * push tone further — set them through Admin → Themes in the web UI, not
 * here.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Reclaim the top of the page on desktop.
 *
 * Canvas reserves vertical space at the top of every page for:
 *   - the mobile header (#mobile-header) + its spacer (.mobile-header-space)
 *   - mobile context nav (#mobileContextNavContainer)
 *   - the EU cookie notice mobile shell (#nutrition_facts_mobile_container)
 *   - the dashboard's title + 3-dot menu chrome (#dashboard_header_container)
 *
 * On desktop none of these are visible but Canvas keeps the spacing they
 * occupy, leaving a ~700px empty band at the top of every page. We hide
 * the elements AND force zero padding/margin on the major layout wrappers
 * to collapse the band entirely. The sidebar handles all desktop
 * navigation.
 */
@media (min-width: 768px) {
  body:not(.ic-Login-Body) #mobile-header,
  body:not(.ic-Login-Body) .mobile-header-space,
  body:not(.ic-Login-Body) #nutrition_facts_mobile_container,
  body:not(.ic-Login-Body) #mobileContextNavContainer {
    display: none !important;
  }

  body:not(.ic-Login-Body) #wrapper,
  body:not(.ic-Login-Body) #main,
  body:not(.ic-Login-Body) #not_right_side,
  body:not(.ic-Login-Body) .ic-app-main-content,
  body:not(.ic-Login-Body) #content-wrapper,
  body:not(.ic-Login-Body) #content,
  body:not(.ic-Login-Body) #dashboard,
  body:not(.ic-Login-Body) #dashboard-activity {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* Dashboard-specific: hide the empty title + 3-dot menu container */
body:not(.ic-Login-Body) #dashboard_header_container,
body:not(.ic-Login-Body) .ic-Dashboard-header {
  display: none !important;
}

/* Empty container hunt — these wrappers render with no content (or content
 * that's display:none) but have padding/margin baked in. Collapse them when
 * they're effectively empty so the page isn't bloated at the top. */
body:not(.ic-Login-Body) #announcementWrapper:empty,
body:not(.ic-Login-Body) #dashboard-activity[style*="display: none"],
body:not(.ic-Login-Body) #dashboard-activity[style*="display:none"],
body:not(.ic-Login-Body) #flash_message_holder:empty,
body:not(.ic-Login-Body) #flash_screenreader_holder:empty {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Force the dashboard root to start at the top with no extra spacing */
body:not(.ic-Login-Body) #dashboard.ic-dashboard-app {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ── ① Sidebar (left nav) — oxford with burgundy stripe ───────────── */
/* Do NOT override position — Canvas sets .ic-app-header to `position: fixed`
 * so it floats on the left while the main content sits flush at top:0 with
 * `margin-left`. Setting `position: relative` here was making the sidebar
 * flow inline with the document and pushing the entire main content area
 * ~600px down the page (the giant empty gap above the dashboard).
 * The ::before stripe positions absolutely against the existing fixed
 * containing block — no extra position rule needed. */
.ic-app-header {
  background: var(--mo-oxford) !important;
  border-right: 1px solid #000 !important;
}
/* Top stripe — echoes the marketing site Header */
.ic-app-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--mo-burgundy);
  z-index: 1;
}

/* Sidebar item link colour — tuned for the oxford bg */
.ic-app-header__menu-list-link {
  color: rgba(245, 239, 224, 0.78) !important;
}
.ic-app-header__menu-list-link:hover {
  color: var(--mo-ivory) !important;
  background: rgba(255,255,255,0.04) !important;
}
.ic-app-header__menu-list-item--active .ic-app-header__menu-list-link {
  color: var(--mo-ivory) !important;
  background: rgba(255,255,255,0.06) !important;
}
/* Burgundy indicator on the active item */
.ic-app-header__menu-list-item { position: relative; }
.ic-app-header__menu-list-item--active::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--mo-burgundy);
}

/* ── ② Brand mark slot — hidden entirely
 *
 * Removed the burgundy diamond mark per design feedback ("favicon logo
 * not looking good — remove everywhere"). Canvas's own Instructure logo
 * image stays hidden too so the slot doesn't fall back to showing that.
 * The sidebar reads as just navigation icons + the burgundy top stripe.
 */
.ic-app-header__logomark {
  background: transparent !important;
}
.ic-app-header__logomark svg,
.ic-app-header__logomark img,
.ic-app-header__logomark::before { display: none !important; }

/* ── ③ Footer — thin oxford strip with burgundy top rule ──────────── */
.ic-app-footer {
  background: var(--mo-oxford) !important;
  border-top: 3px solid var(--mo-burgundy) !important;
  color: rgba(245, 239, 224, 0.65) !important;
}
.ic-app-footer a,
.ic-app-footer__links a,
#footer a, #footer-links a {
  color: rgba(245, 239, 224, 0.75) !important;
}
.ic-app-footer a:hover,
.ic-app-footer__links a:hover,
#footer a:hover {
  color: var(--mo-gold) !important;
}
/* Hide the Instructure logo in the footer (we're not Instructure) */
.ic-app-footer__logo-link,
.ic-app-footer img[alt*="Instructure" i] { display: none !important; }


/* ════════════════════════════════════════════════════════════════════════════
 * 2b. POST-LOGIN — COMPREHENSIVE PAINT LAYER
 *
 * Beyond chrome, this layer paints the surfaces that actually carry the
 * brand once a user is in: typography, dashboard cards, side widgets,
 * buttons, links. All purely cosmetic — no structural overrides that
 * would break Canvas's responsive grid.
 *
 * Naming convention: every selector is body:not(.ic-Login-Body) scoped
 * (handled per-block) so login styling stays isolated.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Typography across post-login ────────────────────────────────────
 * Canvas defaults to a system sans (Lato). We promote serif on the
 * decorative surfaces (page titles, course-card titles, widget headers,
 * empty-state copy) and keep sans on dense functional surfaces
 * (gradebook cells, SpeedGrader, form controls). The selectors below
 * are deliberate, not blanket — a blanket `body { font-family: serif }`
 * would mis-size every form control Canvas built around Lato's metrics. */
body:not(.ic-Login-Body) {
  font-feature-settings: "kern", "liga";
}

/* Page titles (Dashboard, Course home, Modules, Assignments page header) */
body:not(.ic-Login-Body) h1,
body:not(.ic-Login-Body) h2,
body:not(.ic-Login-Body) .ic-Dashboard-header__title,
body:not(.ic-Login-Body) .ic-DashboardCard__header-title,
body:not(.ic-Login-Body) .ic-DashboardCard__header_content h2,
body:not(.ic-Login-Body) .ic-DashboardCard__header_content h3,
body:not(.ic-Login-Body) #breadcrumbs .home + li ~ li,
body:not(.ic-Login-Body) #content > h1,
body:not(.ic-Login-Body) #content > h2,
body:not(.ic-Login-Body) #section-tabs-header,
body:not(.ic-Login-Body) .page-title,
body:not(.ic-Login-Body) .ic-Dashboard-header__layout h1,
body:not(.ic-Login-Body) .ic-app-course-menu .menu-item__text,
body:not(.ic-Login-Body) .ic-app-nav-toggle-and-crumbs h1 {
  font-family: var(--mo-serif) !important;
  font-weight: 500 !important;
  letter-spacing: -0.008em !important;
  color: var(--mo-oxford) !important;
}

/* Dashboard top heading "Dashboard" — keep serif but smaller */
body:not(.ic-Login-Body) .ic-Dashboard-header__title {
  font-size: 28px !important;
  line-height: 1.1 !important;
}

/* Section labels Canvas uses on the dashboard ("Published Courses (n)",
 * "Unpublished Courses (n)", "Coming Up", etc.) */
body:not(.ic-Login-Body) .ic-DashboardCard__box__header,
body:not(.ic-Login-Body) .ic-DashboardCard__box header,
body:not(.ic-Login-Body) .Sidebar__TodoListContainer h2,
body:not(.ic-Login-Body) .Sidebar h2,
body:not(.ic-Login-Body) .events_list h2,
body:not(.ic-Login-Body) .todo-list-header,
body:not(.ic-Login-Body) #right-side h2,
body:not(.ic-Login-Body) #right-side h3 {
  font-family: var(--mo-serif) !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  color: var(--mo-oxford) !important;
  letter-spacing: -0.005em !important;
}

/* Eyebrow labels (course code, "COURSE I", etc. — small mono uppercase) */
body:not(.ic-Login-Body) .ic-DashboardCard__header-subtitle,
body:not(.ic-Login-Body) .ic-DashboardCard__header-term,
body:not(.ic-Login-Body) .ic-DashboardCard__header_content p {
  font-family: var(--mo-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  color: var(--mo-graphite) !important;
}

/* Body copy throughout — only override on surfaces that carry prose
 * rather than form controls. */
body:not(.ic-Login-Body) #content p:not(.error_text),
body:not(.ic-Login-Body) .ic-Dashboard__details,
body:not(.ic-Login-Body) .ic-Card__list-body,
body:not(.ic-Login-Body) .ic-EmptyState__body,
body:not(.ic-Login-Body) .ic-DashboardCard__action-container {
  font-family: var(--mo-serif) !important;
}

/* ── Course cards (the dashboard tiles) ──────────────────────────────
 * Canvas auto-assigns a random palette colour to each course card
 * header. The defaults (#E73C7E pink, #57B14F green, etc.) clash with
 * our restrained palette. We can't easily reach into the inline
 * `background-color` Canvas writes onto the .ic-DashboardCard__header,
 * but we can OVERLAY a subtle parchment treatment that mutes any
 * bright underlying colour and reads as Oxford-ish from a distance. */
body:not(.ic-Login-Body) .ic-DashboardCard {
  border: 1px solid var(--mo-rule) !important;
  box-shadow: 0 1px 3px rgba(10, 18, 25, 0.04) !important;
  border-radius: 0 !important;
  background: var(--mo-ivory) !important;
  transition: box-shadow 200ms ease, transform 200ms ease !important;
}
body:not(.ic-Login-Body) .ic-DashboardCard:hover {
  box-shadow: 0 6px 18px rgba(10, 18, 25, 0.08) !important;
  transform: translateY(-1px) !important;
  border-color: var(--mo-burgundy) !important;
}

/* The coloured banner at the top of every card.
 * We replace it with a deep-oxford header + burgundy bottom rule —
 * keeps Canvas's per-course colour distinction (still visible at the
 * thin rule) but the dominant tone is institutional. */
body:not(.ic-Login-Body) .ic-DashboardCard__header_hero {
  background: var(--mo-oxford) !important;
  background-image: linear-gradient(135deg, var(--mo-oxford) 0%, var(--mo-oxford-2) 100%) !important;
  position: relative !important;
}
/* Burgundy hair-rule at the very bottom of the banner */
body:not(.ic-Login-Body) .ic-DashboardCard__header_hero::after {
  content: '' !important;
  position: absolute !important;
  left: 0; right: 0; bottom: 0 !important;
  height: 2px !important;
  background: var(--mo-burgundy) !important;
}

/* Card title (course name) — serif on parchment */
body:not(.ic-Login-Body) .ic-DashboardCard__header-title,
body:not(.ic-Login-Body) .ic-DashboardCard__link-container h2,
body:not(.ic-Login-Body) .ic-DashboardCard__link-container a {
  font-family: var(--mo-serif) !important;
  font-weight: 500 !important;
  color: var(--mo-burgundy) !important;
  font-size: 17px !important;
  letter-spacing: -0.005em !important;
}

/* "COURSE I" / "COURSE II" eyebrow + term — mono uppercase, gold */
body:not(.ic-Login-Body) .ic-DashboardCard__header-subtitle,
body:not(.ic-Login-Body) .ic-DashboardCard__header-term {
  color: var(--mo-gold-2) !important;
}

/* The three-dot menu icon in the card corner */
body:not(.ic-Login-Body) .ic-DashboardCard__header-button,
body:not(.ic-Login-Body) .ic-DashboardCard__header-button svg {
  color: var(--mo-ivory) !important;
  fill: var(--mo-ivory) !important;
}

/* Activity icons at the foot of each card (announcements, etc.) */
body:not(.ic-Login-Body) .ic-DashboardCard__action-container .ic-DashboardCard__action svg {
  color: var(--mo-graphite) !important;
  fill: var(--mo-graphite) !important;
}
body:not(.ic-Login-Body) .ic-DashboardCard__action-container .ic-DashboardCard__action:hover svg {
  color: var(--mo-burgundy) !important;
  fill: var(--mo-burgundy) !important;
}

/* ── Right-side widgets ("Coming Up", "View Calendar", "Start a New
 *    Course", "View Grades") ────────────────────────────────────────── */
body:not(.ic-Login-Body) #right-side .Button,
body:not(.ic-Login-Body) #right-side .btn,
body:not(.ic-Login-Body) #right-side a.button,
body:not(.ic-Login-Body) #right-side .ic-Button,
body:not(.ic-Login-Body) .Sidebar__Button {
  font-family: var(--mo-mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  font-weight: 500 !important;
  background: var(--mo-card) !important;
  color: var(--mo-oxford) !important;
  border: 1px solid var(--mo-rule) !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
  transition: all 180ms ease !important;
}
body:not(.ic-Login-Body) #right-side .Button:hover,
body:not(.ic-Login-Body) #right-side .btn:hover,
body:not(.ic-Login-Body) #right-side a.button:hover,
body:not(.ic-Login-Body) .Sidebar__Button:hover {
  background: var(--mo-oxford) !important;
  color: var(--mo-ivory) !important;
  border-color: var(--mo-oxford) !important;
}

/* "View Calendar" link in the Coming Up widget header */
body:not(.ic-Login-Body) .events_list .header a,
body:not(.ic-Login-Body) .Sidebar__TodoListContainer a {
  color: var(--mo-burgundy) !important;
  font-family: var(--mo-mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  text-decoration: none !important;
}
body:not(.ic-Login-Body) .events_list .header a:hover,
body:not(.ic-Login-Body) .Sidebar__TodoListContainer a:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* "Nothing for the next week" empty-state in the Coming Up widget */
body:not(.ic-Login-Body) .events_list .no_events,
body:not(.ic-Login-Body) .ic-EmptyState,
body:not(.ic-Login-Body) #right-side .no-content {
  font-family: var(--mo-serif) !important;
  font-style: italic !important;
  color: var(--mo-graphite) !important;
}

/* ── Buttons (Canvas-native primary CTAs everywhere) ────────────────── */
body:not(.ic-Login-Body) .Button--primary,
body:not(.ic-Login-Body) .btn-primary,
body:not(.ic-Login-Body) button[type="submit"].Button,
body:not(.ic-Login-Body) .ic-Action-header__Primary .Button--primary {
  background: var(--mo-burgundy) !important;
  background-image: none !important;
  border-color: var(--mo-burgundy) !important;
  color: var(--mo-ivory) !important;
  font-family: var(--mo-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body:not(.ic-Login-Body) .Button--primary:hover,
body:not(.ic-Login-Body) .btn-primary:hover {
  background: var(--mo-burgundy-2) !important;
  border-color: var(--mo-burgundy-2) !important;
}

body:not(.ic-Login-Body) .Button:not(.Button--primary):not(.Button--icon-action):not(.Button--link),
body:not(.ic-Login-Body) .btn:not(.btn-primary):not(.btn-link) {
  border-radius: 0 !important;
  font-family: var(--mo-mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  border-color: var(--mo-rule) !important;
}

/* ── Links throughout content area ──────────────────────────────────── */
body:not(.ic-Login-Body) #content a:not(.btn):not(.Button):not(.ic-DashboardCard__link):not(.ui-button),
body:not(.ic-Login-Body) #wrapper a.external,
body:not(.ic-Login-Body) .ig-link {
  color: var(--mo-burgundy) !important;
  text-decoration-color: rgba(126, 31, 44, 0.4) !important;
  text-underline-offset: 2px !important;
}
body:not(.ic-Login-Body) #content a:hover:not(.btn):not(.Button) {
  text-decoration-color: var(--mo-burgundy) !important;
}

/* ── Footer text override ────────────────────────────────────────────
 * Canvas's footer shows "Open Source LMS" with an Instructure logo.
 * We hide the logo (already done above) and OVERWRITE the visible text
 * using the ::after pseudo trick: hide the original copy, paint ours
 * in its place. */
body:not(.ic-Login-Body) .ic-app-footer {
  font-family: var(--mo-mono) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  padding: 14px 24px !important;
  min-height: 44px !important;
}
/* Hide Canvas's default footer link list / "Open Source LMS" copy */
body:not(.ic-Login-Body) .ic-app-footer__links,
body:not(.ic-Login-Body) #footer-links,
body:not(.ic-Login-Body) .ic-app-footer .ic-app-footer__cell,
body:not(.ic-Login-Body) #footer .footer-logo,
body:not(.ic-Login-Body) #footer .legal {
  display: none !important;
}
/* Paint our own copy via pseudo-element */
body:not(.ic-Login-Body) .ic-app-footer::after {
  content: '© THE MO SCHOOL OF TECHNOLOGY';
  color: rgba(245, 239, 224, 0.55);
  font-family: var(--mo-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  display: block;
  text-align: center;
  width: 100%;
}

/* ── Sidebar account avatar / "Account" label polish ────────────────── */
body:not(.ic-Login-Body) .ic-app-header__menu-list-item .menu-item__text {
  font-family: var(--mo-mono) !important;
  font-size: 9px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
}

/* ── Flash messages (success / error / notice toasts) ───────────────── */
/* Opaque backgrounds are load-bearing on mobile: with the converted top-bar
 * header at z-index 1000, any translucent banner gets the dark oxford header
 * bleeding through it and the first line of text becomes unreadable. Keep
 * these solid. Also include `.ic-flash-notice` — Canvas uses that class for
 * info banners like "You are logged in at … using your credentials from
 * Site Admin", and without it Canvas's default semi-transparent styling
 * shows through. */
body:not(.ic-Login-Body) .ic-flash-notice,
body:not(.ic-Login-Body) .ic-flash-success {
  background: #ffffff !important;
  border-left: 3px solid var(--mo-gold) !important;
  color: var(--mo-oxford) !important;
  font-family: var(--mo-serif) !important;
}
body:not(.ic-Login-Body) .ic-flash-error,
body:not(.ic-Login-Body) .ic-flash-warning {
  background: #ffffff !important;
  border-left: 3px solid var(--mo-burgundy) !important;
  color: var(--mo-burgundy-2) !important;
  font-family: var(--mo-serif) !important;
}

/* ── Tables across post-login (assignments, gradebook lists, etc.) ──── */
body:not(.ic-Login-Body) table.ic-Table thead th,
body:not(.ic-Login-Body) table.roster thead th {
  font-family: var(--mo-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--mo-burgundy) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
 * 3. POLISH
 * ════════════════════════════════════════════════════════════════════════════ */
::selection { background: var(--mo-burgundy); color: var(--mo-ivory); }
*:focus-visible { outline: 1.5px solid var(--mo-burgundy) !important; outline-offset: 3px !important; }


/* ════════════════════════════════════════════════════════════════════════════
 * 4. RESPONSIVE
 * ════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 1024px) {
  body:not(.ic-Login-Body) #right-side-wrapper {
    flex: 0 0 260px !important;
    width: 260px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 768px) {
  /* Sidebar → top bar */
  body:not(.ic-Login-Body) .ic-app-header {
    width: 100% !important;
    height: var(--mo-mobile-header-height) !important;
    min-height: var(--mo-mobile-header-height) !important;
    padding-top: var(--mo-mobile-safe-top) !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    flex-direction: row !important;
    border-right: none !important;
    border-bottom: 1px solid #000 !important;
    z-index: 1000 !important;
  }
  /* Mobile: the sidebar becomes a fixed 56px top bar (rule above), so EVERY
   * page must reserve 56px at the top — not just when nav is expanded.
   * Gating this on `.primary-nav-expanded` left flash banners + content
   * sitting under the header in the default (collapsed) state. */
  body:not(.ic-Login-Body) .ic-app-main-content,
  body:not(.ic-Login-Body) #wrapper {
    margin-left: 0 !important;
    padding-top: var(--mo-mobile-header-height) !important;
  }
  body:not(.ic-Login-Body) .mobile-header-space {
    height: 0 !important;
    min-height: 0 !important;
    display: none !important;
  }
  body:not(.ic-Login-Body) #mobile-header {
    min-height: var(--mo-mobile-header-height) !important;
    padding-top: var(--mo-mobile-safe-top) !important;
    box-sizing: border-box !important;
    background: var(--mo-oxford) !important;
    border-bottom: 1px solid #000 !important;
  }
  body:not(.ic-Login-Body) #mobile-header .mobile-header-title {
    font-family: var(--mo-serif) !important;
    font-size: clamp(20px, 5.2vw, 28px) !important;
    line-height: 1.15 !important;
    color: var(--mo-ivory) !important;
  }
  body:not(.ic-Login-Body) #mobile-header button,
  body:not(.ic-Login-Body) #mobile-header a {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  /* Main stacks */
  body:not(.ic-Login-Body) #main,
  body:not(.ic-Login-Body) #main.ic-Layout-columns {
    flex-direction: column !important;
  }
  body:not(.ic-Login-Body) #right-side-wrapper {
    flex: 0 0 auto !important;
    width: 100% !important;
    padding: 0 16px calc(18px + var(--mo-mobile-safe-bottom)) !important;
  }
  body:not(.ic-Login-Body) #content-wrapper,
  body:not(.ic-Login-Body) #content,
  body:not(.ic-Login-Body) #not_right_side,
  body:not(.ic-Login-Body) .ic-Layout-contentMain,
  body:not(.ic-Login-Body) .ic-app-main-content__primary {
    min-width: 0 !important;
    max-width: 100vw !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  body:not(.ic-Login-Body) #content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Dashboard: remove the large empty band seen above course cards on
   * phones, then size the cards for a single-column student workflow. */
  body:not(.ic-Login-Body) #dashboard,
  body:not(.ic-Login-Body) #dashboard.ic-dashboard-app,
  body:not(.ic-Login-Body) #DashboardCard_Container,
  body:not(.ic-Login-Body) .ic-DashboardCard__box,
  body:not(.ic-Login-Body) .ic-DashboardCard__box__container,
  body:not(.ic-Login-Body) .ic-Dashboard__Card,
  body:not(.ic-Login-Body) .ic-Dashboard__layout,
  body:not(.ic-Login-Body) .ic-Dashboard__main {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: 0 !important;
  }
  body:not(.ic-Login-Body) #dashboard-activity,
  body:not(.ic-Login-Body) #dashboard_header_container,
  body:not(.ic-Login-Body) .ic-Dashboard-header {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body:not(.ic-Login-Body) .ic-DashboardCard {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 18px !important;
  }
  body:not(.ic-Login-Body) .ic-DashboardCard__header_hero {
    min-height: 132px !important;
  }
  body:not(.ic-Login-Body) .ic-DashboardCard__header_content {
    padding: 18px 20px !important;
  }
  body:not(.ic-Login-Body) .ic-DashboardCard__header-title,
  body:not(.ic-Login-Body) .ic-DashboardCard__link-container h2,
  body:not(.ic-Login-Body) .ic-DashboardCard__link-container a {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.1 !important;
  }

  /* Course nav drawer: keep the tap targets large, but stop the mobile
   * menu from reading like a poster. This helps Modules/Assignments fit
   * without feeling cramped. */
  body:not(.ic-Login-Body) #mobileContextNavContainer,
  body:not(.ic-Login-Body) .ic-app-course-menu,
  body:not(.ic-Login-Body) #section-tabs {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  body:not(.ic-Login-Body) .ic-app-course-menu .menu-item__text,
  body:not(.ic-Login-Body) #section-tabs .section-tab a,
  body:not(.ic-Login-Body) #section-tabs a {
    font-family: var(--mo-serif) !important;
    font-size: clamp(22px, 6.4vw, 30px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }
  body:not(.ic-Login-Body) #section-tabs .section-tab a,
  body:not(.ic-Login-Body) #section-tabs a {
    min-height: 48px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  body:not(.ic-Login-Body) #mobileContextNavContainer svg,
  body:not(.ic-Login-Body) .ic-app-course-menu svg,
  body:not(.ic-Login-Body) #section-tabs svg {
    width: 26px !important;
    height: 26px !important;
  }
  /* Login stacks */
  body.ic-Login-Body { background: var(--mo-ivory) !important; }
  .ms-page { grid-template-columns: 1fr !important; }
  .ms-brand,
  .ms-form-side {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  .ms-brand {
    min-height: 240px;
    padding: calc(28px + var(--mo-mobile-safe-top)) 28px 36px;
  }
  .ms-brand-center {
    padding: 36px 0 18px;
  }
  .ms-brand-text {
    font-size: clamp(28px, 9vw, 38px) !important;
  }
  .ms-form-side {
    padding: 34px 28px calc(40px + var(--mo-mobile-safe-bottom));
  }
  .ms-top-link {
    position: static !important;
    margin: 0 0 28px !important;
    white-space: normal !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }
  .ms-form-wrap h1 { font-size: 34px !important; }
}

@media (max-width: 480px) {
  .ms-brand { padding: 32px 24px; min-height: 220px; }
  .ms-form-side { padding: 32px 22px; }
  .ms-foot { flex-wrap: wrap; gap: 14px; }
  body:not(.ic-Login-Body) #content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body:not(.ic-Login-Body) .ic-DashboardCard__header_hero {
    min-height: 118px !important;
  }
  body:not(.ic-Login-Body) .ic-DashboardCard__action-container {
    min-height: 58px !important;
  }
  body:not(.ic-Login-Body) .ic-DashboardCard__action {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}