/* ---------------------------------------------------------------------------
   account management · responsive layer
   Pages are authored with inline styles so they paint instantly. This sheet
   only overrides LAYOUT at breakpoints, keyed off the serialized inline style
   strings the pages already produce, so no markup has to change.
   Note: React normalizes inline styles ("minmax(0px, 1fr)", spaces after
   colons), so selectors below match that normalized form.
   Order: 1180 laptop -> 900 tablet -> 760 large phone -> 620 phone -> 400 tiny
--------------------------------------------------------------------------- */

html, body { max-width: 100%; }

/* ===========================================================  <= 1180px  */
@media (max-width: 1180px) {
  [style*="max-width: 1280px"] { padding-left: 24px !important; padding-right: 24px !important; }

  /* label rails: 280 -> 200 */
  [style*="grid-template-columns: 280px minmax(0px, 1fr)"] {
    grid-template-columns: 200px minmax(0px, 1fr) !important;
    gap: 30px !important;
  }
  [style*="grid-template-columns: minmax(0px, 1fr) 372px"],
  [style*="grid-template-columns: minmax(0px, 1fr) 356px"],
  [style*="grid-template-columns: minmax(0px, 1fr) 340px"] { gap: 30px !important; }
}

/* ===========================================================  <= 900px   */
@media (max-width: 900px) {
  [style*="max-width: 1280px"] { padding-left: 22px !important; padding-right: 22px !important; }

  /* rails and hero splits stack */
  [style*="grid-template-columns: 280px minmax(0px, 1fr)"],
  [style*="grid-template-columns: 200px minmax(0px, 1fr)"],
  [style*="grid-template-columns: minmax(0px, 1fr) 372px"],
  [style*="grid-template-columns: minmax(0px, 1fr) 356px"],
  [style*="grid-template-columns: minmax(0px, 1fr) 340px"] {
    grid-template-columns: minmax(0px, 1fr) !important;
    gap: 24px !important;
  }

  /* a stacked rail must not stay pinned (the page header, top: 6px, stays) */
  [style*="position: sticky"]:not([style*="top: 6px"]) {
    position: static !important;
    top: auto !important;
  }

  /* rail copy becomes a standfirst instead of a margin note */
  p[style*="max-width: 220px"] { max-width: 62ch !important; }

  /* grading + schedule tables lose their fixed side columns */
  [style*="grid-template-columns: minmax(0px, 1fr) 120px 74px 74px"] {
    grid-template-columns: minmax(0px, 1fr) 84px 64px !important;
  }
  [style*="grid-template-columns: minmax(0px, 1fr) 120px 74px 74px"] > :nth-child(3) { display: none !important; }
}

/* ===========================================================  <= 760px   */
@media (max-width: 760px) {
  /* header nav scrolls sideways instead of wrapping to a second row */
  [style*="position: sticky"][style*="top: 6px"] [style*="flex-wrap: wrap"] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  [style*="position: sticky"][style*="top: 6px"] [style*="flex-wrap: wrap"]::-webkit-scrollbar { display: none; }
  /* nav groups keep their content width; the row scrolls rather than crushing
     them (the compact lockup no longer forces a wrap the way the wide one did) */
  [style*="position: sticky"][style*="top: 6px"] [style*="flex-wrap: wrap"] > * { flex: 0 0 auto !important; }
  [style*="position: sticky"][style*="top: 6px"] a,
  [style*="position: sticky"][style*="top: 6px"] button { white-space: nowrap; }
  [style*="position: sticky"][style*="top: 6px"] a[style*="border-radius: 999px"],
  [style*="position: sticky"][style*="top: 6px"] button[style*="border-radius: 999px"] {
    min-height: 44px; display: inline-flex !important; align-items: center;
  }

  /* logo is a link: give it a real touch height */
  [style*="position: sticky"][style*="top: 6px"] a:has(img[src*="cmdi-lockup"]) {
    min-height: 44px; display: inline-flex !important; align-items: center;
  }

  /* the inline lecture stage is a preview at these widths; make the
     landscape-forcing fullscreen action the primary control */
  button[style*="font-size: 13.5px"][style*="background: rgb(245, 244, 240)"] {
    min-height: 46px !important; font-size: 14.5px !important;
  }

  /* the 7-column assessment map scrolls rather than being crushed */
  [style*="repeat(5, minmax(52px, 0.62fr))"] { min-width: 610px; }
  [style*="border-radius: 16px"][style*="overflow: hidden"]:has([style*="repeat(5, minmax(52px, 0.62fr))"]) {
    overflow-x: auto !important;
  }

  /* time-coded and phase rows tighten, then stack */
  [style*="grid-template-columns: 62px minmax(0px, 1fr)"] {
    grid-template-columns: 52px minmax(0px, 1fr) !important; gap: 12px !important;
  }
  [style*="grid-template-columns: 120px minmax(0px, 1fr)"],
  [style*="grid-template-columns: 96px minmax(0px, 1fr)"] {
    grid-template-columns: minmax(0px, 1fr) !important; gap: 8px !important;
  }
  [style*="grid-template-columns: 64px 108px minmax(0px, 1fr)"] {
    grid-template-columns: 52px minmax(0px, 1fr) !important; gap: 4px 14px !important;
  }
  [style*="grid-template-columns: 64px 108px minmax(0px, 1fr)"] > :nth-child(2) {
    grid-column: 2 !important; font-size: 12px !important;
  }
  [style*="grid-template-columns: 64px 108px minmax(0px, 1fr)"] > :nth-child(3) { grid-column: 2 !important; }

  /* two-up card pairs stack */
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: minmax(0px, 1fr) !important; }
}

