/* ---------- Buttons ---------- */

.uc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--uc-space-8);
  min-height: var(--uc-control-height);
  padding: var(--uc-space-12) var(--uc-space-20);
  border: var(--uc-border-width) solid transparent;
  border-radius: var(--uc-radius-md);
  background-color: var(--uc-color-accent-solid);
  color: var(--uc-color-text-invert);
  font-size: var(--uc-text-body-sm);
  font-weight: var(--uc-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--uc-shadow-xs);
  transition: background-color var(--uc-duration-instant) var(--uc-ease),
              border-color var(--uc-duration-instant) var(--uc-ease),
              color var(--uc-duration-instant) var(--uc-ease),
              transform var(--uc-duration-instant) var(--uc-ease);
}

.uc-btn:hover {
  background-color: var(--uc-color-accent-solid-hover);
  color: var(--uc-color-text-invert);
}

.uc-btn:active {
  transform: translateY(1px);
}

.uc-btn:disabled,
.uc-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.uc-btn--secondary {
  background-color: transparent;
  border-color: var(--uc-color-border-strong);
  color: var(--uc-color-text);
  box-shadow: none;
}

.uc-btn--secondary:hover {
  background-color: var(--uc-color-surface-sunken);
  border-color: var(--uc-color-border-strong);
  color: var(--uc-color-text);
}

.uc-btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--uc-color-text-muted);
  box-shadow: none;
}

.uc-btn--ghost:hover {
  background-color: var(--uc-color-surface-sunken);
  color: var(--uc-color-text);
}

.uc-btn--danger {
  background-color: transparent;
  border-color: var(--uc-color-danger);
  color: var(--uc-color-danger);
  box-shadow: none;
}

.uc-btn--danger:hover {
  background-color: var(--uc-color-danger-surface);
  color: var(--uc-color-danger);
}

.uc-btn--sm {
  min-height: 32px;
  padding: var(--uc-space-6) var(--uc-space-12);
  font-size: var(--uc-text-caption);
}

.uc-btn--lg {
  min-height: 48px;
  padding: var(--uc-space-16) var(--uc-space-32);
  font-size: var(--uc-text-body);
}

.uc-btn--icon {
  width: var(--uc-target-min);
  height: var(--uc-target-min);
  min-height: var(--uc-target-min);
  padding: 0;
}

.uc-btn--block {
  width: 100%;
}

.uc-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* ---------- Cards ---------- */

.uc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--uc-element-gap);
  padding: var(--uc-card-padding);
  background-color: var(--uc-color-surface);
  border: var(--uc-border-width) solid var(--uc-color-border);
  border-radius: var(--uc-radius-lg);
  box-shadow: var(--uc-shadow-sm);
  transition: box-shadow var(--uc-duration-base) var(--uc-ease),
              background-color var(--uc-duration-base) var(--uc-ease),
              border-color var(--uc-duration-base) var(--uc-ease);
}

.uc-card--interactive:hover {
  box-shadow: var(--uc-shadow-md);
  background-color: var(--uc-color-surface-raised);
  border-color: var(--uc-color-border-strong);
}

.uc-card--flush {
  overflow: hidden;
  padding-bottom: calc(var(--uc-card-padding) + 3px);
}

.uc-card__title {
  font-size: var(--uc-text-title-sm);
  line-height: var(--uc-leading-title-sm);
  letter-spacing: var(--uc-tracking-title-sm);
  font-weight: var(--uc-weight-semibold);
}

.uc-card__meta {
  font-size: var(--uc-text-body-sm);
  line-height: var(--uc-leading-body-sm);
  color: var(--uc-color-text-muted);
}

.uc-card__footer {
  margin-top: auto;
  padding-top: var(--uc-space-4);
}

/* ---------- Metric card ---------- */

.uc-metric__label {
  font-size: var(--uc-text-body-sm);
  color: var(--uc-color-text-muted);
}

.uc-metric__value {
  font-size: var(--uc-text-metric);
  line-height: var(--uc-leading-metric);
  letter-spacing: var(--uc-tracking-metric);
  font-weight: var(--uc-weight-black);
  color: var(--uc-color-text);
}

.uc-metric__delta {
  font-size: var(--uc-text-caption);
  color: var(--uc-color-text-muted);
}

.uc-metric__delta--up {
  color: var(--uc-color-success);
}

/* ---------- Progress rail ---------- */

.uc-rail {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: var(--uc-radius-full);
  background-color: var(--uc-color-border);
  overflow: hidden;
}

.uc-rail__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-color: var(--uc-color-accent-solid);
  transition: width var(--uc-duration-base) var(--uc-ease);
}

.uc-rail--flush {
  position: absolute;
  inset: auto 0 0 0;
  width: auto;
  border-radius: 0;
}

/* ---------- Chips ---------- */

