/* core.css — scoped under #ui-shell */
body{
   font-size: 14px;
   min-width: 0px;
   text-align: left;
}
#ui-shell.ui {
  --ui-bg: #ffffff;
  --ui-surface: #ffffff;
  --ui-border: #e6e8eb;
  --ui-text: #111827;
  --ui-muted: #6b7280;
  --ui-brand-bold: #002060;
  --ui-brand-thin: #000000;
  --ui-button-primary-bg: #0e8a00;
  --ui-button-secondary-bg: #e5e7eb;
  --ui-button-tertiary-bg: #0F52BA;
  --ui-brand-font-family: "Trebuchet MS";

  --ui-button-primary-hover-bg: #0b6f00;
  --ui-button-secondary-hover-bg: #d1d5db;
  --ui-button-tertiary-hover-bg: #0c3d8f;
  --ui-radius: 12px;
  --ui-gap: 16px;

  --ui-header-h: 56px;
  --ui-bc-h: 44px;

  /* FIX: single source of truth for header + main + footer alignment */
  --ui-max-w: 1240px;
  --ui-pad-x: 16px;

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
  color: var(--ui-text);
  background: var(--ui-bg);
}

/* Flexible fixed max width container used everywhere */
#ui-shell .ui__container {
  width: min(var(--ui-max-w), calc(100% - (var(--ui-pad-x) * 2)));
  margin: 0 auto;
}

/* HEADER: full-width bar, inner content uses ui__container */
#ui-shell .ui__header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-bg);
}
#ui-shell .ui__headerRow {
  height: var(--ui-header-h);
  display: flex;
  align-items: center;
  gap: 12px;
}

#ui-shell .ui__headerNavRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

#ui-shell .ui__userInfo{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  font-size:13px;
}

#ui-shell .ui__userName{
  font-weight:600;
  font-size:14px;
  white-space: nowrap;
}

#ui-shell .ui__userRole{
  color:var(--ui-muted);
  font-weight:400;
  margin-left:4px;
  font-size:13px;
  text-transform: capitalize;
}

.ui__hamburger{
  display:none;
  border:none;
  background:transparent;
  font-size:26px;
  cursor:pointer;
}

.ui__mobileOnly{
  display:none;
}

/* Brand */
#ui-shell .ui__brand {
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 18px;
}
#ui-shell .ui__brandBold { font-weight: 600; color: var(--ui-brand-bold); font-size: 24px; font-family: var(--ui-brand-font-family);}
#ui-shell .ui__brandThin { font-weight: 600; color: var(--ui-brand-thin); }

/* Header actions */
#ui-shell .ui__headerActions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
#ui-shell .ui__link { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; color: var(--ui-text); padding: 8px 10px; border-radius: 10px; }
#ui-shell .ui__link:hover { background: #f6f7f9; }
#ui-shell .ui__link--danger { color: #b91c1c; }
#ui-shell .ui__linkText { display: inline-block; }

/* TOP NAV (multi-level) */
/* #ui-shell .ui__topnav { margin-left: 14px; } */
#ui-shell .ui__topnavList { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; align-items: center; }
#ui-shell .ui__topnavLink,
#ui-shell .ui__topnavBtn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ui-text);
  font: inherit;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
#ui-shell .ui__topnavLink:hover,
#ui-shell .ui__topnavBtn:hover {
  background: #f6f7f9;
  border-color: #eef0f3;
  transform: translateY(-1px);
}

/* Dropdown menu */
#ui-shell .ui__hasSub { position: relative; }
#ui-shell .ui__menu {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px;
  min-width: 220px;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  display: none;
}
#ui-shell .ui__menu--right { left: 100%; top: 0; margin-left: 8px; }

#ui-shell .ui__menuLink,
#ui-shell .ui__menuBtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--ui-text);
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
#ui-shell .ui__menuLink:hover,
#ui-shell .ui__menuBtn:hover {
  background: #f6f7f9;
  border-color: #eef0f3;
}

/* BREADCRUMB: full-width bar, inner content uses ui__container */
#ui-shell .ui__breadcrumb {
  height: var(--ui-bc-h);
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-bg);
  display: flex;
  align-items: center;
}
#ui-shell .ui__crumbs { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; align-items: center; color: var(--ui-muted); font-size: 13px; }
#ui-shell .ui__crumbLink { color: var(--ui-muted); text-decoration: none; }
#ui-shell .ui__crumb--current { color: var(--ui-text); }
#ui-shell .ui__crumbs .ui__crumbLink span{
  color: var(--ui-muted);
}
/* MAIN layout */
#ui-shell .ui__main { padding: 20px 0 36px; }
#ui-shell .ui__layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: var(--ui-gap);
  align-items: start;
}

#ui-shell .ui__layout-split {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:var(--ui-gap);
  align-items:start;
  min-height: calc(100vh - var(--ui-header-h) - var(--ui-bc-h) - 120px);
  margin-top: var(--ui-gap);
}

/* Sidebar */
#ui-shell .ui__sidenav {
  position: sticky;
  top: calc(var(--ui-header-h) + var(--ui-bc-h) + 12px);
  height: calc(100vh - var(--ui-header-h) - var(--ui-bc-h) - 28px);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  overflow: auto;
  transition: width .22s ease;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--ui-header-h) - var(--ui-bc-h) - 28px);
}
#ui-shell .ui__sidenavTop { display: flex; align-items: center; gap: 10px;  border-bottom: 1px solid var(--ui-border); }
#ui-shell .ui__sidenavTitle h1{ font-weight: 600; font-size: 18px; }

#ui-shell .ui__iconBtn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}
#ui-shell .ui__iconBtn:hover { background: #f6f7f9; border-color: #eef0f3; }

#ui-shell .ui__sidenavNav { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
#ui-shell .ui__sidelink {
  display: flex; align-items: center; gap: 12px;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ui-text);
  border: 1px solid transparent;
}
#ui-shell .ui__sidelink:hover { background: #f6f7f9; border-color: #eef0f3; }
#ui-shell .ui__sidelink--active { background: #f3f4f6; border-color: #e5e7eb; }
#ui-shell .ui__sidelink i { font-size: 18px; width: 20px; text-align: center; }
#ui-shell .ui__sidelinkText { display: inline-block; }

#ui-shell .ui__sidegroup {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  color: var(--ui-text);
}
#ui-shell .ui__sidegroup:hover { background: #f6f7f9; border-color: #eef0f3; }
#ui-shell .ui__chev { margin-left: auto; transition: transform .18s ease; }
#ui-shell .ui__sidegroupPanel { padding: 6px 0 6px 34px; display: flex; flex-direction: column; gap: 6px; }

