/* ==========================================================================
   Guides
   ========================================================================== */
.page--guides { background: var(--paper); scroll-behavior: auto; }
.guides-hero { display: grid; gap: 18px; padding-top: clamp(36px, 5vw, 64px); padding-bottom: 34px; }
.guides-hero .h1 { max-width: 12ch; }
.guides-hero .lead { max-width: 52ch; }
.guides-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.guides-jump .chip { height: 34px; padding: 0 14px; transition: transform .2s var(--ease-out), background-color .2s; }
.guides-jump .chip:hover { transform: translateY(-2px); background: var(--lime); }
.guides-jump .chip--ink-lime:hover { background: var(--ink); }

.guides-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding-bottom: 80px; }
.toc {
  position: sticky; top: 24px; align-self: start;
  display: grid; gap: 2px;
  padding-left: 14px;
  border-left: var(--bw) solid var(--line);
}
.toc__ind {
  position: absolute; left: -2px; top: 0;
  width: 4px; height: var(--h, 36px);
  transform: translateY(var(--y, 0px));
  border-radius: 4px;
  background: var(--ink);
  transition: transform var(--dur-spring) var(--ease-spring), height .3s var(--ease-out);
}
.toc__link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px;
  font-weight: 650; font-size: 14.5px; color: var(--text-2);
  transition: color .2s, background-color .2s, transform .3s var(--ease-out);
}
.toc__link .mono { font-size: 11px; }
.toc__link:hover { color: var(--ink); transform: translateX(3px); }
.toc__link.is-active { color: var(--ink); background: var(--lime); }

.guides-content { display: grid; gap: clamp(60px, 7vw, 96px); min-width: 0; }
.gsec { display: grid; gap: 26px; scroll-margin-top: 24px; }
.gsec__head { display: grid; gap: 10px; }
.gsec__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.gsec__head--row > div:first-child { display: grid; gap: 10px; }
.gsec__n { font-size: 12px; letter-spacing: .1em; }

/* Feelings — flip cards */
.feelings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feel { perspective: 1000px; height: 250px; text-align: left; border-radius: var(--r-lg); }
.feel__inner {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .9s var(--ease-spring-soft);
}
.feel[aria-pressed="true"] .feel__inner { transform: rotateY(180deg); }
.feel__face {
  position: absolute; inset: 0;
  display: grid; align-content: space-between; gap: 10px;
  padding: 22px;
  border: var(--bw) solid var(--ink); border-radius: var(--r-lg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.feel:hover .feel__front { background: var(--lime); }
.feel__front b { font-size: clamp(30px, 2.6vw, 42px); overflow-wrap: anywhere; }
.feel__front > span { font-size: 15px; color: var(--text-2); }
.feel:hover .feel__front > span { color: var(--ink); }
.feel__front small { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.feel__back { transform: rotateY(180deg); background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--lime), 4px 4px 0 2px var(--ink); align-content: start; }
.feel__back b { font-size: 15px; color: var(--lime); }
.feel__list { display: grid; gap: 8px; font-size: 14px; }
.feel__list span { display: flex; gap: 8px; align-items: flex-start; }
.feel__list .i { flex: none; margin-top: 3px; color: var(--lime); }
.feel__back small { font-size: 12.5px; color: var(--on-ink-2); border-top: 1px solid var(--line-ink); padding-top: 10px; margin-top: auto; }

/* FAQ accordion */
.faq { display: grid; gap: 10px; }
.faq__item { border: var(--bw) solid var(--ink); border-radius: var(--r-md); background: var(--paper); overflow: hidden; transition: box-shadow .3s var(--ease-out); }
.faq__item:has([aria-expanded="true"]) { box-shadow: var(--shadow); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px;
  font-size: 17px; font-weight: 750; text-align: left;
}
.faq__q:hover { background: var(--paper-2); }
.faq__icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: var(--bw) solid var(--ink); transition: transform .5s var(--ease-spring), background-color .2s; }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(135deg); background: var(--lime); }
.faq__a p { padding: 0 20px 20px; color: var(--text-2); max-width: 70ch; font-size: 15.5px; }