.uc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--uc-space-6);
  /* A chip is a compact label, so it sizes to its content even when a flex or
     grid parent stretches its items; max-width keeps it inside that parent. */
  width: fit-content;
  max-width: 100%;
  padding: var(--uc-space-6) var(--uc-space-12);
  border-radius: var(--uc-radius-full);
  background-color: var(--uc-color-surface-sunken);
  color: var(--uc-color-text-muted);
  font-size: var(--uc-text-caption);
  line-height: var(--uc-leading-caption);
  letter-spacing: var(--uc-tracking-caption);
  font-weight: var(--uc-weight-medium);
  white-space: nowrap;
}

.uc-chip__dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: var(--uc-radius-full);
  background-color: currentColor;
}

.uc-chip svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.uc-chip--success {
  background-color: var(--uc-color-success-surface);
  color: var(--uc-color-success);
}

.uc-chip--warning {
  background-color: var(--uc-color-warning-surface);
  color: var(--uc-color-warning);
}

.uc-chip--danger {
  background-color: var(--uc-color-danger-surface);
  color: var(--uc-color-danger);
}

/* Deadline chip — fill is a function of time remaining, not of category. */

.uc-deadline--calm {
  background-color: var(--uc-color-surface-sunken);
  color: var(--uc-color-text-muted);
}

.uc-deadline--soon {
  background-color: var(--uc-color-warning-surface);
  color: var(--uc-color-warning);
}

.uc-deadline--urgent {
  background-color: var(--uc-color-surface-accent);
  color: var(--uc-color-deadline-urgent);
}

.uc-deadline--overdue {
  background-color: var(--uc-color-danger-surface);
  color: var(--uc-color-danger);
}

/* ---------- Grade chip ---------- */

.uc-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: var(--uc-border-width) solid var(--uc-color-border);
  border-radius: var(--uc-radius-sm);
  background-color: var(--uc-color-surface-sunken);
  color: var(--uc-color-text);
  font-family: var(--uc-font-mono);
  font-size: var(--uc-text-title-sm);
  font-weight: var(--uc-weight-medium);
  line-height: 1;
}

.uc-grade--wide {
  width: auto;
  min-width: 56px;
  padding-inline: var(--uc-space-8);
  font-size: var(--uc-text-body);
}

/* ---------- Avatar ---------- */

.uc-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--uc-radius-full);
  background-color: var(--uc-color-surface-sunken);
  border: var(--uc-border-width) solid var(--uc-color-border);
  color: var(--uc-color-text-muted);
  font-size: var(--uc-text-caption);
  font-weight: var(--uc-weight-semibold);
}

.uc-avatar--sm {
  width: 26px;
  height: 26px;
  font-size: var(--uc-text-micro);
}

/* ---------- Forms ---------- */

.uc-field {
  display: flex;
  flex-direction: column;
  gap: var(--uc-space-8);
}

.uc-label {
  font-size: var(--uc-text-body-sm);
  font-weight: var(--uc-weight-medium);
  color: var(--uc-color-text);
}

.uc-input,
.uc-select,
.uc-textarea {
  width: 100%;
  min-height: var(--uc-control-height);
  padding: var(--uc-space-12) 14px;
  background-color: var(--uc-color-surface);
  border: var(--uc-border-width) solid var(--uc-color-border-strong);
  border-radius: var(--uc-radius-md);
  color: var(--uc-color-text);
  font-size: var(--uc-text-body);
  transition: border-color var(--uc-duration-fast) var(--uc-ease),
              box-shadow var(--uc-duration-fast) var(--uc-ease);
}

.uc-textarea {
  resize: vertical;
  min-height: 96px;
}

.uc-select {
  appearance: none;
  padding-inline-end: var(--uc-space-40);
  cursor: pointer;
}

.uc-select-wrap {
  position: relative;
  display: block;
}

.uc-select-wrap__chevron {
  position: absolute;
  top: 50%;
  inset-inline-end: 14px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--uc-color-text-muted);
  pointer-events: none;
}

.uc-input::placeholder,
.uc-textarea::placeholder {
  color: var(--uc-color-text-subtle);
}

.uc-input:focus,
.uc-select:focus,
.uc-textarea:focus {
  outline: none;
  border-color: var(--uc-color-focus);
  box-shadow: var(--uc-shadow-focus);
}

.uc-input:disabled,
.uc-textarea:disabled,
.uc-select:disabled {
  background-color: var(--uc-color-surface-sunken);
  color: var(--uc-color-text-subtle);
  cursor: not-allowed;
}

.uc-hint {
  font-size: var(--uc-text-caption);
  color: var(--uc-color-text-muted);
}

.uc-field--error .uc-input,
.uc-field--error .uc-textarea,
.uc-field--error .uc-select {
  border-color: var(--uc-color-danger);
}

.uc-field--error .uc-input:focus,
.uc-field--error .uc-textarea:focus {
  box-shadow: 0 0 0 3px var(--uc-color-danger-surface);
}