/* Content */
#ui-shell .ui__content { min-width: 0; }
#ui-shell .ui__card { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: 16px; background: var(--ui-surface); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
#ui-shell .ui__cardTitle { font-weight: 700; margin-bottom: 8px; }
#ui-shell .ui__muted { color: var(--ui-muted); font-size: 14px; }
#ui-shell .ui__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
#ui-shell .ui__panel { padding: 12px; background: #fbfbfc; border: 1px solid var(--ui-border); border-radius: 10px; }
#ui-shell .ui__panelTitle { font-weight: 600; margin-bottom: 6px; }

#ui-shell .ui__btn { display: inline-flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #111827; color: #fff; border: 0; cursor: pointer; }
#ui-shell .ui__btn--ghost {
  background: #fff;
  color: #111827;
  border: 1px solid var(--ui-border);
}

/* Footer */
#ui-shell .ui__footer { border-top: 1px solid var(--ui-border); padding: 14px 0; background: var(--ui-bg); margin-top: 18px; }
#ui-shell .ui__footerRow { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }

/* Focus */
#ui-shell a, #ui-shell button, #ui-shell input[type="submit"], #ui-shell input[type="button"] { outline: none; }
#ui-shell a:focus-visible, #ui-shell button:focus-visible, #ui-shell input[type="submit"]:focus-visible, #ui-shell input[type="button"]:focus-visible { outline: 3px solid #1a56db; outline-offset: 3px; border-radius: 6px; box-shadow: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { #ui-shell * { transition: none !important; } }

/* Collapsed sidebar */
#ui-shell .ui__sidenav[data-collapsed="true"] { width: 72px; min-width: 72px; max-width: 72px; overflow: visible; }
/* Hide sidebar content when collapsed */
#ui-shell .ui__sidenav[data-collapsed="true"] #uiSidenav {
    display: none;
}
#ui-shell .ui__sidenav[data-collapsed="true"] .ui__sidelinkText,
#ui-shell .ui__sidenav[data-collapsed="true"] .ui__sidenavTitle,
#ui-shell .ui__sidenav[data-collapsed="true"] .ui__sidegroupPanel,
#ui-shell .ui__sidenav[data-collapsed="true"] .ui__chev { display: none; }
#ui-shell .ui__sidenav[data-collapsed="true"] .ui__sidelink { justify-content: center; padding: 12px; }
#ui-shell .ui__layout.sidebar-collapsed { grid-template-columns: 72px 1fr; }

/* Responsive */
@media (max-width: 768px) {
  #ui-shell .ui__layout { grid-template-columns: 1fr; }
  #ui-shell .ui__grid2 { grid-template-columns: 1fr; }
  #ui-shell .ui__sidenav { position: relative; top: 0; min-height: 500px; }
   .ui__hamburger{
    display:block;
  }

  #ui-shell .ui__topnav{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#fff;
    border-top:1px solid var(--ui-border);
    display:none;
  }

  #ui-shell .ui__topnavList{
    flex-direction:column;
    padding:10px;
  }

  #ui-shell .ui__topnav.show{
    display:block;
  }

  #ui-shell .ui__topnavList{
    align-items: flex-start;
  }

  .ui__mobileOnly{
    display:block;
  }

  #ui-shell .ui__headerActions{
    display:none;
  }

  #ui-shell .ui__menu{
    position:static;
    width:100%;
    box-shadow:none;
    border:none;
    margin-left:15px;
  }

  #ui-shell .ui__layout-split{
    grid-template-columns:1fr;
  }

  #ui-shell .course-viewer .ui__breadcrumb{
    display: none;
  }
   
  .ui-question-row{
        flex-direction:column;
  }

  .ui-question-number{
    width:auto;
  }

  #ui-shell .viewer-toolbar .ui__prev_text, #ui-shell .viewer-toolbar .ui__next_text{
    display: none;
  }

  
  /* Course Viewer only */
  #ui-shell.course-viewer .ieviewer .ui__headerRow--merged {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 3px;
  }
 
  #ui-shell.course-viewer .ieviewer .ui__topnavList {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  #ui-shell .viewer-toolbar .prev-btn, #ui-shell .viewer-toolbar .next-btn{
    padding: 5px 8px !important;
  }
}

/* Screen reader only */
#ui-shell .ui__srOnly {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

#ui-shell .content-box .box-header	{ background: none;}
#ui-shell .content-box .box-body		{ background: none;border:none;}
#ui-shell .content-box { border: none;}
#ui-shell .pagesize		{ width: auto; }
#ui-shell table.style1		{ border: none; }
#ui-shell table.style1	th	{ background: #eee; border-bottom: #ddd;}
#ui-shell table.style1	table th	{ color:black; background: none; border-top:1px solid #ddd; border-bottom:1px solid #ddd;padding:5px;}
#ui-shell table.style1	h2 { font-weight: bold;}
#ui-shell table.style1	table h3 { font-weight: 600;line-height: 1.25em;}
#ui-shell table.style1	table td { border-bottom:1px solid #ddd;}
#ui-shell .box-header h1 { line-height: 24px;    margin-bottom: 5px;    padding: 0px;}
#ui-shell .content-box .box-wrap    { padding: 0px; }
#ui-shell .content-box .box-header .tabs li{ font-size: 14px;}
#ui-shell .content-box .box-wrap .style1 small{ font-size: 14px;}
#ui-shell .ui__container .main-wrap .page{
  padding-bottom: 0px;
}
#ui-shell .ui__container .main-wrap .button.green{
  background-color: var(--ui-button-primary-bg);
}

#ui-shell label{
  display:block;
  text-align:left;
  font-size:14px;
  font-weight:600;
  margin-bottom:6px;
}

#ui-shell form input[type="text"],input[type="password"]{
  width:100%;
  height:44px;
  padding:0 12px;
  border:1px solid #6b7785;   /* A11Y SC 1.4.11 -- i2L, 9 Sep 2026: was #d9e0e6, 1.33:1 on white against a 3:1 minimum */
  border-radius:8px;
  font-size:14px;
  box-sizing:border-box;
}

#ui-shell .help-box { background: #e6f3ff; padding: 1rem; border-radius: 8px; }

#ui-shell .help-box ul {
  list-style: disc;
  padding-left: 20px;
  margin-top: 8px;
}
#ui-shell .help-box li{
  margin-bottom: 6px;
}

/* Form wrapper */
#ui-shell .ui__form {
  max-width: 720px;
}

/* Form row spacing */
#ui-shell .ui__formRow {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}
/* Horizontal form row (label + input in one line) */
#ui-shell .ui__formRow--inline {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

