/* 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; max-width: calc((100vh - var(--ui-cv-header-h, 70px) - 40px) * 16 / 9); margin-left: auto; margin-right: auto; } /* i2L CHG-2026-847, 1 Oct 2026: never taller than the screen below the header (no scrolling on a Chromebook) */
#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; }

/* =====================================================================
   ADMIN SURFACE  -  i2L, 10 September 2026
   =====================================================================
   The instructor tools: Class Manager, Class Builder, Certify, and the
   report pages. Brought in from the Class Manager draft (artifact
   7b0adf76) so those screens and the printed certificate read as one
   product - navy and brass are the certificate's own colours.

   ⭐ EVERYTHING HERE IS SCOPED UNDER .ui-admin, AND THAT IS DELIBERATE.
   A page opts in by putting class="ui-admin" on its shell. Nothing below
   can reach a page that has not. The student path - Sign In, Home, User
   Profile, Secure Info, Class Enrollment, the lesson viewer - is
   untouched by design: those pages were measured clean on 10 Sep 2026 and
   a repaint would invalidate that work.

   ⛔ The draft used .grp .r .l .c .tbl .crs .rep - far too generic for a
   53 KB stylesheet included by 16,895 files. Renamed to the ui__ prefix
   core.css already uses. They collide with nothing: verified 10 Sep 2026.

   CONTRAST, measured on the rendered page, WCAG 2.1 AAA (7:1) not AA:
     ink #0F1216 on #FFFFFF ............. 18.8:1
     white on navy #00205B .............. 15.5:1
     confirm #12441F on #DCF2E2 .......... 9.5:1
     caution #4A3600 on #FBEFC9 ......... 10.1:1
     sub #3D434B on #FFFFFF ............. 10.0:1
     hint #414750 on #FFFFFF ............. 9.4:1
     brass #5E3F06 on #F2EAD6 ............ 8.0:1
     alert #A31515 on #FFFFFF ............ 7.9:1
     edge #767C85 on #FFFFFF ............. 4.2:1  (SC 1.4.11 needs 3:1)
   ⛔ Four legacy LMS colours were measured too weak to reuse and are NOT
   here: #9A9DA5 (2.6:1), #8A8E96 (3.2:1), the teal header bar (3.3:1),
   #FF0000 (4.0:1).

   SC 1.4.1  no state is carried by colour alone - the moved row also has
             a brass left bar, "required" is the word as well as the mark.
   SC 1.4.10 every table sits in .ui__tableScroll; field rows collapse to
             one column at 680px. The page body never scrolls sideways.
   ⚠ Reflow needs a VIEWPORT META TAG, which these pages do not have -
   only 9 files of 16,895 carry one. See the interface cleanup plan: the
   fix is one line in each of the 17 LMS/headers/ includes.
   ===================================================================== */

.ui-admin{
  /* tokens live on the opt-in class, not :root, so they cannot leak */
  --ui-admin-ground:#DCDEE1;  --ui-admin-panel:#FFFFFF;
  --ui-admin-edge:#767C85;    --ui-admin-rule:#C4C8CE;
  --ui-admin-ink:#0F1216;     --ui-admin-ink-2:#252A31;
  --ui-admin-sub:#3D434B;     --ui-admin-hint:#414750;
  --ui-admin-navy:#00205B;    --ui-admin-navy-hover:#00184A;
  --ui-admin-brass:#5E3F06;   --ui-admin-brass-bg:#F2EAD6;
  --ui-admin-ok:#12441F;      --ui-admin-ok-bg:#DCF2E2;   --ui-admin-ok-edge:#2E7D46;
  --ui-admin-ask:#4A3600;     --ui-admin-ask-bg:#FBEFC9;  --ui-admin-ask-edge:#6B4E00;
  --ui-admin-alert:#A31515;   --ui-admin-alert-bg:#FBE3E1;
  --ui-admin-focus:#8C0000;
  --ui-admin-row:#F4F5F7;     --ui-admin-head:#EAECEF;
  background:var(--ui-admin-ground);
  color:var(--ui-admin-ink);
  font:15.5px/1.55 -apple-system,"Segoe UI",Arial,Helvetica,sans-serif;
}
/* ⚠⚠ SPECIFICITY. core.css already carries `#ui-shell.ui{background:var(--ui-bg)}`
   - one id plus one class, (1,1,0). The rule above is (0,1,0) and LOSES, however
   far down the file it sits: specificity is decided before source order, and
   being later only wins a TIE. Measured on the rendered page, not assumed - the
   shell stayed #ffffff until this rule was added.
   `#ui-shell.ui-admin` is also (1,1,0), and IS later, so it takes the tie. */
