/* Path UI is scoped so the lesson theatre does not alter existing study tools. */
.path-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
  font-size: 12px;
  color: var(--muted);
}
.path-topline a {
  text-decoration: none;
}
.path-topline a:hover {
  color: var(--ink);
}
.path-hero {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 32px;
  align-items: center;
  background: var(--forest);
  color: #f4efde;
  border: 1px solid #3a5744;
  padding: 44px;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
}
.path-hero h1 {
  font-size: clamp(32px, 4vw, 49px);
  font-weight: 650;
  letter-spacing: -0.055em;
  color: inherit;
  line-height: 1.12;
  margin: 16px 0;
}
.path-hero h1 em {
  font-family: Georgia, serif;
  font-weight: 400;
  color: #e0bb6e;
}
.path-hero p {
  color: #c9d8c8;
  line-height: 1.8;
}
.path-hero .mini {
  color: #e0bb6e;
}
.path-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 24px 0;
}
.path-pills span {
  font-size: 11px;
  border: 1px solid #47604d;
  padding: 8px 10px;
  border-radius: 30px;
}
.path-mascot {
  position: relative;
  text-align: center;
  padding-top: 65px;
}
.path-mascot > .nam-pet {
  transform: scale(3.4);
  margin: 30px auto 65px;
}
.path-mascot-orbit {
  position: absolute;
  top: 0;
  right: 0;
  font-family: monospace;
  font-size: 35px;
  color: #e0bb6e;
  transform: rotate(12deg);
}
.path-mascot p {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 19px;
}
.path-status-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.path-status-strip strong,
.path-status-strip span {
  display: block;
}
.path-status-strip strong {
  font-size: 23px;
  margin-bottom: 6px;
}
.path-status-strip span {
  font-size: 12px;
  color: var(--muted);
}
.path-progress {
  margin: 26px 0;
}
.path-progress p {
  color: var(--muted);
  line-height: 1.7;
}
.path-progress progress {
  width: 100%;
  accent-color: var(--gold);
  height: 8px;
}
.path-progress > span {
  font-size: 12px;
  color: var(--muted);
}
.path-roadmap {
  display: grid;
  gap: 28px;
  margin: 32px 0;
}
.path-act {
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface);
}
.path-act-head {
  padding: 26px 28px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.path-act-head h2 {
  font-size: 25px;
  margin: 8px 0;
}
.path-act-head p {
  color: var(--muted);
  margin: 0;
}
.path-act-head > span {
  font-size: 11px;
  white-space: nowrap;
  color: var(--muted);
}
.path-lesson-list {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.path-lesson-list li {
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.path-lesson-list li:nth-child(odd) {
  border-right: 1px solid var(--line);
}
.path-lesson-list a,
.path-lesson-list li > div {
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  height: 100%;
}
.path-lesson-list a:hover {
  background: var(--paper);
}
.quest-number {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 12px;
}
.path-lesson-list small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 6px;
}
.path-lesson-list b {
  margin-left: auto;
}
.path-lesson-list .mastered .quest-number {
  background: var(--forest);
  color: #e0bb6e;
}
.path-lesson-list .locked {
  color: var(--muted);
}
.path-lesson-list li span:nth-child(2) {
  font-size: 13px;
}
.path-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.path-rewards,
.path-admin {
  padding: 28px;
}
.path-rewards p,
.path-admin p,
.path-next p {
  color: var(--muted);
  line-height: 1.7;
}
.path-next {
  margin: 36px 0;
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: 24px;
}
.path-next h2 {
  margin: 12px 0;
}
.path-admin {
  margin-top: 24px;
}
.path-admin summary {
  cursor: pointer;
}
.path-admin form {
  margin-top: 20px;
  display: grid;
  gap: 14px;
}
.path-admin input,
.path-admin select {
  margin-top: 8px;
}
.quest-heading h1 {
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -0.04em;
  margin: 12px 0;
}
.quest-heading > p {
  color: var(--muted);
  line-height: 1.6;
}
.quest-stages {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  margin: 26px 0;
  scroll-margin-top: 130px;
}
.quest-stages button {
  flex: 1;
  padding: 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 12px;
  font-size: 13px;
}
.quest-stages button[aria-current] {
  background: var(--forest);
  color: #f5ddb0;
}
.quest-panel[hidden] {
  display: none;
}
.nam-lesson {
  display: flex;
  gap: 28px;
  align-items: center;
  padding: 28px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.nam-lesson p {
  font-size: 16px;
  line-height: 1.8;
  margin: 10px 0 0;
}
.nam-teacher {
  padding: 25px;
  flex-shrink: 0;
}
.nam-teacher .nam-pet {
  transform: scale(1.8);
}
.nam-teaching .pet-hand.right {
  animation: nam-wave 1.3s ease-in-out 2;
}
.lesson-notes {
  margin: 20px 0;
}
.lesson-notes article {
  display: flex;
  gap: 20px;
  padding: 18px 6px;
  border-bottom: 1px solid var(--line);
}
.lesson-notes article > span {
  color: var(--muted);
  font-size: 12px;
  padding-top: 5px;
}
.lesson-notes p {
  line-height: 1.85;
  font-size: 15px;
  margin: 0;
}
.path-code {
  background: #071e15;
  color: #e7efd9;
  border-radius: 18px;
  padding: 22px;
  margin: 20px 0;
  border: 1px solid #2b4938;
  overflow: auto;
}
.path-code > span {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #c4aa6a;
}
.path-code pre {
  font-size: 14px;
  line-height: 1.8;
  margin: 12px 0 0;
  tab-size: 4;
}
.path-code pre code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.nam-extra {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 20px 0;
}
.nam-extra summary {
  cursor: pointer;
  font-size: 14px;
}
.nam-extra p {
  line-height: 1.8;
  color: var(--muted);
  margin: 16px 0 0;
}
.trace-stage {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  margin-bottom: 24px;
  text-align: center;
}
.trace-stage .nam-teacher {
  height: 115px;
  display: grid;
  place-items: center;
}
.trace-buckets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin: 32px 0;
}
.trace-bucket {
  min-width: 105px;
  max-width: 100%;
  border: 2px solid var(--gold);
  border-top: 0;
  border-radius: 0 0 28px 28px;
  min-height: 110px;
  padding: 18px;
  background: var(--paper);
  animation: bucket-arrive 0.35s ease-out;
}
.trace-bucket > span {
  display: block;
  font-family: monospace;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 15px;
}
.trace-bucket > strong {
  font-family: monospace;
  font-size: 19px;
  overflow-wrap: anywhere;
}
.trace-caption {
  padding: 16px;
  border-radius: 16px;
  background: var(--paper);
  min-height: 116px;
}
.trace-caption code {
  font-size: 15px;
}
.trace-caption p {
  color: var(--muted);
  line-height: 1.7;
  margin: 12px 0 0;
}
.trace-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
}
.trace-controls > span {
  font-size: 12px;
  color: var(--muted);
}
.trace-stage .helper {
  font-size: 11px;
  line-height: 1.7;
}
.path-check {
  border: 0;
  padding: 0;
  margin: 24px 0;
}
.path-check legend {
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
  margin-bottom: 16px;
}
.path-check label {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  margin-bottom: 10px;
  cursor: pointer;
}
.path-check label:has(input:checked) {
  border-color: var(--gold);
  background: var(--paper);
}
.quest-challenge-heading p {
  line-height: 1.7;
  color: var(--muted);
}
#path-attempt-form .field > span {
  font-size: 15px;
  line-height: 1.7;
}
#path-attempt-form input[name="code"] {
  font-family: monospace;
  padding: 16px;
}
.quest-success,
.quest-retry {
  padding: 20px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  background: var(--surface);
  border-radius: 14px;
  margin: 22px 0;
}
.quest-success p,
.quest-retry p {
  line-height: 1.7;
}
.quest-success pre {
  overflow: auto;
  line-height: 1.7;
}
.quest-clear {
  padding: 30px;
  border: 1px solid var(--gold);
  border-radius: 24px;
  margin-top: 28px;
  background: var(--surface);
}
.quest-clear h2 {
  margin: 12px 0;
}
.quest-clear p {
  line-height: 1.7;
  color: var(--muted);
}
.path-cost-note {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 30px;
}
.path-return-banner {
  margin: 20px 24px 0;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--gold);
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.7;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.path-return-banner a {
  font-weight: 700;
  white-space: nowrap;
}
@keyframes bucket-arrive {
  from {
    transform: translateY(-8px);
    opacity: 0.5;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (max-width: 800px) {
  .path-hero {
    grid-template-columns: 1fr;
    padding: 28px;
  }
  .path-mascot {
    display: none;
  }
  .path-lesson-list {
    grid-template-columns: 1fr;
  }
  .path-lesson-list li:nth-child(odd) {
    border-right: 0;
  }
  .path-act-head {
    padding: 22px;
  }
  .path-status-strip {
    gap: 14px;
  }
  .path-status-strip strong {
    font-size: 20px;
  }
}
@media (max-width: 500px) {
  .path-topline {
    font-size: 10px;
    gap: 10px;
  }
  .nam-lesson {
    padding: 20px;
    gap: 12px;
    align-items: flex-start;
  }
  .nam-lesson .nam-teacher {
    padding: 10px;
  }
  .nam-lesson .nam-pet {
    transform: scale(1.15);
  }
  .nam-lesson p {
    font-size: 14px;
  }
  .quest-stages button {
    font-size: 11px;
    padding: 10px 4px;
  }
  .path-hero {
    padding: 24px;
  }
  .path-act-head {
    display: block;
  }
  .path-act-head > span {
    display: block;
    margin-top: 12px;
  }
  .trace-stage {
    padding: 20px 14px;
  }
  .trace-bucket {
    min-width: 76px;
    padding: 12px;
  }
  .trace-buckets {
    gap: 10px;
  }
  .trace-controls button {
    padding: 10px;
    font-size: 12px;
  }
  .path-rewards,
  .path-admin,
  .quest-clear {
    padding: 22px;
  }
  .path-return-banner {
    margin: 15px 18px;
    display: block;
  }
  .path-return-banner a {
    display: block;
    margin-top: 8px;
  }
  .path-code {
    padding: 18px;
  }
  .path-actions > .btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .trace-bucket,
  .nam-teaching .pet-hand.right {
    animation: none;
  }
}
[data-motion="off"] .trace-bucket,
[data-motion="off"] .nam-teaching .pet-hand.right {
  animation: none;
}

.path-act-head {
  cursor: pointer;
  list-style: none;
}
.path-act-head::-webkit-details-marker {
  display: none;
}
.path-act:not([open]) .path-act-head {
  border-bottom: 0;
}
.path-reflection {
  border-left: 3px solid var(--gold);
  padding: 6px 20px;
  margin: 24px 0;
}
.path-reflection p {
  color: var(--muted);
  line-height: 1.7;
  margin: 10px 0;
}
.path-assembly {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  margin: 24px 0;
}
.path-assembly legend {
  font-weight: 600;
}
.path-assembly p {
  color: var(--muted);
  line-height: 1.7;
}
.assembly-blocks {
  display: grid;
  gap: 12px;
}
.assembly-blocks > div {
  background: var(--surface);
  padding: 16px;
  border-radius: 12px;
}
.assembly-blocks pre {
  overflow: auto;
  line-height: 1.7;
  font-size: 13px;
}
.assembly-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 20px;
}
.assembly-slots select {
  display: block;
  width: 100%;
  margin-top: 8px;
}