/*
 * Curriculum tree -- the one shared accordion component for course
 * hierarchy, reused by the admin curriculum builder, the public course
 * detail page, and the chapter-reader sidebar. Three different token
 * families feed it (admin dashboard, public course page, chapter-reader
 * sidebar) so each surface bridges its own tokens into a small set of
 * --curriculum-* custom properties rather than this file guessing a
 * fallback chain (the dashboard tokens are defined globally at :root, so a
 * naive var() fallback chain would never actually reach the other two).
 */

.dashboard-page .curriculum-tree {
  --curriculum-border: var(--dashboard-border);
  --curriculum-surface: var(--dashboard-surface);
  --curriculum-surface-soft: var(--dashboard-accent-soft);
  --curriculum-heading: var(--dashboard-heading);
  --curriculum-muted: var(--dashboard-muted);
  --curriculum-accent: var(--dashboard-accent);
  --curriculum-radius: var(--radius-md);
  --curriculum-ease: var(--ease);
}

.course-sidebar .curriculum-tree {
  --curriculum-border: var(--border);
  --curriculum-surface: var(--surface);
  --curriculum-surface-soft: var(--surface-2);
  --curriculum-heading: var(--text);
  --curriculum-muted: var(--muted);
  --curriculum-accent: var(--brand);
  --curriculum-radius: 10px;
  --curriculum-ease: 160ms ease;
}

.public-card .curriculum-tree {
  --curriculum-border: var(--color-border);
  --curriculum-surface: var(--color-surface);
  --curriculum-surface-soft: var(--color-surface-soft);
  --curriculum-heading: var(--color-heading);
  --curriculum-muted: var(--color-muted);
  --curriculum-accent: var(--color-primary);
  --curriculum-radius: var(--radius-sm);
  --curriculum-ease: 160ms ease;
}

/* Shell -- restrained typography (no uppercase, no highlight box), polished states.
   Top-level nodes read as ONE cohesive bordered list with thin dividers
   between rows, not a stack of separate boxed cards with gaps between them
   -- the latter reads as excessive whitespace once there's more than one
   or two sections. */
.curriculum-tree {
  --curriculum-border: var(--curriculum-border, #dfe4ee); /* safety fallback outside a known scope */
  border: 1px solid var(--curriculum-border);
  border-radius: var(--curriculum-radius);
  overflow: hidden;
}

.curriculum-tree__node {
  margin: 0;
}

.curriculum-tree__node[data-depth="0"] + .curriculum-tree__node[data-depth="0"] {
  border-top: 1px solid var(--curriculum-border);
}

.curriculum-tree__node:not([data-depth="0"]) {
  margin-left: 14px;
  padding-left: 12px;
  border-left: 2px solid var(--curriculum-border);
}

/* Narrow sidebar: the same margin+padding compounding through several
   nested levels can eat most of the column's width before any title text
   even starts -- keep the same visual "this is nested" cue but with a much
   smaller step, so 3-4+ levels stay legible in a ~280px rail. Header padding
   is also tighter here -- a nav rail with 100+ chapters needs a much denser
   list than a spacious content card. */
.course-sidebar .curriculum-tree__node:not([data-depth="0"]) {
  margin-left: 8px;
  padding-left: 8px;
}

.course-sidebar .curriculum-tree__header {
  padding: 7px 10px;
}

/* The base 140px title floor (fine on the spacious public/admin surfaces)
   is wider than a ~280px nav rail can afford once nesting margin, the
   chevron, and (on a locked node) the lock icon are all subtracted --
   the count badge had nowhere left on that flex line and dropped to a
   line of its own. Letting the title shrink past its own min-content
   width here keeps the count anchored on the same line as the title's
   first line; the title itself still wraps onto a second line via
   overflow-wrap when it's long, exactly as intended, it just no longer
   drags the count down with it. */
.course-sidebar .curriculum-tree__title {
  min-width: 0;
  flex-basis: 70px;
}

.curriculum-tree__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 0.92rem;
  font-weight: 620;
  letter-spacing: normal;
  text-transform: none;
  color: var(--curriculum-heading);
  background: var(--curriculum-surface);
  transition: background var(--curriculum-ease);
}

.curriculum-tree__header::-webkit-details-marker {
  display: none;
}

.curriculum-tree__header::marker {
  content: "";
}

.curriculum-tree__header:hover {
  background: color-mix(in srgb, var(--curriculum-accent) 6%, var(--curriculum-surface));
}

.curriculum-tree__header:focus-visible {
  outline: 2px solid var(--curriculum-accent);
  outline-offset: -2px;
}

.curriculum-tree__chevron {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--curriculum-muted);
  border-bottom: 2px solid var(--curriculum-muted);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.curriculum-tree__node[open] > .curriculum-tree__header .curriculum-tree__chevron {
  transform: rotate(-135deg);
}

