/* The guide is physically attached to its lesson. The answer opens around
   measured paper hinges; its accessible text always has a normal-flow home. */
.chapter-position .lesson-progress { display:grid;grid-template-columns:minmax(0,1fr) 142px;grid-template-rows:auto auto;column-gap:1rem;row-gap:.12rem;align-items:center;min-height:48px;margin-bottom:1rem; }
.chapter-position .lesson-progress > strong { grid-column:1;grid-row:1;align-self:end; }
.chapter-position .chapter-check-count { grid-column:1;grid-row:2;align-self:start; }
.guided-learning .lesson-source-link.source-attachment { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.35rem;grid-column:2;grid-row:1/3;position:relative;min-height:46px;width:142px;margin:0;padding:.55rem .65rem .55rem 2.2rem;border:1px solid #aebb9f;border-radius:3px;background:#fffef8;box-shadow:0 3px 8px #23372b13;color:var(--ua-green);text-align:left;line-height:1.35; }
.source-attachment-title { font-size:.8125rem;font-weight:600; }
.source-attachment-page { font-size:.75rem;color:var(--ua-muted);white-space:nowrap;font-variant-numeric:tabular-nums; }
.source-clip { display:block;width:36px;height:60px;transform:translate(0,0) rotate(-12deg);transform-origin:50% 35%;pointer-events:none; }
.source-clip svg { display:block;width:100%;height:100%;overflow:visible;transition:transform 220ms var(--ua-ease); }
.source-clip[data-state="released"] { transform:translate(5px,-8px) rotate(12deg); }
.source-attachment > .source-clip { position:absolute;left:5px;top:-11px;width:29px;height:49px; }
.guided-learning .source-attachment:focus-visible { outline:2px solid var(--ua-green);outline-offset:4px; }

/* This binding lives outside the source scroller, so following a passage can
   never scroll the attachment or its Follow action out of view. */
.guided-learning .dissector-heading.clipped-dissector-heading,.dissector-heading.clipped-dissector-heading { position:relative;isolation:isolate;background:#e8eddf;padding:15px 13px 12px 58px;gap:.65rem; }
.clipped-dissector-heading::before { content:'';position:absolute;z-index:-1;inset:10px 7px 5px 26px;border:1px solid #c7d2bb;border-radius:2px;background:#fffefa;box-shadow:0 3px 7px #23372b0f; }
.clipped-dissector-heading > .dissector-heading-clip { position:absolute;left:12px;top:0;width:36px;height:60px;z-index:2; }
.clipped-dissector-heading .dissector-position { font-size:.6875rem;line-height:1.4; }
.clipped-dissector-heading .dissector-position::before { display:none; }
.clipped-dissector-heading .dissector-heading-actions { gap:.35rem; }
.clipped-dissector-heading #follow-dissector { background:transparent;border:1px solid #aebb9f;font-size:.75rem;padding:.4rem .5rem;white-space:nowrap; }
.clipped-dissector-heading #follow-dissector[aria-pressed="true"] { background:#e9efdf;color:var(--ua-green);border-color:#78905f; }
.clipped-dissector-heading #close-dissector { font-size:.75rem;padding:.4rem .5rem; }
@media(hover:hover) and (pointer:fine) {
  .guided-learning .source-attachment:hover { background:#fffef8;color:var(--ua-green);box-shadow:0 4px 10px #23372b21; }
  .source-attachment:hover .source-clip svg { transform:rotate(6deg) translateY(-2px); }
  .source-attachment:active .source-clip svg { transform:rotate(2deg) translateY(1px); }
}
.keyboard-input .source-clip svg { transition:none; }

/* Compact answer disclosure: one canonical answer, no folded or cloned text. */
.station-comparison .expected-answer-sheet { padding:0;border:1px solid #c4ceb8;border-radius:8px;background:var(--ua-paper);box-shadow:none;overflow:hidden; }
.answer-receipt-header { position:relative;padding:.85rem 1.1rem;border-bottom:1px solid var(--ua-line);background:var(--ua-wash); }
.answer-receipt-header > strong { display:flex;align-items:center;gap:.55rem;color:var(--ua-green);font-size:.875rem;line-height:1.4; }
.answer-fold-host { position:relative;min-width:0; }
.answer-fold-content { position:relative;display:flow-root;box-sizing:border-box;margin:0;padding:1rem 1.1rem 1.2rem;color:var(--ua-ink); }
.answer-fold-content > p { font-size:1.125rem;line-height:1.6;color:var(--ua-ink);margin:0;overflow-wrap:anywhere; }
/* The opaque contents panel has its own scrolling list and distinct current row. */
.workspace > #sections-panel { width:min(390px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - var(--header-height,116px) - var(--route-height,62px));padding:1rem;gap:1rem;overflow:hidden;background:var(--ua-paper); }
.sections-heading { display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-shrink:0; }
#sections-panel .sections-heading h1 { margin:0;min-width:0;font-family:var(--ua-display);font-size:1.4rem;line-height:1.2;overflow-wrap:anywhere; }
#sections-panel #sections-close { display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;padding:0;margin:0;border:1px solid var(--ua-line);border-radius:4px;color:var(--ua-green);background:transparent; }
#sections-close svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round; }
#sections-panel #topics { flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:3px;gap:0; }
#sections-panel .topic { display:grid;grid-template-columns:24px minmax(0,1fr);gap:.65rem;min-height:56px;padding:.8rem .65rem;white-space:normal;line-height:1.45;width:100%;color:var(--ua-ink);background:transparent; }
#sections-panel .topic > span:last-child { min-width:0;overflow-wrap:anywhere; }
#sections-panel .topic[aria-current="step"] { background:var(--ua-green);color:var(--ua-paper);font-weight:600; }
#sections-panel .topic[aria-current="step"] .number { color:var(--ua-gold); }
#sections-panel .topic:focus-visible { outline:2px solid var(--ua-green);outline-offset:1px; }
@media(hover:hover) and (pointer:fine) {
 #sections-panel .topic:not([aria-current="step"]):hover { background:var(--ua-wash); }
 #sections-panel .topic[aria-current="step"]:hover { background:var(--ua-green); }
}
@media(max-width:740px) {
  .chapter-position .lesson-progress { grid-template-columns:minmax(0,1fr) 136px;column-gap:.65rem; }
  .guided-learning .lesson-source-link.source-attachment { width:136px;padding-left:2rem; }
  .source-attachment > .source-clip { left:4px; }
  .guided-learning .dissector-heading.clipped-dissector-heading,.dissector-heading.clipped-dissector-heading { padding-left:51px;padding-right:11px;gap:.4rem; }
  .clipped-dissector-heading > .dissector-heading-clip { left:9px;width:33px;height:56px; }
  .clipped-dissector-heading::before { left:23px; }
  .answer-receipt-header { padding:.9rem 1rem .8rem; }
  .answer-fold-content { padding:1rem 1rem 1.15rem; }
}
@media(max-width:380px) {
  .chapter-position .lesson-progress { grid-template-columns:minmax(0,1fr) 126px;column-gap:.5rem; }
  .chapter-position .lesson-progress > strong { font-size:.8125rem; }
  .chapter-position .chapter-check-count { font-size:.75rem; }
  .guided-learning .lesson-source-link.source-attachment { width:126px;padding-left:1.9rem;padding-right:.45rem;gap:.2rem; }
  .source-attachment-title { font-size:.75rem; }
  .source-attachment-page { font-size:.6875rem; }
  .clipped-dissector-heading .dissector-heading-actions { gap:.15rem;flex-direction:column;align-items:stretch; }
  .clipped-dissector-heading #follow-dissector,.clipped-dissector-heading #close-dissector { font-size:.75rem;padding-inline:.45rem;width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  .source-clip svg { transition:none; }
  .source-attachment:is(:hover,:active) .source-clip svg { transform:none; }

}

.expected-answer-sheet { scroll-margin-block:16px; }