/* ⚠ i2L, 11 Sep 2026. C. Bien: "we do not need the gray large row across the
   top. can this page inherit the same top bread crumbs and title without the
   huge gray top row."
   Measured: the breadcrumb was already white and correct; `main` is
   transparent, so the shell's grey showed through behind the page title,
   subtitle and tab bar - a 187px band before the first panel.
   ▶ The GROUND goes back to white, so the top of the page is identical to
   User Profile, Secure Info and Class Enrollment. The palette stays where it
   does work: the panels, the brass headers, the tables and the field rows.
   The grey is kept only as the label-column fill. */
#ui-shell.ui-admin{
  background:var(--ui-bg);
  color:var(--ui-admin-ink);
  font:15.5px/1.55 -apple-system,"Segoe UI",Arial,Helvetica,sans-serif;
}
/* the title block no longer needs to clear a coloured band */
#ui-shell.ui-admin .ui__pageHeader{margin-bottom:2px;}
#ui-shell.ui-admin .i2lLead{margin:0 0 10px;}
/* Save / Cancel, top and bottom */
#ui-shell.ui-admin .ui__formActions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
/* Save / Cancel now ride in the tab row, beside Back to classes. The pair at
   the foot of the page stays. ⚠ `#ui-shell .i2lTabBar > .ui__btn` sets
   margin:0 0 8px 40px on a DIRECT child - the actions are wrapped in a span so
   that rule does not push them 40px apart from each other. */
#ui-shell.ui-admin .i2lTabActions{
  /* CHG-2026-426, 18 Sep 2026. C. Bien, STANDING RULE: Update and Cancel are
     NEVER at the far right - always left, or left of centre. The auto margin
     here pushed them 246px right, hard against the window edge. 40px matches
     the gap Back to classes already uses. */
  display:inline-flex;gap:10px;align-items:center;margin:0 0 8px 40px;
}
#ui-shell.ui-admin .i2lTabActions .ui__btn{margin:0;}
.ui-admin *{box-sizing:border-box;}
.ui-admin :focus-visible{
  outline:3px solid var(--ui-admin-focus);outline-offset:2px;
}

/* ---------- panel ---------- */
.ui-admin .ui__adminPanel{
  background:var(--ui-admin-panel);border:2px solid var(--ui-admin-edge);
  border-radius:3px;overflow:hidden;margin:0 0 18px;
}
.ui-admin .ui__adminPanelHead{
  margin:0;padding:10px 15px;font-size:13px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ui-admin-brass);background:var(--ui-admin-brass-bg);
  border-bottom:2px solid var(--ui-admin-edge);
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap;
}
.ui-admin .ui__adminPanelHead em{
  font-style:normal;letter-spacing:.03em;text-transform:none;
  color:var(--ui-admin-ink-2);font-weight:600;font-size:13px;
}
.ui-admin .ui__adminPanelBody{padding:16px 15px;}

/* ---------- Class Builder per-row controls (draft 7b0adf76 Tab 2) ----------
   These live in core.css, NOT i2l_ui.css: i2l_ui.css is byte-identical to the
   copy staged for production (09c5e787...) and must stay that way. */