#ui-shell .adjust-width {
  grid-template-columns: 1fr 180px;
}

#ui-shell .ui__formRow--60 {
  grid-template-columns: 60px 1fr;
}

#ui-shell .ui__formRow--30 {
  grid-template-columns: 30px 1fr;
}

#ui-shell .ui__formRow--radio {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

/* Responsive: stack on small screens */
@media (max-width: 700px) {
  #ui-shell .ui__formRow--inline {
    grid-template-columns: 1fr;
  }
}
/* Input / select / textarea shared styling */
#ui-shell .ui__input,
#ui-shell select.ui__input,
#ui-shell textarea.ui__input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #6b7785;  /* A11Y SC 1.4.11 -- i2L, 9 Sep 2026: was #d9e0e6, 1.33:1 on white against a 3:1 minimum */
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  background: #fff;
}

#ui-shell select.ui__input--75 {
  width: 75%;
}

#ui-shell .ui__hint-left {
  display: block;
  text-align: left;
}

/* Focus state (important for WCAG keyboard users) */
#ui-shell .ui__input:focus,
#ui-shell select.ui__input:focus,
#ui-shell textarea.ui__input:focus {
  outline: none;
  border-color: var(--ui-brand-bold);
  box-shadow: 0 0 0 2px rgba(0,32,96,0.15);
}

/* Buttons area */
#ui-shell .ui__formActions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

#ui-shell .ui__actionItem{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#ui-shell .ui__actionItem p{
  margin: 0 0 6px;
  font-size: 14px;
}

/* Secondary button */
#ui-shell .ui__btn--secondary {
  background: var(--ui-button-secondary-bg);
  color: var(--ui-text);
}

/* Form message / errors */
#ui-shell .ui__alert {
  padding: 12px 14px;
  border-radius: 8px;
  background: #fde8e8;
  border: 1px solid #f5c2c2;
  color: #b91c1c;
  margin-bottom: 16px;
  font-size: 14px;
}

/* Page header layout */
#ui-shell .ui__pageHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  gap:12px;
}

/* Page actions */
#ui-shell .ui__pageActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Primary button (green) */
#ui-shell .ui__btn--primary{
  background: var(--ui-button-primary-bg);
  color:#fff;
}

/* Tertiary button (blue) */
#ui-shell .ui__btn--tertiary {
  background: var(--ui-button-tertiary-bg);
  color: #fff;
}
#ui-shell .ui__btn--tertiary:hover {
  background: var(--ui-button-tertiary-hover-bg);
  text-decoration: none;
}


/* Hover */
#ui-shell .ui__btn--secondary:hover,
#ui-shell .ui__btn--secondary:focus-visible{
  background:var(--ui-button-secondary-hover-bg);
  text-decoration: none;
}


#ui-shell .help-box-left{
  text-align: left;
}

#ui-shell .ui__muted-left{
  text-align: left;
}

#ui-shell .required {
  color:#b00020;
  font-weight:bold;
}

#ui-shell p,h2,h1{ font-family: inherit;}

/* i2L, 9 Sep 2026.  The required-fields instruction, shared by the User Profile and Change
   Info pages.  Was 600 (semi-bold); C. Bien asked for it not bold.  Margin is stated here
   rather than left to the browser because the two pages load different stylesheet stacks --
   the profile page loads reset.css, which zeroes paragraph margins, and Change Info does not,
   so the same class rendered with different spacing on each. */
#ui-shell .form-instruction { font-size: 14px; font-weight: 400; margin: 0 0 14px; }

#ui-shell .alert{font-size: 14px;font-weight: bold;color: #b00020;}

#ui-shell .ui__muted b{
  color: var(--ui-text);
}

#ui-shell .ui__buttonRow {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

#ui-shell .ui__fieldGroup {
  align-items: center;
}

#ui-shell .ui__input--70 {
  width: 70%;
}

#ui-shell .ui__pageTitle{
    font-size: 30px;
    font-weight: normal;
    margin-bottom: 10px;
    margin-top: 0px;
}

/* i2L, 9 Sep 2026. Page headings rendered inconsistently across the new shell: pages that load
   screen.css picked up its h1 rule (30px / normal / #333); pages that do not -- change_password.cfm
   loads 3 stylesheets where profile_view.cfm loads 13 -- fell back to the browser default h1,
   2em bold. Same markup, different result. This states the house heading style in core.css, which
   every page in the shell loads, so the two match. Values are screen.css line 188 unchanged. */
#ui-shell .ui__pageHeader h1{
    font-size: 30px;
    font-weight: normal;
    color: #333333;
}

#ui-shell .ui__contentNarrow {
  max-width: 720px;
}

#ui-shell .ui__alert--warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
}

#ui-shell .ui__alert--info {
  background: #e6f3ff;
  border: 1px solid #b6e0fe;
  color: #0c4a6e;
}

#ui-shell .no-border{
  border:none;
}

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

/* ===================================
LOGIN PAGE
=================================== */

#ui-shell .login-page {
min-height:94vh;
display:flex;
align-items:center;
justify-content:center;
background:#f7f8f9;
padding:20px;
}

#ui-shell .login-wrapper {
width:100%;
max-width:380px;
text-align:center;
}

#ui-shell .login-logo {
font-size:24px;
margin-bottom:20px;
display:inline-block;
}

#ui-shell .login-card {
background:#fff;
border:1px solid var(--ui-border);
border-radius:14px;
padding:28px;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
}

#ui-shell .login-title {
margin:0 0 20px;
font-size:26px;
font-weight:700;
}

#ui-shell .login-label {
display:block;
text-align:left;
font-size:14px;
font-weight:600;
margin-bottom:6px;
margin-top:12px;
}

/* A11Y WCAG 2.1 -- i2L, 1 Sep 2026. SC 1.4.11 Non-text Contrast: the field boundary was
   #d9e0e6 on white, about 1.3:1 against a 3:1 requirement. #6b7785 measures ~4.7:1. */
#ui-shell .login-input {
width:100%;
height:44px;
padding:0 12px;
border:1px solid #6b7785;
border-radius:8px;
font-size:14px;
box-sizing:border-box;
}

/* A11Y WCAG 2.1 -- i2L, 1 Sep 2026. SC 1.4.1 / 2.4.7: focus was signalled by hue alone.
   Links and buttons already get a 3px focus-visible outline; text inputs were missed. */
#ui-shell .login-input:focus {
border-color:#14a800;
outline:none;
}
#ui-shell .login-input:focus-visible { outline:3px solid #1a56db; outline-offset:2px; }