.uc-error {
  display: flex;
  align-items: center;
  gap: var(--uc-space-6);
  font-size: var(--uc-text-body-sm);
  font-weight: var(--uc-weight-medium);
  color: var(--uc-color-danger);
}

.uc-error svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.uc-choice {
  display: flex;
  align-items: center;
  gap: var(--uc-space-12);
  min-height: var(--uc-target-min);
  cursor: pointer;
  font-size: var(--uc-text-body-sm);
}

.uc-choice input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--uc-color-accent-solid);
  cursor: pointer;
}

/* ---------- Menu — the shared popover panel for dropdowns ---------- */

.uc-menu {
  min-width: 200px;
  padding: var(--uc-space-4);
  background-color: var(--uc-color-surface-raised);
  border: var(--uc-border-width) solid var(--uc-color-border);
  border-radius: var(--uc-radius-md);
  box-shadow: var(--uc-shadow-popover);
  list-style: none;
  margin: 0;
}

.uc-menu[hidden] {
  display: none;
}

.uc-dropdown {
  position: relative;
  display: inline-block;
}

.uc-dropdown > .uc-menu {
  position: absolute;
  z-index: var(--uc-z-dropdown);
  top: calc(100% + var(--uc-space-4));
  inset-inline-start: 0;
}

.uc-dropdown--end > .uc-menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.uc-dropdown[data-placement="top"] > .uc-menu {
  top: auto;
  bottom: calc(100% + var(--uc-space-4));
}

.uc-menu:not([hidden]) {
  animation: uc-menu-in var(--uc-duration-base) var(--uc-ease);
}

@keyframes uc-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
}

.uc-menu__label {
  padding: var(--uc-space-8) var(--uc-space-12) var(--uc-space-4);
  color: var(--uc-color-text-subtle);
  font-size: var(--uc-text-micro);
  font-weight: var(--uc-weight-semibold);
  letter-spacing: var(--uc-tracking-micro);
  text-transform: uppercase;
}

.uc-menu__sep {
  height: var(--uc-border-width);
  margin: var(--uc-space-4) 0;
  background-color: var(--uc-color-border);
}

.uc-menu__item {
  display: flex;
  align-items: center;
  gap: var(--uc-space-12);
  width: 100%;
  min-height: 40px;
  padding: var(--uc-space-8) var(--uc-space-12);
  border-radius: var(--uc-radius-sm);
  background: none;
  color: var(--uc-color-text);
  font-size: var(--uc-text-body-sm);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--uc-duration-instant) var(--uc-ease);
}

/* Menu rows sit at 40px for a mouse; touch gets the system's full 44px minimum. */
@media (pointer: coarse) {
  .uc-menu__item {
    min-height: var(--uc-target-min);
  }
}

.uc-menu__item:hover,
.uc-menu__item[data-active] {
  background-color: var(--uc-color-surface-sunken);
  color: var(--uc-color-text);
}

.uc-menu__item[aria-selected="true"] {
  color: var(--uc-color-accent);
  font-weight: var(--uc-weight-semibold);
}

.uc-menu__item[aria-disabled="true"] {
  color: var(--uc-color-text-subtle);
  cursor: not-allowed;
}

.uc-menu__item--danger {
  color: var(--uc-color-danger);
}

.uc-menu__item--danger:hover {
  background-color: var(--uc-color-danger-surface);
  color: var(--uc-color-danger);
}

.uc-menu__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uc-menu__icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.uc-menu__check {
  width: 16px;
  height: 16px;
  flex: none;
  opacity: 0;
}

.uc-menu__item[aria-selected="true"] .uc-menu__check {
  opacity: 1;
}

.uc-menu__shortcut {
  flex: none;
  font-family: var(--uc-font-mono);
  font-size: var(--uc-text-micro);
  color: var(--uc-color-text-subtle);
}

/* ---------- Selectbox — custom listbox for styled options ---------- */

.uc-selectbox {
  position: relative;
  display: block;
}

.uc-selectbox__trigger {
  display: flex;
  align-items: center;
  gap: var(--uc-space-12);
  width: 100%;
  min-height: var(--uc-control-height);
  padding: var(--uc-space-12) 14px;
  background-color: var(--uc-color-surface);
  border: var(--uc-border-width) solid var(--uc-color-border-strong);
  border-radius: var(--uc-radius-md);
  color: var(--uc-color-text);
  font-size: var(--uc-text-body);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--uc-duration-fast) var(--uc-ease),
              box-shadow var(--uc-duration-fast) var(--uc-ease);
}

.uc-selectbox__trigger:disabled {
  background-color: var(--uc-color-surface-sunken);
  color: var(--uc-color-text-subtle);
  cursor: not-allowed;
}

.uc-selectbox__trigger:focus-visible {
  outline: none;
  border-color: var(--uc-color-focus);
  box-shadow: var(--uc-shadow-focus);
}

