/* EGE: Tutor LMS front end, brought onto the theme.
   ==================================================================================
   Loaded after Tutor's own stylesheets. See inc/portal.php for the enqueue and for the
   hooks that add page headings, since Tutor templates never run page.php.

   Tutor derives every interactive colour from a --tutor-brand-100..950 ramp which the
   plugin generates from a palette template it never actually emits, so each rule falls
   back to a hardcoded default. The ramp is redefined in inc/portal.php.

   Nothing in here uses !important unless a Tutor rule is genuinely more specific.
   ================================================================================== */

/* ---------------------------------------------------------------- page frame ----
   Tutor pages open straight under the sticky header with no breathing room, and the
   last block runs into the footer. Every Tutor wrap gets the same rhythm the rest of
   the site uses. */
.tutor-wrap,
.course-archive-page,
.tutor-course-details-page,
.tutor-dashboard,
.tutor-lesson-page,
body.tutor-lms .tutor-container{
  padding-top:2.6rem;
  padding-bottom:4.5rem;
}
.tutor-page-wrap{ padding-bottom:1rem; }

/* ------------------------------------------------------------- page heading ----
   Injected by inc/portal.php on the archive, so the page has a title like every
   other page instead of a bare sort control under the nav. Full bleed out of the
   Tutor container. */