/* ===========================================================  <= 620px   */
@media (max-width: 620px) {
  [style*="max-width: 1280px"] { padding-left: 16px !important; padding-right: 16px !important; }

  /* display type: keep the poster feel, stop the overflow */
  h1 { font-size: clamp(40px, 11.6vw, 74px) !important; letter-spacing: -0.045em !important; }
  h1 [style*="-webkit-text-stroke"] { -webkit-text-stroke-width: 1.4px !important; }
  h2 { font-size: clamp(26px, 7.4vw, 38px) !important; }

  /* class index rows: number + title, meta wraps underneath */
  [style*="grid-template-columns: 70px minmax(0px, 1fr) auto"] {
    grid-template-columns: 42px minmax(0px, 1fr) !important; gap: 12px !important;
  }
  [style*="grid-template-columns: 70px minmax(0px, 1fr) auto"] > :last-child {
    grid-column: 2 / -1 !important; text-align: left !important; padding-top: 4px;
  }

  /* vertical rhythm: a phone should not be 90% padding */
  [style*="padding: 76px 32px"] { padding-top: 42px !important; padding-bottom: 46px !important; }
  [style*="padding: 64px 32px"] { padding-top: 38px !important; padding-bottom: 42px !important; }
  [style*="padding: 62px 32px"] { padding-top: 38px !important; padding-bottom: 42px !important; }
  [style*="padding: 52px 32px"] { padding-top: 34px !important; padding-bottom: 34px !important; }

  /* cards give back their generous inner padding */
  [style*="padding: 22px 24px"], [style*="padding: 24px 26px"],
  [style*="padding: 20px 22px"], [style*="padding: 30px 32px"],
  [style*="padding: 38px 40px"] { padding: 18px 16px !important; }

  /* the lecture stage goes as wide as the screen allows */
  [style*="aspect-ratio"][style*="background: rgb(0, 0, 0)"] { margin-left: -16px !important; margin-right: -16px !important; border-radius: 0 !important; }

  [style*="justify-content: space-between"][style*="flex-wrap: wrap"] { row-gap: 16px; }

  /* --- the lecture stage on a phone -------------------------------------
     A 1920px slide shown 390px wide renders its 24px type at ~5px. No
     amount of CSS fixes that, so the inline stage is honestly a preview:
     full-bleed it, and make "view fullscreen" (which forces landscape) the
     primary action rather than a small tertiary control. */
  button[style*="font-size: 13.5px"][style*="background: rgb(245, 244, 240)"] {
    width: 100% !important;
    min-height: 50px !important;
    font-size: 15px !important;
    justify-content: center !important;
    order: -1;
  }

  /* tappable reading / resource pills get readable labels */
  a[style*="font-size: 11.5px"][style*="border-radius: 999px"] {
    font-size: 13px !important;
    padding: 7px 13px !important;
  }

  /* logo is a link: give it a real touch height */
  [style*="position: sticky"][style*="top: 6px"] a:has(img[src*="cmdi-lockup"]) {
    min-height: 44px; display: inline-flex !important; align-items: center;
  }
}

/* ===========================================================  <= 400px   */
@media (max-width: 400px) {
  [style*="max-width: 1280px"] { padding-left: 13px !important; padding-right: 13px !important; }
  img[src*="cmdi-lockup"] { height: 36px !important; }
  [style*="grid-template-columns: 70px minmax(0px, 1fr) auto"] {
    grid-template-columns: 34px minmax(0px, 1fr) !important;
  }
  h1 { font-size: clamp(36px, 12vw, 60px) !important; }
}

/* ==================================================  touch / no hover    */
@media (hover: none) {
  #dfs-cursor, #dfs-crosshair { display: none !important; }
  [style*="cursor: none"] { cursor: pointer !important; }
}

/* ==========================================  short landscape (phone)     */
@media (max-height: 520px) and (orientation: landscape) {
  [style*="min-height: 66vh"], [style*="min-height: 70vh"] { min-height: 0 !important; }
}