#ui-shell .login-button {
width:100%;
margin-top:18px;
height:44px;
background:var(--ui-button-primary-bg);
border:none;
border-radius:999px;
color:#fff;
font-weight:600;
cursor:pointer;
transition:all .2s ease;
}

#ui-shell .login-button:hover {
opacity:.95;
transform:translateY(-1px);
}

#ui-shell .login-links {
margin-top:18px;
font-size:14px;
color:var(--ui-muted);
}

#ui-shell .login-links p {
margin-bottom:12px;
}

#ui-shell .login-secondary {
margin-top:6px;
color:#0f172a;
text-decoration:none;
font-weight:500;
}

#ui-shell .login-secondary:hover {
text-decoration:underline;
}

#ui-shell .login-wrapper .notification{
  margin-top: 10px;
}

#ui-shell .login-human-check {
    margin-top:14px;
    text-align:left;
}

#ui-shell .password-field{
    position:relative;
}

#ui-shell .password-field .login-input{
    padding-right:40px; /* space for icon */
}

#ui-shell .show-password-eye{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:#666;
    font-size:16px;
}

#ui-shell .signup-wrapper {
    max-width: 720px;
    text-align: center;
}

#ui-shell .login-subtitle {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
}

/* main question container */
#ui-shell .ui-question{
    padding:10px;
    margin-bottom: 20px;
    border: 1px solid var(--ui-border);
}

/* row layout */
#ui-shell .ui-question-row{
    display:flex;
    align-items:flex-start;
    gap:15px;
}

/* number column */
#ui-shell .ui-question-number{
    flex-shrink:0;
}

/* question content */
#ui-shell .ui-question-content{
    flex:1;
    min-width:0;
}

/* question text */
#ui-shell .ui-question-text{
    font-size:1.5em;
    display:block;
}

/* question type */
#ui-shell .ui-question-type{
    display:block;
    margin-bottom:6px;
}

/* options container */
#ui-shell .ui-options{
    margin-top:6px;
}

/* option layout */
#ui-shell .ui-option{
    margin-bottom:6px;
}

/* option label layout */
#ui-shell .ui-option label{
    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
}

#ui-shell .counter{
    background-color: #333;
    width: 30px;
    height: 30px;
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 30px;
}

#ui-shell .quiz-layout{
    display:flex;
    flex-direction:column;
    height:100%;
}

#ui-shell .scroll-bar{
    height:500px;
    margin-top:30px;
    overflow-y:auto;
    padding-right:10px;
}

#ui-shell .quiz-footer{
    margin-top:20px;
}

#ui-shell .quiz-footer-inner{
    text-align: center;
}

#ui-shell .quiz-instruction{
    margin:0;
}

#ui-shell .ans-col{
  border: 1px solid var(--ui-border);
  padding: 10px;
  margin-top: 10px;
}

#ui-shell strong p {
  line-height: 22px;
}

#ui-shell .ans-col p{
  font-size: 18px;
}

@media (max-width: 700px){

  /* Hide header visually but keep for screen readers */
  
  /* Each row becomes a card */
  #ui-shell .box-wrap .style1 tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
  }

  #ui-shell .box-wrap .style1 thead tr {
    border: none;
  }
  /* Add labels (WCAG friendly) */
  #ui-shell .box-wrap .style1 td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    margin-bottom: 2px;
    color: #555;
  }

  /* Buttons fix */
  #ui-shell .links.left {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; 
  }

  #ui-shell table.style1 table td {
    border-bottom: none;
}

#ui-shell tr.box-slide-head.bd-top td {
    border-top: none;
}

#ui-shell  .actions-links{
 float:none;
}
}
@media (max-width: 700px) {

  /* Top-level rows become mobile cards */
  #ui-shell .new-class > .box-body > .box-wrap > .style1 > tbody > tr.box-slide-head {
    display: block;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
  }

 
  #ui-shell .new-class > .box-body > .box-wrap > .style1 > tbody > tr.box-slide-head > td.full h2,
  #ui-shell .new-class > .box-body > .box-wrap > .style1 > tbody > tr.box-slide-head > td.full p.description {
    margin: 0;
  }

  /* Second line: only the direct td children of top-level tr */
  #ui-shell .new-class > .box-body > .box-wrap > .style1 > tbody > tr.box-slide-head > td:not(.full) {
    display: inline-block;
    width: 45%;
  }

  /* Buttons layout */
  #ui-shell .new-class > .box-body > .box-wrap > .style1 > tbody > tr.box-slide-head > td .links.left {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Optional line break between first and second line */
  #ui-shell .new-class > .box-body > .box-wrap > .style1 > tbody > tr.box-slide-head > td.full::after {
    content: "";
    display: block;
    margin-bottom: 8px;
  }

  /* EXPLICITLY reset nested tables so they stay normal */
  #ui-shell .new-class .box-wrap .style1 td table,
  #ui-shell .new-class .box-wrap .style1 td table tr,
  #ui-shell .new-class .box-wrap .style1 td table td {
    display: table;
    width: auto;
    border: none;
    margin: 0;
    padding: 0;
    background: none;
  }

  #ui-shell img[src*="spacer.gif"] {
  display: none;
}
}

#ui-shell .viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 5px 7px 5px;
}
 
.viewer-toolbar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: auto;
}
 
.viewer-toolbar__titleWrap {
  min-width: 0;
}
 
 
.viewer-toolbar__title h1{
  font-size: 18px;
  font-weight: 700;
  color: var(--ui-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.viewer-toolbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
 
.viewer-jump {
  display: flex;
  align-items: center;
  gap: 8px;
}
 
.viewer-jump__select {
  min-width: 260px;
  max-width: 360px;
  height: 31px;
  padding: 0 12px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: #fff;
  color: var(--ui-text);
}

@media (max-width: 900px) {
    #ui-shell .viewer-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0px;
    }

    #ui-shell .viewer-toolbar__left,
    #ui-shell .viewer-toolbar__right {
        width: 100%;
    }

    #ui-shell .viewer-jump {
        width: 100%;
    }

    #ui-shell .viewer-jump__select {
        width: 100%;
        min-width: 0;
    }

    #ui-shell .viewer-toolbar__right .ui__btn {
        flex: 1;
        justify-content: center;
    }

    
    /* Course Viewer only */
    #ui-shell.course-viewer .ui__layout {
        grid-template-columns: 1fr;
    }

    #ui-shell.course-viewer .ui__breadcrumb {
        display: none;
    }

    /* Single-column: disable sticky so sidenav does not overlap media frame */
    #ui-shell.course-viewer .ui__sidenav {
        position: relative;
        top: 0;
        max-height: none;
        min-height: 0;
    }

    /* Remove constrained scroll box — let text flow naturally, user scrolls the page */
    #ui-shell.course-viewer #uiSidenav {
        max-height: none;
        overflow: visible;
    }

    /* Media frame: no fixed min-height on mobile */
    #ui-shell.course-viewer .ui__content {
        min-height: 0;
    }
}