.uc-selectbox[data-invalid] .uc-selectbox__trigger {
  border-color: var(--uc-color-danger);
}

.uc-selectbox[data-invalid] .uc-selectbox__trigger:focus-visible {
  box-shadow: 0 0 0 3px var(--uc-color-danger-surface);
}

.uc-selectbox[data-open] .uc-selectbox__trigger {
  border-color: var(--uc-color-focus);
  box-shadow: var(--uc-shadow-focus);
}

.uc-selectbox__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uc-selectbox__value[data-placeholder] {
  color: var(--uc-color-text-subtle);
}

.uc-selectbox__chevron {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--uc-color-text-muted);
  transition: transform var(--uc-duration-fast) var(--uc-ease);
}

.uc-selectbox[data-open] .uc-selectbox__chevron {
  transform: rotate(180deg);
}

.uc-selectbox__panel {
  position: absolute;
  z-index: var(--uc-z-dropdown);
  top: calc(100% + var(--uc-space-4));
  inset-inline: 0;
  max-height: 280px;
  overflow-y: auto;
}

/* The native field remains the form value source, but validation is presented on the trigger. */
.uc-selectbox__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.uc-selectbox__error {
  margin-top: var(--uc-space-8);
}

.uc-selectbox__error[hidden] {
  display: none;
}

.uc-selectbox[data-placement="top"] .uc-selectbox__panel {
  top: auto;
  bottom: calc(100% + var(--uc-space-4));
}

/* ---------- Tooltip — hover label for icon-only and abbreviated controls ---------- */

.uc-tip {
  position: relative;
}

/* Fine pointers only. On touch there is no hover, and a tap must open the
   control rather than summon a label the user then has to dismiss. */
@media (hover: hover) and (pointer: fine) {
  .uc-tip::after {
    content: attr(data-uc-tip);
    position: absolute;
    z-index: var(--uc-z-dropdown);
    inset-block-start: calc(100% + var(--uc-space-8));
    inset-inline-start: 50%;
    width: max-content;
    max-width: 220px;
    padding: var(--uc-space-6) var(--uc-space-12);
    border: var(--uc-border-width) solid var(--uc-color-border);
    border-radius: var(--uc-radius-sm);
    background-color: var(--uc-color-surface-raised);
    box-shadow: var(--uc-shadow-popover);
    color: var(--uc-color-text);
    font-family: var(--uc-font-sans);
    font-size: var(--uc-text-caption);
    font-weight: var(--uc-weight-medium);
    line-height: var(--uc-leading-caption);
    letter-spacing: var(--uc-tracking-caption);
    text-align: center;
    text-transform: none;
    white-space: normal;
    translate: calc(-50% * var(--uc-inline-sign, 1)) -4px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--uc-duration-fast) var(--uc-ease),
      translate var(--uc-duration-fast) var(--uc-ease),
      visibility 0s linear var(--uc-duration-fast);
  }

  .uc-tip--top::after {
    inset-block-start: auto;
    inset-block-end: calc(100% + var(--uc-space-8));
    translate: calc(-50% * var(--uc-inline-sign, 1)) 4px;
  }

  .uc-tip--start::after {
    inset-inline-start: 0;
    translate: 0 -4px;
  }

  .uc-tip--end::after {
    inset-inline-start: auto;
    inset-inline-end: 0;
    translate: 0 -4px;
  }

  .uc-tip--side::after {
    inset-block-start: 50%;
    inset-inline-start: calc(100% + var(--uc-space-8));
    translate: calc(-4px * var(--uc-inline-sign, 1)) -50%;
  }

  /* Truncation reveal: above the row, and positioned against the viewport rather
     than the row, because these lists sit inside containers that clip — the course
     outline scrolls, uc-panel is overflow:hidden. An absolutely positioned tip
     would be cut off by both. Coordinates come from placeFloatingTip() on hover. */
  /* --uc-tip-x is a viewport x coordinate, so it is placed from the physical left. */
  .uc-tip--float::after {
    position: fixed;
    inset-block-start: var(--uc-tip-y, 0);
    inset-inline-start: auto;
    left: var(--uc-tip-x, 50%);
    translate: -50% calc(-100% - 4px);
  }

  .uc-tip:hover::after,
  .uc-tip:focus-visible::after {
    translate: calc(-50% * var(--uc-inline-sign, 1)) 0;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .uc-tip--start:hover::after,
  .uc-tip--start:focus-visible::after,
  .uc-tip--end:hover::after,
  .uc-tip--end:focus-visible::after {
    translate: 0 0;
  }

  .uc-tip--side:hover::after,
  .uc-tip--side:focus-visible::after {
    translate: 0 -50%;
  }

  .uc-tip--float:hover::after,
  .uc-tip--float:focus-visible::after {
    translate: -50% calc(-100% - var(--uc-space-8));
  }

  /* Escape suppresses tooltips until the pointer moves again — WCAG 1.4.13. */
  [data-uc-tips-off] .uc-tip::after,
  .uc-tip:not([data-uc-tip])::after,
  .uc-tip[data-uc-tip=""]::after {
    display: none;
  }
}