#ui-shell.ui-admin .i2lOrdCell{width:34px;padding-left:6px;padding-right:2px;}
#ui-shell.ui-admin .i2lOrdBtns{display:flex;flex-direction:column;gap:2px;align-items:center;}
#ui-shell.ui-admin .i2lOrd{
  background:#fff;color:var(--ui-admin-navy);border:2px solid var(--ui-admin-navy);
  padding:0 5px;font-size:10px;line-height:14px;border-radius:2px;font-weight:700;cursor:pointer;
}
#ui-shell.ui-admin .i2lOrd:hover{background:#DCE3F2;}
/* ---------- Class Builder column head / note / search row ----------
   Mirrors the archetype's .colhead / .colnote / .srchrow (artifact 7b0adf76
   Tab 2), using admin-surface tokens so it matches the Class Info page. */
#ui-shell.ui-admin .i2lBuildHead{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 3px;
}
#ui-shell.ui-admin .i2lBuildTitle{
  margin:0;font-size:15px;font-weight:800;color:var(--ui-admin-ink);
}
#ui-shell.ui-admin .i2lBuildHeadTools{
  display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ui-admin-hint);font-weight:600;
}
#ui-shell.ui-admin .i2lBuildCount{font-variant-numeric:tabular-nums;white-space:nowrap;}
#ui-shell.ui-admin .i2lBuildNote{
  font-size:12.5px;color:var(--ui-admin-hint);margin:0 0 8px;
}
#ui-shell.ui-admin .i2lBuildSearchRow{
  display:flex;gap:9px;align-items:center;margin:0 0 10px;
}
#ui-shell.ui-admin .i2lBuildSearchRow .i2lIn--find{flex:1 1 auto;min-width:0;}
/* ---------- the GREEN move buttons, the archetype's own values ----------
   C. Bien, 11 Sep 2026: "Maybe because it has more color and looks sharper".
   #1B6E2F / hover #14522A, taken from .movebtn in artifact 7b0adf76 Tab 2. */
#ui-shell.ui-admin .i2lMove{
  display:inline-flex;align-items:center;gap:5px;
  background:#1B6E2F;color:#fff;border:2px solid #145223;border-radius:3px;
  padding:4px 12px;font-size:14px;font-weight:800;line-height:1.5;
  font-family:inherit;cursor:pointer;white-space:nowrap;
}
#ui-shell.ui-admin .i2lMove:hover{background:#14522A;}
/* A-Z sits inside the Course name header */
#ui-shell.ui-admin .i2lSortBtn{
  margin-left:6px;background:#fff;color:var(--ui-admin-navy);
  border:2px solid var(--ui-admin-navy);border-radius:3px;padding:1px 8px;
  font-size:12px;font-weight:800;line-height:1.5;cursor:pointer;
  text-transform:none;letter-spacing:0;font-family:inherit;
}
#ui-shell.ui-admin .i2lSortBtn:hover{background:#DCE3F2;}
#ui-shell.ui-admin .i2lBuildTally{
  font-size:13px;color:var(--ui-admin-ink-2);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;margin-right:4px;
  text-transform:none;letter-spacing:0;
}
/* the status bar under the two columns */
#ui-shell.ui-admin .i2lBuildBar{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:10px 0 0;
  border-top:2px solid var(--ui-admin-rule);margin-top:12px;
  font-size:13.5px;color:var(--ui-admin-hint);font-weight:600;
}
#ui-shell.ui-admin .i2lMovedKey{display:inline-flex;align-items:center;gap:7px;}
#ui-shell.ui-admin .i2lMovedSwatch{
  display:inline-block;width:26px;height:14px;background:#FFFFCC;
  box-shadow:inset 4px 0 0 var(--ui-admin-ask-edge);border:1px solid var(--ui-admin-rule);
}
#ui-shell.ui-admin .i2lBuildWhy{margin-top:12px;}
/* ---------- insertion points, the archetype's .insbtn ---------- */
#ui-shell.ui-admin .i2lInsBar td{padding:0;border:0;background:transparent;}
#ui-shell.ui-admin .i2lInsBtn{
  display:block;width:100%;background:#DCF2E2;color:#12441F;
  border:2px dashed #2E7D46;border-radius:3px;padding:3px 0;margin:2px 0;
  font-size:13px;font-weight:800;letter-spacing:.02em;cursor:pointer;font-family:inherit;
}
#ui-shell.ui-admin .i2lInsBtn:hover{background:#2E7D46;color:#fff;border-style:solid;}