/* ================================================
   COURSE VIEWER - Reduced Width Only
   (Does NOT affect other pages)
   ================================================ */

#ui-shell.course-viewer {
    --ui-max-w: 1460px;        /* Reduced from 1240px */ 
}

#ui-shell.course-viewer .ui__main {
  padding: 5px 0 10px;
}


#ui-shell .ui__btn--primary:hover,
#ui-shell .ui__btn--primary:focus-visible {
    background-color: var(--ui-button-primary-hover-bg);
}

/* Resources - Secondary style */
#ui-shell .ui__pageActions .ui__btn--secondary {
    /* A11Y SC 1.4.11 -- i2L, 9 Sep 2026: was #d1d5db, 1.47:1 against the page. #6b7785 gives
       4.56:1 against white and 3.69:1 against the button's own #e5e7eb fill. Fill unchanged. */
    border: 1px solid #6b7785;
}

#ui-shell .no-height{
  height:auto;
}

#ui-shell #uiSidenav {
  height: auto;
  max-height: calc(100vh - var(--ui-header-h) - 60px);
  overflow: auto;
}
/* Course viewer: compact header is shorter than standard two-row header.
   Override sticky top only on desktop (≥901px) so it does not fight the
   responsive top:0 override inside @media (max-width:900px). */
@media (min-width: 901px) {
  #ui-shell.course-viewer .ui__sidenav {
    top: calc(var(--ui-cv-header-h, 64px) + 4px);
  }
  #ui-shell.course-viewer #uiSidenav {
    max-height: calc(100vh - var(--ui-cv-header-h, 64px) - 20px);
  }

   #ui-shell.course-viewer .ui__content {
    height: auto;
    min-height: 500px;
  }
}


#ui-shell.course-viewer .content-box { border: none;}

/* ===== Direct Scaling — images, video, interactive exercises ===== */
#ui-shell.course-viewer .media-frame img {
  max-width: 100%; width: auto;
  max-height: 85vh;
  height: auto;
  display: block;
  float: none;
  margin: 5px auto;
}
#ui-shell.course-viewer .media-frame video,
#ui-shell.course-viewer .media-frame audio {
  width: 100%; max-width: 100%; height: auto;
}
/* 16:9 aspect ratio for embedded video iframes (YouTube, Vimeo) */
#ui-shell.course-viewer .media-video-wrap { width: 100%; aspect-ratio: 16 / 9; }
#ui-shell.course-viewer .media-video-wrap iframe { width: 100%; height: 100%; border: none; }
/* PDF viewer — fill viewport height instead of aspect-ratio (prevents tall overflow) */
#ui-shell.course-viewer .media-pdf-wrap {
  width: 100%;
  height: calc(100vh - var(--ui-cv-header-h, 70px) - 30px);
  min-height: 400px;
}
#ui-shell.course-viewer .media-pdf-wrap iframe { width: 100%; height: 100%; border: none; }
/* HTML/HTM content iframes */
#ui-shell.course-viewer .media-frame iframe { width: 100%; min-height: 400px; border: none; }
/* SWF / interactive exercises — fallback for older browsers */
#ui-shell.course-viewer .media-frame object,
#ui-shell.course-viewer .media-frame embed { max-width: 100%; }
/* Game / interactive exercise wrapper — absorbs stray </div> from game files.
   position:relative makes this the containing block for all position:absolute
   overlays (input fields, popups) so they scroll with the canvas instead of
   being clipped by the overflow container.
   The `height` (not just `max-height`) is critical: without it, the wrapper
   shrinks to fit the canvas's current display size, and the JS measurement
   loop reads a small height, so the canvas never grows on resize-up.
   `height` forces the wrapper to fill the available viewport-relative space
   so the canvas can scale up at wider viewports. */
#ui-shell.course-viewer .game-frame {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--ui-cv-header-h, 70px) - 20px);
  max-height: calc(100vh - var(--ui-cv-header-h, 70px) - 20px);
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* contain: layout prevents the canvas from forcing the grid column wider
     than its track (1fr) — this is the root cause of the original overflow
     bug. Without it, grid items default to min-width:auto and refuse to
     shrink below the canvas's intrinsic min-width. */
  contain: layout;
  box-sizing: border-box;
  padding: 12px;
}

/* Mobile: drop the viewport-relative height so the wrapper shrinks to fit
   the (scaled-down) canvas instead of leaving blank space below it. The
   canvas is letterboxed horizontally via flex (justify-content:center). */
@media (max-width: 767px) {
  #ui-shell.course-viewer .game-frame {
    height: auto;
    max-height: none;
    min-height: 0;
  }
}

/* #ui-shell.course-viewer .ui__content iframe{ margin: 10px;} */

#ui-shell  h2{
  font-weight: bold;
}

/* IE Viewer header: single row */
#ui-shell.course-viewer .ieviewer .ui__headerRow--merged {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 6px; /* smaller vertical gap */
}
#ui-shell.course-viewer .ieviewer .ui__headerRow--merged .ui__userInfo {
    flex-direction: row;
}
#ui-shell.course-viewer .ui__breadcrumb {
    height: 24px;
}
/* Horizontal nav menu */
#ui-shell.course-viewer .ieviewer .ui__topnavList {
    display: flex;
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Keep dropdown menus working */
#ui-shell.course-viewer .ieviewer .ui__menu {
    position: absolute;
}
/* Tablet / mid-width adjustments */
@media screen and (max-width: 1100px) {
    #ui-shell.course-viewer .ieviewer .ui__headerRow--merged {
        align-items: flex-start;
        column-gap: 16px;
        row-gap: 0px;
    }
 
    #ui-shell.course-viewer .ieviewer .ui__topnavList {
        gap: 10px;
    }
 
    #ui-shell.course-viewer .ieviewer .ui__brandBold,
    #ui-shell.course-viewer .ieviewer .ui__brandTitle {
        line-height: 1.1;
    }
 
    #ui-shell.course-viewer .ieviewer .ui__userInfo,
    #ui-shell.course-viewer .ieviewer .ui__topnav,
    #ui-shell.course-viewer .ieviewer .ui__brand {
        margin-top: 0;
        margin-bottom: 0;
    }
}


.pad-5{
  padding:5px;
}

