/* TBR Program Content — standalone front shell (program / lesson). */

@font-face {
  font-family: "Northwell 2";
  font-display: swap;
  src: url("./fonts/Northwell-1.otf") format("opentype");
}

.tbr-program-content-shell,
.tbr-program-content-scope {
  margin: 0;
  /* Theme tokens (aimed to match legacy Reno School). Override these in a child theme
     or via a small “theme pack” stylesheet loaded after this plugin CSS. */
  --tbr-font-body: "Lato", "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --tbr-font-heading: "Lato", "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --tbr-font-script: "Northwell 2", "Brush Script MT", cursive;
  --tbr-font-h1: var(--tbr-font-heading);
  --tbr-font-h2: var(--tbr-font-heading);
  --tbr-font-h3: var(--tbr-font-heading);
  --tbr-font-h4: var(--tbr-font-heading);
  --tbr-font-h5: var(--tbr-font-heading);
  --tbr-font-h6: var(--tbr-font-heading);

  --tbr-color-page: #fafafa;
  --tbr-color-surface: #ffffff;
  --tbr-color-surface-2: #f6f7f7;
  --tbr-color-header-bg: #fef2e9;

  --tbr-color-text: #1d1d1d; /* legacy body text */
  --tbr-color-text-strong: #111111;
  --tbr-color-text-muted: #3c434a;

  --tbr-color-border: #e5e5e5;
  --tbr-color-border-strong: #d9c6b9; /* legacy button border */

  --tbr-color-accent: #fbbba1; /* legacy peach */
  --tbr-color-accent-contrast: #ffffff;
  --tbr-color-accent-2: #59c4ff; /* legacy secondary-nav dropdown bg */

  /* Course sidebar / outline nav (Reno School) */
  --tbr-nav-text: #1f1d1e;
  --tbr-nav-peach: var(--tbr-color-header-bg); /* parent rows match the sidebar */
  --tbr-nav-hover-bg: #ffffff;
  --tbr-nav-hover-text: #fbbba1;
  --tbr-nav-active-bg: rgba(255, 255, 255, 0.7);
  --tbr-nav-pressed-bg: #f9bda5;
  --tbr-nav-pressed-text: #ffe4d3;
  --tbr-nav-submenu-bg: #d9c6b9;
  --tbr-nav-submenu-text: #ffffff;
  --tbr-nav-submenu-container-bg: rgba(0, 0, 0, 0.1);
  --tbr-nav-submenu-divider: rgba(255, 243, 235, 0.3);
  --tbr-nav-submenu-inset: inset 0 2px 6px rgba(0, 0, 0, 0.2);
  --tbr-nav-module-header-bg: transparent;
  --tbr-nav-chrome-border: #1f1d1e;

  /* Lesson / program reading column (override via tbr_program_content_shell_css_vars on .tbr-course-shell). */
  --tbr-content-max-width: 67.5rem; /* 1080px at 16px root */
  --tbr-content-width: 90%;

  --tbr-shadow-1: 0 8px 28px rgba(0, 0, 0, 0.08);

  font-family: var(--tbr-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tbr-color-text, #1a1a1a);
  background: var(--tbr-color-page, #fafafa);
}

/* Nested shortcode scopes should keep the shell’s program fonts (H1 etc.). */
.tbr-course-shell .tbr-program-content-scope {
  --tbr-font-body: inherit;
  --tbr-font-heading: inherit;
  --tbr-font-script: inherit;
  --tbr-font-h1: inherit;
  --tbr-font-h2: inherit;
  --tbr-font-h3: inherit;
  --tbr-font-h4: inherit;
  --tbr-font-h5: inherit;
  --tbr-font-h6: inherit;
}

/* Re-bind H1–H6 on the inner shell so they track --tbr-font-heading on the
   same element that receives program overrides. Parent aliases resolve too
   early (to Lato) and Heading would otherwise appear to do nothing. */
.tbr-course-shell {
  font-family: var(--tbr-font-body);
  --tbr-font-h1: var(--tbr-font-heading);
  --tbr-font-h2: var(--tbr-font-heading);
  --tbr-font-h3: var(--tbr-font-heading);
  --tbr-font-h4: var(--tbr-font-heading);
  --tbr-font-h5: var(--tbr-font-heading);
  --tbr-font-h6: var(--tbr-font-heading);
  /* Course sidebar nav; unset tokens fall back to H3 (the nav titles are <h3>). */
  --tbr-font-nav-top: var(--tbr-font-h3);
  --tbr-font-nav-number: var(--tbr-font-h3);
  --tbr-font-nav-title: var(--tbr-font-h3);
}

.tbr-program-content-shell h1, .tbr-program-content-scope h1 { font-family: var(--tbr-font-h1); }
.tbr-lesson__deliverables h2, 
.tbr-program-content-shell h2,
.tbr-program-content-scope h2,
.tbr-program-content-shell .tbr-program-hub__title,
.tbr-program-content-scope .tbr-program-hub__title {
  font-family: var(--tbr-font-h2);
  /* 36px at 16px root */
  font-size: 2.25rem;
  line-height: 1.15;
}

.tbr-program-content-shell .tbr-program-hub__title,
.tbr-program-content-scope .tbr-program-hub__title {
  font-size: 1.8rem;
  text-transform: uppercase;
}

@media (min-width: 901px) {
  .tbr-program-content-scope h2,
  .tbr-program-content-shell .tbr-program-hub__title,
  .tbr-program-content-scope .tbr-program-hub__title {
    /* 80px at 16px root */
    font-size: 3.5rem;
  }

  .tbr-program-content-scope .tbr-my-programs__resources-heading {
    font-size: 1.8rem;
  }
}
.tbr-program-content-shell h3, .tbr-program-content-scope h3 { font-family: var(--tbr-font-h3); }
.tbr-program-content-shell h4, .tbr-program-content-scope h4 { font-family: var(--tbr-font-h4); }
.tbr-program-content-shell h5, .tbr-program-content-scope h5 { font-family: var(--tbr-font-h5); }
.tbr-program-content-shell h6, .tbr-program-content-scope h6 { font-family: var(--tbr-font-h6); }

.tbr-course-shell {
  min-height: 100vh;
}

.tbr-course-shell {
  --tbr-topbar-h: 30px;
  --tbr-nav-w: 290px;
  /* Match WP admin bar heights when --wp-admin--admin-bar--height is missing (front-end). */
  --tbr-wp-admin-bar-height: 32px;
}

@media screen and (max-width: 782px) {
  .tbr-course-shell {
    --tbr-wp-admin-bar-height: 46px;
  }
}

.tbr-accountbar {
  background: var(--tbr-color-header-bg);
  border-bottom: 1px solid var(--tbr-color-border);
}

.tbr-accountbar__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.5rem 1.25rem;
}

.tbr-accountbar__nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem 1.25rem;
  flex-wrap: wrap;
}

.tbr-accountbar__link {
  color: var(--tbr-color-text-muted);
  text-decoration: none;
  font-size: 0.9375rem;
}

.tbr-accountbar__link:hover,
.tbr-accountbar__link:focus {
  text-decoration: underline;
}

.tbr-topbar {
  /* Desktop: this entire header becomes the left sidebar column. */
  position: fixed;
  top: 0;
  left: max(0px, calc((100vw - 72rem) / 2 + 1.25rem));
  width: var(--tbr-nav-w);
  height: 100vh;
  z-index: 80;
  background: var(--tbr-color-header-bg);
  /* border-right: 1px solid var(--tbr-nav-chrome-border, #1f1d1e); */
  border-bottom: 0;
  -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
}

/* Fixed sidebar sits below the WordPress admin bar (viewport coordinates). */
body.admin-bar .tbr-topbar {
  top: var(--wp-admin--admin-bar--height, var(--tbr-wp-admin-bar-height, 32px));
  height: calc(100vh - var(--wp-admin--admin-bar--height, var(--tbr-wp-admin-bar-height, 32px)));
}