/* ---------- Alerts ---------- */

.uc-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--uc-space-12);
  width: 100%;
  padding: 14px var(--uc-space-16);
  border: var(--uc-border-width) solid var(--uc-color-border);
  border-radius: var(--uc-radius-md);
  background-color: var(--uc-color-neutral-surface);
  color: var(--uc-color-text);
  font-size: var(--uc-text-body-sm);
  line-height: var(--uc-leading-body-sm);
}

/* The class's display would otherwise beat the UA rule for [hidden]. */
.uc-alert[hidden] {
  display: none;
}

.uc-alert__icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--uc-color-text);
}

.uc-alert__content {
  flex: 1;
  min-width: 0;
}

.uc-alert__title {
  font-weight: var(--uc-weight-semibold);
  letter-spacing: -0.005em;
}

.uc-alert__body {
  color: var(--uc-color-text-muted);
  margin-top: var(--uc-space-4);
}

.uc-alert__close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  margin-block: -2px;
  border-radius: var(--uc-radius-sm);
  color: var(--uc-color-text);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity var(--uc-duration-instant) var(--uc-ease);
}

/* Keeps the 44px target without inflating the alert's height. */
.uc-alert__close::after {
  content: '';
  position: absolute;
  inset: -10px;
}

.uc-alert__close:hover {
  opacity: 1;
}

.uc-alert__close svg {
  width: 16px;
  height: 16px;
}

.uc-alert--success {
  background-color: var(--uc-color-success-surface);
  border-color: var(--uc-color-success-border);
}

.uc-alert--success .uc-alert__icon {
  color: var(--uc-color-success);
}

.uc-alert--warning {
  background-color: var(--uc-color-warning-surface);
  border-color: var(--uc-color-warning-border);
}

.uc-alert--warning .uc-alert__icon {
  color: var(--uc-color-warning);
}

.uc-alert--danger {
  background-color: var(--uc-color-danger-surface);
  border-color: var(--uc-color-danger-border);
}

.uc-alert--danger .uc-alert__icon {
  color: var(--uc-color-danger);
}

/* No brand-red alert variant: on a tinted wash it is indistinguishable from --danger. */

/* ---------- Panel — shared chrome for lists and tables ---------- */

.uc-panel {
  background-color: var(--uc-color-surface);
  border: var(--uc-border-width) solid var(--uc-color-border);
  border-radius: var(--uc-radius-lg);
  overflow: hidden;
}

.uc-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uc-space-16);
  padding: var(--uc-space-16) var(--uc-space-20);
  border-bottom: var(--uc-border-width) solid var(--uc-color-border);
}

.uc-panel__title {
  font-size: var(--uc-text-body-sm);
  font-weight: var(--uc-weight-semibold);
}

.uc-panel__meta {
  font-family: var(--uc-font-mono);
  font-size: var(--uc-text-caption);
  color: var(--uc-color-text-muted);
  white-space: nowrap;
}

.uc-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uc-space-16);
  padding: var(--uc-space-12) var(--uc-space-20);
  border-top: var(--uc-border-width) solid var(--uc-color-border);
  background-color: var(--uc-color-surface-sunken);
  font-size: var(--uc-text-body-sm);
  color: var(--uc-color-text-muted);
}

/* ---------- Status indicator — the table-weight alternative to a chip ---------- */

.uc-status {
  display: inline-flex;
  align-items: center;
  gap: var(--uc-space-8);
  color: var(--uc-color-text-muted);
  font-size: var(--uc-text-body-sm);
  white-space: nowrap;
}

.uc-status__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: var(--uc-radius-full);
  background-color: var(--uc-color-text-subtle);
}

.uc-status--success .uc-status__dot {
  background-color: var(--uc-color-success);
}

.uc-status--warning .uc-status__dot {
  background-color: var(--uc-color-warning);
}

.uc-status--danger .uc-status__dot {
  background-color: var(--uc-color-danger);
}

/* ---------- Lesson list ---------- */

.uc-lesson {
  display: flex;
  align-items: center;
  gap: var(--uc-space-16);
  min-height: var(--uc-row-height);
  padding: var(--uc-space-8) var(--uc-space-20);
  border-bottom: var(--uc-border-width) solid var(--uc-color-border);
  border-inline-start: 3px solid transparent;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--uc-duration-instant) var(--uc-ease);
}

.uc-lesson:last-child {
  border-bottom: 0;
}

.uc-lesson:hover {
  background-color: var(--uc-color-surface-sunken);
  color: inherit;
}

/* A slot that holds either a state icon or the lesson's position in the module. */
.uc-lesson__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--uc-color-text-subtle);
  font-family: var(--uc-font-mono);
  font-size: var(--uc-text-caption);
}