/* IEVIEWER HEADER - All in one left-aligned row, no wrapping */
#ui-shell.course-viewer .ui__headerCompactRow {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: nowrap;
    overflow: hidden;
}

#ui-shell.course-viewer .ui__brand {
    flex-shrink: 0;
    font-size: 19px;
}

#ui-shell.course-viewer .viewer-toolbar-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

#ui-shell.course-viewer .ui__pageActions {
    flex-shrink: 0;
}

/* Prevent wrapping */
#ui-shell.course-viewer .ui__headerCompactRow > * {
    flex-shrink: 0;
}

/* Responsive fallback */
@media (max-width: 1100px) {
    #ui-shell.course-viewer .ui__headerCompactRow {
        gap: 10px;
    }
}

@media (max-width: 900px) {
    #ui-shell.course-viewer .ui__headerCompactRow {
        flex-wrap: wrap;
        height: auto;
        padding: 10px 12px;
    }
    #ui-shell .ui__pageActions .ui__btn--secondary{
      margin-top: 10px;
      
    }

    #ui-shell .viewer-toolbar{
      padding: 0px;
    }
    
}

#ui-shell.course-viewer .ui__header--ieviewer{
  padding: 3px;
}

/* RESOURCES */

#ui-shell .ui__resourceHeaderActions { margin-left: auto; display: flex; gap: 10px; align-items: center; }

#ui-shell .ui__main_resources { padding: 0px; }

#ui-shell .ui__main_resources h1{
  font-size: 18px;
}
/* List wrapper */
#ui-shell .resource-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Card */
#ui-shell .resource-card {
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 7px 12px;
    transition: box-shadow 0.2s ease;
}

#ui-shell .resource-card:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Resource button (replaces link) */
#ui-shell .resource-link {
    background: none;
    border: none;
    color: #0056b3;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    padding: 0;
}

#ui-shell .resource-link:hover {
    text-decoration: underline;
}

/* Focus state (WCAG important) */
#ui-shell .resource-link:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}


@media (max-width: 502px) {
  #ui-shell .viewer-jump__select {
    width: 50% !important;
  }
}


#ui-shell.course-viewer .intro-number {
  float: none;
  position: static;
  top: auto;
  left: auto;
  display: inline;
  padding-right: 6px;
  color: #0F52BA;
  opacity: 1;
  filter: none;
  -webkit-opacity: 1;
}

#ui-shell.course-viewer #tab1,
#ui-shell.course-viewer #tab2,
#ui-shell.course-viewer #tab3 {
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: 0 var(--ui-radius) var(--ui-radius) var(--ui-radius);
  background: var(--ui-surface);
}


/* Title */
#ui-shell.course-viewer .page-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #111827;
}

/* Responsive WCAG tabs — course viewer */
/* Reset legacy box-header: was position:relative with absolutely-positioned tabs overlaid on h2 */
#ui-shell.course-viewer .box-header {
    position: static;
    min-height: 0;
    background: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ui-border);
    margin-bottom: 12px;
}
/* Reset legacy h2 background rule.gif and heavy padding from screen.css */
#ui-shell.course-viewer .box-header h2 {
    background: none;
    padding: 0;
    margin: 0;
    font-size: 18px;
    order: -1;
}
#ui-shell.course-viewer .box-header .tabs {
    position: static;  /* override position:absolute from screen.css */
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    top: auto;
    right: auto;
}
#ui-shell.course-viewer .box-header .tabs li {
    float: none;
    margin: 0;
    font-size: 16px;
    line-height: 1;
}
#ui-shell.course-viewer .box-header .tabs li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e5e7eb;
    background-image: none;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 6px 12px;
    text-decoration: none;
    font-weight: 600;
}
#ui-shell.course-viewer .box-header .tabs li a:hover {
    background: #d1d5db;
    color: #111827;
    text-decoration: none;
}
#ui-shell.course-viewer .box-header .tabs li a.selected {
    background: #0F52BA;
    background-image: none;
    color: #fff;
    border-color: #0F52BA;
}

#ui-shell .ui__container .main-wrap .button.blue{
  background-color: #0F52BA;
}

#ui-shell.course-viewer .ui__container .main-wrap h3{
  font-size: 16px;
}

#ui-shell.course-viewer #controlbtn.open {background-color: var(--ui-muted);color: #fff;}
#ui-shell.course-viewer #controlbtn.close {background-color: var(--ui-button-tertiary-bg);}
#ui-shell.course-viewer #controlbtn.open:focus-visible {
    outline: 3px solid #1a56db;
}
#ui-shell.course-viewer #controlbtn.close:focus-visible {
    outline: 3px solid #1a56db;
}

#ui-shell.course-viewer .ui__content .main-wrap{
  padding-top: 0px;
}

/* ===== Course Viewer — Unified Button Style Guide =====
   Single rule that normalises size + shape across ALL buttons.
   Per-button rules above only set colour; padding/radius come from here. */
#ui-shell.course-viewer .ui__btn {
    padding: 5px 10px;
    font-weight: 600;
    line-height: 1.4;
    box-sizing: border-box;
}

/* Sidebar speech play/stop — styled as icon buttons */
#ui-shell.course-viewer #speechplay,
#ui-shell.course-viewer #speechstop {
    font-size: 20px;
    padding: 4px;
}

#ui-shell.course-viewer #speechplay:hover,
#ui-shell.course-viewer #speechstop:hover {
    background: #f3f4f6;
    text-decoration: none;
}

/* Sidebar text resize buttons */
#ui-shell.course-viewer #sizecontroldiv {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    float: none;
    width: auto;
    margin-left: 5px;
}

#ui-shell.course-viewer #sizecontroldiv button {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    cursor: pointer;
     font-weight: 600;
}

#ui-shell .ui__btn--tertiary {
  background: var(--ui-button-tertiary-bg);
}

#ui-shell .ui__btn--tertiary:hover,
#ui-shell .ui__btn--tertiary:focus-visible {
  background: var(--ui-button-tertiary-hover-bg);
}

#ui-shell.course-viewer .speech-controls{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* Restore list bullets/numbering inside page content area */
#ui-shell.course-viewer #pagecontent li ul,
#ui-shell.course-viewer #pagecontent li ol { margin: 0 1.5em; }
#ui-shell.course-viewer #pagecontent ul,
#ui-shell.course-viewer #pagecontent ol { margin: 0 1.5em 1.5em 1.5em; }
#ui-shell.course-viewer #pagecontent ul { list-style-type: disc; }
#ui-shell.course-viewer #pagecontent ol { list-style-type: decimal; }