/* ---------- THE SHARPENING FIX (CHG-2026-389) ----------------------------
   C. Bien, 11 Sep 2026: "look at the sharper color. is it possible to improve
   the addition to the existing lms style sheet".  Yes - and the rule that does
   it already existed, it simply never won.

   MEASURED: i2l_ui.css:305 is
     #ui-shell table.i2lBuildTable input[type=checkbox]  ->  (1,2,2)
   and it sets accent-color to --ui-button-primary-bg, the GREEN button colour.
   The admin rule .ui-admin input[type=checkbox] is (0,1,1) and loses outright,
   so the builder's boxes render green where the draft's are navy.

   These selectors are (1,3,1): one id, three classes (.ui-admin, the table
   family, [type=checkbox]) and one element - they beat (1,2,2) on class count
   without touching i2l_ui.css, which stays byte-identical to the copy staged
   for production. */
#ui-shell.ui-admin .ui__tableBuilder input[type=checkbox],
/* ---------- the last two FINAL colours (CHG-2026-391) --------------------
   C. Bien, 11 Sep 2026: "add those two as well".

   1. --req-bg #EDEDE2.  The FINAL pages tint a REQUIRED field so it reads as
      required without relying on colour alone - the word "required" and the
      asterisk are already there (SC 1.4.1).  Targets the required ATTRIBUTE,
      so no markup change and it covers any field made required later.
      (1,2,0) - beats #ui-shell .i2lIn (1,1,0).
   2. #F0F3F9 secondary-button hover.  core.css:599 is
      #ui-shell .ui__btn--secondary:hover -> (1,2,0); this is (1,3,0). */
#ui-shell.ui-admin input[required]:not([type=checkbox]):not([type=radio]){
  background:#EDEDE2;
}
#ui-shell.ui-admin input[required]:focus{background:#FFFFFF;}
#ui-shell.ui-admin .ui__btn--secondary:hover,
#ui-shell.ui-admin .ui__btn--secondary:focus-visible{
  background:#F0F3F9;
}
/* ---------- THE FINAL PAGES' TAB BAR (CHG-2026-390) ----------------------
   C. Bien, 11 Sep 2026: "update core.css with the FINAL colors and style i
   like".  Ported verbatim from CLASS_MANAGER_FINAL.html - the same fills,
   borders and radii, with the draft's literal greys kept because they are the
   design (#E3E6E9 inactive, #CFD4DA hover, #C9CDD3 badge).

   MEASURED 11 Sep: tab styling lived ONLY in i2l_ui.css as
     #ui-shell .i2lTabs a   ->  (1,1,1)
   and core.css had ZERO tab rules, so the admin surface never touched them -
   which is why the tabs read flat next to the FINAL page's outlined blocks.
   These selectors are (1,2,1) and win, WITHOUT editing i2l_ui.css, which stays
   byte-identical to the copy staged for production. class_list.cfm does not
   carry .ui-admin, so it is unaffected. */
#ui-shell.ui-admin .i2lTabs{
  display:flex;gap:3px;flex-wrap:wrap;
  border-bottom:3px solid var(--ui-admin-edge);margin:0;padding:0;
}
#ui-shell.ui-admin .i2lTabs a,
#ui-shell.ui-admin .i2lTabs a:link,
#ui-shell.ui-admin .i2lTabs a:visited{
  display:inline-block;
  background:#E3E6E9;color:var(--ui-admin-sub);
  border:2px solid var(--ui-admin-edge);border-bottom:5px solid var(--ui-admin-edge);
  margin-bottom:-3px;padding:10px 19px;
  font-size:15px;font-weight:700;border-radius:4px 4px 0 0;
  text-decoration:none;
}
#ui-shell.ui-admin .i2lTabs a:hover{background:#CFD4DA;color:var(--ui-admin-ink);}
#ui-shell.ui-admin .i2lTabs a[aria-selected="true"]{
  background:var(--ui-admin-panel);color:var(--ui-admin-navy);
  border-color:var(--ui-admin-edge);border-bottom-color:var(--ui-admin-navy);
}
/* the count badge, e.g. "Class Builder 21" */
#ui-shell.ui-admin .i2lTabCount{
  font-size:12.5px;background:#C9CDD3;color:var(--ui-admin-ink-2);
  border-radius:3px;padding:1px 7px;margin-left:7px;
  font-variant-numeric:tabular-nums;font-weight:700;
}
#ui-shell.ui-admin .i2lTabs a[aria-selected="true"] .i2lTabCount{
  background:var(--ui-admin-navy);color:#fff;
}
#ui-shell.ui-admin .ui__tableReport  input[type=checkbox]{
  width:16px;height:16px;accent-color:var(--ui-admin-navy);
  vertical-align:middle;margin:0;
}
/* while a placement is armed the untouched rows recede */
#ui-shell.ui-admin .is-placing tbody tr:not(.i2lInsBar){opacity:.55;}
#ui-shell.ui-admin .is-placing tbody tr.ui__rowPicked{opacity:1;}


