/* ============================================================
   PEAK ACADEMY — additions only

   Everything here sits on top of site.css and uses its tokens. Nothing
   restates a colour, a font or a spacing step: if this file defines a value
   the site already has, the page will drift the next time the palette moves.

   Scoped under .academy so the docs and legal pages, which share the same
   .docs shell, are untouched.
   ============================================================ */

/* ---------- controls ---------- */
.ac-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  margin: var(--s6) 0 var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.ac-search {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: 1 1 260px;
  padding: var(--s3) var(--s4);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.ac-search:focus-within { border-color: var(--accent); }
.ac-search i { width: 16px; height: 16px; color: var(--ink-muted); flex: none; }
.ac-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  outline: none;
}
.ac-search input::placeholder { color: var(--ink-muted); }
.ac-count {
  margin: 0;
  color: var(--ink-muted);
  font-size: .85rem;
  font-family: var(--mono);
}

/* ---------- track sections ---------- */
.ac-track { margin: var(--s8) 0; scroll-margin-top: 88px; }
.ac-track-head { margin-bottom: var(--s5); }
.ac-track-head h2 { margin-bottom: var(--s2); }
.ac-track-blurb { margin: 0; color: var(--ink-soft); }

.ac-list { display: grid; gap: var(--s3); }

/* ---------- a course ---------- */
.ac-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  scroll-margin-top: 88px;
  transition: border-color .18s ease, background .18s ease;
}
.ac-card:hover { border-color: rgba(240,238,230,.22); }
.ac-card.is-open { border-color: var(--accent); background: var(--paper-3); }
/* A finished course stays legible — dimmed, not greyed into unreadability,
   because people re-read the one they finished last week. */
.ac-card.is-done .ac-title { color: var(--ink-soft); }
.ac-card.is-done .ac-icon { color: var(--accent); }

.ac-head {
  display: flex;
  align-items: center;
  gap: var(--s4);
  width: 100%;
  padding: var(--s4) var(--s5);
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ac-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.ac-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: var(--paper-3);
  color: var(--ink-soft);
}
.ac-card.is-open .ac-icon { background: var(--accent); color: var(--night-0); }
.ac-icon i { width: 18px; height: 18px; }

.ac-head-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ac-title { font-weight: 600; line-height: 1.3; }
.ac-tagline { color: var(--ink-muted); font-size: .88rem; line-height: 1.45; }

.ac-head-meta { flex: none; }
.ac-chev { flex: none; color: var(--ink-muted); display: grid; place-items: center; }
.ac-chev i { width: 18px; height: 18px; transition: transform .18s ease; }
.ac-card.is-open .ac-chev i { transform: rotate(180deg); }

/* ---------- the opened panel ---------- */
.ac-panel {
  padding: 0 var(--s5) var(--s5);
  border-top: 1px solid var(--line);
  margin-top: 0;
}
.ac-make { margin: var(--s4) 0 var(--s3); }
.ac-tools { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); }

.ac-recipe {
  background: var(--night-0);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--s4);
  margin-bottom: var(--s5);
}
.ac-recipe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.ac-recipe-label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ac-copy {
  padding: 4px 12px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
.ac-copy:hover { border-color: var(--accent); color: var(--ink); }
.ac-recipe-body { margin: 0; color: var(--ink); line-height: 1.65; }

.ac-sub {
  margin: var(--s5) 0 var(--s3);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ac-steps, .ac-tips { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--s3); }
.ac-steps li, .ac-tips li { line-height: 1.65; color: var(--ink-soft); }
.ac-tips { list-style: none; padding-left: 0; }
.ac-tips li { padding-left: var(--s5); position: relative; }
.ac-tips li::before {
  content: '▲';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: .7rem;
  top: .35em;
}

.ac-src {
  margin: var(--s5) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: .8rem;
}
.ac-src-label { font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }

.ac-mark {
  margin-top: var(--s4);
  padding: 6px 16px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}
.ac-mark:hover { border-color: var(--accent); color: var(--ink); }
.ac-mark[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--night-0); }

/* ---------- worked chains ---------- */
.ac-flows-section { margin-top: var(--s9); scroll-margin-top: 88px; }
.ac-flow {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  margin-bottom: var(--s4);
}
.ac-flow h3 { margin: 0 0 var(--s2); }
.ac-flow-blurb { margin: 0 0 var(--s4); color: var(--ink-muted); font-size: .9rem; }
.ac-flow-path {
  margin: 0;
  padding-left: 1.3rem;
  display: grid;
  gap: var(--s2);
}
.ac-flow-path li { color: var(--ink-soft); }
.ac-flow-path a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.ac-flow-path a:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 640px) {
  .ac-head { padding: var(--s4); gap: var(--s3); }
  .ac-panel { padding: 0 var(--s4) var(--s4); }
  .ac-head-meta { display: none; }   /* the level badge is the first thing to go */
}

@media (prefers-reduced-motion: reduce) {
  .ac-card, .ac-chev i { transition: none; }
}