/* ===== Course viewer: text column width. i2L 31 August 2026. CHG-2026-139.

   30% of the viewport, with NO floor. C. Bien, 31 August 2026.

   ⚠ HISTORY, so nobody re-litigates it: this was first written as
   minmax(325px, 26%) to stop the column growing as a share of the screen when
   the browser is zoomed. It did not work. Above 100% zoom the 325px FLOOR took
   over and the percentage never applied, so it behaved exactly like a fixed
   column - 32% of the screen at 125%, 38% at 150% - just 75px narrower than the
   original 400px. A floor and proportional behaviour are mutually exclusive:
   any floor becomes a fixed column the moment zoom pushes the percentage below
   it. A pure percentage (30%, no floor) was offered and declined because the
   column becomes visibly thin at high zoom.

   A PURE percentage is the only thing that holds the proportion, because any
   floor becomes a fixed column the moment zoom pushes the percentage below it.
   minmax(0, 30%) rather than a bare 30% so grid min-content sizing cannot
   inflate it. The breakpoint is 769px, not 901px, so there is no band where the
   shared 400px rule takes back over before the layout stacks at 768px.

   Measured: 384px at 100% zoom on a 1280px viewport, 307px at 125%, 256px at
   150% - and 30% of the screen at every one of them. Wider than a 350px fixed
   column at normal zoom, narrower at high zoom. That is the trade.

   ⚠ SCOPED to .course-viewer. This ADDS a selector; it does not alter the shared
   .ui__layout rule, so no other page on the shell is affected. ===== */
@media (min-width: 769px) {
  #ui-shell.course-viewer .ui__layout { grid-template-columns: minmax(0, 30%) 1fr; }
}

/* A11Y WCAG 2.1 -- i2L, 1 Sep 2026. The password reveal is now a <button> instead of an <i>.
   Strip the default button chrome so the control looks exactly as it did before. */
#ui-shell button.show-password-eye { background:none; border:0; padding:0; margin:0; cursor:pointer; color:inherit; line-height:1; }
#ui-shell button.show-password-eye:focus-visible { outline:3px solid #1a56db; outline-offset:2px; }

/* BUG-2026-144, i2L 1 September 2026. WCAG 2.1 A, 2.4.1 Bypass Blocks.
   The skip link is present for every keyboard and screen-reader user but only
   becomes visible when it takes focus, so sighted mouse users never see it.
   It is NOT display:none and NOT visibility:hidden - either would remove it
   from the tab order and defeat the purpose. The focus treatment matches the
   one already used throughout this stylesheet. */
#ui-shell .ui__skipLink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 10px 16px;
  background: #ffffff;
  color: #1a56db;
  font-weight: 600;
  text-decoration: underline;
  border-radius: 0 0 6px 0;
}
#ui-shell .ui__skipLink:focus {
  left: 0;
  outline: 3px solid #1a56db;
  outline-offset: 3px;
}
#ui-shell .ui__main:focus {
  outline: none;   /* the target is focused programmatically, not by tabbing */
}


/* =====================================================================
   BUG-2026-151, i2L, 2 September 2026.  Success and failure messages.

   C. Bien: success text was shown in the red error style across the
   system - Class Manager create/update among them - and customers were
   reading a success as a failure.

   WCAG 2.1 figures, all measured against the backgrounds used here:
     success text  #1B5E20 on #E7F6EC  = 7.0:1   (AA needs 4.5:1)
     error text    #C62828 on #FDECEA  = 4.9:1   (AA needs 4.5:1)
     success border #4D9E6F on white   = 3.3:1   (SC 1.4.11 needs 3:1)
     warning triangle outline #7A5B00  = 6.3:1   (the yellow fill alone
       is 1.6:1, so the outline is what carries the shape)

   SC 1.4.1 Use of Color: every message also carries the word "Success"
   or "Error" and a different icon SHAPE - a circle-check against a
   triangle - so the meaning does not depend on seeing the colour.
   ===================================================================== */

.i2lmsg {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 11px 14px;
	margin: 0 0 16px 0;
	border: 1px solid;
	border-radius: 6px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 1.45;
}

.i2lmsg__icon {
	flex: 0 0 auto;
	margin-top: 1px;
}

.i2lmsg__label {
	flex: 0 0 auto;
	font-weight: bold;
}

.i2lmsg__label::after {
	content: ":";
}

.i2lmsg__text {
	flex: 1 1 auto;
}

.i2lmsg--success {
	background: #E7F6EC;
	border-color: #4D9E6F;
	color: #1B5E20;
}

.i2lmsg--error {
	background: #FDECEA;
	border-color: #C62828;
	color: #C62828;
}

/* ---------------------------------------------------------------------
   The legacy message class, used about 7,130 times across 388 pages that
   render their own markup. Those pages cannot tell success from failure,
   so they keep ONE colour - but the colour itself was a conformance
   defect and is corrected here.

   ⚠ It was #FF0000, which is 4.0:1 on white and FAILS SC 1.4.3 for text
   this size (AA needs 4.5:1). #C62828 is 5.6:1 and passes.
   --------------------------------------------------------------------- */
.alert {
	color: #C62828;
}


/* ---------------------------------------------------------------------
   i2L, 10 September 2026.  Lesson viewer header, sidebar and buttons.

   ⛔ READ BEFORE CHANGING THE HEADER AGAIN.
   An earlier attempt kept the brand and the toolbar on ONE row above 900px and
   let both shrink to fit.  Measured: the row wants 1,103px (brand 350 + toolbar
   753) inside a 960px container, so shrinking made them overlap - the school
   name slid under Home and the Next/Lesson buttons stacked.  Rolled back the
   same hour.  ▶ The row has never fitted at any width.  Do not try to make it.

   The shape now matches the DASHBOARD header, measured from it:
     row 1  org name (18px/400/#134E8E) ......... Logout · Home (ui__link, 14px)
     row 2  page controls .................................... Resources

   Ordering is DOM order plus margin-left:auto - deliberately NOT the `order`
   property, which would desync visual and keyboard order.

   BUTTONS, PRODUCT-WIDE: <button> and <input> do not inherit font-family, so
   .ui__btn rendered Inter 14px on <a> and Arial 13.33px on <button>/<input> -
   which is why heights came out 29/30/31/36px on controls meant to match.
   font-weight is deliberately NOT touched.

   SIDEBAR: 280-380px while there is room, then a normal full-width block.
   ⛔ DO NOT auto-apply [data-collapsed="true"] at a breakpoint - that rule hides
   #uiSidenav, which holds the lesson text, the read-aloud controls AND the 52
   navigation links.  Collapsing is the student's choice, not a screen width's.
   The :not() guard keeps the manual toggle working; without it these rules tie
   on specificity and, being later in the file, would win.
   --------------------------------------------------------------------- */