#ui-shell.ui-admin .i2lOid{
  display:block;font-size:11.5px;color:var(--ui-admin-hint);font-weight:600;
}

/* ---------- THE PANEL GUTTER RULE ------------------------------------
   C. Bien, 11 Sep 2026: "is there a style sheet rule that can prevent this
   from happening in the future?"  This is that rule.

   A panel's direct children are full-bleed by default, because the panel
   itself carries padding:0 (its header is a brass bar whose background MUST
   reach the edges, so the panel cannot simply be padded).  Anything else
   dropped straight into a panel therefore lands ON the border - MEASURED
   11 Sep: `p.i2lHint--block` sat at a 2px left inset, and that 2px was the
   border itself, not a gap.

   So rather than padding each offender by hand, every direct child is given
   the header's own 15px gutter EXCEPT the three that are deliberately
   full-bleed or already self-padded:
     .ui__adminPanelHead  the brass bar - background must reach the edges
     .i2lForm             the field-row grid - its hairlines reach the edges
     .ui__adminPanelBody  already pads itself 16px/15px
   Anything added to a panel in future is covered automatically.

   Written #ui-shell.ui-admin, never a bare .ui-admin: #ui-shell.ui is
   (1,1,0) and a bare class LOSES wherever it sits in the file. */
#ui-shell.ui-admin .ui__adminPanel > *:not(.ui__adminPanelHead):not(.i2lForm):not(.ui__adminPanelBody){
  padding-left:15px;padding-right:15px;
}
/* and nothing may sit ON the bottom border either */
#ui-shell.ui-admin .ui__adminPanel > *:last-child:not(.ui__adminPanelHead):not(.ui__adminPanelBody){
  margin-bottom:16px;
}

/* ---------- the field row grid: this is what makes it read as TIGHT ----
   A fixed label column against a fluid value column, one hairline rule
   between rows, 11px padding. Four fields in the height a stacked layout
   gives two. ---------------------------------------------------------- */
.ui-admin .ui__fieldRow{
  display:grid;grid-template-columns:224px minmax(0,1fr);
  border-bottom:1px solid var(--ui-admin-rule);align-items:start;
}
.ui-admin .ui__fieldRow:last-child{border-bottom:0;}
.ui-admin .ui__fieldLabel{
  /* i2L, 11 Sep 2026. C. Bien: "the input boxes and radial buttons are too
     close to the left gray column - they are touching. I am not concerned about
     dense space horizontally. I am more worried vertically."
     ⭐ VERTICAL PADDING IS UNCHANGED at 11px - the tight row height is the point
     of this layout. Only the HORIZONTAL padding opened up. */
  padding:11px 18px;font-size:14.5px;font-weight:700;color:var(--ui-admin-ink);
  background:var(--ui-admin-row);border-right:1px solid var(--ui-admin-rule);
}
.ui-admin .ui__fieldLabel .ui__fieldHint{
  display:block;font-weight:400;font-size:13px;color:var(--ui-admin-hint);margin-top:2px;
}
.ui-admin .ui__fieldValue{padding:11px 22px;min-width:0;}
.ui-admin .ui__fieldInline{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}