.tbr-topbar__inner {
  max-width: none;
  margin: 0;
  padding: 1rem 1rem 2rem;
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tbr-topbar__brand {
  font-weight: 600;
  font-family: var(--tbr-font-heading);
  color: var(--tbr-nav-text, #1f1d1e);
  text-decoration: none;
}

.tbr-topbar__brand:hover,
.tbr-topbar__brand:focus {
  text-decoration: underline;
}

.tbr-topbar__brand--has-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  box-sizing: border-box;
  /* Allow width/max-width % to win over wide intrinsic image (flex default min-width: auto). */
  min-width: 0;
}

.tbr-topbar__brand--has-logo:hover,
.tbr-topbar__brand--has-logo:focus {
  text-decoration: none;
}

.tbr-topbar__brand--has-logo:focus-visible {
  outline: 2px solid var(--tbr-color-accent, #fbbba1);
  outline-offset: 3px;
  border-radius: 6px;
}

.tbr-topbar__brand-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 2.25rem;
  object-fit: contain;
}

/* Logo image: no 2.25rem cap (that was shrinking mobile logos inside the 50% column). */
.tbr-topbar__brand--has-logo .tbr-topbar__brand-img {
  max-height: none;
}

@media (max-width: 900px) {
  /* Logo column 1 (left); menu column 2 (right). */
  .tbr-topbar__inner:has(.tbr-topbar__brand--has-logo) {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;
  }

  .tbr-topbar__inner:has(.tbr-topbar__brand--has-logo) .tbr-topbar__brand--has-logo {
    grid-column: 1;
    justify-self: start;
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .tbr-topbar__inner:has(.tbr-topbar__brand--has-logo) .tbr-topbar__hamburger {
    grid-column: 2;
    margin-left: 0;
    justify-self: end;
  }
}

@media (min-width: 901px) {
  .tbr-topbar {
    display: flex;
    flex-direction: column;
  }

  .tbr-topbar__inner {
    flex-shrink: 0;
  }

  .tbr-topbar__brand--has-logo {
    width: 58%;
    max-width: 58%;
    flex-shrink: 1;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }

  .tbr-course-nav {
    flex: 1 1 0;
    min-height: 0;
  }
}

/* Back-compat: old util nav (no longer rendered) */
.tbr-topbar__util,
.tbr-topbar__util-link {
  display: none;
}

.tbr-topbar__hamburger {
  position: relative;
  margin-left: auto;
  display: none;
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0.55rem 0.65rem;
  font-size: 0.9375rem;
  cursor: pointer;
  line-height: 1;
}

.tbr-topbar__hamburger:focus-visible {
  outline: 2px solid var(--tbr-color-accent, #fbbba1);
  outline-offset: 3px;
  border-radius: 6px;
}

.tbr-hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 26px;
}

.tbr-hamburger__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--tbr-nav-chrome-border, #1f1d1e);
  border-radius: 999px;
  transition: transform 160ms ease, opacity 160ms ease;
}

/* X state when nav is open */
.tbr-course-shell.is-nav-open .tbr-hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.tbr-course-shell.is-nav-open .tbr-hamburger__bar:nth-child(2) {
  opacity: 0;
}
.tbr-course-shell.is-nav-open .tbr-hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.tbr-shell-grid {
  max-width: 72rem;
  margin: 0 auto;
  display: block;
}

/*
 * Single lesson + program hub: full viewport width (sidebar flush left, main fills to right edge).
 * Default shell centers everything in a 72rem band via .tbr-topbar left + .tbr-shell-grid max-width;
 * that causes large side margins — override here. Class added in front-shell.php (body_class).
 */
body.tbr-lesson-shell-full-width.tbr-program-content-shell .tbr-shell-grid {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* Reading column: outer cap inside the main area (all breakpoints). */
body.tbr-lesson-shell-full-width.tbr-program-content-shell .tbr-main__inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

@media (min-width: 901px) {
  body.tbr-lesson-shell-full-width.tbr-program-content-shell .tbr-topbar {
    left: 0;
  }

  body.tbr-lesson-shell-full-width.tbr-program-content-shell .tbr-accountbar__inner {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
  }

  body.tbr-lesson-shell-full-width.tbr-program-content-shell .tbr-shell-grid {
    padding-left: calc(var(--tbr-nav-w));
  }

  body.tbr-lesson-shell-full-width.tbr-program-content-shell .tbr-main {
    margin-left: 0;
    max-width: none;
    width: 100%;
  }
}

.tbr-course-nav {
  /* position: relative on all breakpoints (flow + stacking); desktop height from flex parent .tbr-topbar */
  position: relative;
  overflow: auto;
  scrollbar-width: none; /* Firefox */
  scrollbar-color: transparent transparent;
  -ms-overflow-style: none; /* IE / legacy Edge */
  padding: 0.75rem 0.75rem 1rem;
  background: transparent;
}

@media (min-width: 901px) {
  .tbr-course-nav {
    padding: 0;
  }
}

.tbr-course-nav::-webkit-scrollbar {
  /* Chrome, Safari, Opera — width 0 helps when display:none is ignored */
  display: none;
  width: 0;
  height: 0;
}

.tbr-course-nav__account {
  display: none;
  border-top: 1px solid var(--tbr-nav-submenu-divider, rgba(255, 243, 235, 0.3));
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}

.tbr-course-nav__account-link {
  display: block;
  padding: 0.65rem 0.65rem;
  color: var(--tbr-nav-text, #1f1d1e);
  text-decoration: none;
  border-radius: 8px;
}

.tbr-course-nav__account-link:hover,
.tbr-course-nav__account-link:focus-visible {
  background: var(--tbr-nav-hover-bg, #ffffff);
  color: var(--tbr-nav-hover-text, #fbbba1);
}

.tbr-course-nav__account-link:focus-visible {
  outline: 2px solid var(--tbr-color-accent, #fbbba1);
  outline-offset: 2px;
}

.tbr-course-nav__account-link:active {
  background: var(--tbr-nav-pressed-bg, #f9bda5);
  color: var(--tbr-nav-pressed-text, #ffe4d3);
}

.tbr-main__inner {
  background: transparent;
}

.tbr-main {
  margin-left: calc(var(--tbr-nav-w) + 2rem);
}

.tbr-drawer-backdrop {
  display: none;
}

@media (max-width: 900px) {
  .tbr-topbar {
    position: static;
    left: 0;
    width: auto;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--tbr-nav-chrome-border, #1f1d1e);
  }

  /*
   * Undo desktop admin-bar rule (same specificity wins by order here).
   * Without this, body.admin-bar .tbr-topbar keeps height: calc(100vh - …) and the <header> fills the screen.
   */
  body.admin-bar .tbr-topbar {
    top: auto;
    height: auto;
  }

  /* Brand row (logo + menu control): max 80px total height including padding. */
  .tbr-topbar__inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.75rem 1.25rem;
    max-height: 5rem;
    box-sizing: border-box;
  }

  .tbr-topbar__inner:has(.tbr-topbar__brand--has-logo) .tbr-topbar__brand-img {
    max-height: calc(5rem - 1.5rem);
    width: auto;
    max-width: 100%;
  }

  .tbr-topbar__hamburger {
    display: inline-flex;
  }

  .tbr-accountbar {
    display: none;
  }

  .tbr-shell-grid {
    display: block;
  }

  .tbr-course-nav {
    position: relative;
    display: none;
    background: transparent;
    border-right: 0;
    border-top: 1px solid var(--tbr-nav-chrome-border, #1f1d1e);
    padding: 0.75rem 1.25rem 1rem;
    animation: none;
    transform-origin: top;
  }

  .tbr-main {
    margin-left: 0;
  }

  .tbr-course-nav__account {
    display: block;
  }

  /* Dimmed page behind the open drawer; tapping it closes the drawer (course-shell.js toggles [hidden]).
     The header (logo bar + drawer) sits above it. */
  .tbr-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(31, 29, 30, 0.35);
    cursor: pointer;
    animation: tbrBackdropIn 240ms ease-out;
  }

  .tbr-course-shell.is-nav-open .tbr-topbar {
    position: relative;
    z-index: 80;
  }

  .tbr-course-shell.is-nav-open .tbr-course-nav {
    display: block;
    animation: tbrNavDrop 720ms ease-out;
    /* Same colour as the desktop sidebar, so the menu's row/hover/current treatments match desktop. */
    background: var(--tbr-color-header-bg, #fef2e9);
  }

  .tbr-nav-open {
    overflow: auto;
  }
}

@keyframes tbrNavDrop {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tbrBackdropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes tbrNavUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Ensure hidden backdrop never captures clicks. */
.tbr-drawer-backdrop[hidden] {
  display: none !important;
}

.tbr-pc-shell__inner {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Back-compat: old shell content wrapper (now unused in new shell) */
.tbr-pc-shell__main {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

.tbr-pc-shell__content {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .tbr-pc-shell__content {
    padding: 2rem 2rem 2.5rem;
  }
}

/* Sticky footer: the shell is a column so the footer's margin-top:auto pins it to the
   bottom of the viewport on short pages (sign-in, empty states) and follows content otherwise. */
.tbr-course-shell {
  display: flex;
  flex-direction: column;
}

body.admin-bar .tbr-course-shell {
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, var(--tbr-wp-admin-bar-height, 32px)));
}

.tbr-course-shell > .tbr-shell-grid {
  flex: 1 0 auto;
  width: 100%;
}

.tbr-pc-shell__footer {
  border-top: 1px solid var(--tbr-color-border);
  background: var(--tbr-color-surface);
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  margin-top: auto;
}

/* Desktop: the sidebar is fixed on the left, so shift the footer text clear of it
   the same way .tbr-main is (otherwise it slides under the sidebar as the window narrows). */
@media (min-width: 901px) {
  .tbr-pc-shell__footer .tbr-pc-shell__inner {
    padding-left: calc(var(--tbr-nav-w) + 2rem + 1.25rem);
  }

  body.tbr-lesson-shell-full-width.tbr-program-content-shell .tbr-pc-shell__footer {
    padding-left: var(--tbr-nav-w);
  }

  body.tbr-lesson-shell-full-width.tbr-program-content-shell .tbr-pc-shell__footer .tbr-pc-shell__inner {
    max-width: none;
    padding-left: 1.25rem;
  }
}

.tbr-pc-shell__footer-note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--tbr-color-text-muted);
}

.tbr-pc-shell__footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0 0 0.5rem;
}

.tbr-pc-shell__footer-link {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tbr-color-text);
  text-decoration: none;
}

.tbr-pc-shell__footer-link:hover,
.tbr-pc-shell__footer-link:focus-visible,
.tbr-pc-shell__footer-link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Program Contact page: intro copy above the embedded HubSpot form. */
.tbr-program-contact__intro {
  margin-bottom: 1.75rem;
}

/* Contact form: matches the account hub forms (account-hub.css). */
.tbr-contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 1rem;
}

.tbr-contact-form__field label {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.tbr-contact-form__sender {
  margin: -0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--tbr-color-text-muted, #6b6764);
}

.tbr-contact-form__sender-line {
  display: block;
}

.tbr-contact-form input[type="text"],
.tbr-contact-form textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--tbr-color-border-strong, rgba(0, 0, 0, 0.22));
  background: var(--tbr-color-surface, #fff);
  color: var(--tbr-color-text, inherit);
  font: inherit;
  box-sizing: border-box;
}

.tbr-contact-form textarea {
  resize: vertical;
  min-height: 9rem;
}

.tbr-contact-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tbr-contact-form__actions {
  margin: 1.25rem 0 0;
}

.tbr-contact-form__submit {
  appearance: none;
  border: 0;
  background: var(--tbr-color-accent, #fbbba1);
  color: var(--tbr-color-text-strong, #1f1d1e);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.75rem 1.15rem;
  cursor: pointer;
}

.tbr-contact-form__submit:hover,
.tbr-contact-form__submit:focus-visible {
  filter: brightness(0.97);
}

.tbr-contact-form__error {
  padding: 0.75rem 1rem;
  border-left: 4px solid #b3261e;
  background: rgba(179, 38, 30, 0.06);
}

.tbr-program-contact__success {
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--tbr-color-accent, #fbbba1);
  background: var(--tbr-color-surface, #fff);
}

.tbr-program-contact__admin-note {
  padding: 0.75rem 1rem;
  border: 1px dashed var(--tbr-color-border);
  color: var(--tbr-color-text-muted);
  font-size: 0.875rem;
}

/* A11y: hide visually, keep for screen readers */
.tbr-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Video modal */
.tbr-video-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.tbr-video-modal__panel {
  width: min(920px, 100%);
  background: var(--tbr-color-surface);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.tbr-video-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--tbr-color-border);
}

.tbr-video-modal__title {
  font-weight: 700;
  font-size: 14px;
}

.tbr-video-modal__close {
  border: 1px solid var(--tbr-color-border);
  background: var(--tbr-color-page);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}

.tbr-video-modal__body {
  padding: 12px;
}

.tbr-video-modal__frame {
  position: relative;
  padding-top: 56.25%;
}

.tbr-video-modal__frame-inner {
  position: absolute;
  inset: 0;
}

.tbr-video-modal__frame-inner iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* PDF modal (program asset thumbnails + inline workbook links) */
/* Sized as % of the fixed backdrop, not vh: on iOS 100vh includes the area under the browser
   address bar / toolbar, which pushed the panel off-screen. */
.tbr-pdf-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  box-sizing: border-box;
  overscroll-behavior: contain;
}

.tbr-pdf-modal__panel {
  width: 90%;
  max-width: 100%;
  height: 90%;
  box-sizing: border-box;
  background: var(--tbr-color-surface);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  transition: width 0.15s ease, height 0.15s ease, border-radius 0.15s ease;
}

/* Native Fullscreen API (true full screen) */
.tbr-pdf-modal__panel:fullscreen,
.tbr-pdf-modal__panel:-webkit-full-screen,
.tbr-pdf-modal__panel:-moz-full-screen {
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  box-shadow: none;
}

/* Fallback when Fullscreen API is unavailable */
.tbr-pdf-modal__panel--fullscreen {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

@media (max-width: 767px) {
  .tbr-pdf-modal__panel {
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    border-radius: 12px;
  }

  .tbr-pdf-modal__panel--fullscreen {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .tbr-pdf-modal .tbr-pdf-modal__header {
    padding: 8px 10px;
  }
}

.tbr-pdf-modal--fullscreen {
  background: rgba(0, 0, 0, 0.92);
}

.tbr-pdf-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--tbr-color-border);
  flex: 0 0 auto;
}

.tbr-pdf-modal__title {
  font-weight: 700;
  font-size: 14px;
  padding-right: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.tbr-pdf-modal__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.tbr-pdf-modal__open-tab,
.tbr-pdf-modal__fullscreen,
.tbr-pdf-modal__close {
  border: 1px solid var(--tbr-color-border);
  background: var(--tbr-color-page);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: inherit;
}

.tbr-pdf-modal__open-tab svg,
.tbr-pdf-modal__fullscreen svg {
  display: block;
}

.tbr-pdf-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  background: #f6f6f6;
  display: flex;
  flex-direction: column;
}

.tbr-pdf-modal__iframe {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}

/* Shared reading width for lesson + program hub main column. */
.tbr-lesson__title-hero,
.tbr-lesson__header,
.tbr-lesson__video,
.tbr-lesson__content,
.tbr-lesson__deliverables,
.tbr-program-hub__title,
.tbr-program-hub__lead,
.tbr-program-hub__meta,
.tbr-program-hub__assets,
.tbr-course-module-grid {
  box-sizing: border-box;
  width: var(--tbr-content-width, 80%);
  max-width: var(--tbr-content-max-width, 67.5rem);
  margin-left: auto;
  margin-right: auto;
}

/* Main column curriculum only — not sidebar (.tbr-program-hub__curriculum--compact). */
.tbr-program-hub > .tbr-program-hub__curriculum {
  box-sizing: border-box;
  width: var(--tbr-content-width, 80%);
  max-width: var(--tbr-content-max-width, 67.5rem);
  margin-left: auto;
  margin-right: auto;
}

.tbr-lesson__header {
  padding: 4rem 0 1rem;
}

/* Lesson 0: full-bleed module photo with black badge labels on top (see planning screenshot). */
.tbr-lesson__header.tbr-lesson__header--module-hero {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}

.tbr-lesson__header-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--tbr-color-surface-2, #f6f7f7);
}

/* .tbr-lesson__header-hero-media sizing is shared with the hub hero (see "Hero images" below). */

.tbr-lesson__header-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3rem;
  width: 100%;
  padding: clamp(1rem, 3.5vw, 2.25rem) clamp(0.75rem, 3vw, 1.5rem) clamp(1.25rem, 4vw, 2rem);
  text-align: center;
  pointer-events: none;
}

.tbr-lesson__header-overlay .tbr-lesson__header-badge {
  pointer-events: auto;
}

.tbr-lesson__header-badge {
  margin: 0;
  display: inline-block;
  max-width: min(100%, 42rem);
  padding: 0.1rem 0.4rem;
  background-color: #000;
  color: #fff;
  font-family: var(--tbr-font-heading, "Lato", "Open Sans", system-ui, sans-serif);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.tbr-lesson__header-badge--module {
  font-size: clamp(1rem, 1.1vw + 0.85rem, 1.5rem); /* 24px cap on large screens */
  letter-spacing: 0.18em;
}

.tbr-lesson__header-badge--title {
  font-size: clamp(0.875rem, 0.85vw + 0.7rem, 1.25rem); /* 20px cap on large screens */
  letter-spacing: 0.12em;
}

@media (max-width: 560px) {
  .tbr-lesson__header-overlay {
    min-height: inherit;
    gap: 0.2rem;
    padding-top: 0.85rem;
  }

  .tbr-lesson__header-badge {
    padding: 0.1rem 0.3rem;
    letter-spacing: 0.1em;
  }

  .tbr-lesson__header-badge--module {
    letter-spacing: 0.14em;
  }

  .tbr-lesson__header-badge--title {
    letter-spacing: 0.08em;
  }
}

/* Mobile/portrait: enforce square heroes (1:1). */
@media (max-width: 560px) and (orientation: portrait) {
  .tbr-lesson__header-hero {
    aspect-ratio: 1 / 1;
    min-height: 0;
  }

  .tbr-lesson__module-hero,
  .tbr-program-hub__hero {
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: 0;
  }

  .tbr-lesson__module-hero-img,
  .tbr-program-hub__hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* object-position: center 32%; */
  }
}

.tbr-lesson--sort-order-0 .tbr-lesson__deliverables {
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

.tbr-lesson__title-hero {
  margin-bottom: 1.5rem;
}

.tbr-lesson__video,
.tbr-lesson__content {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.tbr-lesson__video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--tbr-color-border);
  overflow: hidden;
}

/* padding-top 16:9 fallback for older browsers */
@supports not (aspect-ratio: 16 / 9) {
  .tbr-lesson__video-frame {
    aspect-ratio: unset;
    height: 0;
    padding-top: 56.25%;
  }
}

.tbr-lesson__video-frame > iframe,
.tbr-lesson__video-frame > .wistia_embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Wistia injects inner iframe; keep host div filling the frame */
.tbr-lesson__video-frame .wistia_embed {
  min-height: 100%;
}

/*
 * Hero images — one set of rules for every header and footer hero, based on the program hub hero:
 *   headers: program hub (.tbr-program-hub__hero--header), intro/outro lesson header
 *            (.tbr-lesson__header-hero), module header (.tbr-lesson__module-hero--header);
 *   footers: program hub (.tbr-program-hub__hero--footer), module footer (.tbr-lesson__module-hero--footer).
 * Full width, no border, image capped at 600px tall and cropped to fill; footers sit 5rem below content.
 * Mobile sizing below; portrait phones go square (see "Mobile/portrait: enforce square heroes").
 */
.tbr-program-hub__hero,
.tbr-lesson__module-hero {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  background: var(--tbr-color-surface-2, #f6f7f7);
}

.tbr-program-hub__hero--footer,
.tbr-lesson__module-hero--footer {
  margin-top: 5rem;
  margin-bottom: 0;
}

.tbr-program-hub__hero-img,
.tbr-lesson__module-hero-img,
.tbr-lesson__header-hero-media {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
  max-height: 600px;
  object-fit: cover;
}

.tbr-program-hub__hero--header + .tbr-program-hub__title {
  margin-top: clamp(2.25rem, 3vw, 4rem);
}

@media (max-width: 560px) {
  .tbr-program-hub__hero,
  .tbr-lesson__module-hero,
  .tbr-lesson__header-hero {
    min-height: clamp(10.5rem, 52vw, 16rem);
  }

  .tbr-program-hub__hero-img,
  .tbr-lesson__module-hero-img,
  .tbr-lesson__header-hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 100vw;
  }
}

/* Lesson title block: centered subtitle | rule | headline (matches program lesson hero). */
.tbr-lesson__title-hero {
  text-align: center;
}

.tbr-lesson__title-hero-inner {
  display: block;
  max-width: 100%;
  vertical-align: top;
  text-align: center;
}

.tbr-lesson__title-strip {
  margin: 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1.28rem;
  line-height: 1.4;
  color: var(--tbr-color-text-strong, #111);
}

.tbr-lesson__title-rule {
  display: block;
  width: 100%;
  height: 0;
  margin: 0.65rem 0 1rem;
  border: 0;
  border-top: 1.5px solid var(--tbr-color-text-strong, #111);
  opacity: 0.9;
}

.tbr-lesson__title {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.2;
  /* font-weight: 700; */
  /* letter-spacing: 0.1em; */
  text-transform: uppercase;
  color: var(--tbr-color-text-strong, #111);
  font-family: var(--tbr-font-heading, "Lato", "Open Sans", system-ui, sans-serif);
}

@media (min-width: 901px) {
  .tbr-lesson__title {
    font-size: 3.5rem;
  }
}

.tbr-lesson__deliverables {
  margin-top: 2rem;
  padding-top: 1.5rem;
}

.tbr-lesson__deliverables-heading h1 {
  margin: 0 0 0.75rem;
  line-height: 1.3;
  text-transform: uppercase;
}

/* This heading is a real <h2>, so the bare h2 tag rule above (class + tag = higher
   specificity than a single class) would otherwise win the font-size fight. */
.tbr-program-content-shell .tbr-lesson__deliverables-heading,
.tbr-program-content-scope .tbr-lesson__deliverables-heading {
  font-size: 1.8rem;
}

@media (min-width: 901px) {
  .tbr-program-content-shell .tbr-lesson__deliverables-heading h1, .tbr-program-content-scope .tbr-lesson__deliverables-heading {
    font-size: 3.5rem;
  }
}

/* Course module thumbnail index (course welcome page: module 0 / lesson 0) */
.tbr-course-module-grid {
  margin-top: 2rem;
  padding-top: 1.5rem;
}

.tbr-course-module-grid__heading {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  line-height: 1.3;
}

.tbr-thumb-grid,
.tbr-lesson__deliverables-list,
.tbr-program-hub__asset-list,
.tbr-my-programs__asset-list,
.tbr-course-lesson-grid__module-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: start;
}

@media (max-width: 560px) {
  .tbr-thumb-grid,
  .tbr-lesson__deliverables-list,
  .tbr-program-hub__asset-list,
  .tbr-my-programs__asset-list,
  .tbr-course-lesson-grid__module-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tbr-thumb-grid__item {
  margin: 0;
}

.tbr-thumb-grid__link {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--tbr-color-text-strong);
  text-decoration: none;
  transition: box-shadow 120ms ease, border-color 120ms ease, transform 120ms ease;
  max-width: 250px;
  width: 100%;
}

.tbr-thumb-grid__link:hover,
.tbr-thumb-grid__link:focus {
  outline: none;
  transform: translateY(-1px);
}

.tbr-thumb-grid__thumb-wrap {
  position: relative;
  width: 100%;
  max-width: 250px;
  border-radius: 0;
  overflow: hidden;
  background: var(--tbr-color-border);
  padding: 0;
  box-sizing: border-box;
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.tbr-thumb-grid__link:hover .tbr-thumb-grid__thumb-wrap,
.tbr-thumb-grid__link:focus .tbr-thumb-grid__thumb-wrap {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
  transform: translateY(-1px);
}

.tbr-thumb-grid__thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  vertical-align: middle;
  background: var(--tbr-color-border);
}

.tbr-thumb-grid__text {
  font-weight: 600;
  line-height: 1.25;
}

.tbr-thumb-grid__text {
  color: var(--tbr-color-text-strong);
}

.tbr-thumb-grid__meta {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--tbr-color-text-muted, #666);
}

.tbr-thumb-grid__meta-action {
  font-weight: 500;
}

.tbr-resource-viewed-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.82);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.tbr-resource-viewed-badge[hidden] {
  display: none !important;
}

.tbr-resource-is-viewed .tbr-thumb-grid__meta-action,
.tbr-chat-resource-card.tbr-resource-is-viewed .tbr-chat-resource__sub {
  opacity: 0.85;
}

@media (min-width: 900px) {
  .tbr-thumb-grid,
  .tbr-lesson__deliverables-list,
  .tbr-program-hub__asset-list,
  .tbr-my-programs__asset-list,
  .tbr-course-lesson-grid__module-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Course lesson library grid (shortcode [tbr_course_lesson_grid]) */
.tbr-course-lesson-grid {
  margin: 0 0 2rem;
}

.tbr-course-lesson-grid__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 1.25rem;
}

.tbr-course-lesson-grid__filter-label {
  font-weight: 600;
  color: var(--tbr-color-text-strong);
}

.tbr-course-lesson-grid__select {
  min-width: min(100%, 18rem);
  padding: 0.35rem 0.5rem;
  font: inherit;
  border: 1px solid var(--tbr-color-border);
  background: var(--tbr-color-surface, #fff);
  color: var(--tbr-color-text-strong);
}

.tbr-course-lesson-grid__course-head {
  margin: 0 0 1.25rem;
}

.tbr-course-lesson-grid__course-title {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  line-height: 1.25;
}

.tbr-course-lesson-grid__course-hub {
  margin: 0;
  font-size: 0.95rem;
}

.tbr-course-lesson-grid__course-hub a {
  color: var(--tbr-color-accent-2);
  text-decoration: none;
}

.tbr-course-lesson-grid__course-hub a:hover,
.tbr-course-lesson-grid__course-hub a:focus {
  text-decoration: underline;
}

.tbr-course-lesson-grid__module {
  margin: 0 0 2rem;
}

.tbr-course-lesson-grid__module:last-child {
  margin-bottom: 0;
}

.tbr-course-lesson-grid__module-title {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--tbr-color-text-strong);
}

.tbr-course-lesson-grid__empty {
  margin: 0;
}

/* Course nav + grids: lesson_type hooks (module_intro | module_outro) */
.tbr-program-hub__lesson--lt-module-outro .tbr-program-hub__lesson-prefix {
  letter-spacing: 0.1em;
}

.tbr-program-hub__lesson--lt-module-intro {
  border-left: 2px solid var(--tbr-color-accent-2, #c9a227);
  padding-left: 0.45rem;
  margin-left: -0.05rem;
}

.tbr-program-hub__lesson--lt-module-outro {
  border-left: 2px solid var(--tbr-color-accent-1, #8b7355);
  padding-left: 0.45rem;
  margin-left: -0.05rem;
}

.tbr-program-hub__lesson--lt-module-intro.is-current,
.tbr-program-hub__lesson--lt-module-outro.is-current {
  border-left-width: 0;
  padding-left: 0.5rem;
  margin-left: 0;
}

.tbr-program-hub__module--leaf.tbr-program-hub__module--lt-module-outro .tbr-program-hub__module-title a,
.tbr-program-hub__module--leaf.tbr-program-hub__module--lt-module-intro .tbr-program-hub__module-title a {
  letter-spacing: 0.08em;
}

.tbr-course-lesson-grid__module--leaf.tbr-course-lesson-grid__module--lt-module-outro .tbr-course-lesson-grid__module-title,
.tbr-course-lesson-grid__module--leaf.tbr-course-lesson-grid__module--lt-module-intro .tbr-course-lesson-grid__module-title {
  letter-spacing: 0.06em;
}

.tbr-course-lesson-grid__module-list .tbr-thumb-grid__item--lt-module-intro .tbr-thumb-grid__text,
.tbr-course-lesson-grid__module-list .tbr-thumb-grid__item--lt-module-outro .tbr-thumb-grid__text {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.9em;
}

.tbr-program-content-scope .tbr-my-programs__resources-heading,
.tbr-program-content-shell .tbr-my-programs__resources-heading {
  font-family: var(--tbr-font-h1);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.15;
  text-transform: none;
}

.tbr-my-programs__program-list {
  --tbr-program-logo-size: 150px;
  --tbr-program-logo-gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tbr-program-logo-gap);
}

.tbr-my-programs__program-item {
  margin: 0;
  box-sizing: border-box;
  flex: 0 1 calc((100% - var(--tbr-program-logo-gap)) / 2);
  width: calc((100% - var(--tbr-program-logo-gap)) / 2);
  max-width: var(--tbr-program-logo-size);
}

.tbr-my-programs__program-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--tbr-color-text-strong);
  text-decoration: none;
  transition: box-shadow 120ms ease, border-color 120ms ease, transform 120ms ease;
  width: 100%;
  max-width: none;
}

.tbr-my-programs__program-thumb-wrap {
  position: relative;
  width: 100%;
  max-width: none;
  border-radius: 0;
  overflow: hidden;
  background: var(--tbr-color-border);
  padding: 0;
  box-sizing: border-box;
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.tbr-my-programs__program-link:hover,
.tbr-my-programs__program-link:focus {
  outline: none;
  transform: translateY(-1px);
}

.tbr-my-programs__program-link:hover .tbr-my-programs__program-thumb-wrap,
.tbr-my-programs__program-link:focus .tbr-my-programs__program-thumb-wrap {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
  transform: translateY(-1px);
}

.tbr-my-programs__program-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  vertical-align: middle;
  background: var(--tbr-color-border);
}

.tbr-my-programs__program-thumb-wrap.tbr-my-programs__program-thumb-wrap--logo {
  background: transparent;
  overflow: visible;
  box-shadow: none;
}

.tbr-my-programs__program-thumb.tbr-my-programs__program-thumb--logo {
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 0 0 transparent);
  transition: filter 120ms ease, transform 120ms ease;
}

.tbr-my-programs__program-link:hover .tbr-my-programs__program-thumb-wrap--logo,
.tbr-my-programs__program-link:focus-visible .tbr-my-programs__program-thumb-wrap--logo {
  box-shadow: none;
  transform: none;
}

.tbr-my-programs__program-link:hover .tbr-my-programs__program-thumb--logo,
.tbr-my-programs__program-link:focus-visible .tbr-my-programs__program-thumb--logo {
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.28));
  transform: translateY(-1px);
}

