/* ==========================================================================
   FRVA University
   Palette driven stylesheet. Brand colors are declared once as tokens and
   everything downstream references them, so a rebrand is a one place edit.
   ========================================================================== */

:root {
  /* Brand palette, exactly as supplied */
  --frva-navy:    #0B2F4F;  /* Adventure Navy   - primary dark  */
  --frva-orange:  #F26B38;  /* Campfire Orange  - primary accent */
  --frva-green:   #5E9F3A;  /* Premium Green    - outdoor        */
  --frva-gold:    #F4B942;  /* Sunrise Gold     - highlight      */
  --frva-blue:    #0F4C81;  /* Adventure Blue   - travel accent  */
  --frva-white:   #FAF9F6;  /* Warm White       - neutral        */

  /* Derived shades. Campfire Orange, Premium Green and Sunrise Gold all sit
     near 3:1 against Warm White, which is fine for borders, fills and icons
     but fails for body text. These deepened versions clear 4.5:1 and are used
     wherever the brand color has to carry small text. */
  --frva-orange-deep: #B84A18;
  --frva-green-deep:  #3F7025;
  --frva-gold-deep:   #8A6410;

  /* Tints for banded backgrounds */
  --frva-navy-tint:   #E7EDF3;
  --frva-orange-tint: #FDEDE6;
  --frva-green-tint:  #EDF5E6;
  --frva-gold-tint:   #FDF3DC;

  /* Semantic roles */
  --frva-ink:        var(--frva-navy);
  --frva-ink-soft:   #5A7085;
  --frva-on-dark:    var(--frva-white);
  --frva-surface:    #ffffff;
  --frva-surface-2:  var(--frva-white);
  --frva-line:       #E3DED0;                  /* warm hairline, reads as aged gold */
  --frva-rule:       var(--frva-gold);         /* structural gold divider */
  --frva-focus:      var(--frva-orange);

  --frva-danger:      #C0392B;
  --frva-danger-tint: #FBE9E7;

  --frva-radius:     14px;
  --frva-radius-sm:  8px;
  --uni-side-w:   250px;   /* sidebar width, one place to tune */
  --uni-rail-w:   20px;    /* toggle handle width */
  --uni-slide:    320ms;
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.frva-university-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 80px;
  padding: 12px 8px;
  background-color: var(--frva-navy);
  border-bottom: 3px solid var(--frva-rule);
  border-radius: var(--frva-radius) var(--frva-radius) 0 0;
}

.frva-heading-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* The original rule was `.frva-heading-inner > h1,h2,h3`, which the comma
   splits into three selectors: the scoping only applied to h1, so every h2 and
   h3 on the page turned Warm White. Grouped inside :is() it stays scoped. */
.frva-heading-inner > :is(h1, h2, h3) {
  margin: 0 10px;
  color: var(--frva-on-dark);
  line-height: 1.2;
}

.frva-heading-inner > h2 {
  letter-spacing: -0.01em;
}

/* Gold ring ties the avatar to the divider under the bar */
.frva-heading-inner > img {
  margin: 0 10px;
  background-color: var(--frva-white);
  border-radius: 50%;
  border: 2px solid var(--frva-gold);
  object-fit: cover;
}

.frva-university-body {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  background-color: var(--frva-navy-tint);
}

.frva-university-column-1 {
  flex: 0 0 var(--uni-side-w);
  width: var(--uni-side-w);
  min-width: 0;
  margin: 5px;
  overflow: hidden;
  transition:
    flex-basis var(--uni-slide) ease,
    width      var(--uni-slide) ease,
    margin     var(--uni-slide) ease,
    opacity    240ms ease;
}

.frva-university-column-1.is-collapsed {
  flex-basis: 0;
  width: 0;
  margin-left: 0;
  margin-right: 0;
  opacity: 0;
}

.uni-sidebar-inner {
  width: var(--uni-side-w);
}

.frva-university-column-2 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 5px;
}

.left-sidebar,
.right-sidebar {
  display: block;
}