.uc-lesson__marker svg {
  width: 20px;
  height: 20px;
}

.uc-lesson__title {
  flex: 1;
  min-width: 0;
  font-size: var(--uc-text-body-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uc-lesson__duration {
  flex: none;
  font-family: var(--uc-font-mono);
  font-size: var(--uc-text-caption);
  font-variant-numeric: tabular-nums;
  color: var(--uc-color-text-subtle);
}

.uc-lesson__chevron {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--uc-color-text-subtle);
}

.uc-lesson--done .uc-lesson__marker {
  color: var(--uc-color-success);
}

.uc-lesson--done .uc-lesson__title {
  color: var(--uc-color-text-muted);
}

.uc-lesson--current {
  background-color: var(--uc-color-surface-accent);
  border-inline-start-color: var(--uc-color-accent-solid);
}

.uc-lesson--current:hover {
  background-color: var(--uc-color-surface-accent);
}

.uc-lesson--current .uc-lesson__marker {
  color: var(--uc-color-accent);
}

.uc-lesson--current .uc-lesson__title {
  font-weight: var(--uc-weight-semibold);
}

.uc-lesson--locked {
  cursor: not-allowed;
}

.uc-lesson--locked .uc-lesson__title {
  color: var(--uc-color-text-subtle);
}

/* ---------- Sidebar nav ---------- */

.uc-nav-item {
  display: flex;
  align-items: center;
  gap: var(--uc-space-12);
  min-height: var(--uc-target-min);
  padding: var(--uc-space-8) var(--uc-space-12);
  border-radius: var(--uc-radius-md);
  color: var(--uc-color-text-muted);
  font-size: var(--uc-text-body-sm);
  font-weight: var(--uc-weight-medium);
  text-decoration: none;
  transition: background-color var(--uc-duration-instant) var(--uc-ease),
              color var(--uc-duration-instant) var(--uc-ease);
}

.uc-nav-item svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.uc-nav-item:hover {
  background-color: var(--uc-color-surface-sunken);
  color: var(--uc-color-text);
}

.uc-nav-item--active {
  background-color: var(--uc-color-surface-accent);
  color: var(--uc-color-nav-active);
  font-weight: var(--uc-weight-semibold);
}

.uc-nav-item--active:hover {
  background-color: var(--uc-color-surface-accent);
  color: var(--uc-color-nav-active);
}

/* ---------- Course step submenu ---------- */

.uc-subnav {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.uc-subnav__trigger {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  align-items: center;
  gap: var(--uc-space-12);
  width: 100%;
  min-height: var(--uc-target-min);
  padding: var(--uc-space-8) var(--uc-space-12);
  border: 0;
  border-radius: var(--uc-radius-md);
  background-color: transparent;
  color: var(--uc-color-text-muted);
  font: inherit;
  font-size: var(--uc-text-body-sm);
  font-weight: var(--uc-weight-medium);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--uc-duration-instant) var(--uc-ease),
              color var(--uc-duration-instant) var(--uc-ease);
}

.uc-subnav__trigger:hover {
  background-color: var(--uc-color-surface-sunken);
  color: var(--uc-color-text);
}

.uc-subnav__trigger--active {
  background-color: var(--uc-color-surface-accent);
  color: var(--uc-color-nav-active);
  font-weight: var(--uc-weight-semibold);
}

.uc-subnav__trigger--active:hover {
  background-color: var(--uc-color-surface-accent);
  color: var(--uc-color-nav-active);
}

.uc-subnav__trigger-icon,
.uc-subnav__chevron {
  width: 18px;
  height: 18px;
  flex: none;
}

.uc-subnav__chevron {
  transition: transform var(--uc-duration-base) var(--uc-ease);
}

.uc-subnav__trigger[aria-expanded="true"] .uc-subnav__chevron {
  transform: rotate(180deg);
}

.uc-subnav__panel {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows var(--uc-duration-base) var(--uc-ease),
              opacity var(--uc-duration-fast) var(--uc-ease),
              visibility 0s linear 0s;
}

.uc-subnav__panel[aria-hidden="true"] {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows var(--uc-duration-base) var(--uc-ease),
              opacity var(--uc-duration-fast) var(--uc-ease),
              visibility 0s linear var(--uc-duration-base);
}

.uc-subnav__panel-inner {
  min-height: 0;
  overflow: hidden;
  padding-block: var(--uc-space-2);
}

.uc-subnav__item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: var(--uc-space-8);
  min-height: var(--uc-target-min);
  margin-inline-start: var(--uc-space-24);
  padding: var(--uc-space-8) var(--uc-space-12);
  border-radius: var(--uc-radius-md);
  color: var(--uc-color-text-muted);
  font-size: var(--uc-text-body-sm);
  font-weight: var(--uc-weight-regular);
  text-decoration: none;
  transition: background-color var(--uc-duration-instant) var(--uc-ease),
              color var(--uc-duration-instant) var(--uc-ease);
}