/* Lesson + course outline (two columns on wide screens) */
.tbr-lesson-layout {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 960px) {
  .tbr-lesson-layout {
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    gap: 2rem;
  }
}

.tbr-lesson-layout__nav {
  position: relative;
}

@media (min-width: 960px) {
  .tbr-lesson-layout__nav {
    position: sticky;
    top: 4rem;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-right: 0.25rem;
  }

  .tbr-lesson-layout__nav::-webkit-scrollbar {
    display: none;
  }
}

.tbr-course-nav .tbr-program-hub__curriculum,
.tbr-lesson-layout__nav .tbr-program-hub__curriculum {
  width: 100%;
  max-width: none;
  margin: 0;
}

.tbr-program-hub__curriculum--compact .tbr-program-hub__curriculum-heading {
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.tbr-program-hub__module-nav {
  padding: 0;
  margin: 0;
}

.tbr-program-hub__modules,
.tbr-program-hub__lessons {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Top-level curriculum rows: shared separator + vertical rhythm. */
.tbr-program-hub__modules > .tbr-program-hub__module {
  margin: 0;
  border-bottom: 1px solid var(--tbr-color-border);
  padding: 0.5rem 0;
  box-sizing: border-box;
}

.tbr-program-hub__module-details {
  border-bottom: 0;
  padding: 0;
}

.tbr-program-hub__module-panel {
  overflow: hidden;
}

.tbr-program-hub__module-details[open] > .tbr-program-hub__module-panel {
  animation: tbrNavDrop 720ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .tbr-program-hub__module-details[open] > .tbr-program-hub__module-panel {
    animation: none;
  }
}

/* Shared top row layout (Home, leaf link, empty heading, expandable summary). */
.tbr-program-hub__module-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  position: relative;
  padding-right: 1.75rem;
  box-sizing: border-box;
}

.tbr-program-hub__module-top > .tbr-program-hub__module-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.tbr-program-hub__module-summary {
  list-style: none;
  cursor: pointer;
}

/* Hide default marker */
.tbr-program-hub__module-summary::-webkit-details-marker {
  display: none;
}

.tbr-program-hub__module-summary::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--tbr-color-text-muted);
  border-bottom: 2px solid var(--tbr-color-text-muted);
  transform: rotate(-45deg);
  opacity: 0.75;
  flex: 0 0 auto;
  transition: transform 180ms ease;
  position: absolute;
  right: 0.35rem;
}