.ege-lms-head{
  background:var(--forest); color:#fff;
  margin:0 0 2.8rem; padding:2.6rem 0;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
.ege-lms-head__inner{ max-width:74rem; margin:0 auto; padding:0 1.5rem; }
.ege-lms-head .ege-eyebrow{ color:#fff; }
.ege-lms-head .ege-eyebrow::before{ background:#fff; }
.ege-lms-head h1{
  color:#fff; font-family:var(--font-display); font-weight:var(--wt-display);
  font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.1; margin:.2rem 0 .6rem;
}
.ege-lms-head p{ color:rgba(255,255,255,.9); max-width:46rem; margin:0; line-height:1.6; }

/* ------------------------------------------------------------------ buttons ----
   Tutor buttons appear on the archive, the course page, the dashboard and inside
   lessons. All of them take the site button. */
.tutor-btn{
  font-family:var(--font-body); font-weight:var(--wt-sub); font-size:.96rem;
  border-radius:var(--radius-pill); padding:.8rem 1.5rem; border:2px solid transparent;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.tutor-btn-primary,
.tutor-btn-primary:visited{ background:var(--forest); border-color:var(--forest); color:#fff; }
.tutor-btn-primary:hover,
.tutor-btn-primary:focus{ background:var(--green-deep); border-color:var(--green-deep); color:#fff; }

.tutor-btn-outline-primary,
.tutor-btn-outline-primary:visited{ background:transparent; border-color:var(--forest); color:var(--forest); }
.tutor-btn-outline-primary:hover,
.tutor-btn-outline-primary:focus{ background:var(--forest); color:#fff; }

.tutor-btn-secondary{ background:var(--teal); border-color:var(--teal); color:#fff; }
.tutor-btn-secondary:hover{ background:var(--forest); border-color:var(--forest); color:#fff; }

.tutor-btn-ghost, .tutor-btn-link{ color:var(--teal); }
.tutor-btn-ghost:hover, .tutor-btn-link:hover{ color:var(--forest); }

/* --------------------------------------------------------------- course card ----
   Matched to .ege-photocard so a course sits beside the rest of the site's cards. */
.tutor-course-card,
.tutor-card{
  background:#fff; border:1px solid rgba(0,71,56,.12); border-top:3px solid var(--forest);
  border-radius:var(--radius-card); overflow:hidden;
  box-shadow:0 8px 24px rgba(0,71,56,.05);
  transition:transform .18s ease, box-shadow .18s ease;
}
.tutor-course-card:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(0,71,56,.10); }
/* Tutor wraps the thumbnail in its own .tutor-ratio box. Forcing a second aspect ratio on
   the outer element fought it and left a band of empty colour under the photograph, so the
   ratio box is left to do its job and only the image is told to fill it. */
.tutor-course-card__thumb, .tutor-course-thumbnail{ overflow:hidden; background:var(--teal-pale); }
.tutor-course-thumbnail .tutor-ratio, .tutor-course-card .tutor-ratio{ display:block; }
.tutor-course-card__thumb img,
.tutor-course-thumbnail img,
.tutor-course-card .tutor-ratio > img{ width:100%; height:100%; object-fit:cover; display:block; }
.tutor-course-name, .tutor-course-card__title, .tutor-course-card h3, .tutor-course-card h4{
  font-family:var(--font-display); font-weight:var(--wt-display);
  font-size:1.12rem; line-height:1.25; color:var(--forest);
}
.tutor-course-name a{ color:var(--forest); text-decoration:none; }
.tutor-course-name a:hover{ color:var(--green-mid); }

/* Tutor prints "By" followed by an empty instructor link when a course has no instructor
   assigned, which rendered as "By In EGE OUT!". Hide the block that holds the empty link
   rather than inventing an attribution. It reappears on its own once EGE assigns real
   instructors to a course. */
.tutor-course-card .tutor-meta div:has(> a:empty){ display:none; }
.tutor-course-card .tutor-meta:empty,
.tutor-course-card__author:empty{ display:none; }
.tutor-course-card .tutor-meta{ display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:center; }

/* ------------------------------------------------------------ archive filters ----
   The sort control sat flush against the sticky header with nothing around it. */
.tutor-course-filter-container,
.tutor-course-archive-filter{
  background:var(--teal-tint); border:1px solid rgba(0,71,56,.12);
  border-radius:var(--radius-card); padding:1.2rem 1.3rem;
}
.tutor-course-archive-results-count{ font-family:var(--font-body); color:var(--muted); }
.tutor-form-select, .tutor-form-control, select.tutor-form-select{
  font-family:var(--font-body); font-size:.95rem; color:var(--ink);
  background:#fff; border:1px solid rgba(0,71,56,.22); border-radius:8px; padding:.6rem .9rem;
}
.tutor-form-select:focus, .tutor-form-control:focus{
  border-color:var(--forest); outline:2px solid var(--gold); outline-offset:1px;
}

/* ------------------------------------------------------------- single course ----*/
.tutor-course-details-page h1,
.tutor-course-details-title{
  font-family:var(--font-display); font-weight:var(--wt-display); color:var(--forest);
  font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.15;
}
.tutor-course-details-page h2, .tutor-course-details-page h3{ color:var(--forest); }
.tutor-course-details-page p{ color:var(--ink); line-height:1.72; }

/* The price and enrol panel becomes an aside box.
   Scoped to .tutor-sidebar-card only. A wildcard on [class*="tutor-course-entry"] also
   matched .tutor-course-entry-box-login, which is the button group, and drew a second
   bordered panel around the Enroll button. */
.tutor-sidebar-card{
  background:var(--teal-pale); border:1px solid rgba(0,71,56,.12);
  border-top:3px solid var(--forest); border-radius:var(--radius-card); overflow:hidden;
}
.tutor-sidebar-card .tutor-card-body{ background:transparent; }
.tutor-sidebar-card .tutor-card-footer{ background:#fff; border-top:1px solid rgba(0,71,56,.12); }
.tutor-course-entry-box-login{ background:transparent; border:0; padding:0; }
.tutor-course-entry-box .tutor-fs-4,
.tutor-course-entry-box .tutor-color-black{ color:var(--forest); font-family:var(--font-body); }

/* Curriculum accordion. */
.tutor-accordion-item, .tutor-course-topic{
  border:1px solid rgba(0,71,56,.14); border-radius:10px; overflow:hidden; margin-bottom:.7rem; background:#fff;
}
.tutor-accordion-item-header, .tutor-course-topic-title{
  background:var(--teal-tint); color:var(--forest);
  font-family:var(--font-body); font-weight:var(--wt-sub); font-size:1rem;
  padding:.95rem 1.15rem;
}
/* Tutor colours this from --tutor-color-secondary and its caret from --tutor-color-primary.
   Both are redefined, but state it here too so the topic title cannot come back blue. */
.tutor-accordion-item-header,
.tutor-accordion-item-header.is-active,
.tutor-accordion-item-header:hover{ color:var(--forest); }
.tutor-accordion-item-header::after{ color:var(--forest); }
.tutor-accordion-item-header:hover{ background:var(--teal-pale); }
.tutor-accordion-item-body{ padding:.4rem 0; }
.tutor-course-content-list-item, .tutor-accordion-item-body a{
  font-family:var(--font-body); color:var(--ink); padding:.7rem 1.15rem;
}
.tutor-course-content-list-item:hover{ background:var(--teal-tint); }

/* Category chips read "Uncategorized" if nothing is set; the term is assigned in
   the seed so this is the styled case. */
.tutor-course-details-category a, .tutor-meta a{
  font-family:var(--font-body); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal); text-decoration:none;
}

/* ---------------------------------------------------------------- lesson view ----
   The learning area is its own layout with a sidebar of lessons and a content pane. */
.tutor-lesson-sidebar, .tutor-course-topics-sidebar, [class*="tutor-lesson-sidebar"]{
  background:var(--teal-tint); border-right:1px solid rgba(0,71,56,.12);
}
.tutor-lesson-sidebar h3, .tutor-lesson-sidebar .tutor-fs-6{ color:var(--forest); font-family:var(--font-body); }
.tutor-lesson-content, .tutor-lesson-wrapper{ font-family:var(--font-body); color:var(--ink); }
.tutor-lesson-content h1, .tutor-lesson-content h2, .tutor-lesson-content h3{
  font-family:var(--font-display); color:var(--forest);
}
.tutor-lesson-content p, .tutor-lesson-content li{ line-height:1.75; color:var(--ink); }

/* Progress bars. */
.tutor-progress-bar, .tutor-progress{ background:var(--teal-pale); border-radius:999px; overflow:hidden; }
.tutor-progress-value, .tutor-progress-filled{ background:var(--forest); }

/* ------------------------------------------------------------------ dashboard ----*/
.tutor-dashboard-permalinks{
  background:var(--teal-tint); border:1px solid rgba(0,71,56,.12);
  border-radius:var(--radius-card); padding:.6rem;
}
.tutor-dashboard-permalinks a{
  font-family:var(--font-body); font-size:.96rem; color:var(--ink);
  border-radius:8px; padding:.7rem .9rem; text-decoration:none;
}
.tutor-dashboard-permalinks a:hover{ background:#fff; color:var(--forest); }
.tutor-dashboard-permalinks li.active > a{ background:var(--forest); color:#fff; }

/* Tutor 4.x renamed the whole dashboard. The classes above are the 3.x names and are kept
   only so an older install still picks something up. These are the ones that actually
   render: layout, sidebar, sidebar-nav, header, body, main, and the stat and progress cards.
   Read them off the signed-in page rather than guessing, the way the brand ramp had to be. */
.tutor-dashboard-page,
.tutor-dashboard-layout{ background:#fff; }
.tutor-dashboard-body{ font-family:var(--font-body); color:var(--ink); }

.tutor-dashboard-sidebar{
  background:var(--teal-tint); border-right:1px solid rgba(0,71,56,.12);
}
.tutor-dashboard-sidebar-nav a{
  font-family:var(--font-body); font-size:.96rem; color:var(--ink);
  border-radius:8px; padding:.7rem .9rem; text-decoration:none; display:block;
}
.tutor-dashboard-sidebar-nav a:hover{ background:#fff; color:var(--forest); }
.tutor-dashboard-sidebar-nav a[aria-current],
.tutor-dashboard-sidebar-nav .is-active > a,
.tutor-dashboard-sidebar-nav li.active > a{ background:var(--forest); color:#fff; }

.tutor-dashboard-header{
  background:#fff; border-bottom:1px solid rgba(0,71,56,.12);
}
.tutor-dashboard-header-inner{ padding-top:.4rem; padding-bottom:.4rem; }
.tutor-dashboard-main{ padding-top:1.6rem; }

/* The greeting is set as a display-size heading class. Keep it in the body face so it does
   not compete with the serif page headings elsewhere. */
.tutor-profile-header-title,
.tutor-dashboard-header .tutor-text-h4{
  font-family:var(--font-body); font-weight:var(--wt-sub); color:var(--forest);
}

/* Stat and progress cards on the dashboard index. */
.tutor-stat-card,
.tutor-progress-card{
  background:#fff; border:1px solid rgba(0,71,56,.12); border-top:3px solid var(--forest);
  border-radius:var(--radius-card);
}
.tutor-stat-card-title,
.tutor-progress-card-title{
  font-family:var(--font-body); font-weight:var(--wt-sub); color:var(--forest);
}
.tutor-avatar-initials{ background:var(--forest); color:#fff; font-family:var(--font-body); }
.tutor-avatar-border{ border-color:rgba(0,71,56,.2); }

.tutor-dashboard-nav-mobile{ background:var(--teal-tint); border-top:1px solid rgba(0,71,56,.12); }
.tutor-dashboard-nav-mobile-text{ font-family:var(--font-body); color:var(--ink); }

.tutor-dashboard-content-inner{ background:transparent; }
.tutor-dashboard .tutor-card{ background:#fff; }

/* --------------------------------------------------------------------- tables ----*/
.tutor-table thead th{
  font-family:var(--font-body); font-size:.76rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--teal); background:var(--teal-tint); border-bottom:1px solid rgba(0,71,56,.14);
}
.tutor-table td{ font-family:var(--font-body); color:var(--ink); }

/* ---------------------------------------------------------------- empty states ----*/
.tutor-empty-state, .tutor-no-course{
  background:var(--teal-tint); border:1px solid rgba(0,71,56,.12);
  border-radius:var(--radius-card); padding:2rem; color:var(--ink); font-family:var(--font-body);
}

/* ------------------------------------------------------------------ mobile ----*/
@media (max-width:960px){
  .ege-lms-head{ padding:2rem 0; margin-bottom:2rem; }
  .tutor-wrap, .course-archive-page, .tutor-course-details-page, .tutor-dashboard{
    padding-top:1.8rem; padding-bottom:3rem;
  }
}

/* =================================================================== sign in ====
   The login form appears in two places: on /dashboard/ when signed out, and as a gate on
   any protected lesson. It was styled inline in inc/portal.php and scoped to that one
   page, so the lesson gate rendered raw. It lives here now and applies wherever Tutor
   prints the form. */
.tutor-login-wrap{
  width:100%; max-width:30rem; margin:0 auto;
  background:#fff; border:1px solid rgba(0,71,56,.14); border-top:3px solid var(--forest);
  border-radius:var(--radius-card); box-shadow:0 10px 30px rgba(0,71,56,.06);
}
.ege-portal-signin{ padding:3.4rem 0 0; }
.tutor-login-form-wrapper{ padding:2rem 2.1rem 2.2rem; }

/* Tutor sets its greeting as a heading class, which would land as a serif display line.
   It is a form label, so it takes the body face. */
.tutor-login-wrap .tutor-h3,
.tutor-login-wrap .tutor-fs-4{
  font-family:var(--font-body); font-weight:var(--wt-sub);
  font-size:1.18rem; color:var(--forest); margin:0 0 1.4rem;
}

.tutor-login-wrap .tutor-form-control,
.tutor-login-wrap input[type=text],
.tutor-login-wrap input[type=password],
.tutor-login-wrap input[type=email]{
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--teal-tint); border:1px solid rgba(0,71,56,.2); border-radius:8px;
  padding:.85rem 1rem; width:100%;
}
.tutor-login-wrap .tutor-form-control::placeholder{ color:var(--muted); opacity:1; }
.tutor-login-wrap .tutor-form-control:focus{
  border-color:var(--forest); outline:2px solid var(--gold); outline-offset:1px; background:#fff;
}

.tutor-login-wrap .tutor-btn-primary{
  background:var(--forest); border-color:var(--forest); color:#fff;
  font-family:var(--font-body); font-weight:var(--wt-sub); font-size:1rem;
  border-radius:var(--radius-pill); padding:.9rem 1.6rem;
}
.tutor-login-wrap .tutor-btn-primary:hover{ background:var(--green-deep); border-color:var(--green-deep); color:#fff; }
/* Tutor marks this button as block; keep it full width so it reads as the primary action. */
.tutor-login-wrap .tutor-btn-block{ display:block; width:100%; text-align:center; margin-top:1.1rem; }

/* Forgot Password renders red or pink from Tutor defaults. It is a quiet secondary link. */
.tutor-login-wrap .tutor-btn-link-gray,
.tutor-login-wrap .tutor-btn-link,
.tutor-login-wrap a{
  color:var(--teal); font-family:var(--font-body); text-decoration:none;
  border-bottom:1px solid transparent; padding:0;
}
.tutor-login-wrap .tutor-btn-link-gray:hover,
.tutor-login-wrap a:hover{ color:var(--forest); border-bottom-color:var(--forest); }
.tutor-login-wrap .tutor-btn-link-gray{ display:inline-block; margin:.15rem 0 .2rem; font-size:.92rem; }

/* Remember me: Tutor leaves a native checkbox with the label crushed against it. */
.tutor-login-wrap .tutor-form-check,
.tutor-login-wrap .tutor-login-form-wrapper form > div:has(> input[type=checkbox]){
  display:flex; align-items:center; gap:.55rem; margin:1.1rem 0 .35rem;
}
.tutor-login-wrap input[type=checkbox]{
  appearance:none; -webkit-appearance:none;
  width:1.1rem; height:1.1rem; flex:none; margin:0;
  border:1.5px solid rgba(0,71,56,.45); border-radius:4px; background:#fff;
  display:inline-grid; place-content:center; cursor:pointer;
}
.tutor-login-wrap input[type=checkbox]::before{
  content:""; width:.62rem; height:.62rem; transform:scale(0);
  background:var(--forest); border-radius:2px; transition:transform .12s ease;
}
.tutor-login-wrap input[type=checkbox]:checked{ border-color:var(--forest); }
.tutor-login-wrap input[type=checkbox]:checked::before{ transform:scale(1); }
.tutor-login-wrap input[type=checkbox]:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.tutor-login-wrap .tutor-label{ font-family:var(--font-body); font-size:.92rem; color:var(--ink); margin:0; cursor:pointer; }

.tutor-login-error{ font-family:var(--font-body); color:var(--error); font-size:.9rem; }

/* Help row beneath the card, added by inc/portal.php on the sign-in screen. */
.ege-portal-help__inner{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.3rem; max-width:56rem; margin:0 auto; }
@media (max-width:700px){ .ege-portal-help__inner{ grid-template-columns:1fr; } }

/* The portal hero is shorter than a page hero and sits over a bright classroom frame, so
   it carries a heavier scrim and a white eyebrow. */
.ege-hero--portal{ min-height:min(38vh, 340px); }
.ege-hero--portal .ege-hero__inner{ padding:2.6rem 0; }
.ege-hero--portal::after{
  background:
    linear-gradient(90deg,
      rgba(0,71,56,.95) 0%,
      rgba(0,71,56,.86) 38%,
      rgba(0,71,56,.62) 70%,
      rgba(0,71,56,.42) 100%),
    linear-gradient(0deg, rgba(1,34,22,.42) 0%, rgba(1,34,22,0) 60%);
}
.ege-hero--portal .ege-eyebrow{ color:#fff; }
.ege-hero--portal .ege-eyebrow::before{ background:#fff; }

/* ------------------------------------------------- specificity top-ups ----
   Tutor sets these on a longer selector than the block above, so they are restated
   here with the parent included rather than reached for with !important. */
.tutor-accordion .tutor-accordion-item-header,
.tutor-accordion .tutor-accordion-item-header.is-active{
  background:var(--teal-tint); color:var(--forest);
}
.tutor-accordion .tutor-accordion-item-header:hover{ background:var(--teal-pale); }

.tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-body{ background:var(--teal-pale); }
.tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-footer{ background:#fff; }
/* The price line, e.g. "Free". */
.tutor-single-course-sidebar .tutor-card-body .tutor-fs-4,
.tutor-single-course-sidebar .tutor-card-body .tutor-fs-5,
.tutor-single-course-sidebar .tutor-card-body .tutor-color-black{
  color:var(--forest); font-family:var(--font-body); font-weight:var(--wt-sub);
}

/* ============================================================ learning area ====
   The full-screen course player at /courses/<course>/lessons/<lesson>/.

   Tutor 4.x renders this as an Alpine.js app: the sidebar carries `:class="{ 'is-open':
   sidebarOpen }"` and the layout depends on its own CSS positioning a fixed 320px column.
   On this install it renders collapsed, with the nav stacked inline above the content and
   the content unconstrained. Verified NOT to be caused by this stylesheet: removing lms.css
   entirely produced exactly the same broken layout, only in Tutor's default colours.

   So the layout is built here rather than relied upon. These rules stand on their own if the
   script never initialises, and they do not fight it if it does: the mobile block below hands
   control back at small widths, where the sidebar is a slide-over panel.

   Classes are the ones Tutor actually emits, read off the signed-in page. */

.tutor-learning-area{ background:#fff; min-height:100vh; }

/* --- top bar --- */
.tutor-learning-header{
  position:sticky; top:0; z-index:30;
  background:#fff; border-bottom:1px solid rgba(0,71,56,.14);
}
/* One source of truth for the bar height. The sidebar is offset by exactly this, so the
   two cannot drift: padding alone made the bar ~90px while the sidebar still assumed 62px,
   and the course title at the top of the sidebar was clipped behind it. */
.tutor-learning-area{ --ege-lms-bar:62px; }
.tutor-learning-header-inner{
  display:flex; align-items:center; gap:1rem;
  max-width:none; padding:0 1.25rem; height:var(--ege-lms-bar); box-sizing:border-box;
}
.tutor-learning-header-content{ display:flex; align-items:center; gap:.9rem; min-width:0; }
.tutor-learning-header-title{
  font-family:var(--font-body); font-weight:var(--wt-sub); font-size:1rem;
  color:var(--forest); margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tutor-learning-header-back a, .tutor-learning-header-back button{ color:var(--teal); }
.tutor-learning-header-back svg{ stroke:currentColor; }

/* --- two column body --- */
@media (min-width:1000px){
  .tutor-learning-area-body{ padding-inline-start:320px; position:relative; }

  .tutor-learning-sidebar{
    position:fixed; inset-block-start:var(--ege-lms-bar); inset-inline-start:0;
    width:320px; height:calc(100vh - var(--ege-lms-bar));
    display:flex; flex-direction:column; gap:1rem;
    padding:1rem .85rem; overflow-y:auto;
    background:var(--teal-tint); border-inline-end:1px solid rgba(0,71,56,.14);
    /* Alpine toggles a hidden state on small screens. On desktop the panel is always in
       view, so any transform or opacity it may have set is overridden here. */
    opacity:1; pointer-events:auto; transform:none;
  }
}

.tutor-learning-sidebar-curriculum{ display:flex; flex-direction:column; gap:.9rem; }
/* Tutor repeats the course title at the top of the sidebar for wide screens. Give it room
   and let it wrap rather than sitting flush against the bar. */
.tutor-learning-sidebar > .tutor-lg-flex{
  padding:.25rem .35rem .6rem; border-bottom:1px solid rgba(0,71,56,.12); margin-bottom:.2rem;
}
.tutor-learning-sidebar .tutor-learning-header-title{ white-space:normal; font-size:.92rem; line-height:1.35; }

/* --- progress --- */
.tutor-learning-progress{ padding:.2rem .35rem .1rem; }
.tutor-learning-progress-text{
  font-family:var(--font-body); font-size:.82rem; font-weight:var(--wt-sub); color:var(--forest);
}
.tutor-progress-bar{
  background:rgba(0,71,56,.14); border-radius:999px; height:6px; overflow:hidden; margin-top:.4rem;
}
.tutor-progress-bar-fill{
  background:var(--forest); height:100%; border-radius:999px;
  width:var(--tutor-progress-width, 0%);
}

/* --- curriculum nav --- */
.tutor-learning-nav{ display:flex; flex-direction:column; gap:2px; }
.tutor-learning-nav-header{
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .6rem; border-radius:8px; cursor:pointer;
}
.tutor-learning-nav-header:hover{ background:#fff; }
.tutor-learning-nav-header-title{
  font-family:var(--font-body); font-weight:var(--wt-sub); font-size:.9rem; color:var(--forest);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tutor-learning-nav-topic .tutor-learning-nav-body{ padding-inline-start:.35rem; }
.tutor-learning-nav a, .tutor-learning-nav-item{
  display:flex; align-items:flex-start; gap:.55rem;
  font-family:var(--font-body); font-size:.9rem; line-height:1.4; color:var(--ink);
  padding:.55rem .6rem; border-radius:8px; text-decoration:none;
}
.tutor-learning-nav a:hover{ background:#fff; color:var(--forest); }
.tutor-learning-nav a[aria-current], .tutor-learning-nav .active > a{
  background:var(--forest); color:#fff;
}

/* --- content column --- */
.tutor-learning-area-content{ padding-top:2.4rem; padding-bottom:4rem; }
.tutor-learning-area-container{
  max-width:48rem; margin:0 auto; padding-inline:1.5rem;
}
.tutor-lesson-wrapper, .tutor-lesson-content{
  font-family:var(--font-body); color:var(--ink);
}
.tutor-lesson-content h1, .tutor-lesson-content h2, .tutor-lesson-content h3{
  font-family:var(--font-display); color:var(--forest);
}
.tutor-lesson-content p, .tutor-lesson-content li{ line-height:1.75; color:var(--ink); }
.tutor-lesson-content > :first-child{ margin-top:0; }

/* --- footer bar with the completion action --- */
.tutor-learning-area-footer{
  border-top:1px solid rgba(0,71,56,.14); background:#fff;
  padding:1rem 1.5rem; display:flex; align-items:center; justify-content:flex-end; gap:1rem;
}
@media (min-width:1000px){ .tutor-learning-area-footer{ padding-inline-start:calc(320px + 1.5rem); } }
.tutor-mark-as-complete-button{
  background:var(--forest); border-color:var(--forest); color:#fff;
  border-radius:var(--radius-pill); padding:.75rem 1.4rem;
  font-family:var(--font-body); font-weight:var(--wt-sub);
}
.tutor-mark-as-complete-button:hover{ background:var(--green-deep); color:#fff; }
.tutor-mark-as-complete-button svg{ stroke:currentColor; }

/* --- small screens: the sidebar is a slide-over, so leave it to the script --- */
@media (max-width:999px){
  .tutor-learning-area-body{ padding-inline-start:0; }
  .tutor-learning-sidebar{
    background:var(--teal-tint); border-bottom:1px solid rgba(0,71,56,.14);
    padding:1rem .85rem;
  }
  .tutor-learning-area-container{ padding-inline:1.15rem; }
}