.uc-subnav__item:hover {
  background-color: var(--uc-color-surface-sunken);
  color: var(--uc-color-text);
}

.uc-subnav__trigger > span,
.uc-subnav__item > span:not(.uc-subnav__marker) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uc-subnav__marker {
  width: 12px;
  height: 2px;
  border-radius: var(--uc-radius-full);
  background-color: var(--uc-color-text-subtle);
  transition: width var(--uc-duration-base) var(--uc-ease),
              background-color var(--uc-duration-instant) var(--uc-ease);
}

.uc-subnav__lock {
  width: 14px;
  height: 14px;
  justify-self: center;
  color: var(--uc-color-text-subtle);
}

.uc-subnav__item--active,
.uc-subnav__item[aria-current="step"] {
  color: var(--uc-color-accent);
  font-weight: var(--uc-weight-semibold);
}

.uc-subnav__item--active:hover,
.uc-subnav__item[aria-current="step"]:hover {
  color: var(--uc-color-accent);
}

.uc-subnav__item--active .uc-subnav__marker,
.uc-subnav__item[aria-current="step"] .uc-subnav__marker {
  width: 18px;
  background-color: var(--uc-color-accent-solid);
}

/* ---------- Tabs ---------- */

.uc-tabs {
  position: relative;
  display: flex;
  gap: var(--uc-space-4);
  border-bottom: var(--uc-border-width) solid var(--uc-color-border);
}

.uc-tab {
  padding: var(--uc-space-12) var(--uc-space-16);
  color: var(--uc-color-text-muted);
  font-size: var(--uc-text-body-sm);
  font-weight: var(--uc-weight-medium);
  cursor: pointer;
  background: none;
  transition: color var(--uc-duration-instant) var(--uc-ease);
}

.uc-tab:hover {
  color: var(--uc-color-text);
}

.uc-tab[aria-selected="true"] {
  color: var(--uc-color-text);
  font-weight: var(--uc-weight-semibold);
}

/* Moved by the active tab's offsetLeft, which is a physical coordinate. */
.uc-tabs__indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 0;
  background-color: var(--uc-color-accent-solid);
  transition: transform var(--uc-duration-base) var(--uc-ease),
              width var(--uc-duration-base) var(--uc-ease);
}

/* ---------- Table ---------- */

.uc-table-wrap {
  overflow-x: auto;
}

.uc-table th {
  padding: var(--uc-space-8) var(--uc-space-20);
  height: 40px;
  background-color: var(--uc-color-surface-sunken);
  border-bottom: var(--uc-border-width) solid var(--uc-color-border);
  color: var(--uc-color-text-muted);
  font-size: var(--uc-text-micro);
  font-weight: var(--uc-weight-semibold);
  letter-spacing: var(--uc-tracking-micro);
  text-transform: uppercase;
  text-align: start;
  white-space: nowrap;
}

.uc-table td {
  height: var(--uc-row-height);
  padding: var(--uc-space-8) var(--uc-space-20);
  border-bottom: var(--uc-border-width) solid var(--uc-color-border);
  font-size: var(--uc-text-body-sm);
  white-space: nowrap;
}

.uc-table tbody tr:last-child td {
  border-bottom: 0;
}

.uc-table tbody tr {
  transition: background-color var(--uc-duration-instant) var(--uc-ease);
}

.uc-table tbody tr:hover {
  background-color: var(--uc-color-surface-sunken);
}

.uc-table tfoot td {
  height: 40px;
  border-bottom: 0;
  border-top: var(--uc-border-width) solid var(--uc-color-border);
  background-color: var(--uc-color-surface-sunken);
  color: var(--uc-color-text-muted);
  font-size: var(--uc-text-caption);
}

.uc-table__person {
  display: flex;
  align-items: center;
  gap: var(--uc-space-12);
}

/* Tabular figures only where columns must align — applied globally it widens punctuation too. */
.uc-table .uc-num,
.uc-grade {
  font-variant-numeric: tabular-nums;
}

.uc-table .uc-num {
  font-family: var(--uc-font-mono);
  font-size: var(--uc-text-data);
  text-align: end;
}

.uc-table th.uc-num {
  text-align: end;
}

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

.uc-quiz {
  display: flex;
  flex-direction: column;
  gap: var(--uc-space-8);
}

.uc-quiz__option {
  display: flex;
  align-items: center;
  gap: var(--uc-space-12);
  width: 100%;
  min-height: 56px;
  padding: var(--uc-space-16);
  border: var(--uc-border-width) solid var(--uc-color-border);
  border-radius: var(--uc-radius-md);
  background-color: var(--uc-color-surface);
  color: var(--uc-color-text);
  font-size: var(--uc-text-body);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--uc-duration-fast) var(--uc-ease),
              background-color var(--uc-duration-fast) var(--uc-ease);
}