.uni-toggle {
  flex: 0 0 var(--uni-rail-w);
  width: var(--uni-rail-w);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--frva-navy);
  color: var(--frva-gold);
  cursor: pointer;
  transition: background-color 200ms ease;
}

.uni-toggle:hover {
  background: var(--frva-blue);
  color: var(--frva-white);
}

.uni-toggle:focus-visible {
  outline: 2px solid var(--frva-focus);
  outline-offset: 2px;
}

.uni-toggle__chevron {
  display: block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transition: transform 180ms ease;
}

/* Expanded: point at the panel it will close. Collapsed: point outward. */
.uni-toggle--left  .uni-toggle__chevron { transform: rotate(135deg); }
.uni-toggle--right .uni-toggle__chevron { transform: rotate(-45deg); }

.uni-toggle--left[aria-expanded="false"]  .uni-toggle__chevron { transform: rotate(-45deg); }
.uni-toggle--right[aria-expanded="false"] .uni-toggle__chevron { transform: rotate(135deg); }

.uni-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Suppresses the slide while stored state is applied on first paint. */
.uni-no-transition,
.uni-no-transition * {
  transition: none !important;
}

.frva-university-footer {
  width: 100%;
  min-height: 80px;
  padding: 20px;
  background-color: var(--frva-navy);
  color: var(--frva-on-dark);
  border-top: 3px solid var(--frva-rule);
  border-radius: 0 0 var(--frva-radius) var(--frva-radius);
}

/* --------------------------------------------------------------------------
   Sidebar navigation
   -------------------------------------------------------------------------- */

.navigation-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  background-color: var(--frva-blue);
  border-bottom: 2px solid var(--frva-rule);
}

/* Same comma bug as the heading rule: `> h3,h5` recolored every h5 on the page. */
.navigation-heading > :is(h3, h5) {
  margin: 0;
  color: var(--frva-on-dark);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

ul.uni-nav-list {
  margin: 0 0 1.15rem;
  padding-left: 0;
  list-style: none;
  color: var(--frva-ink);
  text-align: left;
  background-color: var(--frva-white);
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

ul.uni-nav-list > li {
  position: relative;
  display: block;
  list-style: none;
  border-bottom: 1px solid var(--frva-line);
}

ul.uni-nav-list > li:last-child {
  border-bottom: 0;
}

ul.uni-nav-list > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
  color: var(--frva-ink);
  text-decoration: none;
  transition: background-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}

/* Campfire Orange marks whatever the pointer or keyboard is on */
ul.uni-nav-list > li > a:hover,
ul.uni-nav-list > li > a:focus-visible {
  background-color: var(--frva-orange-tint);
  color: var(--frva-orange-deep);
  box-shadow: inset 3px 0 0 var(--frva-orange);
}

/* Add is-active to the link matching the current ?state= value */
ul.uni-nav-list > li > a.is-active {
  background-color: var(--frva-gold-tint);
  color: var(--frva-navy);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--frva-gold);
}

ul.uni-nav-list a > i {
  width: 1.15em;
  margin-right: 6px;
  color: var(--frva-orange);
  text-align: center;
}

ul.uni-nav-list a.is-active > i {
  color: var(--frva-gold-deep);
}

ul.uni-nav-list small {
  display: block;
  margin-top: 2px;
  color: var(--frva-ink-soft);
  font-size: 0.78em;
}

ul.uni-nav-list a:hover small {
  color: var(--frva-orange-deep);
}

/* Empty sidebar list */
ul.uni-nav-list > li.is-empty {
  padding: 12px 15px;
  color: var(--frva-ink-soft);
  font-size: 0.85em;
}

/* --------------------------------------------------------------------------
   Main content column
   -------------------------------------------------------------------------- */