.curriculum-tree__title {
  /* grow to fill the row, but never shrink below a legible width -- when
     the row is too tight (deep nesting in a narrow sidebar) the title wraps
     onto its own line under the chevron/count instead of being squeezed
     into invisibility by text-overflow: ellipsis on a zero-width flex item. */
  flex: 1 1 140px;
  min-width: 140px;
  overflow-wrap: break-word;
}

.curriculum-tree__count {
  flex: none;
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 9px;
  border-radius: 999px;
  color: var(--curriculum-muted);
  background: var(--curriculum-surface-soft);
}

/* Locked section -- a whole node whose subtree has nothing the current
   visitor can open (no owned/unlocked chapter, no free preview). It
   renders as a plain link (not a <details>/<summary> disclosure) so it
   never expands; the entire row is the click target straight to checkout.
   Deliberately NOT styled as muted/disabled -- a grayed-out row reads as
   "nothing here", the opposite of what should entice a purchase. Instead it
   keeps full-strength heading text plus an accent-tinted background and an
   accent lock icon/chevron, so it reads as "there's more behind this"
   rather than "this option isn't available". The chevron is the same one
   an unlocked, collapsed section shows (this node just never receives
   [open], so it never flips) -- visually consistent with every other
   section, only accent-tinted. No separate "Purchase" text label -- the
   tint and the accent icons already say "open me", without spending an
   extra wrapped line on text in a narrow sidebar rail. */
.curriculum-tree__header--locked {
  cursor: pointer;
  text-decoration: none;
  color: var(--curriculum-heading);
  background: color-mix(in srgb, var(--curriculum-accent) 7%, var(--curriculum-surface));
  border-left: 2px solid color-mix(in srgb, var(--curriculum-accent) 45%, transparent);
}

.curriculum-tree__header--locked:hover {
  /* The base rule's text-decoration: none loses to the global a:hover
     underline (app.css) on specificity (an element+pseudo-class selector
     beats a plain class selector) -- repeat it here, at :hover specificity,
     so it actually wins while hovering. */
  text-decoration: none;
  background: color-mix(in srgb, var(--curriculum-accent) 14%, var(--curriculum-surface));
}

.curriculum-tree__header--locked .curriculum-tree__lock-icon {
  opacity: 1;
  filter: saturate(1.4);
}

.curriculum-tree__header--locked .curriculum-tree__count {
  color: var(--curriculum-accent);
  background: color-mix(in srgb, var(--curriculum-accent) 16%, var(--curriculum-surface-soft));
}

.curriculum-tree__header--locked .curriculum-tree__chevron {
  border-color: var(--curriculum-accent);
}

.curriculum-tree__lock-icon {
  flex: none;
  font-size: 0.85em;
  opacity: 0.75;
}

/* Locked-section header is now a <div> wrapping the actual <a> link plus an
   optional sibling About button -- a <button> can't validly nest inside an
   <a>, and clicking one nested that way would also fire the anchor's own
   navigation. .curriculum-tree__header-link carries the flex layout the
   anchor used to provide on its own so the row looks identical either way. */
.curriculum-tree__header-link {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.curriculum-tree__header-link:hover,
.curriculum-tree__header-link:focus-visible {
  text-decoration: none;
  color: inherit;
}

/* "About" trigger -- only rendered when a node actually has a remark (see
   curriculum-tree.php). Sits inline in the header row (locked or normal).
   Matches [data-course-info-trigger] so it opens the site's existing
   shared info modal (assets/js/app.js initWhyPurchaseModal()) -- that
   handler's own preventDefault() is also what stops one living inside a
   <summary> from toggling that <details> open/closed as a side effect. */
.curriculum-tree__about-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 10px;
  border: 1px solid var(--curriculum-border);
  border-radius: 999px;
  background: var(--curriculum-surface);
  color: var(--curriculum-accent);
  cursor: pointer;
  transition: border-color var(--curriculum-ease), background var(--curriculum-ease);
}

.curriculum-tree__about-btn:hover,
.curriculum-tree__about-btn:focus-visible {
  border-color: var(--curriculum-accent);
  background: color-mix(in srgb, var(--curriculum-accent) 10%, var(--curriculum-surface));
}

.curriculum-tree__body {
  padding: 0;
}

.curriculum-tree__node[data-depth="0"] .curriculum-tree__body {
  padding: 2px 10px 10px;
}

/* Admin leaf rows + node controls -- compact, reuses existing .btn/.data-table__input classes */
.curriculum-tree__leaf-list {
  list-style: none;
  margin: 6px 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.curriculum-tree__leaf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
}

.curriculum-tree__leaf:hover {
  background: var(--curriculum-surface-soft);
}