/* Help ladder — horizontal slider */
.ladder-ctrl { display: flex; gap: 8px; }
.ladder {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(340px, 80%);
  gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 8px 14px 2px;
  scrollbar-width: none;
}
.ladder::-webkit-scrollbar { display: none; }
.rung {
  scroll-snap-align: start;
  position: relative;
  display: grid; align-content: start; gap: 12px; justify-items: start;
  min-height: 250px; padding: 22px;
  border: var(--bw) solid var(--ink); border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.rung::after {
  content: ""; position: absolute; top: 44px; right: -18px; width: 20px; height: 2px; background: var(--ink);
}
.rung:last-child::after { display: none; }
.rung__n {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--lime); border: var(--bw) solid var(--ink);
  font: 800 15px var(--font-mono);
}
.rung h3 { font-size: 34px; }
.rung p { color: var(--text-2); font-size: 15px; }
.rung--ink { box-shadow: 4px 4px 0 var(--lime), 4px 4px 0 2px var(--ink); }
.rung--ink p { color: var(--on-ink-2); }
.rung--ink .rung__n { border-color: var(--lime); }
.ladder-dots { display: flex; gap: 6px; }
.ladder-dots i { width: 10px; height: 10px; border-radius: 99px; border: 1.5px solid var(--ink); transition: width .5s var(--ease-spring), background-color .3s; }
.ladder-dots i.is-on { width: 34px; background: var(--ink); }

/* School resources */
.school { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.res {
  display: grid; align-content: start; gap: 10px; justify-items: start;
  padding: 22px;
  border: var(--bw) solid var(--ink); border-radius: var(--r-lg);
  background: var(--paper);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.res:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.res__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--lime); border: var(--bw) solid var(--ink); }
.res h3 { font-size: 19px; }
.res p { color: var(--text-2); font-size: 15px; }
.res__meta { display: grid; gap: 6px; margin: 2px 0 4px; }
.res__meta div { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.res__meta dd { margin: 0; }
.proto-note { font-size: 11.5px; color: var(--text-2); }

/* References */
.refs { display: grid; gap: 0; border-top: var(--bw) solid var(--ink); }
.ref { display: flex; gap: 14px; padding: 16px 4px; border-bottom: 1.5px solid var(--line); font-size: 15.5px; }
.ref__n { flex: none; font-size: 13px; padding-top: 2px; }

/* Urgent */
.gsec--urgent {
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-xl);
  background-image: var(--bricks-ink);
  box-shadow: 8px 8px 0 var(--lime), 8px 8px 0 2px var(--ink);
  gap: 18px;
}
.gsec--urgent .gsec__n { color: var(--lime); }
.gsec--urgent h2 { color: var(--lime); }
.gsec--urgent .lead { max-width: 56ch; color: var(--on-ink-2); }
.gsec--urgent .lead b { color: var(--paper); }
.gsec--urgent .btn--lime { --btn-sh: var(--paper); }

@media (max-width: 1100px) { .feelings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .guides-body { grid-template-columns: 1fr; }
  .toc { display: none; }
  .school { grid-template-columns: 1fr; }
  .gsec__head--row { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) { .feelings { grid-template-columns: 1fr; } }

/* School resources: intentionally blank until verified */
.school-pending { display: grid; gap: 14px; }
.school-table { width: 100%; border: var(--bw) dashed var(--line-strong); border-radius: var(--r-md); border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 14.5px; }
.school-table th, .school-table td { padding: 12px 14px; text-align: left; border-bottom: 1.5px dashed var(--line); }
.school-table th { font: 600 11.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.school-table tbody tr:last-child td { border-bottom: 0; }
.school-table td { color: var(--text-3); }
.faq__a .awaiting { margin: 0 20px 20px; padding: 10px 12px; }
@media (max-width: 560px) { .school-table th:nth-child(4), .school-table td:nth-child(4) { display: none; } }