.ui-admin .ui__req{
  display:inline-block;font-weight:700;font-size:11.5px;color:var(--ui-admin-alert);
  text-transform:uppercase;letter-spacing:.07em;margin-left:6px;
}
.ui-admin .ui__srcTag{
  display:inline-block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ui-admin-brass);background:var(--ui-admin-brass-bg);
  border:1px solid var(--ui-admin-brass);border-radius:2px;padding:1px 6px;font-weight:700;
}
.ui-admin .ui__count{
  font-size:13px;color:var(--ui-admin-hint);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ---------- notes. SC 1.4.1: each carries a WORD, not just a colour --- */
.ui-admin .ui__note{
  display:flex;align-items:flex-start;gap:10px;padding:10px 13px;margin:11px 0 0;
  border:2px solid;border-radius:5px;font-size:13.5px;line-height:1.5;max-width:70ch;
}
.ui-admin .ui__note .ui__noteLabel{flex:0 0 auto;font-weight:800;}
.ui-admin .ui__note .ui__noteLabel::after{content:":";}
.ui-admin .ui__note--ok{background:var(--ui-admin-ok-bg);border-color:var(--ui-admin-ok-edge);color:var(--ui-admin-ok);}
.ui-admin .ui__note--ask{background:var(--ui-admin-ask-bg);border-color:var(--ui-admin-ask-edge);color:var(--ui-admin-ask);}
.ui-admin .ui__note--err{background:var(--ui-admin-alert-bg);border-color:var(--ui-admin-alert);color:var(--ui-admin-alert);}

/* ---------- tables: every one gets a scroll container (SC 1.4.10) ----- */
.ui-admin .ui__tableScroll{overflow-x:auto;}

.ui-admin .ui__tableBuilder,
.ui-admin .ui__tableReport{width:100%;border-collapse:collapse;}

.ui-admin .ui__tableBuilder th,
.ui-admin .ui__tableReport th{
  border-bottom:2px solid var(--ui-admin-edge);padding:7px 8px;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ui-admin-ink);
  font-weight:800;text-align:left;white-space:nowrap;
}
.ui-admin .ui__tableBuilder th{background:var(--ui-admin-head);position:sticky;top:0;z-index:2;}
.ui-admin .ui__tableReport th{background:var(--ui-admin-row);padding:8px 14px;letter-spacing:.05em;}