.curriculum-tree__leaf-title {
  font-size: 0.86rem;
  color: var(--curriculum-heading);
}

.curriculum-tree__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--curriculum-border);
  background: color-mix(in srgb, var(--curriculum-surface-soft) 55%, transparent);
}

.curriculum-tree__manage-prompt {
  display: flex;
  padding: 0.55rem 0.75rem 0;
  justify-content: flex-end;
}

.curriculum-tree__leaf-manage {
  flex: 0 0 auto;
}

/* "Add child section" needs its own optional remark textarea below the
   compact title+button row -- unlike its single-row sibling forms here,
   it takes the controls row's full width (wrapping onto its own line) and
   stacks its two rows internally instead. */
.curriculum-tree__add-child-form {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  gap: 6px;
}

.curriculum-tree__add-child-form > .form-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.curriculum-tree__add-child-form .curriculum-tree__remark-editor {
  padding: 0;
  border-top: 0;
  background: none;
}

/* Admin-only: the collapsible "add/edit remark" editor beneath the row of
   inline section-management forms above. Collapsed by default since most
   sections won't have one and a full textarea in every row would dominate
   the builder's layout. */
.curriculum-tree__remark-editor {
  padding: 0 14px 10px;
  border-top: 1px solid var(--curriculum-border);
  background: color-mix(in srgb, var(--curriculum-surface-soft) 55%, transparent);
}

.curriculum-tree__remark-editor > summary {
  padding: 8px 0;
  color: var(--curriculum-accent);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.curriculum-tree__remark-editor > summary::-webkit-details-marker {
  display: none;
}

.curriculum-tree__remark-editor-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 10px;
}

.curriculum-tree__remark-editor-form textarea {
  width: 100%;
  min-height: 120px;
  padding: 9px 11px;
  border: 1px solid var(--curriculum-border);
  border-radius: 8px;
  background: var(--curriculum-surface);
  color: var(--curriculum-heading);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.82rem;
  line-height: 1.5;
  resize: vertical;
}

.curriculum-tree__remark-editor-form textarea:focus-visible {
  outline: 2px solid var(--curriculum-accent);
  outline-offset: -1px;
}

.curriculum-tree__remark-editor-form .btn {
  align-self: flex-start;
}

.curriculum-tree__add-repo-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.curriculum-tree__add-repo-btn svg {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}

.curriculum-tree__add-repo-btn:hover {
  border-color: var(--curriculum-accent, #6366f1);
  color: var(--curriculum-accent, #6366f1);
  background: color-mix(in srgb, var(--curriculum-accent, #6366f1) 8%, var(--curriculum-surface, #ffffff));
  text-decoration: none;
}

@media (max-width: 640px) {
  .curriculum-tree__controls {
    flex-direction: column;
    align-items: stretch;
  }

  .curriculum-tree__leaf {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Free-preview indicators. A section whose subtree holds a free-preview
   chapter shows an emerald "Free" pill beside its title (with the count
   when several), so a visitor recognises free content without expanding
   anything; reader-sidebar leaves get a small matching tag. Emerald is the
   site's existing "Free Preview" colour (.chapter-action-btn--preview);
   mixing it with the host's heading token keeps it legible on every light
   and dark theme. */
.curriculum-tree__free {
  --curriculum-free: #10b981;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  border: 1px solid color-mix(in srgb, var(--curriculum-free) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--curriculum-free) 14%, var(--curriculum-surface));
  color: color-mix(in srgb, var(--curriculum-free) 70%, var(--curriculum-heading));
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

.curriculum-tree__free-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--curriculum-free);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--curriculum-free) 22%, transparent);
}

.curriculum-tree__header--has-free {
  box-shadow: inset 3px 0 0 color-mix(in srgb, #10b981 70%, transparent);
}

.curriculum-free-tag {
  flex: none;
  margin-left: auto;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, #10b981 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #10b981 14%, transparent);
  color: color-mix(in srgb, #10b981 70%, var(--curriculum-heading, currentColor));
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
}

.curriculum-tree__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reader sidebar rows are a 2-column grid (number | title); a row carrying
   the Free tag gets a third, auto-width column so the tag sits on the
   title's first line instead of wrapping under the number. */
.chapter-list a:has(> .curriculum-free-tag) {
  grid-template-columns: 27px 1fr auto;
}

.chapter-list a > .curriculum-free-tag {
  align-self: start;
  margin-top: 1px;
}

/* Keep the Free pill right after the section name (where the eye reads)
   instead of being pushed to the far right by the growing title; the
   chapter count keeps its own margin-left:auto on the right. */
.curriculum-tree__header--has-free .curriculum-tree__title {
  flex: 0 1 auto;
  min-width: 0;
}