.uc-quiz__option:hover {
  border-color: var(--uc-color-border-strong);
}

.uc-quiz__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  border: var(--uc-border-width) solid var(--uc-color-border-strong);
  border-radius: var(--uc-radius-full);
  font-family: var(--uc-font-mono);
  font-size: var(--uc-text-caption);
  color: var(--uc-color-text-muted);
}

.uc-quiz__marker svg {
  width: 14px;
  height: 14px;
}

.uc-quiz__option[aria-pressed="true"] {
  border-color: var(--uc-color-accent);
  background-color: var(--uc-color-surface-accent);
}

.uc-quiz__option[aria-pressed="true"] .uc-quiz__marker {
  border-color: var(--uc-color-accent);
  color: var(--uc-color-accent);
}

.uc-quiz__option--correct {
  border-color: var(--uc-color-success);
  background-color: var(--uc-color-success-surface);
}

.uc-quiz__option--correct .uc-quiz__marker {
  border-color: var(--uc-color-success);
  color: var(--uc-color-success);
}

.uc-quiz__option--incorrect {
  border-color: var(--uc-color-danger);
  background-color: var(--uc-color-danger-surface);
}

.uc-quiz__option--incorrect .uc-quiz__marker {
  border-color: var(--uc-color-danger);
  color: var(--uc-color-danger);
}

/* ---------- Empty state ---------- */

.uc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--uc-space-12);
  max-width: 380px;
  margin-inline: auto;
  padding-block: var(--uc-space-64);
  text-align: center;
}

.uc-empty svg {
  width: 40px;
  height: 40px;
  color: var(--uc-color-text-subtle);
}

.uc-empty__title {
  font-size: var(--uc-text-title-sm);
  font-weight: var(--uc-weight-semibold);
}

.uc-empty__body {
  font-size: var(--uc-text-body-sm);
  color: var(--uc-color-text-muted);
}

/* ---------- Modal ---------- */

.uc-modal {
  position: fixed;
  inset: 0;
  z-index: var(--uc-z-modal);
  display: grid;
  place-items: center;
  padding: var(--uc-space-24);
}

.uc-modal[hidden] {
  display: none;
}

.uc-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--uc-color-backdrop);
  backdrop-filter: blur(2px);
  animation: uc-fade-in var(--uc-duration-slow) var(--uc-ease);
}

.uc-modal__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: var(--uc-space-32);
  background-color: var(--uc-color-surface-raised);
  border: var(--uc-border-width) solid var(--uc-color-border);
  border-radius: var(--uc-radius-xl);
  box-shadow: var(--uc-shadow-lg);
  animation: uc-modal-in var(--uc-duration-slow) var(--uc-ease);
}

.uc-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--uc-space-12);
  margin-top: var(--uc-space-24);
}

@keyframes uc-fade-in {
  from { opacity: 0; }
}

@keyframes uc-modal-in {
  from { opacity: 0; transform: scale(0.98); }
}

/* ---------- Prose ---------- */

.uc-prose {
  max-width: var(--uc-measure);
  font-family: var(--uc-font-serif);
  font-size: var(--uc-text-prose);
  line-height: var(--uc-leading-prose);
  color: var(--uc-color-text);
}

.uc-prose > * + * {
  margin-top: var(--uc-space-24);
}

.uc-prose h2,
.uc-prose h3 {
  font-family: var(--uc-font-sans);
  font-weight: var(--uc-weight-semibold);
}

/* ---------- Charts ---------- */

.uc-chart {
  display: block;
  width: 100%;
  overflow: visible;
}

.uc-chart__line {
  fill: none;
  stroke: var(--uc-chart-1);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uc-chart__line--compare {
  stroke: var(--uc-chart-2);
  stroke-dasharray: 5 5;
}

.uc-chart__dot {
  fill: var(--uc-chart-1);
}

.uc-chart__dot--compare {
  fill: var(--uc-chart-2);
}

.uc-chart__bar {
  fill: var(--uc-chart-1);
}

.uc-chart__grid {
  stroke: var(--uc-chart-grid);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.uc-chart__area-from {
  stop-color: var(--uc-chart-area-from);
}

.uc-chart__area-to {
  stop-color: var(--uc-chart-area-to);
}

.uc-chart__label {
  fill: var(--uc-color-text-muted);
  font-family: var(--uc-font-sans);
  font-size: 11px;
}

/* ---------- Code ---------- */

.uc-code {
  display: block;
  padding: var(--uc-space-16);
  background-color: var(--uc-color-surface-sunken);
  border: var(--uc-border-width) solid var(--uc-color-border);
  border-radius: var(--uc-radius-md);
  font-family: var(--uc-font-mono);
  font-size: var(--uc-text-data);
  line-height: 1.7;
  color: var(--uc-color-text);
  overflow-x: auto;
  white-space: pre;
}