#ui-shell .ui__btn,
#ui-shell .ui__iconBtn { font-family: inherit; font-size: inherit; line-height: inherit; }

#ui-shell.course-viewer .ui__headerCompactRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  overflow: visible;
  row-gap: 6px;
}

#ui-shell.course-viewer .ui__brand {
  flex: 1 1 auto;
  max-width: none;
  font-size: 18px;
  font-weight: 400;
  color: #134E8E;
}

#ui-shell.course-viewer .ui__headerActions {
  margin-left: auto;
  display: flex;
  gap: 14px;
  align-items: center;
}
#ui-shell.course-viewer .ui__headerActions .ui__link { font-size: 14px; }

#ui-shell.course-viewer .viewer-toolbar { flex: 1 0 100%; min-width: 0; }
#ui-shell.course-viewer .viewer-jump { min-width: 0; }
#ui-shell.course-viewer .viewer-jump__select { min-width: 0; width: 100%; max-width: 360px; }
#ui-shell.course-viewer .viewer-toolbar .ui__btn { white-space: nowrap; }

#ui-shell.course-viewer .ui__sidenavTitle h1 {
  font-size: 16px;
  line-height: 1.25;
  text-wrap: balance;
  overflow-wrap: break-word;
}

@media (min-width: 901px) {
  #ui-shell.course-viewer .ui__sidenav:not([data-collapsed="true"]) { min-width: 280px; max-width: 380px; }
}

@media (max-width: 900px) {
  #ui-shell.course-viewer .ui__sidenav:not([data-collapsed="true"]) {
    position: static; width: 100%; min-width: 0; max-width: none; height: auto; max-height: none;
  }
}


/* i2L, 10 September 2026.  Small button for the header actions row, and the
   inert state for Resources when a course has none.  ⚠ The colour is only one
   of three signals - the icon shape and the accessible name change too. */
#ui-shell .ui__btn--sm { padding: 3px 9px; font-size: 13px; border-radius: 10px; gap: 6px; }
#ui-shell .ui__btn.is-empty { cursor: default; opacity: .8; }
#ui-shell.course-viewer .ui__headerActions { gap: 12px; }
#ui-shell.course-viewer .ui__headerActions .ui__btn--sm { flex: 0 0 auto; }


/* ---------------------------------------------------------------------
   i2L, 10 September 2026.  Resources STATUS CHIP.

   Approved from a live preview.  Deliberately NOT styled like the page
   buttons on row 2 - it reports state, it is not a primary action.  It
   reuses the translucent-pill language of the message component, which is
   already familiar in this product.

   ⚠ Colour is one of THREE signals.  The icon shape and the accessible name
   change too - SC 1.4.1 Use of Color.
   Measured: green text #14471A on #D3EBDA = 8.56:1; grey #4B5563 on #F3F4F6
   = 6.87:1.  Both far past the 4.5:1 required.
   ⚠ .ui__chip is not a .ui__btn, so it inherits none of the button focus
   styling - the focus ring below is required, not decorative (SC 2.4.7).
   --------------------------------------------------------------------- */
#ui-shell .ui__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid;
  cursor: pointer;
}
#ui-shell .ui__chip i { font-size: 13px; }
#ui-shell .ui__chip--on  { background: #D3EBDA; color: #14471A; border-color: #14471A; }
#ui-shell .ui__chip--off { background: #F3F4F6; color: #4B5563; border-color: #6B7785; cursor: default; }
#ui-shell .ui__chip:focus-visible { outline: 3px solid #1A56DB; outline-offset: 2px; }


/* ---------------------------------------------------------------------
   i2L, 10 September 2026.  Lesson viewer re-audit.

   SC 1.4.11 Non-text Contrast.  A control needs 3:1 on whatever IDENTIFIES
   it.  A solid fill does that job on its own - the green nav buttons are
   4.51:1 and blue Home is 7.15:1 against white, so neither needs an outline.
   Two controls have NO contrasting fill, so the border is the only indicator,
   and both were failing:
       .viewer-jump__select    border ##e6e8eb = 1.23:1
       bare .ui__btn (A- A A+) border ##d1d5db = 1.47:1
   ##6b7785 gives 4.56:1 - the same value used on the login and profile inputs
   in CHG-2026-339, so the product stays consistent.

   ⚠ HOVER IS NOT A WCAG REQUIREMENT - focus is (SC 2.4.7).  The focus ring is
   left exactly as it was; only hover feedback is deepened.
   --------------------------------------------------------------------- */

#ui-shell .viewer-jump__select { border-color: #6b7785; }

#ui-shell.course-viewer .ui__sidenavTop .ui__btn,
#ui-shell.course-viewer .ui__sidenavTop button.ui__btn { border: 1px solid #6b7785; }

#ui-shell .ui__btn--primary:hover  { background: #0A6B00; }
#ui-shell .ui__btn--tertiary:hover { background: #0B3F8F; }
#ui-shell.course-viewer .ui__sidenavTop .ui__btn:hover { background: #eef2f7; border-color: #374151; }
#ui-shell .ui__chip--on:hover  { background: #C2E3CC; }
#ui-shell .viewer-jump__select:hover { border-color: #374151; }


/* i2L, 10 September 2026.  SC 1.4.11, corrected target.  The font-size controls
   (A- A A+) are white on white, so their border is the only thing identifying
   them - it was ##d1d5db, 1.47:1.  ⚠ They sit in #sizecontroldiv, NOT in
   .ui__sidenavTop: the first attempt targeted the wrong container and silently
   changed nothing.  Verified from the rendered DOM, not from the markup. */
#ui-shell #sizecontroldiv .ui__btn { border: 1px solid #6b7785; }
#ui-shell #sizecontroldiv .ui__btn:hover { background: #eef2f7; border-color: #374151; }


/* i2L, 10 September 2026.  SC 1.4.11, third attempt - and the reason it took three.
   The rule that had to be beaten is:
       #ui-shell.course-viewer #sizecontroldiv button   (2 ids, 1 class, 1 type)
   My first try targeted .ui__sidenavTop, the wrong container entirely.  My second
   targeted the right container but as
       #ui-shell #sizecontroldiv .ui__btn               (2 ids, 1 class, 0 type)
   which LOSES on specificity - being later in the file only wins a tie.
   Matching the original selector and adding the class carries it. */
#ui-shell.course-viewer #sizecontroldiv button.ui__btn { border: 1px solid #6b7785; }
#ui-shell.course-viewer #sizecontroldiv button.ui__btn:hover { background: #eef2f7; border-color: #374151; }