.univ-main-content {
  padding: 20px;
  color: var(--frva-ink);
  background-color: var(--frva-surface) !important;
  max-height: 500px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* :not(.cm *) keeps these overrides off the course menu, which sets its own
   muted and status colors. */
.univ-main-content :is(h1, h2, h3, h4, h5, h6):not(.cm *) {
  color: var(--frva-navy) !important;
}

.univ-main-content :is(p, li):not(.cm *) {
  color: var(--frva-ink) !important;
}

.univ-main-content a:not(.cm *) {
  color: var(--frva-blue);
  text-decoration-color: var(--frva-gold);
  text-underline-offset: 2px;
}

.univ-main-content a:not(.cm *):hover {
  color: var(--frva-orange-deep);
  text-decoration-color: var(--frva-orange);
}

.univ-main-content > hr {
  height: 2px;
  border: 0;
  background-color: var(--frva-rule) !important;
}

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.pub-notice {
  margin: 0 0 16px;
  padding: 14px 16px;
  width: 100%;
  color: var(--frva-ink);
  background-color: var(--frva-navy-tint);
  border-left: 4px solid var(--frva-blue);
  border-radius: var(--frva-radius-sm);   /* 20px fought the 4px flat left edge */
}

/* The heading was hard coded green, so error notices got a green title.
   It now inherits the variant color. */
.pub-notice h3 {
  margin: 0 0 8px;
  color: inherit;
  font-size: 1rem;
}

.pub-notice p:last-child {
  margin-bottom: 0;
}

.pub-notice.is-success {
  color: var(--frva-green-deep);
  background-color: var(--frva-green-tint);
  border-left-color: var(--frva-green);
}

.pub-notice.is-warning {
  color: var(--frva-gold-deep);
  background-color: var(--frva-gold-tint);
  border-left-color: var(--frva-gold);
}

.pub-notice.is-error {
  color: var(--frva-danger);
  background-color: var(--frva-danger-tint);
  border-left-color: var(--frva-danger);
}

/* --------------------------------------------------------------------------
   Course menu
   Palette roles: Navy for category chrome, Adventure Blue for the open
   category, Premium Green for anything finished, Campfire Orange for anything
   in progress or under the cursor, Sunrise Gold for structural rules.
   -------------------------------------------------------------------------- */

.cm {
  --cm-surface:      var(--frva-surface);
  --cm-surface-alt:  var(--frva-white);
  --cm-border:       var(--frva-line);
  --cm-text:         var(--frva-ink);
  --cm-muted:        var(--frva-ink-soft);
  --cm-accent:       var(--frva-green);
  --cm-accent-text:  var(--frva-green-deep);
  --cm-accent-soft:  var(--frva-green-tint);
  --cm-focus:        var(--frva-focus);
  --cm-radius:       12px;
  --cm-gap:          10px;

  display: grid;
  gap: var(--cm-gap);
  color: var(--cm-text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  margin-top: 10px;
}

.cm *,
.cm *::before,
.cm *::after { box-sizing: border-box; }

/* Category */
.cm__category {
  background: var(--cm-surface);
  border: 1px solid var(--frva-navy);
  border-radius: var(--cm-radius);
  overflow: hidden;
}

.cm__header,
.cm__subheader {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.cm__header::-webkit-details-marker,
.cm__subheader::-webkit-details-marker { display: none; }

.cm__header {
  padding: 14px 16px;
  color: var(--frva-on-dark);
  background: var(--frva-navy);
  transition: background-color 200ms ease;
}

/* Open category shifts Navy to Adventure Blue and grows a gold rule */
.cm__category[open] > .cm__header {
  background: var(--frva-blue);
  border-bottom: 2px solid var(--frva-rule);
}

.cm__header:hover { background: var(--frva-blue); }

.cm__header-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.cm__header .cm__name {
  color: var(--frva-on-dark);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.cm__name { min-width: 0; overflow-wrap: anywhere; }

.cm__count {
  color: var(--cm-muted);
  font-size: 0.83em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cm__header .cm__count {
  color: rgba(250, 249, 246, 0.78);
}

/* Chevron */
.cm__chevron {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 180ms ease;
}

.cm__header .cm__chevron { color: var(--frva-gold); }
.cm__subheader .cm__chevron { color: var(--frva-ink-soft); }

details[open] > summary > .cm__chevron { transform: rotate(45deg); }

/* Segmented rail: one segment per subcategory, filled when it is finished */
.cm__rail { display: flex; gap: 3px; flex: none; }

.cm__segment {
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: rgba(250, 249, 246, 0.3);
}

.cm__segment.is-filled { background: var(--frva-green); }

.cm__category.is-complete .cm__segment.is-filled { background: var(--frva-gold); }

.cm__panel {
  padding: 12px 16px 16px;
  display: grid;
  gap: 8px;
  background: var(--frva-white);
}

.cm__description {
  margin: 0 0 4px;
  color: var(--cm-muted);
  font-size: 0.87em;
}

/* Subcategory */
.cm__subcategory {
  border: 1px solid var(--cm-border);
  border-radius: var(--frva-radius-sm);
  background: var(--cm-surface);
}

.cm__subheader {
  padding: 10px 12px;
  border-radius: var(--frva-radius-sm);
  transition: background-color 200ms ease;
}

.cm__subheader:hover { background: var(--frva-orange-tint); }

.cm__subcategory[open] > .cm__subheader {
  border-bottom: 1px solid var(--frva-rule);
  border-radius: var(--frva-radius-sm) var(--frva-radius-sm) 0 0;
}

.cm__subcategory .cm__name {
  flex: 1;
  font-weight: 550;
  font-size: 0.95em;
}

.cm__subcategory.is-complete > .cm__subheader .cm__name { color: var(--cm-accent-text); }

.cm__badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cm-accent-soft);
  color: var(--cm-accent-text);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Lessons */
.cm__lessons {
  margin: 0;
  padding: 4px;
  list-style: none;
  display: grid;
  gap: 1px;
}

.cm__lesson-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

a.cm__lesson-link:hover {
  background: var(--frva-orange-tint);
  box-shadow: inset 3px 0 0 var(--frva-orange);
}

a.cm__lesson-link:hover .cm__lesson-name {
  color: var(--frva-orange-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cm__lesson-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.93em;
}

.cm__marker {
  flex: none;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid #C7CEd6;
  color: var(--frva-white);
}

.cm__marker--complete {
  background: var(--frva-green);
  border-color: var(--frva-green);
}

.cm__marker--started {
  border-color: var(--frva-orange);
  border-style: dashed;
}

.cm__status {
  flex: none;
  color: var(--cm-muted);
  font-size: 0.75em;
  white-space: nowrap;
}

.cm__lesson.is-complete .cm__status { color: var(--cm-accent-text); }
.cm__lesson.is-started  .cm__status { color: var(--frva-orange-deep); }

.cm__empty {
  margin: 0;
  padding: 8px 2px;
  color: var(--cm-muted);
  font-size: 0.87em;
}

/* --------------------------------------------------------------------------
   Focus and motion
   -------------------------------------------------------------------------- */

.frva-university-body a:focus-visible,
.cm summary:focus-visible,
.cm a.cm__lesson-link:focus-visible {
  outline: 2px solid var(--frva-focus);
  outline-offset: -2px;
}

.cm__header:focus-visible {
  outline-color: var(--frva-gold);
}


.achievements-list {
	background-color: var(--frva-white);
	min-height: 274px;
}

.lesson-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.lesson-header > .lesson-title {
  margin: 0 !important;   /* replaces the inline margin-left override */
  min-width: 0;
  overflow-wrap: anywhere;
}

/* `a.` needed to outrank .univ-main-content a:not(.cm *), which would
   otherwise repaint the label Adventure Blue. */
a.uni-quiz-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  color: #FAF9F6 !important;
  background: #F26B38 !important;
  border: 1px solid #FAF9F6;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(11, 47, 79, 0.18);
  transition:
    background-color 180ms ease,
    border-color     180ms ease,
    box-shadow       180ms ease,
    transform        120ms ease;
}

a.uni-quiz-btn-alt {
	color: #FAF9F6 !important;
	background: #5E9F3A !important;
}

a.uni-quiz-btn:hover,
a.uni-quiz-btn:focus-visible {
  background: #F4B942 !important;
  border-color: #FAF9F6;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(11, 47, 79, 0.26);
}

a.uni-quiz-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(11, 47, 79, 0.22);
}

a.uni-quiz-btn:focus-visible {
  outline: 2px solid var(--frva-focus);
  outline-offset: 2px;
}

a.uni-quiz-btn-alt:hover {
	background: #0F4C81 !important;
}

/* Chevron nudges forward on hover to signal "go" */
.uni-quiz-btn__arrow {
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 180ms ease;
}

a.uni-quiz-btn:hover .uni-quiz-btn__arrow {
  transform: rotate(-45deg) translate(2px, 2px);
}

/* --------------------------------------------------------------------------
   Quiz
   -------------------------------------------------------------------------- */

.uni-quiz { display: grid; gap: 20px; }
.uni-passed { display: grid; gap: 20px; }

.uni-quiz__head { display: grid; gap: 4px; }

.uni-quiz__eyebrow {
  margin: 0;
  color: var(--frva-orange-deep) !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.uni-quiz__title { margin: 0 !important; }

.uni-quiz__meta {
  margin: 0;
  color: var(--frva-ink-soft) !important;
  font-size: 0.85rem;
}

.uni-quiz__list {
  margin: 0;
  padding: 0;
  list-style: none;   /* the number lives in the legend so it can sit inside the card */
  display: grid;
  gap: 14px;
}

.uni-quiz__item { margin: 0; }

/* Question card */
.uni-question {
  margin: 0;
  padding: 0;
  border: 1px solid var(--frva-line);
  border-left: 4px solid var(--frva-navy);
  border-radius: var(--frva-radius-sm);
  background: var(--frva-surface);
}

.uni-question__legend {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  float: left;   /* legend ignores display:flex in Chrome/Safari without this */
  margin: 0;
  padding: 13px 16px;
  color: var(--frva-navy);
  background: var(--frva-navy-tint);
  border-bottom: 1px solid var(--frva-line);
  border-radius: var(--frva-radius-sm) var(--frva-radius-sm) 0 0;
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.4;
}

.uni-question__number {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--frva-navy);
  color: var(--frva-white);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.uni-question__text { min-width: 0; overflow-wrap: anywhere; }

/* Answers */
.uni-answers {
  clear: both;   /* clears the floated legend */
  margin: 0;
  padding: 8px;
  list-style: none;
  display: grid;
  gap: 4px;
}

.uni-answers__item { position: relative; margin: 0; }

/* Input stays in the a11y tree and drives the label's styling. */
.uni-answer__input {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

.uni-answer {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--frva-ink) !important;
  font-size: 0.93rem;
  line-height: 1.45;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.uni-answer:hover {
  background: var(--frva-orange-tint);
  border-color: var(--frva-orange);
}

.uni-answer__dot {
  flex: none;
  position: relative;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  border: 1.5px solid #C7CED6;
  border-radius: 50%;
  background: var(--frva-surface);
  transition: border-color 160ms ease;
}

.uni-answer:hover .uni-answer__dot { border-color: var(--frva-orange); }

.uni-answer__dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--frva-orange);
  transform: scale(0);
  transition: transform 160ms ease;
}

.uni-answer__input:checked + .uni-answer {
  background: var(--frva-gold-tint);
  border-color: var(--frva-gold);
  font-weight: 550;
}

.uni-answer__input:checked + .uni-answer .uni-answer__dot {
  border-color: var(--frva-orange-deep);
}

.uni-answer__input:checked + .uni-answer .uni-answer__dot::after { transform: scale(1); }

.uni-answer__input:focus-visible + .uni-answer {
  outline: 2px solid var(--frva-focus);
  outline-offset: -1px;
}

.uni-answer__text { min-width: 0; overflow-wrap: anywhere; }

/* Actions */
.uni-quiz__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}

.uni-quiz__note {
  margin: 0;
  color: var(--frva-ink-soft) !important;
  font-size: 0.82rem;
}

/* Reuses the Take Quiz pill; button element needs its own selector. */
button.uni-quiz-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  color: var(--frva-white);
  background: var(--frva-orange-deep);
  border: 1px solid var(--frva-orange-deep);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(11, 47, 79, 0.18);
  transition: background-color 180ms ease, border-color 180ms ease,
              box-shadow 180ms ease, transform 120ms ease;
}

button.uni-quiz-btn:hover {
  background: var(--frva-navy);
  border-color: var(--frva-gold);
  box-shadow: 0 3px 8px rgba(11, 47, 79, 0.26);
}

button.uni-quiz-btn:active { transform: translateY(1px); }

button.uni-quiz-btn:focus-visible {
  outline: 2px solid var(--frva-focus);
  outline-offset: 2px;
}

button.uni-quiz-btn:hover .uni-quiz-btn__arrow {
  transform: rotate(-45deg) translate(2px, 2px);
}

.uni-question.is-wrong,
.uni-question.is-missing {
  border-left-color: var(--frva-danger);
  border-color: var(--frva-danger);
}

.uni-question.is-wrong > .uni-question__legend,
.uni-question.is-missing > .uni-question__legend {
  color: var(--frva-danger);
  background: var(--frva-danger-tint);
  border-bottom-color: var(--frva-danger);
}

.uni-question.is-wrong .uni-question__number,
.uni-question.is-missing .uni-question__number {
  background: var(--frva-danger);
}

.uni-question__flag {
  flex: none;
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--frva-danger);
  color: var(--frva-white);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.frva-heading-identity {
  display: grid;
  gap: 5px;
  justify-items: start;
  min-width: 0;
}

/* The heading rule targets direct children of .frva-heading-inner, so the
   nested h3 needs its own reset. */
.frva-heading-identity > h3 {
  margin: 0;
  color: var(--frva-on-dark);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.uni-score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 11px 3px 5px;
  border-radius: 999px;
  background: rgba(244, 185, 66, 0.16);
  border: 1px solid var(--frva-gold);
  color: var(--frva-gold) !important;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.uni-score__icon {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--frva-gold);
  color: var(--frva-navy);
}

.uni-score__value {
  font-weight: 700;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.uni-score__label { font-weight: 500; }

.uni-passed__head {
  display: grid;
  justify-items: center;   /* centers the eyebrow and title too */
  gap: 8px;
  text-align: center;
}

.uni-home-div{
	margin-top:10px;
}

.uni-home-div > ul {
	margin-left: 10px;
}

.uni-home-div > ul > li {
	margin-bottom: 10px;
}

.uni-library-div{
	margin-top: 10px;
}

.uni-libsearch {
  display: grid;
  gap: 18px;
  padding: 20px;
  background: var(--frva-surface);
  border: 1px solid var(--frva-line);
  border-radius: var(--frva-radius);
}
 
/* Head ---------------------------------------------------------------- */
 
.uni-libsearch__head {
  display: grid;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--frva-line);
}
 
.uni-libsearch__eyebrow {
  margin: 0;
  color: var(--frva-orange-deep) !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
 
.uni-libsearch__title {
  margin: 0 !important;
  font-size: 1.25rem;
  line-height: 1.25;
}
 
.uni-libsearch__lede {
  margin: 0;
  max-width: 56ch;
  color: var(--frva-ink-soft) !important;
  font-size: 0.85rem;
}
 
/* Fields --------------------------------------------------------------- */
 
.uni-libsearch__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
 
.uni-libsearch__field {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
}
 
.uni-libsearch__field--full {
  grid-column: 1 / -1;
}
 
.uni-libsearch__label {
  color: var(--frva-navy);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
 
.uni-libsearch__control {
  width: 100%;
  padding: 10px 12px;
  color: var(--frva-ink);
  background: var(--frva-surface);
  border: 1px solid var(--frva-line);
  border-radius: var(--frva-radius-sm);
  font-family: inherit;
  font-size: 0.93rem;
  line-height: 1.45;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
 
/* Custom arrow so both selects match across browsers. Stroke is
   --frva-ink-soft, url encoded. */
select.uni-libsearch__control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235A7085' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
 
/* Locked: the subcategory select before a category is chosen. The inset rail
   is the signal, so nothing reflows when it opens. */
.uni-libsearch__control:disabled {
  color: var(--frva-ink-soft);
  background-color: var(--frva-navy-tint);
  box-shadow: inset 3px 0 0 var(--frva-line);
  cursor: not-allowed;
}
 
/* Unlocked: gold rail, matching ul.uni-nav-list > li > a.is-active */
select.uni-libsearch__control[data-unlocked] {
  box-shadow: inset 3px 0 0 var(--frva-gold);
}
 
/* Campfire Orange marks whatever the pointer or keyboard is on */
.uni-libsearch__control:hover:not(:disabled) {
  border-color: var(--frva-orange);
  box-shadow: inset 3px 0 0 var(--frva-orange);
}
 
.uni-libsearch__control:focus-visible {
  outline: 2px solid var(--frva-focus);
  outline-offset: 2px;
  border-color: var(--frva-orange);
}
 
.uni-libsearch__hint {
  margin: 0;
  color: var(--frva-ink-soft) !important;
  font-size: 0.78rem;
  line-height: 1.4;
}
 
.uni-libsearch__hint[data-state="ready"] {
  color: var(--frva-gold-deep) !important;
}
 
/* Actions -------------------------------------------------------------- */
 
.uni-libsearch__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--frva-line);
}
 
.uni-libsearch__count {
  margin: 0 auto 0 0;
  color: var(--frva-ink-soft) !important;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
 
/* Submit reuses button.uni-quiz-btn. This is the quiet partner to it. */
button.uni-libsearch__clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  color: var(--frva-navy);
  background: transparent;
  border: 1px solid var(--frva-line);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
 
button.uni-libsearch__clear:hover {
  color: var(--frva-orange-deep);
  background: var(--frva-orange-tint);
  border-color: var(--frva-orange);
}
 
button.uni-libsearch__clear:focus-visible {
  outline: 2px solid var(--frva-focus);
  outline-offset: 2px;
}

.uni-libsearch-results {
  margin-top: 18px;
}
 
.uni-libsearch-results__count {
  margin: 0 0 6px;
  color: var(--cm-muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
 
.uni-libsearch-results .cm__lessons {
  padding: 0;
  gap: 0;
  border: 1px solid var(--cm-border);
  border-radius: var(--frva-radius-sm);
  overflow: hidden;
}
 
.uni-libsearch-results .cm__lesson {
  border-bottom: 1px solid var(--cm-border);
}
 
.uni-libsearch-results .cm__lesson:last-child {
  border-bottom: 0;
}
 
.uni-libsearch-results .cm__lesson-link {
  align-items: flex-start;
  padding: 11px 12px;
  border-radius: 0;
}
 
/* Stacks the title over the category trail. .cm__lesson-name keeps its own
   flex: 1, which is harmless once it is a grid item. */
.cm__lesson-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
 
.cm__lesson-path {
  color: var(--cm-muted);
  font-size: 0.76em;
  overflow-wrap: anywhere;
}
 
a.cm__lesson-link:hover .cm__lesson-path {
  color: var(--frva-orange-deep);
}
 
.uni-libsearch-results .cm__marker {
  margin-top: 2px;
}
 
.uni-libsearch-results .cm__status {
  margin-top: 2px;
}
 
/* Search term match. Gold tint matches the active state used elsewhere. */
.cm__lesson-hit {
  padding: 0 1px;
  color: inherit;
  background: var(--frva-gold-tint);
  box-shadow: inset 0 -2px 0 var(--frva-gold);
  border-radius: 2px;
}



.loader {
  --ld-color-1: #FAF9F6 !important;
  --ld-color-2: #F26B38 !important;
  --ld-size: 1px;
   margin-inline: auto;

  width: calc(64 * var(--ld-size));
  height: calc(64 * var(--ld-size));
  position: relative;
  background: var(--ld-color-1);
  border-radius: 50%;
  transform: rotate(45deg);
  animation: rotate 2s linear infinite;
}
.loader:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(15 * var(--ld-size));
  height: calc(30 * var(--ld-size));
  background: var(--ld-color-2);
  transform: skew(5deg, 60deg) translate(-50%, -5%);
}

.loader:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(6 * var(--ld-size));
  height: calc(6 * var(--ld-size));
  border-radius: 50%;
  background: var(--ld-color-1);
  transform: translate(-50%, -50%);
}

@keyframes rotate {
  0% {
    transform: rotate(45deg);
  }
  30%,
  50%,
  70% {
    transform: rotate(230deg);
  }
  40%,
  60%,
  80% {
    transform: rotate(240deg);
  }
  100% {
    transform: rotate(245deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cm__chevron,
  .cm__lesson-link,
  .cm__header,
  .cm__subheader,
  ul.uni-nav-list > li > a {
    transition: none;
  }
  a.uni-quiz-btn,
  .uni-quiz-btn__arrow { transition: none; }
  a.uni-quiz-btn:active { transform: none; }
  a.uni-quiz-btn:hover .uni-quiz-btn__arrow { transform: rotate(-45deg); }
  .uni-answer,
  .uni-answer__dot,
  .uni-answer__dot::after,
  button.uni-quiz-btn { transition: none; }
  button.uni-quiz-btn:active { transform: none; }
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .frva-university-body { flex-wrap: wrap; gap: 0; }

  .frva-university-column-1,
  .frva-university-column-2 {
    flex-basis: 100%;
    width: auto;
  }

  /* Stacked layout collapses vertically instead of horizontally. */
  .frva-university-column-1 {
    max-height: 1500px;
    transition:
      max-height var(--uni-slide) ease,
      margin     var(--uni-slide) ease,
      opacity    240ms ease;
  }

  .frva-university-column-1.is-collapsed {
    flex-basis: 100%;
    width: auto;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  .uni-sidebar-inner { width: 100%; }

  .uni-toggle {
    flex: 0 0 100%;
    width: auto;
    height: 26px;
    align-self: auto;
    margin: 0 5px 5px;
    border-radius: var(--frva-radius-sm);
  }

  /* Lesson content leads on narrow screens; each handle sits above its panel. */
  .frva-university-column-2 { order: 0; }
  .uni-toggle--left         { order: 1; }
  .left-sidebar             { order: 2; }
  .uni-toggle--right        { order: 3; }
  .right-sidebar            { order: 4; }

  .uni-toggle--left  .uni-toggle__chevron,
  .uni-toggle--right .uni-toggle__chevron { transform: rotate(-135deg); }

  .uni-toggle--left[aria-expanded="false"]  .uni-toggle__chevron,
  .uni-toggle--right[aria-expanded="false"] .uni-toggle__chevron { transform: rotate(45deg); }

  .univ-main-content { max-height: none; }
  ul.uni-nav-list { max-height: 260px; }
  .uni-libsearch__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .frva-university-column-1,
  .uni-toggle,
  .uni-toggle__chevron {
    transition: none;
  }
    .uni-libsearch__control,
  button.uni-libsearch__clear { transition: none; }

}

@media (max-width: 480px) {
  .frva-university-heading { justify-content: center; text-align: center; }
  .cm__rail { display: none; }
  .cm__status { display: none; }
  .lesson-header { flex-direction: column; align-items: stretch; }
  a.uni-quiz-btn { justify-content: center; padding: 12px 18px; }
  .uni-quiz__actions { flex-direction: column; align-items: stretch; }
  button.uni-quiz-btn { justify-content: center; padding: 13px 20px; }
  .uni-answer { padding: 12px; }   /* larger tap target */
  .frva-heading-identity { justify-items: center; }
    .uni-libsearch { padding: 14px; }
 
  .uni-libsearch__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
 
  .uni-libsearch__count {
    margin: 0;
    text-align: center;
  }
 
  button.uni-libsearch__clear {
    justify-content: center;
    padding: 13px 20px;
  }
  .uni-libsearch-results .cm__lesson-link { padding: 12px; }
}