.tbr-program-hub__module-details[open] > .tbr-program-hub__module-summary::after,
.tbr-program-hub__group-details[open] > .tbr-program-hub__module-summary::after {
  transform: rotate(45deg);
}

/* Sidebar "Modules" parent row: modules nest inside its panel. */
.tbr-program-hub__group-panel {
  overflow: hidden;
}

.tbr-program-hub__group-details[open] > .tbr-program-hub__group-panel {
  animation: tbrNavDrop 720ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .tbr-program-hub__group-details[open] > .tbr-program-hub__group-panel {
    animation: none;
  }
}

.tbr-program-hub__module-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  padding: 0; /* Divi adds padding to h3 */
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tbr-program-hub__module-prefix {
  font-weight: 800;
}

.tbr-program-hub__module-text {
  font-weight: 400;
}

.tbr-program-hub__module-top .tbr-program-hub__module-title a,
.tbr-program-hub__lesson a {
  color: var(--tbr-color-text-strong);
  text-decoration: none;
}

.tbr-program-hub__module-top .tbr-program-hub__module-title a:hover,
.tbr-program-hub__module-top .tbr-program-hub__module-title a:focus,
.tbr-program-hub__lesson a:hover,
.tbr-program-hub__lesson a:focus {
  text-decoration: underline;
}