.ui-admin .ui__tableBuilder td{
  padding:6px 8px;border-bottom:1px solid var(--ui-admin-rule);font-size:14px;vertical-align:middle;
}
.ui-admin .ui__tableReport td{
  padding:8px 14px;border-bottom:1px solid var(--ui-admin-rule);font-size:14.5px;
}
.ui-admin .ui__tableReport tbody tr:last-child td{border-bottom:0;}
.ui-admin .ui__tableBuilder tbody tr:nth-child(even){background:var(--ui-admin-row);}
.ui-admin .ui__tableReport tbody tr:nth-child(even){background:#F8F9FA;}

/* grouped column header - a rule and a fill, both */
.ui-admin .ui__colGroup{
  background:#E0E3E7;border-bottom:1px solid var(--ui-admin-rule);
  border-left:1px solid var(--ui-admin-rule);border-right:1px solid var(--ui-admin-rule);
}
.ui-admin .ui__colSub{border-left:1px solid var(--ui-admin-rule);font-size:11.5px;}

/* alignment helpers. Digits ALWAYS on tabular figures so columns line up */
.ui-admin .ui__cellC{text-align:center;}
.ui-admin .ui__cellNum{text-align:right;font-variant-numeric:tabular-nums;}
.ui-admin .ui__cellSeq{
  font-variant-numeric:tabular-nums;color:var(--ui-admin-hint);
  font-weight:700;width:32px;text-align:right;
}
.ui-admin .ui__cellSub{display:block;font-size:11.5px;color:var(--ui-admin-hint);font-weight:600;}

/* row states. ⚠ SC 1.4.1 - the fill is NEVER the only cue. What each
   one actually carries, so this comment can be trusted:
     ui__rowMoved   fill + a brass left bar
     ui__rowPicked  fill + a navy left bar  (added 11 Sep 2026 - it had the
                    fill ALONE, which this comment already claimed it did not.
                    C. Bien: the ticked checkbox is a control, not a row-state
                    cue, so it does not discharge 1.4.1 on its own)
     ui__rowAlone   fill + a brass left bar
     ui__rowMuted   fill + dimmed text AND the row says "not in this class" in
                    words - deliberately NO bar, because a bar would make a
                    muted row read as emphasised. The WORD is the cue. */
.ui-admin .ui__rowMoved,
.ui-admin .ui__tableBuilder tbody tr.ui__rowMoved:nth-child(even){
  background:#FFFFCC;box-shadow:inset 4px 0 0 var(--ui-admin-ask-edge);
}
.ui-admin .ui__rowPicked,
.ui-admin .ui__tableBuilder tbody tr.ui__rowPicked:nth-child(even){background:#DCE3F2;}
.ui-admin .ui__rowPicked td:first-child{box-shadow:inset 4px 0 0 var(--ui-admin-navy);}
.ui-admin .ui__rowAlone,
.ui-admin .ui__tableReport tbody tr.ui__rowAlone:nth-child(even){background:var(--ui-admin-brass-bg);}
.ui-admin .ui__rowAlone td:first-child{box-shadow:inset 4px 0 0 var(--ui-admin-brass);}
.ui-admin .ui__rowMuted,
.ui-admin .ui__tableReport tbody tr.ui__rowMuted:nth-child(even){background:#EDEEF0;}
.ui-admin .ui__rowMuted td{color:var(--ui-admin-hint);}

/* ---------- buttons on the admin surface ---------- */
.ui-admin .ui__adminBtn{
  padding:8px 17px;font-size:14.5px;font-family:inherit;cursor:pointer;font-weight:600;
  background:var(--ui-admin-navy);color:#fff;
  border:1px solid var(--ui-admin-navy);border-radius:3px;
}
.ui-admin .ui__adminBtn:hover{background:var(--ui-admin-navy-hover);}
.ui-admin .ui__adminBtn--alt{
  background:#fff;color:var(--ui-admin-navy);border:2px solid var(--ui-admin-navy);
}
.ui-admin .ui__adminBtn--alt:hover{background:#DCE3F2;}
.ui-admin .ui__adminBtn--sm{padding:2px 10px;font-size:13px;font-weight:800;line-height:1.5;}
.ui-admin .ui__adminBtn--go{background:#1B6E2F;border-color:#145223;color:#fff;}
.ui-admin .ui__adminBtn--go:hover{background:#14522A;}
.ui-admin .ui__adminBtn[disabled]{
  color:var(--ui-admin-hint);border-color:var(--ui-admin-rule);
  background:#F1F2F4;cursor:default;
}

/* ---------- inputs ---------- */
.ui-admin input[type=text],.ui-admin input[type=email],.ui-admin input[type=date],
.ui-admin input[type=number],.ui-admin input[type=search]{
  font-family:inherit;font-size:15px;color:var(--ui-admin-ink);background:#fff;
  border:2px solid #5B626B;border-radius:3px;padding:6px 9px;width:100%;max-width:340px;
}
.ui-admin input[readonly]{background:#E7E9EC;color:var(--ui-admin-ink-2);border-style:dashed;}
.ui-admin input[type=checkbox],.ui-admin input[type=radio]{
  width:16px;height:16px;accent-color:var(--ui-admin-navy);
}
.ui-admin .ui__inputXs{max-width:86px;}
.ui-admin .ui__inputSm{max-width:160px;}
.ui-admin .ui__inputMd{max-width:240px;}

/* ---------- responsive: the label column folds away ---------- */
@media (max-width:680px){
  .ui-admin .ui__fieldRow{grid-template-columns:minmax(0,1fr);}
  .ui-admin .ui__fieldLabel{border-right:0;padding-bottom:0;}
  .ui-admin .ui__tableBuilder th{position:static;}
}
@media (prefers-reduced-motion:reduce){
  .ui-admin *{transition:none !important;animation:none !important;}
}

/* ---------------------------------------------------------------------
   i2L, 11 September 2026. TWO FIXES, both measured on the rendered page.

   1. CONTROLS TOUCHING THE LABEL COLUMN.
      C. Bien: "the green radial button and input boxes are touching."
      Measured: the radio sat 0px from the rule. The value cell is not
      always .ui__fieldValue - rows also use .i2lChoice, .i2lDateRow,
      .i2lFlag, .i2lTight, and `#ui-shell .i2lChoice` sets padding-top
      only, with NO horizontal padding.
      ⚠ Padding the CLASSES would need one rule per class and would keep
      losing to (1,1,0). Padding the ROW'S SECOND CHILD covers every one
      of them, whatever it is called, now and later.

   2. THE PAGE DID NOT USE THE SCREEN.
      C. Bien: "this page is NOT responsive. Look at the gray columns on
      both sides." Measured: --ui-max-w caps the container at 1240px, so
      on a wide monitor the admin ground shows as bands either side.
      Raised for this surface only. ▶ It is ONE number - tune it here.

   ⚠⚠ Both selectors are #ui-shell.ui-admin ... = (1,3,0), deliberately.
   The incumbents are `#ui-shell .i2lChoice` (1,1,0) and the container
   rule. A class-only selector loses no matter where it sits in the file.
   --------------------------------------------------------------------- */
#ui-shell.ui-admin{
  --ui-max-w:2400px;          /* effectively "use the screen"; still capped */
}
#ui-shell.ui-admin .ui__fieldRow > *:nth-child(2){
  padding:11px 22px;
  min-width:0;
}
/* the label is the FIRST child, and keeps its own tighter horizontal pad */
#ui-shell.ui-admin .ui__fieldRow > *:nth-child(1){
  padding:11px 18px;
}
/* .i2lChoice carried a padding-top of its own, which now double-pads */
#ui-shell.ui-admin .ui__fieldRow > .i2lChoice{padding-top:11px;}


/* ---------------------------------------------------------------------
   i2L, 11 September 2026.  SC 1.4.11 Non-text Contrast on the .i2lIn inputs.

   C. Bien, from the rendered page: "darker borders for Priority # box."
   He was right, and it was not only that one. MEASURED: seven controls
   still carried --ui-border (#e6e8eb) at 1.23:1 against white, where the
   criterion requires 3:1 - the box is identified by its border alone, so
   the border IS the component boundary:
     f_sort_order (Priority #) . f_class_email . f_date_start . f_date_end
     cert1_tests_completed . cert1_test_scores . peerFilter
   The text inputs beside them were already #6b7785 at 4.56:1, from
   CHG-2026-339 - so the page was inconsistent as well as failing.

   ⚠ #6b7785 is the SAME value CHG-2026-339 and CHG-2026-364 used on the
   login, profile and lesson-viewer controls. One border colour across the
   product, not a third one invented here.
   ⚠⚠ Specificity: the incumbent is `#ui-shell .i2lIn` (1,1,0). This is
   `#ui-shell.ui-admin .i2lIn` (1,2,0) and wins on merit, not on order.
   --------------------------------------------------------------------- */
#ui-shell.ui-admin .i2lIn,
#ui-shell.ui-admin input[type="search"]{
  border:1px solid #6b7785;          /* 4.56:1 on white */
}
#ui-shell.ui-admin .i2lIn:focus,
#ui-shell.ui-admin .i2lIn:focus-visible{border-color:#0F1216;}


/* i2L, 11 September 2026. C. Bien: "can the tabs and the green active marker
   be moved up off the Class Information title block."
   The tab row's underline was sitting directly on the brass panel header, so
   the active tab's green marker and the panel edge read as one object.
   ⚠ Incumbent `#ui-shell .i2lTabBar` (1,1,0) sets margin:8px 0 0 - no bottom
   margin at all. This is (1,2,0) and wins on specificity, not on file order. */
#ui-shell.ui-admin .i2lTabBar{margin:8px 0 18px;}

/* ===================== end ADMIN SURFACE ============================= */