.tbr-program-hub__lessons {
  margin-top: 0.5rem;
  padding-left: 0.25rem;
  border-left: 2px solid var(--tbr-color-border);
}

.tbr-program-hub__lesson {
  margin: 0.3rem 0;
  padding-left: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.tbr-program-hub__lesson a {
  display: block;
}

.tbr-program-hub__lesson-prefix,
.tbr-program-hub__lesson-text {
  display: block;
}

.tbr-program-hub__lesson-prefix {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tbr-program-hub__lesson-text {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tbr-program-hub__lesson.is-current {
  border-left: 0;
  padding-left: 0.5rem;
  margin-left: 0;
  background: var(--tbr-color-surface-2);
  border-radius: 6px;
}

.tbr-program-hub__lesson.is-current > a {
  font-weight: inherit;
}

.tbr-program-hub__curriculum--compact .tbr-program-hub__module-title {
  font-size: 1.0625rem; /* 17px at 16px base */
  margin: 0;
}

.tbr-program-hub__curriculum--compact .tbr-program-hub__lesson {
  font-size: 1.0625rem; /* 17px at 16px base */
  margin: 0.25rem 0;
}

@media (max-width: 900px) {
  .tbr-program-hub__curriculum--compact .tbr-program-hub__module-title,
  .tbr-program-hub__curriculum--compact .tbr-program-hub__lesson {
    font-size: 0.875rem; /* 14px at 16px base */
  }
}

/*
 * Course menu — Reno School palette (shell #tbr-course-nav + lesson sticky outline).
 * Comparison target: peach column, frosted (not solid) highlights, no row borders, small carets.
 */
.tbr-course-nav,
.tbr-lesson-layout__nav {
  /* 3px tracking at 16px root; use rem so large + mobile match the spec (not em × font-size). */
  --tbr-nav-letter-spacing: 0.1875rem;
  /* Nav text sizes: top-level rows (Home, Modules…), module/lesson number, module/lesson title. */
  --tbr-nav-size-top: 2rem; /* 32px */
  --tbr-nav-size-number: 1.125rem; /* 18px */
  --tbr-nav-size-title: 1rem; /* 16px */
  /* Top-level row icons (program "Menu icons" tab). */
  --tbr-nav-icon-size: 2.25rem; /* 36px tall */
  --tbr-nav-icon-gap: 1rem;
}

.tbr-course-nav .tbr-program-hub__nav-icon,
.tbr-lesson-layout__nav .tbr-program-hub__nav-icon {
  display: block;
  flex: 0 0 auto;
  /* Fixed square slot (icon centred in it) so labels line up whatever each icon's width. */
  height: var(--tbr-nav-icon-size);
  width: var(--tbr-nav-icon-size);
  object-fit: contain;
}

/* Icon rows: icon + label side by side; the icon's bottom sits on the text baseline
   (an image's flex baseline is its bottom edge), matching the mockup. */
.tbr-course-nav .tbr-program-hub__module-title:has(> .tbr-program-hub__nav-icon),
.tbr-course-nav .tbr-program-hub__module-title a:has(> .tbr-program-hub__nav-icon),
.tbr-lesson-layout__nav .tbr-program-hub__module-title:has(> .tbr-program-hub__nav-icon),
.tbr-lesson-layout__nav .tbr-program-hub__module-title a:has(> .tbr-program-hub__nav-icon) {
  flex-wrap: nowrap;
  align-items: baseline;
  column-gap: var(--tbr-nav-icon-gap);
}

/* Long labels ("Facebook Community") wrap beside the icon instead of dropping under it. */
.tbr-course-nav .tbr-program-hub__nav-icon + .tbr-program-hub__module-prefix,
.tbr-lesson-layout__nav .tbr-program-hub__nav-icon + .tbr-program-hub__module-prefix {
  flex: 1 1 0;
  min-width: 0;
}

.tbr-course-nav .tbr-program-hub__module-title,
.tbr-lesson-layout__nav .tbr-program-hub__module-title,
.tbr-course-nav .tbr-program-hub__lesson-prefix,
.tbr-course-nav .tbr-program-hub__lesson-text,
.tbr-lesson-layout__nav .tbr-program-hub__lesson-prefix,
.tbr-lesson-layout__nav .tbr-program-hub__lesson-text {
  letter-spacing: var(--tbr-nav-letter-spacing);
}

/* Nav fonts: number text (module/lesson prefix), title text, then top-level rows.
   Number + top-level text: no tracking, and no faux bold for single-weight display
   faces (fonts with a real bold still use it). */
.tbr-course-nav .tbr-program-hub__module-prefix,
.tbr-course-nav .tbr-program-hub__lesson-prefix,
.tbr-lesson-layout__nav .tbr-program-hub__module-prefix,
.tbr-lesson-layout__nav .tbr-program-hub__lesson-prefix {
  font-family: var(--tbr-font-nav-number);
  font-size: var(--tbr-nav-size-number);
  font-synthesis: none;
  /* Same InDesign tracking as the top level (10 = 0.01em). One line height for module + lesson numbers. */
  letter-spacing: 0.01em;
  line-height: 1.125;
}

.tbr-course-nav .tbr-program-hub__module-text,
.tbr-course-nav .tbr-program-hub__lesson-text,
.tbr-lesson-layout__nav .tbr-program-hub__module-text,
.tbr-lesson-layout__nav .tbr-program-hub__lesson-text {
  font-family: var(--tbr-font-nav-title);
  font-size: var(--tbr-nav-size-title);
  /* InDesign spec: tracking 150 (= 0.15em), leading 18 on 16. Set on the span itself so em uses its own size. */
  letter-spacing: 0.15em;
  line-height: 1.125;
}

/* Module title / subtitle always sits on its own line under the number (flex rows and plain links). */
.tbr-course-nav .tbr-program-hub__module-text,
.tbr-lesson-layout__nav .tbr-program-hub__module-text {
  display: block;
  flex-basis: 100%;
}

.tbr-course-nav .tbr-program-hub__module--home .tbr-program-hub__module-prefix,
.tbr-course-nav .tbr-program-hub__group-summary .tbr-program-hub__module-prefix,
.tbr-lesson-layout__nav .tbr-program-hub__module--home .tbr-program-hub__module-prefix,
.tbr-lesson-layout__nav .tbr-program-hub__group-summary .tbr-program-hub__module-prefix {
  font-family: var(--tbr-font-nav-top);
  font-size: var(--tbr-nav-size-top);
  text-transform: none;
  /* InDesign spec: tracking 10 (= 0.01em), kerning Metrics (browser default). */
  letter-spacing: 0.01em;
}

.tbr-course-nav .tbr-program-hub__modules > .tbr-program-hub__module,
.tbr-lesson-layout__nav .tbr-program-hub__modules > .tbr-program-hub__module {
  border-bottom: none;
  padding: 0;
}

.tbr-course-nav .tbr-program-hub__module--home > .tbr-program-hub__module-top,
.tbr-course-nav .tbr-program-hub__module--faq > .tbr-program-hub__module-top,
.tbr-course-nav .tbr-program-hub__module--leaf > .tbr-program-hub__module-top,
.tbr-lesson-layout__nav .tbr-program-hub__module--home > .tbr-program-hub__module-top,
.tbr-lesson-layout__nav .tbr-program-hub__module--leaf > .tbr-program-hub__module-top {
  padding: 0;
}

.tbr-course-nav .tbr-program-hub__module--home .tbr-program-hub__module-title,
.tbr-course-nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title,
.tbr-lesson-layout__nav .tbr-program-hub__module--home .tbr-program-hub__module-title,
.tbr-lesson-layout__nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title {
  margin: 0;
  width: 100%;
}

.tbr-course-nav .tbr-program-hub__module--home .tbr-program-hub__module-title a,
.tbr-course-nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title a,
.tbr-lesson-layout__nav .tbr-program-hub__module--home .tbr-program-hub__module-title a,
.tbr-lesson-layout__nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title a {
  /* Same flex row + gap as .tbr-program-hub__module-title, so number → title spacing
     matches the expandable modules (an inline layout here collapsed the gap). */
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.4rem;
  column-gap: var(--tbr-nav-icon-gap, 0.4rem); /* icon → label */
  width: 100%;
  box-sizing: border-box;
  padding: 0.85rem 0.7rem;
  color: var(--tbr-nav-text, #1f1d1e);
  text-decoration: none;
  background: var(--tbr-nav-peach, #ffe4d3);
  transition: background-color 120ms ease, color 120ms ease;
}

.tbr-course-nav .tbr-program-hub__module--home .tbr-program-hub__module-title a:hover,
.tbr-course-nav .tbr-program-hub__module--home .tbr-program-hub__module-title a:focus-visible,
.tbr-course-nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title a:hover,
.tbr-course-nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title a:focus-visible,
.tbr-lesson-layout__nav .tbr-program-hub__module--home .tbr-program-hub__module-title a:hover,
.tbr-lesson-layout__nav .tbr-program-hub__module--home .tbr-program-hub__module-title a:focus-visible,
.tbr-lesson-layout__nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title a:hover,
.tbr-lesson-layout__nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title a:focus-visible {
  background: rgba(255, 255, 255, 0.45);
  color: var(--tbr-nav-text, #1f1d1e);
}

.tbr-course-nav .tbr-program-hub__module--home .tbr-program-hub__module-title a:focus-visible,
.tbr-course-nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title a:focus-visible,
.tbr-lesson-layout__nav .tbr-program-hub__module--home .tbr-program-hub__module-title a:focus-visible,
.tbr-lesson-layout__nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title a:focus-visible {
  outline: 2px solid var(--tbr-color-accent, #fbbba1);
  outline-offset: 2px;
}

.tbr-course-nav .tbr-program-hub__module--home .tbr-program-hub__module-title a:active,
.tbr-course-nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title a:active,
.tbr-lesson-layout__nav .tbr-program-hub__module--home .tbr-program-hub__module-title a:active,
.tbr-lesson-layout__nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title a:active {
  background: var(--tbr-nav-pressed-bg, #f9bda5);
  color: var(--tbr-nav-pressed-text, #ffe4d3);
}

.tbr-course-nav .tbr-program-hub__module--home .tbr-program-hub__module-title a[aria-current="page"],
.tbr-course-nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title a[aria-current="page"],
.tbr-lesson-layout__nav .tbr-program-hub__module--home .tbr-program-hub__module-title a[aria-current="page"],
.tbr-lesson-layout__nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title a[aria-current="page"] {
  background: var(--tbr-nav-active-bg, rgba(255, 255, 255, 0.7));
  color: var(--tbr-nav-text, #1f1d1e);
}

.tbr-course-nav .tbr-program-hub__module:has(.tbr-program-hub__empty--lessons) > .tbr-program-hub__module-top,
.tbr-lesson-layout__nav .tbr-program-hub__module:has(.tbr-program-hub__empty--lessons) > .tbr-program-hub__module-top {
  padding: 0.85rem 0.7rem;
  color: var(--tbr-nav-text, #1f1d1e);
  background: var(--tbr-nav-peach, #ffe4d3);
}

.tbr-course-nav .tbr-program-hub__module-summary,
.tbr-lesson-layout__nav .tbr-program-hub__module-summary {
  position: relative;
  padding: 0.85rem 2.25rem 0.85rem 0.7rem;
  margin: 0;
  background: var(--tbr-nav-module-header-bg, transparent);
  color: var(--tbr-nav-text, #1f1d1e);
  transition: background-color 120ms ease, color 120ms ease;
}

.tbr-course-nav .tbr-program-hub__module-summary .tbr-program-hub__module-title,
.tbr-lesson-layout__nav .tbr-program-hub__module-summary .tbr-program-hub__module-title {
  color: inherit;
}

.tbr-course-nav .tbr-program-hub__module-details[open] > .tbr-program-hub__module-summary,
.tbr-lesson-layout__nav .tbr-program-hub__module-details[open] > .tbr-program-hub__module-summary {
  /* Frosted strip on peach — not solid #fff (reads harsh on reference). */
  background-color: rgba(255, 255, 255, 0.7);
  color: var(--tbr-nav-text, #1f1d1e);
}

.tbr-course-nav .tbr-program-hub__module-summary:hover,
.tbr-course-nav .tbr-program-hub__module-summary:focus-visible,
.tbr-lesson-layout__nav .tbr-program-hub__module-summary:hover,
.tbr-lesson-layout__nav .tbr-program-hub__module-summary:focus-visible {
  background: #ffffff;
  color: var(--tbr-nav-text, #1f1d1e);
  transition: 0.3s ease-in-out;
}

.tbr-course-nav .tbr-program-hub__module-details[open] > .tbr-program-hub__module-summary:hover,
.tbr-course-nav .tbr-program-hub__module-details[open] > .tbr-program-hub__module-summary:focus-visible,
.tbr-lesson-layout__nav .tbr-program-hub__module-details[open] > .tbr-program-hub__module-summary:hover,
.tbr-lesson-layout__nav .tbr-program-hub__module-details[open] > .tbr-program-hub__module-summary:focus-visible {
  background-color: #ffffff;
  color: var(--tbr-nav-text, #1f1d1e);
}

.tbr-course-nav .tbr-program-hub__module-summary:focus-visible,
.tbr-lesson-layout__nav .tbr-program-hub__module-summary:focus-visible {
  outline: 2px solid var(--tbr-color-accent, #fbbba1);
  outline-offset: -2px;
}

.tbr-course-nav .tbr-program-hub__module-summary:active,
.tbr-lesson-layout__nav .tbr-program-hub__module-summary:active {
  background: var(--tbr-nav-pressed-bg, #f9bda5);
  color: var(--tbr-nav-pressed-text, #ffe4d3);
}

/* Chevron: top-right with row padding inset (not centered on the extreme edge). */
.tbr-course-nav .tbr-program-hub__module-summary::after,
.tbr-lesson-layout__nav .tbr-program-hub__module-summary::after {
  content: "";
  display: block;
  width: 0.375rem; /* 60% of prior 0.625rem */
  height: 0.375rem;
  border: 0;
  border-right: 1.5px solid var(--tbr-nav-text, #1f1d1e);
  border-bottom: 1.5px solid var(--tbr-nav-text, #1f1d1e);
  transform: rotate(-45deg);
  opacity: 0.9;
  flex: 0 0 auto;
  transition: transform 180ms ease, opacity 120ms ease;
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  margin: 0;
}

.tbr-course-nav .tbr-program-hub__module-details[open] > .tbr-program-hub__module-summary::after,
.tbr-lesson-layout__nav .tbr-program-hub__module-details[open] > .tbr-program-hub__module-summary::after,
.tbr-course-nav .tbr-program-hub__group-details[open] > .tbr-program-hub__module-summary::after,
.tbr-lesson-layout__nav .tbr-program-hub__group-details[open] > .tbr-program-hub__module-summary::after {
  transform: rotate(45deg);
}

@media (min-width: 901px) {
  .tbr-course-nav .tbr-program-hub__module-summary,
  .tbr-lesson-layout__nav .tbr-program-hub__module-summary {
    padding-right: 2.75rem;
  }

  .tbr-course-nav .tbr-program-hub__module-summary::after,
  .tbr-lesson-layout__nav .tbr-program-hub__module-summary::after {
    top: 1.375rem; /* 22px — matches nav row padding */
    right: 1.375rem;
    width: 0.42rem; /* 60% of prior 0.7rem */
    height: 0.42rem;
  }
}

.tbr-course-nav .tbr-program-hub__module-panel,
.tbr-lesson-layout__nav .tbr-program-hub__module-panel {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.tbr-course-nav .tbr-program-hub__module-panel .tbr-program-hub__lessons,
.tbr-lesson-layout__nav .tbr-program-hub__module-panel .tbr-program-hub__lessons {
  margin-top: 0;
  padding: 0;
  border-left: none;
  background: var(--tbr-nav-submenu-bg, #d9c6b9);
  -webkit-box-shadow: inset 0 6px 10px -10px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 6px 10px -10px rgba(0, 0, 0, 0.2);
}

.tbr-course-nav .tbr-program-hub__lesson--lt-module-intro,
.tbr-course-nav .tbr-program-hub__lesson--lt-module-outro,
.tbr-lesson-layout__nav .tbr-program-hub__lesson--lt-module-intro,
.tbr-lesson-layout__nav .tbr-program-hub__lesson--lt-module-outro {
  border-left: 0;
  padding-left: 0;
  margin-left: 0;
}

.tbr-course-nav .tbr-program-hub__lesson,
.tbr-lesson-layout__nav .tbr-program-hub__lesson {
  margin: 0;
  padding-left: 0.5rem;
  border-bottom: 1px solid rgba(255, 243, 235, 0.3);
}

.tbr-course-nav .tbr-program-hub__lesson a,
.tbr-lesson-layout__nav .tbr-program-hub__lesson a {
  color: var(--tbr-nav-submenu-text, #ffffff);
  padding: 0.45rem 0.65rem;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}

/* Non-current: hover/focus/active match current lesson (transparent row, dark text). */
.tbr-course-nav .tbr-program-hub__lesson:not(.is-current) > a:hover,
.tbr-course-nav .tbr-program-hub__lesson:not(.is-current) > a:focus-visible,
.tbr-lesson-layout__nav .tbr-program-hub__lesson:not(.is-current) > a:hover,
.tbr-lesson-layout__nav .tbr-program-hub__lesson:not(.is-current) > a:focus-visible {
  background: transparent;
  color: var(--tbr-nav-text, #1f1d1e);
  opacity: 0.5;
  -webkit-transition: opacity 0.4s ease-in-out, background-color 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out, background-color 0.4s ease-in-out;
}

.tbr-course-nav .tbr-program-hub__lesson:not(.is-current) > a:hover .tbr-program-hub__lesson-prefix,
.tbr-course-nav .tbr-program-hub__lesson:not(.is-current) > a:hover .tbr-program-hub__lesson-text,
.tbr-course-nav .tbr-program-hub__lesson:not(.is-current) > a:focus-visible .tbr-program-hub__lesson-prefix,
.tbr-course-nav .tbr-program-hub__lesson:not(.is-current) > a:focus-visible .tbr-program-hub__lesson-text,
.tbr-lesson-layout__nav .tbr-program-hub__lesson:not(.is-current) > a:hover .tbr-program-hub__lesson-prefix,
.tbr-lesson-layout__nav .tbr-program-hub__lesson:not(.is-current) > a:hover .tbr-program-hub__lesson-text,
.tbr-lesson-layout__nav .tbr-program-hub__lesson:not(.is-current) > a:focus-visible .tbr-program-hub__lesson-prefix,
.tbr-lesson-layout__nav .tbr-program-hub__lesson:not(.is-current) > a:focus-visible .tbr-program-hub__lesson-text {
  color: inherit;
}

.tbr-course-nav .tbr-program-hub__lesson a:focus-visible,
.tbr-lesson-layout__nav .tbr-program-hub__lesson a:focus-visible {
  outline: 2px solid var(--tbr-color-accent, #fbbba1);
  outline-offset: -2px;
}

/* Pressed state (non-current only): apply to the row, not the link. */
.tbr-course-nav .tbr-program-hub__lesson:not(.is-current):active,
.tbr-lesson-layout__nav .tbr-program-hub__lesson:not(.is-current):active {
  background-color: var(--tbr-nav-pressed-bg, #f9bda5);
}

.tbr-course-nav .tbr-program-hub__lesson.is-current,
.tbr-lesson-layout__nav .tbr-program-hub__lesson.is-current {
  background: transparent;
  padding-left: 0.5rem;
  margin: 0;
  border-radius: 0;
}

/* Current lesson: dark text only — no row background; no hover/active fill (tan shows through). */
.tbr-course-nav .tbr-program-hub__lesson.is-current > a,
.tbr-lesson-layout__nav .tbr-program-hub__lesson.is-current > a {
  background: transparent;
  color: var(--tbr-nav-text, #1f1d1e);
  font-weight: inherit;
  opacity: 0.5;
  -webkit-transition: opacity 0.4s ease-in-out, background-color 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out, background-color 0.4s ease-in-out;
}

.tbr-course-nav .tbr-program-hub__lesson.is-current > a .tbr-program-hub__lesson-prefix,
.tbr-course-nav .tbr-program-hub__lesson.is-current > a .tbr-program-hub__lesson-text,
.tbr-lesson-layout__nav .tbr-program-hub__lesson.is-current > a .tbr-program-hub__lesson-prefix,
.tbr-lesson-layout__nav .tbr-program-hub__lesson.is-current > a .tbr-program-hub__lesson-text {
  color: inherit;
}

.tbr-course-nav .tbr-program-hub__lesson.is-current > a:hover,
.tbr-course-nav .tbr-program-hub__lesson.is-current > a:focus-visible,
.tbr-course-nav .tbr-program-hub__lesson.is-current > a:active,
.tbr-lesson-layout__nav .tbr-program-hub__lesson.is-current > a:hover,
.tbr-lesson-layout__nav .tbr-program-hub__lesson.is-current > a:focus-visible,
.tbr-lesson-layout__nav .tbr-program-hub__lesson.is-current > a:active {
  background: transparent;
  color: var(--tbr-nav-text, #1f1d1e);
}

.tbr-course-nav .tbr-program-hub__module-top .tbr-program-hub__module-title a:hover,
.tbr-course-nav .tbr-program-hub__module-top .tbr-program-hub__module-title a:focus,
.tbr-course-nav .tbr-program-hub__lesson a:hover,
.tbr-course-nav .tbr-program-hub__lesson a:focus,
.tbr-lesson-layout__nav .tbr-program-hub__module-top .tbr-program-hub__module-title a:hover,
.tbr-lesson-layout__nav .tbr-program-hub__module-top .tbr-program-hub__module-title a:focus,
.tbr-lesson-layout__nav .tbr-program-hub__lesson a:hover,
.tbr-lesson-layout__nav .tbr-program-hub__lesson a:focus {
  text-decoration: none;
}

/* Top-level highlight: current page (Home, Search, FAQ, links, Contact) and the open "Modules" row.
   Module rows (ONE:, Wrap Party…) keep the white strip. Desktop + mobile. */
.tbr-course-nav,
.tbr-lesson-layout__nav {
  --tbr-nav-top-active-bg: #f8ded2;
}

.tbr-course-nav .tbr-program-hub__module--home:not(.tbr-program-hub__module--leaf) .tbr-program-hub__module-title a[aria-current="page"],
.tbr-course-nav .tbr-program-hub__group-details[open] > .tbr-program-hub__group-summary,
.tbr-lesson-layout__nav .tbr-program-hub__module--home:not(.tbr-program-hub__module--leaf) .tbr-program-hub__module-title a[aria-current="page"],
.tbr-lesson-layout__nav .tbr-program-hub__group-details[open] > .tbr-program-hub__group-summary {
  background: var(--tbr-nav-top-active-bg);
}

/* Open "Modules" still shows the white hover / focus like other rows. */
.tbr-course-nav .tbr-program-hub__group-details[open] > .tbr-program-hub__group-summary:hover,
.tbr-course-nav .tbr-program-hub__group-details[open] > .tbr-program-hub__group-summary:focus-visible,
.tbr-lesson-layout__nav .tbr-program-hub__group-details[open] > .tbr-program-hub__group-summary:hover,
.tbr-lesson-layout__nav .tbr-program-hub__group-details[open] > .tbr-program-hub__group-summary:focus-visible {
  background: #ffffff;
}

/* Touch screens: a tapped row keeps :hover until the next tap elsewhere, so a module you just closed
   would stay white. On devices without real hover, hover shows the row's own state instead. */
@media (hover: none) {
  .tbr-course-nav .tbr-program-hub__module-details:not([open]) > .tbr-program-hub__module-summary:hover,
  .tbr-lesson-layout__nav .tbr-program-hub__module-details:not([open]) > .tbr-program-hub__module-summary:hover {
    background: var(--tbr-nav-module-header-bg, transparent);
  }

  .tbr-course-nav .tbr-program-hub__module-details[open] > .tbr-program-hub__module-summary:hover,
  .tbr-lesson-layout__nav .tbr-program-hub__module-details[open] > .tbr-program-hub__module-summary:hover {
    background-color: rgba(255, 255, 255, 0.7);
  }

  .tbr-course-nav .tbr-program-hub__group-details:not([open]) > .tbr-program-hub__group-summary:hover,
  .tbr-lesson-layout__nav .tbr-program-hub__group-details:not([open]) > .tbr-program-hub__group-summary:hover {
    background: var(--tbr-nav-module-header-bg, transparent);
  }

  .tbr-course-nav .tbr-program-hub__group-details[open] > .tbr-program-hub__group-summary:hover,
  .tbr-lesson-layout__nav .tbr-program-hub__group-details[open] > .tbr-program-hub__group-summary:hover {
    background: var(--tbr-nav-top-active-bg);
  }
}

/* Course sidebar nav row padding: 22px desktop (rem units).
 * Keep this late so it overrides the per-row padding set above for summary/lesson links.
 */
@media (min-width: 901px) {
  .tbr-course-nav .tbr-program-hub__module--home .tbr-program-hub__module-title a,
  .tbr-course-nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title a,
  .tbr-lesson-layout__nav .tbr-program-hub__module--home .tbr-program-hub__module-title a,
  .tbr-lesson-layout__nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title a,
  .tbr-course-nav .tbr-program-hub__module-summary,
  .tbr-lesson-layout__nav .tbr-program-hub__module-summary,
  .tbr-course-nav .tbr-program-hub__module li > a,
  .tbr-lesson-layout__nav .tbr-program-hub__module li > a,
  .tbr-course-nav .tbr-program-hub__lesson a,
  .tbr-lesson-layout__nav .tbr-program-hub__lesson a,
  .tbr-course-nav .tbr-program-hub__module:has(.tbr-program-hub__empty--lessons) > .tbr-program-hub__module-top,
  .tbr-lesson-layout__nav .tbr-program-hub__module:has(.tbr-program-hub__empty--lessons) > .tbr-program-hub__module-top {
    padding: 1.375rem; /* 22px at 16px base */
  }

  /* Optical centring (same idea as the mobile block below): move some bottom padding to the top so
     the visible space above the first line's caps matches the space below the last baseline. */
  .tbr-course-nav .tbr-program-hub__modules--nested .tbr-program-hub__module-summary,
  .tbr-course-nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title a,
  .tbr-course-nav .tbr-program-hub__module .tbr-program-hub__lesson > a,
  .tbr-lesson-layout__nav .tbr-program-hub__modules--nested .tbr-program-hub__module-summary,
  .tbr-lesson-layout__nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title a,
  .tbr-lesson-layout__nav .tbr-program-hub__module .tbr-program-hub__lesson > a {
    padding-top: 1.553rem;
    padding-bottom: 1.197rem;
  }

  .tbr-course-nav .tbr-program-hub__module--home:not(.tbr-program-hub__module--leaf) .tbr-program-hub__module-title a,
  .tbr-course-nav .tbr-program-hub__group-summary,
  .tbr-lesson-layout__nav .tbr-program-hub__module--home:not(.tbr-program-hub__module--leaf) .tbr-program-hub__module-title a,
  .tbr-lesson-layout__nav .tbr-program-hub__group-summary {
    padding-top: 1.509rem;
    padding-bottom: 1.241rem;
  }
}

/* Mobile course menu (drawer): smaller top level, and one row padding for every row —
 * lessons included — so number lines start at the same height in every row, as on desktop. */
@media (max-width: 900px) {
  .tbr-course-nav,
  .tbr-lesson-layout__nav {
    --tbr-nav-size-top: 1.75rem; /* 28px */
    /* Memories caps are ~1.04em tall, so this keeps the icon ~3px above the caps as on desktop (36px at 32px). */
    --tbr-nav-icon-size: 2rem; /* 32px */
  }

  .tbr-course-nav .tbr-program-hub__module--home .tbr-program-hub__module-title a,
  .tbr-course-nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title a,
  .tbr-lesson-layout__nav .tbr-program-hub__module--home .tbr-program-hub__module-title a,
  .tbr-lesson-layout__nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title a,
  .tbr-course-nav .tbr-program-hub__module li > a,
  .tbr-lesson-layout__nav .tbr-program-hub__module li > a,
  .tbr-course-nav .tbr-program-hub__lesson a,
  .tbr-lesson-layout__nav .tbr-program-hub__lesson a,
  .tbr-course-nav .tbr-program-hub__module:has(.tbr-program-hub__empty--lessons) > .tbr-program-hub__module-top,
  .tbr-lesson-layout__nav .tbr-program-hub__module:has(.tbr-program-hub__empty--lessons) > .tbr-program-hub__module-top {
    padding: 0.85rem 0.7rem; /* 13.6px / 11.2px */
  }

  /* Expandable rows keep their right padding for the chevron. */
  .tbr-course-nav .tbr-program-hub__module-summary,
  .tbr-lesson-layout__nav .tbr-program-hub__module-summary {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    padding-left: 0.7rem;
  }

  /* Optical centring: the line boxes leave more room under the last baseline than above the first
     line's caps, so move some bottom padding to the top (same row height). Measured in Chrome so the
     visible space above the caps matches the space below the baseline (~13.5px number rows, ~18px top level). */
  .tbr-course-nav .tbr-program-hub__modules--nested .tbr-program-hub__module-summary,
  .tbr-course-nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title a,
  .tbr-course-nav .tbr-program-hub__module .tbr-program-hub__lesson > a,
  .tbr-lesson-layout__nav .tbr-program-hub__modules--nested .tbr-program-hub__module-summary,
  .tbr-lesson-layout__nav .tbr-program-hub__module--leaf .tbr-program-hub__module-title a,
  .tbr-lesson-layout__nav .tbr-program-hub__module .tbr-program-hub__lesson > a {
    padding-top: 1.03rem;
    padding-bottom: 0.67rem;
  }

  /* Top-level rows (Home, Modules, Search, FAQ, links, Contact). */
  .tbr-course-nav .tbr-program-hub__module--home:not(.tbr-program-hub__module--leaf) .tbr-program-hub__module-title a,
  .tbr-course-nav .tbr-program-hub__group-summary,
  .tbr-lesson-layout__nav .tbr-program-hub__module--home:not(.tbr-program-hub__module--leaf) .tbr-program-hub__module-title a,
  .tbr-lesson-layout__nav .tbr-program-hub__group-summary {
    padding-top: 0.95rem;
    padding-bottom: 0.75rem;
  }
}

/* ---------------------------------------------------------------------------
   Typography specimen (/{program_base}/{slug}/typography/) — staff design
   reference. Layout chrome only: every sample must inherit the real course
   typography, so nothing here sets font-family, size, or weight on a sample.
   --------------------------------------------------------------------------- */
.tbr-type-spec {
  box-sizing: border-box;
  width: var(--tbr-content-width, 90%);
  max-width: var(--tbr-content-max-width, 67.5rem);
  margin: 0 auto 3rem;
}

.tbr-type-spec__section {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--tbr-color-border, #e5e5e5);
}

.tbr-type-spec__section-heading {
  margin: 0 0 0.35rem;
}

.tbr-type-spec__section-note {
  margin: 0 0 1.5rem;
  max-width: 62ch;
  font-family: var(--tbr-font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--tbr-color-text-muted, #666);
}

.tbr-type-spec__row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0.5rem 2rem;
  align-items: start;
  padding: 1.1rem 0;
  border-top: 1px dashed var(--tbr-color-border, #e5e5e5);
}

.tbr-type-spec__row:first-of-type {
  border-top: 0;
}

@media (max-width: 780px) {
  .tbr-type-spec__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
}

.tbr-type-spec__label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  position: sticky;
  top: 1rem;
}

.tbr-type-spec__label-name {
  font-family: var(--tbr-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tbr-color-text-strong, #111);
}

.tbr-type-spec__label-meta,
.tbr-type-spec__stack,
.tbr-type-spec__key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--tbr-color-text-muted, #666);
  word-break: break-word;
}

.tbr-type-spec__sample {
  min-width: 0;
}

/* Neutralise section spacing on borrowed component markup so rows stay compact. */
.tbr-type-spec__sample > .tbr-lesson__content,
.tbr-type-spec__sample > .tbr-lesson__deliverables-heading,
.tbr-type-spec__sample > .tbr-course-module-grid__heading,
.tbr-type-spec__sample > .tbr-program-hub__lead,
.tbr-type-spec__sample > .tbr-program-hub__title,
.tbr-type-spec__sample > .tbr-lesson__title-hero-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.tbr-type-spec__sample .tbr-type-spec__heading-sample {
  margin: 0;
}

.tbr-type-spec__body > *:first-child {
  margin-top: 0;
}

.tbr-type-spec__body > *:last-child {
  margin-bottom: 0;
}

.tbr-type-spec__badge-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.tbr-type-spec__script-sample {
  font-family: var(--tbr-font-script, var(--tbr-font-heading));
  font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
  line-height: 1.1;
  color: var(--tbr-color-text-strong, #111);
}

/* Token table */
.tbr-type-spec__table-wrap {
  overflow-x: auto;
}

.tbr-type-spec__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--tbr-font-body);
  font-size: 0.8125rem;
}

.tbr-type-spec__table th,
.tbr-type-spec__table td {
  padding: 0.55rem 0.75rem 0.55rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--tbr-color-border, #e5e5e5);
}

.tbr-type-spec__table thead th {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tbr-color-text-muted, #666);
  white-space: nowrap;
}

.tbr-type-spec__table tbody th {
  font-weight: 600;
  white-space: nowrap;
  color: var(--tbr-color-text-strong, #111);
}

.tbr-type-spec__row--unset {
  opacity: 0.62;
}

.tbr-type-spec__inline-sample {
  display: inline-block;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--tbr-color-text-strong, #111);
}

/* Font library */
.tbr-type-spec__row--family {
  align-items: start;
}

.tbr-type-spec__family-display {
  font-size: clamp(1.75rem, 3vw + 1rem, 2.75rem);
  line-height: 1.15;
  color: var(--tbr-color-text-strong, #111);
}

.tbr-type-spec__family-pangram {
  margin-top: 0.3rem;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--tbr-color-text, #1a1a1a);
}

.tbr-type-spec__family-case {
  margin-top: 0.45rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--tbr-color-text-muted, #666);
  word-break: break-word;
}

/* Colour tokens */
.tbr-type-spec__swatches {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.tbr-type-spec__swatch {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tbr-type-spec__swatch-chip {
  display: block;
  height: 3.25rem;
  border: 1px solid var(--tbr-color-border-strong, #ccc);
  border-radius: 2px;
}

.tbr-type-spec__swatch-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--tbr-color-text-strong, #111);
}

/* An unset colour token renders transparent — say so, rather than looking white. */
.tbr-type-spec__swatch--unset .tbr-type-spec__swatch-chip {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.07) 0 6px,
    transparent 6px 12px
  );
}

.tbr-type-spec__swatch--unset .tbr-type-spec__swatch-value {
  color: var(--tbr-color-text-muted, #666);
  font-style: italic;
}